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>
|
||||
|
||||
|
||||
@@ -1,6 +1,27 @@
|
||||
{% extends "_layout.html" %}
|
||||
{% block content %}
|
||||
<div class="max-w-lg mx-auto bg-white p-8 rounded-lg shadow-md">
|
||||
<div class="max-w-lg mx-auto bg-white p-8 rounded-lg shadow-md relative">
|
||||
<!-- Cancel Button (Top-Left) -->
|
||||
<a href="{{ url_for('main.dashboard') }}"
|
||||
class="absolute top-4 left-4 flex items-center text-gray-600 hover:text-gray-800">
|
||||
<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="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
<span>Back</span>
|
||||
</a>
|
||||
|
||||
<!-- Delete Button (Top-Right) -->
|
||||
<a href="{{ url_for('main.confirm_delete', reading_id=reading.id) }}"
|
||||
class="absolute top-4 right-4 text-red-500 hover:text-red-700">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
|
||||
class="size-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
|
||||
</svg>
|
||||
|
||||
</a>
|
||||
|
||||
<h1 class="text-3xl font-bold text-center text-gray-800 mb-6">Edit Reading</h1>
|
||||
<form method="POST" action="{{ url_for('main.edit_reading', reading_id=reading.id) }}" novalidate>
|
||||
{{ form.hidden_tag() }}
|
||||
@@ -45,17 +66,10 @@
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<!-- Buttons -->
|
||||
<div class="flex justify-between items-center mt-6">
|
||||
<!-- Cancel Button -->
|
||||
<a href="{{ url_for('main.dashboard') }}" class="px-6 py-3 bg-gray-300 text-gray-700 rounded-lg shadow-sm
|
||||
hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-gray-400">
|
||||
Cancel
|
||||
</a>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<!-- Save Button -->
|
||||
<div class="mt-6">
|
||||
<button type="submit"
|
||||
class="px-6 py-3 bg-blue-600 text-white rounded-lg shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
||||
class="w-full bg-blue-600 text-white py-3 rounded-lg font-semibold shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
||||
Save Changes
|
||||
</button>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user