Add month/year calendar (mainly static for now)

This commit is contained in:
Peter Stockings
2022-12-03 11:53:17 +11:00
parent b3337adb1a
commit 467f50cc44
4 changed files with 916 additions and 1 deletions

29
app.py
View File

@@ -1,4 +1,4 @@
from datetime import datetime
from datetime import datetime, date, timedelta
import os
from flask import Flask, render_template, redirect, request, url_for
import jinja_partials
@@ -61,6 +61,33 @@ def get_person(person_id):
return render_template('person.html', person=person, selected_exercise_ids=active_exercise_ids, max_date=max_date, min_date=min_date)
@ app.route("/person/<int:person_id>/calendar")
@ validate_person
def get_calendar(person_id):
person = db.get_person(person_id)
selected_date = convert_str_to_date(request.args.get(
'date'), '%Y-%m-%d') or date.today()
selected_view = request.args.get('view') or 'month'
next_date = selected_date + (timedelta(
365/12) if selected_view == 'month' else timedelta(365))
previous_date = selected_date + (timedelta(
-365/12) if selected_view == 'month' else timedelta(-365))
if htmx:
return render_template('partials/page/calendar.html',
person=person, selected_date=selected_date, selected_view=selected_view, next_date=next_date, previous_date=previous_date)
return render_template('calendar.html', person=person, selected_date=selected_date, selected_view=selected_view, next_date=next_date, previous_date=previous_date)
@ app.route("/person/<int:person_id>/calendar_year")
@ validate_person
def get_calendar_year(person_id):
person = db.get_person(person_id)
return render_template('calendar_year.html', person=person)
@ app.route("/person/<int:person_id>/workout", methods=['POST'])
@ validate_person
def create_workout(person_id):

9
templates/calendar.html Normal file
View File

@@ -0,0 +1,9 @@
{% extends 'base.html' %}
{% block content %}
{{ render_partial('partials/page/calendar.html',
person=person, selected_date=selected_date, selected_view=selected_view, next_date=next_date,
previous_date=previous_date) }}
{% endblock %}

View File

