Display workouts on the home page.

views/css/home.css

@@ -1,5 +1,11 @@
-#home{
+#homePage{
+    flex-direction: column;
     position: relative;
+    overflow-y: auto;
+}
+
+#homePage h1{
+    text-decoration: underline;
 }
 
 #homeNewWorkout{
@@ -7,3 +13,23 @@
     top: 15px;
     right: 15px;
 }
+
+#workoutList{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+
+#workoutList button{
+    margin: 15px 0;
+    padding: 15px 0;
+    width: 100%;
+}
+
+#homeLogout{
+    position: absolute;
+    bottom: 15px;
+    left: 0;
+    width: 100%;
+    text-align: center;
+}

views/index.html

@@ -89,9 +89,13 @@
     </div>
 
     <div id="homePage" class="page">
-        <h1>Home Page</h1>
-        <button id="homeLogout" class="link">Log Out</button>
         <button id="homeNewWorkout" class="button">+ Workout</button>
+
+        <h1>My Workouts</h1>
+
+        <div id="workoutList"></div>
+
+        <button id="homeLogout" class="link">Log Out</button>
     </div>
 
     <div id="newWorkoutPage" class="page">

views/js/pages/home.js

@@ -3,6 +3,7 @@ export default {
 
     render: function(){
         if(!this.rendered){
+            this.getWorkouts();
             this.buttons();
             this.rendered = true;
         }
@@ -27,5 +28,42 @@ export default {
         document.getElementById("homeNewWorkout").addEventListener("click", ()=>{
             changePage("newWorkout");
         });
+    },
+
+    getWorkouts: function(){
+        fetch("/workout", {
+            method: "get",
+            headers: {
+                "Content-Type": "application/json"
+            }
+        })
+            .then(r=>r.json())
+            .then((response)=>{
+                if(response.error){
+                    notify("error", response.error.message);
+                }else{
+                    this.renderWorkouts(response);
+                }
+            })
+            .catch((err)=>{
+                notify("error", "ERROR: Unable to retrieve workouts");
+            });
+    },
+
+    renderWorkouts: function(workouts){
+        const workoutList = document.getElementById("workoutList");
+        while(workoutList.children.length > 0){
+            workoutList.removeChild(workoutList.firstChild);
+        }
+
+        for(let i = 0; i < workouts.length; i++){
+            const button = document.createElement("button");
+            button.classList.add("button");
+            button.textContent = workouts[i].name;
+            button.addEventListener("click", ()=>{
+                changePage("workout", workouts[i]);
+            });
+            workoutList.appendChild(button);
+        }
     }
 }