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
if htmlGET and '/users/' in self.path:
if self.path.endswith('/calendar'):
if '/calendar?' in self.path:
# show the calendar screen
msg=htmlCalendar(self.server.translate, \
self.server.baseDir,self.path).encode()

View File

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

View File

@ -144,5 +144,24 @@
"Date": "Date",
"Time": "Time",
"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",
"Time": "Time",
"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",
"Time": "Time",
"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",
"Time": "Time",
"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",
"Time": "Time",
"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",
"Time": "Time",
"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",
"Time": "Time",
"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 commentjson
from datetime import datetime
from datetime import date
from dateutil.parser import parse
from shutil import copyfile
from shutil import copyfileobj
@ -2743,13 +2744,51 @@ def htmlSearchEmojiTextEntry(translate: {}, \
emojiStr+=htmlFooter()
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: {}, \
baseDir: str,path: str) -> str:
"""Show the calendar for a person
"""
monthNumber=0
year=1970
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)
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 not os.path.isfile(baseDir+'/accounts/calendar-background.png'):
@ -2760,11 +2799,40 @@ def htmlCalendar(translate: {}, \
cssFilename=baseDir+'/calendar.css'
with open(cssFilename, 'r') as cssFile:
calendarStyle = cssFile.read()
calendarStr=htmlHeader(cssFilename,calendarStyle)
#TODO
calendarStr+=htmlFooter()
calendarStr+='<table class="calendar">\n'
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
def htmlSearch(translate: {}, \