Session tracking/saving now fully working.

views/css/session.css

@@ -1,7 +1,6 @@
 #sessionPage{
     flex-direction: column;
     justify-content: flex-start;
-    padding-top: 75px;
     overflow-y: auto;
 }
 
@@ -50,3 +49,9 @@
     padding: 5px;
     color: var(--gray);
 }
+
+#nextSessionBtn, #finishSessionBtn{
+    width: 100%;
+    padding: 15px 0;
+    margin-top: 25px;
+}

views/index.css

@@ -28,7 +28,7 @@
     height: 100vh;
     width: 100vw;
     background: var(--dark);
-    padding: 25px;
+    padding: 75px 25px 25px 25px;
 }
 
 .logo{
@@ -113,7 +113,3 @@
     cursor: pointer;
     position: relative;
 }
-
-.button:active{
-    background: var(--gray);
-}

views/index.html

@@ -128,7 +128,9 @@
 
         <div id="sessionSets"></div>
 
-        <button id="nextSessionBtn" class="button">Next</button>
+        <button id="nextSessionBtn" class="button">Next Exercise</button>
+
+        <button id="finishSessionBtn" class="button">Finish Workout</button>
 
         <template id="weightSet">
             <div class="weightSet">

views/js/pages/session.js

@@ -7,6 +7,7 @@ export default{
     render: async function(workout){
         this.workout = workout;
         this.pastSessions = await this.getPastSessions(workout.id);
+        this.buttons();
         this.createNewSession(workout);
         this.changeExercise(0);
     },
@@ -27,6 +28,11 @@ export default{
         return await sessions.json();
     },
 
+    buttons: function(){
+        document.getElementById("nextSessionBtn").addEventListener("click", ()=>{this.changeExercise(1)});
+        document.getElementById("finishSessionBtn").addEventListener("click", ()=>{this.finish()});
+    },
+
     createNewSession: function(workout){
         this.currentSession = {
             workout: workout.id,
@@ -39,7 +45,11 @@ export default{
     },
 
     changeExercise: function(num){
+        if(num !== 0) localStorage.setItem(this.workout.id, JSON.stringify(this.currentSession));
         this.exerciseIndex += num;
+        if(this.exerciseIndex === this.workout.exercises.length-1){
+            document.getElementById("nextSessionBtn").style.display = "none";
+        }
         let exercise = null;
         if(this.currentSession[this.exerciseIndex]){
             exercise = currentSession[this.exerciseIndex];
@@ -56,21 +66,31 @@ export default{
         }
 
         document.getElementById("sessionExerciseName").textContent = exercise.name;
+        const setsContainer = document.getElementById("sessionSets");
+        while(setsContainer.children.length > 0){
+            setsContainer.removeChild(setsContainer.firstChild);
+        }
 
         switch(exercise.type){
-            case "weights": this.displayWeightSets(exercise);
+            case "weights": this.displayWeightSets(exercise, setsContainer);
         }
     },
 
-    displayWeightSets: function(exercise){
-        const container = document.getElementById("sessionSets");
+    displayWeightSets: function(exercise, container){
         const weightTemplate = 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}`;
-            set.querySelector(".weightSetWeight").value = exercise.sets[i].weight;
-            set.querySelector(".weightSetReps").value = exercise.sets[i].reps;
+
+            const weightInput = set.querySelector(".weightSetWeight");
+            weightInput.value = exercise.sets[i].weight
+            weightInput.addEventListener("input", ()=>{exercise.sets[i].weight = weightInput.value});
+
+            const repInput = set.querySelector(".weightSetReps");
+            repInput.value = exercise.sets[i].reps;
+            repInput.addEventListener("input", ()=>{exercise.sets[i].reps = repInput.value});
+
             container.appendChild(set);
         }
     },
@@ -85,5 +105,33 @@ export default{
         }
 
         return [{weight: 0, reps: 0}, {weight: 0, reps: 0}, {weight: 0, reps: 0}];
+    },
+
+    finish: function(){
+        //save to database
+        //delete from localStorage
+
+        console.log(this.currentSession);
+        this.currentSession.end = new Date();
+        fetch(`/session`, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json"
+            },
+            body: JSON.stringify(this.currentSession)
+        })
+            .then(r=>r.json())
+            .then((response)=>{
+                if(response.error){
+                    notify("error", response.error.message);
+                }else{
+                    notify("success", "Workout completed and saved");
+                    localStorage.removeItem(this.currentSession.workout);
+                    changePage("home");
+                }
+            })
+            .catch((err)=>{
+                notify("error", "ERROR: unable to save workout to database");
+            });
     }
 }