From f3c778048fbdf1fe30022125f070420b8d19da08 Mon Sep 17 00:00:00 2001
From: Peter Stockings <pstockings@jadeworld.com>
Date: Tue, 24 Dec 2024 23:24:15 +1100
Subject: [PATCH] Add page to confirm deletion and add cancel button on edit
 page

---
 app/routes.py                     | 16 ++++++++++
 app/templates/confirm_delete.html | 28 +++++++++++++++++
 app/templates/dashboard.html      | 52 +++++++++++++++++++++----------
 app/templates/edit_reading.html   | 14 +++++++--
 4 files changed, 91 insertions(+), 19 deletions(-)
 create mode 100644 app/templates/confirm_delete.html

diff --git a/app/routes.py b/app/routes.py
index ef26ffd..731db21 100644
--- a/app/routes.py
+++ b/app/routes.py
@@ -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):
diff --git a/app/templates/confirm_delete.html b/app/templates/confirm_delete.html
new file mode 100644
index 0000000..6e3f1c7
--- /dev/null
+++ b/app/templates/confirm_delete.html
@@ -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 %}
\ No newline at end of file
diff --git a/app/templates/dashboard.html b/app/templates/dashboard.html
index 45b499e..2234459 100644
--- a/app/templates/dashboard.html
+++ b/app/templates/dashboard.html
@@ -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 %}
\ No newline at end of file
diff --git a/app/templates/edit_reading.html b/app/templates/edit_reading.html
index 827a4c6..1ab3342 100644
--- a/app/templates/edit_reading.html
+++ b/app/templates/edit_reading.html
@@ -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>