Miscellaneous cleanup and beautification
This commit is contained in:
parent
26fff26fef
commit
114f92c3d0
479
Workout.js
479
Workout.js
@ -1,244 +1,263 @@
|
|||||||
class Workout {
|
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;
|
constructor(cont, plan) {
|
||||||
this.exercise_idx = 0;
|
const wo_cont = document.createElement("div");
|
||||||
this.workout_done = 0;
|
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) {
|
// Status tracking information
|
||||||
const ret_elem = document.createElement(typ);
|
this.action = "";
|
||||||
ret_elem.textContent = txt;
|
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() {
|
return el;
|
||||||
const dbg_div = document.createElement("div");
|
}
|
||||||
dbg_div.classList.add("app_debug");
|
|
||||||
|
|
||||||
const dt = document.createElement("p");
|
// ----------
|
||||||
dt.setAttribute("id", "app_debug_div");
|
render_workout_header() {
|
||||||
dbg_div.appendChild(dt);
|
this.container.appendChild(this.text_element("h1", this.plan.name));
|
||||||
this.cont.appendChild(dbg_div);
|
}
|
||||||
}
|
|
||||||
|
|
||||||
update_debug_info() {
|
// ----------
|
||||||
if (this.show_debug_status) {
|
render_debug_status() {
|
||||||
const dt = this.cont.querySelector("#app_debug_div");
|
const dbg_div = document.createElement("div");
|
||||||
const done_str = (this.workout_done === 1) ? "Done " : "";
|
dbg_div.classList.add("app_debug");
|
||||||
dt.textContent = `${done_str}Action: ${this.action} Current: Set-${this.set_idx}/Exercise-${this.exercise_idx}`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
render_exercise(prnt, el, idx) {
|
const dt = document.createElement("p");
|
||||||
const tblr = document.createElement("tr");
|
dt.setAttribute("id", "app_debug_div");
|
||||||
tblr.setAttribute("class", `exercise-row exercise-idx-${idx} exercise-pending`);
|
dbg_div.appendChild(dt);
|
||||||
|
this.container.appendChild(dbg_div);
|
||||||
|
}
|
||||||
|
|
||||||
const sts_td = document.createElement("td");
|
// ----------
|
||||||
const sts_cb = document.createElement("input");
|
update_debug_info() {
|
||||||
sts_cb.setAttribute("type", "checkbox");
|
if (this.show_debug_status) {
|
||||||
sts_td.appendChild(sts_cb);
|
const dt = this.container.querySelector("#app_debug_div");
|
||||||
sts_cb.setAttribute("disabled", true);
|
const done_str = (this.workout_done === 1) ? "Done " : "";
|
||||||
|
dt.textContent = `${done_str}Action: ${this.action} Current: Set-${this.set_idx}/Exercise-${this.exercise_idx}`;
|
||||||
// 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);
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ----------
|
||||||
|
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);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user