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

Change readings table to list of cards, also update edit reading page to include link to delete reading

Browse Source
This commit is contained in:
Peter Stockings
2024-12-26 16:06:55 +11:00
parent 26cf035b22
commit 97a8e54e11
5 changed files with 201 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
app/routes.py
View File

@@ -2,6 +2,7 @@ import csv
from io import StringIO
import io
from flask import Blueprint, Response, make_response, render_template, redirect, request, send_file, url_for, flash
import humanize
from sqlalchemy import func
from werkzeug.security import generate_password_hash, check_password_hash
from werkzeug.http import http_date
@@ -104,6 +105,12 @@ def dashboard():
# Fetch and order readings
readings = readings_query.order_by(Reading.timestamp.desc()).all()
# Add human-readable relative timestamps to readings
now = datetime.utcnow()
for reading in readings:
reading.relative_timestamp = humanize.naturaltime(now - reading.timestamp)
# Weekly summary (last 7 days)
one_week_ago = datetime.now() - timedelta(days=7)
weekly_readings = [r for r in readings if r.timestamp >= one_week_ago]

119
app/static/css/tailwind.css
View File

@@ -600,14 +600,54 @@ video {
position: fixed;
}
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.inset-0 {
inset: 0px;
}
.top-0 {
top: 0px;
}
.right-2 {
right: 0.5rem;
}
.top-2 {
top: 0.5rem;
}
.bottom-2 {
bottom: 0.5rem;
}
.left-4 {
left: 1rem;
}
.right-4 {
right: 1rem;
}
.top-4 {
top: 1rem;
}
.z-10 {
z-index: 10;
}
.col-span-full {
grid-column: 1 / -1;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
@@ -810,6 +850,10 @@ video {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.flex-col {
flex-direction: column;
}
.flex-wrap {
flex-wrap: wrap;
}
@@ -842,6 +886,10 @@ video {
gap: 2rem;
}
.gap-6 {
gap: 1.5rem;
}
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
@@ -896,6 +944,10 @@ video {
border-radius: 0.5rem;
}
.rounded-md {
border-radius: 0.375rem;
}
.border {
border-width: 1px;
}
@@ -1066,6 +1118,11 @@ video {
padding-bottom: 1rem;
}
.px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.pl-2 {
padding-left: 0.5rem;
}
@@ -1117,6 +1174,11 @@ video {
line-height: 1.75rem;
}
.text-xs {
font-size: 0.75rem;
line-height: 1rem;
}
.font-bold {
font-weight: 700;
}
@@ -1173,6 +1235,21 @@ video {
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-gray-400 {
--tw-text-opacity: 1;
color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.text-green-600 {
--tw-text-opacity: 1;
color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}
.text-red-500 {
--tw-text-opacity: 1;
color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.no-underline {
text-decoration-line: none;
}
@@ -1209,6 +1286,18 @@ video {
transition-duration: 150ms;
}
.transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-shadow {
transition-property: box-shadow;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.hover\:bg-blue-700:hover {
--tw-bg-opacity: 1;
background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
@@ -1269,6 +1358,21 @@ video {
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.hover\:text-gray-600:hover {
--tw-text-opacity: 1;
color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.hover\:text-gray-800:hover {
--tw-text-opacity: 1;
color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.hover\:text-red-700:hover {
--tw-text-opacity: 1;
color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.hover\:underline:hover {
text-decoration-line: underline;
}
@@ -1277,6 +1381,12 @@ video {
text-decoration-line: none;
}
.hover\:shadow-lg:hover {
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.focus\:border-blue-500:focus {
--tw-border-opacity: 1;
border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
@@ -1287,6 +1397,11 @@ video {
border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
}
.focus\:border-red-500:focus {
--tw-border-opacity: 1;
border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}
.focus\:text-white:focus {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
@@ -1360,6 +1475,10 @@ video {
width: auto;
}
.lg\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.lg\:items-center {
align-items: center;
}

107
app/templates/dashboard.html
View File

@@ -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>

36
app/templates/edit_reading.html
View File

@@ -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>

1
requirements.txt
View File

@@ -13,6 +13,7 @@ flask-sqlalchemy==3.1.1
flask-wtf==1.2.2
greenlet==3.1.1
gunicorn==23.0.0
humanize==4.11.0
idna==3.10
importlib-metadata==8.5.0
itsdangerous==2.2.0