Added floating action buttons

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');
     });
 }
 

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;
+}