Calendar screen

main2
Bob Mottram 2019-10-10 19:25:42 +01:00
parent 68cd2b9205
commit aaa60e2763
10 changed files with 304 additions and 162 deletions

View File

@ -1046,7 +1046,7 @@ class PubServer(BaseHTTPRequestHandler):
# Show the calendar for a user # Show the calendar for a user
if htmlGET and '/users/' in self.path: if htmlGET and '/users/' in self.path:
if self.path.endswith('/calendar'): if '/calendar?' in self.path:
# show the calendar screen # show the calendar screen
msg=htmlCalendar(self.server.translate, \ msg=htmlCalendar(self.server.translate, \
self.server.baseDir,self.path).encode() self.server.baseDir,self.path).encode()

View File

@ -1,176 +1,117 @@
@charset "UTF-8"; body {
background-color: #e66053;
:root { color: #4E4F4A;
--main-bg-color: #282c37; display: -webkit-box;
--main-fg-color: #dddddd; display: -ms-flexbox;
--main-link-color: #999; display: flex;
--main-visited-color: #888; -webkit-box-align: center;
--border-color: #505050; -ms-flex-align: center;
--font-size-header: 18px; align-items: center;
--font-color-header: #ccc; -webkit-box-pack: center;
--font-size: 40px; -ms-flex-pack: center;
--text-entry-foreground: #ccc; justify-content: center;
--text-entry-background: #111; font-family: 'Montserrat';
--time-color: #aaa; font-weight: 700;
--button-text: #FFFFFF; min-height: 100vh;
--button-background: #999;
--button-selected: #666;
} }
body, html { main {
background-color: var(--main-bg-color); background-color: #F6E9DC;
color: var(--main-fg-color); -ms-flex-preferred-size: 980px;
flex-basis: 980px;
height: 100%;
font-family: Arial, Helvetica, sans-serif;
max-width: 100%;
min-width: 600px;
margin: 5% auto;
}
a, u {
color: var(--main-fg-color);
}
a:visited{
color: var(--main-visited-color);
font-weight: bold;
}
a:link {
color: var(--main-link-color);
font-weight: bold;
} }
.calendar { .calendar {
background-image: url("calendar-background.png"); table-display: fixed;
height: 100%; width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
background-color: var(--main-bg-color);
} }
.calendarAvatar { .calendar__day__header,
margin: 15% 0; .calendar__day__cell {
border: 2px solid #e66053;
text-align: center;
width: 100% / 7;
vertical-align: middle;
}
.calendar__day__header:first-child,
.calendar__day__cell:first-child {
border-left: none;
}
.calendar__day__header:last-child,
.calendar__day__cell:last-child {
border-right: none;
} }
.calendarAvatar img { .calendar__day__header,
border-radius: 10%; .calendar__day__cell {
width: 20%; padding: .75rem 0 1.5rem;
min-width: 200px;
} }
.calendarText { .calendar__banner--month {
font-size: var(--font-size); text-align: center;
padding: .75rem;
}
.calendar__banner--month h1 {
background-color: #4E4F4A;
color: #F6E9DC;
display: inline-block;
font-size: 3rem;
font-weight: 400;
letter-spacing: 0.1em;
padding: .5rem 2rem;
text-transform: uppercase;
} }
.button { .calendar__day__header {
border-radius: 4px; font-size: 1rem;
background-color: var(--button-background); letter-spacing: 0.1em;
border: none; text-transform: uppercase;
color: var(--button-text);
text-align: center;
padding: 10px;
font-size: var(--font-size);
width: 20%;
max-width: 200px;
min-width: 100px;
cursor: pointer;
margin: 30px;
} }
.button:hover { .calendar__day__cell {
background-color: #555; font-size: 4rem;
color: white; position: relative;
} }
input[type=text] { tr:nth-child(odd) > .calendar__day__cell:nth-child(odd) {
width: 90%; color: #e66053;
clear: both;
font-size: var(--font-size);
text-align: center;
color: var(--text-entry-foreground);
background-color: var(--text-entry-background);
} }
.cwButton { tr:nth-child(even) > .calendar__day__cell:nth-child(even) {
border-radius: 4px; color: #e66053;
background-color: #999;
border: none;
color: var(--button-text);
text-align: center;
font-size: var(--font-size);
padding: 2px;
cursor: pointer;
margin: 5px;
} }
.cwText { .calendar__day__cell[data-event] {
display: none; background-color: #e66053;
color: #4E4F4A;
}
.calendar__day__cell[data-event]:after {
content: attr(data-event);
color: #F6E9DC;
display: block;
font-weight: 400;
font-size: .75rem;
position: absolute;
bottom: 0;
width: 100%;
height: 1rem;
text-transform: uppercase;
} }
.options { .calendar__day__cell[data-today] {
font-size: var(--font-size); background-color: #4E4F4A;
border-color: #4E4F4A;
color: #F6E9DC;
} }
.calendar__day__cell[data-today]:after {
.options img { content: attr(data-today);
width: 20%; color: #F6E9DC;
} display: block;
font-size: .75rem;
@media screen and (min-width: 400px) { font-weight: 400;
.calendarText { position: absolute;
font-size: 24px; bottom: 0;
} width: 100%;
input[type=text] { height: 1rem;
width: 90%; text-transform: uppercase;
clear: both;
font-size: 24px;
text-align: center;
color: var(--text-entry-foreground);
background-color: var(--text-entry-background);
}
.button {
border-radius: 4px;
background-color: var(--button-background);
border: none;
color: var(--button-text);
text-align: center;
padding: 10px;
font-size: 24px;
width: 20%;
max-width: 200px;
min-width: 100px;
cursor: pointer;
margin: 30px;
}
}
@media screen and (max-width: 1000px) {
.calendarText {
font-size: 40px;
}
input[type=text] {
width: 90%;
clear: both;
font-size: 40px;
text-align: center;
color: var(--text-entry-foreground);
background-color: var(--text-entry-background);
}
.button {
border-radius: 4px;
background-color: var(--button-background);
border: none;
color: var(--button-text);
text-align: center;
padding: 10px;
font-size: 40px;
width: 20%;
max-width: 200px;
min-width: 100px;
cursor: pointer;
margin: 30px;
}
} }

