Updated workout done indication

Workout.js

@@ -52,8 +52,6 @@ progress_indicator(id) {
 // ----------
 render_workout_header() {
     const hdr = this.text_element("h1", this.plan.name);
-    const wo_indicator = this.progress_indicator("wo-indicator");
-    hdr.appendChild(wo_indicator);
     this.container.appendChild(hdr);
 }
 
@@ -251,9 +249,13 @@ update_active_item() {
 
     // Mark workout done
     if (this.workout_done == 1) {
-        const wo_indicator = this.container.querySelector("#wo-indicator");
-        wo_indicator.classList.remove("pending");
-        wo_indicator.classList.add("done");
+        const wo_h1 = this.container.querySelector(".workout-wrapper h1");
+        wo_h1.classList.add("done");
+        this.container.classList.add("done");
+        let buttons = this.container.querySelectorAll("button");
+        buttons.forEach(function(bttn, bidx) {
+            bttn.disabled = true;
+        });
     }
 }
 

style.css

@@ -27,6 +27,11 @@ html {
 .workout-wrapper {
     width: 90%;
 }
+.workout-wrapper.done {
+    color: #777;
+    background-color: #eee;
+}
+
 .workout-wrapper table {
     width: 97%;
 }
@@ -57,8 +62,11 @@ html {
     font-family: "Boldonse", system-ui;
     font-weight: 400;
     font-style: normal;
-
     text-align: center;
+    text-decoration: underline var(--indicator-pending) solid 0.2em;
+}
+.workout-wrapper h1.done {
+    text-decoration: underline var(--indicator-done) solid 0.2em;
 }
 .workout-wrapper table {
     margin-left: auto;