Add page to confirm deletion and add cancel button on edit page

This commit is contained in:
Peter Stockings
2024-12-24 23:24:15 +11:00
parent c160f9d214
commit f3c778048f
4 changed files with 91 additions and 19 deletions

View File

@@ -157,6 +157,22 @@ def edit_reading(reading_id):
return render_template('edit_reading.html', form=form, reading=reading)
@main.route('/confirm_delete/<int:reading_id>', methods=['GET', 'POST'])
@login_required
def confirm_delete(reading_id):
# Fetch the reading to confirm deletion
reading = Reading.query.filter_by(id=reading_id, user_id=current_user.id).first_or_404()
if request.method == 'POST':
# Handle deletion
db.session.delete(reading)
db.session.commit()
flash('Reading deleted successfully!', 'success')
return redirect(url_for('main.dashboard'))
return render_template('confirm_delete.html', reading=reading)
@main.route('/reading/<int:reading_id>/delete', methods=['POST'])
@login_required
def delete_reading(reading_id):

View File

@@ -0,0 +1,28 @@
{% extends "_layout.html" %}
{% block content %}
<div class="max-w-lg mx-auto bg-white p-6 rounded-lg shadow-md mt-10">
<h2 class="text-lg font-bold text-gray-800">Confirm Deletion</h2>
<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('main.confirm_delete', 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>
{% endblock %}

View File

@@ -168,14 +168,14 @@
<!-- Readings Table -->
<div class="bg-white rounded-lg shadow-md overflow-hidden">
<div class="overflow-x-auto">
<table class="w-full text-left bg-white border-collapse">
<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">Actions</th>
<th class="px-6 py-3 text-sm font-semibold text-gray-700 uppercase text-center">Actions</th>
</tr>
</thead>
@@ -183,28 +183,47 @@
<tbody>
{% for reading in readings %}
<tr class="border-b hover:bg-gray-50">
<td class="px-6 py-4 text-sm text-gray-600"> {{ reading.timestamp.strftime('%d %b %Y, %I:%M %p')
}}
<!-- Timestamp -->
<td class="px-6 py-4 text-sm text-gray-600 whitespace-nowrap">
{{ reading.timestamp.strftime('%d %b %Y, %I:%M %p') }}
</td>
<td class="px-6 py-4 text-sm text-gray-600">
<!-- Blood Pressure -->
<td class="px-6 py-4 text-sm text-gray-600 whitespace-nowrap">
{{ reading.systolic }}/{{ reading.diastolic }}
</td>
<td class="px-6 py-4 text-sm text-gray-600">{{ reading.heart_rate }}</td>
<td class="px-6 py-4 text-sm text-gray-600">
<!-- 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="text-blue-600 hover:underline">Edit</a>
<form method="POST" action="{{ url_for('main.delete_reading', reading_id=reading.id) }}"
class="inline">
{{ delete_form.hidden_tag() }}
<button type="submit" class="text-red-600 hover:underline ml-2">
Delete
</button>
</form>
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" 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.232 5.232l3.536 3.536M9 11l6.232-6.232a2 2 0 112.828 2.828L11 13.828V17H8v-3l6.232-6.232z" />
</svg>
Edit
</a>
<!-- Delete Button -->
<a href="{{ url_for('main.confirm_delete', reading_id=reading.id) }}"
class="inline-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>
Delete
</a>
</td>
</tr>
{% else %}
<tr>
<td colspan="4" class="px-6 py-4 text-center text-sm text-gray-500">No readings found.</td>
<td colspan="4" class="px-6 py-4 text-center text-sm text-gray-500">
No readings found.
</td>
</tr>
{% endfor %}
</tbody>
@@ -212,5 +231,6 @@
</div>
</div>
</div>
{% endblock %}

View File

@@ -45,9 +45,17 @@
{% endfor %}
</div>
<!-- Submit Button -->
<div>
<button type="submit" class="w-full bg-blue-600 text-white py-3 rounded-lg font-semibold hover:bg-blue-700">
<!-- 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 -->
<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">
Save Changes
</button>
</div>