Skip to content

Commit 6ffe0f1

Browse files
sagizaidorsagizaidor
authored
feat/view toggle button and combiend views (#342)
1 parent cea2c9f commit 6ffe0f1

File tree

15 files changed

+231
-65
lines changed

15 files changed

+231
-65
lines changed

‎app/internal/week.py

Whitespace-only changes.

‎app/routers/calendar_grid.py

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,19 @@ def display(self) -> str:
5151
"""Returns day date inf the format of 00 MONTH 00"""
5252
return self.date.strftime("%d %B %y").upper()
5353

54+
def dayview_format(self) -> str:
55+
"""Returns day date in the format of yyyy-mm-dd"""
56+
return self.date.strftime("%Y-%m-%d")
57+
58+
def weekview_format(self) -> str:
59+
"""Returns the first day of week in the format of yyyy-mm-dd"""
60+
day = self.date
61+
if day.strftime("%A") == "Sunday":
62+
return self.dayview_format()
63+
while day.strftime("%A") != "Sunday":
64+
day -= timedelta(days=1)
65+
return day.strftime("%Y-%m-%d")
66+
5467
def set_id(self) -> str:
5568
"""Returns day date inf the format of 00-month-0000"""
5669
return self.date.strftime("%d-%B-%Y")

‎app/routers/export.py

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,13 +27,11 @@ def export(
2727
user: CurrentUser = Depends(current_user),
2828
) -> StreamingResponse:
2929
"""Returns the Export page route.
30-
3130
Args:
3231
start_date: A date or an empty string.
3332
end_date: A date or an empty string.
3433
db: Optional; The database connection.
3534
user: user schema object.
36-
3735
Returns:
3836
A StreamingResponse that contains an .ics file.
3937
"""

‎app/routers/weekview.py

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@
1919

2020
templates = Jinja2Templates(directory=TEMPLATES_PATH)
2121

22-
2322
router = APIRouter()
2423

2524

@@ -88,5 +87,6 @@ async def weekview(
8887
{
8988
"request": request,
9089
"week": week,
90+
"view": "week",
9191
},
9292
)

‎app/static/dayview.css

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,11 @@ body {
44
flex-direction: column;
55
overflow: hidden;
66
}
7-
#day-view {
7+
.day-view-class {
88
display: flex;
99
flex: 1;
1010
flex-direction: column;
1111
position: relative;
12-
overflow-y: hidden;
1312
}
1413

1514
#top-tab {
@@ -24,6 +23,8 @@ body {
2423
margin-bottom: var(--space_xs);
2524
line-height: 1;
2625
overflow-y: scroll;
26+
-ms-overflow-style: none;
27+
scrollbar-width: none;
2728
}
2829

2930
.schedule::-webkit-scrollbar {
@@ -166,6 +167,8 @@ body {
166167
position: absolute;
167168
right: 0.5rem;
168169
bottom: 0.5rem;
170+
margin-bottom: 1.5em;
171+
z-index: 60;
169172
}
170173

171174
.plus_image {

‎app/static/grid_style.css

Lines changed: 62 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,13 @@ header div {
129129
text-align: end;
130130
}
131131

132+
.logo-container {
133+
max-width: 5em;
134+
height: auto;
135+
margin-left: auto;
136+
margin-top: 0.5em;
137+
}
138+
132139
/* Main Element Grid */
133140
main {
134141
display: flex;
@@ -429,8 +436,61 @@ main {
429436
}
430437

431438
.dates-calc {
432-
background-color: #222831;
433-
color: white;
439+
background-color: #222831;
440+
color: white;
441+
}
442+
443+
/*toggle views*/
444+
.btn-group-sm>.btn, .btn-sm {
445+
padding: .1rem .3rem !important;
446+
font-size: .7rem !important;
447+
}
448+
449+
.btn-outline-primary {
450+
border-color: var(--primary) !important;
451+
color: var(--primary) !important;
452+
}
453+
454+
.btn-outline-primary:hover {
455+
background-color: var(--primary) !important;
456+
color: white !important;
457+
}
458+
459+
.btn-group>.btn-check:checked+.btn {
460+
background-color: var(--primary) !important;
461+
color: white !important;
462+
}
463+
464+
.btn-group>.btn-check:focus+.btn {
465+
box-shadow: var(--primary) !important;
466+
}
467+
468+
#calendarview {
469+
-ms-overflow-style: none;
470+
scrollbar-width: none;
471+
}
472+
473+
#calendarview::-webkit-scrollbar {
474+
display: none;
475+
}
476+
477+
.day-view-scrollbar {
478+
overflow-y: scroll;
479+
-ms-overflow-style: none;
480+
scrollbar-width: none;
481+
}
482+
483+
.day-view-scrollbar::-webkit-scrollbar {
484+
display: none;
485+
}
486+
487+
.day-view-limitions {
488+
max-width: 30vw;
489+
max-height: 90vh
490+
}
491+
492+
.transition {
493+
transition-duration: 0.4s;
434494
}
435495

436496
#darkmode {

‎app/static/images/logo/mainlogo.svg

Lines changed: 1 addition & 0 deletions
Loading

‎app/static/js/view_toggle.js

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
function refreshview() {
2+
location.reload();
3+
}
4+
5+
function close_the_view() {
6+
dayviewdiv = document.getElementById("day-view");
7+
dayviewdiv.classList.remove("day-view-class", "day-view-limitions", "day-view-visible");
8+
dayviewdiv.innerText = '';
9+
}
10+
11+
function set_views_styles(view_element, element_id) {
12+
if (element_id == "day-view") {
13+
view_element.classList.add("day-view-class", "day-view-limitions");
14+
btn = document.getElementById('close-day-view');
15+
btn.addEventListener("click", function() {
16+
close_the_view();
17+
});
18+
}
19+
}
20+
21+
function change_view(view, day, element_id) {
22+
if (element_id == "calendarview") {
23+
close_the_view();
24+
}
25+
const path = `/${view}/${day}`;
26+
fetch(path).then(function(response) {
27+
return response.text();
28+
}).then(function(html) {
29+
view_element = document.getElementById(element_id);
30+
view_element.innerHTML = html;
31+
set_views_styles(view_element, element_id);
32+
});
33+
}
34+
35+
function set_toggle_view_btns(btn, view) {
36+
dayview_btn = document.getElementById(btn);
37+
day = dayview_btn.name;
38+
dayview_btn.addEventListener('click', function() {
39+
change_view(view, day, "calendarview");
40+
});
41+
}
42+
43+
function set_days_view_open() {
44+
const Days = document.getElementsByClassName('day');
45+
for (let i = 0; i < Days.length; i++) {
46+
let day = Days[i].title;
47+
Days[i].addEventListener('click', function() {
48+
change_view('day', day, 'day-view');
49+
});
50+
}
51+
}
52+
53+
54+
document.addEventListener(
55+
'DOMContentLoaded',
56+
function() {
57+
set_toggle_view_btns('week-view-button', 'week');
58+
set_toggle_view_btns('day-view-button', 'day');
59+
month = document.getElementById('month-view-button');
60+
month.addEventListener('click', function() {
61+
refreshview();
62+
});
63+
set_days_view_open();
64+
}
65+
)

‎app/static/weekview.css

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,20 @@
1-
:root {
2-
--primary:#30465D;
3-
--primary-variant:#FFDE4D;
4-
--secondary:#EF5454;
5-
--borders:#E7E7E7;
6-
--borders-variant:#F7F7F7;
7-
}
8-
91
.day-weekview {
10-
border-left: 1px solid var(--borders);
2+
border: 1px solid var(--borders);
113
width: 100%;
124
}
135

146
#week-view {
157
display: grid;
168
grid-template-rows: 1fr;
179
grid-template-columns: 2.3em 1fr;
10+
overflow-y: scroll;
11+
-ms-overflow-style: none;
12+
scrollbar-width: none;
1813
}
1914

15+
#week-view::-webkit-scrollbar {
16+
display: none;
17+
}
2018

