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

Miscellaneous cleanup and beautification

Browse Source
This commit is contained in:
Mahesh Asolkar 2025-03-16 12:23:44 -07:00
parent 26fff26fef
commit 114f92c3d0
1 changed files with 249 additions and 230 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

479
Workout.js
View File

@ -1,244 +1,263 @@
class Workout {
constructor(cont, plan) {
const wo_cont = document.createElement("div");
wo_cont.classList.add("workout-wrapper");
cont.appendChild(wo_cont);
this.cont = wo_cont;
this.plan = plan;
this.action = "";
this.set_idx = 0;
this.exercise_idx = 0;
this.workout_done = 0;
// ----------
constructor(cont, plan) {
const wo_cont = document.createElement("div");
wo_cont.classList.add("workout-wrapper");
cont.appendChild(wo_cont);
// this.show_debug_status = 1;
}
// Inputs to the class. Workout plan and container to display it in
this.container = wo_cont;
this.plan = plan;
text_element(typ, txt) {
const ret_elem = document.createElement(typ);
ret_elem.textContent = txt;
// Status tracking information
this.action = "";
this.set_idx = 0;
this.exercise_idx = 0;
this.workout_done = 0;
return ret_elem;
}
// Enable debug
this.show_debug_status = 1;
}
render_workout_header() {
this.cont.appendChild(this.text_element("h1", this.plan.name));
}
// ----------
text_element(typ, txt) {
const el = document.createElement(typ);
el.textContent = txt;
render_debug_status() {
const dbg_div = document.createElement("div");
dbg_div.classList.add("app_debug");
return el;
}
const dt = document.createElement("p");
dt.setAttribute("id", "app_debug_div");
dbg_div.appendChild(dt);
this.cont.appendChild(dbg_div);
}
// ----------
render_workout_header() {
this.container.appendChild(this.text_element("h1", this.plan.name));
}
update_debug_info() {
if (this.show_debug_status) {
const dt = this.cont.querySelector("#app_debug_div");
const done_str = (this.workout_done === 1) ? "Done " : "";
dt.textContent = `${done_str}Action: ${this.action} Current: Set-${this.set_idx}/Exercise-${this.exercise_idx}`;
}
}
// ----------
render_debug_status() {
const dbg_div = document.createElement("div");
dbg_div.classList.add("app_debug");
render_exercise(prnt, el, idx) {
const tblr = document.createElement("tr");
tblr.setAttribute("class", `exercise-row exercise-idx-${idx} exercise-pending`);
const dt = document.createElement("p");
dt.setAttribute("id", "app_debug_div");
dbg_div.appendChild(dt);
this.container.appendChild(dbg_div);
}
const sts_td = document.createElement("td");
const sts_cb = document.createElement("input");
sts_cb.setAttribute("type", "checkbox");
sts_td.appendChild(sts_cb);
sts_cb.setAttribute("disabled", true);
// Status
let col = sts_td;
col.classList.add("col-status");
tblr.appendChild(col);
// Name
col = this.text_element("td", el.name);
col.classList.add("col-name");
tblr.appendChild(col);
// Pattern/count
col = this.text_element("td", `${el.pattern} x ${el.count}`);
col.classList.add("col-pattern-count");
tblr.appendChild(col);
prnt.appendChild(tblr);
}
render_set(el, idx) {
const wo = this;
// Table with one set
const tbl = document.createElement("table");
tbl.setAttribute("class", `set-table set-table-idx-${idx}`);
tbl.appendChild(this.text_element("caption", el.name));
let show_header = 0;
if (show_header) {
// Header of the table
const tblh = document.createElement("thead");
const tblhr = document.createElement("tr");
let col = this.text_element("th", "Status");
col.classList.add("col-status");
tblhr.appendChild(col);
col = this.text_element("th", "Exercise");
col.classList.add("col-name");
tblhr.appendChild(col);
col = this.text_element("th", "Pattern/Count");
col.classList.add("col-pattern-count");
tblhr.appendChild(col);
tblh.appendChild(tblhr);
tbl.appendChild(tblh);
}
// Content of table - exercises in the set
const tblb = document.createElement("tbody");
el.exercise.forEach(function(el,idx) {
wo.render_exercise(tblb, el, idx);
});
tbl.appendChild(tblb);
this.cont.appendChild(tbl);
}
render_workout() {
const wo = this;
this.render_workout_header();
if (this.show_debug_status) {
this.render_debug_status();
}
this.plan.set.forEach(function(el,idx) {
wo.render_set(el, idx);
})
this.update_debug_info();
}
update_active_item() {
// Make current active exercise row inactive
const curr_active_tr = this.cont.querySelector(".exercise-row.active");
if (curr_active_tr != null) {
curr_active_tr.classList.remove("active");
}
// Set active exercise row
let qstr = `table.set-table-idx-${this.set_idx} tr.exercise-idx-${this.exercise_idx}`;
console.log(`Looking for ${qstr}`);
const next_active_tr = this.cont.querySelector(qstr);
console.log(next_active_tr);
if (next_active_tr != null) {
next_active_tr.classList.add("active");
}
// Mark workout done
qstr = `table tr.exercise-pending`;
let pending_trs = this.cont.querySelectorAll(qstr);
console.log(`Remaining to be done ${pending_trs.length}`);
if (pending_trs.length === 0) {
this.workout_done = 1;
}
}
handle_exercise_advance() {
const curr_exercise_max_idx = this.plan.set[this.set_idx].exercise.length-1;
const curr_set_max_idx = this.plan.set.length-1;
console.log(`workout done ${this.workout_done} curr_exercise_max_idx = ${curr_exercise_max_idx} curr_set_max_idx = ${curr_set_max_idx}`);
if (this.exercise_idx === curr_exercise_max_idx) {
if (this.set_idx === curr_set_max_idx) {
if (this.workout_done === 1) {
console.log("Exercise done");
}
} else {
this.set_idx += 1;
this.exercise_idx = 0;
}
} else {
this.exercise_idx += 1;
}
this.update_active_item();
}
handle_exercise_regress() {
const curr_set_max_idx = this.plan.set.length-1;
console.log(`workout done ${this.workout_done}`);
if (this.exercise_idx === 0) {
if (this.set_idx === 0) {
console.log("Exercise start");
} else {
this.set_idx -= 1;
this.exercise_idx = this.plan.set[this.set_idx].exercise.length-1;
}
} else {
this.exercise_idx -= 1;
}
this.update_active_item();
}
handle_exercise_done() {
// Set active exercise row
let qstr = `table.set-table-idx-${this.set_idx} tr.exercise-idx-${this.exercise_idx} input`;
console.log(`Looking for ${qstr}`);
const active_chkbox = this.cont.querySelector(qstr);
if (!active_chkbox.checked) {
active_chkbox.checked = true;
active_chkbox.disabled = true;
qstr = `table.set-table-idx-${this.set_idx} tr.exercise-idx-${this.exercise_idx}`;
const active_tr = this.cont.querySelector(qstr);
active_tr.classList.remove("exercise-pending");
}
this.update_active_item();
}
handle_key_press(app, ev) {
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();
} else {
app.action = `UN Key-${ev.key}`;
}
app.update_debug_info();
}
render() {
const app = this;
this.render_workout();
this.update_active_item();
document.addEventListener('keydown', function(ev) {
app.handle_key_press(app, ev);
});
// ----------
update_debug_info() {
if (this.show_debug_status) {
const dt = this.container.querySelector("#app_debug_div");
const done_str = (this.workout_done === 1) ? "Done " : "";
dt.textContent = `${done_str}Action: ${this.action} Current: Set-${this.set_idx}/Exercise-${this.exercise_idx}`;
}
}
// ----------
render_exercise(prnt, el, idx) {
const tblr = document.createElement("tr");
tblr.setAttribute("class", `exercise-row exercise-idx-${idx} exercise-pending`);
const sts_td = document.createElement("td");
const sts_cb = document.createElement("input");
sts_cb.setAttribute("type", "checkbox");
sts_td.appendChild(sts_cb);
sts_cb.setAttribute("disabled", true);
// Status
let col = sts_td;
col.classList.add("col-status");
tblr.appendChild(col);
// Name
col = this.text_element("td", el.name);
col.classList.add("col-name");
tblr.appendChild(col);
// Pattern/count
col = this.text_element("td", `${el.pattern} x ${el.count}`);
col.classList.add("col-pattern-count");
tblr.appendChild(col);
prnt.appendChild(tblr);
}
// ----------
render_set(el, idx) {
const wo = this;
// Table with one set
const tbl = document.createElement("table");
tbl.setAttribute("class", `set-table set-table-idx-${idx}`);
tbl.appendChild(this.text_element("caption", el.name));
let show_header = 0;
if (show_header) {
// Header of the table
const tblh = document.createElement("thead");
const tblhr = document.createElement("tr");
let col = this.text_element("th", "Status");
col.classList.add("col-status");
tblhr.appendChild(col);
col = this.text_element("th", "Exercise");
col.classList.add("col-name");
tblhr.appendChild(col);
col = this.text_element("th", "Pattern/Count");
col.classList.add("col-pattern-count");
tblhr.appendChild(col);
tblh.appendChild(tblhr);
tbl.appendChild(tblh);
}
// Content of table - exercises in the set
const tblb = document.createElement("tbody");
el.exercise.forEach(function(el,idx) {
wo.render_exercise(tblb, el, idx);
});
tbl.appendChild(tblb);
this.container.appendChild(tbl);
}
// ----------
render_workout() {
const wo = this;
this.render_workout_header();
if (this.show_debug_status) {
this.render_debug_status();
}
this.plan.set.forEach(function(el,idx) {
wo.render_set(el, idx);
})
this.update_debug_info();
}
// ----------
update_active_item() {
// Make current active exercise row inactive
const curr_active_tr = this.container.querySelector(".exercise-row.active");
if (curr_active_tr != null) {
curr_active_tr.classList.remove("active");
}
// Set active exercise row
let qstr = `table.set-table-idx-${this.set_idx} tr.exercise-idx-${this.exercise_idx}`;
console.log(`Looking for ${qstr}`);
const next_active_tr = this.container.querySelector(qstr);
console.log(next_active_tr);
if (next_active_tr != null) {
next_active_tr.classList.add("active");
}
// Mark workout done
qstr = `table tr.exercise-pending`;
let pending_trs = this.container.querySelectorAll(qstr);
console.log(`Remaining to be done ${pending_trs.length}`);
if (pending_trs.length === 0) {
this.workout_done = 1;
}
}
// ----------
handle_exercise_advance() {
const curr_exercise_max_idx = this.plan.set[this.set_idx].exercise.length-1;
const curr_set_max_idx = this.plan.set.length-1;
console.log(`workout done ${this.workout_done} curr_exercise_max_idx = ${curr_exercise_max_idx} curr_set_max_idx = ${curr_set_max_idx}`);
if (this.exercise_idx === curr_exercise_max_idx) {
if (this.set_idx === curr_set_max_idx) {
if (this.workout_done === 1) {
console.log("Exercise done");
}
} else {
this.set_idx += 1;
this.exercise_idx = 0;
}
} else {
this.exercise_idx += 1;
}
this.update_active_item();
}
// ----------
handle_exercise_regress() {
const curr_set_max_idx = this.plan.set.length-1;
console.log(`workout done ${this.workout_done}`);
if (this.exercise_idx === 0) {
if (this.set_idx === 0) {
console.log("Exercise start");
} else {
this.set_idx -= 1;
this.exercise_idx = this.plan.set[this.set_idx].exercise.length-1;
}
} else {
this.exercise_idx -= 1;
}
this.update_active_item();
}
// ----------
handle_exercise_done() {
// Set active exercise row
let qstr = `table.set-table-idx-${this.set_idx} tr.exercise-idx-${this.exercise_idx} input`;
console.log(`Looking for ${qstr}`);
const active_chkbox = this.container.querySelector(qstr);
if (!active_chkbox.checked) {
active_chkbox.checked = true;
active_chkbox.disabled = true;
qstr = `table.set-table-idx-${this.set_idx} tr.exercise-idx-${this.exercise_idx}`;
const active_tr = this.container.querySelector(qstr);
active_tr.classList.remove("exercise-pending");
}
this.update_active_item();
}
// ----------
handle_key_press(app, ev) {
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();
} else {
app.action = `UN Key-${ev.key}`;
}
app.update_debug_info();
}
// ----------
render() {
const app = this;
this.render_workout();
this.update_active_item();
document.addEventListener('keydown', function(ev) {
app.handle_key_press(app, ev);
});
}
}