Change readings table to list of cards, also update edit reading page to include link to delete reading
This commit is contained in:
Peter Stockings
@@ -168,67 +168,58 @@
|
||||
<!-- Readings Table -->
|
||||
<div class="bg-white rounded-lg shadow-md overflow-hidden">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-left border-collapse">
|
||||
<!-- Table Header -->
|
||||
<thead class="bg-gray-50 border-b">
|
||||
<tr>
|
||||
<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 text-center">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<!-- Table Body -->
|
||||
<tbody>
|
||||
{% for reading in readings %}
|
||||
<tr class="border-b hover:bg-gray-50">
|
||||
<!-- Timestamp -->
|
||||
<td class="px-6 py-4 text-sm text-gray-600 whitespace-nowrap">
|
||||
{{ reading.timestamp.strftime('%d %b %Y, %I:%M %p') }}
|
||||
</td>
|
||||
<!-- Blood Pressure -->
|
||||
<td class="px-6 py-4 text-sm text-gray-600 whitespace-nowrap">
|
||||
{{ reading.systolic }}/{{ reading.diastolic }}
|
||||
</td>
|
||||
<!-- Heart Rate -->
|
||||
<td class="px-6 py-4 text-sm text-gray-600 whitespace-nowrap">
|
||||
{{ reading.heart_rate }} bpm
|
||||
</td>
|
||||
<!-- Actions -->
|
||||
<td class="px-6 py-4 text-center">
|
||||
<!-- Edit Button -->
|
||||
<a rel="prefetch" href="{{ url_for('main.edit_reading', reading_id=reading.id) }}"
|
||||
class="inline-flex items-center px-2 py-1 text-sm font-medium text-blue-600 hover:text-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||
stroke-width="1.5" stroke="currentColor" class="w-3 h-3 mr-1">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125" />
|
||||
</svg>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{% for reading in readings %}
|
||||
<a href="{{ url_for('main.edit_reading', reading_id=reading.id) }}"
|
||||
class="bg-white shadow-md rounded-lg p-4 flex flex-col justify-between relative hover:shadow-lg transition-shadow">
|
||||
<!-- Timestamp -->
|
||||
<div class="absolute top-2 right-2 flex items-center text-gray-400 text-xs">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 mr-1" fill="none" viewBox="0 0 24 24"
|
||||
stroke="currentColor" stroke-width="1.5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M12 8v4l3 3m9-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0z" />
|
||||
</svg>
|
||||
<span title="{{ reading.timestamp.strftime('%d %b %Y, %I:%M %p') }}">
|
||||
{{ reading.relative_timestamp }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Blood Pressure -->
|
||||
<div class="text-sm text-gray-600 mb-2">
|
||||
<span class="block text-lg font-semibold text-gray-800">Blood Pressure</span>
|
||||
<span class="text-2xl font-bold text-blue-600">{{ reading.systolic }}</span>
|
||||
<span class="text-lg text-gray-500">/</span>
|
||||
<span class="text-xl font-bold text-red-600">{{ reading.diastolic }}</span>
|
||||
<span class="text-sm text-gray-500">mmHg</span>
|
||||
</div>
|
||||
|
||||
<!-- Heart Rate and Arrow -->
|
||||
<div class="flex justify-between items-center mt-4">
|
||||
<div class="text-sm text-gray-600">
|
||||
<span class="block text-lg font-semibold text-gray-800">Heart Rate</span>
|
||||
<span class="text-2xl font-bold text-green-600">{{ reading.heart_rate }}</span>
|
||||
<span class="text-sm text-gray-500">bpm</span>
|
||||
</div>
|
||||
<!-- Arrow Icon -->
|
||||
<div class="text-gray-400 hover:text-gray-600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="h-5 w-5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M6.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM12.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM18.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
|
||||
</svg>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{% else %}
|
||||
<div class="col-span-full text-center text-sm text-gray-500">
|
||||
No readings found.
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<span>Edit</span>
|
||||
</a>
|
||||
|
||||
<!-- Delete Button -->
|
||||
<a href="{{ url_for('main.confirm_delete', reading_id=reading.id) }}"
|
||||
class="flex items-center px-2 py-1 text-sm font-medium text-red-600 hover:text-red-800 focus:outline-none focus:ring-2 focus:ring-red-500">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 mr-1" fill="none"
|
||||
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
<span>Delete</span>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% else %}
|
||||
<tr>
|
||||
<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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user