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

Improve look of dashboard

Browse Source
This commit is contained in:
Peter Stockings
2024-12-24 11:22:04 +11:00
parent 312da29ffb
commit 03510190ea
1 changed files with 74 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
app/templates/dashboard.html
View File

@@ -42,46 +42,66 @@
</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 x-data="{ open: false }" class="p-4 bg-white rounded-lg shadow-md">
<!-- Collapsible Header -->
<div class="flex justify-between items-center">
<h3 class="text-lg font-bold text-gray-800">Filter Readings</h3>
<button @click="open = !open" class="text-blue-600 hover:underline">
<span x-show="!open">Show Filters</span>
<span x-show="open" x-cloak>Hide Filters</span>
</button>
</div>
<!-- Collapsible Content -->
<form method="POST" action="{{ url_for('main.filter_dashboard') }}" x-show="open" x-transition.duration.300ms
class="mt-4">
<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">
<input type="date" name="start_date" id="start_date"
class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
</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">
<input type="date" name="end_date" id="end_date"
class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
</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">
<button type="submit"
class="w-full md:w-auto bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
Apply Filters
</button>
</div>
</form>
</div>
<!-- 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">
<div class="overflow-x-auto">
<table class="w-full text-left bg-white border-collapse">
<!-- Table Header -->
<thead class="bg-gray-50 border-b">
<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>
<th class="px-6 py-3 text-sm font-semibold text-gray-700 uppercase">Timestamp</th>
<th class="px-6 py-3 text-sm font-semibold text-gray-700 uppercase">Blood Pressure (mmHg)</th>
<th class="px-6 py-3 text-sm font-semibold text-gray-700 uppercase">Heart Rate</th>
<th class="px-6 py-3 text-sm font-semibold text-gray-700 uppercase">Actions</th>
</tr>
</thead>
<!-- Table Body -->
<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">
<tr class="border-b hover:bg-gray-50">
<td class="px-6 py-4 text-sm text-gray-600"> {{ reading.timestamp.strftime('%d %b %Y, %I:%M %p')
}}
</td>
<td class="px-6 py-4 text-sm text-gray-600">
{{ reading.systolic }}/{{ reading.diastolic }}
</td>
<td class="px-6 py-4 text-sm text-gray-600">{{ reading.heart_rate }}</td>
<td class="px-6 py-4 text-sm text-gray-600">
<a rel="prefetch" 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) }}"
@@ -95,12 +115,13 @@
</tr>
{% else %}
<tr>
<td colspan="5" class="p-2 text-center text-gray-500">No readings found.</td>
<td colspan="4" class="px-6 py-4 text-center text-sm text-gray-500">No readings found.</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
{% endblock %}