Add functionality to save previous and start new session.

views/css/workoutMenu.css

@@ -2,6 +2,7 @@
     flex-direction: column;
     justify-content: flex-start;
     align-items: center;
+    position: relative;
 }
 
 #workoutMenuTitle{
@@ -18,3 +19,25 @@
     padding: 15px 0;
     margin: 15px 0;
 }
+
+#resumeWorkoutContainer{
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    background: var(--dark);
+    padding: 25px;
+}
+
+#resumeWorkoutContainer h2{
+    line-height: 35px;
+    text-align: center;
+}
+
+#resumeWorkoutContainer button{
+    font-size: 18px;
+}

views/index.html

@@ -127,6 +127,13 @@
             <button id="menuStartWorkout" class="button">Start Workout</button>
             <button id="menuReturnHome" class="button">Back</button>
         </div>
+
+        <div id="resumeWorkoutContainer" style="display:none">
+            <h2>You have a previously unfinished session for this workout. What would you like to to?</h2>
+            <button id="discardWorkoutBtn" class="button">Discard Previous and Start New</button>
+            <button id="resumeWorkoutBtn" class="button">Resume Previous Workout</button>
+            <button id="resumeWorkoutCancel" class="button">Cancel</button>
+        </div>
     </div>
 
     <div id="sessionPage" class="page">

views/js/pages/workoutMenu.js

@@ -6,11 +6,52 @@ export default {
 
     buttons: function(workout){
         document.getElementById("menuStartWorkout").addEventListener("click", ()=>{
-            changePage("session", workout);
+            const existingWorkout = localStorage.getItem(workout.id);
+            if(existingWorkout === null){
+                changePage("session", workout);
+            }else{
+                const container = document.getElementById("resumeWorkoutContainer");
+                container.style.display = "flex";
+                this.addResumeButtons(container, workout);
+            }
         });
 
         document.getElementById("menuReturnHome").addEventListener("click", ()=>{
             changePage("home");
         });
+    },
+
+    addResumeButtons: function(container, workout){
+        const finish = document.createElement("button");
+        finish.classList.add("button");
+        finish.textContent = "Save Previous and Start New";
+        finish.addEventListener("click", ()=>{this.finish(workout)});
+        container.appendChild(finish);
+    },
+
+    finish: function(workout){
+        const session = JSON.parse(localStorage.getItem(workout.id));
+        session.end = new Date();
+
+        fetch("/session", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json"
+            },
+            body: JSON.stringify(session)
+        })
+            .then(r=>r.json())
+            .then((response)=>{
+                if(response.error){
+                    notify("error", response.error.message);
+                }else{
+                    notify("success", "Workout saved");
+                }
+                localStorage.removeItem(workout.id);
+                changePage("session", workout);
+            })
+            .catch((err)=>{
+                notify("error", "ERROR: unable to start workout");
+            });
     }
 }