Fixed QOL stuff

client/src/components/OrderPopup.vue

@@ -20,6 +20,7 @@
             <div class="orderButton" @click="order">
                 Bestil
             </div>
+            <div class="closeButton" @click="$emit('closePopup')">x</div>
         </div>
     </div>
 </template>
@@ -111,6 +112,7 @@ export default {
     display: flex;
     flex-direction: column;
     min-width: 50%;
+    position: relative;
 }
 
 .trainer {
@@ -140,4 +142,16 @@ export default {
     text-decoration: underline;
     border-color: black;
 }
+
+.closeButton {
+    position: absolute;
+    top: 10px;
+    right: 20px;
+    font-size: 2em;
+    cursor: pointer;
+}
+
+.closeButton:hover {
+    text-decoration: underline;
+}
 </style>

client/src/components/TrainerSelector.vue

@@ -31,6 +31,7 @@ export default {
     watch: {
         centers: {
             async handler(centers: number[]) {
+                this.selectedTrainers = [];
                 const filters = centers?.map(c => `center=${c}`).join("&");
                 const res = await fetch(`${import.meta.env.VITE_BASE_API_URL}/trainer?${filters}`);
                 if (res.status === 200) {

client/src/views/Home.vue

@@ -23,7 +23,8 @@
             </div>
         </div>
         <!-- {{ trainersWithTimeslots }} -->
-        <OrderPopup @closePopup="closePopup" :trainer="selectedTrainer" :timeslot="selectedTimeslot" v-if="showPopup" ></OrderPopup>
+        <OrderPopup @closePopup="closePopup" :trainer="selectedTrainer" :timeslot="selectedTimeslot" v-if="showPopup">
+        </OrderPopup>
     </div>
 </template>
 
@@ -111,6 +112,9 @@ export default {
         TrainerSelector,
         OrderPopup
     },
+    created() {
+        this.parseQueryFilters();
+    },
     data() {
         return {
             range: {
@@ -177,17 +181,9 @@ export default {
         openPopup(trainer: Trainer, timeslot: Timeslot) {
             this.selectedTrainer = trainer;
             this.selectedTimeslot = timeslot;
+            this.setSearchQueryFilters();
             this.showPopup = true;
         },
-        createOrder(trainer: Trainer, timeslot: Timeslot) {
-            this.$router.push({
-                path: "/createOrder", query: {
-                    trainer: trainer.id,
-                    startDate: new Date(timeslot.startDate).toISOString(),
-                    endDate: new Date(timeslot.endDate).toISOString()
-                }
-            });
-        },
         formatDate(date: Date): string {
             let output: string = dayjs(date).locale("da").format("dddd D. MMM YYYY");
             let outputStringArray = output.split("");
@@ -203,16 +199,49 @@ export default {
         },
         centerSelectionChanged(selection: number[]) {
             this.centers = selection;
+            this.setSearchQueryFilters();
         },
         trainerSelectionChanged(selection: number[]) {
             this.trainers = selection;
+            this.setSearchQueryFilters();
         },
-        async fetchTimeslots() {
+        parseQueryFilters() {
+            const filters = this.$route.query as any;
+            if (filters.center)
+                if (Array.isArray(filters.center))
+                    this.centers = filters.center;
+                else
+                    this.centers = [filters.center];
+            if (filters.trainer)
+                if (Array.isArray(filters.trainer))
+                    this.trainers = filters.trainer;
+                else
+                    this.trainers = [filters.trainer];
+            if (filters.startDate)
+                this.range.start = new Date(filters.startDate);
+            if (filters.endDate)
+                this.range.end = new Date(filters.endDate);
+        },
+        setSearchQueryFilters() {
+            this.$router.replace({
+                query: {
+                    center: this.centers,
+                    trainer: this.trainers,
+                    startDate: this.range.start.toISOString(),
+                    endDate: this.range.end.toISOString()
+                }
+            })
+        },
+        getSearchQueryFilters(): string {
             const centerFilters = this.centers.map(c => `center=${c}`);
             const trainerFilters = this.trainers.map(c => `trainer=${c}`);
             const startDateFilter = `startDate=${this.range.start.toISOString()}`;
             const endDateFilter = `endDate=${this.range.end.toISOString()}`;
             const filters = [...centerFilters, ...trainerFilters, startDateFilter, endDateFilter].join("&");
+            return filters;
+        },
+        async fetchTimeslots() {
+            const filters = this.getSearchQueryFilters();
             const res = await fetch(`${import.meta.env.VITE_BASE_API_URL}/timeslot?${filters}`);
             if (res.status === 200) {
                 this.trainersWithTimeslots = await res.json();

client/src/views/Login.vue

@@ -49,7 +49,7 @@ export default {
             } else if (res.status === 204) {
                 this.setLoginState(true);
                 if (this.$route.query.ref) {
-                    this.$router.push({ path: this.$route.query.ref.toString() });
+                    this.$router.push({ path: this.$route.query.ref.toString(), query: { ...this.$route.query, ref: undefined } });
                 } else {
                     this.$router.push({ path: '/' });
                 }

server/src/routes/timeslot.ts

@@ -19,7 +19,9 @@ const timeslotFiltersSchema = Joi.object({
     trainer: Joi.array().single().items(
         idSchema.required()
     ),
-    center: idSchema,
+    center: Joi.array().single().items(
+        idSchema.required()
+    ),
     startDate: Joi.date().default(Date.now()),
     endDate: Joi.date().default(Date.now()),
     startTime: timeSchema,
@@ -125,7 +127,7 @@ router.get("/timeslot", async (req: Request, res: Response) => {
             WHERE
                 ((trainer_id = ANY($3)) OR $4)
                 AND (day_of_week = ANY($5))
-                AND (trainers.center_id = $6 OR $7)
+                AND (trainers.center_id = ANY($6) OR $7)
             GROUP BY
                 weekly_timeslots.trainer_id,
                 users.first_name,
@@ -142,7 +144,7 @@ router.get("/timeslot", async (req: Request, res: Response) => {
             timeslotFilters.trainer !== undefined ? timeslotFilters.trainer : [],
             timeslotFilters.trainer === undefined,
             weekdays,
-            timeslotFilters.center,
+            timeslotFilters.center !== undefined ? timeslotFilters.center : [],
             timeslotFilters.center === undefined
         ]);