Redesign BP tracker with lightweight views and unobtrusive save confirmations
This commit is contained in:
Peter Stockings
@@ -1,74 +1,15 @@
|
||||
{% extends "_layout.html" %}
|
||||
{% block content %}
|
||||
<div class="max-w-lg mx-auto bg-white p-8 rounded-lg shadow-md relative">
|
||||
<!-- Cancel Button (Top-Left) -->
|
||||
<a href="{{ request.referrer if request.referrer else url_for('main.dashboard') }}"
|
||||
class="absolute top-5 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>
|
||||
<h1 class="text-3xl font-bold text-center text-gray-800 mb-6">Add Reading</h1>
|
||||
<form method="POST" action="{{ url_for('reading.add_reading') }}" novalidate class="space-y-6">
|
||||
{{ form.hidden_tag() }}
|
||||
|
||||
<!-- Timestamp Field -->
|
||||
<div>
|
||||
{{ form.timestamp.label(class="block text-sm font-medium text-gray-700 mb-2") }}
|
||||
{{ form.timestamp(class="w-full p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none
|
||||
focus:ring-2 focus:ring-blue-500 focus:border-blue-500") }}
|
||||
{% for error in form.timestamp.errors %}
|
||||
<p class="text-sm text-red-600 mt-1">{{ error }}</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<!-- Systolic Field -->
|
||||
<div>
|
||||
{{ form.systolic.label(class="block text-sm font-medium text-gray-700 mb-2") }}
|
||||
{{ form.systolic(class="w-full p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none
|
||||
focus:ring-2 focus:ring-blue-500 focus:border-blue-500") }}
|
||||
{% for error in form.systolic.errors %}
|
||||
<p class="text-sm text-red-600 mt-1">{{ error }}</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<!-- Diastolic Field -->
|
||||
<div>
|
||||
{{ form.diastolic.label(class="block text-sm font-medium text-gray-700 mb-2") }}
|
||||
{{ form.diastolic(class="w-full p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none
|
||||
focus:ring-2 focus:ring-blue-500 focus:border-blue-500") }}
|
||||
{% for error in form.diastolic.errors %}
|
||||
<p class="text-sm text-red-600 mt-1">{{ error }}</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<!-- Heart Rate Field -->
|
||||
<div>
|
||||
{{ form.heart_rate.label(class="block text-sm font-medium text-gray-700 mb-2") }}
|
||||
{{ form.heart_rate(class="w-full p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none
|
||||
focus:ring-2 focus:ring-blue-500 focus:border-blue-500") }}
|
||||
{% for error in form.heart_rate.errors %}
|
||||
<p class="text-sm text-red-600 mt-1">{{ error }}</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<!-- Buttons -->
|
||||
<div class="flex justify-between items-center space-x-6">
|
||||
<!-- Cancel Button -->
|
||||
<a href="{{ url_for('main.dashboard') }}" class="w-full bg-gray-100 text-gray-700 py-3 rounded-lg font-semibold
|
||||
hover:bg-gray-200 hover:text-gray-900 shadow-md text-center transition">
|
||||
Cancel
|
||||
</a>
|
||||
|
||||
<!-- Save Button -->
|
||||
<button type="submit" class="w-full bg-blue-600 text-white py-3 rounded-lg font-semibold
|
||||
hover:bg-blue-700 shadow-lg text-center transition">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% extends '_layout.html' %}
|
||||
{% from 'components.html' import field %}
|
||||
{% block title %}{{ 'Edit' if reading is defined else 'Add' }} reading · BP Tracker{% endblock %}
|
||||
{% block content %}
|
||||
<div class="form-page"><a class="back-link" href="{{ url_for('main.dashboard') }}">← Back to overview</a><div class="page-heading"><div><p class="eyebrow">ONE READING AT A TIME</p><h1>{{ 'Edit reading' if reading is defined else 'Add reading' }}</h1><p class="muted">Enter the values shown on your monitor.</p></div></div>
|
||||
<form method="post" class="card entry-form" novalidate>
|
||||
{{ form.hidden_tag() }}
|
||||
{% if form.errors %}<div class="notice notice-error" role="alert">Please check the highlighted fields.{% if form.csrf_token is defined %}{% for error in form.csrf_token.errors %} {{ error }}{% endfor %}{% endif %}</div>{% endif %}
|
||||
<fieldset><legend>Blood pressure <span class="muted small">mmHg</span></legend><div class="pressure-fields">{{ field(form.systolic, true) }}<span class="entry-slash" aria-hidden="true">/</span>{{ field(form.diastolic, true) }}</div></fieldset>
|
||||
{{ field(form.heart_rate, true) }}
|
||||
<div class="timestamp-field">{{ field(form.timestamp) }}<p class="muted small">Local time · {{ current_user.profile.timezone if current_user.profile else 'UTC' }}</p></div>
|
||||
<div class="form-actions"><button class="button primary" name="action" value="save" type="submit">Save reading</button>{% if reading is not defined %}<button class="button" name="action" value="another" type="submit">Save & add another</button>{% endif %}<a href="{{ url_for('main.dashboard') }}">Cancel</a></div>
|
||||
{% if reading is defined %}<div class="delete-link"><a href="{{ url_for('reading.confirm_delete', reading_id=reading.id) }}">Delete this reading</a></div>{% endif %}
|
||||
</form><p class="form-hint">Your readings stay editable in History.</p></div>
|
||||
{% endblock %}
|
||||
|
||||
@@ -1,40 +1,3 @@
|
||||
{% extends "_layout.html" %}
|
||||
|
||||
{% block content %}
|
||||
<div class="max-w-lg mx-auto p-4 relative">
|
||||
<!-- Cancel Button (Top-Left) -->
|
||||
<a href="{{ request.referrer if request.referrer else url_for('main.dashboard') }}"
|
||||
class="absolute top-5 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>
|
||||
<h2 class="text-2xl font-bold mb-4 text-center">Confirm Deletion</h2>
|
||||
<div class="bg-white p-8 rounded-lg shadow-md">
|
||||
<p class="text-sm text-gray-600 mt-2">Are you sure you want to delete the following reading?</p>
|
||||
|
||||
<!-- Reading Details -->
|
||||
<div class="mt-4 p-4 bg-gray-100 rounded">
|
||||
<p><strong>Timestamp:</strong> {{ reading.timestamp.strftime('%d %b %Y, %I:%M %p') }}</p>
|
||||
<p><strong>Systolic:</strong> {{ reading.systolic }} mmHg</p>
|
||||
<p><strong>Diastolic:</strong> {{ reading.diastolic }} mmHg</p>
|
||||
<p><strong>Heart Rate:</strong> {{ reading.heart_rate }} bpm</p>
|
||||
</div>
|
||||
|
||||
<!-- Confirmation Buttons -->
|
||||
<div class="mt-6 flex justify-end space-x-2">
|
||||
<a href="{{ url_for('main.dashboard') }}"
|
||||
class="px-4 py-2 bg-gray-300 text-gray-700 rounded hover:bg-gray-400">
|
||||
Cancel
|
||||
</a>
|
||||
<form method="POST" action="{{ url_for('reading.delete_reading', reading_id=reading.id) }}">
|
||||
<button type="submit" class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700">
|
||||
Confirm
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% extends '_layout.html' %}
|
||||
{% block title %}Delete reading · BP Tracker{% endblock %}
|
||||
{% block content %}<div class="form-page"><div class="page-heading"><div><p class="eyebrow">READING DETAILS</p><h1>Delete this reading?</h1><p class="muted">This permanently removes the reading from your history.</p></div></div><section class="card"><p class="big-number">{{ reading.systolic }} / {{ reading.diastolic }} <span class="unit">mmHg</span></p><p>{{ reading.heart_rate }} bpm · {{ reading.local_timestamp.strftime('%d %b %Y, %I:%M %p') }}</p><form method="post" action="{{ url_for('reading.delete_reading', reading_id=reading.id) }}" class="form-actions">{{ form.hidden_tag() }}<button class="button danger" type="submit">Delete reading</button><a class="button" href="{{ url_for('reading.edit_reading', reading_id=reading.id) }}">Keep reading</a></form></section></div>{% endblock %}
|
||||
|
||||
@@ -1,79 +1 @@
|
||||
{% extends "_layout.html" %}
|
||||
{% block content %}
|
||||
<div class="max-w-lg mx-auto p-4 relative">
|
||||
<!-- Cancel Button (Top-Left) -->
|
||||
<a href="{{ url_for('main.dashboard') }}"
|
||||
class="absolute top-5 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('reading.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-2xl font-bold mb-4 text-center">Edit Reading</h1>
|
||||
<form method="POST" action="{{ url_for('reading.edit_reading', reading_id=reading.id) }}" novalidate
|
||||
class="bg-white p-8 rounded-lg shadow-md">
|
||||
{{ form.hidden_tag() }}
|
||||
|
||||
<!-- Timestamp Field -->
|
||||
<div class="mb-4">
|
||||
{{ form.timestamp.label(class="block text-sm font-medium text-gray-700") }}
|
||||
{{ form.timestamp(class="w-full p-3 border rounded-lg shadow-sm focus:outline-none focus:ring-2
|
||||
focus:ring-blue-500 focus:border-blue-500") }}
|
||||
{% for error in form.timestamp.errors %}
|
||||
<p class="text-sm text-red-600 mt-1">{{ error }}</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<!-- Systolic Field -->
|
||||
<div class="mb-4">
|
||||
{{ form.systolic.label(class="block text-sm font-medium text-gray-700") }}
|
||||
{{ form.systolic(class="w-full p-3 border rounded-lg shadow-sm focus:outline-none focus:ring-2
|
||||
focus:ring-blue-500 focus:border-blue-500") }}
|
||||
{% for error in form.systolic.errors %}
|
||||
<p class="text-sm text-red-600 mt-1">{{ error }}</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<!-- Diastolic Field -->
|
||||
<div class="mb-4">
|
||||
{{ form.diastolic.label(class="block text-sm font-medium text-gray-700") }}
|
||||
{{ form.diastolic(class="w-full p-3 border rounded-lg shadow-sm focus:outline-none focus:ring-2
|
||||
focus:ring-blue-500 focus:border-blue-500") }}
|
||||
{% for error in form.diastolic.errors %}
|
||||
<p class="text-sm text-red-600 mt-1">{{ error }}</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<!-- Heart Rate Field -->
|
||||
<div class="mb-4">
|
||||
{{ form.heart_rate.label(class="block text-sm font-medium text-gray-700") }}
|
||||
{{ form.heart_rate(class="w-full p-3 border rounded-lg shadow-sm focus:outline-none focus:ring-2
|
||||
focus:ring-blue-500 focus:border-blue-500") }}
|
||||
{% for error in form.heart_rate.errors %}
|
||||
<p class="text-sm text-red-600 mt-1">{{ error }}</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<!-- Save Button -->
|
||||
<div class="mt-6">
|
||||
<button type="submit"
|
||||
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>
|
||||
</form>
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% extends 'reading/add_reading.html' %}
|
||||
|
||||
Reference in New Issue
Block a user