From bac73f09fd8448a5ece79810d27ef56812747588 Mon Sep 17 00:00:00 2001
From: arne <vanheule.arne@ugent.be>
Date: Tue, 28 Mar 2023 15:59:47 +0200
Subject: [PATCH 01/21] feat: first idea of a redesign for this page

---
 web/src/views/RoundPlanner.vue | 352 +++++++++++++++++++++++++--------
 1 file changed, 269 insertions(+), 83 deletions(-)

diff --git a/web/src/views/RoundPlanner.vue b/web/src/views/RoundPlanner.vue
index 6fe8e9660..f791101ca 100644
--- a/web/src/views/RoundPlanner.vue
+++ b/web/src/views/RoundPlanner.vue
@@ -1,100 +1,286 @@
 <template>
-  <v-container fluid>
-    <v-card>
-      <v-card-actions>
+  <v-card variant="flat">
+    <v-row class="py-0 my-0">
+      <v-col
+        cols="1"
+        style="min-width: 100px; max-width: 100%"
+        class="flex-grow-1 flex-shrink-0 py-0 my-0 ml-5"
+      >
         <v-select
+          label="Student"
+          :items="mock_students"
+          type="text"
           variant="solo"
-          label="Selecteer type week"
-          v-model="selectedWeek"
-          :items="['Even', 'Oneven']"
+          prepend-inner-icon="mdi-account"
+          v-model="selected_student"
+          required
         ></v-select>
-        <v-spacer></v-spacer>
+      </v-col>
+      <v-col
+        cols="3"
+        style="min-width: 100px; max-width: 100%"
+        class="flex-grow-0 flex-shrink-0 py-0 my-0"
+      >
+        <v-text-field
+          label="Datum"
+          type="date"
+          variant="solo"
+          v-model="selected_day"
+        />
+      </v-col>
+      <v-col
+        cols="3"
+        style="min-width: 100px; max-width: 100%"
+        class="flex-grow-0 flex-shrink-0 py-0 my-0 mr-5"
+      >
+        <v-text-field
+          label="Start"
+          type="time"
+          variant="solo"
+          v-model="selected_time"
+        />
+      </v-col> </v-row
+    ><v-row class="py-0 my-0">
+      <v-col
+        cols="1"
+        style="min-width: 100px; max-width: 100%"
+        class="flex-grow-1 flex-shrink-0 py-0 my-0 ml-5"
+      >
         <v-select
+          label="Ronde"
+          :items="mock_rounds"
+          v-model="selected_round"
+          item-value="name"
+          item-title="name"
+          return-object
+          type="text"
           variant="solo"
-          label="Selecteer student"
-          v-model="selectedStudent"
-          :items="['Jonathan', 'Oscar', 'Pol', 'Annemie']"
+          prepend-inner-icon="mdi-transit-detour"
+          required
         ></v-select>
-        <v-spacer></v-spacer>
-        <VueDatePicker
-          class="date-select"
-          v-model="selectedDate"
-          :enable-time-picker="false"
-          input-class-name="v-field__input"
-          :format="format"
-        ></VueDatePicker>
-      </v-card-actions>
-
-      <v-container fluid>
-        <v-card title="Rondes">
-          <v-card-actions>
-            <v-select
-              variant="solo"
-              v-model="selectedRound"
-              label="Aangemaakte rondes"
-              :items="rounds"
-            ></v-select>
-            <v-spacer></v-spacer>
-            <router-link to="/dashboard/rondes/nieuw">
-              <v-btn
-                v-if="selectedRound"
-                prepend-icon="mdi-pencil"
-                color="primary"
-                >Bewerk ronde</v-btn
-              >
-            </router-link>
-          </v-card-actions>
-          <v-list v-if="selectedRound">
-            <v-list-item v-for="building in buildings" :key="building.name">
-              <template v-slot:prepend>
-                <v-icon icon="mdi-office-building"></v-icon>
+      </v-col>
+      <v-col
+        cols="3"
+        style="min-width: 100px; max-width: 100%"
+        class="flex-grow-0 flex-shrink-0 py-0 my-0"
+      >
+        <v-btn
+          min-width="100%"
+          min-height="55px"
+          prepend-icon="mdi-pencil"
+          left
+          max-width="100%"
+          >Bewerken</v-btn
+        >
+      </v-col>
+      <v-col
+        cols="3"
+        style="min-width: 100px; max-width: 100%"
+        class="flex-grow-0 flex-shrink-0 py-0 my-0 mr-5"
+      >
+        <v-btn
+          min-height="55px"
+          min-width="100%"
+          prepend-icon="mdi-plus"
+          max-width="100%"
+          >Nieuwe maken</v-btn
+        >
+      </v-col>
+    </v-row>
+    <v-card
+      v-if="selected_round"
+      variant="flat"
+      class="py-0 my-0 mx-2"
+      :title="selected_round.name"
+    >
+      <v-list class="mx-3">
+        <v-list-item v-for="building in selected_round.buildings">
+          <v-card variant="flat"></v-card>
+          <template v-slot:prepend v-if="building.comments">
+            <v-tooltip text="Gebouw is al ingepland.">
+              <template v-slot:activator="{ props }">
+                <v-icon color="orange" icon="mdi-alert" v-bind="props"></v-icon>
               </template>
-              <v-list-item-title>{{ building.name }}</v-list-item-title>
-              <v-list-item-subtitle>{{ building.adress }}</v-list-item-subtitle>
-            </v-list-item>
-          </v-list>
-        </v-card>
-      </v-container>
-      <v-spacer></v-spacer>
-      <v-card-actions class="">
-        <v-spacer></v-spacer>
-        <v-btn prepend-icon="mdi-cancel" color="error">Annuleren</v-btn>
-        <v-btn prepend-icon="mdi-check" color="primary">Ronde opslaan</v-btn>
-      </v-card-actions>
+            </v-tooltip>
+          </template>
+          <template v-slot:prepend>
+            <v-icon color="green" icon="mdi-office-building"></v-icon>
+          </template>
+          <template v-slot:title>
+            <v-card-title>{{ building.name }}</v-card-title>
+          </template><template v-slot:subtitle>
+            <v-card-subtitle>{{ building.address }}</v-card-subtitle>
+          </template>
+          </v-list-item
+        >
+      </v-list>
     </v-card>
-  </v-container>
+    <v-card v-else title="Nog geen ronde geselecteerd" variant="flat"></v-card>
+    <v-card-actions class="d-flex">
+      <v-spacer></v-spacer>
+      <!-- TODO fill in correct link, router pushback to previous page or reload this one? -->
+      <v-btn :disabled="!(selected_student && selected_round && selected_day && selected_time)" to="/todo" prepend-icon="mdi-check" color="primary"
+        >Ronde inplannen</v-btn
+      >
+    </v-card-actions>
+  </v-card>
 </template>
 
 <script lang="ts" setup>
 import { ref } from "vue";
-import VueDatePicker from "@vuepic/vue-datepicker";
+import Round from "@/components/models/Round";
 
-const selectedWeek = ref("");
-const selectedStudent = ref("");
-const selectedDate = ref("");
-const selectedRound = ref("");
+const selected_student = ref<string>("");
+const selected_day = ref<string>(new Date().toISOString().substring(0, 10));
+const selected_time = ref<string>("");
+const selected_round = ref<Round | null>(null);
 
