Add confirmation modal for deleting a workout

5 files changed, 63 insertions, 9 deletions

diff --git a/app/routes.py b/app/routes.py
index 1ff1023..17d8f4e 100644
--- a/app/routes.py
+++ b/app/routes.py
@@ -78,7 +78,7 @@ def createWorkout():
         else:
             flash("Workout with this name already exists", "danger")
 
-    return render_template('workout/create.html', form=form)
+    return render_template('workout/create.html', form=form, title="Create a Workout")
 
 @app.route("/workout/edit", methods=['GET', 'POST'])
 @login_required
@@ -110,4 +110,4 @@ def editWorkout():
         for exercise in workout.exercises:
             form.exercises.append_entry(exercise)
 
-    return render_template('workout/create.html', form=form)
+    return render_template('workout/create.html', form=form, title=f'Edit Workout "{workout.name}"')
diff --git a/app/static/js/bulma.js b/app/static/js/bulma.js
new file mode 100644
index 0000000..49b9b93
--- /dev/null
+++ b/app/static/js/bulma.js
@@ -0,0 +1,42 @@
+// Functions to open and close a modal
+function openModal($el) {
+	$el.classList.add('is-active');
+}
+
+function closeModal($el) {
+	$el.classList.remove('is-active');
+}
+
+function closeAllModals() {
+	(document.querySelectorAll('.modal') || []).forEach(($modal) => {
+		closeModal($modal);
+	});
+}
+
+// Add a click event on buttons to open a specific modal
+(document.querySelectorAll('.js-modal-trigger') || []).forEach(($trigger) => {
+	const modal = $trigger.dataset.target;
+	const $target = document.getElementById(modal);
+
+	$trigger.addEventListener('click', () => {
+		openModal($target);
+	});
+});
+
+// Add a click event on various child elements to close the parent modal
+(document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button') || []).forEach(($close) => {
+	const $target = $close.closest('.modal');
+
+	$close.addEventListener('click', () => {
+		closeModal($target);
+	});
+});
+
+// Add a keyboard event to close all modals
+document.addEventListener('keydown', (event) => {
+	const e = event || window.event;
+
+	if (e.keyCode === 27) { // Escape key
+		closeAllModals();
+	}
+});
diff --git a/app/templates/base/layout.html b/app/templates/base/layout.html
index 1acdfda..cbdb567 100644
--- a/app/templates/base/layout.html
+++ b/app/templates/base/layout.html
@@ -100,5 +100,6 @@
 	</section>
 
 	<!-- TODO: footer -->
+	<script async type="text/javascript" src="/static/js/bulma.js"></script>
 </body>
 </html>
diff --git a/app/templates/home.html b/app/templates/home.html
index 4d5cb8a..a8cf949 100644
--- a/app/templates/home.html
+++ b/app/templates/home.html
@@ -63,10 +63,27 @@
 										<td class="level-right">
 											<p class="buttons">
 												<a class="button is-small is-primary" href="/workout/edit?id={{ workout.id }}">Edit</a>
-												<a class="button is-small is-danger" href="#">Delete</a>
+												<a class="button is-small is-danger js-modal-trigger" data-target="modal-{{ workout.id }}" href="#">Delete</a>
 											</p>
 										</td>
 									</tr>
+									<!-- Confirmation Modal -->
+									<div class="modal" id="modal-{{ workout.id }}">
+										<div class="modal-background"></div>
+										<div class="modal-card">
+											<section class="modal-card-body">
+												<h1 class="title has-text-black">Are you sure?</h1>
+												<p>
+													Are you sure you want to delete this workout?
+													You will not be able to restore it once you do.
+												</p>
+											</section>
+											<footer class="modal-card-foot">
+												<button class="button is-danger">Confirm</button>
+												<button class="button">Cancel</button>
+											</footer>
+										</div>
+									</div>
 								{% endfor %}
 							</tbody>
 						</table>
diff --git a/app/templates/workout/manage.html b/app/templates/workout/manage.html
deleted file mode 100644
index 95f03f5..0000000
--- a/app/templates/workout/manage.html
+++ /dev/null
@@ -1,6 +0,0 @@
-{% extends 'base/layout.html' %}
-
-{% block content %}
-<div class="container">
-</div>
-{% endblock %}