diff options
Diffstat (limited to 'app')
| -rw-r--r-- | app/routes.py | 4 | ||||
| -rw-r--r-- | app/static/js/bulma.js | 42 | ||||
| -rw-r--r-- | app/templates/base/layout.html | 1 | ||||
| -rw-r--r-- | app/templates/home.html | 19 | ||||
| -rw-r--r-- | app/templates/workout/manage.html | 6 |
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 %} |