View File

@ -144,5 +144,24 @@
"Date": "Date", "Date": "Date",
"Time": "Time", "Time": "Time",
"Location": "Location", "Location": "Location",
"Calendar": "Calendar" "Calendar": "Calendar",
"Sun": "Sun",
"Mon": "Mon",
"Tue": "Tue",
"Wed": "Wed",
"Thu": "Thu",
"Fri": "Fri",
"Sat": "Sat",
"January": "January",
"February": "February",
"March": "March",
"April": "April",
"May": "May",
"June": "June",
"July": "July",
"August": "August",
"September": "September",
"October": "October",
"November": "November",
"December": "December"
} }

View File

@ -144,5 +144,24 @@
"Date": "Date", "Date": "Date",
"Time": "Time", "Time": "Time",
"Location": "Location", "Location": "Location",
"Calendar": "Calendar" "Calendar": "Calendar",
"Sun": "Sun",
"Mon": "Mon",
"Tue": "Tue",
"Wed": "Wed",
"Thu": "Thu",
"Fri": "Fri",
"Sat": "Sat",
"January": "January",
"February": "February",
"March": "March",
"April": "April",
"May": "May",
"June": "June",
"July": "July",
"August": "August",
"September": "September",
"October": "October",
"November": "November",
"December": "December"
} }

View File

