Display exercises on the edit workout page.

Add cancel button for page.

documentation/data.js

@@ -225,7 +225,7 @@ window.data = [
         requestBody: [{
             name: "existingExercises",
             type: "[Object]",
-            desc: "List of exercises in order. Existing exercises should be {id: <ExerciseId>} and new exercises should be {new: <ExerciseName>}"
+            desc: "List of exercises in order. Existing exercises should be {id: <ExerciseId>} and new exercises should be {new: <ExerciseName>, type: <ExerciseType>}"
         }],
         responseBody: [{
             name: "N/A",

views/css/editWorkout.css

@@ -0,0 +1,3 @@
+#editWorkoutPage{
+    flex-direction: column;
+}

views/index.css

@@ -4,6 +4,7 @@
 @import "./css/workoutMenu.css";
 @import "./css/newWorkout.css";
 @import "./css/session.css";
+@import "./css/editWorkout.css";
 
 :root{
     --primary: #d7263d;

views/index.html

@@ -126,10 +126,7 @@
 
     <div id="workoutMenuPage", class="page" style="display:none">
         <h1 id="workoutMenuTitle"></h1>
-        <div class="workoutMenuButtons">
-            <button id="menuStartWorkout" class="button">Start Workout</button>
-            <button id="menuReturnHome" class="button">Back</button>
-        </div>
+        <div id="workoutMenuButtons"></div>
 
         <div id="resumeWorkoutContainer" style="display:none">
             <h2>You have a previously unfinished session for this workout. What would you like to to?</h2>
@@ -178,6 +175,20 @@
         </template>
     </div>
 
+    <div id="editWorkoutPage" class="page" style="display:none">
+        <h1></h1>
+
+        <div id="editWorkoutExercises"></div>
+
+        <button id="editWorkoutBack" class="button">Cancel</button>
+
+        <template id="editWorkoutExercise">
+            <div class="editWorkoutExercise">
+                <p></p>
+            </div>
+        </template>
+    </div>
+
     <script src="/index.js"></script>
 </body>
 </html>

views/index.js

@@ -4,6 +4,7 @@ import homePage from "./js/pages/home.js";
 import workoutMenuPage from "./js/pages/workoutMenu.js";
 import newWorkoutPage from "./js/pages/newWorkout.js";
 import sessionPage from "./js/pages/session.js";
+import editWorkoutPage from "./js/pages/editWorkout.js";
 
 const notifier = document.getElementById("notifier");
 const pageElements = document.querySelectorAll(".page");
@@ -34,6 +35,7 @@ window.changePage = (page, data)=>{
         case "newWorkout": newWorkoutPage.render();
         case "session": sessionPage.render(data); break;
         case "workoutMenu": workoutMenuPage.render(data); break;
+        case "editWorkout": editWorkoutPage.render(data); break;
     }
 }
 

views/js/pages/editWorkout.js

@@ -0,0 +1,27 @@
+export default {
+    rendered: false,
+
+    render: function(workout){
+        document.querySelector("#editWorkoutPage h1").textContent = workout.name;
+        this.displayExercises(workout.exercises);
+        if(!this.rendered){
+            this.buttons();
+            this.rendered = true;
+        }
+    },
+
+    buttons: function(){
+        document.getElementById("editWorkoutBack").addEventListener("click", ()=>{changePage("home")});
+    },
+
+    displayExercises: function(exercises){
+        const container = document.getElementById("editWorkoutExercises");
+        const template = document.getElementById("editWorkoutExercise").content.children[0];
+
+        for(let i = 0; i < exercises.length; i++){
+            const exercise = template.cloneNode(true);
+            exercise.querySelector("p").textContent = exercises[i].name;
+            container.appendChild(exercise);
+        }
+    }
+}

views/js/pages/workoutMenu.js

@@ -5,7 +5,15 @@ export default {
     },
 
     buttons: function(workout){
-        document.getElementById("menuStartWorkout").addEventListener("click", ()=>{
+        const container = document.getElementById("workoutMenuButtons");
+        while(container.children.length > 0){
+            container.removeChild(container.firstChild);
+        }
+
+        const start = document.createElement("button");
+        start.classList.add("button");
+        start.textContent = "Start Workout";
+        start.addEventListener("click", ()=>{
             const existingWorkout = localStorage.getItem(workout.id);
             if(existingWorkout === null){
                 changePage("session", workout);
@@ -15,10 +23,19 @@ export default {
                 this.addResumeButtons(container, workout);
             }
         });
+        container.appendChild(start);
 
-        document.getElementById("menuReturnHome").addEventListener("click", ()=>{
-            changePage("home");
-        });
+        const edit = document.createElement("button");
+        edit.classList.add("button");
+        edit.textContent = "Edit Workout";
+        edit.addEventListener("click", ()=>{changePage("editWorkout", workout)});
+        container.appendChild(edit);
+
+        const back = document.createElement("button");
+        back.classList.add("button");
+        back.textContent = "Back";
+        back.addEventListener("click", ()=>{changePage("home")});
+        container.appendChild(back);
     },
 
     addResumeButtons: function(container, workout){