@@ -0,0 +1,448 @@
{% extends 'base.html' %}
{% block content %}
<div class="flex flex-grow flex-col bg-white sm:rounded shadow overflow-hidden">
<div class="">
<div class="flex items-center justify-between pt-2 pb-2">
<div class="flex">
<div class="flex ml-6">
<button>
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor" data-darkreader-inline-stroke=""
style="--darkreader-inline-stroke:currentColor;">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7">
</path>
</svg>
</button>
<button>
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor" data-darkreader-inline-stroke=""
style="--darkreader-inline-stroke:currentColor;">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7">
</path>
</svg>
</button>
</div>
<h2 class="ml-2 text-xl font-bold leading-none">2022</h2>
</div>
<select
class="block appearance-none w-40 bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500 mr-5"
name="range">
<option value="month">Month</option>
<option value="year">Year</option>
</select>
</div>
</div>
<div class="flex px-2 py-2 -mb-px">
<div class="flex flex-wrap bg-white overflow-hidden">
<div class="w-auto mx-3 my-3 border-solid border-grey-light rounded border shadow-sm">
<div class="bg-grey-lighter px-2 py-2 border-solid border-grey-light border-b text-center">December 2018
</div>
<div class="">
<table class="w-full">
<tbody>
<tr class="border-b">
<th class="py-3 px-4">S</th>
<th class="py-3 px-4">M</th>
<th class="py-3 px-4">T</th>
<th class="py-3 px-4">W</th>
<th class="py-3 px-4">T</th>
<th class="py-3 px-4">F</th>
<th class="py-3 px-4">S</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">1</td>
</tr>
<tr>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">2</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">3</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">4</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">5</td>
<td
class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer bg-blue text-white">
6</td>
<td
class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer bg-blue text-white">
7</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">8</td>
</tr>
<tr>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">9</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">10</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">11</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">12</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">13</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">14</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">15</td>
</tr>
<tr>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">16</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">17</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">18</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">19</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">20</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">21</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">22</td>
</tr>
<tr>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">23</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">24</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">25</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">26</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">27</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">28</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">29</td>
</tr>
<tr>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">30</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">31</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="w-auto mx-3 my-3 border-solid border-grey-light rounded border shadow-sm">
<div class="bg-grey-lighter px-2 py-2 border-solid border-grey-light border-b text-center">January 2019
</div>
<div class="">
<table class="w-full">
<tbody>
<tr class="border-b">
<th class="py-3 px-4">S</th>
<th class="py-3 px-4">M</th>
<th class="py-3 px-4">T</th>
<th class="py-3 px-4">W</th>
<th class="py-3 px-4">T</th>
<th class="py-3 px-4">F</th>
<th class="py-3 px-4">S</th>
</tr>
<tr>
<td></td>
<td></td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">1</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">2</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">3</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">4</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">5</td>
</tr>
<tr>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">6</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">7</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">8</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">9</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">10</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">11</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">12</td>
</tr>
<tr>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">13</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">14</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">15</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">16</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">17</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">18</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">19</td>
</tr>
<tr>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">20</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">21</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">22</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">23</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">24</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">25</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">26</td>
</tr>
<tr>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">27</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">28</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">29</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">30</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">31</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="w-auto mx-3 my-3 border-solid border-grey-light rounded border shadow-sm">
<div class="bg-grey-lighter px-2 py-2 border-solid border-grey-light border-b text-center">February 2019
</div>
<div class="">
<table class="w-full">
<tbody>
<tr class="border-b">
<th class="py-3 px-4">S</th>
<th class="py-3 px-4">M</th>
<th class="py-3 px-4">T</th>
<th class="py-3 px-4">W</th>
<th class="py-3 px-4">T</th>
<th class="py-3 px-4">F</th>
<th class="py-3 px-4">S</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">1</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">2</td>
</tr>
<tr>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">3</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">4</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">5</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">6</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">7</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">8</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">9</td>
</tr>
<tr>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">10</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">11</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">12</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">13</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">14</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">15</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">16</td>
</tr>
<tr>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">17</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">18</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">19</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">20</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">21</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">22</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">23</td>
</tr>
<tr>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">24</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">25</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">26</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">27</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">28</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="w-auto mx-3 my-3 border-solid border-grey-light rounded border shadow-sm">
<div class="bg-grey-lighter px-2 py-2 border-solid border-grey-light border-b text-center">March 2019
</div>
<div class="">
<table class="w-full">
<tbody>
<tr class="border-b">
<th class="py-3 px-4">S</th>
<th class="py-3 px-4">M</th>
<th class="py-3 px-4">T</th>
<th class="py-3 px-4">W</th>
<th class="py-3 px-4">T</th>
<th class="py-3 px-4">F</th>
<th class="py-3 px-4">S</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">1</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">2</td>
</tr>
<tr>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">3</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">4</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">5</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">6</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">7</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">8</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">9</td>
</tr>
<tr>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">10</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">11</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">12</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">13</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">14</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">15</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">16</td>
</tr>
<tr>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">17</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">18</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">19</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">20</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">21</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">22</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">23</td>
</tr>
<tr>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">24</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">25</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">26</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">27</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">28</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">29</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">30</td>
</tr>
<tr>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">31</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="w-auto mx-3 my-3 border-solid border-grey-light rounded border shadow-sm">
<div class="bg-grey-lighter px-2 py-2 border-solid border-grey-light border-b text-center">April 2019
</div>
<div class="">
<table class="w-full">
<tbody>
<tr class="border-b">
<th class="py-3 px-4">S</th>
<th class="py-3 px-4">M</th>
<th class="py-3 px-4">T</th>
<th class="py-3 px-4">W</th>
<th class="py-3 px-4">T</th>
<th class="py-3 px-4">F</th>
<th class="py-3 px-4">S</th>
</tr>
<tr>
<td></td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">1</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">2</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">3</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">4</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">5</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">6</td>
</tr>
<tr>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">7</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">8</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">9</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">10</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">11</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">12</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">13</td>
</tr>
<tr>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">14</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">15</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">16</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">17</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">18</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">19</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">20</td>
</tr>
<tr>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">21</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">22</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">23</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">24</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">25</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">26</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">27</td>
</tr>
<tr>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">28</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">29</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">30</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="w-auto mx-3 my-3 border-solid border-grey-light rounded border shadow-sm">
<div class="bg-grey-lighter px-2 py-2 border-solid border-grey-light border-b text-center">May 2019
</div>
<div class="">
<table class="w-full">
<tbody>
<tr class="border-b">
<th class="py-3 px-4">S</th>
<th class="py-3 px-4">M</th>
<th class="py-3 px-4">T</th>
<th class="py-3 px-4">W</th>
<th class="py-3 px-4">T</th>
<th class="py-3 px-4">F</th>
<th class="py-3 px-4">S</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">1</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">2</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">3</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">4</td>
</tr>
<tr>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">5</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">6</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">7</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">8</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">9</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">10</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">11</td>
</tr>
<tr>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">12</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">13</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">14</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">15</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">16</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">17</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">18</td>
</tr>
<tr>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">19</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">20</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">21</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">22</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">23</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">24</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">25</td>
</tr>
<tr>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">26</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">27</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">28</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">29</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">30</td>
<td class="py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer">31</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
{% endblock %}