2119
#week-schedule {
2220
grid-row: 1;
@@ -42,4 +40,4 @@
4240

4341
#all_day_event_in_week {
4442
color: #EF5454;
45-
}
43+
}

‎app/templates/calendar_day_view.html

Lines changed: 19 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,24 @@
11
{% extends "partials/calendar/calendar_base.html" %}
22
{% block body %}
3-
<div id="day-view">
4-
<link rel="stylesheet" type="text/css"
5-
href="{{ url_for('static', path='/dayview.css') }}">
6-
<div id="top-tab"
7-
class="d-flex justify-content-around align-items-center sticky-top">
8-
{% if view == 'day' %}
9-
<a href="/closethedayview" title="close day view"><img class="pb-1"
10-
src="{{ url_for('static', path='/images/icons/close_sidebar.svg')}}"
11-
width="15em"
12-
height="15em"></a>
13-
<span id="month-num"
14-
class="month-title fw-bold text-white">{{month}}</span>
15-
<span id="day-num" class="day-title fw-bold text-white">{{day}}</span>
16-
{% if zodiac %}
17-
<div class="zodiac-sign">
18-
<a href="https://www.horoscope.com/zodiac-signs/{{zodiac.name}}"
19-
title="Zodiac-sign: {{zodiac.name}}"
20-
target="_blank"><img
21-
src="{{ url_for('static', path='/images/zodiac/' + zodiac.name + '.svg') }}"
22-
alt="zodiac sign" width="14em" height="13em"></a>
3+
{% if view != 'week' %}
4+
{% set scrollclass = "day-view-scrollbar" %}
5+
{% else %}
6+
{% set idmodify = day %}
7+
{% endif %}
8+
<div id="day-view{{ idmodify }}" class="day-view-class {{ scrollclass }}">
9+
<link rel="stylesheet" type="text/css" href="{{ url_for('static', path='/dayview.css') }}">
10+
<div id="top-tab" class="d-flex justify-content-around align-items-center sticky-top">
11+
{% if view == 'day' %}
12+
<a href="#" title="close day view" id="close-day-view"><img class="pb-1"
13+
src="{{ url_for('static', path='/images/icons/close_sidebar.svg')}}"
14+
width="15em" height="15em"></a>
15+
<span id="month-num" class="month-title fw-bold text-white">{{month}}</span>
16+
<span id="day-num" class="day-title fw-bold text-white">{{day}}</span>
17+
{% if zodiac %}
18+
<div class="zodiac-sign">
19+
<a href="https://www.horoscope.com/zodiac-signs/{{zodiac.name}}" title="Zodiac-sign: {{zodiac.name}}"
20+
target="_blank"><img src="{{ url_for('static', path='/images/zodiac/' + zodiac.name + '.svg') }}"
21+
alt="zodiac sign" width="14em" height="13em"></a>
2322
</div>
2423
{% endif %}
2524
{% else %}

