peterstockings/bloodpressure
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve month calendar

Browse Source
This commit is contained in:
Peter Stockings
2024-12-29 01:02:11 +11:00
parent ff66583b7b
commit 07ae62c633
3 changed files with 216 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
app/templates/dashboard.html
View File

@@ -175,45 +175,54 @@
</div>
<!-- Monthly View -->
<div x-show="activeView === 'monthly'" class="space-y-4">
<div class="flex flex-col px-2 py-2 -mb-px" x-show="activeView === 'monthly'">
{% set current_date = date.today().replace(day=1) %}
<!-- Month Name -->
<div class="text-center">
<h2 class="text-xl font-bold text-gray-800">{{ current_date.strftime('%B %Y') }}</h2>
</div>
<!-- Day Headers -->
<div class="grid grid-cols-7 text-center">
<div class="font-semibold text-gray-700">Sun</div>
<div class="font-semibold text-gray-700">Mon</div>
<div class="font-semibold text-gray-700">Tue</div>
<div class="font-semibold text-gray-700">Wed</div>
<div class="font-semibold text-gray-700">Thu</div>
<div class="font-semibold text-gray-700">Fri</div>
<div class="font-semibold text-gray-700">Sat</div>
<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>
<!-- Calendar Grid -->
<div class="grid grid-cols-7 text-center">
{% set days_in_month = (current_date.replace(month=current_date.month % 12 + 1, day=1) -
timedelta(days=1)).day %}
{% set first_weekday = current_date.weekday() %}
<div class="grid grid-cols-7 overflow-hidden flex-1 pl-2 pr-2 w-full">
<!-- Empty slots for days before the 1st -->
{% for _ in range((first_weekday + 1) % 7) %}
<div></div>
{% endfor %}
<!-- Days of the Month -->
{% for day in range(1, days_in_month + 1) %}
{% set current_day = current_date.replace(day=day) %}
<div class="border p-1 md:p-4 bg-gray-50 relative">
<!-- Day Label -->
<div class="text-sm font-bold text-gray-500 text-left">{{ current_day.day }}</div>
<!-- Readings -->
{% if current_day in readings_by_date %}
{% for reading in readings_by_date[current_day]|sort(attribute="timestamp", reverse = True) %}
{% for day in month %}
<div
class="{% if day.is_today %}rounded-md border-4 border-green-50{% endif %} border flex flex-col h-36 sm:h-40 md:h-30 lg:h-30 mx-auto mx-auto overflow-hidden w-full pt-2 pl-1 cursor-pointer {% if day.is_in_current_month %}bg-gray-100{% endif %}">
<div class="top h-5 w-full">
<span class="text-gray-500 font-semibold">{{ day.day }}</span>
</div>
{% for reading in day.readings %}
<a href="{{ url_for('main.edit_reading', reading_id=reading.id) }}"
class="block mt-2 p-0 md:p-2 bg-green-100 rounded-lg shadow hover:bg-green-200 transition">
<p class="text-xs font-medium text-green-800">
@@ -226,11 +235,9 @@
</div>
</a>
{% endfor %}
{% else %}
<div class="h-8"></div> <!-- Placeholder for spacing -->
{% endif %}
</div>
{% endfor %}
</div>
</div>