73 lines
3.5 KiB
HTML
73 lines
3.5 KiB
HTML
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
|
|
{% for reading in readings %}
|
|
<a href="{{ url_for('reading.edit_reading', reading_id=reading.id) }}"
|
|
class="bg-white shadow-sm hover:shadow-md rounded-xl p-3 flex justify-between items-center border border-gray-100 transition-all">
|
|
|
|
<!-- Left side: Timestamp & BP -->
|
|
<div>
|
|
<div class="flex items-center text-gray-400 text-xs mb-1">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5 mr-1" fill="none" viewBox="0 0 24 24"
|
|
stroke="currentColor" stroke-width="2">
|
|
<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.local_timestamp.strftime('%d %b %Y, %I:%M %p') }}">
|
|
{{ reading.relative_timestamp }}
|
|
</span>
|
|
</div>
|
|
<div class="flex items-baseline">
|
|
<span class="text-xl font-bold text-gray-800">{{ reading.systolic }}<span
|
|
class="text-gray-400 font-normal mx-0.5">/</span>{{ reading.diastolic }}</span>
|
|
<span class="text-xs text-gray-500 ml-1">mmHg</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right side: Heart Rate & Icon -->
|
|
<div class="flex items-center space-x-4">
|
|
<div class="text-right">
|
|
<span class="text-xs text-gray-500 block mb-0.5">HR</span>
|
|
<div class="flex items-baseline justify-end">
|
|
<span class="text-lg font-bold text-gray-700">{{ reading.heart_rate }}</span>
|
|
<span class="text-xs text-gray-400 ml-1">bpm</span>
|
|
</div>
|
|
</div>
|
|
<div class="text-gray-300">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
|
|
stroke="currentColor" class="h-4 w-4">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
{% else %}
|
|
<div class="col-span-full text-center text-sm text-gray-500">
|
|
No readings found.
|
|
</div>
|
|
{% endfor %}
|
|
</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_list', page=pagination.prev_num) }}" 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_list', page=page_num) }}" 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_list', page=pagination.next_num) }}" hx-target="#dashboard-content"
|
|
class="px-3 py-1 rounded bg-gray-200 hover:bg-gray-300 text-sm">Next »</button>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %} |