View File

@@ -0,0 +1,431 @@
<div class="flex flex-grow flex-col bg-white sm:rounded shadow overflow-hidden">
<div class="">
<div class="flex items-center justify-between pt-2 pb-2">
<div class="flex">
<div class="flex ml-6">
<button hx-get="{{ url_for('get_calendar', person_id=person['PersonId']) }}" hx-target="#container"
hx-vals='{"date": "{{ previous_date }}"}' hx-include="[name='view']">
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor" data-darkreader-inline-stroke=""
style="--darkreader-inline-stroke:currentColor;">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7">
</path>
</svg>
</button>
<button hx-get="{{ url_for('get_calendar', person_id=person['PersonId']) }}" hx-target="#container"
hx-vals='{"date": "{{ next_date }}"}' hx-include="[name='view']">
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor" data-darkreader-inline-stroke=""
style="--darkreader-inline-stroke:currentColor;">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7">
</path>
</svg>
</button>
</div>
<h2 class="ml-2 text-xl font-bold leading-none">{{ strftime(selected_date, '%B, %Y') }}</h2>
</div>
<select
class="block appearance-none w-40 bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500 mr-5"
name="view">
<option value="month">Month</option>
<option value="year">Year</option>
</select>
</div>
</div>
<div class="flex flex-col px-2 py-2 -mb-px">
<div class="grid grid-cols-7 pl-2 pr-2">
<div class="p-2 h-10 text-center font-bold">
<span class="xl:block lg:block md:block sm:block hidden">Sunday</span>
<span class="xl:hidden lg:hidden md:hidden sm:hidden block">Sun</span>
</div>
<div class="p-2 h-10 text-center font-bold">
<span class="xl:block lg:block md:block sm:block hidden">Monday</span>
<span class="xl:hidden lg:hidden md:hidden sm:hidden block">Mon</span>
</div>
<div class="p-2 h-10 text-center font-bold">
<span class="xl:block lg:block md:block sm:block hidden">Tuesday</span>
<span class="xl:hidden lg:hidden md:hidden sm:hidden block">Tue</span>
</div>
<div class="p-2 h-10 text-center font-bold">
<span class="xl:block lg:block md:block sm:block hidden">Wednesday</span>
<span class="xl:hidden lg:hidden md:hidden sm:hidden block">Wed</span>
</div>
<div class="p-2 h-10 text-center font-bold">
<span class="xl:block lg:block md:block sm:block hidden">Thursday</span>
<span class="xl:hidden lg:hidden md:hidden sm:hidden block">Thu</span>
</div>
<div class="p-2 h-10 text-center font-bold">
<span class="xl:block lg:block md:block sm:block hidden">Friday</span>
<span class="xl:hidden lg:hidden md:hidden sm:hidden block">Fri</span>
</div>
<div class="p-2 h-10 text-center font-bold">
<span class="xl:block lg:block md:block sm:block hidden">Saturday</span>
<span class="xl:hidden lg:hidden md:hidden sm:hidden block">Sat</span>
</div>
</div>
<div class="grid grid-cols-7 overflow-hidden flex-1 pl-2 pr-2 w-full">
<div class="border flex flex-col h-40 mx-auto mx-auto overflow-hidden w-full pt-2 pl-2">
<div class="top h-5 w-full">
<span class="text-gray-500 font-semibold">1</span>
</div>
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer">
<button class="flex items-center flex-shrink-0 h-5 px-1 text-xs">
<span class="ml-2 font-medium leading-none truncate">Squat</span>
<span class="ml-2 font-light leading-none">5x50kg</span>
</button>
<button class="flex items-center flex-shrink-0 h-5 px-1 text-xs">
<span class="ml-2 font-medium leading-none truncate">DB Seal row</span>
<span class="ml-2 font-light leading-none">12x20kg</span>
</button>
</div>
</div>
<div class="border flex flex-col h-40 mx-auto mx-auto overflow-hidden w-full pt-2 pl-2">
<div class="top h-5 w-full">
<span class="text-gray-500 font-semibold">2</span>
</div>
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer">
<button class="flex items-center flex-shrink-0 h-5 px-1 text-xs hover:bg-gray-200">
<span class="ml-2 font-medium leading-none truncate">Squat</span>
<span class="ml-2 font-light leading-none">5x50kg</span>
</button>
<button class="flex items-center flex-shrink-0 h-5 px-1 text-xs hover:bg-gray-200">
<span class="ml-2 font-medium leading-none truncate">DB Seal row</span>
<span class="ml-2 font-light leading-none">12x20kg</span>
</button>
</div>
</div>
<div class="border flex flex-col h-40 mx-auto mx-auto overflow-hidden w-full pt-2 pl-2">
<div class="top h-5 w-full">
<span class="text-gray-500 font-semibold">3</span>
</div>
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer"></div>
</div>
<div class="border flex flex-col h-40 mx-auto mx-auto overflow-hidden w-full pt-2 pl-2">
<div class="top h-5 w-full">
<span class="text-gray-500 font-semibold">4</span>
</div>
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer"></div>
</div>
<div class="border flex flex-col h-40 mx-auto mx-auto overflow-hidden w-full pt-2 pl-2">
<div class="top h-5 w-full">
<span class="text-gray-500 font-semibold">6</span>
</div>
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer"></div>
</div>
<div class="border flex flex-col h-40 mx-auto mx-auto overflow-hidden w-full pt-2 pl-2">
<div class="top h-5 w-full">
<span class="text-gray-500 font-semibold">7</span>
</div>
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer">
<button class="flex items-center flex-shrink-0 h-5 px-1 text-xs hover:bg-gray-200">
<span class="ml-2 font-medium leading-none truncate">Squat</span>
<span class="ml-2 font-light leading-none">5x50kg</span>
</button>
<button class="flex items-center flex-shrink-0 h-5 px-1 text-xs hover:bg-gray-200">
<span class="ml-2 font-medium leading-none truncate">DB Seal row</span>
<span class="ml-2 font-light leading-none">12x20kg</span>
</button>
</div>
</div>
<div class="border flex flex-col h-40 mx-auto mx-auto overflow-hidden w-full pt-2 pl-2">
<div class="top h-5 w-full">
<span class="text-gray-500 font-semibold text-sm">8</span>
</div>
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer"></div>
</div>
<!-- line 1 -->
<div class="border flex flex-col h-40 mx-auto mx-auto overflow-hidden w-full pt-2 pl-2">
<div class="top h-5 w-full">
<span class="text-gray-500 font-semibold">9</span>
</div>
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer"></div>
</div>
<div class="border flex flex-col h-40 mx-auto mx-auto overflow-hidden w-full pt-2 pl-2">
<div class="top h-5 w-full">
<span class="text-gray-500 font-semibold">10</span>
</div>
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer"></div>
</div>
<div class="border flex flex-col h-40 mx-auto mx-auto overflow-hidden w-full pt-2 pl-2">
<div class="top h-5 w-full">
<span class="text-gray-500 font-semibold">12</span>
</div>
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer">
<button class="flex items-center flex-shrink-0 h-5 px-1 text-xs hover:bg-gray-200">
<span class="ml-2 font-medium leading-none truncate">Squat</span>
<span class="ml-2 font-light leading-none">5x50kg</span>
</button>
<button class="flex items-center flex-shrink-0 h-5 px-1 text-xs hover:bg-gray-200">
<span class="ml-2 font-medium leading-none truncate">DB Seal row</span>
<span class="ml-2 font-light leading-none">12x20kg</span>
</button>
</div>
</div>
<div class="border flex flex-col h-40 mx-auto mx-auto overflow-hidden w-full pt-2 pl-2">
<div class="top h-5 w-full">
<span class="text-gray-500 font-semibold">13</span>
</div>
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer"></div>
</div>
<div
class="rounded-md border-4 border-green-50 border flex flex-col h-40 mx-auto mx-auto overflow-hidden w-full pt-2 pl-2">
<div class="top h-5 w-full">
<span class="text-gray-500 font-semibold">14</span>
</div>
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer"></div>
</div>
<div class="border flex flex-col h-40 mx-auto mx-auto overflow-hidden w-full pt-2 pl-2">
<div class="top h-5 w-full">
<span class="text-gray-500 font-semibold">15</span>
</div>
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer"></div>
</div>
<div class="border flex flex-col h-40 mx-auto mx-auto overflow-hidden w-full pt-2 pl-2">
<div class="top h-5 w-full">
<span class="text-gray-500 font-semibold text-sm">16</span>
</div>
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer"></div>
</div>
<!-- line 1 -->
<!-- line 2 -->
<div class="border flex flex-col h-40 mx-auto mx-auto overflow-hidden w-full pt-2 pl-2">
<div class="top h-5 w-full">
<span class="text-gray-500 font-semibold">16</span>
</div>
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer">
<button class="flex items-center flex-shrink-0 h-5 px-1 text-xs hover:bg-gray-200">
<span class="ml-2 font-medium leading-none truncate">Squat</span>
<span class="ml-2 font-light leading-none">5x50kg</span>
</button>
<button class="flex items-center flex-shrink-0 h-5 px-1 text-xs hover:bg-gray-200">
<span class="ml-2 font-medium leading-none truncate">DB Seal row</span>
<span class="ml-2 font-light leading-none">12x20kg</span>
</button>
</div>
</div>
<div class="border flex flex-col h-40 mx-auto mx-auto overflow-hidden w-full pt-2 pl-2">
<div class="top h-5 w-full">
<span class="text-gray-500 font-semibold">17</span>
</div>
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer"></div>
</div>
<div class="border flex flex-col h-40 mx-auto mx-auto overflow-hidden w-full pt-2 pl-2">
<div class="top h-5 w-full">
<span class="text-gray-500 font-semibold">18</span>
</div>
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer"></div>
</div>
<div class="border flex flex-col h-40 mx-auto mx-auto overflow-hidden w-full pt-2 pl-2">
<div class="top h-5 w-full">
<span class="text-gray-500 font-semibold">19</span>
</div>
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer"></div>
</div>
<div class="border flex flex-col h-40 mx-auto mx-auto overflow-hidden w-full pt-2 pl-2">
<div class="top h-5 w-full">
<span class="text-gray-500 font-semibold">20</span>
</div>
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer"></div>
</div>
<div class="border flex flex-col h-40 mx-auto mx-auto overflow-hidden w-full pt-2 pl-2">
<div class="top h-5 w-full">
<span class="text-gray-500 font-semibold">21</span>
</div>
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer"></div>
</div>
<div class="border flex flex-col h-40 mx-auto mx-auto overflow-hidden w-full pt-2 pl-2">
<div class="top h-5 w-full">
<span class="text-gray-500 font-semibold text-sm">22</span>
</div>
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer"></div>
</div>
<!-- line 2 -->
<!-- line 3 -->
<div class="border flex flex-col h-40 mx-auto mx-auto overflow-hidden w-full pt-2 pl-2">
<div class="top h-5 w-full">
<span class="text-gray-500 font-semibold">23</span>
</div>
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer"></div>
</div>
<div class="border flex flex-col h-40 mx-auto mx-auto overflow-hidden w-full pt-2 pl-2">
<div class="top h-5 w-full">
<span class="text-gray-500 font-semibold">24</span>
</div>
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer"></div>
</div>
<div class="border flex flex-col h-40 mx-auto mx-auto overflow-hidden w-full pt-2 pl-2">
<div class="top h-5 w-full">
<span class="text-gray-500 font-semibold">25</span>
</div>
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer"></div>
</div>
<div class="border flex flex-col h-40 mx-auto mx-auto overflow-hidden w-full pt-2 pl-2">
<div class="top h-5 w-full">
<span class="text-gray-500 font-semibold">26</span>
</div>
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer"></div>
</div>
<div class="border flex flex-col h-40 mx-auto mx-auto overflow-hidden w-full pt-2 pl-2">
<div class="top h-5 w-full">
<span class="text-gray-500 font-semibold">27</span>
</div>
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer"></div>
</div>
<div class="border flex flex-col h-40 mx-auto mx-auto overflow-hidden w-full pt-2 pl-2">
<div class="top h-5 w-full">
<span class="text-gray-500 font-semibold">28</span>
</div>
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer"></div>
</div>
<div class="border flex flex-col h-40 mx-auto mx-auto overflow-hidden w-full pt-2 pl-2">
<div class="top h-5 w-full">
<span class="text-gray-500 font-semibold text-sm">29</span>
</div>
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer"></div>
</div>
<!-- line 3 -->
<!-- line 4 -->
<div class="border flex flex-col h-40 mx-auto mx-auto overflow-hidden w-full pt-2 pl-2">
<div class="top h-5 w-full">
<span class="text-gray-500 font-semibold">30</span>
</div>
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer"></div>
</div>
<div class="border flex flex-col h-40 mx-auto mx-auto overflow-hidden w-full pt-2 pl-2">
<div class="top h-5 w-full">
<span class="text-gray-500 font-semibold">31</span>
</div>
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer"></div>
</div>
<div
class="border flex flex-col h-40 mx-auto mx-auto overflow-hidden w-full pt-2 pl-2 bg-gray-100 pt-2 pl-2">
<div class="top h-5 w-full">
<span class="text-gray-500 font-semibold">1</span>
</div>
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer"></div>
</div>
<div
class="border flex flex-col h-40 mx-auto mx-auto overflow-hidden w-full pt-2 pl-2 bg-gray-100 pt-2 pl-2">
<div class="top h-5 w-full">
<span class="text-gray-500 font-semibold">2</span>
</div>
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer"></div>
</div>
<div
class="border flex flex-col h-40 mx-auto mx-auto overflow-hidden w-full pt-2 pl-2 bg-gray-100 pt-2 pl-2">
<div class="top h-5 w-full">
<span class="text-gray-500 font-semibold">3</span>
</div>
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer"></div>
</div>
<div
class="border flex flex-col h-40 mx-auto mx-auto overflow-hidden w-full pt-2 pl-2 bg-gray-100 pt-2 pl-2">
<div class="top h-5 w-full">
<span class="text-gray-500 font-semibold">4</span>
</div>
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer"></div>
</div>
<div
class="border flex flex-col h-40 mx-auto mx-auto overflow-hidden w-full pt-2 pl-2 bg-gray-100 pt-2 pl-2">
<div class="top h-5 w-full">
<span class="text-gray-500 font-semibold text-sm">5</span>
</div>
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer"></div>
</div>
<!-- line 4 -->
</div>
</div>
</div>