diff --git a/Workout.js b/Workout.js index e8f5703..fba9713 100644 --- a/Workout.js +++ b/Workout.js @@ -17,8 +17,8 @@ constructor(cont, plan) { this.exercise_idx = 0; this.workout_done = 0; - // Enable debug - this.show_debug_status = 1; + // // Enable debug + // this.show_debug_status = 1; } // ---------- @@ -153,6 +153,7 @@ render_workout() { this.plan.set.forEach(function(el,idx) { wo.render_set(el, idx); }); + this.render_fab(); this.update_debug_info(); } @@ -372,30 +373,40 @@ handle_workout_done() { } // ---------- -handle_key_press(app, ev) { - if (app.workout_done) { +handle_action(act) { + if (this.workout_done) { return; } - // Access the pressed key using ev.key - const key = ev.key; - - // Advance exercise - if (key === 'n') { - app.action = `Key-${ev.key}`; - app.handle_exercise_advance(); - } else if (key === 'N') { - app.action = `Key-${ev.key}`; - app.handle_exercise_regress(); - } else if (key === ' ') { - app.action = `Key-${ev.key}`; - app.handle_exercise_done(); + this.action = act; + if ((act == "Button-Advance") || (act == "Key-n")) { + this.handle_exercise_advance(); + } else if ((act == "Button-Regress") || (act == "Key-N")) { + this.handle_exercise_regress(); } else { - app.action = `UN Key-${ev.key}`; + this.action = `Unsupported action - ${act}`; } - app.update_debug_info(); - app.update_active_item(); + this.update_debug_info(); + this.update_active_item(); +} + +// ---------- +render_fab() { + const fab_wrapper = document.createElement("div"); + fab_wrapper.setAttribute("id", "fab-wrapper"); + + const fab_regress = this.text_element("button", "<< Regress"); + fab_regress.classList.add("fab-button"); + fab_regress.setAttribute("id", "fab-regress"); + const fab_advance = this.text_element("button", "Advance >>"); + fab_advance.classList.add("fab-button"); + fab_advance.setAttribute("id", "fab-advance"); + + fab_wrapper.appendChild(fab_regress); + fab_wrapper.appendChild(fab_advance); + + this.container.appendChild(fab_wrapper); } // ---------- @@ -405,7 +416,16 @@ render() { this.update_active_item(); document.addEventListener('keydown', function(ev) { - app.handle_key_press(app, ev); + app.handle_action(`Key-${ev.key}`); + }); + + const fab_advance = this.container.querySelector("#fab-advance"); + fab_advance.addEventListener('click', function() { + app.handle_action('Button-Advance'); + }); + const fab_regress = this.container.querySelector("#fab-regress"); + fab_regress.addEventListener('click', function() { + app.handle_action('Button-Regress'); }); } diff --git a/style.css b/style.css index 45b717b..30fa48b 100644 --- a/style.css +++ b/style.css @@ -116,3 +116,24 @@ html { color: grey; font-size: x-small; } + +/* Floating Action Buttons */ +#fab-wrapper { + position: fixed; + bottom: 20px; + right: 20px; + z-index: 1000; +} + +#fab-wrapper .fab-button { + display: inline-block; + white-space: pre-wrap; + border: thin solid gray; + border-radius: 0.5em; + font-size: 1em; + text-align: center; + vertical-align: middle; + margin: 0.5em; + padding: 0.5em; + cursor: pointer; +}