Add exercise list for easily switching exercise.

views/css/session.css

@@ -12,6 +12,51 @@
     right: 15px;
 }
 
+#sessionExercisesBtn{
+    position: absolute;
+    top: 60px;
+    left: 15px;
+}
+
+#sessionExercisesList{
+    flex-direction: column;
+    justify-content: center;
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100vh;
+    width: 100vw;
+    background: var(--dark);
+    overflow-y: auto;
+    z-index: 3;
+}
+
+#closeExerciseList{
+    background: linear-gradient(to right, var(--accent), var(--primary));
+    border: none;
+    position: absolute;
+    top: 15px;
+    right: 15px;
+    font-size: 22px;
+    border-radius: 50%;
+    height: 35px;
+    width: 35px;
+    cursor: pointer;
+    color: var(--dark);
+}
+
+#sessionExercisesList .exerciseListButton{
+    align-self: center;
+    background: linear-gradient(to right, var(--accent), var(--primary), var(--accent));
+    background-clip: text;
+    color: transparent;
+    border: none;
+    font-size: 22px;
+    margin: 15px 0;
+    cursor: pointer;
+    text-decoration: underline;
+}
+
 #sessionNotesBtn{
     margin-bottom: 5px;
 }

views/index.html

@@ -144,6 +144,12 @@
             <button id="sessionAddSet" class="button">Add Set</button>
         </div>
 
+        <button id="sessionExercisesBtn" class="button">Exercises</button>
+
+        <div id="sessionExercisesList" style="display:none">
+            <button id="closeExerciseList">X</button>
+        </div>
+
         <div id="sessionNotesText" style="display:none">
             <textarea id="sessionTextArea"></textarea>
             <button id="sessionNotesDone" class="button">Done</button>

views/js/pages/session.js

@@ -50,10 +50,35 @@ export default {
             document.getElementById("sessionAddSet").addEventListener("click", ()=>{this.addSet()});
             document.getElementById("sessionNotesBtn").addEventListener("click", this.displayNotes.bind(this));
             document.getElementById("sessionNotesDone").addEventListener("click", this.closeNote.bind(this));
+            document.getElementById("sessionExercisesBtn").addEventListener("click", this.displayExerciseList.bind(this));
+            document.getElementById("closeExerciseList").addEventListener("click", ()=>{
+                document.getElementById("sessionExercisesList").style.display = "none";
+            });
             this.rendered = true;
         }
     },
 
+    displayExerciseList: function(){
+        const list = document.getElementById("sessionExercisesList");
+        list.style.display = "flex";
+
+        const buttons = list.querySelectorAll(".exerciseListButton");
+        for(let i = 0; i < buttons.length; i++){
+            buttons[i].parentElement.removeChild(buttons[i]);
+        }
+
+        for(let i = 0; i < this.workout.exercises.length; i++){
+            const button = document.createElement("button");
+            button.classList.add("exerciseListButton");
+            button.textContent = `${i+1}: ${this.workout.exercises[i].name}`;
+            button.addEventListener("click", ()=>{
+                this.changeExercise(i);
+                list.style.display = "none";
+            });
+            list.appendChild(button);
+        }
+    },
+
     displayNotes: function(){
         const container = document.getElementById("sessionNotesText");
         container.style.display = "flex";