Display session history without style.

views/index.html

@@ -222,6 +222,12 @@
         </template>
     </div>
 
+    <div id="sessionHistoryPage" class="page" style="display:none">
+        <button id="sessionHistoryClose" aria-label="Close">X</button>
+
+        <div id="sessionHistoryItems"></div>
+    </div>
+
     <script src="/index.js"></script>
 </body>
 </html>

views/index.js

@@ -5,6 +5,7 @@ import workoutMenuPage from "./js/pages/workoutMenu.js";
 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";
 
 const notifier = document.getElementById("notifier");
 const pageElements = document.querySelectorAll(".page");
@@ -34,6 +35,7 @@ window.changePage = (page, data)=>{
         case "session": sessionPage.render(data); break;
         case "workoutMenu": workoutMenuPage.render(data); break;
         case "editWorkout": editWorkoutPage.render(data); break;
+        case "sessionHistory": sessionHistoryPage.render(data); break;
     }
 }
 

views/js/pages/sessionHistory.js

@@ -0,0 +1,69 @@
+export default {
+    rendered: false,
+    workout: null,
+
+    render: function(workout){
+        this.workout = workout;
+
+        if(!this.rendered){
+            this.buttons();
+            this.rendered = true;
+        }
+
+        this.populateSessions(workout);
+    },
+
+    buttons: function(workout){
+        document.getElementById("sessionHistoryClose").addEventListener("click", ()=>{
+            changePage("workoutMenu", workout);
+        });
+    },
+
+    populateSessions: function(workout){
+        fetch(`/session/${this.workout.id}/all`, {
+            method: "GET",
+            headers: {
+                "Content-Type": "application/json"
+            }
+        })
+            .then(r=>r.json())
+            .then((response)=>{
+                if(response.error){
+                    notify("error", response.error.message);
+                }else{
+                    this.showSessions(response);
+                }
+            })
+            .catch((err)=>{
+                console.log(err);
+                notify("error", "ERROR: unable to load your data");
+            });
+    },
+
+    showSessions: function(sessions){
+        const container = document.getElementById("sessionHistoryItems");
+
+        for(let i = 0; i < sessions.length; i++){
+            container.appendChild(this.createSessionButton(sessions[i]));
+        }
+        const button = document.createElement("button");
+        button.classList.add("button");
+        button.addEventListern
+    },
+
+    createSessionButton: function(session){
+        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}`)});
+        return button;
+    },
+
+    dateFormat: function(date){
+        return date.toLocaleDateString("en-us", {
+            year: "numeric",
+            month: "long",
+            day: "numeric"
+        });
+    }
+}