@ -144,5 +144,24 @@
"Date": "Date", "Date": "Date",
"Time": "Time", "Time": "Time",
"Location": "Location", "Location": "Location",
"Calendar": "Calendar" "Calendar": "Calendar",
"Sun": "Sun",
"Mon": "Mon",
"Tue": "Tue",
"Wed": "Wed",
"Thu": "Thu",
"Fri": "Fri",
"Sat": "Sat",
"January": "January",
"February": "February",
"March": "March",
"April": "April",
"May": "May",
"June": "June",
"July": "July",
"August": "August",
"September": "September",
"October": "October",
"November": "November",
"December": "December"
} }

View File

@ -144,5 +144,24 @@
"Date": "Date", "Date": "Date",
"Time": "Time", "Time": "Time",
"Location": "Location", "Location": "Location",
"Calendar": "Calendar" "Calendar": "Calendar",
"Sun": "Sun",
"Mon": "Mon",
"Tue": "Tue",
"Wed": "Wed",
"Thu": "Thu",
"Fri": "Fri",
"Sat": "Sat",
"January": "January",
"February": "February",
"March": "March",
"April": "April",
"May": "May",
"June": "June",
"July": "July",
"August": "August",
"September": "September",
"October": "October",
"November": "November",
"December": "December"
} }

View File

@ -144,5 +144,24 @@
"Date": "Date", "Date": "Date",
"Time": "Time", "Time": "Time",
"Location": "Location", "Location": "Location",
"Calendar": "Calendar" "Calendar": "Calendar",
"Sun": "Sun",
"Mon": "Mon",
"Tue": "Tue",
"Wed": "Wed",
"Thu": "Thu",
"Fri": "Fri",
"Sat": "Sat",
"January": "January",
"February": "February",
"March": "March",
"April": "April",
"May": "May",
"June": "June",
"July": "July",
"August": "August",
"September": "September",
"October": "October",
"November": "November",
"December": "December"
} }

View File

@ -144,5 +144,24 @@
"Date": "Date", "Date": "Date",
"Time": "Time", "Time": "Time",
"Location": "Location", "Location": "Location",
"Calendar": "Calendar" "Calendar": "Calendar",
"Sun": "Sun",
"Mon": "Mon",
"Tue": "Tue",
"Wed": "Wed",
"Thu": "Thu",
"Fri": "Fri",
"Sat": "Sat",
"January": "January",
"February": "February",
"March": "March",
"April": "April",
"May": "May",
"June": "June",
"July": "July",
"August": "August",
"September": "September",
"October": "October",
"November": "November",
"December": "December"
} }

View File

@ -144,5 +144,24 @@
"Date": "Date", "Date": "Date",
"Time": "Time", "Time": "Time",
"Location": "Location", "Location": "Location",
"Calendar": "Calendar" "Calendar": "Calendar",
"Sun": "Sun",
"Mon": "Mon",
"Tue": "Tue",
"Wed": "Wed",
"Thu": "Thu",
"Fri": "Fri",
"Sat": "Sat",
"January": "January",
"February": "February",
"March": "March",
"April": "April",
"May": "May",
"June": "June",
"July": "July",
"August": "August",
"September": "September",
"October": "October",
"November": "November",
"December": "December"
} }

View File

