asolkar/web-workout
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added floating action buttons

Browse Source
This commit is contained in:
Mahesh Asolkar 2025-03-22 20:51:49 -07:00
parent e2afa31f88
commit fc65a0d5e0
2 changed files with 62 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
Workout.js
View File

@ -17,8 +17,8 @@ constructor(cont, plan) {
this.exercise_idx = 0; this.exercise_idx = 0;
this.workout_done = 0; this.workout_done = 0;
// Enable debug // // Enable debug
this.show_debug_status = 1; // this.show_debug_status = 1;
} }
// ---------- // ----------
@ -153,6 +153,7 @@ render_workout() {
this.plan.set.forEach(function(el,idx) { this.plan.set.forEach(function(el,idx) {
wo.render_set(el, idx); wo.render_set(el, idx);
}); });
this.render_fab();
this.update_debug_info(); this.update_debug_info();
} }
@ -372,30 +373,40 @@ handle_workout_done() {
} }
// ---------- // ----------
handle_key_press(app, ev) { handle_action(act) {
if (app.workout_done) { if (this.workout_done) {
return; return;
} }
// Access the pressed key using ev.key this.action = act;
const key = ev.key; if ((act == "Button-Advance") || (act == "Key-n")) {
this.handle_exercise_advance();
// Advance exercise } else if ((act == "Button-Regress") || (act == "Key-N")) {
if (key === 'n') { this.handle_exercise_regress();
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();
} else { } else {
app.action = `UN Key-${ev.key}`; this.action = `Unsupported action - ${act}`;
} }
app.update_debug_info(); this.update_debug_info();
app.update_active_item(); 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(); this.update_active_item();
document.addEventListener('keydown', function(ev) { 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');
}); });
} }

21
style.css
View File

@ -116,3 +116,24 @@ html {
color: grey; color: grey;
font-size: x-small; 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;
}