‎app/templates/calendar_monthly_view.html

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,16 @@
44
<div>
55
<div class="title">{{ day.display() }}</div>
66
<div class="sec-title">Location 0<sup>o</sup>c 00:00</div>
7+
<div class="toggle_view btn-group mt-1 mb-1 me-2 btn-group-sm" role="group" aria-label="Toggle View Mode" id="toggle-view-mode">
8+
<input type="radio" class="btn-check btn-sm" name="{{ day.dayview_format() }}" id="day-view-button" autocomplete="off">
9+
<label class="btn btn-outline-primary" for="day-view-button">DAY</label>
10+
<input type="radio" class="btn-check btn-sm" name="{{ day.weekview_format() }}" id="week-view-button" autocomplete="off">
11+
<label class="btn btn-outline-primary" for="week-view-button">WEEK</label>
12+
<input type="radio" class="btn-check btn-sm" name="month" id="month-view-button" autocomplete="on" checked>
13+
<label class="btn btn-outline-primary" for="month-view-button">MONTH</label>
14+
</div>
715
</div>
16+
<!-- TODO: replace in another page
817
<div>
918
<h3>Time calculator:</h3>
1019
<form>
@@ -18,13 +27,15 @@ <h3>Time calculator:</h3>
1827
</button>
1928
<strong><p id="demo"></p></strong>
2029
</div>
30+
-->
31+
2132
<div id="logo-div">
22-
<a href="/calendar/month">
23-
<h1 class="title">PYLENDAR</h1>
24-
</a>
25-
</div>
26-
</header>
27-
<main>
33+
<div class="logo-container">
34+
<a href="{{ url_for('calendar') }}">
35+
<img class="logo-pic mt-2 ms-3" src="{{ url_for('static', path='/images/logo/mainlogo.svg')}}">
36+
</a>
37+
</header>
38+
<main>
2839
{% include 'partials/calendar/monthly_view/monthly_grid.html' %}
29-
</main>
30-
{% endblock content %}
40+
</main>
41+
{% endblock content %}

‎app/templates/partials/calendar/calendar_base.html

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
{% extends "./partials/base.html" %}
22
{% block head %}
3-
{{super()}}
4-
<!-- CSS -->
5-
<link rel="stylesheet" type="text/css" href="{{ url_for('static', path='/grid_style.css') }}">
3+
{{super()}}
4+
5+
<!-- CSS -->
6+
<link rel="stylesheet" type="text/css" href="{{ url_for('static', path='/grid_style.css') }}">
7+
<link rel="stylesheet" href="{{ url_for('static', path='/weekview.css') }}">
68
{% endblock head %}
79
{% block page_name %}Month View{% endblock page_name %}
810
{% block body %}
@@ -19,6 +21,7 @@
1921
<!-- Scripts -->
2022
<script src="{{ url_for('static', path='/js/grid_scripts.js') }}"></script>
2123
<script src="{{ url_for('static', path='/js/grid_navigation.js') }}"></script>
24+
<script src="{{ url_for('static', path='/js/view_toggle.js') }}"></script>
2225
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
2326
<script src="{{ url_for('static', path='/js/dates_calculator.js') }}"></script>
2427
{% endblock body %}

‎app/templates/partials/calendar/monthly_view/add_week.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{% for week in weeks_block %}
22
<div class="week">
33
{% for day in week.days %}
4-
<div class="{{ day.css['day_container'] }}" id="{{ day.set_id() }}">
4+
<div class="{{ day.css['day_container'] }}" id="{{ day.set_id() }}" title="{{ day.dayview_format() }}">
55
<div class="month-day-header">
66
<div class="{{ day.css['date'] }}">{{ day }}</div>
77
<div><a href="#" class="add-small">+</a></div>

‎app/templates/partials/calendar/monthly_view/monthly_grid.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="calendar">
1+
<div class="calendar" id="calendarview">
22
<div class="calender-days-titles">
33
{% for d in week_days %}
44
{% if d == day.sday %}

0 commit comments

Comments
 (0)