Improved templating
This commit is contained in:
parent
b36ec7c403
commit
4855cf8490
141
main.py
141
main.py
|
|
@ -1,122 +1,16 @@
|
||||||
import argparse
|
import argparse
|
||||||
import bottle
|
import bottle
|
||||||
|
|
||||||
TEMPLATE_INDEX = '''
|
import templates
|
||||||
<!DOCTYPE HTML>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>My calendar</title>
|
|
||||||
<style>
|
|
||||||
|
|
||||||
* {
|
#
|
||||||
box-sizing: border-box;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.week-counter {
|
def determine_data():
|
||||||
width: 2%;
|
pass
|
||||||
text-align: center;
|
|
||||||
border-right: 1px lightgray solid;
|
|
||||||
display: inline-block;
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.calendar-grid {
|
# Template rendering
|
||||||
font-size: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.calendar-weekday-header {
|
|
||||||
text-align: center;
|
|
||||||
font-weight: bold;
|
|
||||||
|
|
||||||
border-bottom: 1px black solid;
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.calendar-day {
|
|
||||||
border-bottom: 1px lightgray solid;
|
|
||||||
border-right: 1px lightgray solid;
|
|
||||||
|
|
||||||
min-height: 100px;
|
|
||||||
font-size: 1rem;
|
|
||||||
height: 18vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.day-num.today {
|
|
||||||
background-color: red;
|
|
||||||
color: white;
|
|
||||||
padding-right: 4px;
|
|
||||||
border-radius: 7px;
|
|
||||||
margin: 5px 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.calendar-day.weekend-day {
|
|
||||||
background: pink;
|
|
||||||
}
|
|
||||||
|
|
||||||
.calendar-day .day-num {
|
|
||||||
text-align: right;
|
|
||||||
margin: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.calendar-day,.calendar-weekday-header {
|
|
||||||
width: 14%;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.month-header {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<h1 class="month-header">August 2022</h1>
|
|
||||||
<div class="calendar-grid">
|
|
||||||
<div class="week-row">
|
|
||||||
<div class="week-counter"></div>
|
|
||||||
<div class="calendar-weekday-header">Monday</div>
|
|
||||||
<div class="calendar-weekday-header">Tuesday</div>
|
|
||||||
<div class="calendar-weekday-header">Wednesday</div>
|
|
||||||
<div class="calendar-weekday-header">Thursday</div>
|
|
||||||
<div class="calendar-weekday-header">Friday</div>
|
|
||||||
<div class="calendar-weekday-header">Saturday</div>
|
|
||||||
<div class="calendar-weekday-header">Sunday</div>
|
|
||||||
|
|
||||||
% for day_info in days:
|
|
||||||
% if day_info['day_of_week'] == 1:
|
|
||||||
</div><div class="week-row">
|
|
||||||
<div class="week-counter
|
|
||||||
">W{{ day_info['week_of_year'] }}</div>
|
|
||||||
% end
|
|
||||||
<div class="calendar-day
|
|
||||||
% if day_info['is_weekend']:
|
|
||||||
weekend-day
|
|
||||||
% end
|
|
||||||
"><div class="day-num
|
|
||||||
% if day_info['today']:
|
|
||||||
today
|
|
||||||
% end
|
|
||||||
">{{ day_info['day_of_month'] }}</div>
|
|
||||||
% for event_text in day_info['events']:
|
|
||||||
</br><span>{{ event_text }}</span>
|
|
||||||
% end
|
|
||||||
|
|
||||||
</div>
|
|
||||||
% end
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
'''
|
|
||||||
|
|
||||||
## Paths
|
|
||||||
@bottle.route('/')
|
|
||||||
def reddit_index():
|
|
||||||
events_map = {
|
|
||||||
19: ['J: Spil Fredagsbar', 'L: Datbar'],
|
|
||||||
20: ['F: Regatta'],
|
|
||||||
}
|
|
||||||
|
|
||||||
|
def render_calendar(events_map, today):
|
||||||
days = []
|
days = []
|
||||||
for day_of_month in range(1, 31 + 1):
|
for day_of_month in range(1, 31 + 1):
|
||||||
day_of_week = (day_of_month - 1) % 7 + 1
|
day_of_week = (day_of_month - 1) % 7 + 1
|
||||||
|
|
@ -126,10 +20,29 @@ def reddit_index():
|
||||||
'day_of_week': day_of_week,
|
'day_of_week': day_of_week,
|
||||||
'is_weekend': day_of_week == 6 or day_of_week == 7,
|
'is_weekend': day_of_week == 6 or day_of_week == 7,
|
||||||
'week_of_year' : week_of_year,
|
'week_of_year' : week_of_year,
|
||||||
'today': day_of_month == 19,
|
'today': day_of_month == today,
|
||||||
|
'already_past': day_of_month < today,
|
||||||
'events': events_map.get(day_of_month, []),
|
'events': events_map.get(day_of_month, []),
|
||||||
})
|
})
|
||||||
return bottle.template(TEMPLATE_INDEX, days = days)
|
return bottle.template(templates.TEMPLATE_INDEX, days = days)
|
||||||
|
|
||||||
|
## Paths
|
||||||
|
|
||||||
|
@bottle.route('/static/<path:path>')
|
||||||
|
def static(path):
|
||||||
|
return bottle.static_file(path, root = './static')
|
||||||
|
|
||||||
|
@bottle.route('/')
|
||||||
|
def reddit_index():
|
||||||
|
events_map = {
|
||||||
|
15: ['J: Japansk 1'],
|
||||||
|
19: ['J: Spil Fredagsbar', 'L: Datbar'],
|
||||||
|
20: ['JL: Regatta'],
|
||||||
|
}
|
||||||
|
|
||||||
|
today = 19
|
||||||
|
|
||||||
|
return render_calendar(events_map, today)
|
||||||
|
|
||||||
## Argument parsing
|
## Argument parsing
|
||||||
|
|
||||||
|
|
|
||||||
96
static/style.css
Normal file
96
static/style.css
Normal file
|
|
@ -0,0 +1,96 @@
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.week-counter {
|
||||||
|
width: 2%;
|
||||||
|
text-align: center;
|
||||||
|
border-right: 1px lightgray solid;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-grid {
|
||||||
|
font-size: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-weekday-header {
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
|
||||||
|
border-bottom: 1px black solid;
|
||||||
|
font-size: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-day {
|
||||||
|
border-bottom: 1px lightgray solid;
|
||||||
|
border-right: 1px lightgray solid;
|
||||||
|
|
||||||
|
min-height: 100px;
|
||||||
|
font-size: 0.5rem;
|
||||||
|
height: 18vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crossed-out {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crossed-out:before, .crossed-out:after {
|
||||||
|
position: absolute;
|
||||||
|
content: '';
|
||||||
|
background: grey;
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 10px;
|
||||||
|
-webkit-transform: rotate(-45deg);
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crossed-out:after {
|
||||||
|
-webkit-transform: rotate(45deg);
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-day.weekend-day {
|
||||||
|
background: yellow;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-day .day-num {
|
||||||
|
text-align: right;
|
||||||
|
margin: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.day-num.today {
|
||||||
|
background-color: red;
|
||||||
|
color: white;
|
||||||
|
padding-right: 4px;
|
||||||
|
border-radius: 7px;
|
||||||
|
margin: 5px 1px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event {
|
||||||
|
background: pink;
|
||||||
|
padding: 1px 5px;
|
||||||
|
border-radius: 7px;
|
||||||
|
margin: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-day,.calendar-weekday-header {
|
||||||
|
width: 14%;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.month-header {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
56
templates.py
Normal file
56
templates.py
Normal file
|
|
@ -0,0 +1,56 @@
|
||||||
|
TEMPLATE_INDEX = '''
|
||||||
|
<!DOCTYPE HTML>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>My calendar</title>
|
||||||
|
<link href="static/style.css" rel="stylesheet">
|
||||||
|
<meta http-equiv="refresh" content="60">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1 class="month-header">August 2022</h1>
|
||||||
|
<table class="calendar-grid">
|
||||||
|
<thead>
|
||||||
|
<tr class="week-row">
|
||||||
|
<td class="week-counter"></td>
|
||||||
|
<td class="calendar-weekday-header">Monday</td>
|
||||||
|
<td class="calendar-weekday-header">Tuesday</td>
|
||||||
|
<td class="calendar-weekday-header">Wednesday</td>
|
||||||
|
<td class="calendar-weekday-header">Thursday</td>
|
||||||
|
<td class="calendar-weekday-header">Friday</td>
|
||||||
|
<td class="calendar-weekday-header">Saturday</td>
|
||||||
|
<td class="calendar-weekday-header">Sunday</td>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
|
||||||
|
% for day_info in days:
|
||||||
|
% if day_info['day_of_week'] == 1:
|
||||||
|
</tr><tr class="week-row">
|
||||||
|
<td class="week-counter
|
||||||
|
">W{{ day_info['week_of_year'] }}</td>
|
||||||
|
% end
|
||||||
|
<td class="calendar-day
|
||||||
|
% if day_info['is_weekend']:
|
||||||
|
weekend-day
|
||||||
|
% end
|
||||||
|
% if day_info['already_past']:
|
||||||
|
crossed-out
|
||||||
|
% end
|
||||||
|
"><div class="day-num
|
||||||
|
% if day_info['today']:
|
||||||
|
today
|
||||||
|
% end
|
||||||
|
">{{ day_info['day_of_month'] }}</div>
|
||||||
|
% for event_text in day_info['events']:
|
||||||
|
<div class="event">{{ event_text }}</div>
|
||||||
|
% end
|
||||||
|
</td>
|
||||||
|
% end
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
'''
|
||||||
|
|
||||||
|
|
||||||
Loading…
Reference in New Issue
Block a user