Create button to add sets to an exercise.

views/css/session.css

@@ -4,6 +4,12 @@
     padding-bottom: 25px;
 }
 
+#sessionAddSet{
+    position: absolute;
+    top: 15px;
+    right: 15px;
+}
+
 #noSessionText{
     color: white;
     font-size: 18px;
@@ -39,6 +45,7 @@
 
 #nextSessionBtn, #finishSessionBtn{
     width: 100%;
+    max-width: 550px;
     padding: 15px 0;
     margin-top: 25px;
 }

views/index.html

@@ -134,6 +134,8 @@
 
         <p id="previousSession"></p>
 
+        <button id="sessionAddSet" class="button">Add Set</button>
+
         <div id="sessionSets"></div>
 
         <button id="nextSessionBtn" class="button">Next Exercise</button>

views/js/pages/session.js

@@ -37,10 +37,26 @@ export default {
         if(!this.rendered){
             nextSessionBtn.addEventListener("click", ()=>{this.changeExercise(1)});
             document.getElementById("finishSessionBtn").addEventListener("click", ()=>{this.finish()});
+            document.getElementById("sessionAddSet").addEventListener("click", ()=>{this.addSet()});
             this.rendered = true;
         }
     },
 
+    addSet: function(){
+        const exercise = this.currentSession.exercises[this.exerciseIndex];
+        const template = document.getElementById("weightSet").content.children[0];
+        const container = document.getElementById("sessionSets");
+
+        switch(exercise.type){
+            case "weights":
+                const newSet = {weight: 0, reps: 0};
+                const setNumber = container.children.length + 1;
+                exercise.sets.push(newSet);
+                container.appendChild(this.createWeightSetElement(template, newSet, setNumber));
+                break;
+        }
+    },
+
     createNewSession: function(workout){
         session = {
             workout: workout.id,
@@ -81,27 +97,31 @@ export default {
         }
 
         switch(exercise.type){
-            case "weights": this.displayWeightSets(exercise, setsContainer);
+            case "weights": this.displayWeightSets(exercise.sets, setsContainer);
         }
     },
 
-    displayWeightSets: function(exercise, container){
-        const weightTemplate = document.getElementById("weightSet").content.children[0];
+    displayWeightSets: function(sets, container){
+        const template = document.getElementById("weightSet").content.children[0];
 
-        for(let i = 0; i < exercise.sets.length; i++){
-            const set = weightTemplate.cloneNode(true);
-            set.querySelector("h3").textContent = `Set #${i+1}`;
+        for(let i = 0; i < sets.length; i++){
+            container.appendChild(this.createWeightSetElement(template, sets[i], i+1));
+        }
+    },
 
-            const weightInput = set.querySelector(".weightSetWeight");
-            weightInput.value = exercise.sets[i].weight
-            weightInput.addEventListener("input", ()=>{exercise.sets[i].weight = weightInput.value});
+    createWeightSetElement: function(template, set, num){
+        const setElem = template.cloneNode(true);
+        setElem.querySelector("h3").textContent = `Set #${num}`;
 
-            const repInput = set.querySelector(".weightSetReps");
-            repInput.value = exercise.sets[i].reps;
-            repInput.addEventListener("input", ()=>{exercise.sets[i].reps = repInput.value});
+        const weightInput = setElem.querySelector(".weightSetWeight");
+        weightInput.value = set.weight;
+        weightInput.addEventListener("input", ()=>{set.weight = weightInput.value});
 
-            container.appendChild(set);
-        }
+        const repInput = setElem.querySelector(".weightSetReps");
+        repInput.value = set.reps;
+        repInput.addEventListener("input", ()=>{set.reps = repInput.value});
+
+        return setElem;
     },
 
     getPastSets: function(id){