Create page to display data for a single session.

views/css/sessionData.css

@@ -0,0 +1,31 @@
+#sessionDataPage{
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+}
+
+#sessionDataPage h1{
+    text-decoration: underline;
+}
+
+#sessionDataExercises{
+    width: 100%;
+    padding: 5px 15px;
+}
+
+#sessionDataExercises > *{
+    font-size: 22px;
+    border: 1px solid white;
+    border-radius: 5px;
+    margin: 10px 0;
+    width: 100%;
+}
+
+#sessionDataExercises p{
+    margin-left: 20px;
+}
+
+#sessionDataExercises h3{
+    font-size: 22px;
+    text-decoration: underline;
+}

views/css/sessionHistory.css

@@ -1,6 +1,5 @@
 #sessionHistoryPage{
     flex-direction: column;
-    
 }
 
 #sessionHistoryPage h1{

views/index.css

@@ -6,6 +6,7 @@
 @import "./css/session.css";
 @import "./css/editWorkout.css";
 @import "./css/sessionHistory.css";
+@import "./css/sessionData.css";
 
 :root{
     --primary: #d7263d;
@@ -131,3 +132,17 @@ body{
 .dangerText{
     color: var(--primary);
 }
+
+.closeButton{
+    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);
+}

views/index.html

@@ -229,6 +229,16 @@
         <div id="sessionHistoryItems"></div>
     </div>
 
+    <div id="sessionDataPage" class="page" style="display:none">
+        <button id="closeSessionData" class="closeButton" aria-label="Close">X</button>
+        <h1></h1>
+        <h2 id="sessionDataStart"></h2>
+        <h2 id="sessionDataEnd"></h2>
+        <h3 id="sessionDataLength"></h3>
+
+        <div id="sessionDataExercises"></div>
+    </div>
+
     <script src="/index.js"></script>
 </body>
 </html>

views/index.js

@@ -6,6 +6,7 @@ import newWorkoutPage from "./js/pages/newWorkout.js";
 import sessionPage from "./js/pages/session.js";
 import editWorkoutPage from "./js/pages/editWorkout.js";
 import sessionHistoryPage from "./js/pages/sessionHistory.js";
+import sessionDataPage from "./js/pages/sessionData.js";
 
 const notifier = document.getElementById("notifier");
 const pageElements = document.querySelectorAll(".page");
@@ -36,6 +37,7 @@ window.changePage = (page, data)=>{
         case "workoutMenu": workoutMenuPage.render(data); break;
         case "editWorkout": editWorkoutPage.render(data); break;
         case "sessionHistory": sessionHistoryPage.render(data); break;
+        case "sessionData": sessionDataPage.render(data); break;
     }
 }
 

views/js/pages/sessionData.js

@@ -0,0 +1,72 @@
+export default {
+    rendered: false,
+
+    render: function({session, workout}){
+        if(!this.rendered){
+            this.buttons();
+            this.rendered = true;
+        }
+        const start = new Date(session.start);
+        const end = new Date(session.start);
+        
+        document.querySelector("#sessionDataPage h1").textContent = workout.name;
+        document.getElementById("sessionDataStart").textContent = `Start: ${this.formatDateTime(start)}`;
+        document.getElementById("sessionDataEnd").textContent = `End: ${this.formatDateTime(start)}`;
+        document.getElementById("sessionDataLength").textContent = `${this.timeDifference(start, end)}`;
+        this.displayExercises(session.exercises);
+    },
+
+    buttons: function(workout){
+        document.getElementById("closeSessionData").addEventListener("click", ()=>{
+            changePage("sessionHistory");
+        });
+    },
+
+    displayExercises: function(exercises){
+        const container = document.getElementById("sessionDataExercises");
+
+        for(let i = 0; i < exercises.length; i++){
+            let exerciseElem;
+            switch(exercises[i].type){
+                case "weights":
+                    exerciseElem = this.createWeightsElem(exercises[i]);
+                    break;
+            }
+
+            container.appendChild(exerciseElem);
+        }
+    },
+
+    createWeightsElem: function(exercise){
+        const exerciseElem = document.createElement("div");
+
+        const exerciseName = document.createElement("h3");
+        exerciseName.textContent = exercise.name;
+        exerciseElem.appendChild(exerciseName);
+        
+        for(let i = 0; i < exercise.sets.length; i++){
+            const set = document.createElement("p");
+            set.textContent = `${exercise.sets[i].weight} x ${exercise.sets[i].reps} reps`;
+            exerciseElem.appendChild(set);
+        }
+
+        return exerciseElem;
+    },
+
+    formatDateTime: function(date){
+        const d = date.toLocaleDateString("en-US", {
+            year: "numeric",
+            month: "long",
+            day: "numeric"
+        });
+        const t = date.toLocaleTimeString("en-US", {hour12: false});
+        return `${d} ${t}`;
+    },
+
+    timeDifference: function(start, end){
+        const diff = end - start;
+        const minutes = Math.floor(diff/ 60000);
+
+        return `${Math.floor(minutes / 60)} hours, ${minutes % 60} minutes`;
+    }
+}

views/js/pages/sessionHistory.js

@@ -1,14 +1,18 @@
 export default {
     rendered: false,
+    workout: null,
 
     render: function(workout){
+        if(workout){
+            this.workout = workout;
+            this.populateSessions(workout);
+            document.getElementById("sessionHistoryTitle").textContent = workout.name;
+        }
+
         if(!this.rendered){
             this.buttons(workout);
             this.rendered = true;
         }
-
-        document.getElementById("sessionHistoryTitle").textContent = workout.name;
-        this.populateSessions(workout);
     },
 
     buttons: function(workout){
@@ -57,7 +61,12 @@ export default {
         const button = document.createElement("button");
         button.classList.add("button");
         button.textContent = this.dateFormat(new Date(session.start));
-        button.addEventListener("click", ()=>{console.log(`Button pressed for ${session.id}`)});
+        button.addEventListener("click", ()=>{
+            changePage("sessionData", {
+                session: session,
+                workout: this.workout
+            });
+        });
         return button;
     },