@ -11,6 +11,7 @@ import time
import os import os
import commentjson import commentjson
from datetime import datetime from datetime import datetime
from datetime import date
from dateutil.parser import parse from dateutil.parser import parse
from shutil import copyfile from shutil import copyfile
from shutil import copyfileobj from shutil import copyfileobj
@ -2743,14 +2744,52 @@ def htmlSearchEmojiTextEntry(translate: {}, \
emojiStr+=htmlFooter() emojiStr+=htmlFooter()
return emojiStr return emojiStr
def weekDayOfMonthStart(monthNumber: int,year: int):
"""Gets the day number of the first day of the month
1=sun, 7=sat
"""
firstDayOfMonth=datetime.datetime(year, monthNumber, 1, 0, 0)
return int(firstDayOfMonth.strftime("%w"))
def htmlCalendar(translate: {}, \ def htmlCalendar(translate: {}, \
baseDir: str,path: str) -> str: baseDir: str,path: str) -> str:
"""Show the calendar for a person """Show the calendar for a person
""" """
monthNumber=0
year=1970
actor=path.replace('/calendar','') actor=path.replace('/calendar','')
if '?' in actor:
first=True
for p in actor.split('?'):
if not first:
if '=' in p:
if p.split('=')[0]=='year':
numStr=p.split('=')[1]
if numStr.isdigit():
year=int(numStr)
elif p.split('=')[0]=='month':
numStr=p.split('=')[1]
if numStr.isdigit():
monthNumber=int(numStr)
first=False
actor=actor.split('?')[0]
if year==1970 and monthNumber==1:
now = datetime.datetime.now()
year=now.year
monthNumber=now.month
nickname=getNicknameFromActor(actor) nickname=getNicknameFromActor(actor)
domain,port=getDomainFromActor(actor) domain,port=getDomainFromActor(actor)
months=['Jaruary','February','March','April','May','June','July','August','September','October','November','December']
monthName=translate[months[monthNumber-1]]
if monthNumber<12:
daysInMonth=(date(year, monthNumber+1, 1) - date(year, monthNumber, 1)).days
else:
daysInMonth=(date(year+1, 1, 1) - date(year, monthNumber, 1)).days
if os.path.isfile(baseDir+'/img/calendar-background.png'): if os.path.isfile(baseDir+'/img/calendar-background.png'):
if not os.path.isfile(baseDir+'/accounts/calendar-background.png'): if not os.path.isfile(baseDir+'/accounts/calendar-background.png'):
copyfile(baseDir+'/img/calendar-background.png',baseDir+'/accounts/calendar-background.png') copyfile(baseDir+'/img/calendar-background.png',baseDir+'/accounts/calendar-background.png')
@ -2762,9 +2801,38 @@ def htmlCalendar(translate: {}, \
calendarStyle = cssFile.read() calendarStyle = cssFile.read()
calendarStr=htmlHeader(cssFilename,calendarStyle) calendarStr=htmlHeader(cssFilename,calendarStyle)
#TODO calendarStr+='<table class="calendar">\n'
calendarStr+=htmlFooter() calendarStr+='<caption class="calendar__banner--month">\n'
calendarStr+=' <h1>'+monthName+'</h1>\n'
calendarStr+='</caption>\n'
calendarStr+='<thead>\n'
calendarStr+='<tr>\n'
calendarStr+=' <th class="calendar__day__header">'+translate['Sun']+'</th>\n'
calendarStr+=' <th class="calendar__day__header">'+translate['Mon']+'</th>\n'
calendarStr+=' <th class="calendar__day__header">'+translate['Tue']+'</th>\n'
calendarStr+=' <th class="calendar__day__header">'+translate['Wed']+'</th>\n'
calendarStr+=' <th class="calendar__day__header">'+translate['Thu']+'</th>\n'
calendarStr+=' <th class="calendar__day__header">'+translate['Fri']+'</th>\n'
calendarStr+=' <th class="calendar__day__header">'+translate['Sat']+'</th>\n'
calendarStr+='</tr>\n'
calendarStr+='</thead>\n'
calendarStr+='<tbody>\n'
dayOfMonth=0
for weekOfMonth in range(1,5):
calendarStr+=' <tr>\n'
for dayNumber in range(1,7):
if (weekOfMonth>1 and dayOfMonth<=daysInMonth) or \
(weekOfMonth==1 and dayNumber>=weekDayOfMonthStart(monthNumber,year)):
dayOfMonth+=1
calendarStr+=' <td class="calendar__day__cell">'+str(dayOfMonth)+'</td>\n'
else:
calendarStr+=' <td class="calendar__day__cell"></td>\n'
calendarStr+=' </tr>\n'
calendarStr+='</tbody>\n'
calendarStr+='</table>\n'
calendarStr+=htmlFooter()
return calendarStr return calendarStr
def htmlSearch(translate: {}, \ def htmlSearch(translate: {}, \