172 lines
10 KiB
HTML
172 lines
10 KiB
HTML
<div class="space-y-6">
|
|
<!-- Table Date Filter -->
|
|
<div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-4 mb-2">
|
|
<form hx-get="{{ url_for('main.dashboard_table') }}" hx-target="#dashboard-content"
|
|
class="flex flex-col sm:flex-row gap-4">
|
|
<!-- Start Date -->
|
|
<div class="flex-1">
|
|
<label for="start_date" class="block text-sm font-medium text-gray-700 mb-1">Start Date</label>
|
|
<input type="date" name="start_date" id="start_date" value="{{ start_date or '' }}"
|
|
class="w-full p-2.5 border border-gray-300 rounded-xl shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500 text-gray-700">
|
|
</div>
|
|
|
|
<!-- End Date -->
|
|
<div class="flex-1">
|
|
<label for="end_date" class="block text-sm font-medium text-gray-700 mb-1">End Date</label>
|
|
<input type="date" name="end_date" id="end_date" value="{{ end_date or '' }}"
|
|
class="w-full p-2.5 border border-gray-300 rounded-xl shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500 text-gray-700">
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Data Container -->
|
|
<div class="bg-transparent md:bg-white md:rounded-2xl md:shadow-sm md:border md:border-gray-100 overflow-hidden">
|
|
|
|
<!-- Mobile Card View (Hidden on medium screens and up) -->
|
|
<div class="md:hidden space-y-4">
|
|
{% for reading in readings %}
|
|
<div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100 flex flex-col gap-3">
|
|
<div class="flex justify-between items-center border-b border-gray-50 pb-2">
|
|
<div class="flex items-center gap-2">
|
|
<svg class="w-4 h-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
|
</svg>
|
|
<span class="text-sm font-bold text-gray-800">{{ reading.local_timestamp.strftime('%Y-%m-%d')
|
|
}}</span>
|
|
</div>
|
|
<span class="text-sm font-medium text-gray-500">{{ reading.local_timestamp.strftime('%I:%M %p')
|
|
}}</span>
|
|
</div>
|
|
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Blood Pressure</span>
|
|
<div class="flex items-baseline gap-1">
|
|
<span
|
|
class="font-bold text-lg {{ 'text-red-500' if reading.systolic >= 130 else 'text-gray-900' }}">{{
|
|
reading.systolic }}</span>
|
|
<span class="font-medium text-gray-400">/</span>
|
|
<span
|
|
class="font-bold text-lg {{ 'text-red-500' if reading.diastolic >= 80 else 'text-gray-900' }}">{{
|
|
reading.diastolic }}</span>
|
|
<span class="text-xs text-gray-500 font-medium ml-1">mmHg</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Heart Rate</span>
|
|
<div class="flex items-baseline">
|
|
<span class="font-bold text-lg text-gray-900">{{ reading.heart_rate }}</span>
|
|
<span class="text-xs text-gray-500 font-medium ml-1">bpm</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-end pt-3 mt-1 border-t border-gray-50">
|
|
<a href="{{ url_for('reading.edit_reading', reading_id=reading.id) }}"
|
|
class="inline-flex items-center gap-1 text-primary-600 hover:text-primary-800 text-sm font-bold transition-colors">
|
|
Edit
|
|
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<div
|
|
class="bg-white p-8 text-center rounded-xl shadow-sm border border-gray-100 flex flex-col items-center gap-3">
|
|
<svg class="w-12 h-12 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
|
|
</svg>
|
|
<span class="text-sm font-medium text-gray-500">No readings found for this date range.</span>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- Desktop Table View (Hidden on small screens) -->
|
|
<div class="hidden md:block overflow-x-auto">
|
|
<table class="min-w-full divide-y divide-gray-200">
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
<th scope="col"
|
|
class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">
|
|
Date</th>
|
|
<th scope="col"
|
|
class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">
|
|
Time</th>
|
|
<th scope="col"
|
|
class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">
|
|
Systolic</th>
|
|
<th scope="col"
|
|
class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">
|
|
Diastolic</th>
|
|
<th scope="col"
|
|
class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">
|
|
Heart Rate</th>
|
|
<th scope="col"
|
|
class="px-6 py-3 text-right text-xs font-semibold text-gray-500 uppercase tracking-wider">
|
|
Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
{% for reading in readings %}
|
|
<tr class="hover:bg-gray-50 transition-colors">
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{
|
|
reading.local_timestamp.strftime('%Y-%m-%d') }}</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{
|
|
reading.local_timestamp.strftime('%I:%M %p') }}</td>
|
|
<td
|
|
class="px-6 py-4 whitespace-nowrap text-sm font-semibold {{ 'text-red-500' if reading.systolic >= 130 else 'text-gray-900' }}">
|
|
{{ reading.systolic }}</td>
|
|
<td
|
|
class="px-6 py-4 whitespace-nowrap text-sm font-semibold {{ 'text-red-500' if reading.diastolic >= 80 else 'text-gray-900' }}">
|
|
{{ reading.diastolic }}</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ reading.heart_rate }} bpm</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
|
<a href="{{ url_for('reading.edit_reading', reading_id=reading.id) }}"
|
|
class="text-primary-600 hover:text-primary-900">Edit</a>
|
|
</td>
|
|
</tr>
|
|
{% else %}
|
|
<tr>
|
|
<td colspan="6" class="px-6 py-12 text-center text-sm text-gray-500">
|
|
No readings found for this date range.
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pagination Controls -->
|
|
{% if pagination.pages > 1 %}
|
|
<div class="flex justify-center items-center gap-2 mt-6">
|
|
{% if pagination.has_prev %}
|
|
<button
|
|
hx-get="{{ url_for('main.dashboard_table', page=pagination.prev_num, start_date=start_date, end_date=end_date) }}"
|
|
hx-target="#dashboard-content" class="px-3 py-1 rounded bg-gray-200 hover:bg-gray-300 text-sm">«
|
|
Prev</button>
|
|
{% endif %}
|
|
|
|
{% for page_num in pagination.iter_pages(left_edge=1, right_edge=1, left_current=2, right_current=2) %}
|
|
{% if page_num %}
|
|
<button hx-get="{{ url_for('main.dashboard_table', page=page_num, start_date=start_date, end_date=end_date) }}"
|
|
hx-target="#dashboard-content"
|
|
class="px-3 py-1 rounded text-sm {% if page_num == pagination.page %}bg-primary-600 text-white{% else %}bg-gray-200 hover:bg-gray-300{% endif %}">
|
|
{{ page_num }}
|
|
</button>
|
|
{% else %}
|
|
<span class="text-gray-400">…</span>
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
{% if pagination.has_next %}
|
|
<button
|
|
hx-get="{{ url_for('main.dashboard_table', page=pagination.next_num, start_date=start_date, end_date=end_date) }}"
|
|
hx-target="#dashboard-content" class="px-3 py-1 rounded bg-gray-200 hover:bg-gray-300 text-sm">Next
|
|
»</button>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
</div> |