From 75eed870373e0ab225766ca331b7daf8a8666d13 Mon Sep 17 00:00:00 2001
From: Filip Borum Poulsen <fbp@deif.com>
Date: Mon, 24 Apr 2023 13:18:20 +0200
Subject: [PATCH] Cleaned up trainer schedule view

---
 client/src/views/trainer/Schedule.vue | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/client/src/views/trainer/Schedule.vue b/client/src/views/trainer/Schedule.vue
index cc29bbc..25185c1 100644
--- a/client/src/views/trainer/Schedule.vue
+++ b/client/src/views/trainer/Schedule.vue
@@ -8,8 +8,10 @@
                         {{ timeslot.start_time.split(":").slice(0, 2).join(":") }} -
                         {{ timeslot.end_time.split(":").slice(0, 2).join(":") }}
                     </div>
+                    <div class="addTimeslotButton"
+                        @click="showNewInput[day.day_of_week - 1] = !showNewInput[day.day_of_week - 1]">+</div>
                 </div>
-                <div class="newTimeslot">
+                <div class="newTimeslot" v-if="showNewInput[day.day_of_week - 1]">
                     <label class="startLabel" for="startHour">Start</label>
                     <input class="startHour" type="number" placeholder="HH" name="startHour" min="0" max="23"
                         v-model="newDayInput[day.day_of_week - 1].startHour" />
@@ -20,7 +22,7 @@
                         v-model="newDayInput[day.day_of_week - 1].endHour" />
                     <input class="endMinute" type="number" placeholder="MM" name="endMinute" min="0" max="59"
                         v-model="newDayInput[day.day_of_week - 1].endMinute" />
-                    <input class="submit" type="submit" name="submit" value="Submit" @click="addTimeslot(day.day_of_week)">
+                    <input class="submit" type="submit" name="submit" value="Tilføj" @click="addTimeslot(day.day_of_week)">
                 </div>
             </div>
         </div>
@@ -89,6 +91,16 @@
 .timeslot:hover {
     border-color: lightcoral;
 }
+
+.addTimeslotButton {
+    justify-self: center;
+    align-self: center;
+    font-weight: 700;
+    font-size: 2em;
+    line-height: 1em;
+    color: steelblue;
+    cursor: pointer;
+}
 </style>
 
 <script lang="ts">
@@ -117,6 +129,7 @@ export default {
     name: "TrainerSchedule",
     data() {
         return {
+            showNewInput: Array.from({ length: 7 }, () => false) as boolean[],
             newDayInput: Array.from({ length: 7 }, () => {
                 return {
                     startHour: undefined,
@@ -152,7 +165,7 @@ export default {
     },
     methods: {
         async addTimeslot(day_of_week: number) {
-            console.log(this.newDayInput[day_of_week - 1]);
+            this.showNewInput[day_of_week - 1] = false
             const input: NewDayInput = this.newDayInput[day_of_week - 1];
             const start_time = `${input.startHour}:${input.startMinute ? input.startMinute : 0}`;
             const end_time = `${input.endHour}:${input.endMinute ? input.endMinute : 0}`;