-const format = (date: Date) => {
-  const day = date.getDate();
-  const month = date.getMonth() + 1;
-  const year = date.getFullYear();
-
-  return `${day}/${month}/${year}`;
-};
-
-const rounds = ref(["Gent Zuid", "Station", "Koremarkt"]);
-
-const buildings = ref([
-  { adress: "Lange Violettestraat 50", name: "Upkot" },
-  { adress: "Vlaanderenstraat 4", name: "Appartement 21" },
-  { adress: "Zuidstraat 2", name: "Shopping Gent Zuid" },
-  { adress: "Krookstraat 345", name: "De krook" },
+const mock_students = ref<string[]>([
+  "Michael",
+  "Christopher",
+  "Jessica",
+  "Matthew",
+  "Ashley",
 ]);
-</script>
 
-<style>
-.date-select {
-  margin-left: 10%;
-  width: 20%;
-}
-</style>
+const mock_rounds: Round[] = [
+  {
+    name: "Grote Markt",
+    start: "13:30",
+    end: "14:00",
+    started: true,
+    student: "Emma",
+    comments: true,
+    current_building: 5,
+    buildings: [
+      {
+        name: "Smith",
+        address: "Gent, Belgium",
+        deltatime: "10 min",
+        comments: false,
+        amount_of_pics: 5,
+      },
+      {
+        name: "Johnson",
+        address: "Brussels, Belgium",
+        deltatime: "35 min",
+        comments: false,
+        amount_of_pics: 2,
+      },
+      {
+        name: "Smith",
+        address: "Gent, Belgium",
+        deltatime: "10 min",
+        comments: true,
+        amount_of_pics: 5,
+      },
+      {
+        name: "Johnson",
+        address: "Brussels, Belgium",
+        deltatime: "35 min",
+        comments: false,
+        amount_of_pics: 2,
+      },
+      {
+        name: "Brown",
+        address: "Antwerp, Belgium",
+        deltatime: "25 min",
+        comments: true,
+        amount_of_pics: 4,
+      },
+    ],
+  },
+  {
+    name: "Vrijdagmarkt",
+    start: "16:00",
+    end: "",
+    started: true,
+    student: "Sophie",
+    comments: false,
+    current_building: 1,
+    buildings: [
+      {
+        name: "Garcia",
+        address: "Bruges, Belgium",
+        deltatime: "15 min",
+        comments: false,
+        amount_of_pics: 3,
+      },
+      {
+        name: "Miller",
+        address: "Leuven, Belgium",
+        deltatime: "20 min",
+        comments: false,
+        amount_of_pics: 2,
+      },
+      {
+        name: "Clark",
+        address: "Ostend, Belgium",
+        deltatime: "30 min",
+        comments: false,
+        amount_of_pics: 4,
+      },
+      {
+        name: "Miller",
+        address: "Leuven, Belgium",
+        deltatime: "20 min",
+        comments: false,
+        amount_of_pics: 2,
+      },
+      {
+        name: "Clark",
+        address: "Ostend, Belgium",
+        deltatime: "30 min",
+        comments: false,
+        amount_of_pics: 4,
+      },
+      {
+        name: "Miller",
+        address: "Leuven, Belgium",
+        deltatime: "20 min",
+        comments: false,
+        amount_of_pics: 2,
+      },
+      {
+        name: "Clark",
+        address: "Ostend, Belgium",
+        deltatime: "30 min",
+        comments: false,
+        amount_of_pics: 4,
+      },
+    ],
+  },
+  {
+    name: "Korenmarkt",
+    start: "16:15",
+    end: "",
+    student: "Alex",
+    started: false,
+    comments: false,
+    current_building: 0,
+    buildings: [
+      {
+        name: "Wilson",
+        address: "Veldstraat, Belgium",
+        deltatime: "5 min",
+        comments: false,
+        amount_of_pics: 3,
+      },
+      {
+        name: "Moore",
+        address: "Liege, Belgium",
+        deltatime: "45 min",
+        comments: false,
+        amount_of_pics: 5,
+      },
+      {
+        name: "Anderson",
+        address: "Mons, Belgium",
+        deltatime: "30 min",
+        comments: false,
+        amount_of_pics: 2,
+      },
+    ],
+  },
+];
+</script>

From 5366b86d26ae70538b9efffb4308585688ce3321 Mon Sep 17 00:00:00 2001
From: arne <vanheule.arne@ugent.be>
Date: Tue, 28 Mar 2023 16:02:15 +0200
Subject: [PATCH 02/21] fix: linter

---
 web/src/views/RoundPlanner.vue | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/web/src/views/RoundPlanner.vue b/web/src/views/RoundPlanner.vue
index f791101ca..02412950e 100644
--- a/web/src/views/RoundPlanner.vue
+++ b/web/src/views/RoundPlanner.vue
@@ -65,6 +65,7 @@
         class="flex-grow-0 flex-shrink-0 py-0 my-0"
       >
         <v-btn
+          to="/rondes/nieuw"
           min-width="100%"
           min-height="55px"
           prepend-icon="mdi-pencil"
@@ -79,6 +80,7 @@
         class="flex-grow-0 flex-shrink-0 py-0 my-0 mr-5"
       >
         <v-btn
+          to="/rondes/nieuw"
           min-height="55px"
           min-width="100%"
           prepend-icon="mdi-plus"
@@ -107,19 +109,24 @@
             <v-icon color="green" icon="mdi-office-building"></v-icon>
           </template>
           <template v-slot:title>
-            <v-card-title>{{ building.name }}</v-card-title>
-          </template><template v-slot:subtitle>
+            <v-card-title>{{ building.name }}</v-card-title> </template
+          ><template v-slot:subtitle>
             <v-card-subtitle>{{ building.address }}</v-card-subtitle>
           </template>
-          </v-list-item
-        >
+        </v-list-item>
       </v-list>
     </v-card>
     <v-card v-else title="Nog geen ronde geselecteerd" variant="flat"></v-card>
     <v-card-actions class="d-flex">
       <v-spacer></v-spacer>
       <!-- TODO fill in correct link, router pushback to previous page or reload this one? -->
-      <v-btn :disabled="!(selected_student && selected_round && selected_day && selected_time)" to="/todo" prepend-icon="mdi-check" color="primary"
+      <v-btn
+        :disabled="
+          !(selected_student && selected_round && selected_day && selected_time)
+        "
+        to="/todo"
+        prepend-icon="mdi-check"
+        color="primary"
         >Ronde inplannen</v-btn
       >
     </v-card-actions>

From 2c5f56efe61ffc4cc8f0503af9208ead0f8316f3 Mon Sep 17 00:00:00 2001
From: arne <vanheule.arne@ugent.be>
Date: Tue, 28 Mar 2023 16:07:09 +0200
Subject: [PATCH 03/21] chore: linter + comments

---
 web/src/views/RoundPlanner.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/web/src/views/RoundPlanner.vue b/web/src/views/RoundPlanner.vue
index 02412950e..322654297 100644
--- a/web/src/views/RoundPlanner.vue
+++ b/web/src/views/RoundPlanner.vue
@@ -79,6 +79,7 @@
         style="min-width: 100px; max-width: 100%"
         class="flex-grow-0 flex-shrink-0 py-0 my-0 mr-5"
       >
+        <!-- TODO: fix router to link -->
         <v-btn
           to="/rondes/nieuw"
           min-height="55px"
@@ -98,7 +99,10 @@
       <v-list class="mx-3">
         <v-list-item v-for="building in selected_round.buildings">
           <v-card variant="flat"></v-card>
+          <!-- TODO: Currently using the building.comments as a indication for mock -->
+          <!-- Change in a api call if building already in other rounds -->
           <template v-slot:prepend v-if="building.comments">
+            <!-- TODO: Maybe change the text of the tooltip to ref of round -->
             <v-tooltip text="Gebouw is al ingepland.">
               <template v-slot:activator="{ props }">
                 <v-icon color="orange" icon="mdi-alert" v-bind="props"></v-icon>

From f034e43c7956474bdd2e484a0ce4462056de846f Mon Sep 17 00:00:00 2001
From: arne <vanheule.arne@ugent.be>
Date: Tue, 28 Mar 2023 17:52:22 +0200
Subject: [PATCH 04/21] feat: multiple days

---
 web/src/views/RoundPlanner.vue | 34 +++++++++++++++++++++++++++++-----
 1 file changed, 29 insertions(+), 5 deletions(-)

diff --git a/web/src/views/RoundPlanner.vue b/web/src/views/RoundPlanner.vue
index 322654297..661d34310 100644
--- a/web/src/views/RoundPlanner.vue
+++ b/web/src/views/RoundPlanner.vue
@@ -16,16 +16,32 @@
           required
         ></v-select>
       </v-col>
+      <!-- Start en einddatum zou idealiter een kalender moeten zijn waarop datums te selecteren zijn -->
       <v-col
         cols="3"
         style="min-width: 100px; max-width: 100%"
-        class="flex-grow-0 flex-shrink-0 py-0 my-0"
+        class="flex-grow-0 flex-shrink-1 py-0 my-0"
+      >
+        <v-text-field
+          label="Startdatum"
+          type="date"
+          variant="solo"
+          multiple
+          v-model="selected_start_day"
+        />
+      </v-col>
+      <v-col
+        cols="3"
+        style="min-width: 100px; max-width: 100%"
+        class="flex-grow-0 flex-shrink-1 py-0 my-0"
       >
         <v-text-field
-          label="Datum"
+          label="Einddatum"
           type="date"
           variant="solo"
-          v-model="selected_day"
+          multiple
+          v-model="selected_end_day"
+          :placeholder="selected_start_day"
         />
       </v-col>
       <v-col
@@ -126,7 +142,12 @@
       <!-- TODO fill in correct link, router pushback to previous page or reload this one? -->
       <v-btn
         :disabled="
-          !(selected_student && selected_round && selected_day && selected_time)
+          !(
+            selected_student &&
+            selected_round &&
+            selected_start_day &&
+            selected_time
+          )
         "
         to="/todo"
         prepend-icon="mdi-check"
@@ -142,7 +163,10 @@ import { ref } from "vue";
 import Round from "@/components/models/Round";
 
 const selected_student = ref<string>("");
-const selected_day = ref<string>(new Date().toISOString().substring(0, 10));
+const selected_start_day = ref<string>(
+  new Date().toISOString().substring(0, 10),
+);
+const selected_end_day = ref<string>(new Date().toISOString().substring(0, 10));
 const selected_time = ref<string>("");
 const selected_round = ref<Round | null>(null);
 

From 3c42d34ebdeaba28377cf32399d8d0bc9b6678cb Mon Sep 17 00:00:00 2001
From: arne <vanheule.arne@ugent.be>
Date: Wed, 29 Mar 2023 14:48:53 +0200
Subject: [PATCH 05/21] feat: lint

---
 web/src/router/index.ts        |  2 +-
 web/src/views/RoundPlanner.vue | 16 +---------------
 2 files changed, 2 insertions(+), 16 deletions(-)

diff --git a/web/src/router/index.ts b/web/src/router/index.ts
index f4b616856..e571c58c5 100644
--- a/web/src/router/index.ts
+++ b/web/src/router/index.ts
@@ -85,7 +85,7 @@ const routes = [
         props: true,
       },
       {
-        path: "/dashboard/rondes/nieuw",
+        path: "/rondes/nieuw",
         name: "Nieuwe ronde",
         component: RoundMaker,
       },
diff --git a/web/src/views/RoundPlanner.vue b/web/src/views/RoundPlanner.vue
index 661d34310..a4e52019d 100644
--- a/web/src/views/RoundPlanner.vue
+++ b/web/src/views/RoundPlanner.vue
@@ -23,27 +23,13 @@
         class="flex-grow-0 flex-shrink-1 py-0 my-0"
       >
         <v-text-field
-          label="Startdatum"
+          label="Datum"
           type="date"
           variant="solo"
           multiple
           v-model="selected_start_day"
         />
       </v-col>
-      <v-col
-        cols="3"
-        style="min-width: 100px; max-width: 100%"
-        class="flex-grow-0 flex-shrink-1 py-0 my-0"
-      >
-        <v-text-field
-          label="Einddatum"
-          type="date"
-          variant="solo"
-          multiple
-          v-model="selected_end_day"
-          :placeholder="selected_start_day"
-        />
-      </v-col>
       <v-col
         cols="3"
         style="min-width: 100px; max-width: 100%"

From cd57a5b789e5a46c11c71efa2441da4b81425b4f Mon Sep 17 00:00:00 2001
From: arne <vanheule.arne@ugent.be>
Date: Thu, 30 Mar 2023 20:04:25 +0200
Subject: [PATCH 06/21] feat: styling

---
 web/src/views/RoundMaker.vue   |  77 +++++++++-------
 web/src/views/RoundPlanner.vue | 163 +++++++++++++++++++++++++--------
 2 files changed, 169 insertions(+), 71 deletions(-)

diff --git a/web/src/views/RoundMaker.vue b/web/src/views/RoundMaker.vue
index 5cf1bc2fd..cbd434ea3 100644
--- a/web/src/views/RoundMaker.vue
+++ b/web/src/views/RoundMaker.vue
@@ -1,32 +1,35 @@
 <template>
-  <v-row no-gutters>
-    <!-- Usage of v-col to get 2 columns -->
-    <!-- This v-col is the content on left hand side of the screen -->
-    <v-col class="pa-2 ma-2">
-      <v-card width="100%">
+  <v-row class="py-0 my-2 mx-2">
+    <v-col
+      cols="1"
+      style="min-width: 100px; max-width: 100%"
+      class="flex-grow-1 flex-shrink-0 py-0 my-0 ml-5"
+      ><v-card width="100%">
         <!-- Header for the card title -->
         <!-- TODO: remove the mockdata from this part -->
-        <v-card-title class="d-flex"
-          ><v-text-field
-            label="Naam ronde"
-            hint="Bv: Copure vrijdag"
-            variant="solo"
-          ></v-text-field
-          ><v-spacer></v-spacer><v-btn>Klaar</v-btn>
-        </v-card-title>
+        <v-row class="py-0 my-2">
+          <v-col
+            cols="1"
+            style="min-width: 100px; max-width: 100%"
+            class="flex-grow-1 flex-shrink-0 py-0 my-0 ml-5"
+            ><v-text-field label="Template naam" variant="solo" /></v-col
+          ><v-col
+            cols="3"
+            style="min-width: 100px; max-width: 100%"
+            class="flex-grow-0 flex-shrink-0 py-0 my-0 ml-5"
+            ><v-btn height="55px">Aanmaken</v-btn></v-col
+          >
+        </v-row>
         <v-divider></v-divider>
         <v-layout>
           <v-list width="100%">
-            <v-list-item
+            <v-card
               v-for="(building, i) in round"
               :key="i"
               :value="building"
               fluid
+              variant="flat"
             >
-              <v-list-item-title>{{ building.name }}</v-list-item-title>
-              <v-list-item-subtitle>{{ building.adress }}</v-list-item-subtitle>
-
-              <!-- Buttons for manipulating the round list -->
               <template v-slot:prepend>
                 <v-icon
                   icon="mdi-chevron-up"
@@ -36,19 +39,27 @@
                   icon="mdi-chevron-down"
                   @click="moveBuildingDown(i)"
                 ></v-icon>
+              </template>
+              <template v-slot:title>
+                <v-card-title>{{ building.name }}</v-card-title> </template
+              ><template v-slot:subtitle>
+                <v-card-subtitle>{{ building.adress }}</v-card-subtitle>
+              </template>
+              <template v-slot:append>
                 <v-icon
                   icon="mdi-close"
                   @click="deleteBuildingFromRound(i, building)"
                 ></v-icon>
               </template>
-            </v-list-item>
+            </v-card>
           </v-list>
-        </v-layout>
-      </v-card>
-    </v-col>
-    <!-- Right hand side of the screen -->
-    <v-col class="pa-2 ma-2">
-      <v-card width="100%">
+        </v-layout> </v-card
+    ></v-col>
+    <v-col
+      cols="2"
+      style="min-width: 100px; max-width: 100%"
+      class="flex-grow-1 flex-shrink-0 py-0 my-0 ml-5"
+      ><v-card width="100%">
         <v-card-title>
           <v-text-field
             label="Zoeken op naam van bestaande gebouwen"
@@ -59,14 +70,13 @@
         <v-divider></v-divider>
         <v-layout>
           <v-list width="100%">
-            <v-list-item
+            <v-card
               v-for="building in filterlist()"
               :key="building.listid"
               :value="building"
               fluid
+              variant="flat"
             >
-              <v-list-item-title>{{ building.name }}</v-list-item-title>
-              <v-list-item-subtitle>{{ building.adress }}</v-list-item-subtitle>
               <template v-slot:prepend>
                 <!-- Button for manipulating the building list -->
                 <v-icon
@@ -76,11 +86,16 @@
                   "
                 ></v-icon>
               </template>
-            </v-list-item>
+              <template v-slot:title>
+                <v-card-title>{{ building.name }}</v-card-title> </template
+              ><template v-slot:subtitle>
+                <v-card-subtitle>{{ building.adress }}</v-card-subtitle>
+              </template>
+            </v-card>
           </v-list>
         </v-layout>
-      </v-card>
-    </v-col>
+      </v-card></v-col
+    >
   </v-row>
 </template>
 
diff --git a/web/src/views/RoundPlanner.vue b/web/src/views/RoundPlanner.vue
index a4e52019d..6f1a78f6f 100644
--- a/web/src/views/RoundPlanner.vue
+++ b/web/src/views/RoundPlanner.vue
@@ -1,5 +1,23 @@
 <template>
   <v-card variant="flat">
+    <v-card-actions class="d-flex ml-3">
+      <!-- Buttons to select if the user wants to plan for multiple days or not -->
+      <v-btn
+        @click="
+          () => {
+            selected_multiple = false;
+            selected_end_day = '';
+          }
+        "
+        :active="!selected_multiple"
+        >Enkel</v-btn
+      >
+      <v-btn
+        @click="() => (selected_multiple = true)"
+        :active="selected_multiple"
+        >Meerdere</v-btn
+      >
+    </v-card-actions>
     <v-row class="py-0 my-0">
       <v-col
         cols="1"
@@ -16,19 +34,28 @@
           required
         ></v-select>
       </v-col>
-      <!-- Start en einddatum zou idealiter een kalender moeten zijn waarop datums te selecteren zijn -->
+      <!-- TODO: implement check to see if start and end date dont crossover -->
       <v-col
         cols="3"
         style="min-width: 100px; max-width: 100%"
         class="flex-grow-0 flex-shrink-1 py-0 my-0"
-      >
-        <v-text-field
-          label="Datum"
-          type="date"
-          variant="solo"
-          multiple
-          v-model="selected_start_day"
-        />
+        ><div class="d-flex">
+          <v-text-field
+            label="Datum"
+            type="date"
+            variant="solo"
+            multiple
+            v-model="selected_start_day"
+          /><v-text-field
+            class="ml-1"
+            v-if="selected_multiple"
+            label="Datum"
+            type="date"
+            variant="solo"
+            multiple
+            v-model="selected_end_day"
+          />
+        </div>
       </v-col>
       <v-col
         cols="3"
@@ -66,6 +93,8 @@
         style="min-width: 100px; max-width: 100%"
         class="flex-grow-0 flex-shrink-0 py-0 my-0"
       >
+        <!-- TODO: currently 55px on this button to make it fit the theme, maybe css in future? -->
+        <!-- TODO: fix this router link to load in dynamicly -->
         <v-btn
           to="/rondes/nieuw"
           min-width="100%"
@@ -81,7 +110,7 @@
         style="min-width: 100px; max-width: 100%"
         class="flex-grow-0 flex-shrink-0 py-0 my-0 mr-5"
       >
-        <!-- TODO: fix router to link -->
+        <!-- TODO: Fix router link so there's a pushback to this page once a round is created?-->
         <v-btn
           to="/rondes/nieuw"
           min-height="55px"
@@ -92,37 +121,48 @@
         >
       </v-col>
     </v-row>
+
     <v-card
       v-if="selected_round"
-      variant="flat"
-      class="py-0 my-0 mx-2"
-      :title="selected_round.name"
+      v-for="planned in planned_rounds"
+      class="py-0 my-5 mx-5"
     >
-      <v-list class="mx-3">
-        <v-list-item v-for="building in selected_round.buildings">
-          <v-card variant="flat"></v-card>
-          <!-- TODO: Currently using the building.comments as a indication for mock -->
-          <!-- Change in a api call if building already in other rounds -->
-          <template v-slot:prepend v-if="building.comments">
-            <!-- TODO: Maybe change the text of the tooltip to ref of round -->
-            <v-tooltip text="Gebouw is al ingepland.">
-              <template v-slot:activator="{ props }">
-                <v-icon color="orange" icon="mdi-alert" v-bind="props"></v-icon>
-              </template>
-            </v-tooltip>
-          </template>
-          <template v-slot:prepend>
-            <v-icon color="green" icon="mdi-office-building"></v-icon>
-          </template>
-          <template v-slot:title>
-            <v-card-title>{{ building.name }}</v-card-title> </template
-          ><template v-slot:subtitle>
-            <v-card-subtitle>{{ building.address }}</v-card-subtitle>
-          </template>
-        </v-list-item>
-      </v-list>
+      <template v-if="selected_round.comments" v-slot:prepend>
+        <v-tooltip :text="`Ronde al ingepland op ${planned.date}`"
+          ><template v-slot:activator="{ props }">
+            <v-icon
+              v-bind="props"
+              color="error"
+              icon="mdi-alert"
+            ></v-icon></template
+        ></v-tooltip>
+      </template>
+
+      <template v-else v-slot:prepend>
+        <v-icon v-bind="props" color="green" icon="mdi-transit-detour"></v-icon>
+      </template>
+      <template v-slot:title>
+        <v-card-title>{{ selected_round.name }}</v-card-title> </template
+      ><template v-slot:subtitle>
+        <v-card-subtitle>{{
+          selected_multiple ? planned.date : ""
+        }}</v-card-subtitle>
+      </template>
+      <template v-slot:append>
+        <v-icon class="ml-2" color="error" icon="mdi-close"></v-icon>
+        <v-icon class="ml-2" color="primary" icon="mdi-pencil"></v-icon>
+        <v-icon
+          class="ml-2"
+          :icon="planned.showinfo ? 'mdi-chevron-up' : 'mdi-chevron-down'"
+        ></v-icon>
+      </template>
     </v-card>
-    <v-card v-else title="Nog geen ronde geselecteerd" variant="flat"></v-card>
+    <v-card
+      v-else
+      prepend-icon="mdi-information"
+      title="Nog geen ronde geselecteerd"
+      variant="flat"
+    ></v-card>
     <v-card-actions class="d-flex">
       <v-spacer></v-spacer>
       <!-- TODO fill in correct link, router pushback to previous page or reload this one? -->
@@ -138,24 +178,67 @@
         to="/todo"
         prepend-icon="mdi-check"
         color="primary"
-        >Ronde inplannen</v-btn
+        >Ronde(s) inplannen</v-btn
       >
     </v-card-actions>
   </v-card>
 </template>
 
 <script lang="ts" setup>
-import { ref } from "vue";
+import { ref, computed, ComputedRef } from "vue";
 import Round from "@/components/models/Round";
 
+const selected_multiple = ref<boolean>(false);
 const selected_student = ref<string>("");
 const selected_start_day = ref<string>(
   new Date().toISOString().substring(0, 10),
 );
-const selected_end_day = ref<string>(new Date().toISOString().substring(0, 10));
+const selected_end_day = ref<string>("");
 const selected_time = ref<string>("");
 const selected_round = ref<Round | null>(null);
 
+function getDateRange(start: string, end: string): string[] {
+  if (!end) {
+    return [start];
+  } else {
+    let dates: string[] = [];
+    let current_date = new Date(start);
+    let end_date = new Date(end);
+    while (current_date <= end_date) {
+      dates.push(current_date.toISOString().substring(0, 10));
+      current_date.setDate(current_date.getDate() + 1);
+    }
+
+    return dates;
+  }
+}
+
+interface RoutePlanning {
+  date: string;
+  round: Round | null;
+  showinfo: boolean;
+}
+
+const planned_rounds: ComputedRef<RoutePlanning[]> = computed(() => {
+  let date_round: RoutePlanning[] = [];
+  for (let curr_date of getDateRange(
+    selected_start_day.value,
+    selected_end_day.value,
+  )) {
+    date_round.push({
+      date: curr_date,
+      round: selected_round.value,
+      showinfo: false,
+    });
+  }
+  return date_round;
+});
+
+function logme(planned: RoutePlanning) {
+  planned.showinfo = !planned.showinfo;
+  console.log("hssssssss");
+}
+
 const mock_students = ref<string[]>([
   "Michael",
   "Christopher",

From 42958309762d7666add142777b600361c4eedea9 Mon Sep 17 00:00:00 2001
From: arne <vanheule.arne@ugent.be>
Date: Sun, 2 Apr 2023 18:17:44 +0200
Subject: [PATCH 07/21] feat: functional roundplanning/making

---
 web/src/components/models/RoundPlanning.ts |   8 +
 web/src/views/RoundMaker.vue               |   8 +-
 web/src/views/RoundPlanner.vue             | 191 +++++++++++++++------
 3 files changed, 148 insertions(+), 59 deletions(-)
 create mode 100644 web/src/components/models/RoundPlanning.ts

diff --git a/web/src/components/models/RoundPlanning.ts b/web/src/components/models/RoundPlanning.ts
new file mode 100644
index 000000000..8c8a2caca
--- /dev/null
+++ b/web/src/components/models/RoundPlanning.ts
@@ -0,0 +1,8 @@
+import Round from "./Round";
+
+export default interface RoundPlanning {
+  date: string;
+  round: Round | null;
+  showinfo: boolean;
+  edit: boolean;
+}
diff --git a/web/src/views/RoundMaker.vue b/web/src/views/RoundMaker.vue
index cbd434ea3..480d4cbd2 100644
--- a/web/src/views/RoundMaker.vue
+++ b/web/src/views/RoundMaker.vue
@@ -7,7 +7,7 @@
       ><v-card width="100%">
         <!-- Header for the card title -->
         <!-- TODO: remove the mockdata from this part -->
-        <v-row class="py-0 my-2">
+        <v-row class="py-1 my-1">
           <v-col
             cols="1"
             style="min-width: 100px; max-width: 100%"
@@ -129,7 +129,11 @@ const buildings: { name: string; adress: string }[] = reactive([
  */
 const round: { name: string; adress: string }[] = reactive([]);
 
-// This function will give back the buildings which match the string given by the user
+/**
+ * TODO: This function will give back the buildings which match the string given by the user
+ * Change this with an autocomplete but currently doesnt work with objects from mockdata
+ * Pagination is something that could be introduced in the API aswell?
+ */
 function filterlist(): { name: string; adress: string; listid: number }[] {
   let filteredlist: { name: string; adress: string; listid: number }[] = [];
   buildings.forEach((building, index) => {
diff --git a/web/src/views/RoundPlanner.vue b/web/src/views/RoundPlanner.vue
index 6f1a78f6f..e4e11fd96 100644
--- a/web/src/views/RoundPlanner.vue
+++ b/web/src/views/RoundPlanner.vue
@@ -1,5 +1,7 @@
 <template>
   <v-card variant="flat">
+    <!-- Select input fields -->
+
     <v-card-actions class="d-flex ml-3">
       <!-- Buttons to select if the user wants to plan for multiple days or not -->
       <v-btn
@@ -34,6 +36,7 @@
           required
         ></v-select>
       </v-col>
+
       <!-- TODO: implement check to see if start and end date dont crossover -->
       <v-col
         cols="3"
@@ -46,6 +49,7 @@
             variant="solo"
             multiple
             v-model="selected_start_day"
+            @update:model-value="reset_planning()"
           /><v-text-field
             class="ml-1"
             v-if="selected_multiple"
@@ -54,6 +58,7 @@
             variant="solo"
             multiple
             v-model="selected_end_day"
+            @update:model-value="reset_planning()"
           />
         </div>
       </v-col>
@@ -76,7 +81,7 @@
         class="flex-grow-1 flex-shrink-0 py-0 my-0 ml-5"
       >
         <v-select
-          label="Ronde"
+          label="Template ronde"
           :items="mock_rounds"
           v-model="selected_round"
           item-value="name"
@@ -86,6 +91,7 @@
           variant="solo"
           prepend-inner-icon="mdi-transit-detour"
           required
+          @update:model-value="reset_planning()"
         ></v-select>
       </v-col>
       <v-col
@@ -122,47 +128,112 @@
       </v-col>
     </v-row>
 
-    <v-card
-      v-if="selected_round"
-      v-for="planned in planned_rounds"
-      class="py-0 my-5 mx-5"
-    >
-      <template v-if="selected_round.comments" v-slot:prepend>
-        <v-tooltip :text="`Ronde al ingepland op ${planned.date}`"
-          ><template v-slot:activator="{ props }">
-            <v-icon
-              v-bind="props"
-              color="error"
-              icon="mdi-alert"
-            ></v-icon></template
-        ></v-tooltip>
-      </template>
+    <!-- View selected rounds -->
+    <div v-if="selected_round">
+      <v-card
+        v-for="(planned, index) in planning"
+        v-bind:key="index"
+        class="py-0 my-5 mx-5"
+      >
+        <!-- Give user a warning with tooltip + icon -->
+        <!-- Use this when trying to plan a building in a round that's already planned in -->
+        <!-- TODO: currently this uses round.comments as warning, should be an API call -->
+        <template v-if="selected_round.comments" v-slot:prepend>
+          <v-tooltip :text="`Gebouw(en) ingepland op ${planned.date}`"
+            ><template v-slot:activator="{ props }">
+              <v-icon
+                v-bind="props"
+                color="error"
+                icon="mdi-alert"
+              ></v-icon></template
+          ></v-tooltip>
+        </template>
+
+        <!-- Icons for showing extra info about the building -->
+        <template v-else v-slot:prepend>
+          <v-icon color="green" icon="mdi-transit-detour"></v-icon>
+        </template>
+        <template v-slot:title>
+          <v-card-title>{{
+            selected_multiple ? planned.date : selected_round.name
+          }}</v-card-title> </template
+        ><template v-slot:subtitle>
+          <v-card-subtitle>{{
+            selected_multiple ? selected_round.name : ""
+          }}</v-card-subtitle>
+        </template>
+        <template v-slot:append>
+          <v-icon
+            v-if="planned.showinfo"
+            class="ml-2"
+            color="primary"
+            icon="mdi-pencil"
+            @click="planned.edit = !planned.edit"
+          ></v-icon>
+          <v-icon
+            class="ml-2"
+            :icon="planned.showinfo ? 'mdi-chevron-up' : 'mdi-chevron-down'"
+            @click="() => (planned.showinfo = !planned.showinfo)"
+          ></v-icon>
+          <v-icon
+            class="ml-2"
+            color="error"
+            icon="mdi-close"
+            @click="remove_from_planning(index)"
+          ></v-icon>
+        </template>
+
+        <!-- Show the expand, where users can quickly alter their rounds -->
+        <v-expand-transition>
+          <div v-show="planned.showinfo">
+            <v-divider></v-divider>
 
-      <template v-else v-slot:prepend>
-        <v-icon v-bind="props" color="green" icon="mdi-transit-detour"></v-icon>
-      </template>
-      <template v-slot:title>
-        <v-card-title>{{ selected_round.name }}</v-card-title> </template
-      ><template v-slot:subtitle>
-        <v-card-subtitle>{{
-          selected_multiple ? planned.date : ""
-        }}</v-card-subtitle>
-      </template>
-      <template v-slot:append>
-        <v-icon class="ml-2" color="error" icon="mdi-close"></v-icon>
-        <v-icon class="ml-2" color="primary" icon="mdi-pencil"></v-icon>
-        <v-icon
-          class="ml-2"
-          :icon="planned.showinfo ? 'mdi-chevron-up' : 'mdi-chevron-down'"
-        ></v-icon>
-      </template>
-    </v-card>
-    <v-card
-      v-else
-      prepend-icon="mdi-information"
-      title="Nog geen ronde geselecteerd"
-      variant="flat"
-    ></v-card>
+            <v-card
+              v-for="(building, bindex) in planned.round?.buildings"
+              v-bind:key="bindex"
+              class="ml-3 my-1"
+              variant="flat"
+            >
+              <!-- TODO: currently this uses building.comments as warning, should be an API call -->
+              <template v-if="building.comments" v-slot:prepend>
+                <v-tooltip :text="`Gebouw al ingepland op ${planned.date}`"
+                  ><template v-slot:activator="{ props }">
+                    <v-icon
+                      v-bind="props"
+                      color="error"
+                      icon="mdi-alert"
+                    ></v-icon></template
+                ></v-tooltip>
+              </template>
+
+              <template v-else v-slot:prepend>
+                <v-icon color="green" icon="mdi-office-building"></v-icon>
+              </template>
+              <template v-slot:title>
+                <v-card-title>{{ building.name }}</v-card-title> </template
+              ><template v-slot:subtitle>
+                <v-card-subtitle>{{ building.address }}</v-card-subtitle>
+              </template>
+              <template v-slot:append
+                ><v-icon
+                  v-if="planned.edit"
+                  icon="mdi-close"
+                  color="error"
+                  @click="planned.round?.buildings.splice(bindex, 1)"
+                ></v-icon
+              ></template>
+            </v-card>
+          </div>
+        </v-expand-transition>
+      </v-card>
+    </div>
+    <div v-else>
+      <v-card
+        prepend-icon="mdi-information"
+        title="Nog geen ronde geselecteerd"
+        variant="flat"
+      ></v-card>
+    </div>
     <v-card-actions class="d-flex">
       <v-spacer></v-spacer>
       <!-- TODO fill in correct link, router pushback to previous page or reload this one? -->
@@ -185,8 +256,9 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, ComputedRef } from "vue";
+import { ref } from "vue";
 import Round from "@/components/models/Round";
+import RoundPlanning from "@/components/models/RoundPlanning";
 
 const selected_multiple = ref<boolean>(false);
 const selected_student = ref<string>("");
@@ -197,6 +269,11 @@ const selected_end_day = ref<string>("");
 const selected_time = ref<string>("");
 const selected_round = ref<Round | null>(null);
 
+/**
+ * Gives all the dates in a range
+ * @param start startdate in string format
+ * @param end enddate in string format
+ */
 function getDateRange(start: string, end: string): string[] {
   if (!end) {
     return [start];
@@ -213,30 +290,30 @@ function getDateRange(start: string, end: string): string[] {
   }
 }
 
-interface RoutePlanning {
-  date: string;
-  round: Round | null;
-  showinfo: boolean;
+// List gets updated when the user updates input field
+let planning = ref<RoundPlanning[]>([]);
+
+function remove_from_planning(index: number) {
+  planning.value.splice(index, 1);
 }
 
-const planned_rounds: ComputedRef<RoutePlanning[]> = computed(() => {
-  let date_round: RoutePlanning[] = [];
+/**
+ * Would be better if this was a computed property
+ * The extra fields in RoutePlanning dont allow for this
+ */
+function reset_planning() {
+  planning.value = [];
   for (let curr_date of getDateRange(
     selected_start_day.value,
     selected_end_day.value,
   )) {
-    date_round.push({
+    planning.value.push({
       date: curr_date,
       round: selected_round.value,
       showinfo: false,
+      edit: false,
     });
   }
-  return date_round;
-});
-
-function logme(planned: RoutePlanning) {
-  planned.showinfo = !planned.showinfo;
-  console.log("hssssssss");
 }
 
 const mock_students = ref<string[]>([
@@ -247,7 +324,7 @@ const mock_students = ref<string[]>([
   "Ashley",
 ]);
 
-const mock_rounds: Round[] = [
+const mock_rounds = ref<Round[]>([
   {
     name: "Grote Markt",
     start: "13:30",
@@ -386,5 +463,5 @@ const mock_rounds: Round[] = [
       },
     ],
   },
-];
+]);
 </script>

From 86e2d8b10ebf88959775cfdfc523a228d408d3c2 Mon Sep 17 00:00:00 2001
From: arne <vanheule.arne@ugent.be>
Date: Sun, 2 Apr 2023 18:45:13 +0200
Subject: [PATCH 08/21] chore: lint

---
 web/src/views/RoundPlanner.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/web/src/views/RoundPlanner.vue b/web/src/views/RoundPlanner.vue
index e4e11fd96..c68a2b0f2 100644
--- a/web/src/views/RoundPlanner.vue
+++ b/web/src/views/RoundPlanner.vue
@@ -9,13 +9,19 @@
           () => {
             selected_multiple = false;
             selected_end_day = '';
+            reset_planning();
           }
         "
         :active="!selected_multiple"
         >Enkel</v-btn
       >
       <v-btn
-        @click="() => (selected_multiple = true)"
+        @click="
+          () => {
+            selected_multiple = true;
+            reset_planning();
+          }
+        "
         :active="selected_multiple"
         >Meerdere</v-btn
       >
@@ -159,7 +165,7 @@
           }}</v-card-title> </template
         ><template v-slot:subtitle>
           <v-card-subtitle>{{
-            selected_multiple ? selected_round.name : ""
+            selected_multiple ? selected_round.name : planned.date
           }}</v-card-subtitle>
         </template>
         <template v-slot:append>

From ea4a851318d69d1620a6be273a4b9f12aa1ed1a4 Mon Sep 17 00:00:00 2001
From: arne <vanheule.arne@ugent.be>
Date: Sun, 2 Apr 2023 18:53:59 +0200
Subject: [PATCH 09/21] chore: linter

---
 web/src/views/RoundPlanner.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/web/src/views/RoundPlanner.vue b/web/src/views/RoundPlanner.vue
index c68a2b0f2..ad0ab470b 100644
--- a/web/src/views/RoundPlanner.vue
+++ b/web/src/views/RoundPlanner.vue
@@ -143,8 +143,8 @@
       >
         <!-- Give user a warning with tooltip + icon -->
         <!-- Use this when trying to plan a building in a round that's already planned in -->
-        <!-- TODO: currently this uses round.comments as warning, should be an API call -->
-        <template v-if="selected_round.comments" v-slot:prepend>
+        <!-- TODO: currently this uses substring as warning for show, should be an API call -->
+        <template v-if="selected_round.name.includes('rote')" v-slot:prepend>
           <v-tooltip :text="`Gebouw(en) ingepland op ${planned.date}`"
             ><template v-slot:activator="{ props }">
               <v-icon
@@ -330,7 +330,7 @@ const mock_students = ref<string[]>([
   "Ashley",
 ]);
 
-const mock_rounds = ref<Round[]>([
+const mock_rounds = [
   {
     name: "Grote Markt",
     start: "13:30",
@@ -469,5 +469,5 @@ const mock_rounds = ref<Round[]>([
       },
     ],
   },
-]);
+];
 </script>

From 87330ab5c0c83b7c0f2bcc3d1f4b48cc156e6446 Mon Sep 17 00:00:00 2001
From: arne <arne.vanheule@ugent.be>
Date: Thu, 13 Apr 2023 16:35:08 +0200
Subject: [PATCH 10/21] feat: roundmaker in style with webpage"

---
 web/src/components/cards/BuildingInfoCard.vue |  19 +++
 .../components/cards/BuildingSelectCard.vue   |  71 +++++++++
 web/src/views/round/RoundMaker.vue            | 148 +++++++-----------
 3 files changed, 148 insertions(+), 90 deletions(-)
 create mode 100644 web/src/components/cards/BuildingInfoCard.vue
 create mode 100644 web/src/components/cards/BuildingSelectCard.vue

diff --git a/web/src/components/cards/BuildingInfoCard.vue b/web/src/components/cards/BuildingInfoCard.vue
new file mode 100644
index 000000000..51978d7b2
--- /dev/null
+++ b/web/src/components/cards/BuildingInfoCard.vue
@@ -0,0 +1,19 @@
+<template>
+  <BorderCard @click="$emit('clicked')" class="my-2">
+    <template v-slot:prepend>
+      <v-icon icon="mdi-office-building"></v-icon>
+    </template>
+    <template v-slot:title>{{ name }}</template
+    ><template v-slot:subtitle>{{ address }}</template>
+  </BorderCard>
+</template>
+
+<script setup lang="ts">
+import BorderCard from "@/layouts/CardLayout.vue";
+
+defineProps({
+  name: String,
+  address: String,
+  id: String,
+});
+</script>
diff --git a/web/src/components/cards/BuildingSelectCard.vue b/web/src/components/cards/BuildingSelectCard.vue
new file mode 100644
index 000000000..72023ecf5
--- /dev/null
+++ b/web/src/components/cards/BuildingSelectCard.vue
@@ -0,0 +1,71 @@
+<template>
+  <BorderCard class="my-2">
+    <template v-slot:prepend>
+      <v-icon icon="mdi-office-building"></v-icon>
+    </template>
+    <template v-slot:title>{{ name }}</template
+    ><template v-slot:subtitle>{{ address }}</template>
+    <template v-slot:append>
+      <v-icon
+        @click="$emit('up')"
+        class="mx-1"
+        color="primary"
+        icon="mdi-chevron-up"
+      />
+      <v-icon
+        @click="$emit('down')"
+        class="mx-1"
+        color="primary"
+        icon="mdi-chevron-down"
+      />
+      <v-icon
+        @click="$emit('remove')"
+        class="mx-1"
+        color="error"
+        icon="mdi-close"
+      />
+    </template>
+    <v-expand-transition>
+    <v-table v-show="garbageinfo" class="mx-2 my-2" density="compact">
+      <thead>
+        <tr>
+          <th
+            v-for="day in ['MA', 'DI', 'WO', 'DO', 'VR', 'ZA', 'ZO']"
+            class="text-center"
+          >
+            {{ day }}
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="item in ['REST', 'GFT', 'PMD', 'PAPIER']" :key="item">
+          <td class="text-center" v-for="afval in 7">
+            <v-chip v-if="afval%2 == 0">{{ item }}</v-chip>
+          </td>
+        </tr>
+      </tbody>
+    </v-table>
+    </v-expand-transition>
+  </BorderCard>
+</template>
+
+<script setup lang="ts">
+import BorderCard from "@/layouts/CardLayout.vue";
+import GarbageCard from "@/components/cards/GarbageCard.vue";
+
+const props = defineProps({
+  name: String,
+  address: String,
+  id: String,
+  garbageinfo : {
+    type: Boolean, 
+    default: true}
+});
+</script>
+
+<style scoped>
+td {
+  border-right: solid 1px rgb(216, 216, 216);
+  border-left: solid 1px rgb(216, 216, 216);
+}
+</style>
diff --git a/web/src/views/round/RoundMaker.vue b/web/src/views/round/RoundMaker.vue
index 480d4cbd2..9bb73a104 100644
--- a/web/src/views/round/RoundMaker.vue
+++ b/web/src/views/round/RoundMaker.vue
@@ -3,104 +3,72 @@
     <v-col
       cols="1"
       style="min-width: 100px; max-width: 100%"
-      class="flex-grow-1 flex-shrink-0 py-0 my-0 ml-5"
-      ><v-card width="100%">
-        <!-- Header for the card title -->
-        <!-- TODO: remove the mockdata from this part -->
-        <v-row class="py-1 my-1">
-          <v-col
-            cols="1"
-            style="min-width: 100px; max-width: 100%"
-            class="flex-grow-1 flex-shrink-0 py-0 my-0 ml-5"
-            ><v-text-field label="Template naam" variant="solo" /></v-col
-          ><v-col
-            cols="3"
-            style="min-width: 100px; max-width: 100%"
-            class="flex-grow-0 flex-shrink-0 py-0 my-0 ml-5"
-            ><v-btn height="55px">Aanmaken</v-btn></v-col
-          >
-        </v-row>
-        <v-divider></v-divider>
-        <v-layout>
-          <v-list width="100%">
-            <v-card
-              v-for="(building, i) in round"
-              :key="i"
-              :value="building"
-              fluid
-              variant="flat"
-            >
-              <template v-slot:prepend>
-                <v-icon
-                  icon="mdi-chevron-up"
-                  @click="moveBuildingUp(i)"
-                ></v-icon>
-                <v-icon
-                  icon="mdi-chevron-down"
-                  @click="moveBuildingDown(i)"
-                ></v-icon>
-              </template>
-              <template v-slot:title>
-                <v-card-title>{{ building.name }}</v-card-title> </template
-              ><template v-slot:subtitle>
-                <v-card-subtitle>{{ building.adress }}</v-card-subtitle>
-              </template>
-              <template v-slot:append>
-                <v-icon
-                  icon="mdi-close"
-                  @click="deleteBuildingFromRound(i, building)"
-                ></v-icon>
-              </template>
-            </v-card>
-          </v-list>
-        </v-layout> </v-card
-    ></v-col>
+      class="flex-grow-1 flex-shrink-0 py-0 my-0"
+      ><border-card
+        class="mb-4"
+        title="Ronde aanmaken"
+        subtitle="De ronde zal in de volgorde van onderstaande lijst opgeslaan worden"
+      >
+        <template v-slot:append
+          ><v-switch
+            color="primary"
+            v-model="garbageinfo"
+            label="Toon afvalkalender"
+          ></v-switch
+        ></template>
+        <v-text-field class="ml-3 mr-5" label="Naam ronde" variant="solo" />
+        <v-card-actions class="d-flex align-center"
+          ><v-spacer></v-spacer
+          ><v-btn class="ml-3" prepend-icon="mdi-check"
+            >Ronde aanmaken</v-btn
+          ></v-card-actions
+        >
+      </border-card>
+      <building-select-card
+        v-for="(building, i) in round"
+        @remove="deleteBuildingFromRound(i, building)"
+        @up="moveBuildingUp(i)"
+        @down="moveBuildingDown(i)"
+        :name="building.name"
+        :address="building.adress"
+        :garbageinfo="garbageinfo"
+      ></building-select-card>
+    </v-col>
     <v-col
       cols="2"
       style="min-width: 100px; max-width: 100%"
-      class="flex-grow-1 flex-shrink-0 py-0 my-0 ml-5"
-      ><v-card width="100%">
-        <v-card-title>
-          <v-text-field
-            label="Zoeken op naam van bestaande gebouwen"
-            variant="solo"
-            v-model="searchquery"
-          ></v-text-field>
-        </v-card-title>
-        <v-divider></v-divider>
-        <v-layout>
-          <v-list width="100%">
-            <v-card
-              v-for="building in filterlist()"
-              :key="building.listid"
-              :value="building"
-              fluid
-              variant="flat"
-            >
-              <template v-slot:prepend>
-                <!-- Button for manipulating the building list -->
-                <v-icon
-                  icon="mdi-arrow-left-bold"
-                  @click="
-                    deleteBuildingFromAvailable(building.listid, building)
-                  "
-                ></v-icon>
-              </template>
-              <template v-slot:title>
-                <v-card-title>{{ building.name }}</v-card-title> </template
-              ><template v-slot:subtitle>
-                <v-card-subtitle>{{ building.adress }}</v-card-subtitle>
-              </template>
-            </v-card>
-          </v-list>
-        </v-layout>
-      </v-card></v-col
-    >
+      class="flex-grow-1 flex-shrink-0 py-0 ml-5"
+      ><border-card
+        title="Zoeken in gebouwen"
+        subtitle="Klik op een gebouw om deze toe te voegen aan de lijst"
+        class="mb-4 pt-3"
+        ><v-text-field
+          class="ml-3 mr-5 mt-3"
+          label="Naam van gebouw"
+          v-model="searchquery"
+          variant="solo"
+        />
+      </border-card>
+
+      <building-info-card
+        v-for="building in filterlist()"
+        :key="building.listid"
+        :name="building.name"
+        :address="building.adress"
+        @clicked="deleteBuildingFromAvailable(building.listid, building)"
+      >
+      </building-info-card>
+    </v-col>
   </v-row>
 </template>
 
 <script lang="ts" setup>
 import { reactive, ref, Ref } from "vue";
+import BorderCard from "@/layouts/CardLayout.vue";
+import BuildingSelectCard from "@/components/cards/BuildingSelectCard.vue";
+import BuildingInfoCard from "@/components/cards/BuildingInfoCard.vue";
+
+const garbageinfo: Ref<boolean> = ref(true);
 
 // The query that will be used to filter all available buildings
 const searchquery: Ref<string> = ref("");

From 0cfe86bfb1f02d2b341bafb8f6db414067444c24 Mon Sep 17 00:00:00 2001
From: arne <arne.vanheule@ugent.be>
Date: Thu, 13 Apr 2023 19:02:52 +0200
Subject: [PATCH 11/21] feat: generalised feeling

---
 api/postman.json                     | 3134 ++++++++++++--------------
 web/src/views/round/RoundPlanner.vue |  432 +---
 2 files changed, 1588 insertions(+), 1978 deletions(-)

diff --git a/api/postman.json b/api/postman.json
index baf064efd..3b9cc9760 100644
--- a/api/postman.json
+++ b/api/postman.json
@@ -1,1664 +1,1472 @@
 {
-	"info": {
-		"_postman_id": "dcd8e2d2-dcc0-4bd2-8ab6-609f53b4bc48",
-		"name": "API",
-		"schema": "https://schema.getpostman.com/json/collection/v2.1.0/collection.json",
-		"_exporter_id": "16524797"
-	},
-	"item": [
-		{
-			"name": "Action",
-			"item": [
-				{
-					"name": "Retrieve all actions",
-					"request": {
-						"method": "GET",
-						"header": [],
-						"url": {
-							"raw": "{{SERVER}}/action",
-							"host": [
-								"{{SERVER}}"
-							],
-							"path": [
-								"action"
-							],
-							"query": [
-								{
-									"key": "take",
-									"value": "",
-									"description": "Integer\nMaximum number of results",
-									"disabled": true
-								},
-								{
-									"key": "skip",
-									"value": "",
-									"description": "Integer\nDisregard the first `n` results",
-									"disabled": true
-								},
-								{
-									"key": "description",
-									"value": "",
-									"description": "String\nSearching according a substring of the description",
-									"disabled": true
-								},
-								{
-									"key": "sort",
-									"value": "",
-									"description": "CSV\nSort data based on the specified fields. Must be accompanied by an equal number of values in the `ord` field. \n\nExample: `sort=user,birthday`",
-									"disabled": true
-								},
-								{
-									"key": "ord",
-									"value": "",
-									"description": "CSV\nWhich way to order the sorted data. Must be accompanied by an equal number of values in the `sort` field. Values must be either `asc` or `desc`.\n\nExample: `ord=asc,desc`",
-									"disabled": true
-								}
-							]
-						}
-					},
-					"response": []
-				},
-				{
-					"name": "Retrieve action by id",
-					"request": {
-						"method": "GET",
-						"header": [],
-						"url": {
-							"raw": "{{SERVER}}/action/:id",
-							"host": [
-								"{{SERVER}}"
-							],
-							"path": [
-								"action",
-								":id"
-							],
-							"variable": [
-								{
-									"key": "id",
-									"value": null,
-									"description": "Integer\nIdentifier of the action"
-								}
-							]
-						}
-					},
-					"response": []
-				},
-				{
-					"name": "Update action by id",
-					"request": {
-						"method": "PATCH",
-						"header": [],
-						"body": {
-							"mode": "raw",
-							"raw": "{\r\n    \"description\": \"New description\"\r\n}",
-							"options": {
-								"raw": {
-									"language": "json"
-								}
-							}
-						},
-						"url": {
-							"raw": "{{SERVER}}/action/:id",
-							"host": [
-								"{{SERVER}}"
-							],
-							"path": [
-								"action",
-								":id"
-							],
-							"variable": [
-								{
-									"key": "id",
-									"value": null,
-									"description": "Integer\nIdentification of the action\n"
-								}
-							]
-						}
-					},
-					"response": []
-				},
-				{
-					"name": "Remove action by id",
-					"request": {
-						"method": "DELETE",
-						"header": [],
-						"url": {
-							"raw": "{{SERVER}}/action/:id",
-							"host": [
-								"{{SERVER}}"
-							],
-							"path": [
-								"action",
-								":id"
-							],
-							"variable": [
-								{
-									"key": "id",
-									"value": null,
-									"description": "Integer\nIdentification of the action\n"
-								}
-							]
-						}
-					},
-					"response": []
-				}
-			]
-		},
-		{
-			"name": "Building",
-			"item": [
-				{
-					"name": "Retrieve all buildings",
-					"event": [
-						{
-							"listen": "prerequest",
-							"script": {
-								"exec": [
-									"pm.sendRequest(\"https://postman-echo.com/get\", function (err, response) {",
-									"    console.log(response.json());",
-									"});"
-								],
-								"type": "text/javascript"
-							}
-						}
-					],
-					"request": {
-						"method": "GET",
-						"header": [],
-						"url": {
-							"raw": "{{SERVER}}/building",
-							"host": [
-								"{{SERVER}}"
-							],
-							"path": [
-								"building"
-							],
-							"query": [
-								{
-									"key": "take",
-									"value": "",
-									"description": "Integer\nMaximum number of results",
-									"disabled": true
-								},
-								{
-									"key": "skip",
-									"value": "",
-									"description": "Integer\nDisregard the first `n` results",
-									"disabled": true
-								},
-								{
-									"key": "name",
-									"value": "",
-									"description": "String\nFilter on the name of the building.",
-									"disabled": true
-								},
-								{
-									"key": "ivago_id",
-									"value": "",
-									"description": "String\nSpecify the Ivago identifier",
-									"disabled": true
-								},
-								{
-									"key": "syndicus_id",
-									"value": "",
-									"description": "Number\nThe identifier of the syndicus of this building.",
-									"disabled": true
-								},
-								{
-									"key": "deleted",
-									"value": "",
-									"description": "Boolean\nShow deleted buildings. Only admins are allowed to use this option.",
-									"disabled": true
-								},
-								{
-									"key": "sort",
-									"value": "",
-									"description": "CSV\nSort data based on the specified fields. Must be accompanied by an equal number of values in the `ord` field. \n\nExample: `sort=user,birthday`",
-									"disabled": true
-								},
-								{
-									"key": "ord",
-									"value": "",
-									"description": "CSV\nWhich way to order the sorted data. Must be accompanied by an equal number of values in the `sort` field. Values must be either `asc` or `desc`.\n\nExample: `ord=asc,desc`",
-									"disabled": true
-								}
-							]
-						}
-					},
-					"response": []
-				},
-				{
-					"name": "Retrieve building by id",
-					"request": {
-						"method": "GET",
-						"header": [],
-						"url": {
-							"raw": "{{SERVER}}/building/:id",
-							"host": [
-								"{{SERVER}}"
-							],
-							"path": [
-								"building",
-								":id"
-							],
-							"variable": [
-								{
-									"key": "id",
-									"value": "52",
-									"description": "Number\nThe identifier of the resource"
-								}
-							]
-						}
-					},
-					"response": []
-				},
-				{
-					"name": "Update building by id",
-					"request": {
-						"method": "PATCH",
-						"header": [],
-						"body": {
-							"mode": "raw",
-							"raw": "{\n    \"name\": \"UGent\"\n}",
-							"options": {
-								"raw": {
-									"language": "json"
-								}
-							}
-						},
-						"url": {
-							"raw": "{{SERVER}}/building/:id",
-							"host": [
-								"{{SERVER}}"
-							],
-							"path": [
-								"building",
-								":id"
-							],
-							"variable": [
-								{
-									"key": "id",
-									"value": "1"
-								}
-							]
-						}
-					},
-					"response": []
-				},
-				{
-					"name": "Remove building by id",
-					"request": {
-						"method": "DELETE",
-						"header": [],
-						"body": {
-							"mode": "raw",
-							"raw": "",
-							"options": {
-								"raw": {
-									"language": "json"
-								}
-							}
-						},
-						"url": {
-							"raw": "{{SERVER}}/building/:id",
-							"host": [
-								"{{SERVER}}"
-							],
-							"path": [
-								"building",
-								":id"
-							],
-							"variable": [
-								{
-									"key": "id",
-									"value": "1"
-								}
-							]
-						}
-					},
-					"response": []
-				}
-			]
-		},
-		{
-			"name": "Schedule",
-			"item": [
-				{
-					"name": "Retrieve all schedule items",
-					"request": {
-						"method": "GET",
-						"header": [],
-						"url": {
-							"raw": "{{SERVER}}/schedule?take=&skip=",
-							"host": [
-								"{{SERVER}}"
-							],
-							"path": [
-								"schedule"
-							],
-							"query": [
-								{
-									"key": "take",
-									"value": "",
-									"description": "Integer\nMaximum number of results"
-								},
-								{
-									"key": "skip",
-									"value": "",
-									"description": "Integer\nDisregard the first `n` results"
-								},
-								{
-									"key": "user_id",
-									"value": "",
-									"description": "Integer\nThe identifier of the user who is responsible for the scheduled round.",
-									"disabled": true
-								},
-								{
-									"key": "round_id",
-									"value": "",
-									"description": "Integer\nRetrieve the schedule for a specific route.",
-									"disabled": true
-								},
-								{
-									"key": "user_name",
-									"value": "",
-									"description": "String\nSearch routes based on the name of the person responsible.",
-									"disabled": true
-								},
-								{
-									"key": "round",
-									"value": "",
-									"description": "String\nFilter by the name of the round.",
-									"disabled": true
-								},
-								{
-									"key": "before",
-									"value": "",
-									"description": "ISO-8601 Datetime\nThe schedule takes place before the given date.",
-									"disabled": true
-								},
-								{
-									"key": "after",
-									"value": "",
-									"description": "ISO-8601 Datetime\nThe schedule takes place after the given date.",
-									"disabled": true
-								},
-								{
-									"key": "deleted",
-									"value": "",
-									"description": "Boolean\nShow deleted buildings. Only admins are allowed to use this option.",
-									"disabled": true
-								},
-								{
-									"key": "sort",
-									"value": "",
-									"description": "CSV\nSort data based on the specified fields. Must be accompanied by an equal number of values in the `ord` field. \n\nExample: `sort=user,birthday`",
-									"disabled": true
-								},
-								{
-									"key": "ord",
-									"value": "",
-									"description": "CSV\nWhich way to order the sorted data. Must be accompanied by an equal number of values in the `sort` field. Values must be either `asc` or `desc`.\n\nExample: `ord=asc,desc`",
-									"disabled": true
-								}
-							]
-						}
-					},
-					"response": []
-				},
-				{
-					"name": "Retrieve schedule item by id",
-					"request": {
-						"method": "GET",
-						"header": [],
-						"url": {
-							"raw": "{{SERVER}}/schedule/:id",
-							"host": [
-								"{{SERVER}}"
-							],
-							"path": [
-								"schedule",
-								":id"
-							],
-							"variable": [
-								{
-									"key": "id",
-									"value": "1"
-								}
-							]
-						}
-					},
-					"response": []
-				},
-				{
-					"name": "Update schedule by id",
-					"request": {
-						"method": "PATCH",
-						"header": [],
-						"body": {
-							"mode": "raw",
-							"raw": "{\n    \"day\": \"2023-01-01T00:00:00.000Z\"\n}",
-							"options": {
-								"raw": {
-									"language": "json"
-								}
-							}
-						},
-						"url": {
-							"raw": "{{SERVER}}/schedule/:id",
-							"host": [
-								"{{SERVER}}"
-							],
-							"path": [
-								"schedule",
-								":id"
-							],
-							"variable": [
-								{
-									"key": "id",
-									"value": "1"
-								}
-							]
-						}
-					},
-					"response": []
-				},
-				{
-					"name": "Remove schedule by id",
-					"request": {
-						"method": "DELETE",
-						"header": [],
-						"body": {
-							"mode": "raw",
-							"raw": "{\r\n    \"hardDelete\": \"false\"\r\n}",
-							"options": {
-								"raw": {
-									"language": "json"
-								}
-							}
-						},
-						"url": {
-							"raw": "{{SERVER}}/schedule/:id",
-							"host": [
-								"{{SERVER}}"
-							],
-							"path": [
-								"schedule",
-								":id"
-							],
-							"variable": [
-								{
-									"key": "id",
-									"value": "1"
-								}
-							]
-						}
-					},
-					"response": []
-				}
-			]
-		},
-		{
-			"name": "Garbage",
-			"item": [
-				{
-					"name": "Retrieve all garbage",
-					"request": {
-						"method": "GET",
-						"header": [],
-						"url": {
-							"raw": "{{SERVER}}/garbage",
-							"host": [
-								"{{SERVER}}"
-							],
-							"path": [
-								"garbage"
-							],
-							"query": [
-								{
-									"key": "take",
-									"value": "",
-									"description": "Integer\nMaximum number of results",
-									"disabled": true
-								},
-								{
-									"key": "skip",
-									"value": "",
-									"description": "Integer\nDisregard the first `n` results",
-									"disabled": true
-								},
-								{
-									"key": "before",
-									"value": "",
-									"description": "ISO-8601 Datetime\nGarbage needs to have a pickup-time before the given date.",
-									"disabled": true
-								},
-								{
-									"key": "after",
-									"value": "",
-									"description": "ISO-8601 Datetime\nGarbage needs to heva a pickup time after the given date.\n",
-									"disabled": true
-								},
-								{
-									"key": "building_id",
-									"value": "",
-									"description": "Integer\nGet the garbage from a specific building.",
-									"disabled": true
-								},
-								{
-									"key": "action_id",
-									"value": "",
-									"description": "Integer\nGet all garbage with a specific action.",
-									"disabled": true
-								},
-								{
-									"key": "syndicus_id",
-									"value": "",
-									"description": "Integer\nGet all garbage from the buildings of a specific syndicus.",
-									"disabled": true
-								},
-								{
-									"key": "round_id",
-									"value": "",
-									"description": "Integer\nGet all garbage from a specific round.",
-									"disabled": true
-								},
-								{
-									"key": "sort",
-									"value": "",
-									"description": "CSV\nSort data based on the specified fields. Must be accompanied by an equal number of values in the `ord` field. \n\nExample: `sort=user,birthday`",
-									"disabled": true
-								},
-								{
-									"key": "ord",
-									"value": "",
-									"description": "CSV\nWhich way to order the sorted data. Must be accompanied by an equal number of values in the `sort` field. Values must be either `asc` or `desc`.\n\nExample: `ord=asc,desc`",
-									"disabled": true
-								}
-							]
-						}
-					},
-					"response": []
-				},
-				{
-					"name": "Retrieve garbage by id",
-					"request": {
-						"method": "GET",
-						"header": [],
-						"url": {
-							"raw": "{{SERVER}}/garbage/:id",
-							"host": [
-								"{{SERVER}}"
-							],
-							"path": [
-								"garbage",
-								":id"
-							],
-							"variable": [
-								{
-									"key": "id",
-									"value": null,
-									"description": "Integer\nIdentifier of the garbage."
-								}
-							]
-						}
-					},
-					"response": []
-				},
-				{
-					"name": "Update garbage by id",
-					"request": {
-						"method": "PATCH",
-						"header": [],
-						"body": {
-							"mode": "raw",
-							"raw": "{\r\n    \"pickup_time\": \"2023-01-01T00:00:00.000Z\"\r\n}",
-							"options": {
-								"raw": {
-									"language": "json"
-								}
-							}
-						},
-						"url": {
-							"raw": "{{SERVER}}/garbage/:id",
-							"host": [
-								"{{SERVER}}"
-							],
-							"path": [
-								"garbage",
-								":id"
-							],
-							"variable": [
-								{
-									"key": "id",
-									"value": null,
-									"description": "Integer\nIdentifier of the garbage."
-								}
-							]
-						}
-					},
-					"response": []
-				},
-				{
-					"name": "Remove garbage by id",
-					"request": {
-						"method": "DELETE",
-						"header": [],
-						"url": {
-							"raw": "{{SERVER}}/garbage/:id",
-							"host": [
-								"{{SERVER}}"
-							],
-							"path": [
-								"garbage",
-								":id"
-							],
-							"variable": [
-								{
-									"key": "id",
-									"value": null,
-									"description": "Integer\nIdentifier of the garbage."
-								}
-							]
-						}
-					},
-					"response": []
-				}
-			]
-		},
-		{
-			"name": "Progress",
-			"item": [
-				{
-					"name": "Retrieve all progresses",
-					"request": {
-						"method": "GET",
-						"header": [],
-						"url": {
-							"raw": "{{SERVER}}/progress",
-							"host": [
-								"{{SERVER}}"
-							],
-							"path": [
-								"progress"
-							],
-							"query": [
-								{
-									"key": "take",
-									"value": "",
-									"description": "Integer\nMaximum number of results",
-									"disabled": true
-								},
-								{
-									"key": "skip",
-									"value": "",
-									"description": "Integer\nDisregard the first `n` results",
-									"disabled": true
-								},
-								{
-									"key": "deleted",
-									"value": "",
-									"description": "Boolean\nShow deleted buildings. Only admins are allowed to use this option.",
-									"disabled": true
-								},
-								{
-									"key": "report",
-									"value": "",
-									"description": "String\nOnly show the progresses where the report contains the given substring.",
-									"disabled": true
-								},
-								{
-									"key": "arrived_before",
-									"value": "",
-									"description": "ISO-8601 Datetime\nThe time of arrival must happen before the given time.",
-									"disabled": true
-								},
-								{
-									"key": "arrived_after",
-									"value": "",
-									"description": "ISO-8601 Datetime\nThe time of arrival must happen after the given time.",
-									"disabled": true
-								},
-								{
-									"key": "left_before",
-									"value": "",
-									"description": "ISO-8601 Datetime\nThe time of departure must happen before the given time.",
-									"disabled": true
-								},
-								{
-									"key": "left_after",
-									"value": "",
-									"description": "ISO-8601 Datetime\nThe time of departure must happen after the given time.",
-									"disabled": true
-								},
-								{
-									"key": "building",
-									"value": "",
-									"description": "Integer\nFilter on the identifier of a building.",
-									"disabled": true
-								},
-								{
-									"key": "schedule",
-									"value": "",
-									"description": "Integer\nFilter on the identifier of a schedule.",
-									"disabled": true
-								},
-								{
-									"key": "round",
-									"value": "",
-									"description": "Integer\nFilter on the identifier of a round.",
-									"disabled": true
-								},
-								{
-									"key": "user",
-									"value": "",
-									"description": "Integer\nFilter on the identifier of a user.",
-									"disabled": true
-								},
-								{
-									"key": "sort",
-									"value": "",
-									"description": "CSV\nSort data based on the specified fields. Must be accompanied by an equal number of values in the `ord` field. \n\nExample: `sort=user,birthday`",
-									"disabled": true
-								},
-								{
-									"key": "ord",
-									"value": "",
-									"description": "CSV\nWhich way to order the sorted data. Must be accompanied by an equal number of values in the `sort` field. Values must be either `asc` or `desc`.\n\nExample: `ord=asc,desc`",
-									"disabled": true
-								}
-							]
-						}
-					},
-					"response": []
-				},
-				{
-					"name": "Retrieve progress by id",
-					"request": {
-						"method": "GET",
-						"header": [],
-						"url": {
-							"raw": "{{SERVER}}/progress/:id",
-							"host": [
-								"{{SERVER}}"
-							],
-							"path": [
-								"progress",
-								":id"
-							],
-							"variable": [
-								{
-									"key": "id",
-									"value": null,
-									"description": "Integer\nIdentifier of the progress."
-								}
-							]
-						}
-					},
-					"response": []
-				},
-				{
-					"name": "Update progress by id",
-					"request": {
-						"method": "PATCH",
-						"header": [],
-						"body": {
-							"mode": "raw",
-							"raw": "{\r\n    \"report\": \"Updated report\"\r\n}",
-							"options": {
-								"raw": {
-									"language": "json"
-								}
-							}
-						},
-						"url": {
-							"raw": "{{SERVER}}/progress/:id",
-							"host": [
-								"{{SERVER}}"
-							],
-							"path": [
-								"progress",
-								":id"
-							],
-							"variable": [
-								{
-									"key": "id",
-									"value": null,
-									"description": "Integer\nIdentifier of the progress."
-								}
-							]
-						}
-					},
-					"response": []
-				},
-				{
-					"name": "Remove progress by id",
-					"request": {
-						"method": "DELETE",
-						"header": [],
-						"url": {
-							"raw": "{{SERVER}}/progress/:id",
-							"host": [
-								"{{SERVER}}"
-							],
-							"path": [
-								"progress",
-								":id"
-							],
-							"variable": [
-								{
-									"key": "id",
-									"value": null,
-									"description": "Integer\nIdentifier of the progress."
-								}
-							]
-						}
-					},
-					"response": []
-				}
-			]
-		},
-		{
-			"name": "Region",
-			"item": [
-				{
-					"name": "Retrieve all regions",
-					"request": {
-						"method": "GET",
-						"header": [],
-						"url": {
-							"raw": "{{SERVER}}/region",
-							"host": [
-								"{{SERVER}}"
-							],
-							"path": [
-								"region"
-							],
-							"query": [
-								{
-									"key": "take",
-									"value": "",
-									"description": "Integer\nMaximum number of results",
-									"disabled": true
-								},
-								{
-									"key": "skip",
-									"value": "",
-									"description": "Integer\nDisregard the first `n` results",
-									"disabled": true
-								},
-								{
-									"key": "id",
-									"value": "",
-									"description": "Integer\nFilter by identifier of the region.",
-									"disabled": true
-								},
-								{
-									"key": "name",
-									"value": "",
-									"description": "String\nFilter by the name of the region.",
-									"disabled": true
-								},
-								{
-									"key": "user_id",
-									"value": "",
-									"description": "Integer\nFilter by the users (their id's) associated with the region.",
-									"disabled": true
-								},
-								{
-									"key": "sort",
-									"value": "",
-									"description": "CSV\nSort data based on the specified fields. Must be accompanied by an equal number of values in the `ord` field. \n\nExample: `sort=user,birthday`",
-									"disabled": true
-								},
-								{
-									"key": "ord",
-									"value": "",
-									"description": "CSV\nWhich way to order the sorted data. Must be accompanied by an equal number of values in the `sort` field. Values must be either `asc` or `desc`.\n\nExample: `ord=asc,desc`",
-									"disabled": true
-								}
-							]
-						}
-					},
-					"response": []
-				},
-				{
-					"name": "Retrieve region by id",
-					"request": {
-						"method": "GET",
-						"header": [],
-						"url": {
-							"raw": "{{SERVER}}/region/:id",
-							"host": [
-								"{{SERVER}}"
-							],
-							"path": [
-								"region",
-								":id"
-							],
-							"variable": [
-								{
-									"key": "id",
-									"value": "",
-									"description": "Integer\nIdentifier of the region."
-								}
-							]
-						}
-					},
-					"response": []
-				},
-				{
-					"name": "Update region by id",
-					"request": {
-						"method": "PATCH",
-						"header": [],
-						"body": {
-							"mode": "raw",
-							"raw": "{\r\n    \"name\": \"Gent\"\r\n}",
-							"options": {
-								"raw": {
-									"language": "json"
-								}
-							}
-						},
-						"url": {
-							"raw": "{{SERVER}}/region/:id",
-							"host": [
-								"{{SERVER}}"
-							],
-							"path": [
-								"region",
-								":id"
-							],
-							"variable": [
-								{
-									"key": "id",
-									"value": "",
-									"description": "Integer\nIdentifier of the region."
-								}
-							]
-						}
-					},
-					"response": []
-				},
-				{
-					"name": "Remove region by id",
-					"request": {
-						"method": "DELETE",
-						"header": [],
-						"url": {
-							"raw": "{{SERVER}}/region/:id",
-							"host": [
-								"{{SERVER}}"
-							],
-							"path": [
-								"region",
-								":id"
-							],
-							"variable": [
-								{
-									"key": "id",
-									"value": null,
-									"description": "Integer\nIdentifier of the region."
-								}
-							]
-						}
-					},
-					"response": []
-				}
-			]
-		},
-		{
-			"name": "Round",
-			"item": [
-				{
-					"name": "Retrieve all rounds",
-					"request": {
-						"method": "GET",
-						"header": [],
-						"url": {
-							"raw": "{{SERVER}}/round",
-							"host": [
-								"{{SERVER}}"
-							],
-							"path": [
-								"round"
-							],
-							"query": [
-								{
-									"key": "take",
-									"value": "",
-									"description": "Integer\nMaximum number of results",
-									"disabled": true
-								},
-								{
-									"key": "skip",
-									"value": "",
-									"description": "Integer\nDisregard the first `n` results",
-									"disabled": true
-								},
-								{
-									"key": "name",
-									"value": "",
-									"description": "string\nFilter on the name of the round",
-									"disabled": true
-								},
-								{
-									"key": "sort",
-									"value": "",
-									"description": "CSV\nSort data based on the specified fields. Must be accompanied by an equal number of values in the `ord` field. \n\nExample: `sort=user,birthday`",
-									"disabled": true
-								},
-								{
-									"key": "ord",
-									"value": "",
-									"description": "CSV\nWhich way to order the sorted data. Must be accompanied by an equal number of values in the `sort` field. Values must be either `asc` or `desc`.\n\nExample: `ord=asc,desc`",
-									"disabled": true
-								}
-							]
-						}
-					},
-					"response": []
-				},
-				{
-					"name": "Retrieve round by id",
-					"request": {
-						"method": "GET",
-						"header": [],
-						"url": {
-							"raw": "{{SERVER}}/round/:id",
-							"host": [
-								"{{SERVER}}"
-							],
-							"path": [
-								"round",
-								":id"
-							],
-							"variable": [
-								{
-									"key": "id",
-									"value": "1"
-								}
-							]
-						}
-					},
-					"response": []
-				},
-				{
-					"name": "Update round by id",
-					"request": {
-						"method": "PATCH",
-						"header": [],
-						"body": {
-							"mode": "raw",
-							"raw": "{\n    \"day\": \"2023-01-01T00:00:00.000Z\"\n}",
-							"options": {
-								"raw": {
-									"language": "json"
-								}
-							}
-						},
-						"url": {
-							"raw": "{{SERVER}}/round/:id",
-							"host": [
-								"{{SERVER}}"
-							],
-							"path": [
-								"round",
-								":id"
-							],
-							"variable": [
-								{
-									"key": "id",
-									"value": "1"
-								}
-							]
-						}
-					},
-					"response": []
-				},
-				{
-					"name": "Remove round by id",
-					"request": {
-						"method": "DELETE",
-						"header": [],
-						"url": {
-							"raw": "{{SERVER}}/round/:id",
-							"host": [
-								"{{SERVER}}"
-							],
-							"path": [
-								"round",
-								":id"
-							],
-							"variable": [
-								{
-									"key": "id",
-									"value": null
-								}
-							]
-						}
-					},
-					"response": []
-				}
-			]
-		},
-		{
-			"name": "Syndicus",
-			"item": [
-				{
-					"name": "Retrieve all syndici",
-					"request": {
-						"method": "GET",
-						"header": [],
-						"url": {
-							"raw": "{{SERVER}}/syndicus",
-							"host": [
-								"{{SERVER}}"
-							],
-							"path": [
-								"syndicus"
-							],
-							"query": [
-								{
-									"key": "take",
-									"value": "",
-									"description": "Integer\nMaximum number of results",
-									"disabled": true
-								},
-								{
-									"key": "skip",
-									"value": "",
-									"description": "Integer\nDisregard the first `n` results",
-									"disabled": true
-								},
-								{
-									"key": "login_before",
-									"value": "",
-									"description": "ISO-8601 Datetime\nThe last login takes place before the given date.",
-									"disabled": true
-								},
-								{
-									"key": "login_after",
-									"value": "",
-									"description": "ISO-8601 Datetime\nThe last login takes place after the given date.",
-									"disabled": true
-								},
-								{
-									"key": "added_before",
-									"value": "",
-									"description": "ISO-8601 Datetime\nFilter on syndici added before the given date.",
-									"disabled": true
-								},
-								{
-									"key": "added_after",
-									"value": "",
-									"description": "ISO-8601 Datetime\nFilter on the synidici added after the given date.",
-									"disabled": true
-								},
-								{
-									"key": "name",
-									"value": "",
-									"description": "String\nFilter on the first and last name.",
-									"disabled": true
-								},
-								{
-									"key": "user",
-									"value": "",
-									"description": "Integer\nFilter on the identifier of the user.",
-									"disabled": true
-								},
-								{
-									"key": "sort",
-									"value": "",
-									"description": "CSV\nSort data based on the specified fields. Must be accompanied by an equal number of values in the `ord` field. \n\nExample: `sort=user,birthday`",
-									"disabled": true
-								},
-								{
-									"key": "ord",
-									"value": "",
-									"description": "CSV\nWhich way to order the sorted data. Must be accompanied by an equal number of values in the `sort` field. Values must be either `asc` or `desc`.\n\nExample: `ord=asc,desc`",
-									"disabled": true
-								}
-							]
-						}
-					},
-					"response": []
-				},
-				{
-					"name": "Retrieve syndicus by id",
-					"request": {
-						"method": "GET",
-						"header": [],
-						"url": {
-							"raw": "{{SERVER}}/syndicus/:id",
-							"host": [
-								"{{SERVER}}"
-							],
-							"path": [
-								"syndicus",
-								":id"
-							],
-							"variable": [
-								{
-									"key": "id",
-									"value": null,
-									"description": "Integer\nIdentifier of the syndicus."
-								}
-							]
-						}
-					},
-					"response": []
-				},
-				{
-					"name": "Update syndicus by id",
-					"request": {
-						"method": "PATCH",
-						"header": [],
-						"body": {
-							"mode": "raw",
-							"raw": "{\r\n    \"user_id\": 3\r\n}",
-							"options": {
-								"raw": {
-									"language": "json"
-								}
-							}
-						},
-						"url": {
-							"raw": "{{SERVER}}/syndicus/:id",
-							"host": [
-								"{{SERVER}}"
-							],
-							"path": [
-								"syndicus",
-								":id"
-							],
-							"variable": [
-								{
-									"key": "id",
-									"value": null,
-									"description": "Integer\nIdentifier of the syndicus."
-								}
-							]
-						}
-					},
-					"response": []
-				},
-				{
-					"name": "Remove syndicus by id",
-					"request": {
-						"method": "DELETE",
-						"header": [],
-						"url": {
-							"raw": "{{SERVER}}/syndicus/:id",
-							"host": [
-								"{{SERVER}}"
-							],
-							"path": [
-								"syndicus",
-								":id"
-							],
-							"variable": [
-								{
-									"key": "id",
-									"value": null,
-									"description": "Integer\nIdentifier of the syndicus."
-								}
-							]
-						}
-					},
-					"response": []
-				}
-			]
-		},
-		{
-			"name": "User",
-			"item": [
-				{
-					"name": "Retrieve all users",
-					"event": [
-						{
-							"listen": "test",
-							"script": {
-								"exec": [
-									""
-								],
-								"type": "text/javascript"
-							}
-						}
-					],
-					"request": {
-						"method": "GET",
-						"header": [],
-						"url": {
-							"raw": "{{SERVER}}/user",
-							"host": [
-								"{{SERVER}}"
-							],
-							"path": [
-								"user"
-							],
-							"query": [
-								{
-									"key": "take",
-									"value": "",
-									"description": "Integer\nMaximum number of results",
-									"disabled": true
-								},
-								{
-									"key": "skip",
-									"value": "",
-									"description": "Integer\nDisregard the first `n` results",
-									"disabled": true
-								},
-								{
-									"key": "student",
-									"value": "",
-									"description": "Boolean\nShow only (non) students",
-									"disabled": true
-								},
-								{
-									"key": "super_student",
-									"value": "",
-									"description": "Boolean\nShow only (non) super students",
-									"disabled": true
-								},
-								{
-									"key": "admin",
-									"value": "",
-									"description": "Boolean\nShow only (non) administrators",
-									"disabled": true
-								},
-								{
-									"key": "added_before",
-									"value": "",
-									"description": "ISO-8601 Datetime\nAccount has been created prior to date",
-									"disabled": true
-								},
-								{
-									"key": "added_after",
-									"value": "",
-									"description": "ISO-8601 Datetime\nAccount has been created after given date",
-									"disabled": true
-								},
-								{
-									"key": "name",
-									"value": "",
-									"description": "String \nFilter on first and last name",
-									"disabled": true
-								},
-								{
-									"key": "login_before",
-									"value": "",
-									"description": "ISO-8601 Datetime\nUser's last login was before given date",
-									"disabled": true
-								},
-								{
-									"key": "login_after",
-									"value": "",
-									"description": "ISO-8601 Datetime\nUser's last login was after given date",
-									"disabled": true
-								},
-								{
-									"key": "region_id",
-									"value": "",
-									"description": "Integer\nShow the regions associated with the user",
-									"disabled": true
-								},
-								{
-									"key": "deleted",
-									"value": "",
-									"description": "Boolean\nShow deleted buildings. Only admins are allowed to use this option.",
-									"disabled": true
-								},
-								{
-									"key": "sort",
-									"value": "",
-									"description": "CSV\nSort data based on the specified fields. Must be accompanied by an equal number of values in the `ord` field. \n\nExample: `sort=user,birthday`",
-									"disabled": true
-								},
-								{
-									"key": "ord",
-									"value": "",
-									"description": "CSV\nWhich way to order the sorted data. Must be accompanied by an equal number of values in the `sort` field. Values must be either `asc` or `desc`.\n\nExample: `ord=asc,desc`",
-									"disabled": true
-								}
-							]
-						}
-					},
-					"response": []
-				},
-				{
-					"name": "Retrieve user by id",
-					"request": {
-						"method": "GET",
-						"header": [],
-						"url": {
-							"raw": "{{SERVER}}/user/:id",
-							"host": [
-								"{{SERVER}}"
-							],
-							"path": [
-								"user",
-								":id"
-							],
-							"variable": [
-								{
-									"key": "id",
-									"value": "1",
-									"description": "Identificatie"
-								}
-							]
-						}
-					},
-					"response": []
-				},
-				{
-					"name": "Update user by id",
-					"request": {
-						"method": "PATCH",
-						"header": [],
-						"body": {
-							"mode": "raw",
-							"raw": "{\n    \"email\": \"nieuw@ugent.be\"\n}",
-							"options": {
-								"raw": {
-									"language": "json"
-								}
-							}
-						},
-						"url": {
-							"raw": "{{SERVER}}/user/:id",
-							"host": [
-								"{{SERVER}}"
-							],
-							"path": [
-								"user",
-								":id"
-							],
-							"variable": [
-								{
-									"key": "id",
-									"value": "1"
-								}
-							]
-						}
-					},
-					"response": []
-				},
-				{
-					"name": "Remove user by id",
-					"request": {
-						"method": "DELETE",
-						"header": [],
-						"body": {
-							"mode": "raw",
-							"raw": "{\r\n    \"hardDelete\": \"false\"\r\n}"
-						},
-						"url": {
-							"raw": "{{SERVER}}/user/:id",
-							"host": [
-								"{{SERVER}}"
-							],
-							"path": [
-								"user",
-								":id"
-							],
-							"variable": [
-								{
-									"key": "id",
-									"value": "1"
-								}
-							]
-						}
-					},
-					"response": []
-				}
-			]
-		},
-		{
-			"name": "UserRegion",
-			"item": [
-				{
-					"name": "Retrieve all user_region entries",
-					"request": {
-						"method": "GET",
-						"header": [],
-						"url": {
-							"raw": "{{SERVER}}/user_region",
-							"host": [
-								"{{SERVER}}"
-							],
-							"path": [
-								"user_region"
-							],
-							"query": [
-								{
-									"key": "take",
-									"value": "",
-									"description": "Integer\nMaximum number of results",
-									"disabled": true
-								},
-								{
-									"key": "skip",
-									"value": "",
-									"description": "Integer\nDisregard the first `n` results",
-									"disabled": true
-								},
-								{
-									"key": "user_id",
-									"value": "",
-									"description": "Integer\nFilter by the identifier of a user.",
-									"disabled": true
-								},
-								{
-									"key": "region_id",
-									"value": "",
-									"description": "Integer\nFilter by the identifier of a region.",
-									"disabled": true
-								},
-								{
-									"key": "sort",
-									"value": "",
-									"description": "CSV\nSort data based on the specified fields. Must be accompanied by an equal number of values in the `ord` field. \n\nExample: `sort=user,birthday`",
-									"disabled": true
-								},
-								{
-									"key": "ord",
-									"value": "",
-									"description": "CSV\nWhich way to order the sorted data. Must be accompanied by an equal number of values in the `sort` field. Values must be either `asc` or `desc`.\n\nExample: `ord=asc,desc`",
-									"disabled": true
-								}
-							]
-						}
-					},
-					"response": []
-				},
-				{
-					"name": "Retrieve user_region by id",
-					"request": {
-						"method": "GET",
-						"header": [],
-						"url": {
-							"raw": "{{SERVER}}/user_region/:id",
-							"host": [
-								"{{SERVER}}"
-							],
-							"path": [
-								"user_region",
-								":id"
-							],
-							"variable": [
-								{
-									"key": "id",
-									"value": null,
-									"description": "Integer\nIdentifier of the user_region entry."
-								}
-							]
-						}
-					},
-					"response": []
-				},
-				{
-					"name": "Update user_region by id",
-					"request": {
-						"method": "PATCH",
-						"header": [],
-						"body": {
-							"mode": "raw",
-							"raw": "{\r\n    \"region_id\": 4\r\n}",
-							"options": {
-								"raw": {
-									"language": "json"
-								}
-							}
-						},
-						"url": {
-							"raw": "{{SERVER}}/user_region/:id",
-							"host": [
-								"{{SERVER}}"
-							],
-							"path": [
-								"user_region",
-								":id"
-							],
-							"variable": [
-								{
-									"key": "id",
-									"value": null,
-									"description": "Integer\nIdentifier of the user_region entry."
-								}
-							]
-						}
-					},
-					"response": []
-				},
-				{
-					"name": "Remove user_region by id",
-					"request": {
-						"method": "DELETE",
-						"header": [],
-						"url": {
-							"raw": "{{SERVER}}/user_region/:id",
-							"host": [
-								"{{SERVER}}"
-							],
-							"path": [
-								"user_region",
-								":id"
-							],
-							"variable": [
-								{
-									"key": "id",
-									"value": null,
-									"description": "Integer\nIdentifier of the user_region entry."
-								}
-							]
-						}
-					},
-					"response": []
-				}
-			]
-		}
-	]
-}
\ No newline at end of file
+    "info": {
+        "_postman_id": "dcd8e2d2-dcc0-4bd2-8ab6-609f53b4bc48",
+        "name": "API",
+        "schema": "https://schema.getpostman.com/json/collection/v2.1.0/collection.json",
+        "_exporter_id": "16524797"
+    },
+    "item": [
+        {
+            "name": "Action",
+            "item": [
+                {
+                    "name": "Retrieve all actions",
+                    "request": {
+                        "method": "GET",
+                        "header": [],
+                        "url": {
+                            "raw": "{{SERVER}}/action",
+                            "host": ["{{SERVER}}"],
+                            "path": ["action"],
+                            "query": [
+                                {
+                                    "key": "take",
+                                    "value": "",
+                                    "description": "Integer\nMaximum number of results",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "skip",
+                                    "value": "",
+                                    "description": "Integer\nDisregard the first `n` results",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "description",
+                                    "value": "",
+                                    "description": "String\nSearching according a substring of the description",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "sort",
+                                    "value": "",
+                                    "description": "CSV\nSort data based on the specified fields. Must be accompanied by an equal number of values in the `ord` field. \n\nExample: `sort=user,birthday`",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "ord",
+                                    "value": "",
+                                    "description": "CSV\nWhich way to order the sorted data. Must be accompanied by an equal number of values in the `sort` field. Values must be either `asc` or `desc`.\n\nExample: `ord=asc,desc`",
+                                    "disabled": true
+                                }
+                            ]
+                        }
+                    },
+                    "response": []
+                },
+                {
+                    "name": "Retrieve action by id",
+                    "request": {
+                        "method": "GET",
+                        "header": [],
+                        "url": {
+                            "raw": "{{SERVER}}/action/:id",
+                            "host": ["{{SERVER}}"],
+                            "path": ["action", ":id"],
+                            "variable": [
+                                {
+                                    "key": "id",
+                                    "value": null,
+                                    "description": "Integer\nIdentifier of the action"
+                                }
+                            ]
+                        }
+                    },
+                    "response": []
+                },
+                {
+                    "name": "Update action by id",
+                    "request": {
+                        "method": "PATCH",
+                        "header": [],
+                        "body": {
+                            "mode": "raw",
+                            "raw": "{\r\n    \"description\": \"New description\"\r\n}",
+                            "options": {
+                                "raw": {
+                                    "language": "json"
+                                }
+                            }
+                        },
+                        "url": {
+                            "raw": "{{SERVER}}/action/:id",
+                            "host": ["{{SERVER}}"],
+                            "path": ["action", ":id"],
+                            "variable": [
+                                {
+                                    "key": "id",
+                                    "value": null,
+                                    "description": "Integer\nIdentification of the action\n"
+                                }
+                            ]
+                        }
+                    },
+                    "response": []
+                },
+                {
+                    "name": "Remove action by id",
+                    "request": {
+                        "method": "DELETE",
+                        "header": [],
+                        "url": {
+                            "raw": "{{SERVER}}/action/:id",
+                            "host": ["{{SERVER}}"],
+                            "path": ["action", ":id"],
+                            "variable": [
+                                {
+                                    "key": "id",
+                                    "value": null,
+                                    "description": "Integer\nIdentification of the action\n"
+                                }
+                            ]
+                        }
+                    },
+                    "response": []
+                }
+            ]
+        },
+        {
+            "name": "Building",
+            "item": [
+                {
+                    "name": "Retrieve all buildings",
+                    "event": [
+                        {
+                            "listen": "prerequest",
+                            "script": {
+                                "exec": [
+                                    "pm.sendRequest(\"https://postman-echo.com/get\", function (err, response) {",
+                                    "    console.log(response.json());",
+                                    "});"
+                                ],
+                                "type": "text/javascript"
+                            }
+                        }
+                    ],
+                    "request": {
+                        "method": "GET",
+                        "header": [],
+                        "url": {
+                            "raw": "{{SERVER}}/building",
+                            "host": ["{{SERVER}}"],
+                            "path": ["building"],
+                            "query": [
+                                {
+                                    "key": "take",
+                                    "value": "",
+                                    "description": "Integer\nMaximum number of results",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "skip",
+                                    "value": "",
+                                    "description": "Integer\nDisregard the first `n` results",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "name",
+                                    "value": "",
+                                    "description": "String\nFilter on the name of the building.",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "ivago_id",
+                                    "value": "",
+                                    "description": "String\nSpecify the Ivago identifier",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "syndicus_id",
+                                    "value": "",
+                                    "description": "Number\nThe identifier of the syndicus of this building.",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "deleted",
+                                    "value": "",
+                                    "description": "Boolean\nShow deleted buildings. Only admins are allowed to use this option.",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "sort",
+                                    "value": "",
+                                    "description": "CSV\nSort data based on the specified fields. Must be accompanied by an equal number of values in the `ord` field. \n\nExample: `sort=user,birthday`",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "ord",
+                                    "value": "",
+                                    "description": "CSV\nWhich way to order the sorted data. Must be accompanied by an equal number of values in the `sort` field. Values must be either `asc` or `desc`.\n\nExample: `ord=asc,desc`",
+                                    "disabled": true
+                                }
+                            ]
+                        }
+                    },
+                    "response": []
+                },
+                {
+                    "name": "Retrieve building by id",
+                    "request": {
+                        "method": "GET",
+                        "header": [],
+                        "url": {
+                            "raw": "{{SERVER}}/building/:id",
+                            "host": ["{{SERVER}}"],
+                            "path": ["building", ":id"],
+                            "variable": [
+                                {
+                                    "key": "id",
+                                    "value": "52",
+                                    "description": "Number\nThe identifier of the resource"
+                                }
+                            ]
+                        }
+                    },
+                    "response": []
+                },
+                {
+                    "name": "Update building by id",
+                    "request": {
+                        "method": "PATCH",
+                        "header": [],
+                        "body": {
+                            "mode": "raw",
+                            "raw": "{\n    \"name\": \"UGent\"\n}",
+                            "options": {
+                                "raw": {
+                                    "language": "json"
+                                }
+                            }
+                        },
+                        "url": {
+                            "raw": "{{SERVER}}/building/:id",
+                            "host": ["{{SERVER}}"],
+                            "path": ["building", ":id"],
+                            "variable": [
+                                {
+                                    "key": "id",
+                                    "value": "1"
+                                }
+                            ]
+                        }
+                    },
+                    "response": []
+                },
+                {
+                    "name": "Remove building by id",
+                    "request": {
+                        "method": "DELETE",
+                        "header": [],
+                        "body": {
+                            "mode": "raw",
+                            "raw": "",
+                            "options": {
+                                "raw": {
+                                    "language": "json"
+                                }
+                            }
+                        },
+                        "url": {
+                            "raw": "{{SERVER}}/building/:id",
+                            "host": ["{{SERVER}}"],
+                            "path": ["building", ":id"],
+                            "variable": [
+                                {
+                                    "key": "id",
+                                    "value": "1"
+                                }
+                            ]
+                        }
+                    },
+                    "response": []
+                }
+            ]
+        },
+        {
+            "name": "Schedule",
+            "item": [
+                {
+                    "name": "Retrieve all schedule items",
+                    "request": {
+                        "method": "GET",
+                        "header": [],
+                        "url": {
+                            "raw": "{{SERVER}}/schedule?take=&skip=",
+                            "host": ["{{SERVER}}"],
+                            "path": ["schedule"],
+                            "query": [
+                                {
+                                    "key": "take",
+                                    "value": "",
+                                    "description": "Integer\nMaximum number of results"
+                                },
+                                {
+                                    "key": "skip",
+                                    "value": "",
+                                    "description": "Integer\nDisregard the first `n` results"
+                                },
+                                {
+                                    "key": "user_id",
+                                    "value": "",
+                                    "description": "Integer\nThe identifier of the user who is responsible for the scheduled round.",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "round_id",
+                                    "value": "",
+                                    "description": "Integer\nRetrieve the schedule for a specific route.",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "user_name",
+                                    "value": "",
+                                    "description": "String\nSearch routes based on the name of the person responsible.",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "round",
+                                    "value": "",
+                                    "description": "String\nFilter by the name of the round.",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "before",
+                                    "value": "",
+                                    "description": "ISO-8601 Datetime\nThe schedule takes place before the given date.",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "after",
+                                    "value": "",
+                                    "description": "ISO-8601 Datetime\nThe schedule takes place after the given date.",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "deleted",
+                                    "value": "",
+                                    "description": "Boolean\nShow deleted buildings. Only admins are allowed to use this option.",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "sort",
+                                    "value": "",
+                                    "description": "CSV\nSort data based on the specified fields. Must be accompanied by an equal number of values in the `ord` field. \n\nExample: `sort=user,birthday`",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "ord",
+                                    "value": "",
+                                    "description": "CSV\nWhich way to order the sorted data. Must be accompanied by an equal number of values in the `sort` field. Values must be either `asc` or `desc`.\n\nExample: `ord=asc,desc`",
+                                    "disabled": true
+                                }
+                            ]
+                        }
+                    },
+                    "response": []
+                },
+                {
+                    "name": "Retrieve schedule item by id",
+                    "request": {
+                        "method": "GET",
+                        "header": [],
+                        "url": {
+                            "raw": "{{SERVER}}/schedule/:id",
+                            "host": ["{{SERVER}}"],
+                            "path": ["schedule", ":id"],
+                            "variable": [
+                                {
+                                    "key": "id",
+                                    "value": "1"
+                                }
+                            ]
+                        }
+                    },
+                    "response": []
+                },
+                {
+                    "name": "Update schedule by id",
+                    "request": {
+                        "method": "PATCH",
+                        "header": [],
+                        "body": {
+                            "mode": "raw",
+                            "raw": "{\n    \"day\": \"2023-01-01T00:00:00.000Z\"\n}",
+                            "options": {
+                                "raw": {
+                                    "language": "json"
+                                }
+                            }
+                        },
+                        "url": {
+                            "raw": "{{SERVER}}/schedule/:id",
+                            "host": ["{{SERVER}}"],
+                            "path": ["schedule", ":id"],
+                            "variable": [
+                                {
+                                    "key": "id",
+                                    "value": "1"
+                                }
+                            ]
+                        }
+                    },
+                    "response": []
+                },
+                {
+                    "name": "Remove schedule by id",
+                    "request": {
+                        "method": "DELETE",
+                        "header": [],
+                        "body": {
+                            "mode": "raw",
+                            "raw": "{\r\n    \"hardDelete\": \"false\"\r\n}",
+                            "options": {
+                                "raw": {
+                                    "language": "json"
+                                }
+                            }
+                        },
+                        "url": {
+                            "raw": "{{SERVER}}/schedule/:id",
+                            "host": ["{{SERVER}}"],
+                            "path": ["schedule", ":id"],
+                            "variable": [
+                                {
+                                    "key": "id",
+                                    "value": "1"
+                                }
+                            ]
+                        }
+                    },
+                    "response": []
+                }
+            ]
+        },
+        {
+            "name": "Garbage",
+            "item": [
+                {
+                    "name": "Retrieve all garbage",
+                    "request": {
+                        "method": "GET",
+                        "header": [],
+                        "url": {
+                            "raw": "{{SERVER}}/garbage",
+                            "host": ["{{SERVER}}"],
+                            "path": ["garbage"],
+                            "query": [
+                                {
+                                    "key": "take",
+                                    "value": "",
+                                    "description": "Integer\nMaximum number of results",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "skip",
+                                    "value": "",
+                                    "description": "Integer\nDisregard the first `n` results",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "before",
+                                    "value": "",
+                                    "description": "ISO-8601 Datetime\nGarbage needs to have a pickup-time before the given date.",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "after",
+                                    "value": "",
+                                    "description": "ISO-8601 Datetime\nGarbage needs to heva a pickup time after the given date.\n",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "building_id",
+                                    "value": "",
+                                    "description": "Integer\nGet the garbage from a specific building.",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "action_id",
+                                    "value": "",
+                                    "description": "Integer\nGet all garbage with a specific action.",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "syndicus_id",
+                                    "value": "",
+                                    "description": "Integer\nGet all garbage from the buildings of a specific syndicus.",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "round_id",
+                                    "value": "",
+                                    "description": "Integer\nGet all garbage from a specific round.",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "sort",
+                                    "value": "",
+                                    "description": "CSV\nSort data based on the specified fields. Must be accompanied by an equal number of values in the `ord` field. \n\nExample: `sort=user,birthday`",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "ord",
+                                    "value": "",
+                                    "description": "CSV\nWhich way to order the sorted data. Must be accompanied by an equal number of values in the `sort` field. Values must be either `asc` or `desc`.\n\nExample: `ord=asc,desc`",
+                                    "disabled": true
+                                }
+                            ]
+                        }
+                    },
+                    "response": []
+                },
+                {
+                    "name": "Retrieve garbage by id",
+                    "request": {
+                        "method": "GET",
+                        "header": [],
+                        "url": {
+                            "raw": "{{SERVER}}/garbage/:id",
+                            "host": ["{{SERVER}}"],
+                            "path": ["garbage", ":id"],
+                            "variable": [
+                                {
+                                    "key": "id",
+                                    "value": null,
+                                    "description": "Integer\nIdentifier of the garbage."
+                                }
+                            ]
+                        }
+                    },
+                    "response": []
+                },
+                {
+                    "name": "Update garbage by id",
+                    "request": {
+                        "method": "PATCH",
+                        "header": [],
+                        "body": {
+                            "mode": "raw",
+                            "raw": "{\r\n    \"pickup_time\": \"2023-01-01T00:00:00.000Z\"\r\n}",
+                            "options": {
+                                "raw": {
+                                    "language": "json"
+                                }
+                            }
+                        },
+                        "url": {
+                            "raw": "{{SERVER}}/garbage/:id",
+                            "host": ["{{SERVER}}"],
+                            "path": ["garbage", ":id"],
+                            "variable": [
+                                {
+                                    "key": "id",
+                                    "value": null,
+                                    "description": "Integer\nIdentifier of the garbage."
+                                }
+                            ]
+                        }
+                    },
+                    "response": []
+                },
+                {
+                    "name": "Remove garbage by id",
+                    "request": {
+                        "method": "DELETE",
+                        "header": [],
+                        "url": {
+                            "raw": "{{SERVER}}/garbage/:id",
+                            "host": ["{{SERVER}}"],
+                            "path": ["garbage", ":id"],
+                            "variable": [
+                                {
+                                    "key": "id",
+                                    "value": null,
+                                    "description": "Integer\nIdentifier of the garbage."
+                                }
+                            ]
+                        }
+                    },
+                    "response": []
+                }
+            ]
+        },
+        {
+            "name": "Progress",
+            "item": [
+                {
+                    "name": "Retrieve all progresses",
+                    "request": {
+                        "method": "GET",
+                        "header": [],
+                        "url": {
+                            "raw": "{{SERVER}}/progress",
+                            "host": ["{{SERVER}}"],
+                            "path": ["progress"],
+                            "query": [
+                                {
+                                    "key": "take",
+                                    "value": "",
+                                    "description": "Integer\nMaximum number of results",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "skip",
+                                    "value": "",
+                                    "description": "Integer\nDisregard the first `n` results",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "deleted",
+                                    "value": "",
+                                    "description": "Boolean\nShow deleted buildings. Only admins are allowed to use this option.",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "report",
+                                    "value": "",
+                                    "description": "String\nOnly show the progresses where the report contains the given substring.",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "arrived_before",
+                                    "value": "",
+                                    "description": "ISO-8601 Datetime\nThe time of arrival must happen before the given time.",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "arrived_after",
+                                    "value": "",
+                                    "description": "ISO-8601 Datetime\nThe time of arrival must happen after the given time.",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "left_before",
+                                    "value": "",
+                                    "description": "ISO-8601 Datetime\nThe time of departure must happen before the given time.",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "left_after",
+                                    "value": "",
+                                    "description": "ISO-8601 Datetime\nThe time of departure must happen after the given time.",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "building",
+                                    "value": "",
+                                    "description": "Integer\nFilter on the identifier of a building.",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "schedule",
+                                    "value": "",
+                                    "description": "Integer\nFilter on the identifier of a schedule.",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "round",
+                                    "value": "",
+                                    "description": "Integer\nFilter on the identifier of a round.",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "user",
+                                    "value": "",
+                                    "description": "Integer\nFilter on the identifier of a user.",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "sort",
+                                    "value": "",
+                                    "description": "CSV\nSort data based on the specified fields. Must be accompanied by an equal number of values in the `ord` field. \n\nExample: `sort=user,birthday`",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "ord",
+                                    "value": "",
+                                    "description": "CSV\nWhich way to order the sorted data. Must be accompanied by an equal number of values in the `sort` field. Values must be either `asc` or `desc`.\n\nExample: `ord=asc,desc`",
+                                    "disabled": true
+                                }
+                            ]
+                        }
+                    },
+                    "response": []
+                },
+                {
+                    "name": "Retrieve progress by id",
+                    "request": {
+                        "method": "GET",
+                        "header": [],
+                        "url": {
+                            "raw": "{{SERVER}}/progress/:id",
+                            "host": ["{{SERVER}}"],
+                            "path": ["progress", ":id"],
+                            "variable": [
+                                {
+                                    "key": "id",
+                                    "value": null,
+                                    "description": "Integer\nIdentifier of the progress."
+                                }
+                            ]
+                        }
+                    },
+                    "response": []
+                },
+                {
+                    "name": "Update progress by id",
+                    "request": {
+                        "method": "PATCH",
+                        "header": [],
+                        "body": {
+                            "mode": "raw",
+                            "raw": "{\r\n    \"report\": \"Updated report\"\r\n}",
+                            "options": {
+                                "raw": {
+                                    "language": "json"
+                                }
+                            }
+                        },
+                        "url": {
+                            "raw": "{{SERVER}}/progress/:id",
+                            "host": ["{{SERVER}}"],
+                            "path": ["progress", ":id"],
+                            "variable": [
+                                {
+                                    "key": "id",
+                                    "value": null,
+                                    "description": "Integer\nIdentifier of the progress."
+                                }
+                            ]
+                        }
+                    },
+                    "response": []
+                },
+                {
+                    "name": "Remove progress by id",
+                    "request": {
+                        "method": "DELETE",
+                        "header": [],
+                        "url": {
+                            "raw": "{{SERVER}}/progress/:id",
+                            "host": ["{{SERVER}}"],
+                            "path": ["progress", ":id"],
+                            "variable": [
+                                {
+                                    "key": "id",
+                                    "value": null,
+                                    "description": "Integer\nIdentifier of the progress."
+                                }
+                            ]
+                        }
+                    },
+                    "response": []
+                }
+            ]
+        },
+        {
+            "name": "Region",
+            "item": [
+                {
+                    "name": "Retrieve all regions",
+                    "request": {
+                        "method": "GET",
+                        "header": [],
+                        "url": {
+                            "raw": "{{SERVER}}/region",
+                            "host": ["{{SERVER}}"],
+                            "path": ["region"],
+                            "query": [
+                                {
+                                    "key": "take",
+                                    "value": "",
+                                    "description": "Integer\nMaximum number of results",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "skip",
+                                    "value": "",
+                                    "description": "Integer\nDisregard the first `n` results",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "id",
+                                    "value": "",
+                                    "description": "Integer\nFilter by identifier of the region.",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "name",
+                                    "value": "",
+                                    "description": "String\nFilter by the name of the region.",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "user_id",
+                                    "value": "",
+                                    "description": "Integer\nFilter by the users (their id's) associated with the region.",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "sort",
+                                    "value": "",
+                                    "description": "CSV\nSort data based on the specified fields. Must be accompanied by an equal number of values in the `ord` field. \n\nExample: `sort=user,birthday`",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "ord",
+                                    "value": "",
+                                    "description": "CSV\nWhich way to order the sorted data. Must be accompanied by an equal number of values in the `sort` field. Values must be either `asc` or `desc`.\n\nExample: `ord=asc,desc`",
+                                    "disabled": true
+                                }
+                            ]
+                        }
+                    },
+                    "response": []
+                },
+                {
+                    "name": "Retrieve region by id",
+                    "request": {
+                        "method": "GET",
+                        "header": [],
+                        "url": {
+                            "raw": "{{SERVER}}/region/:id",
+                            "host": ["{{SERVER}}"],
+                            "path": ["region", ":id"],
+                            "variable": [
+                                {
+                                    "key": "id",
+                                    "value": "",
+                                    "description": "Integer\nIdentifier of the region."
+                                }
+                            ]
+                        }
+                    },
+                    "response": []
+                },
+                {
+                    "name": "Update region by id",
+                    "request": {
+                        "method": "PATCH",
+                        "header": [],
+                        "body": {
+                            "mode": "raw",
+                            "raw": "{\r\n    \"name\": \"Gent\"\r\n}",
+                            "options": {
+                                "raw": {
+                                    "language": "json"
+                                }
+                            }
+                        },
+                        "url": {
+                            "raw": "{{SERVER}}/region/:id",
+                            "host": ["{{SERVER}}"],
+                            "path": ["region", ":id"],
+                            "variable": [
+                                {
+                                    "key": "id",
+                                    "value": "",
+                                    "description": "Integer\nIdentifier of the region."
+                                }
+                            ]
+                        }
+                    },
+                    "response": []
+                },
+                {
+                    "name": "Remove region by id",
+                    "request": {
+                        "method": "DELETE",
+                        "header": [],
+                        "url": {
+                            "raw": "{{SERVER}}/region/:id",
+                            "host": ["{{SERVER}}"],
+                            "path": ["region", ":id"],
+                            "variable": [
+                                {
+                                    "key": "id",
+                                    "value": null,
+                                    "description": "Integer\nIdentifier of the region."
+                                }
+                            ]
+                        }
+                    },
+                    "response": []
+                }
+            ]
+        },
+        {
+            "name": "Round",
+            "item": [
+                {
+                    "name": "Retrieve all rounds",
+                    "request": {
+                        "method": "GET",
+                        "header": [],
+                        "url": {
+                            "raw": "{{SERVER}}/round",
+                            "host": ["{{SERVER}}"],
+                            "path": ["round"],
+                            "query": [
+                                {
+                                    "key": "take",
+                                    "value": "",
+                                    "description": "Integer\nMaximum number of results",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "skip",
+                                    "value": "",
+                                    "description": "Integer\nDisregard the first `n` results",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "name",
+                                    "value": "",
+                                    "description": "string\nFilter on the name of the round",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "sort",
+                                    "value": "",
+                                    "description": "CSV\nSort data based on the specified fields. Must be accompanied by an equal number of values in the `ord` field. \n\nExample: `sort=user,birthday`",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "ord",
+                                    "value": "",
+                                    "description": "CSV\nWhich way to order the sorted data. Must be accompanied by an equal number of values in the `sort` field. Values must be either `asc` or `desc`.\n\nExample: `ord=asc,desc`",
+                                    "disabled": true
+                                }
+                            ]
+                        }
+                    },
+                    "response": []
+                },
+                {
+                    "name": "Retrieve round by id",
+                    "request": {
+                        "method": "GET",
+                        "header": [],
+                        "url": {
+                            "raw": "{{SERVER}}/round/:id",
+                            "host": ["{{SERVER}}"],
+                            "path": ["round", ":id"],
+                            "variable": [
+                                {
+                                    "key": "id",
+                                    "value": "1"
+                                }
+                            ]
+                        }
+                    },
+                    "response": []
+                },
+                {
+                    "name": "Update round by id",
+                    "request": {
+                        "method": "PATCH",
+                        "header": [],
+                        "body": {
+                            "mode": "raw",
+                            "raw": "{\n    \"day\": \"2023-01-01T00:00:00.000Z\"\n}",
+                            "options": {
+                                "raw": {
+                                    "language": "json"
+                                }
+                            }
+                        },
+                        "url": {
+                            "raw": "{{SERVER}}/round/:id",
+                            "host": ["{{SERVER}}"],
+                            "path": ["round", ":id"],
+                            "variable": [
+                                {
+                                    "key": "id",
+                                    "value": "1"
+                                }
+                            ]
+                        }
+                    },
+                    "response": []
+                },
+                {
+                    "name": "Remove round by id",
+                    "request": {
+                        "method": "DELETE",
+                        "header": [],
+                        "url": {
+                            "raw": "{{SERVER}}/round/:id",
+                            "host": ["{{SERVER}}"],
+                            "path": ["round", ":id"],
+                            "variable": [
+                                {
+                                    "key": "id",
+                                    "value": null
+                                }
+                            ]
+                        }
+                    },
+                    "response": []
+                }
+            ]
+        },
+        {
+            "name": "Syndicus",
+            "item": [
+                {
+                    "name": "Retrieve all syndici",
+                    "request": {
+                        "method": "GET",
+                        "header": [],
+                        "url": {
+                            "raw": "{{SERVER}}/syndicus",
+                            "host": ["{{SERVER}}"],
+                            "path": ["syndicus"],
+                            "query": [
+                                {
+                                    "key": "take",
+                                    "value": "",
+                                    "description": "Integer\nMaximum number of results",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "skip",
+                                    "value": "",
+                                    "description": "Integer\nDisregard the first `n` results",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "login_before",
+                                    "value": "",
+                                    "description": "ISO-8601 Datetime\nThe last login takes place before the given date.",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "login_after",
+                                    "value": "",
+                                    "description": "ISO-8601 Datetime\nThe last login takes place after the given date.",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "added_before",
+                                    "value": "",
+                                    "description": "ISO-8601 Datetime\nFilter on syndici added before the given date.",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "added_after",
+                                    "value": "",
+                                    "description": "ISO-8601 Datetime\nFilter on the synidici added after the given date.",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "name",
+                                    "value": "",
+                                    "description": "String\nFilter on the first and last name.",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "user",
+                                    "value": "",
+                                    "description": "Integer\nFilter on the identifier of the user.",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "sort",
+                                    "value": "",
+                                    "description": "CSV\nSort data based on the specified fields. Must be accompanied by an equal number of values in the `ord` field. \n\nExample: `sort=user,birthday`",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "ord",
+                                    "value": "",
+                                    "description": "CSV\nWhich way to order the sorted data. Must be accompanied by an equal number of values in the `sort` field. Values must be either `asc` or `desc`.\n\nExample: `ord=asc,desc`",
+                                    "disabled": true
+                                }
+                            ]
+                        }
+                    },
+                    "response": []
+                },
+                {
+                    "name": "Retrieve syndicus by id",
+                    "request": {
+                        "method": "GET",
+                        "header": [],
+                        "url": {
+                            "raw": "{{SERVER}}/syndicus/:id",
+                            "host": ["{{SERVER}}"],
+                            "path": ["syndicus", ":id"],
+                            "variable": [
+                                {
+                                    "key": "id",
+                                    "value": null,
+                                    "description": "Integer\nIdentifier of the syndicus."
+                                }
+                            ]
+                        }
+                    },
+                    "response": []
+                },
+                {
+                    "name": "Update syndicus by id",
+                    "request": {
+                        "method": "PATCH",
+                        "header": [],
+                        "body": {
+                            "mode": "raw",
+                            "raw": "{\r\n    \"user_id\": 3\r\n}",
+                            "options": {
+                                "raw": {
+                                    "language": "json"
+                                }
+                            }
+                        },
+                        "url": {
+                            "raw": "{{SERVER}}/syndicus/:id",
+                            "host": ["{{SERVER}}"],
+                            "path": ["syndicus", ":id"],
+                            "variable": [
+                                {
+                                    "key": "id",
+                                    "value": null,
+                                    "description": "Integer\nIdentifier of the syndicus."
+                                }
+                            ]
+                        }
+                    },
+                    "response": []
+                },
+                {
+                    "name": "Remove syndicus by id",
+                    "request": {
+                        "method": "DELETE",
+                        "header": [],
+                        "url": {
+                            "raw": "{{SERVER}}/syndicus/:id",
+                            "host": ["{{SERVER}}"],
+                            "path": ["syndicus", ":id"],
+                            "variable": [
+                                {
+                                    "key": "id",
+                                    "value": null,
+                                    "description": "Integer\nIdentifier of the syndicus."
+                                }
+                            ]
+                        }
+                    },
+                    "response": []
+                }
+            ]
+        },
+        {
+            "name": "User",
+            "item": [
+                {
+                    "name": "Retrieve all users",
+                    "event": [
+                        {
+                            "listen": "test",
+                            "script": {
+                                "exec": [""],
+                                "type": "text/javascript"
+                            }
+                        }
+                    ],
+                    "request": {
+                        "method": "GET",
+                        "header": [],
+                        "url": {
+                            "raw": "{{SERVER}}/user",
+                            "host": ["{{SERVER}}"],
+                            "path": ["user"],
+                            "query": [
+                                {
+                                    "key": "take",
+                                    "value": "",
+                                    "description": "Integer\nMaximum number of results",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "skip",
+                                    "value": "",
+                                    "description": "Integer\nDisregard the first `n` results",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "student",
+                                    "value": "",
+                                    "description": "Boolean\nShow only (non) students",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "super_student",
+                                    "value": "",
+                                    "description": "Boolean\nShow only (non) super students",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "admin",
+                                    "value": "",
+                                    "description": "Boolean\nShow only (non) administrators",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "added_before",
+                                    "value": "",
+                                    "description": "ISO-8601 Datetime\nAccount has been created prior to date",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "added_after",
+                                    "value": "",
+                                    "description": "ISO-8601 Datetime\nAccount has been created after given date",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "name",
+                                    "value": "",
+                                    "description": "String \nFilter on first and last name",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "login_before",
+                                    "value": "",
+                                    "description": "ISO-8601 Datetime\nUser's last login was before given date",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "login_after",
+                                    "value": "",
+                                    "description": "ISO-8601 Datetime\nUser's last login was after given date",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "region_id",
+                                    "value": "",
+                                    "description": "Integer\nShow the regions associated with the user",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "deleted",
+                                    "value": "",
+                                    "description": "Boolean\nShow deleted buildings. Only admins are allowed to use this option.",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "sort",
+                                    "value": "",
+                                    "description": "CSV\nSort data based on the specified fields. Must be accompanied by an equal number of values in the `ord` field. \n\nExample: `sort=user,birthday`",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "ord",
+                                    "value": "",
+                                    "description": "CSV\nWhich way to order the sorted data. Must be accompanied by an equal number of values in the `sort` field. Values must be either `asc` or `desc`.\n\nExample: `ord=asc,desc`",
+                                    "disabled": true
+                                }
+                            ]
+                        }
+                    },
+                    "response": []
+                },
+                {
+                    "name": "Retrieve user by id",
+                    "request": {
+                        "method": "GET",
+                        "header": [],
+                        "url": {
+                            "raw": "{{SERVER}}/user/:id",
+                            "host": ["{{SERVER}}"],
+                            "path": ["user", ":id"],
+                            "variable": [
+                                {
+                                    "key": "id",
+                                    "value": "1",
+                                    "description": "Identificatie"
+                                }
+                            ]
+                        }
+                    },
+                    "response": []
+                },
+                {
+                    "name": "Update user by id",
+                    "request": {
+                        "method": "PATCH",
+                        "header": [],
+                        "body": {
+                            "mode": "raw",
+                            "raw": "{\n    \"email\": \"nieuw@ugent.be\"\n}",
+                            "options": {
+                                "raw": {
+                                    "language": "json"
+                                }
+                            }
+                        },
+                        "url": {
+                            "raw": "{{SERVER}}/user/:id",
+                            "host": ["{{SERVER}}"],
+                            "path": ["user", ":id"],
+                            "variable": [
+                                {
+                                    "key": "id",
+                                    "value": "1"
+                                }
+                            ]
+                        }
+                    },
+                    "response": []
+                },
+                {
+                    "name": "Remove user by id",
+                    "request": {
+                        "method": "DELETE",
+                        "header": [],
+                        "body": {
+                            "mode": "raw",
+                            "raw": "{\r\n    \"hardDelete\": \"false\"\r\n}"
+                        },
+                        "url": {
+                            "raw": "{{SERVER}}/user/:id",
+                            "host": ["{{SERVER}}"],
+                            "path": ["user", ":id"],
+                            "variable": [
+                                {
+                                    "key": "id",
+                                    "value": "1"
+                                }
+                            ]
+                        }
+                    },
+                    "response": []
+                }
+            ]
+        },
+        {
+            "name": "UserRegion",
+            "item": [
+                {
+                    "name": "Retrieve all user_region entries",
+                    "request": {
+                        "method": "GET",
+                        "header": [],
+                        "url": {
+                            "raw": "{{SERVER}}/user_region",
+                            "host": ["{{SERVER}}"],
+                            "path": ["user_region"],
+                            "query": [
+                                {
+                                    "key": "take",
+                                    "value": "",
+                                    "description": "Integer\nMaximum number of results",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "skip",
+                                    "value": "",
+                                    "description": "Integer\nDisregard the first `n` results",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "user_id",
+                                    "value": "",
+                                    "description": "Integer\nFilter by the identifier of a user.",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "region_id",
+                                    "value": "",
+                                    "description": "Integer\nFilter by the identifier of a region.",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "sort",
+                                    "value": "",
+                                    "description": "CSV\nSort data based on the specified fields. Must be accompanied by an equal number of values in the `ord` field. \n\nExample: `sort=user,birthday`",
+                                    "disabled": true
+                                },
+                                {
+                                    "key": "ord",
+                                    "value": "",
+                                    "description": "CSV\nWhich way to order the sorted data. Must be accompanied by an equal number of values in the `sort` field. Values must be either `asc` or `desc`.\n\nExample: `ord=asc,desc`",
+                                    "disabled": true
+                                }
+                            ]
+                        }
+                    },
+                    "response": []
+                },
+                {
+                    "name": "Retrieve user_region by id",
+                    "request": {
+                        "method": "GET",
+                        "header": [],
+                        "url": {
+                            "raw": "{{SERVER}}/user_region/:id",
+                            "host": ["{{SERVER}}"],
+                            "path": ["user_region", ":id"],
+                            "variable": [
+                                {
+                                    "key": "id",
+                                    "value": null,
+                                    "description": "Integer\nIdentifier of the user_region entry."
+                                }
+                            ]
+                        }
+                    },
+                    "response": []
+                },
+                {
+                    "name": "Update user_region by id",
+                    "request": {
+                        "method": "PATCH",
+                        "header": [],
+                        "body": {
+                            "mode": "raw",
+                            "raw": "{\r\n    \"region_id\": 4\r\n}",
+                            "options": {
+                                "raw": {
+                                    "language": "json"
+                                }
+                            }
+                        },
+                        "url": {
+                            "raw": "{{SERVER}}/user_region/:id",
+                            "host": ["{{SERVER}}"],
+                            "path": ["user_region", ":id"],
+                            "variable": [
+                                {
+                                    "key": "id",
+                                    "value": null,
+                                    "description": "Integer\nIdentifier of the user_region entry."
+                                }
+                            ]
+                        }
+                    },
+                    "response": []
+                },
+                {
+                    "name": "Remove user_region by id",
+                    "request": {
+                        "method": "DELETE",
+                        "header": [],
+                        "url": {
+                            "raw": "{{SERVER}}/user_region/:id",
+                            "host": ["{{SERVER}}"],
+                            "path": ["user_region", ":id"],
+                            "variable": [
+                                {
+                                    "key": "id",
+                                    "value": null,
+                                    "description": "Integer\nIdentifier of the user_region entry."
+                                }
+                            ]
+                        }
+                    },
+                    "response": []
+                }
+            ]
+        }
+    ]
+}
diff --git a/web/src/views/round/RoundPlanner.vue b/web/src/views/round/RoundPlanner.vue
index ad0ab470b..e2e8a8e5c 100644
--- a/web/src/views/round/RoundPlanner.vue
+++ b/web/src/views/round/RoundPlanner.vue
@@ -1,335 +1,131 @@
 <template>
-  <v-card variant="flat">
-    <!-- Select input fields -->
-
-    <v-card-actions class="d-flex ml-3">
-      <!-- Buttons to select if the user wants to plan for multiple days or not -->
-      <v-btn
-        @click="
-          () => {
-            selected_multiple = false;
-            selected_end_day = '';
-            reset_planning();
-          }
-        "
-        :active="!selected_multiple"
-        >Enkel</v-btn
-      >
-      <v-btn
-        @click="
-          () => {
-            selected_multiple = true;
-            reset_planning();
-          }
-        "
-        :active="selected_multiple"
-        >Meerdere</v-btn
-      >
-    </v-card-actions>
-    <v-row class="py-0 my-0">
-      <v-col
-        cols="1"
-        style="min-width: 100px; max-width: 100%"
-        class="flex-grow-1 flex-shrink-0 py-0 my-0 ml-5"
-      >
-        <v-select
-          label="Student"
-          :items="mock_students"
-          type="text"
-          variant="solo"
-          prepend-inner-icon="mdi-account"
-          v-model="selected_student"
-          required
-        ></v-select>
-      </v-col>
-
-      <!-- TODO: implement check to see if start and end date dont crossover -->
-      <v-col
-        cols="3"
-        style="min-width: 100px; max-width: 100%"
-        class="flex-grow-0 flex-shrink-1 py-0 my-0"
-        ><div class="d-flex">
-          <v-text-field
-            label="Datum"
-            type="date"
-            variant="solo"
-            multiple
-            v-model="selected_start_day"
-            @update:model-value="reset_planning()"
-          /><v-text-field
-            class="ml-1"
-            v-if="selected_multiple"
-            label="Datum"
-            type="date"
-            variant="solo"
-            multiple
-            v-model="selected_end_day"
-            @update:model-value="reset_planning()"
-          />
-        </div>
-      </v-col>
-      <v-col
-        cols="3"
-        style="min-width: 100px; max-width: 100%"
-        class="flex-grow-0 flex-shrink-0 py-0 my-0 mr-5"
-      >
-        <v-text-field
-          label="Start"
-          type="time"
-          variant="solo"
-          v-model="selected_time"
-        />
-      </v-col> </v-row
-    ><v-row class="py-0 my-0">
-      <v-col
-        cols="1"
-        style="min-width: 100px; max-width: 100%"
-        class="flex-grow-1 flex-shrink-0 py-0 my-0 ml-5"
-      >
-        <v-select
-          label="Template ronde"
-          :items="mock_rounds"
-          v-model="selected_round"
-          item-value="name"
-          item-title="name"
-          return-object
-          type="text"
-          variant="solo"
-          prepend-inner-icon="mdi-transit-detour"
-          required
-          @update:model-value="reset_planning()"
-        ></v-select>
-      </v-col>
-      <v-col
-        cols="3"
-        style="min-width: 100px; max-width: 100%"
-        class="flex-grow-0 flex-shrink-0 py-0 my-0"
-      >
-        <!-- TODO: currently 55px on this button to make it fit the theme, maybe css in future? -->
-        <!-- TODO: fix this router link to load in dynamicly -->
-        <v-btn
-          to="/rondes/nieuw"
-          min-width="100%"
-          min-height="55px"
-          prepend-icon="mdi-pencil"
-          left
-          max-width="100%"
-          >Bewerken</v-btn
+  <div>
+    <HFillWrapper margin="mx-4 mb-4">
+      <BorderCard>
+        <v-row class="py-0 my-4 mx-2">
+          <v-col
+            cols="1"
+            style="min-width: 100px; max-width: 100%"
+            class="flex-grow-1 flex-shrink-0 py-0 my-0"
+            ><v-autocomplete
+              prepend-inner-icon="mdi-account"
+              label="Student"
+              :items="[
+                'California',
+                'Colorado',
+                'Florida',
+                'Georgia',
+                'Texas',
+                'Wyoming',
+              ]"
+              variant="solo"
+            ></v-autocomplete></v-col
+        ></v-row>
+        <v-row class="py-0 my-4 mx-2">
+          <v-col cols="3" class="flex-grow-0 flex-shrink-0"
+            ><v-select
+              prepend-inner-icon="mdi-replay"
+              variant="solo"
+              label="Frequentie"
+              v-model="frequency"
+              :items="frequencys"
+              @update:model-value="frequencyCheck()"
+            ></v-select></v-col
+          ><v-col
+            cols="1"
+            style="min-width: 100px; max-width: 100%"
+            class="flex-grow-1 flex-shrink-0"
+            ><div v-if="!multipleday">
+              <v-text-field
+                prepend-inner-icon="mdi-calendar"
+                label="Startdatum"
+                variant="solo"
+                type="date"
+                v-model="startDate"
+              ></v-text-field>
+            </div>
+            <div class="d-flex justify-space-between" v-else>
+              <v-text-field
+                v-model="startDate"
+                prepend-inner-icon="mdi-calendar"
+                variant="solo"
+                class="mr-2"
+                type="date"
+                label="Startdatum"
+              ></v-text-field
+              ><v-text-field
+                v-model="endDate"
+                prepend-inner-icon="mdi-calendar"
+                variant="solo"
+                class="ml-2"
+                type="date"
+                label="Einddatum"
+              ></v-text-field></div></v-col
+          ><v-col cols="3" class="flex-grow-0 flex-shrink-0"
+            ><v-text-field
+              prepend-inner-icon="mdi-clock-time-two-outline"
+              label="Starttijd"
+              variant="solo"
+              type="time"
+            ></v-text-field
+          ></v-col>
+        </v-row>
+        <v-card-actions
+          ><v-spacer></v-spacer
+          ><v-btn prepend-icon="mdi-check"
+            >Ronde inplannen</v-btn
+          ></v-card-actions
         >
-      </v-col>
-      <v-col
-        cols="3"
-        style="min-width: 100px; max-width: 100%"
-        class="flex-grow-0 flex-shrink-0 py-0 my-0 mr-5"
-      >
-        <!-- TODO: Fix router link so there's a pushback to this page once a round is created?-->
-        <v-btn
-          to="/rondes/nieuw"
-          min-height="55px"
-          min-width="100%"
-          prepend-icon="mdi-plus"
-          max-width="100%"
-          >Nieuwe maken</v-btn
-        >
-      </v-col>
-    </v-row>
-
-    <!-- View selected rounds -->
-    <div v-if="selected_round">
-      <v-card
-        v-for="(planned, index) in planning"
-        v-bind:key="index"
-        class="py-0 my-5 mx-5"
-      >
-        <!-- Give user a warning with tooltip + icon -->
-        <!-- Use this when trying to plan a building in a round that's already planned in -->
-        <!-- TODO: currently this uses substring as warning for show, should be an API call -->
-        <template v-if="selected_round.name.includes('rote')" v-slot:prepend>
-          <v-tooltip :text="`Gebouw(en) ingepland op ${planned.date}`"
-            ><template v-slot:activator="{ props }">
-              <v-icon
-                v-bind="props"
-                color="error"
-                icon="mdi-alert"
-              ></v-icon></template
-          ></v-tooltip>
-        </template>
-
-        <!-- Icons for showing extra info about the building -->
-        <template v-else v-slot:prepend>
-          <v-icon color="green" icon="mdi-transit-detour"></v-icon>
-        </template>
-        <template v-slot:title>
-          <v-card-title>{{
-            selected_multiple ? planned.date : selected_round.name
-          }}</v-card-title> </template
-        ><template v-slot:subtitle>
-          <v-card-subtitle>{{
-            selected_multiple ? selected_round.name : planned.date
-          }}</v-card-subtitle>
-        </template>
-        <template v-slot:append>
-          <v-icon
-            v-if="planned.showinfo"
-            class="ml-2"
-            color="primary"
-            icon="mdi-pencil"
-            @click="planned.edit = !planned.edit"
-          ></v-icon>
-          <v-icon
-            class="ml-2"
-            :icon="planned.showinfo ? 'mdi-chevron-up' : 'mdi-chevron-down'"
-            @click="() => (planned.showinfo = !planned.showinfo)"
-          ></v-icon>
-          <v-icon
-            class="ml-2"
-            color="error"
-            icon="mdi-close"
-            @click="remove_from_planning(index)"
-          ></v-icon>
-        </template>
-
-        <!-- Show the expand, where users can quickly alter their rounds -->
-        <v-expand-transition>
-          <div v-show="planned.showinfo">
-            <v-divider></v-divider>
-
-            <v-card
-              v-for="(building, bindex) in planned.round?.buildings"
-              v-bind:key="bindex"
-              class="ml-3 my-1"
-              variant="flat"
-            >
-              <!-- TODO: currently this uses building.comments as warning, should be an API call -->
-              <template v-if="building.comments" v-slot:prepend>
-                <v-tooltip :text="`Gebouw al ingepland op ${planned.date}`"
-                  ><template v-slot:activator="{ props }">
-                    <v-icon
-                      v-bind="props"
-                      color="error"
-                      icon="mdi-alert"
-                    ></v-icon></template
-                ></v-tooltip>
-              </template>
-
-              <template v-else v-slot:prepend>
-                <v-icon color="green" icon="mdi-office-building"></v-icon>
-              </template>
-              <template v-slot:title>
-                <v-card-title>{{ building.name }}</v-card-title> </template
-              ><template v-slot:subtitle>
-                <v-card-subtitle>{{ building.address }}</v-card-subtitle>
-              </template>
-              <template v-slot:append
-                ><v-icon
-                  v-if="planned.edit"
-                  icon="mdi-close"
-                  color="error"
-                  @click="planned.round?.buildings.splice(bindex, 1)"
-                ></v-icon
-              ></template>
-            </v-card>
-          </div>
-        </v-expand-transition>
-      </v-card>
-    </div>
-    <div v-else>
-      <v-card
-        prepend-icon="mdi-information"
-        title="Nog geen ronde geselecteerd"
-        variant="flat"
-      ></v-card>
-    </div>
-    <v-card-actions class="d-flex">
-      <v-spacer></v-spacer>
-      <!-- TODO fill in correct link, router pushback to previous page or reload this one? -->
-      <v-btn
-        :disabled="
-          !(
-            selected_student &&
-            selected_round &&
-            selected_start_day &&
-            selected_time
-          )
-        "
-        to="/todo"
-        prepend-icon="mdi-check"
-        color="primary"
-        >Ronde(s) inplannen</v-btn
-      >
-    </v-card-actions>
-  </v-card>
+      </BorderCard>
+    </HFillWrapper>
+  </div>
 </template>
 
 <script lang="ts" setup>
 import { ref } from "vue";
+import BorderCard from "@/layouts/CardLayout.vue";
 import Round from "@/components/models/Round";
 import RoundPlanning from "@/components/models/RoundPlanning";
+import HFillWrapper from "@/layouts/HFillWrapper.vue";
 
-const selected_multiple = ref<boolean>(false);
-const selected_student = ref<string>("");
-const selected_start_day = ref<string>(
-  new Date().toISOString().substring(0, 10),
-);
-const selected_end_day = ref<string>("");
-const selected_time = ref<string>("");
-const selected_round = ref<Round | null>(null);
+const frequencys = ["enkel", "wekelijks", "tweewekelijks", "maandelijks"];
+const frequencyDict: Record<string, number> = {
+  enkel: 1,
+  wekelijks: 7,
+  tweewekelijks: 14,
+  maandelijks: 28,
+};
+const startDate = ref<string>(new Date().toISOString().substring(0, 10));
+const endDate = ref("");
+const time = ref("");
+const frequency = ref<string>(frequencys[0]);
 
-/**
- * Gives all the dates in a range
- * @param start startdate in string format
- * @param end enddate in string format
- */
-function getDateRange(start: string, end: string): string[] {
-  if (!end) {
-    return [start];
-  } else {
-    let dates: string[] = [];
-    let current_date = new Date(start);
-    let end_date = new Date(end);
-    while (current_date <= end_date) {
-      dates.push(current_date.toISOString().substring(0, 10));
-      current_date.setDate(current_date.getDate() + 1);
-    }
-
-    return dates;
-  }
-}
+const multipleday = ref<boolean>(false);
 
-// List gets updated when the user updates input field
-let planning = ref<RoundPlanning[]>([]);
+let dayCounter = 0;
 
-function remove_from_planning(index: number) {
-  planning.value.splice(index, 1);
+function frequencyCheck() {
+  if (frequency.value == frequencys[0]) {
+    multipleday.value = false;
+  } else {
+    endDate.value = "";
+    multipleday.value = true;
+  }
 }
 
-/**
- * Would be better if this was a computed property
- * The extra fields in RoutePlanning dont allow for this
- */
-function reset_planning() {
-  planning.value = [];
-  for (let curr_date of getDateRange(
-    selected_start_day.value,
-    selected_end_day.value,
-  )) {
-    planning.value.push({
-      date: curr_date,
-      round: selected_round.value,
-      showinfo: false,
-      edit: false,
-    });
+function add() {
+  if (frequency.value === "enkel") {
+    endDate.value = startDate.value;
   }
+  const start = new Date(startDate.value);
+  const end = new Date(endDate.value);
+  let frequencyCount = frequencyDict[frequency.value];
+  for (const d = start; d <= end; d.setDate(d.getDate() + frequencyCount)) {}
+  startDate.value = "";
+  endDate.value = "";
+  time.value = "";
 }
 
-const mock_students = ref<string[]>([
-  "Michael",
-  "Christopher",
-  "Jessica",
-  "Matthew",
-  "Ashley",
-]);
-
 const mock_rounds = [
   {
     name: "Grote Markt",
@@ -471,3 +267,9 @@ const mock_rounds = [
   },
 ];
 </script>
+
+<style lang="sass">
+.flex
+  display: flex
+  gap: 20px
+</style>

From 9c7a2cac7541451980a76cac3166cb404563ec28 Mon Sep 17 00:00:00 2001
From: arne <arne.vanheule@ugent.be>
Date: Thu, 13 Apr 2023 20:19:28 +0200
Subject: [PATCH 12/21] feat: pages fully functional

---
 .../components/cards/BuildingSelectCard.vue   |  49 +++--
 web/src/components/cards/RoundSelectCard.vue  |  38 ++++
 web/src/router/index.ts                       |   7 +-
 web/src/views/round/RoundMaker.vue            |   1 +
 web/src/views/round/RoundPlanner.vue          | 207 +++++-------------
 5 files changed, 117 insertions(+), 185 deletions(-)
 create mode 100644 web/src/components/cards/RoundSelectCard.vue

diff --git a/web/src/components/cards/BuildingSelectCard.vue b/web/src/components/cards/BuildingSelectCard.vue
index 72023ecf5..08d293a7a 100644
--- a/web/src/components/cards/BuildingSelectCard.vue
+++ b/web/src/components/cards/BuildingSelectCard.vue
@@ -26,40 +26,41 @@
       />
     </template>
     <v-expand-transition>
-    <v-table v-show="garbageinfo" class="mx-2 my-2" density="compact">
-      <thead>
-        <tr>
-          <th
-            v-for="day in ['MA', 'DI', 'WO', 'DO', 'VR', 'ZA', 'ZO']"
-            class="text-center"
-          >
-            {{ day }}
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="item in ['REST', 'GFT', 'PMD', 'PAPIER']" :key="item">
-          <td class="text-center" v-for="afval in 7">
-            <v-chip v-if="afval%2 == 0">{{ item }}</v-chip>
-          </td>
-        </tr>
-      </tbody>
-    </v-table>
+      <v-table v-show="garbageinfo" class="mx-2 my-2" density="compact">
+        <thead>
+          <tr>
+            <th
+              v-for="day in ['MA', 'DI', 'WO', 'DO', 'VR', 'ZA', 'ZO']"
+              :key="day"
+              class="text-center"
+            >
+              {{ day }}
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="item in ['REST', 'GFT', 'PMD', 'PAPIER']" :key="item">
+            <td class="text-center" v-for="afval in 7" :key="afval">
+              <v-chip v-if="afval % 2 == 0">{{ item }}</v-chip>
+            </td>
+          </tr>
+        </tbody>
+      </v-table>
     </v-expand-transition>
   </BorderCard>
 </template>
 
 <script setup lang="ts">
 import BorderCard from "@/layouts/CardLayout.vue";
-import GarbageCard from "@/components/cards/GarbageCard.vue";
 
-const props = defineProps({
+defineProps({
   name: String,
   address: String,
   id: String,
-  garbageinfo : {
-    type: Boolean, 
-    default: true}
+  garbageinfo: {
+    type: Boolean,
+    default: true,
+  },
 });
 </script>
 
diff --git a/web/src/components/cards/RoundSelectCard.vue b/web/src/components/cards/RoundSelectCard.vue
new file mode 100644
index 000000000..57a415895
--- /dev/null
+++ b/web/src/components/cards/RoundSelectCard.vue
@@ -0,0 +1,38 @@
+<template>
+  <BorderCard class="my-2">
+    <template v-slot:title>{{ date }}</template
+    ><template v-slot:append>
+      <div class="mx-1 pb-5">
+        <v-chip class="mr-4" prepend-icon="mdi-clock-time-two-outline">{{
+          time
+        }}</v-chip>
+        <v-icon @click="$emit('remove')" color="error" icon="mdi-close" />
+      </div>
+    </template>
+    <template v-slot:subtitle
+      ><v-icon class="ml-1" icon="mdi-account"></v-icon>{{ name }}</template
+    >
+
+    <div class="d-flex mb-2 ml-4">
+      <v-chip
+        v-for="garbage in ['Rest', 'PMD', 'GFT', 'Papier']"
+        :key="garbage"
+        size="small"
+        class="mx-1"
+        prepend-icon="mdi-recycle"
+        >{{ garbage }}</v-chip
+      >
+    </div>
+  </BorderCard>
+</template>
+
+<script setup lang="ts">
+import BorderCard from "@/layouts/CardLayout.vue";
+
+defineProps({
+  name: String,
+  date: String,
+  time: String,
+  id: String,
+});
+</script>
diff --git a/web/src/router/index.ts b/web/src/router/index.ts
index e4341259d..e8c96ddfe 100644
--- a/web/src/router/index.ts
+++ b/web/src/router/index.ts
@@ -68,12 +68,11 @@ const routes = [
         },
       },
       {
-        path: "/ronde/plannen",
+        path: "/ronde/:id/plannen",
         name: "round_plan",
         component: RoundPlanner,
-        meta: {
-          title: "Ronde plannen",
-        },
+        props: true,
+        meta: {},
       },
       {
         path: "/ronde/nieuw",
diff --git a/web/src/views/round/RoundMaker.vue b/web/src/views/round/RoundMaker.vue
index 9bb73a104..5c16bec99 100644
--- a/web/src/views/round/RoundMaker.vue
+++ b/web/src/views/round/RoundMaker.vue
@@ -26,6 +26,7 @@
       </border-card>
       <building-select-card
         v-for="(building, i) in round"
+        :key="i"
         @remove="deleteBuildingFromRound(i, building)"
         @up="moveBuildingUp(i)"
         @down="moveBuildingDown(i)"
diff --git a/web/src/views/round/RoundPlanner.vue b/web/src/views/round/RoundPlanner.vue
index e2e8a8e5c..bf9653ea7 100644
--- a/web/src/views/round/RoundPlanner.vue
+++ b/web/src/views/round/RoundPlanner.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <HFillWrapper margin="mx-4 mb-4">
-      <BorderCard>
+      <BorderCard :title="`Inplannen voor ${roundName}`">
         <v-row class="py-0 my-4 mx-2">
           <v-col
             cols="1"
@@ -18,6 +18,7 @@
                 'Texas',
                 'Wyoming',
               ]"
+              v-model="student"
               variant="solo"
             ></v-autocomplete></v-col
         ></v-row>
@@ -67,16 +68,29 @@
               label="Starttijd"
               variant="solo"
               type="time"
+              v-model="time"
             ></v-text-field
           ></v-col>
         </v-row>
         <v-card-actions
-          ><v-spacer></v-spacer
+          ><v-btn prepend-icon="mdi-plus" @click="updateRounds()"
+            >Toevoegen</v-btn
+          >
+          <v-spacer></v-spacer
           ><v-btn prepend-icon="mdi-check"
             >Ronde inplannen</v-btn
           ></v-card-actions
         >
       </BorderCard>
+      <RoundSelectCard
+        v-for="(round, i) in rounds"
+        :key="i"
+        @remove="removeFromRounds(i)"
+        :name="round.name"
+        :date="round.date"
+        :time="round.time"
+      >
+      </RoundSelectCard>
     </HFillWrapper>
   </div>
 </template>
@@ -84,10 +98,13 @@
 <script lang="ts" setup>
 import { ref } from "vue";
 import BorderCard from "@/layouts/CardLayout.vue";
-import Round from "@/components/models/Round";
-import RoundPlanning from "@/components/models/RoundPlanning";
 import HFillWrapper from "@/layouts/HFillWrapper.vue";
+import RoundSelectCard from "@/components/cards/RoundSelectCard.vue";
 
+// TODO: rondenaam opvragen door id en die hierboven invullen, temporary variabele
+const roundName = "Ronde zuid";
+
+const student = ref<string>("");
 const frequencys = ["enkel", "wekelijks", "tweewekelijks", "maandelijks"];
 const frequencyDict: Record<string, number> = {
   enkel: 1,
@@ -96,176 +113,52 @@ const frequencyDict: Record<string, number> = {
   maandelijks: 28,
 };
 const startDate = ref<string>(new Date().toISOString().substring(0, 10));
-const endDate = ref("");
-const time = ref("");
+const endDate = ref<string>("");
+const time = ref<string>("");
 const frequency = ref<string>(frequencys[0]);
 
 const multipleday = ref<boolean>(false);
 
-let dayCounter = 0;
-
-function frequencyCheck() {
-  if (frequency.value == frequencys[0]) {
-    multipleday.value = false;
-  } else {
-    endDate.value = "";
-    multipleday.value = true;
-  }
+interface plannedRound {
+  date: string;
+  name: string;
+  time: string;
 }
 
-function add() {
+let rounds = ref<plannedRound[]>([]);
+
+function updateRounds() {
   if (frequency.value === "enkel") {
     endDate.value = startDate.value;
   }
   const start = new Date(startDate.value);
   const end = new Date(endDate.value);
+
   let frequencyCount = frequencyDict[frequency.value];
-  for (const d = start; d <= end; d.setDate(d.getDate() + frequencyCount)) {}
+  for (const d = start; d <= end; d.setDate(d.getDate() + frequencyCount)) {
+    rounds.value.push({
+      name: student.value,
+      date: d.toISOString().substring(0, 10),
+      time: time.value,
+    });
+  }
   startDate.value = "";
   endDate.value = "";
   time.value = "";
 }
 
-const mock_rounds = [
-  {
-    name: "Grote Markt",
-    start: "13:30",
-    end: "14:00",
-    started: true,
-    student: "Emma",
-    comments: true,
-    current_building: 5,
-    buildings: [
-      {
-        name: "Smith",
-        address: "Gent, Belgium",
-        deltatime: "10 min",
-        comments: false,
-        amount_of_pics: 5,
-      },
-      {
-        name: "Johnson",
-        address: "Brussels, Belgium",
-        deltatime: "35 min",
-        comments: false,
-        amount_of_pics: 2,
-      },
-      {
-        name: "Smith",
-        address: "Gent, Belgium",
-        deltatime: "10 min",
-        comments: true,
-        amount_of_pics: 5,
-      },
-      {
-        name: "Johnson",
-        address: "Brussels, Belgium",
-        deltatime: "35 min",
-        comments: false,
-        amount_of_pics: 2,
-      },
-      {
-        name: "Brown",
-        address: "Antwerp, Belgium",
-        deltatime: "25 min",
-        comments: true,
-        amount_of_pics: 4,
-      },
-    ],
-  },
-  {
-    name: "Vrijdagmarkt",
-    start: "16:00",
-    end: "",
-    started: true,
-    student: "Sophie",
-    comments: false,
-    current_building: 1,
-    buildings: [
-      {
-        name: "Garcia",
-        address: "Bruges, Belgium",
-        deltatime: "15 min",
-        comments: false,
-        amount_of_pics: 3,
-      },
-      {
-        name: "Miller",
-        address: "Leuven, Belgium",
-        deltatime: "20 min",
-        comments: false,
-        amount_of_pics: 2,
-      },
-      {
-        name: "Clark",
-        address: "Ostend, Belgium",
-        deltatime: "30 min",
-        comments: false,
-        amount_of_pics: 4,
-      },
-      {
-        name: "Miller",
-        address: "Leuven, Belgium",
-        deltatime: "20 min",
-        comments: false,
-        amount_of_pics: 2,
-      },
-      {
-        name: "Clark",
-        address: "Ostend, Belgium",
-        deltatime: "30 min",
-        comments: false,
-        amount_of_pics: 4,
-      },
-      {
-        name: "Miller",
-        address: "Leuven, Belgium",
-        deltatime: "20 min",
-        comments: false,
-        amount_of_pics: 2,
-      },
-      {
-        name: "Clark",
-        address: "Ostend, Belgium",
-        deltatime: "30 min",
-        comments: false,
-        amount_of_pics: 4,
-      },
-    ],
-  },
-  {
-    name: "Korenmarkt",
-    start: "16:15",
-    end: "",
-    student: "Alex",
-    started: false,
-    comments: false,
-    current_building: 0,
-    buildings: [
-      {
-        name: "Wilson",
-        address: "Veldstraat, Belgium",
-        deltatime: "5 min",
-        comments: false,
-        amount_of_pics: 3,
-      },
-      {
-        name: "Moore",
-        address: "Liege, Belgium",
-        deltatime: "45 min",
-        comments: false,
-        amount_of_pics: 5,
-      },
-      {
-        name: "Anderson",
-        address: "Mons, Belgium",
-        deltatime: "30 min",
-        comments: false,
-        amount_of_pics: 2,
-      },
-    ],
-  },
-];
+function frequencyCheck() {
+  if (frequency.value == frequencys[0]) {
+    multipleday.value = false;
+  } else {
+    endDate.value = "";
+    multipleday.value = true;
+  }
+}
+
+function removeFromRounds(index: number) {
+  rounds.value.splice(index, 1);
+}
 </script>
 
 <style lang="sass">

From 10cc9a4f37f4e5bf5050a6756bcc3d452ea02aa2 Mon Sep 17 00:00:00 2001
From: arne <arne.vanheule@ugent.be>
Date: Thu, 13 Apr 2023 20:49:16 +0200
Subject: [PATCH 13/21] fix: link

---
 web/src/components/cards/RoundSelectCard.vue | 5 ++++-
 web/src/router/index.ts                      | 5 +++--
 web/src/views/dashboard/Round.vue            | 2 +-
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/web/src/components/cards/RoundSelectCard.vue b/web/src/components/cards/RoundSelectCard.vue
index 57a415895..72683a799 100644
--- a/web/src/components/cards/RoundSelectCard.vue
+++ b/web/src/components/cards/RoundSelectCard.vue
@@ -10,7 +10,9 @@
       </div>
     </template>
     <template v-slot:subtitle
-      ><v-icon class="ml-1" icon="mdi-account"></v-icon>{{ name }}</template
+      ><Avatar class="mx-1" size="x-small" :name="name" /><v-subtitle>{{
+        name
+      }}</v-subtitle></template
     >
 
     <div class="d-flex mb-2 ml-4">
@@ -28,6 +30,7 @@
 
 <script setup lang="ts">
 import BorderCard from "@/layouts/CardLayout.vue";
+import Avatar from "@/components/Avatar.vue";
 
 defineProps({
   name: String,
diff --git a/web/src/router/index.ts b/web/src/router/index.ts
index e8c96ddfe..c473107a5 100644
--- a/web/src/router/index.ts
+++ b/web/src/router/index.ts
@@ -71,8 +71,9 @@ const routes = [
         path: "/ronde/:id/plannen",
         name: "round_plan",
         component: RoundPlanner,
-        props: true,
-        meta: {},
+        meta: {
+          title: "Ronde plannen",
+        },
       },
       {
         path: "/ronde/nieuw",
diff --git a/web/src/views/dashboard/Round.vue b/web/src/views/dashboard/Round.vue
index cae67424f..16dfe6cba 100644
--- a/web/src/views/dashboard/Round.vue
+++ b/web/src/views/dashboard/Round.vue
@@ -12,7 +12,7 @@
       prepend-icon="mdi-plus"
       color="primary"
       class="mr-3"
-      :to="{ name: 'round_plan' }"
+      :to="{ name: 'round_plan', params: {id: 1} }"
     >
       Nieuwe ronde Plannen
     </v-btn>

From dc3ba4ed2a9e004698ce0ba11f413161b6e790b3 Mon Sep 17 00:00:00 2001
From: arne <arne.vanheule@ugent.be>
Date: Thu, 13 Apr 2023 23:22:21 +0200
Subject: [PATCH 14/21] chore: lint

---
 web/src/components/PhotoButton.vue | 17 ++++++++---------
 web/src/views/dashboard/Round.vue  |  2 +-
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/web/src/components/PhotoButton.vue b/web/src/components/PhotoButton.vue
index dc583dd71..5ff48088b 100644
--- a/web/src/components/PhotoButton.vue
+++ b/web/src/components/PhotoButton.vue
@@ -1,12 +1,11 @@
 <template>
-   <v-file-input
-      label="File input"
-      outlined
-      dense
-      capture="user"
-      accept="image/*"
-    ></v-file-input>
+  <v-file-input
+    label="File input"
+    outlined
+    dense
+    capture="user"
+    accept="image/*"
+  ></v-file-input>
 </template>
 
-<script setup lang="ts">
-</script>
+<script setup lang="ts"></script>
diff --git a/web/src/views/dashboard/Round.vue b/web/src/views/dashboard/Round.vue
index 16dfe6cba..4fd3787f5 100644
--- a/web/src/views/dashboard/Round.vue
+++ b/web/src/views/dashboard/Round.vue
@@ -12,7 +12,7 @@
       prepend-icon="mdi-plus"
       color="primary"
       class="mr-3"
-      :to="{ name: 'round_plan', params: {id: 1} }"
+      :to="{ name: 'round_plan', params: { id: 1 } }"
     >
       Nieuwe ronde Plannen
     </v-btn>

From 3899267257215749c7705381606f72f18b46d2bd Mon Sep 17 00:00:00 2001
From: arne <vanheule.arne@ugent.be>
Date: Thu, 20 Apr 2023 13:31:54 +0200
Subject: [PATCH 15/21] fix: not the correct dates

---
 web/src/components/cards/RoundSelectCard.vue |  2 +-
 web/src/views/round/RoundPlanner.vue         | 16 +++++++---------
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/web/src/components/cards/RoundSelectCard.vue b/web/src/components/cards/RoundSelectCard.vue
index 41cc6b999..95ba6081a 100644
--- a/web/src/components/cards/RoundSelectCard.vue
+++ b/web/src/components/cards/RoundSelectCard.vue
@@ -1,6 +1,6 @@
 <template>
   <BorderCard class="my-2">
-    <template v-slot:title>{{ date?.toLocaleDateString('nl') }}</template
+    <template v-slot:title>{{ date?.toLocaleDateString() }}</template
     ><template v-slot:append>
       <div class="mx-1 pb-5">
         <v-chip class="mr-4" prepend-icon="mdi-clock-time-two-outline">{{
diff --git a/web/src/views/round/RoundPlanner.vue b/web/src/views/round/RoundPlanner.vue
index 6e0e7f277..18af959a8 100644
--- a/web/src/views/round/RoundPlanner.vue
+++ b/web/src/views/round/RoundPlanner.vue
@@ -57,7 +57,7 @@
                 v-model="startDate"
                 prepend-inner-icon="mdi-calendar"
                 variant="solo"
-                class="mr-2"
+                class="mr-1"
                 type="date"
                 label="Startdatum"
               ></v-text-field
@@ -65,7 +65,7 @@
                 v-model="endDate"
                 prepend-inner-icon="mdi-calendar"
                 variant="solo"
-                class="ml-2"
+                class="ml-1"
                 type="date"
                 label="Einddatum"
               ></v-text-field></div></v-col
@@ -144,7 +144,7 @@ const frequencyDict: Record<string, number> = {
 };
 
 const startDate = ref<string>(new Date().toISOString().substring(0, 10));
-const endDate = ref<string>("");
+const endDate = ref<string>(new Date().toISOString().substring(0, 10));
 const time = ref<string>("");
 const frequency = ref<string>(frequencys[0]);
 const multipleday = ref<boolean>(false);
@@ -155,6 +155,7 @@ interface plannedRound {
   time: string;
 }
 let rounds = ref<Array<plannedRound>>([]);
+
 function updateRounds() {
   if (frequency.value === "enkel") {
     endDate.value = startDate.value;
@@ -165,13 +166,10 @@ function updateRounds() {
   for (const d = start; d <= end; d.setDate(d.getDate() + frequencyCount)) {
     rounds.value.push({
       name: getFullStudentName(student.value),
-      date: d,
+      date: new Date(d),
       time: time.value,
     });
   }
-  startDate.value = "";
-  endDate.value = "";
-  time.value = "";
 }
 function frequencyCheck() {
   if (frequency.value == frequencys[0]) {
@@ -194,12 +192,13 @@ function getFullStudentName(s: Result<UserQuery> | undefined): string {
 }
 
 function formatDate(d : Date) : string{
-  return `${d.getMonth() + 1}/${d.getDay() + 1}/${d.getFullYear()}`
+  return `${d.getMonth() + 1}/${d.getDate()}/${d.getFullYear()}`
 }
 
 function planRounds() {
   for (let plan of rounds.value) {
     tryOrAlertAsync(async () => {
+      console.log(plan.date)
       const dt_date = new Date(formatDate(plan.date) + " " + plan.time + ":00");
       console.log(formatDate(plan.date) + " " + plan.time + ":00")
       console.log(dt_date)
@@ -210,7 +209,6 @@ function planRounds() {
           round_id: round_id,
         })
         .then(() => {
-          console.log("Succes");
           rounds.value = [];
         });
     });

From d27072258fd16fce8f6a8ade371f521e7591b247 Mon Sep 17 00:00:00 2001
From: arne <vanheule.arne@ugent.be>
Date: Thu, 20 Apr 2023 14:25:27 +0200
Subject: [PATCH 16/21] feat: fully functional API integration

---
 .../components/cards/BuildingSelectCard.vue   |  57 +++++++-
 web/src/views/round/RoundMaker.vue            | 138 ++++++++++++------
 2 files changed, 142 insertions(+), 53 deletions(-)

diff --git a/web/src/components/cards/BuildingSelectCard.vue b/web/src/components/cards/BuildingSelectCard.vue
index 08d293a7a..1eb048b56 100644
--- a/web/src/components/cards/BuildingSelectCard.vue
+++ b/web/src/components/cards/BuildingSelectCard.vue
@@ -40,8 +40,8 @@
         </thead>
         <tbody>
           <tr v-for="item in ['REST', 'GFT', 'PMD', 'PAPIER']" :key="item">
-            <td class="text-center" v-for="afval in 7" :key="afval">
-              <v-chip v-if="afval % 2 == 0">{{ item }}</v-chip>
+            <td class="text-center" v-for="index in 7" :key="index">
+              <v-chip size="small" v-if="handleGarbageMap(item, index)">{{ item }}</v-chip>
             </td>
           </tr>
         </tbody>
@@ -52,16 +52,61 @@
 
 <script setup lang="ts">
 import BorderCard from "@/layouts/CardLayout.vue";
+import { ref, onMounted } from "vue";
+import { GarbageQuery } from "@selab-2/groep-1-query";
+import { tryOrAlertAsync } from "@/try";
 
-defineProps({
-  name: String,
-  address: String,
-  id: String,
+const tempActions = ['REST', 'GFT', 'PMD', ]
+const garbageMap = ref<Map<String, Boolean[]>>(new Map());
+
+onMounted(() => {
+
+  for (const action of tempActions){
+    garbageMap.value.set(action, new Array(7).fill(false))
+  }
+
+
+  tryOrAlertAsync(async () => {
+    const garbageOfBuilding = await new GarbageQuery().getAll({building_id: props.buildingId})
+    
+    for (const garbage of garbageOfBuilding){
+      const dayIndex = new Date(garbage.pickup_time).getDay()
+      const actionDesc = garbage.action.description
+
+      // See if it is garbage to pick up or just a task
+      if (actionDesc.includes('Ophaling')){
+        const garbageType = actionDesc.split(' ')[1]
+        console.log(garbageType)
+
+        garbageMap.value.get(garbageType === 'restafval'? 'REST': garbageType)![dayIndex] = true
+      }
+    }
+
+    console.log(garbageMap)
+
+    
+})
+});
+
+const props = defineProps({
+  name: { type: String, required: true },
+  address: { type: String, required: true },
+  buildingId: { type: Number, required: true },
   garbageinfo: {
     type: Boolean,
     default: true,
   },
 });
+
+function handleGarbageMap(garbageType : String, day : number){
+  const planningArray = garbageMap.value.get(garbageType)
+  if(planningArray) {
+    return planningArray[day]
+  } else {
+    return false
+  }
+
+}
 </script>
 
 <style scoped>
diff --git a/web/src/views/round/RoundMaker.vue b/web/src/views/round/RoundMaker.vue
index 5c16bec99..529a8fd46 100644
--- a/web/src/views/round/RoundMaker.vue
+++ b/web/src/views/round/RoundMaker.vue
@@ -16,22 +16,23 @@
             label="Toon afvalkalender"
           ></v-switch
         ></template>
-        <v-text-field class="ml-3 mr-5" label="Naam ronde" variant="solo" />
+        <v-text-field class="ml-3 mr-5" label="Naam ronde" v-model="newRoundName" variant="solo" />
         <v-card-actions class="d-flex align-center"
           ><v-spacer></v-spacer
-          ><v-btn class="ml-3" prepend-icon="mdi-check"
+          ><v-btn class="ml-3" prepend-icon="mdi-check" @click="makeRound()"
             >Ronde aanmaken</v-btn
           ></v-card-actions
         >
       </border-card>
       <building-select-card
-        v-for="(building, i) in round"
+        v-for="(building, i) in newRoundBuildings"
         :key="i"
         @remove="deleteBuildingFromRound(i, building)"
         @up="moveBuildingUp(i)"
         @down="moveBuildingDown(i)"
         :name="building.name"
-        :address="building.adress"
+        :building-id="building.id"
+        :address="getFullAddress(building)"
         :garbageinfo="garbageinfo"
       ></building-select-card>
     </v-col>
@@ -52,11 +53,11 @@
       </border-card>
 
       <building-info-card
-        v-for="building in filterlist()"
-        :key="building.listid"
-        :name="building.name"
-        :address="building.adress"
-        @clicked="deleteBuildingFromAvailable(building.listid, building)"
+        v-for="entry in filterlist()"
+        :key="entry.listID"
+        :name="entry.building.name"
+        :address="getFullAddress(entry.building)"
+        @clicked="deleteBuildingFromAvailable(entry.listID, entry.building)"
       >
       </building-info-card>
     </v-col>
@@ -64,69 +65,112 @@
 </template>
 
 <script lang="ts" setup>
-import { reactive, ref, Ref } from "vue";
+import { reactive, ref, Ref, onMounted } from "vue";
 import BorderCard from "@/layouts/CardLayout.vue";
 import BuildingSelectCard from "@/components/cards/BuildingSelectCard.vue";
 import BuildingInfoCard from "@/components/cards/BuildingInfoCard.vue";
+import {
+  Result,
+  BuildingQuery,
+RoundQuery,
+} from "@selab-2/groep-1-query";
+import { RoundBuildingQuery } from "@selab-2/groep-1-query//src/round_building"
+import { tryOrAlertAsync } from "@/try";
+import router from "@/router";
+
+const availableBuildings = ref<Result<BuildingQuery>[]>([])
+
+
+onMounted(() => {
+  tryOrAlertAsync(async () => {
+    /* TODO implement if selab is bumped
+    const allBuildings = await new BuildingQuery().getAll();
+    const available : Result<RoundBuildingQuery>[] = []
+
+    for (const building of allBuildings){
+      try {
+        await new RoundBuildingQuery().getOne(building.id)
+      }
+      catch {
+        available.push(building)
+      }
+    }
+    */
+    availableBuildings.value = await new BuildingQuery().getAll();
+  });
+});
 
 const garbageinfo: Ref<boolean> = ref(true);
 
+const newRoundName = ref<string>('')
+
 // The query that will be used to filter all available buildings
 const searchquery: Ref<string> = ref("");
 
-/*
- * TODO: Building should be populated via a api/backend call
- * For now it's just mockdata
- * Reactive so the lists on screen update in real time
- */
-const buildings: { name: string; adress: string }[] = reactive([
-  { adress: "10841 Sutter CircleSutter Creek95685", name: "Lee" },
-  { adress: "915 Sacramento StreetBakersfield93305", name: "Lartigue" },
-  { adress: "1383 Purdue StreetSan Leandro94579", name: "Anderson" },
-  { adress: "553 South Arlington RoadOrange92869", name: "Campbell" },
-  { adress: "450 C StreetHayward94541", name: "Kahn" },
-  { adress: "915 Sacramento StreetBakersfield93305", name: "Amezaga" },
-  { adress: "800 California 116Sebastopol95472", name: "Petersen" },
-  { adress: "7725 Ney AvenueOakland94605", name: "Hof" },
-  { adress: "3777 Mowry AvenueFremont94538", name: "Johnson" },
-  { adress: "1011 San Jose StreetSan Leandro94577", name: "Rodriguez" },
-]);
 
 /*
  * Round is the list that will be populated by the user
  * Should always start as an empty list
  */
-const round: { name: string; adress: string }[] = reactive([]);
+const newRoundBuildings = ref<Result<BuildingQuery>[]>([])
+
+type BuildingEntry = {
+  building : Result<BuildingQuery>,
+  listID: number
+}
 
 /**
  * TODO: This function will give back the buildings which match the string given by the user
  * Change this with an autocomplete but currently doesnt work with objects from mockdata
  * Pagination is something that could be introduced in the API aswell?
  */
-function filterlist(): { name: string; adress: string; listid: number }[] {
-  let filteredlist: { name: string; adress: string; listid: number }[] = [];
-  buildings.forEach((building, index) => {
+function filterlist(): BuildingEntry[] {
+  let filteredlist: BuildingEntry[] = [];
+  availableBuildings.value.forEach((building, index) => {
     if (building.name.toLowerCase().includes(searchquery.value.toLowerCase())) {
       filteredlist.push({
-        name: building.name,
-        adress: building.adress,
-        listid: index,
+        building: building,
+        listID: index
       });
     }
   });
   return filteredlist;
 }
 
+function getFullAddress(building : Result<BuildingQuery>){
+  const address = building.address
+  return `${address.street} ${address.number}, ${address.city}`
+}
+
+function makeRound(){
+  tryOrAlertAsync(async () => {
+    const newRound = await new RoundQuery().createOne({
+      name: newRoundName.value
+    })
+
+    for (const building of newRoundBuildings.value){
+      await new RoundBuildingQuery().createOne({
+        building_id: building.id,
+        round_id: newRound.id
+      })
+
+    }
+    
+    router.push({name: 'round', params: {id: newRound.id}})
+
+  });
+}
+
 /*
  * Next 2 functions handle switching buildings from one list to another
  * This one handles switching one from round to all the buildings
  */
 function deleteBuildingFromAvailable(
   index: number,
-  building: { adress: string; name: string },
+  building: Result<BuildingQuery>,
 ) {
-  buildings.splice(index, 1);
-  round.push(building);
+  availableBuildings.value.splice(index, 1);
+  newRoundBuildings.value.push(building);
 }
 
 /*
@@ -134,10 +178,10 @@ function deleteBuildingFromAvailable(
  */
 function deleteBuildingFromRound(
   index: number,
-  building: { adress: string; name: string },
+  building: Result<BuildingQuery>,
 ) {
-  round.splice(index, 1);
-  buildings.push(building);
+  newRoundBuildings.value.splice(index, 1);
+  availableBuildings.value.push(building);
 }
 
 /*
@@ -146,9 +190,9 @@ function deleteBuildingFromRound(
  */
 function moveBuildingUp(index: number) {
   if (index > 0) {
-    let temp = round[index];
-    round[index] = round[index - 1];
-    round[index - 1] = temp;
+    let temp = newRoundBuildings.value[index];
+    newRoundBuildings.value[index] = newRoundBuildings.value[index - 1];
+    newRoundBuildings.value[index - 1] = temp;
   }
 }
 
@@ -156,10 +200,10 @@ function moveBuildingUp(index: number) {
  * Move a building down in the list
  */
 function moveBuildingDown(index: number) {
-  if (round.length - 1 > index) {
-    let temp = round[index];
-    round[index] = round[index + 1];
-    round[index + 1] = temp;
+  if (newRoundBuildings.value.length - 1 > index) {
+    let temp = newRoundBuildings.value[index];
+    newRoundBuildings.value[index] = newRoundBuildings.value[index + 1];
+    newRoundBuildings.value[index + 1] = temp;
   }
 }
 </script>

From e0408091238ae26d0d7e1fb59269f22c94821a09 Mon Sep 17 00:00:00 2001
From: arne <vanheule.arne@ugent.be>
Date: Thu, 20 Apr 2023 14:26:27 +0200
Subject: [PATCH 17/21] chore: linter

---
 .../components/cards/BuildingSelectCard.vue   | 51 ++++++++---------
 web/src/views/round/RoundMaker.vue            | 55 +++++++++----------
 web/src/views/round/RoundPlanner.vue          | 10 ++--
 3 files changed, 57 insertions(+), 59 deletions(-)

diff --git a/web/src/components/cards/BuildingSelectCard.vue b/web/src/components/cards/BuildingSelectCard.vue
index 1eb048b56..907d3ac09 100644
--- a/web/src/components/cards/BuildingSelectCard.vue
+++ b/web/src/components/cards/BuildingSelectCard.vue
@@ -41,7 +41,9 @@
         <tbody>
           <tr v-for="item in ['REST', 'GFT', 'PMD', 'PAPIER']" :key="item">
             <td class="text-center" v-for="index in 7" :key="index">
-              <v-chip size="small" v-if="handleGarbageMap(item, index)">{{ item }}</v-chip>
+              <v-chip size="small" v-if="handleGarbageMap(item, index)">{{
+                item
+              }}</v-chip>
             </td>
           </tr>
         </tbody>
@@ -56,36 +58,36 @@ import { ref, onMounted } from "vue";
 import { GarbageQuery } from "@selab-2/groep-1-query";
 import { tryOrAlertAsync } from "@/try";
 
-const tempActions = ['REST', 'GFT', 'PMD', ]
+const tempActions = ["REST", "GFT", "PMD"];
 const garbageMap = ref<Map<String, Boolean[]>>(new Map());
 
 onMounted(() => {
-
-  for (const action of tempActions){
-    garbageMap.value.set(action, new Array(7).fill(false))
+  for (const action of tempActions) {
+    garbageMap.value.set(action, new Array(7).fill(false));
   }
 
-
   tryOrAlertAsync(async () => {
-    const garbageOfBuilding = await new GarbageQuery().getAll({building_id: props.buildingId})
-    
-    for (const garbage of garbageOfBuilding){
-      const dayIndex = new Date(garbage.pickup_time).getDay()
-      const actionDesc = garbage.action.description
+    const garbageOfBuilding = await new GarbageQuery().getAll({
+      building_id: props.buildingId,
+    });
+
+    for (const garbage of garbageOfBuilding) {
+      const dayIndex = new Date(garbage.pickup_time).getDay();
+      const actionDesc = garbage.action.description;
 
       // See if it is garbage to pick up or just a task
-      if (actionDesc.includes('Ophaling')){
-        const garbageType = actionDesc.split(' ')[1]
-        console.log(garbageType)
+      if (actionDesc.includes("Ophaling")) {
+        const garbageType = actionDesc.split(" ")[1];
+        console.log(garbageType);
 
-        garbageMap.value.get(garbageType === 'restafval'? 'REST': garbageType)![dayIndex] = true
+        garbageMap.value.get(
+          garbageType === "restafval" ? "REST" : garbageType,
+        )![dayIndex] = true;
       }
     }
 
-    console.log(garbageMap)
-
-    
-})
+    console.log(garbageMap);
+  });
 });
 
 const props = defineProps({
@@ -98,14 +100,13 @@ const props = defineProps({
   },
 });
 
-function handleGarbageMap(garbageType : String, day : number){
-  const planningArray = garbageMap.value.get(garbageType)
-  if(planningArray) {
-    return planningArray[day]
+function handleGarbageMap(garbageType: String, day: number) {
+  const planningArray = garbageMap.value.get(garbageType);
+  if (planningArray) {
+    return planningArray[day];
   } else {
-    return false
+    return false;
   }
-
 }
 </script>
 
diff --git a/web/src/views/round/RoundMaker.vue b/web/src/views/round/RoundMaker.vue
index 529a8fd46..259f29b32 100644
--- a/web/src/views/round/RoundMaker.vue
+++ b/web/src/views/round/RoundMaker.vue
@@ -16,7 +16,12 @@
             label="Toon afvalkalender"
           ></v-switch
         ></template>
-        <v-text-field class="ml-3 mr-5" label="Naam ronde" v-model="newRoundName" variant="solo" />
+        <v-text-field
+          class="ml-3 mr-5"
+          label="Naam ronde"
+          v-model="newRoundName"
+          variant="solo"
+        />
         <v-card-actions class="d-flex align-center"
           ><v-spacer></v-spacer
           ><v-btn class="ml-3" prepend-icon="mdi-check" @click="makeRound()"
@@ -65,21 +70,16 @@
 </template>
 
 <script lang="ts" setup>
-import { reactive, ref, Ref, onMounted } from "vue";
+import { ref, Ref, onMounted } from "vue";
 import BorderCard from "@/layouts/CardLayout.vue";
 import BuildingSelectCard from "@/components/cards/BuildingSelectCard.vue";
 import BuildingInfoCard from "@/components/cards/BuildingInfoCard.vue";
-import {
-  Result,
-  BuildingQuery,
-RoundQuery,
-} from "@selab-2/groep-1-query";
-import { RoundBuildingQuery } from "@selab-2/groep-1-query//src/round_building"
+import { Result, BuildingQuery, RoundQuery } from "@selab-2/groep-1-query";
+import { RoundBuildingQuery } from "@selab-2/groep-1-query//src/round_building";
 import { tryOrAlertAsync } from "@/try";
 import router from "@/router";
 
-const availableBuildings = ref<Result<BuildingQuery>[]>([])
-
+const availableBuildings = ref<Result<BuildingQuery>[]>([]);
 
 onMounted(() => {
   tryOrAlertAsync(async () => {
@@ -102,22 +102,21 @@ onMounted(() => {
 
 const garbageinfo: Ref<boolean> = ref(true);
 
-const newRoundName = ref<string>('')
+const newRoundName = ref<string>("");
 
 // The query that will be used to filter all available buildings
 const searchquery: Ref<string> = ref("");
 
-
 /*
  * Round is the list that will be populated by the user
  * Should always start as an empty list
  */
-const newRoundBuildings = ref<Result<BuildingQuery>[]>([])
+const newRoundBuildings = ref<Result<BuildingQuery>[]>([]);
 
 type BuildingEntry = {
-  building : Result<BuildingQuery>,
-  listID: number
-}
+  building: Result<BuildingQuery>;
+  listID: number;
+};
 
 /**
  * TODO: This function will give back the buildings which match the string given by the user
@@ -130,34 +129,32 @@ function filterlist(): BuildingEntry[] {
     if (building.name.toLowerCase().includes(searchquery.value.toLowerCase())) {
       filteredlist.push({
         building: building,
-        listID: index
+        listID: index,
       });
     }
   });
   return filteredlist;
 }
 
-function getFullAddress(building : Result<BuildingQuery>){
-  const address = building.address
-  return `${address.street} ${address.number}, ${address.city}`
+function getFullAddress(building: Result<BuildingQuery>) {
+  const address = building.address;
+  return `${address.street} ${address.number}, ${address.city}`;
 }
 
-function makeRound(){
+function makeRound() {
   tryOrAlertAsync(async () => {
     const newRound = await new RoundQuery().createOne({
-      name: newRoundName.value
-    })
+      name: newRoundName.value,
+    });
 
-    for (const building of newRoundBuildings.value){
+    for (const building of newRoundBuildings.value) {
       await new RoundBuildingQuery().createOne({
         building_id: building.id,
-        round_id: newRound.id
-      })
-
+        round_id: newRound.id,
+      });
     }
-    
-    router.push({name: 'round', params: {id: newRound.id}})
 
+    router.push({ name: "round", params: { id: newRound.id } });
   });
 }
 
diff --git a/web/src/views/round/RoundPlanner.vue b/web/src/views/round/RoundPlanner.vue
index 18af959a8..6527c0497 100644
--- a/web/src/views/round/RoundPlanner.vue
+++ b/web/src/views/round/RoundPlanner.vue
@@ -191,17 +191,17 @@ function getFullStudentName(s: Result<UserQuery> | undefined): string {
   }
 }
 
-function formatDate(d : Date) : string{
-  return `${d.getMonth() + 1}/${d.getDate()}/${d.getFullYear()}`
+function formatDate(d: Date): string {
+  return `${d.getMonth() + 1}/${d.getDate()}/${d.getFullYear()}`;
 }
 
 function planRounds() {
   for (let plan of rounds.value) {
     tryOrAlertAsync(async () => {
-      console.log(plan.date)
+      console.log(plan.date);
       const dt_date = new Date(formatDate(plan.date) + " " + plan.time + ":00");
-      console.log(formatDate(plan.date) + " " + plan.time + ":00")
-      console.log(dt_date)
+      console.log(formatDate(plan.date) + " " + plan.time + ":00");
+      console.log(dt_date);
       await new ScheduleQuery()
         .createOne({
           user_id: student.value?.id,

From b1c98b9a65e038d4658dbbd3728150b472a5b906 Mon Sep 17 00:00:00 2001
From: arne <vanheule.arne@ugent.be>
Date: Thu, 20 Apr 2023 18:39:07 +0200
Subject: [PATCH 18/21] feat: functionality for demo, delete, routing, etc

---
 .../components/cards/BuildingSelectCard.vue   |  3 --
 web/src/views/dashboard/Round.vue             |  8 -----
 web/src/views/round/Round.vue                 | 31 +++++++++++++++++--
 web/src/views/round/RoundDetail.vue           |  6 +++-
 web/src/views/round/RoundPlanner.vue          |  7 +----
 5 files changed, 34 insertions(+), 21 deletions(-)

diff --git a/web/src/components/cards/BuildingSelectCard.vue b/web/src/components/cards/BuildingSelectCard.vue
index 907d3ac09..9cd948f39 100644
--- a/web/src/components/cards/BuildingSelectCard.vue
+++ b/web/src/components/cards/BuildingSelectCard.vue
@@ -78,15 +78,12 @@ onMounted(() => {
       // See if it is garbage to pick up or just a task
       if (actionDesc.includes("Ophaling")) {
         const garbageType = actionDesc.split(" ")[1];
-        console.log(garbageType);
 
         garbageMap.value.get(
           garbageType === "restafval" ? "REST" : garbageType,
         )![dayIndex] = true;
       }
     }
-
-    console.log(garbageMap);
   });
 });
 
diff --git a/web/src/views/dashboard/Round.vue b/web/src/views/dashboard/Round.vue
index b05b15576..92067bae6 100644
--- a/web/src/views/dashboard/Round.vue
+++ b/web/src/views/dashboard/Round.vue
@@ -8,14 +8,6 @@
     >
       Nieuwe ronde maken
     </v-btn>
-    <v-btn
-      prepend-icon="mdi-plus"
-      color="primary"
-      class="mr-3"
-      :to="{ name: 'round_plan', params: { id: 1 } }"
-    >
-      Nieuwe ronde Plannen
-    </v-btn>
   </div>
   <Table
     :entries="rounds"
diff --git a/web/src/views/round/Round.vue b/web/src/views/round/Round.vue
index 4b8cedb14..259d8509d 100644
--- a/web/src/views/round/Round.vue
+++ b/web/src/views/round/Round.vue
@@ -1,7 +1,15 @@
 <template>
   <HFillWrapper>
     <div class="space-y-8">
-      <h1>Ronde Korenmarkt</h1>
+      <div style="display: flex; gap: 8px; align-items: center" class="mt-8">
+        <h1>{{ round?.name }}</h1>
+        <div class="flex-grow-1"></div>
+        <RoundedButton
+          icon="mdi-delete-outline"
+          value="Verwijderen"
+          @click="deleteRound()"
+        ></RoundedButton>
+      </div>
 
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
@@ -69,7 +77,12 @@
 </template>
 
 <script setup lang="ts">
-import { BuildingQuery, Result, ScheduleQuery } from "@selab-2/groep-1-query";
+import {
+  BuildingQuery,
+  Result,
+  RoundQuery,
+  ScheduleQuery,
+} from "@selab-2/groep-1-query";
 import { ref, Ref } from "vue";
 import { tryOrAlertAsync } from "@/try";
 import HFillWrapper from "@/layouts/HFillWrapper.vue";
@@ -80,10 +93,15 @@ import router from "@/router";
 import { useRoute } from "vue-router";
 
 const route = useRoute();
-const round_id: number = parseInt(route.params.id[0]);
+const round_id: number = Number(route.params.id);
 
 const buildings: Ref<Array<Result<BuildingQuery>>> = ref([]);
 const schedules: Ref<Array<Result<ScheduleQuery>>> = ref([]);
+const round = ref<Result<RoundQuery>>();
+
+tryOrAlertAsync(async () => {
+  round.value = await new RoundQuery().getOne(round_id);
+});
 
 tryOrAlertAsync(async () => {
   buildings.value = await new BuildingQuery().getAll({ take: 5 });
@@ -92,6 +110,13 @@ tryOrAlertAsync(async () => {
 tryOrAlertAsync(async () => {
   schedules.value = await new ScheduleQuery().getAll({ take: 5 });
 });
+
+function deleteRound() {
+  tryOrAlertAsync(async () => {
+    await new RoundQuery().deleteOne({ id: round_id, name: round.value?.name });
+    router.push({ name: "round_overview" });
+  });
+}
 </script>
 
 <style scoped lang="sass">
diff --git a/web/src/views/round/RoundDetail.vue b/web/src/views/round/RoundDetail.vue
index 0dba8e7e5..6f17e5843 100644
--- a/web/src/views/round/RoundDetail.vue
+++ b/web/src/views/round/RoundDetail.vue
@@ -164,12 +164,16 @@ import { ProgressQuery, Result, ScheduleQuery } from "@selab-2/groep-1-query";
 import { tryOrAlertAsync } from "@/try";
 import RoundedButton from "@/components/buttons/RoundedButton.vue";
 import router from "@/router";
+import { useRoute } from "vue-router";
+
+const route = useRoute();
+const schedule_id: number = Number(route.params.id);
 
 const data: Ref<Result<ScheduleQuery> | null> = ref(null);
 const progressItems: Ref<Map<Number, Result<ProgressQuery>>> = ref(new Map());
 
 tryOrAlertAsync(async () => {
-  data.value = await new ScheduleQuery().getOne(35);
+  data.value = await new ScheduleQuery().getOne(schedule_id);
 });
 
 tryOrAlertAsync(async () => {
diff --git a/web/src/views/round/RoundPlanner.vue b/web/src/views/round/RoundPlanner.vue
index 6527c0497..4c8cb5917 100644
--- a/web/src/views/round/RoundPlanner.vue
+++ b/web/src/views/round/RoundPlanner.vue
@@ -117,7 +117,7 @@ import { tryOrAlertAsync } from "@/try";
 import { useRoute } from "vue-router";
 
 const route = useRoute();
-const round_id: number = parseInt(route.params.id[0]);
+const round_id: number = Number(route.params.id);
 
 const current_round = ref<Result<RoundQuery>>();
 const students = ref<Result<UserQuery>[]>([]);
@@ -126,12 +126,10 @@ const student = ref<Result<UserQuery>>();
 onMounted(() => {
   tryOrAlertAsync(async () => {
     students.value = await new UserQuery().getAll({ student: true });
-    console.log(students.value);
   });
 
   tryOrAlertAsync(async () => {
     current_round.value = await new RoundQuery().getOne(round_id);
-    console.log(current_round);
   });
 });
 
@@ -198,10 +196,7 @@ function formatDate(d: Date): string {
 function planRounds() {
   for (let plan of rounds.value) {
     tryOrAlertAsync(async () => {
-      console.log(plan.date);
       const dt_date = new Date(formatDate(plan.date) + " " + plan.time + ":00");
-      console.log(formatDate(plan.date) + " " + plan.time + ":00");
-      console.log(dt_date);
       await new ScheduleQuery()
         .createOne({
           user_id: student.value?.id,

From e2475aa9d7ca7bfd121e41d0eb32b584616ac051 Mon Sep 17 00:00:00 2001
From: arne <vanheule.arne@ugent.be>
Date: Thu, 20 Apr 2023 19:36:01 +0200
Subject: [PATCH 19/21] fix: comments

---
 web/src/components/cards/BuildingSelectCard.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/web/src/components/cards/BuildingSelectCard.vue b/web/src/components/cards/BuildingSelectCard.vue
index 9cd948f39..6ecc9e736 100644
--- a/web/src/components/cards/BuildingSelectCard.vue
+++ b/web/src/components/cards/BuildingSelectCard.vue
@@ -39,7 +39,7 @@
           </tr>
         </thead>
         <tbody>
-          <tr v-for="item in ['REST', 'GFT', 'PMD', 'PAPIER']" :key="item">
+          <tr v-for="item in ['REST', 'GFT', 'PMD']" :key="item">
             <td class="text-center" v-for="index in 7" :key="index">
               <v-chip size="small" v-if="handleGarbageMap(item, index)">{{
                 item
@@ -58,6 +58,7 @@ import { ref, onMounted } from "vue";
 import { GarbageQuery } from "@selab-2/groep-1-query";
 import { tryOrAlertAsync } from "@/try";
 
+// TODO: discuss with group proper format temp actions
 const tempActions = ["REST", "GFT", "PMD"];
 const garbageMap = ref<Map<String, Boolean[]>>(new Map());
 

From 531ed4ec115aa25274cf29cdc88f47431f845ab8 Mon Sep 17 00:00:00 2001
From: arne <vanheule.arne@ugent.be>
Date: Thu, 20 Apr 2023 20:18:22 +0200
Subject: [PATCH 20/21] fix: uniform style

---
 web/src/views/round/RoundMaker.vue   |  4 ++--
 web/src/views/round/RoundPlanner.vue | 10 +++++-----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/web/src/views/round/RoundMaker.vue b/web/src/views/round/RoundMaker.vue
index 259f29b32..c80bde2d0 100644
--- a/web/src/views/round/RoundMaker.vue
+++ b/web/src/views/round/RoundMaker.vue
@@ -20,7 +20,7 @@
           class="ml-3 mr-5"
           label="Naam ronde"
           v-model="newRoundName"
-          variant="solo"
+          variant="outlined"
         />
         <v-card-actions class="d-flex align-center"
           ><v-spacer></v-spacer
@@ -53,7 +53,7 @@
           class="ml-3 mr-5 mt-3"
           label="Naam van gebouw"
           v-model="searchquery"
-          variant="solo"
+          variant="outlined"
         />
       </border-card>
 
diff --git a/web/src/views/round/RoundPlanner.vue b/web/src/views/round/RoundPlanner.vue
index 4c8cb5917..7817c688f 100644
--- a/web/src/views/round/RoundPlanner.vue
+++ b/web/src/views/round/RoundPlanner.vue
@@ -33,7 +33,7 @@
           <v-col cols="3" class="flex-grow-0 flex-shrink-0"
             ><v-select
               prepend-inner-icon="mdi-replay"
-              variant="solo"
+              variant="outlined"
               label="Frequentie"
               v-model="frequency"
               :items="frequencys"
@@ -47,7 +47,7 @@
               <v-text-field
                 prepend-inner-icon="mdi-calendar"
                 label="Startdatum"
-                variant="solo"
+                variant="outlined"
                 type="date"
                 v-model="startDate"
               ></v-text-field>
@@ -56,7 +56,7 @@
               <v-text-field
                 v-model="startDate"
                 prepend-inner-icon="mdi-calendar"
-                variant="solo"
+                variant="outlined"
                 class="mr-1"
                 type="date"
                 label="Startdatum"
@@ -64,7 +64,7 @@
               ><v-text-field
                 v-model="endDate"
                 prepend-inner-icon="mdi-calendar"
-                variant="solo"
+                variant="outlined"
                 class="ml-1"
                 type="date"
                 label="Einddatum"
@@ -73,7 +73,7 @@
             ><v-text-field
               prepend-inner-icon="mdi-clock-time-two-outline"
               label="Starttijd"
-              variant="solo"
+              variant="outlined"
               type="time"
               v-model="time"
             ></v-text-field

From 4d732eef243152f61710178cf6086b89d14c71cc Mon Sep 17 00:00:00 2001
From: Jens Pots <jens@jenspots.com>
Date: Thu, 20 Apr 2023 21:40:00 +0200
Subject: [PATCH 21/21] fix(web): refined the planning layout

---
 web/src/views/round/RoundPlanner.vue | 150 ++++++++++++++++-----------
 1 file changed, 89 insertions(+), 61 deletions(-)

diff --git a/web/src/views/round/RoundPlanner.vue b/web/src/views/round/RoundPlanner.vue
index 7817c688f..3d3610338 100644
--- a/web/src/views/round/RoundPlanner.vue
+++ b/web/src/views/round/RoundPlanner.vue
@@ -1,12 +1,26 @@
 <template>
   <div>
-    <HFillWrapper margin="mx-4 mb-4">
-      <BorderCard :title="`Inplannen voor ${current_round?.name}`">
-        <v-row class="py-0 my-4 mx-2">
+    <HFillWrapper>
+      <BorderCard
+        class="pa-8"
+        style="display: flex; flex-direction: column; gap: 12px"
+      >
+        <h2>Ronde inplannen: {{ current_round?.name }}</h2>
+
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur.
+        </p>
+
+        <v-row class="py-0">
           <v-col
             cols="1"
             style="min-width: 100px; max-width: 100%"
-            class="flex-grow-1 flex-shrink-0 py-0 my-0"
+            class="flex-grow-1 flex-shrink-0"
             ><v-select
               label="Selecteer student"
               :items="students"
@@ -29,66 +43,65 @@
             </v-select></v-col
           ></v-row
         >
-        <v-row class="py-0 my-4 mx-2">
-          <v-col cols="3" class="flex-grow-0 flex-shrink-0"
-            ><v-select
-              prepend-inner-icon="mdi-replay"
-              variant="outlined"
-              label="Frequentie"
-              v-model="frequency"
-              :items="frequencys"
-              @update:model-value="frequencyCheck()"
-            ></v-select></v-col
-          ><v-col
-            cols="1"
-            style="min-width: 100px; max-width: 100%"
-            class="flex-grow-1 flex-shrink-0"
-            ><div v-if="!multipleday">
-              <v-text-field
-                prepend-inner-icon="mdi-calendar"
-                label="Startdatum"
-                variant="outlined"
-                type="date"
-                v-model="startDate"
-              ></v-text-field>
-            </div>
-            <div class="d-flex justify-space-between" v-else>
-              <v-text-field
-                v-model="startDate"
-                prepend-inner-icon="mdi-calendar"
-                variant="outlined"
-                class="mr-1"
-                type="date"
-                label="Startdatum"
-              ></v-text-field
-              ><v-text-field
-                v-model="endDate"
-                prepend-inner-icon="mdi-calendar"
-                variant="outlined"
-                class="ml-1"
-                type="date"
-                label="Einddatum"
-              ></v-text-field></div></v-col
-          ><v-col cols="3" class="flex-grow-0 flex-shrink-0"
-            ><v-text-field
-              prepend-inner-icon="mdi-clock-time-two-outline"
-              label="Starttijd"
-              variant="outlined"
-              type="time"
-              v-model="time"
-            ></v-text-field
-          ></v-col>
-        </v-row>
-        <v-card-actions
-          ><v-btn prepend-icon="mdi-plus" @click="updateRounds()"
+
+        <div
+          class="selectors"
+          :class="multipleday ? 'grid-cols-4' : 'grid-cols-3'"
+        >
+          <v-select
+            prepend-inner-icon="mdi-replay"
+            variant="outlined"
+            label="Frequentie"
+            v-model="frequency"
+            :items="frequencys"
+            @update:model-value="frequencyCheck()"
+          ></v-select>
+
+          <v-text-field
+            v-model="startDate"
+            prepend-inner-icon="mdi-calendar"
+            variant="outlined"
+            type="date"
+            label="Startdatum"
+          ></v-text-field>
+
+          <v-text-field
+            v-model="endDate"
+            prepend-inner-icon="mdi-calendar"
+            variant="outlined"
+            type="date"
+            label="Einddatum"
+            v-if="multipleday"
+          ></v-text-field>
+
+          <v-text-field
+            prepend-inner-icon="mdi-clock-time-two-outline"
+            label="Starttijd"
+            variant="outlined"
+            type="time"
+            v-model="time"
+          ></v-text-field>
+        </div>
+
+        <div style="display: flex; align-items: center">
+          <v-btn
+            prepend-icon="mdi-plus"
+            @click="updateRounds()"
+            :disabled="student === undefined"
+            variant="tonal"
             >Toevoegen</v-btn
           >
-          <v-spacer></v-spacer
-          ><v-btn prepend-icon="mdi-check" @click="planRounds()"
+          <div class="flex-grow-1"></div>
+          <v-btn
+            prepend-icon="mdi-check"
+            @click="planRounds()"
+            :disabled="rounds?.length === 0"
+            variant="tonal"
             >Ronde inplannen</v-btn
-          ></v-card-actions
-        >
+          >
+        </div>
       </BorderCard>
+
       <RoundSelectCard
         v-for="(round, i) in rounds"
         :key="i"
@@ -143,7 +156,7 @@ const frequencyDict: Record<string, number> = {
 
 const startDate = ref<string>(new Date().toISOString().substring(0, 10));
 const endDate = ref<string>(new Date().toISOString().substring(0, 10));
-const time = ref<string>("");
+const time = ref<string>("12:00");
 const frequency = ref<string>(frequencys[0]);
 const multipleday = ref<boolean>(false);
 
@@ -215,4 +228,19 @@ function planRounds() {
 .flex
   display: flex
   gap: 20px
+
+.grid-cols-3
+  grid-template-columns: repeat(3, minmax(0, 1fr))
+
+.grid-cols-4
+  grid-template-columns: repeat(4, minmax(0, 1fr))
+
+.selectors
+  display: grid
+  flex-direction: row
+  gap: 12px
+  height: 80px
+
+  & > *
+    min-height: 100%
 </style>