Create page for new workout creation.

controllers/workout.js

@@ -17,6 +17,7 @@ const createRoute = async (req, res, next)=>{
 const createWorkout = (data, userId)=>{
     return new Workout({
         user: userId,
+        name: data.name,
         exercises: data.exercises
     });
 }
@@ -28,6 +29,7 @@ const createWorkout = (data, userId)=>{
  */
 const responseWorkout = (workout)=>{
     return {
+        name: workout.name,
         exercises: workout.exercises
     };
 }

documentation/data.js

@@ -139,6 +139,11 @@ window.data = [
         auth: true,
         description: "Create a new workout for a user",
         requestBody: [
+            {
+                name: "name",
+                type: "String",
+                desc: "Name of the workout"
+            },
             {
                 name: "exercises",
                 type: "[Object]",

models/Workout.js

@@ -5,6 +5,10 @@ const WorkoutSchema = new mongoose.Schema({
         type: mongoose.Schema.Types.ObjectId,
         required: true,
     },
+    name: {
+        type: String,
+        required: true
+    },
     exercises: [{
         name: {
             type: String,

views/css/newWorkout.css

@@ -1,5 +1,9 @@
 #newWorkoutPage{
+    flex-direction: column;
+    justify-content: flex-start;
     position: relative;
+    padding-top: 95px;
+    overflow-y: auto;
 }
 
 #newWorkoutBack{
@@ -7,3 +11,29 @@
     top: 15px;
     right: 15px;
 }
+
+#newWorkoutPage label{
+    display: flex;
+    flex-direction: column;
+    font-size: 22px;
+}
+
+#newWorkoutPage input{
+    font-size: 22px;
+    color: var(--gray);
+    padding: 5px;
+}
+
+.newWorkoutInputs{
+    width: 100%;
+    max-width: 550px;
+}
+
+#newWorkoutName{
+    margin-bottom: 35px;
+}
+
+#newWorkoutFinish{
+    margin-top: 35px;
+    width: 100%;
+}

views/index.css

@@ -27,15 +27,20 @@
     height: 100vh;
     width: 100vw;
     background: var(--dark);
+    padding: 25px;
 }
 
 .logo{
     position: absolute;
     top: 5px;
     left: 5px;
+    z-index: 250;
 }
 
 #notifier{
+    display: flex;
+    justify-content: center;
+    align-items: center;
     position: fixed;
     bottom: 15px;
     left: 15px;

views/index.html

@@ -12,7 +12,7 @@
       <path d="M10,40 Q25,20 50,30 Q75,40 90,30 Q75,50 50,60 Q25,70 10,60 Q25,50 10,40" fill="#D7263D">
     </svg>
 
-    <p id="notifier" style="display:none">Some message here</p>
+    <p id="notifier" style="display:none"></p>
 
     <div id="registerPage" class="page" style="display:none">
         <form id="registerForm" class="standardForm">
@@ -96,13 +96,18 @@
 
     <div id="newWorkoutPage" class="page">
         <button id="newWorkoutBack" class="button">Cancel</button>
-        <label>Name of Workout:
-            <input
-                id="newWorkoutName"
-                type="name"
-                placeholder="Name"
-            >
-        </label>
+
+        <div id="newWorkoutInputs">
+            <label>Name of Workout:
+                <input
+                    id="newWorkoutName"
+                    type="text"
+                    placeholder="Name"
+                >
+            </label>
+        </div>
+
+        <button id="newWorkoutFinish" class="button">Create Workout</button>
     </div>
 
     <script src="/index.js"></script>

views/js/pages/newWorkout.js

@@ -1,9 +1,14 @@
 export default {
     rendered: false,
+    exerciseInputs: [],
+    inputsDiv: document.getElementById("newWorkoutInputs"),
     
     render: function(){
+        document.getElementById("newWorkoutName").focus();
+
         if(!this.rendered){
             this.buttons();
+            this.addExerciseInput();
             this.rendered = true;
         }
     },
@@ -12,5 +17,75 @@ export default {
         document.getElementById("newWorkoutBack").addEventListener("click", ()=>{
             changePage("home");
         });
+
+        document.getElementById("newWorkoutFinish").addEventListener("click", this.createWorkout.bind(this));
+    },
+
+    addExerciseInput: function(){
+        const label = document.createElement("label");
+        this.inputsDiv.appendChild(label);
+
+        const p = document.createElement("p");
+        p.textContent = `Exercise # ${this.exerciseInputs.length+1}`;
+        label.appendChild(p);
+
+        const input = document.createElement("input");
+        input.type = "text";
+        input.placeholder = "Exercise Name";
+        input.addEventListener("keyup", this.checkInputs.bind(this));
+        label.appendChild(input);
+
+        this.exerciseInputs.push(input);
+    },
+
+    checkInputs: function(){
+        let emptyInputs = false;
+        for(let i = 0; i < this.exerciseInputs.length; i++){
+            if(this.exerciseInputs[i].value === "") emptyInputs = true;
+        }
+
+        if(!emptyInputs){
+            this.addExerciseInput();
+        }
+    },
+
+    createWorkout: function(){
+        const name = document.getElementById("newWorkoutName").value;
+        const exercises = []
+        for(let i = 0; i < this.exerciseInputs.length; i++){
+            if(this.exerciseInputs[i].value === "") continue;
+            exercises.push({
+                name: this.exerciseInputs[i].value,
+                type: "weights"
+            });
+        }
+
+        if(exercises.length === 0){
+            notify("error", "Workout must contain at least one exercise");
+            return;
+        }
+
+        fetch("/workout", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json"
+            },
+            body: JSON.stringify({
+                name: document.getElementById("newWorkoutName").value,
+                exercises: exercises
+            })
+        })
+            .then(r=>r.json())
+            .then((response)=>{
+                if(response.error){
+                    notify("error", response.error.message);
+                }else{
+                    notify("success", "New workout created");
+                    changePage("home");
+                }
+            })
+            .catch((err)=>{
+                notify("error", "ERROR: unable to create workout");
+            })
     }
 }