106 lines
4.6 KiB
HTML
106 lines
4.6 KiB
HTML
{% extends "_layout.html" %}
|
|
{% block content %}
|
|
<div class="max-w-5xl mx-auto p-4 space-y-6">
|
|
|
|
<!-- Header Section with "Add New Reading" Button -->
|
|
<div class="flex justify-between items-center">
|
|
<h1 class="text-2xl font-bold text-gray-800">Dashboard</h1>
|
|
<a href="{{ url_for('main.add_reading') }}"
|
|
class="bg-blue-600 text-white px-4 py-2 rounded shadow hover:bg-blue-700">
|
|
+ Add New Reading
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Weekly Summary -->
|
|
<div class="bg-gradient-to-r from-blue-500 to-blue-700 text-white p-6 rounded-lg shadow-md">
|
|
<h3 class="text-lg font-bold">Weekly Summary</h3>
|
|
<div class="flex justify-between mt-4">
|
|
<div>
|
|
<p class="text-sm font-semibold">Systolic Average</p>
|
|
<p class="text-2xl">{{ systolic_avg }} <span class="text-base">mmHg</span></p>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm font-semibold">Diastolic Average</p>
|
|
<p class="text-2xl">{{ diastolic_avg }} <span class="text-base">mmHg</span></p>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm font-semibold">Heart Rate Average</p>
|
|
<p class="text-2xl">{{ heart_rate_avg }} <span class="text-base">bpm</span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Progress Badges -->
|
|
<div>
|
|
<h3 class="text-lg font-bold text-gray-800 mb-2">Progress Badges</h3>
|
|
<div class="flex flex-wrap gap-4">
|
|
{% for badge in badges %}
|
|
<div class="bg-green-100 text-green-800 px-4 py-2 rounded shadow text-sm font-medium">
|
|
{{ badge }}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Filter Form -->
|
|
<form method="POST" action="{{ url_for('main.filter_dashboard') }}" class="p-4 bg-white rounded-lg shadow-md">
|
|
<h3 class="text-lg font-bold text-gray-800 mb-4">Filter Readings</h3>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label for="start_date" class="block text-sm font-medium text-gray-700">Start Date</label>
|
|
<input type="date" name="start_date" id="start_date" class="w-full p-2 border rounded">
|
|
</div>
|
|
<div>
|
|
<label for="end_date" class="block text-sm font-medium text-gray-700">End Date</label>
|
|
<input type="date" name="end_date" id="end_date" class="w-full p-2 border rounded">
|
|
</div>
|
|
</div>
|
|
<div class="mt-4">
|
|
<button type="submit" class="w-full md:w-auto bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700">
|
|
Apply Filters
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Readings Table -->
|
|
<div class="bg-white rounded-lg shadow-md overflow-hidden">
|
|
<table class="w-full bg-white rounded shadow border-collapse">
|
|
<thead class="bg-gray-200">
|
|
<tr>
|
|
<th class="p-2 text-left">Timestamp</th>
|
|
<th class="p-2 text-left">Systolic</th>
|
|
<th class="p-2 text-left">Diastolic</th>
|
|
<th class="p-2 text-left">Heart Rate</th>
|
|
<th class="p-2 text-left">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for reading in readings %}
|
|
<tr class="border-t hover:bg-gray-100">
|
|
<td class="p-2">{{ reading.timestamp }}</td>
|
|
<td class="p-2">{{ reading.systolic }}</td>
|
|
<td class="p-2">{{ reading.diastolic }}</td>
|
|
<td class="p-2">{{ reading.heart_rate }}</td>
|
|
<td class="p-2">
|
|
<a href="{{ url_for('main.edit_reading', reading_id=reading.id) }}"
|
|
class="text-blue-600 hover:underline">Edit</a>
|
|
<form method="POST" action="{{ url_for('main.delete_reading', reading_id=reading.id) }}"
|
|
class="inline">
|
|
{{ delete_form.hidden_tag() }}
|
|
<button type="submit" class="text-red-600 hover:underline ml-2">
|
|
Delete
|
|
</button>
|
|
</form>
|
|
</td>
|
|
</tr>
|
|
{% else %}
|
|
<tr>
|
|
<td colspan="5" class="p-2 text-center text-gray-500">No readings found.</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
|
|
</div>
|
|
</div>
|
|
{% endblock %} |