Display sessions and update the style for the session history page.

controllers/session.js

@@ -74,6 +74,7 @@ const confirmWorkoutOwnership = (workout, user)=>{
  */
 const responseSession = (session)=>{
     return {
+        id: session._id,
         workout: session.workout,
         start: session.start,
         end: session.end,

views/css/sessionHistory.css

@@ -0,0 +1,37 @@
+#sessionHistoryPage{
+    flex-direction: column;
+    
+}
+
+#sessionHistoryPage h1{
+    text-align: center;
+    text-decoration: underline;
+}
+
+#sessionHistoryClose{
+    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);
+}
+
+#sessionHistoryItems{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+}
+
+#sessionHistoryItems > button{
+    margin: 5px 0;
+    width: 100%;
+    max-width: 750px;
+    padding: 15px 0;
+}

views/index.css

@@ -5,6 +5,7 @@
 @import "./css/newWorkout.css";
 @import "./css/session.css";
 @import "./css/editWorkout.css";
+@import "./css/sessionHistory.css";
 
 :root{
     --primary: #d7263d;

views/index.html

@@ -224,6 +224,7 @@
 
     <div id="sessionHistoryPage" class="page" style="display:none">
         <button id="sessionHistoryClose" aria-label="Close">X</button>
+        <h1 id="sessionHistoryTitle"></h1>
 
         <div id="sessionHistoryItems"></div>
     </div>

views/js/pages/sessionHistory.js

@@ -1,15 +1,13 @@
 export default {
     rendered: false,
-    workout: null,
 
     render: function(workout){
-        this.workout = workout;
-
         if(!this.rendered){
-            this.buttons();
+            this.buttons(workout);
             this.rendered = true;
         }
 
+        document.getElementById("sessionHistoryTitle").textContent = workout.name;
         this.populateSessions(workout);
     },
 
@@ -20,7 +18,7 @@ export default {
     },
 
     populateSessions: function(workout){
-        fetch(`/session/${this.workout.id}/all`, {
+        fetch(`/session/${workout.id}/all`, {
             method: "GET",
             headers: {
                 "Content-Type": "application/json"
@@ -43,6 +41,10 @@ export default {
     showSessions: function(sessions){
         const container = document.getElementById("sessionHistoryItems");
 
+        while(container.children.length > 0){
+            container.removeChild(container.firstChild);
+        }
+
         for(let i = 0; i < sessions.length; i++){
             container.appendChild(this.createSessionButton(sessions[i]));
         }