web-workout/Workout.js

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;

        // this.show_debug_status = 1;
    }

    text_element(typ, txt) {
        const ret_elem = document.createElement(typ);
        ret_elem.textContent = txt;

        return ret_elem;
    }

    render_workout_header() {
        this.cont.appendChild(this.text_element("h1", this.plan.name));
    }

    render_debug_status() {
        const dbg_div = document.createElement("div");
        dbg_div.classList.add("app_debug");

        const dt = document.createElement("p");
        dt.setAttribute("id", "app_debug_div");
        dbg_div.appendChild(dt);
        this.cont.appendChild(dbg_div);
    }

    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_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.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);
        });
    }
}