From c643fb22c2dfdb7f9956b5b118b586ffa10eea82 Mon Sep 17 00:00:00 2001
From: Arnout_Allaert <arnout.allaert@ugent.be>
Date: Tue, 16 May 2023 18:57:14 +0200
Subject: [PATCH 01/18] fix: show all users with their name in syndicus select

---
 web/src/views/building/BuildingMaker.vue | 49 ++++++++++++++++++++----
 1 file changed, 41 insertions(+), 8 deletions(-)

diff --git a/web/src/views/building/BuildingMaker.vue b/web/src/views/building/BuildingMaker.vue
index bd99e8467..9e04df4fe 100644
--- a/web/src/views/building/BuildingMaker.vue
+++ b/web/src/views/building/BuildingMaker.vue
@@ -14,11 +14,27 @@
         v-model="building.ivago_id"
         label="Ivago ID"
       ></v-text-field>
+
       <v-select
         label="Syndicus"
-        :items="syndici.map((e) => e.id)"
-        v-model="building.syndicus_id"
-      ></v-select>
+        :items="syndici"
+        v-model="building.syndicus"
+        prepend-inner-icon="mdi-account"
+      >
+        <template v-slot:item="{ props, item }">
+          <v-list-item
+            v-bind="props"
+            :title="item.name"
+            :subtitle="item.name"
+          >
+            <p>{{ getFullStudentName(item.value) }}</p>
+          </v-list-item>
+        </template>
+
+        <template v-slot:selection="{ item }">
+          <p>{{ getFullStudentName(item.value) }}</p>
+        </template>
+      </v-select>
 
       <v-file-input
         disabled
@@ -92,13 +108,13 @@ import { tryOrAlertAsync } from "@/try";
 import {
   AddressQuery,
   BuildingQuery,
-  SyndicusQuery,
+  UserQuery,
 } from "@selab-2/groep-1-query";
 import router from "@/router";
 
 const dummyMap = ref(null);
 
-const syndici = await new SyndicusQuery().getAll();
+const syndici = await new UserQuery().getAll();
 
 const address = ref({
   street: "",
@@ -112,17 +128,34 @@ const address = ref({
 const building = ref({
   name: "",
   ivago_id: "",
-  syndicus_id: 0,
+  syndicus: {
+    id: 0,
+    first_name: "",
+    last_name: ""
+  },
   address_id: 0,
   manual_id: null,
 });
 
+function getFullStudentName(s: Result<UserQuery> | undefined): string {
+  if (s) {
+    return s.first_name + " " + s.last_name;
+  } else {
+    return " ";
+  }
+}
+
 const submit = () => {
   tryOrAlertAsync(async () => {
     const { id } = await new AddressQuery().createOne(address.value);
     building.value.address_id = id;
-    const { id: buildingId } = await new BuildingQuery().createOne(
-      building.value,
+    const { id: buildingId } = await new BuildingQuery().createOne({
+      id: building.value.id,
+      ivago_id: building.value.ivago_id,
+      syndicus_id: building.value.syndicus.id,
+      address_id: building.value.address_id,
+      manual_id: building.value.manual_id,
+      }
     );
     await router.push(`/gebouw/${buildingId}`);
   });

From 259c1f112253ae1c44d02bc4594d02f35263ed4e Mon Sep 17 00:00:00 2001
From: Arnout_Allaert <arnout.allaert@ugent.be>
Date: Tue, 16 May 2023 20:58:43 +0200
Subject: [PATCH 02/18] feat: added leaflet map

---
 web/src/views/building/BuildingMaker.vue | 41 +++++++++++++++---------
 1 file changed, 25 insertions(+), 16 deletions(-)

diff --git a/web/src/views/building/BuildingMaker.vue b/web/src/views/building/BuildingMaker.vue
index 9e04df4fe..e64652f96 100644
--- a/web/src/views/building/BuildingMaker.vue
+++ b/web/src/views/building/BuildingMaker.vue
@@ -45,22 +45,25 @@
     </BorderCard>
 
     <!-- card met alle info over de locatie -->
-    <BorderCard class="mb-3">
-      <v-img
-        src="@/assets/images/dummyMap.png"
-        v-model="dummyMap"
-        max-height="300px"
-        cover
-      >
-        <v-toolbar color="rgb(250, 250, 250, 0)" class="pl-4">
-          <template v-slot:title>
-            <v-card-title> Locatie info </v-card-title>
-          </template>
-          <template v-slot:prepend>
-            <v-icon icon="mdi-access-point" size="large"></v-icon>
-          </template>
-        </v-toolbar>
-      </v-img>
+    <BorderCard prepend-icon="mdi-map-marker" class="mb-3" title="Locatie info">
+      <CardLayout style="height: 400px">
+        <l-map ref="map" v-model:zoom="zoom" :center="[51, 4.4699]">
+          <l-tile-layer
+            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+            layer-type="base"
+            name="OpenStreetMap"
+          />
+          <l-marker
+            :key="building.id"
+            :lat-lng="[address.longitude, address.latitude]"
+            name="building"
+          >
+            <l-tooltip :options="{ permanent: true }">
+              {{ building.name }}
+            </l-tooltip>
+          </l-marker>
+        </l-map>
+      </CardLayout>
 
       <div class="mx-4 mt-3">
         <v-row>
@@ -111,6 +114,10 @@ import {
   UserQuery,
 } from "@selab-2/groep-1-query";
 import router from "@/router";
+import "leaflet/dist/leaflet.css";
+import "leaflet/dist/leaflet.js";
+import { LMap, LTileLayer, LMarker, LTooltip } from "@vue-leaflet/vue-leaflet";
+import CardLayout from "@/layouts/CardLayout.vue";
 
 const dummyMap = ref(null);
 
@@ -145,6 +152,8 @@ function getFullStudentName(s: Result<UserQuery> | undefined): string {
   }
 }
 
+const zoom = ref(8);
+
 const submit = () => {
   tryOrAlertAsync(async () => {
     const { id } = await new AddressQuery().createOne(address.value);

From 89be941bd1c11d507afa9566b5377c335240f4b4 Mon Sep 17 00:00:00 2001
From: Arnout_Allaert <arnout.allaert@ugent.be>
Date: Wed, 17 May 2023 16:57:27 +0200
Subject: [PATCH 03/18] fix: coordinates

---
 web/src/views/building/BuildingMaker.vue | 68 +++++++++++++++++-------
 1 file changed, 49 insertions(+), 19 deletions(-)

diff --git a/web/src/views/building/BuildingMaker.vue b/web/src/views/building/BuildingMaker.vue
index e64652f96..24311b720 100644
--- a/web/src/views/building/BuildingMaker.vue
+++ b/web/src/views/building/BuildingMaker.vue
@@ -37,16 +37,18 @@
       </v-select>
 
       <v-file-input
-        disabled
+        single
+        v-model="manual"
+        accept="application/pdf"
         prepend-icon=""
         prepend-inner-icon="mdi-file"
-        label="Manual"
+        label="Handleiding toevoegen"
       ></v-file-input>
     </BorderCard>
 
     <!-- card met alle info over de locatie -->
     <BorderCard prepend-icon="mdi-map-marker" class="mb-3" title="Locatie info">
-      <CardLayout style="height: 400px">
+      <BorderCard style="height: 400px">
         <l-map ref="map" v-model:zoom="zoom" :center="[51, 4.4699]">
           <l-tile-layer
             url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
@@ -55,7 +57,7 @@
           />
           <l-marker
             :key="building.id"
-            :lat-lng="[address.longitude, address.latitude]"
+            :lat-lng="[latitude, longitude]"
             name="building"
           >
             <l-tooltip :options="{ permanent: true }">
@@ -63,7 +65,7 @@
             </l-tooltip>
           </l-marker>
         </l-map>
-      </CardLayout>
+      </BorderCard>
 
       <div class="mx-4 mt-3">
         <v-row>
@@ -71,16 +73,16 @@
             <v-text-field
               required
               type="number"
-              v-model="address.longitude"
-              label="Longitude"
+              v-model="latitude"
+              label="Latitude"
             ></v-text-field>
           </v-col>
           <v-col>
             <v-text-field
               required
               type="number"
-              v-model="address.latitude"
-              label="Latitude"
+              v-model="longitude"
+              label="Longitude"
             ></v-text-field>
           </v-col>
         </v-row>
@@ -104,7 +106,7 @@
 
 <script lang="ts" setup>
 import { ref } from "vue";
-import AddressForm from "../../components/forms/AddressForm.vue";
+import AddressForm from "@/components/forms/AddressForm.vue";
 import HFillWrapper from "@/layouts/HFillWrapper.vue";
 import BorderCard from "@/layouts/CardLayout.vue";
 import { tryOrAlertAsync } from "@/try";
@@ -117,9 +119,6 @@ import router from "@/router";
 import "leaflet/dist/leaflet.css";
 import "leaflet/dist/leaflet.js";
 import { LMap, LTileLayer, LMarker, LTooltip } from "@vue-leaflet/vue-leaflet";
-import CardLayout from "@/layouts/CardLayout.vue";
-
-const dummyMap = ref(null);
 
 const syndici = await new UserQuery().getAll();
 
@@ -128,10 +127,13 @@ const address = ref({
   number: 0,
   city: "",
   zip_code: 0,
-  latitude: 0,
-  longitude: 0,
 });
 
+// latitude and longitude have to be separated from address,
+// because the AddressForm overwrites the address and that messes up the coordinates
+const latitude = ref(0);
+const longitude = ref(0);
+
 const building = ref({
   name: "",
   ivago_id: "",
@@ -144,6 +146,8 @@ const building = ref({
   manual_id: null,
 });
 
+const manual = ref(null)
+
 function getFullStudentName(s: Result<UserQuery> | undefined): string {
   if (s) {
     return s.first_name + " " + s.last_name;
@@ -155,18 +159,44 @@ function getFullStudentName(s: Result<UserQuery> | undefined): string {
 const zoom = ref(8);
 
 const submit = () => {
+  console.log(address.value)
+  console.log(latitude.value)
+  console.log(longitude.value)
+  /*
   tryOrAlertAsync(async () => {
-    const { id } = await new AddressQuery().createOne(address.value);
+    const { id: addressId } = await new AddressQuery().createOne({
+      street: address.value.street,
+      number: address.value.number,
+      city: address.value.city,
+      zip_code: address.value.zip_code,
+      latitude: latitude.value,
+      longitude: longitude.value,
+    });
+    console.log(addressId)
     building.value.address_id = id;
     const { id: buildingId } = await new BuildingQuery().createOne({
-      id: building.value.id,
+      // id: building.value.id,
+      name: building.value.name,
       ivago_id: building.value.ivago_id,
       syndicus_id: building.value.syndicus.id,
-      address_id: building.value.address_id,
+      address_id: addressId,
       manual_id: building.value.manual_id,
       }
     );
-    await router.push(`/gebouw/${buildingId}`);
+
+    // await new BuildingQuery().createImage({
+      // id: buildingId,
+      // image: ,
+    //}
+
+    // await new BuildingQuery().createFile({ deze functie bestaat nog niet
+      // id: buildingId,
+      // file: manual.value,
+    //}
+
+    // await router.push(`/gebouw/${buildingId}`);
   });
+  */
+
 };
 </script>

From 69ce43266d8104f68d8bb0864b5535a494e37af5 Mon Sep 17 00:00:00 2001
From: Arnout_Allaert <arnout.allaert@ugent.be>
Date: Thu, 18 May 2023 12:53:26 +0200
Subject: [PATCH 04/18] fix: corrected syndicus usage

---
 api_query/src/building.ts                | 37 ++++++++++++++++++-
 web/src/views/building/BuildingMaker.vue | 46 +++++++++++++-----------
 2 files changed, 62 insertions(+), 21 deletions(-)

diff --git a/api_query/src/building.ts b/api_query/src/building.ts
index ff4f9468b..6f4dc4835 100644
--- a/api_query/src/building.ts
+++ b/api_query/src/building.ts
@@ -1,4 +1,4 @@
-import { Image, Prisma } from "@selab-2/groep-1-orm";
+import { Image, File, Prisma } from "@selab-2/groep-1-orm";
 import { Query } from "./query";
 import { includeUserWithoutAddress } from "./include";
 import { QueryError } from "./query_error";
@@ -103,6 +103,41 @@ export class BuildingQuery extends Query<
         return this.fetchJSON(imageEndpoint, "DELETE", { hardDelete: hard });
     }
 
+    /**
+     * Voeg een handleiding toe via HTTP POST
+     * @throws QueryError
+     */
+    async createManual(
+        id: number,
+        element: Partial<File>,
+    ): Promise<BuildingAllInfo> {
+        if (Number.isNaN(id)) {
+            throw new QueryError(400, "Bad Request");
+        }
+
+        const fileEndpoint = this.server + this.endpoint + "/" + id + "/file";
+
+        return this.fetchJSON(fileEndpoint, "POST", element);
+    }
+
+    /**
+     * Verwijder de handleiding via HTTP DELETE
+     * @throws QueryError
+     */
+    async deleteManual(
+        id: number,
+        manual_id: number,
+        hard = false,
+    ): Promise<BuildingAllInfo> {
+        if (Number.isNaN(id)) {
+            throw new QueryError(400, "Bad Request");
+        }
+
+        const fileEndpoint = this.server + this.endpoint + "/" + id + "/file/" + manual_id;
+
+        return this.fetchJSON(fileEndpoint, "DELETE", { hardDelete: hard });
+    }
+
     async getAnalytics(
         startdate: Date,
         enddate: Date,
diff --git a/web/src/views/building/BuildingMaker.vue b/web/src/views/building/BuildingMaker.vue
index 24311b720..e7061bea3 100644
--- a/web/src/views/building/BuildingMaker.vue
+++ b/web/src/views/building/BuildingMaker.vue
@@ -17,7 +17,7 @@
 
       <v-select
         label="Syndicus"
-        :items="syndici"
+        :items="users"
         v-model="building.syndicus"
         prepend-inner-icon="mdi-account"
       >
@@ -114,13 +114,15 @@ import {
   AddressQuery,
   BuildingQuery,
   UserQuery,
+  SyndicusQuery,
 } from "@selab-2/groep-1-query";
 import router from "@/router";
 import "leaflet/dist/leaflet.css";
 import "leaflet/dist/leaflet.js";
 import { LMap, LTileLayer, LMarker, LTooltip } from "@vue-leaflet/vue-leaflet";
 
-const syndici = await new UserQuery().getAll();
+const users = await new UserQuery().getAll();
+const syndici = await new SyndicusQuery().getAll();
 
 const address = ref({
   street: "",
@@ -142,8 +144,6 @@ const building = ref({
     first_name: "",
     last_name: ""
   },
-  address_id: 0,
-  manual_id: null,
 });
 
 const manual = ref(null)
@@ -159,11 +159,22 @@ function getFullStudentName(s: Result<UserQuery> | undefined): string {
 const zoom = ref(8);
 
 const submit = () => {
-  console.log(address.value)
-  console.log(latitude.value)
-  console.log(longitude.value)
-  /*
+  // check if the user is already a syndicus, else we need to make the user a syndicus
+  let createSyndicus: boolean = true;
+  for(const syndicus of syndici){
+    if(syndicus.user_id == building.value.syndicus.id){
+      createSyndicus = false;
+      building.value.syndicus.id = syndicus.id;
+      break;
+    }
+  }
   tryOrAlertAsync(async () => {
+    if (createSyndicus) {
+      let {id: syndicusId} = await new SyndicusQuery().createOne({
+        user_id: building.value.syndicus.id,
+      });
+      building.value.syndicus.id = syndicusId;
+    }
     const { id: addressId } = await new AddressQuery().createOne({
       street: address.value.street,
       number: address.value.number,
@@ -172,31 +183,26 @@ const submit = () => {
       latitude: latitude.value,
       longitude: longitude.value,
     });
-    console.log(addressId)
-    building.value.address_id = id;
     const { id: buildingId } = await new BuildingQuery().createOne({
-      // id: building.value.id,
       name: building.value.name,
       ivago_id: building.value.ivago_id,
       syndicus_id: building.value.syndicus.id,
       address_id: addressId,
-      manual_id: building.value.manual_id,
       }
     );
-
     // await new BuildingQuery().createImage({
       // id: buildingId,
       // image: ,
-    //}
-
-    // await new BuildingQuery().createFile({ deze functie bestaat nog niet
-      // id: buildingId,
-      // file: manual.value,
-    //}
+    //})
 
+    const {id: manualId} = await new BuildingQuery().createManual({
+      id: buildingId,
+      file: manual.value,
+    })
+    console.log(manualId)
     // await router.push(`/gebouw/${buildingId}`);
+
   });
-  */
 
 };
 </script>

From 49b3db63d7165a957803cb79ede70105eb2b58d4 Mon Sep 17 00:00:00 2001
From: Arnout_Allaert <arnout.allaert@ugent.be>
Date: Thu, 18 May 2023 15:09:29 +0200
Subject: [PATCH 05/18] feat: added description for building

---
 api_query/src/building.ts                | 37 +------------------
 web/src/views/building/BuildingMaker.vue | 46 +++++++++++++++++-------
 2 files changed, 34 insertions(+), 49 deletions(-)

diff --git a/api_query/src/building.ts b/api_query/src/building.ts
index 6f4dc4835..ff4f9468b 100644
--- a/api_query/src/building.ts
+++ b/api_query/src/building.ts
@@ -1,4 +1,4 @@
-import { Image, File, Prisma } from "@selab-2/groep-1-orm";
+import { Image, Prisma } from "@selab-2/groep-1-orm";
 import { Query } from "./query";
 import { includeUserWithoutAddress } from "./include";
 import { QueryError } from "./query_error";
@@ -103,41 +103,6 @@ export class BuildingQuery extends Query<
         return this.fetchJSON(imageEndpoint, "DELETE", { hardDelete: hard });
     }
 
-    /**
-     * Voeg een handleiding toe via HTTP POST
-     * @throws QueryError
-     */
-    async createManual(
-        id: number,
-        element: Partial<File>,
-    ): Promise<BuildingAllInfo> {
-        if (Number.isNaN(id)) {
-            throw new QueryError(400, "Bad Request");
-        }
-
-        const fileEndpoint = this.server + this.endpoint + "/" + id + "/file";
-
-        return this.fetchJSON(fileEndpoint, "POST", element);
-    }
-
-    /**
-     * Verwijder de handleiding via HTTP DELETE
-     * @throws QueryError
-     */
-    async deleteManual(
-        id: number,
-        manual_id: number,
-        hard = false,
-    ): Promise<BuildingAllInfo> {
-        if (Number.isNaN(id)) {
-            throw new QueryError(400, "Bad Request");
-        }
-
-        const fileEndpoint = this.server + this.endpoint + "/" + id + "/file/" + manual_id;
-
-        return this.fetchJSON(fileEndpoint, "DELETE", { hardDelete: hard });
-    }
-
     async getAnalytics(
         startdate: Date,
         enddate: Date,
diff --git a/web/src/views/building/BuildingMaker.vue b/web/src/views/building/BuildingMaker.vue
index e7061bea3..027d9976e 100644
--- a/web/src/views/building/BuildingMaker.vue
+++ b/web/src/views/building/BuildingMaker.vue
@@ -47,7 +47,7 @@
     </BorderCard>
 
     <!-- card met alle info over de locatie -->
-    <BorderCard prepend-icon="mdi-map-marker" class="mb-3" title="Locatie info">
+    <BorderCard prepend-icon="mdi-map-marker" class="mb-3 px-4" title="Locatie info">
       <BorderCard style="height: 400px">
         <l-map ref="map" v-model:zoom="zoom" :center="[51, 4.4699]">
           <l-tile-layer
@@ -93,6 +93,19 @@
       </div>
     </BorderCard>
 
+    <BorderCard prepend-icon="mdi-text" class="mb-3 px-4" title="Beschrijving">
+      <v-text-field
+        required
+        type="text"
+        v-model="description"
+        label="Geef een beschrijving."
+      />
+    </BorderCard>
+
+    <BorderCard prepend-icon="mdi-image" class="mb-3 px-4" title="Foto's">
+      <MultiAddImage/> <!-- mss een nieuwe component, want de foto's moeten hier geen opmerkingen hebben -->
+    </BorderCard>
+
     <v-btn
       @click="submit"
       type="submit"
@@ -120,6 +133,7 @@ import router from "@/router";
 import "leaflet/dist/leaflet.css";
 import "leaflet/dist/leaflet.js";
 import { LMap, LTileLayer, LMarker, LTooltip } from "@vue-leaflet/vue-leaflet";
+import MultiAddImage from "@/components/images/MultiAddImage.vue"
 
 const users = await new UserQuery().getAll();
 const syndici = await new SyndicusQuery().getAll();
@@ -146,7 +160,11 @@ const building = ref({
   },
 });
 
-const manual = ref(null)
+const manual = ref(null);
+
+const images = ref([]);
+
+const description = ref("");
 
 function getFullStudentName(s: Result<UserQuery> | undefined): string {
   if (s) {
@@ -183,24 +201,26 @@ const submit = () => {
       latitude: latitude.value,
       longitude: longitude.value,
     });
+
     const { id: buildingId } = await new BuildingQuery().createOne({
       name: building.value.name,
       ivago_id: building.value.ivago_id,
+      description: description.value,
       syndicus_id: building.value.syndicus.id,
       address_id: addressId,
+      // manual_id: manualId,
       }
     );
-    // await new BuildingQuery().createImage({
-      // id: buildingId,
-      // image: ,
-    //})
-
-    const {id: manualId} = await new BuildingQuery().createManual({
-      id: buildingId,
-      file: manual.value,
-    })
-    console.log(manualId)
-    // await router.push(`/gebouw/${buildingId}`);
+    /*
+    for(const image of images){
+      await new BuildingQuery().createImage({
+        id: buildingId,
+        image: image, // wss eerst de images omzetten naar Image type van db
+        });
+    };
+     */
+
+    await router.push(`/gebouw/${buildingId}`);
 
   });
 

From d6eacb20764479966b8456c3f4ff6159f1723b12 Mon Sep 17 00:00:00 2001
From: Arnout_Allaert <arnout.allaert@ugent.be>
Date: Thu, 18 May 2023 15:53:56 +0200
Subject: [PATCH 06/18] chore: tried upload manual and images

---
 web/src/views/building/BuildingMaker.vue | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/web/src/views/building/BuildingMaker.vue b/web/src/views/building/BuildingMaker.vue
index 027d9976e..e7b18ee52 100644
--- a/web/src/views/building/BuildingMaker.vue
+++ b/web/src/views/building/BuildingMaker.vue
@@ -103,7 +103,9 @@
     </BorderCard>
 
     <BorderCard prepend-icon="mdi-image" class="mb-3 px-4" title="Foto's">
-      <MultiAddImage/> <!-- mss een nieuwe component, want de foto's moeten hier geen opmerkingen hebben -->
+      <MultiAddImage/>
+      <!-- heb geprobeerd deze aan te passen zodat je lijst verkrijgt van de afbeeldingen, maar is niet gelukt.
+      mss beter gewoon een nieuwe component, want de foto's moeten hier geen opmerkingen hebben? -->
     </BorderCard>
 
     <v-btn
@@ -202,20 +204,30 @@ const submit = () => {
       longitude: longitude.value,
     });
 
+    // create File object for manual
+    // const response = await fetch('http://10.0.0.5:8080/file/',  {method: "POST", body: JSON.stringify(manual)});
+    // const man = await response.json()
+
     const { id: buildingId } = await new BuildingQuery().createOne({
       name: building.value.name,
       ivago_id: building.value.ivago_id,
       description: description.value,
       syndicus_id: building.value.syndicus.id,
       address_id: addressId,
-      // manual_id: manualId,
+      // manual_id: man.id,
       }
     );
+
     /*
     for(const image of images){
+      // create Image object from the image
+      const response = await fetch('http://10.0.0.5:8080/image/',  {method: "POST", body: JSON.stringify(image)});
+      const im = await response.json()
+
+      // add the image to the building
       await new BuildingQuery().createImage({
         id: buildingId,
-        image: image, // wss eerst de images omzetten naar Image type van db
+        image: im,
         });
     };
      */

From ca499a69817520c01170f93b461d8d6dcb3f6c19 Mon Sep 17 00:00:00 2001
From: arne <vanheule.arne@ugent.be>
Date: Sat, 20 May 2023 02:46:16 +0200
Subject: [PATCH 07/18] feat: cleanup and extra emits

---
 web/src/components/images/AddImage.vue      | 38 ++++-----------------
 web/src/components/images/MultiAddImage.vue | 23 ++++++++++---
 web/src/views/building/BuildingMaker.vue    |  3 +-
 3 files changed, 26 insertions(+), 38 deletions(-)

diff --git a/web/src/components/images/AddImage.vue b/web/src/components/images/AddImage.vue
index a19904189..abef0edb1 100644
--- a/web/src/components/images/AddImage.vue
+++ b/web/src/components/images/AddImage.vue
@@ -17,23 +17,17 @@
             prepend-icon=""
             prepend-inner-icon="mdi-image"
             append-inner-icon="mdi-upload"
-            @change="previewImage"
+            @change="{previewImage(); $emit('uploaded', image[0])}"
             variant="solo"
           />
         </template>
       </v-toolbar>
     </v-img>
-    <v-textarea
-      label="Commentaar"
-      rows="3"
-      v-model="comments"
-      class="mx-4 mt-3"
-    />
 
     <v-card-actions>
       <v-btn
         @click="$emit('delete', id)"
-        v-show="id != 0"
+        v-show="id !== 0"
         color="error"
         prepend-icon="mdi-delete"
       >
@@ -44,16 +38,12 @@
 </template>
 
 <script lang="ts" setup>
-// export default {
-//   name: "HelpView",
-// };
+
 import { ref } from "vue";
 const preview = ref("");
 const image = ref([]);
-const comments = ref("");
 defineProps({ id: { type: Number, require: true } });
-// function to preview image
-//TODO: type warning
+
 const previewImage = () => {
   const reader = new FileReader();
   reader.onload = () => {
@@ -61,23 +51,9 @@ const previewImage = () => {
   };
   reader.readAsDataURL(image.value[0]);
 };
-// code voor later
-// const submit = () => {
-//   tryOrAlert(() => {
-//     const formData = new FormData();
-//     formData.append("image", image.value);
-//     formData.append("label", label.value);
-//     formData.append("comment", comments.value);
-//     //const response = await axios.post("/images", formData);
-//     // reset form after submit
-//     //file.value = null;
-//     preview.value = ref(null);
-//     label.value = "";
-//     comments.value = "";
-//     image.value = null;
-//     //emit("form-submitted", formData);
-//   });
-// };
+
+
+
 </script>
 
 <style scoped>
diff --git a/web/src/components/images/MultiAddImage.vue b/web/src/components/images/MultiAddImage.vue
index 533743114..4eeeb082f 100644
--- a/web/src/components/images/MultiAddImage.vue
+++ b/web/src/components/images/MultiAddImage.vue
@@ -10,6 +10,7 @@
           remove(id);
         }
       "
+      @uploaded="(file) => addFile(id, file)"
       class="mb-4"
     />
     <v-card-actions>
@@ -27,15 +28,27 @@
 </template>
 
 <script lang="ts" setup>
-import { reactive } from "vue";
+import { reactive, ref } from "vue";
 import AddImage from "./AddImage.vue";
-const images = reactive([1]);
+const images = ref([0]);
+const imageMap = ref<Map<Number, File | null>>(new Map());
+
 //add image
 const addMore = () => {
-  images.push(1);
+  images.value.push(images.value.length);
 };
 //remove image
-const remove = (index: number) => {
-  images.splice(index, 1);
+const remove = (id: number) => {
+  const index = images.value.indexOf(id);
+  images.value.splice(index, 1);
+
+  const file = imageMap.value.get(index);
+  if (file) {
+    imageMap.value.delete(index);
+  }
+};
+
+const addFile = (id: number, file: File) => {
+  imageMap.value.set(id, file);
 };
 </script>
diff --git a/web/src/views/building/BuildingMaker.vue b/web/src/views/building/BuildingMaker.vue
index e7b18ee52..655331f74 100644
--- a/web/src/views/building/BuildingMaker.vue
+++ b/web/src/views/building/BuildingMaker.vue
@@ -126,6 +126,7 @@ import HFillWrapper from "@/layouts/HFillWrapper.vue";
 import BorderCard from "@/layouts/CardLayout.vue";
 import { tryOrAlertAsync } from "@/try";
 import {
+  Result,
   AddressQuery,
   BuildingQuery,
   UserQuery,
@@ -164,8 +165,6 @@ const building = ref({
 
 const manual = ref(null);
 
-const images = ref([]);
-
 const description = ref("");
 
 function getFullStudentName(s: Result<UserQuery> | undefined): string {

From 05c35bc469161466ba33336b8566e96d7f477af1 Mon Sep 17 00:00:00 2001
From: arne <vanheule.arne@ugent.be>
Date: Sat, 20 May 2023 14:45:29 +0200
Subject: [PATCH 08/18] feat: some more functionality

---
 web/src/views/building/BuildingMaker.vue | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/web/src/views/building/BuildingMaker.vue b/web/src/views/building/BuildingMaker.vue
index 655331f74..8544d142b 100644
--- a/web/src/views/building/BuildingMaker.vue
+++ b/web/src/views/building/BuildingMaker.vue
@@ -37,12 +37,10 @@
       </v-select>
 
       <v-file-input
-        single
-        v-model="manual"
-        accept="application/pdf"
+        id="manual-id"
         prepend-icon=""
         prepend-inner-icon="mdi-file"
-        label="Handleiding toevoegen"
+        label="Handleiding"
       ></v-file-input>
     </BorderCard>
 
@@ -130,6 +128,7 @@ import {
   AddressQuery,
   BuildingQuery,
   UserQuery,
+  FileQuery,
   SyndicusQuery,
 } from "@selab-2/groep-1-query";
 import router from "@/router";
@@ -163,7 +162,7 @@ const building = ref({
   },
 });
 
-const manual = ref(null);
+const manual = ref<File[] | undefined>();
 
 const description = ref("");
 
@@ -194,7 +193,7 @@ const submit = () => {
       });
       building.value.syndicus.id = syndicusId;
     }
-    const { id: addressId } = await new AddressQuery().createOne({
+    const newAddress = await new AddressQuery().createOne({
       street: address.value.street,
       number: address.value.number,
       city: address.value.city,
@@ -206,13 +205,16 @@ const submit = () => {
     // create File object for manual
     // const response = await fetch('http://10.0.0.5:8080/file/',  {method: "POST", body: JSON.stringify(manual)});
     // const man = await response.json()
+    
+    const element = document.getElementById("manual-id")
+    const file = await new FileQuery().createOne("manual-id");
 
+    /*
     const { id: buildingId } = await new BuildingQuery().createOne({
       name: building.value.name,
       ivago_id: building.value.ivago_id,
       description: description.value,
-      syndicus_id: building.value.syndicus.id,
-      address_id: addressId,
+      address: newAddress,
       // manual_id: man.id,
       }
     );

From 452654d98f8d19f381f3627ac95195745ba28f36 Mon Sep 17 00:00:00 2001
From: arne <vanheule.arne@ugent.be>
Date: Sat, 20 May 2023 18:17:58 +0200
Subject: [PATCH 09/18] fix: dev routing was not working

---
 web/src/router/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/router/index.ts b/web/src/router/index.ts
index e736d0089..04b546110 100644
--- a/web/src/router/index.ts
+++ b/web/src/router/index.ts
@@ -357,7 +357,7 @@ const devRoutes: any[] = [
   },
 ];
 
-if (import.meta.env.MODE !== "development") {
+if (import.meta.env.MODE === "development") {
   routes.push(...devRoutes);
 }
 

From 5e132b6806cd81f6d9f5495f4e8a207da449de6e Mon Sep 17 00:00:00 2001
From: arne <vanheule.arne@ugent.be>
Date: Sun, 21 May 2023 02:04:45 +0200
Subject: [PATCH 10/18] chore: linter

---
 web/src/components/images/AddImage.vue      | 69 ---------------------
 web/src/components/images/MultiAddImage.vue | 54 ----------------
 web/src/views/building/BuildingMaker.vue    | 15 +----
 3 files changed, 3 insertions(+), 135 deletions(-)
 delete mode 100644 web/src/components/images/AddImage.vue
 delete mode 100644 web/src/components/images/MultiAddImage.vue

diff --git a/web/src/components/images/AddImage.vue b/web/src/components/images/AddImage.vue
deleted file mode 100644
index abef0edb1..000000000
--- a/web/src/components/images/AddImage.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<template>
-  <v-card class="ma-1">
-    <!-- preview image -->
-    <v-img
-      cover
-      :src="preview"
-      lazySrc="@/assets/images/defaultImage.png"
-      v-model="preview"
-      max-height="300px"
-    >
-      <v-toolbar color="rgba(0, 0, 0, 0)" class="mt-2 pt-2">
-        <template v-slot:append>
-          <v-file-input
-            single
-            v-model="image"
-            accept="image/*"
-            prepend-icon=""
-            prepend-inner-icon="mdi-image"
-            append-inner-icon="mdi-upload"
-            @change="{previewImage(); $emit('uploaded', image[0])}"
-            variant="solo"
-          />
-        </template>
-      </v-toolbar>
-    </v-img>
-
-    <v-card-actions>
-      <v-btn
-        @click="$emit('delete', id)"
-        v-show="id !== 0"
-        color="error"
-        prepend-icon="mdi-delete"
-      >
-        Verwijder afbeelding
-      </v-btn>
-    </v-card-actions>
-  </v-card>
-</template>
-
-<script lang="ts" setup>
-
-import { ref } from "vue";
-const preview = ref("");
-const image = ref([]);
-defineProps({ id: { type: Number, require: true } });
-
-const previewImage = () => {
-  const reader = new FileReader();
-  reader.onload = () => {
-    preview.value = String(reader.result);
-  };
-  reader.readAsDataURL(image.value[0]);
-};
-
-
-
-</script>
-
-<style scoped>
-.d-flex {
-  display: flex;
-}
-.justify-center {
-  justify-content: center;
-}
-.align-center {
-  align-items: center;
-}
-</style>
diff --git a/web/src/components/images/MultiAddImage.vue b/web/src/components/images/MultiAddImage.vue
deleted file mode 100644
index 4eeeb082f..000000000
--- a/web/src/components/images/MultiAddImage.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-  <v-card>
-    <!-- list to show all images -->
-    <AddImage
-      v-for="id in images"
-      :key="id"
-      :id="id"
-      @delete="
-        (id) => {
-          remove(id);
-        }
-      "
-      @uploaded="(file) => addFile(id, file)"
-      class="mb-4"
-    />
-    <v-card-actions>
-      <v-btn
-        block
-        @click="addMore"
-        prepend-icon="mdi-plus"
-        color="primary"
-        variant="elevated"
-      >
-        afbeelding toevoegen
-      </v-btn>
-    </v-card-actions>
-  </v-card>
-</template>
-
-<script lang="ts" setup>
-import { reactive, ref } from "vue";
-import AddImage from "./AddImage.vue";
-const images = ref([0]);
-const imageMap = ref<Map<Number, File | null>>(new Map());
-
-//add image
-const addMore = () => {
-  images.value.push(images.value.length);
-};
-//remove image
-const remove = (id: number) => {
-  const index = images.value.indexOf(id);
-  images.value.splice(index, 1);
-
-  const file = imageMap.value.get(index);
-  if (file) {
-    imageMap.value.delete(index);
-  }
-};
-
-const addFile = (id: number, file: File) => {
-  imageMap.value.set(id, file);
-};
-</script>
diff --git a/web/src/views/building/BuildingMaker.vue b/web/src/views/building/BuildingMaker.vue
index 7878d5e0c..00d6e6a3e 100644
--- a/web/src/views/building/BuildingMaker.vue
+++ b/web/src/views/building/BuildingMaker.vue
@@ -116,8 +116,9 @@
         ><v-icon class="ml-2" icon="mdi-delete" @click="removeFileId()"></v-icon
       ></template>
       <v-list>
-        <v-list-item v-for="fileId of fileIds">
-          <v-file-input class="mt-1"
+        <v-list-item v-for="fileId of fileIds" :key="fileId">
+          <v-file-input
+            class="mt-1"
             :multiple="false"
             :id="fileId"
             accept="image/jpeg"
@@ -152,7 +153,6 @@ import {
   BuildingQuery,
   UserQuery,
   SyndicusQuery,
-  FileQuery,
 } from "@selab-2/groep-1-query";
 import router from "@/router";
 import "leaflet/dist/leaflet.css";
@@ -218,15 +218,6 @@ function getFullStudentName(s: Result<UserQuery> | undefined): string {
 const zoom = ref(8);
 
 const submit = () => {
-  // check if the user is already a syndicus, else we need to make the user a syndicus
-  let createSyndicus: boolean = true;
-  for (const syndicus of syndici) {
-    if (syndicus.user_id == building.value.syndicus.id) {
-      createSyndicus = false;
-      building.value.syndicus.id = syndicus.id;
-      break;
-    }
-  }
   tryOrAlertAsync(async () => {
     /*
     const newAddress = await new AddressQuery().createOne({

From 58933a9845b170dab388ed8dd398aff602fecbff Mon Sep 17 00:00:00 2001
From: arne <vanheule.arne@ugent.be>
Date: Sun, 21 May 2023 02:07:39 +0200
Subject: [PATCH 11/18] fix: uncommented file uploader

---
 web/src/views/building/BuildingMaker.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/web/src/views/building/BuildingMaker.vue b/web/src/views/building/BuildingMaker.vue
index 00d6e6a3e..d9f3961dd 100644
--- a/web/src/views/building/BuildingMaker.vue
+++ b/web/src/views/building/BuildingMaker.vue
@@ -153,6 +153,7 @@ import {
   BuildingQuery,
   UserQuery,
   SyndicusQuery,
+  FileQuery,
 } from "@selab-2/groep-1-query";
 import router from "@/router";
 import "leaflet/dist/leaflet.css";
@@ -283,9 +284,7 @@ const submit = () => {
       buildingUnwrapped.syndicus.id = syndicusId;
     }
 
-    /*
     const file = await new FileQuery().createOne("manual-id");
-    */
 
     const newBuilding = await new BuildingQuery().createOne({
       name: buildingUnwrapped.name,
@@ -294,7 +293,7 @@ const submit = () => {
       ivago_id: buildingUnwrapped.ivago_id,
       expected_time: expectedTimeInHours.value * 60,
       syndicus_id: buildingUnwrapped.syndicus.id,
-      manual_id: buildingUnwrapped.manual_id,
+      manual_id: file.id,
     });
 
     for (const fileId of fileIds.value) {

From 6acd5aaa21f0614553266f3bfff484985167680a Mon Sep 17 00:00:00 2001
From: arne <vanheule.arne@ugent.be>
Date: Sun, 21 May 2023 03:34:11 +0200
Subject: [PATCH 12/18] feat: conditional routing

---
 web/src/router/index.ts                  |  2 +-
 web/src/views/building/BuildingMaker.vue | 63 ++++++++++++++++++++++--
 2 files changed, 60 insertions(+), 5 deletions(-)

diff --git a/web/src/router/index.ts b/web/src/router/index.ts
index 04b546110..cc4217d75 100644
--- a/web/src/router/index.ts
+++ b/web/src/router/index.ts
@@ -159,7 +159,7 @@ const routes: any[] = [
         },
       },
       {
-        path: "/gebouw/nieuw",
+        path: "/gebouw/nieuw/:id?",
         name: "building_new",
         component: BuildingMaker,
         meta: {
diff --git a/web/src/views/building/BuildingMaker.vue b/web/src/views/building/BuildingMaker.vue
index d9f3961dd..7853dfb91 100644
--- a/web/src/views/building/BuildingMaker.vue
+++ b/web/src/views/building/BuildingMaker.vue
@@ -16,6 +16,7 @@
       ></v-text-field>
 
       <v-select
+        :disabled="buildingId !== undefined"
         label="Syndicus"
         :items="users"
         v-model="building.syndicus"
@@ -41,6 +42,7 @@
       ></v-text-field>
 
       <v-file-input
+        v-model="manualContent"
         id="manual-id"
         prepend-icon=""
         prepend-inner-icon="mdi-file"
@@ -53,12 +55,13 @@
         rows="4"
         label="Beschrijving van het gebouw"
         prepend-inner-icon="mdi-text"
-        v-model="description"
+        v-model="building.description"
       ></v-textarea>
     </BorderCard>
 
     <!-- card met alle info over de locatie -->
     <BorderCard
+      v-if="buildingId === undefined"
       prepend-icon="mdi-map-marker"
       class="mb-3 px-4"
       title="Locatie info"
@@ -103,6 +106,11 @@
         </v-row>
         <!-- addres forum gebruiken -->
         <AddressForm
+          v-model="address"
+          :city="address.city"
+          :number="address.number.toString()"
+          :zip_code="address.zip_code.toString()"
+          :street="address.street"
           @onUpdate="(newAddress) => (address = newAddress)"
         ></AddressForm>
       </div>
@@ -116,11 +124,12 @@
         ><v-icon class="ml-2" icon="mdi-delete" @click="removeFileId()"></v-icon
       ></template>
       <v-list>
-        <v-list-item v-for="fileId of fileIds" :key="fileId">
+        <v-list-item v-for="(fileId, id) of fileIds" :key="fileId">
           <v-file-input
             class="mt-1"
             :multiple="false"
             :id="fileId"
+            v-model="fileContent[id]"
             accept="image/jpeg"
             prepend-icon=""
             prepend-inner-icon="mdi-file"
@@ -159,16 +168,23 @@ import router from "@/router";
 import "leaflet/dist/leaflet.css";
 import "leaflet/dist/leaflet.js";
 import { LMap, LTileLayer, LMarker, LTooltip } from "@vue-leaflet/vue-leaflet";
+import { useRoute } from "vue-router";
+
 
 const fileIds = ref<string[]>(["Hoofdafbeelding"]);
+const fileContent = ref<Array<File[]>>([[]])
+
+const manualContent = ref<File[]>()
 
 function addFileId() {
   fileIds.value.push("Afbeelding " + fileIds.value.length);
+  fileContent.value.push([])
 }
 
 function removeFileId() {
   if (fileIds.value.length > 1) {
     fileIds.value.pop();
+    fileContent.value.pop()
   }
 }
 
@@ -197,6 +213,7 @@ const longitude = ref(0);
 const building = ref({
   name: "",
   ivago_id: "",
+  description: "",
   syndicus: {
     id: 0,
     first_name: "",
@@ -206,7 +223,45 @@ const building = ref({
   manual_id: 1,
 });
 
-const description = ref("");
+const route = useRoute();
+const buildingId: number = Number(route.params.id);
+
+if (buildingId) {
+  tryOrAlertAsync(async () => {
+    const requestedBuilding: Result<BuildingQuery> =
+      await new BuildingQuery().getOne(buildingId);
+
+    const thisSyndicus = requestedBuilding.syndicus;
+    const thisAddress = requestedBuilding.address;
+
+    building.value.name = requestedBuilding.name;
+    building.value.ivago_id = requestedBuilding.ivago_id;
+    building.value.syndicus = {
+      id: thisSyndicus.id,
+      first_name: thisSyndicus.user.first_name,
+      last_name: thisSyndicus.user.last_name,
+    };
+    building.value.description = requestedBuilding.description
+      ? requestedBuilding.description
+      : "";
+
+    address.value = {
+      street: thisAddress.street,
+      number: thisAddress.number,
+      city: thisAddress.city,
+      zip_code: thisAddress.zip_code,
+    };
+    latitude.value = requestedBuilding.address.latitude;
+    longitude.value = requestedBuilding.address.longitude;
+
+
+    manualContent.value = requestedBuilding.manual? [requestedBuilding.manual] as any : []
+
+    fileContent.value = requestedBuilding.images[0].image as any
+    console.log(fileContent.value)
+
+  });
+}
 
 function getFullStudentName(s: Result<UserQuery> | undefined): string {
   if (s) {
@@ -289,7 +344,7 @@ const submit = () => {
     const newBuilding = await new BuildingQuery().createOne({
       name: buildingUnwrapped.name,
       address_id: newAddress.id,
-      description: description.value,
+      description: buildingUnwrapped.description,
       ivago_id: buildingUnwrapped.ivago_id,
       expected_time: expectedTimeInHours.value * 60,
       syndicus_id: buildingUnwrapped.syndicus.id,

From 19251f27276a0bd4610232ba392bd388f86fdc61 Mon Sep 17 00:00:00 2001
From: arne <vanheule.arne@ugent.be>
Date: Sun, 21 May 2023 05:55:04 +0200
Subject: [PATCH 13/18] render edit page

---
 web/src/views/building/BuildingMaker.vue | 80 +++++++++++++++++++-----
 1 file changed, 63 insertions(+), 17 deletions(-)

diff --git a/web/src/views/building/BuildingMaker.vue b/web/src/views/building/BuildingMaker.vue
index 7853dfb91..c970462fd 100644
--- a/web/src/views/building/BuildingMaker.vue
+++ b/web/src/views/building/BuildingMaker.vue
@@ -16,7 +16,7 @@
       ></v-text-field>
 
       <v-select
-        :disabled="buildingId !== undefined"
+        :disabled="edit"
         label="Syndicus"
         :items="users"
         v-model="building.syndicus"
@@ -42,7 +42,6 @@
       ></v-text-field>
 
       <v-file-input
-        v-model="manualContent"
         id="manual-id"
         prepend-icon=""
         prepend-inner-icon="mdi-file"
@@ -61,7 +60,6 @@
 
     <!-- card met alle info over de locatie -->
     <BorderCard
-      v-if="buildingId === undefined"
       prepend-icon="mdi-map-marker"
       class="mb-3 px-4"
       title="Locatie info"
@@ -107,6 +105,7 @@
         <!-- addres forum gebruiken -->
         <AddressForm
           v-model="address"
+          :readonly="false"
           :city="address.city"
           :number="address.number.toString()"
           :zip_code="address.zip_code.toString()"
@@ -116,7 +115,7 @@
       </div>
     </BorderCard>
 
-    <BorderCard class="mb-3 px-4">
+    <BorderCard v-if="!edit" class="mb-3 px-4">
       <template v-slot:prepend><v-icon icon="mdi-image" /></template>
       <template v-slot:title>Foto's</template>
       <template v-slot:append
@@ -129,13 +128,45 @@
             class="mt-1"
             :multiple="false"
             :id="fileId"
-            v-model="fileContent[id]"
             accept="image/jpeg"
             prepend-icon=""
             prepend-inner-icon="mdi-file"
             :label="fileId"
           ></v-file-input>
-        </v-list-item>
+        </v-list-item> </v-list
+    ></BorderCard>
+
+    <BorderCard v-else class="mb-3 px-4">
+      <template v-slot:prepend><v-icon icon="mdi-image" /></template>
+      <template v-slot:title>Foto's</template>
+      <v-file-input
+        class="mt-1 mx-5"
+        :multiple="false"
+        :id="new"
+        accept="image/jpeg"
+        prepend-icon=""
+        prepend-inner-icon="mdi-file"
+        label="Nieuwe afbeelding"
+      ></v-file-input
+      ><v-btn type="submit" color="success" class="ml-5" @click="addFileId()"
+        >Voeg afbeelding toe</v-btn
+      >
+      <v-list>
+        <v-list-item v-for="entry in images" :key="entry.id"
+          ><BorderCard class="mb-3 px-4">
+            <template v-slot:prepend
+              ><v-img
+                :src="ImgProxy.env.url(entry.image)"
+                style="width: 75px; height: 75px; object-fit: cover"
+            /></template>
+            <template v-slot:append
+              ><v-icon
+                class="ml-2"
+                icon="mdi-delete"
+                @click="removeImage(entry.id)"
+              ></v-icon
+            ></template> </BorderCard
+        ></v-list-item>
       </v-list>
     </BorderCard>
 
@@ -164,27 +195,32 @@ import {
   SyndicusQuery,
   FileQuery,
 } from "@selab-2/groep-1-query";
+import { File, BuildingImages } from "@selab-2/groep-1-orm";
 import router from "@/router";
 import "leaflet/dist/leaflet.css";
 import "leaflet/dist/leaflet.js";
 import { LMap, LTileLayer, LMarker, LTooltip } from "@vue-leaflet/vue-leaflet";
 import { useRoute } from "vue-router";
-
+import { ImgProxy } from "@/imgproxy";
 
 const fileIds = ref<string[]>(["Hoofdafbeelding"]);
-const fileContent = ref<Array<File[]>>([[]])
+const fileContent = ref<Array<File[]>>([[]]);
 
-const manualContent = ref<File[]>()
+const images = ref<
+  (BuildingImages & {
+    image: File;
+  })[]
+>();
 
 function addFileId() {
   fileIds.value.push("Afbeelding " + fileIds.value.length);
-  fileContent.value.push([])
+  fileContent.value.push([]);
 }
 
 function removeFileId() {
   if (fileIds.value.length > 1) {
     fileIds.value.pop();
-    fileContent.value.pop()
+    fileContent.value.pop();
   }
 }
 
@@ -225,8 +261,22 @@ const building = ref({
 
 const route = useRoute();
 const buildingId: number = Number(route.params.id);
+const edit: boolean = buildingId !== 0;
 
 if (buildingId) {
+  setFields()
+}
+
+async function removeImage(id: number){
+  await new BuildingQuery().deleteImage(
+    buildingId,
+    {id: id},
+    true,
+  );
+  await setFields()
+};
+
+async function setFields(){
   tryOrAlertAsync(async () => {
     const requestedBuilding: Result<BuildingQuery> =
       await new BuildingQuery().getOne(buildingId);
@@ -254,15 +304,11 @@ if (buildingId) {
     latitude.value = requestedBuilding.address.latitude;
     longitude.value = requestedBuilding.address.longitude;
 
-
-    manualContent.value = requestedBuilding.manual? [requestedBuilding.manual] as any : []
-
-    fileContent.value = requestedBuilding.images[0].image as any
-    console.log(fileContent.value)
-
+    images.value = requestedBuilding.images;
   });
 }
 
+
 function getFullStudentName(s: Result<UserQuery> | undefined): string {
   if (s) {
     return s.first_name + " " + s.last_name;

From 872cf43578549d814f117eb0afe386f5f87fffc7 Mon Sep 17 00:00:00 2001
From: arne <vanheule.arne@ugent.be>
Date: Sun, 21 May 2023 07:03:26 +0200
Subject: [PATCH 14/18] feat: possible to change building

---
 web/src/router/index.ts                  |   1 +
 web/src/views/building/BuildingMaker.vue | 335 +++++++++++++----------
 2 files changed, 188 insertions(+), 148 deletions(-)

diff --git a/web/src/router/index.ts b/web/src/router/index.ts
index cc4217d75..23bc19a42 100644
--- a/web/src/router/index.ts
+++ b/web/src/router/index.ts
@@ -162,6 +162,7 @@ const routes: any[] = [
         path: "/gebouw/nieuw/:id?",
         name: "building_new",
         component: BuildingMaker,
+        props: true,
         meta: {
           title: "Nieuw gebouw",
           auth: (
diff --git a/web/src/views/building/BuildingMaker.vue b/web/src/views/building/BuildingMaker.vue
index c970462fd..878fa474e 100644
--- a/web/src/views/building/BuildingMaker.vue
+++ b/web/src/views/building/BuildingMaker.vue
@@ -18,7 +18,7 @@
       <v-select
         :disabled="edit"
         label="Syndicus"
-        :items="users"
+        :items="possibleUsers"
         v-model="building.syndicus"
         prepend-inner-icon="mdi-account"
       >
@@ -103,15 +103,57 @@
           </v-col>
         </v-row>
         <!-- addres forum gebruiken -->
-        <AddressForm
-          v-model="address"
-          :readonly="false"
-          :city="address.city"
-          :number="address.number.toString()"
-          :zip_code="address.zip_code.toString()"
-          :street="address.street"
-          @onUpdate="(newAddress) => (address = newAddress)"
-        ></AddressForm>
+        <v-row class="py-0 my-0 mt-2">
+          <v-col
+            cols="1"
+            style="min-width: 100px; max-width: 100%"
+            class="flex-grow-1 flex-shrink-0 py-0 my-0"
+          >
+            <!-- Text input field for the street name -->
+            <v-text-field
+              v-model="address.street"
+              label="Straat"
+              type="text"
+              required
+              variant="outlined"
+              :rules="streetRules"
+            >
+              <template v-slot:prepend-inner>
+                <v-icon icon="mdi-road-variant" />
+              </template>
+            </v-text-field>
+          </v-col>
+          <v-col cols="3" class="flex-grow-0 flex-shrink-0 py-0 my-0">
+            <!-- Text input field for the house number -->
+            <HomeNumberInputField :readonly="false" v-model="address.number" />
+          </v-col>
+        </v-row>
+
+        <v-row class="py-0 my-0 mt-2 mb-1">
+          <v-col
+            cols="1"
+            style="min-width: 100px; max-width: 100%"
+            class="flex-grow-1 flex-shrink-0 py-0 my-0"
+          >
+            <!-- Text input field for the city name -->
+            <v-text-field
+              v-model="address.city"
+              label="Stad"
+              type="text"
+              required
+              variant="outlined"
+              :rules="cityRules"
+            >
+              <template v-slot:prepend-inner>
+                <v-icon icon="mdi-city-variant" />
+              </template>
+            </v-text-field>
+          </v-col>
+          <v-col cols="3" class="flex-grow-0 flex-shrink-0 py-0 my-0">
+            <!-- Text input field for the zip code -->
+            <ZipCodeInputField :readonly="false" v-model="address.zip_code" />
+          </v-col>
+        </v-row>
       </div>
     </BorderCard>
 
@@ -142,7 +184,6 @@
       <v-file-input
         class="mt-1 mx-5"
         :multiple="false"
-        :id="new"
         accept="image/jpeg"
         prepend-icon=""
         prepend-inner-icon="mdi-file"
@@ -160,11 +201,7 @@
                 style="width: 75px; height: 75px; object-fit: cover"
             /></template>
             <template v-slot:append
-              ><v-icon
-                class="ml-2"
-                icon="mdi-delete"
-                @click="removeImage(entry.id)"
-              ></v-icon
+              ><v-icon class="ml-2" icon="mdi-delete"></v-icon
             ></template> </BorderCard
         ></v-list-item>
       </v-list>
@@ -183,7 +220,6 @@
 
 <script lang="ts" setup>
 import { ref } from "vue";
-import AddressForm from "@/components/forms/AddressForm.vue";
 import HFillWrapper from "@/layouts/HFillWrapper.vue";
 import BorderCard from "@/layouts/CardLayout.vue";
 import { tryOrAlertAsync } from "@/try";
@@ -200,31 +236,11 @@ import router from "@/router";
 import "leaflet/dist/leaflet.css";
 import "leaflet/dist/leaflet.js";
 import { LMap, LTileLayer, LMarker, LTooltip } from "@vue-leaflet/vue-leaflet";
-import { useRoute } from "vue-router";
 import { ImgProxy } from "@/imgproxy";
+import HomeNumberInputField from "@/components/inputfields/HomeNumberInputField.vue";
+import ZipCodeInputField from "@/components/inputfields/ZipCodeInputField.vue";
 
-const fileIds = ref<string[]>(["Hoofdafbeelding"]);
-const fileContent = ref<Array<File[]>>([[]]);
-
-const images = ref<
-  (BuildingImages & {
-    image: File;
-  })[]
->();
-
-function addFileId() {
-  fileIds.value.push("Afbeelding " + fileIds.value.length);
-  fileContent.value.push([]);
-}
-
-function removeFileId() {
-  if (fileIds.value.length > 1) {
-    fileIds.value.pop();
-    fileContent.value.pop();
-  }
-}
-
-const users = await new UserQuery().getAll({
+const possibleUsers = await new UserQuery().getAll({
   admin: false,
   student: false,
   super_student: false,
@@ -232,20 +248,18 @@ const users = await new UserQuery().getAll({
 
 const expectedTimeInHours = ref<number>(0);
 const syndici = await new SyndicusQuery().getAll();
-console.log(syndici);
 
 const address = ref({
   street: "",
-  number: 0,
+  number: "0",
   city: "",
-  zip_code: 0,
+  zip_code: "0",
 });
-
-// latitude and longitude have to be separated from address,
-// because the AddressForm overwrites the address and that messes up the coordinates
 const latitude = ref(0);
 const longitude = ref(0);
 
+const address_id = ref<number>(0);
+
 const building = ref({
   name: "",
   ivago_id: "",
@@ -259,27 +273,42 @@ const building = ref({
   manual_id: 1,
 });
 
-const route = useRoute();
-const buildingId: number = Number(route.params.id);
-const edit: boolean = buildingId !== 0;
+const props = defineProps({
+  id: {
+    type: String,
+    default: "",
+  },
+});
+
+const images = ref<
+  (BuildingImages & {
+    image: File;
+  })[]
+>();
+
+const fileIds = ref<string[]>(["Hoofdafbeelding"]);
 
-if (buildingId) {
-  setFields()
+function addFileId() {
+  fileIds.value.push("Afbeelding " + fileIds.value.length);
 }
 
-async function removeImage(id: number){
-  await new BuildingQuery().deleteImage(
-    buildingId,
-    {id: id},
-    true,
-  );
-  await setFields()
-};
+function removeFileId() {
+  if (fileIds.value.length > 1) {
+    fileIds.value.pop();
+  }
+}
+
+const buildingId = ref<number>(Number(props.id));
+const edit: boolean = props.id !== "";
+
+if (edit) {
+  setFields();
+}
 
-async function setFields(){
+async function setFields() {
   tryOrAlertAsync(async () => {
     const requestedBuilding: Result<BuildingQuery> =
-      await new BuildingQuery().getOne(buildingId);
+      await new BuildingQuery().getOne(buildingId.value);
 
     const thisSyndicus = requestedBuilding.syndicus;
     const thisAddress = requestedBuilding.address;
@@ -295,118 +324,128 @@ async function setFields(){
       ? requestedBuilding.description
       : "";
 
+    address_id.value = thisAddress.id;
+    expectedTimeInHours.value = requestedBuilding.expected_time
+      ? Math.floor(requestedBuilding.expected_time / 60)
+      : 0;
+
     address.value = {
       street: thisAddress.street,
-      number: thisAddress.number,
+      number: thisAddress.number.toString(),
       city: thisAddress.city,
-      zip_code: thisAddress.zip_code,
+      zip_code: thisAddress.zip_code.toString(),
     };
     latitude.value = requestedBuilding.address.latitude;
     longitude.value = requestedBuilding.address.longitude;
-
     images.value = requestedBuilding.images;
   });
 }
 
-
-function getFullStudentName(s: Result<UserQuery> | undefined): string {
-  if (s) {
-    return s.first_name + " " + s.last_name;
-  } else {
-    return " ";
-  }
-}
-
-const zoom = ref(8);
-
 const submit = () => {
   tryOrAlertAsync(async () => {
-    /*
-    const newAddress = await new AddressQuery().createOne({
+    const buildingUnwrapped = building.value;
+
+    const formattedAddress = {
       street: address.value.street,
-      number: address.value.number,
+      number: Number(address.value.number),
       city: address.value.city,
-      zip_code: address.value.zip_code,
-      latitude: latitude.value,
-      longitude: longitude.value,
-    });
-
-    // create File object for manual
-    // const response = await fetch('http://10.0.0.5:8080/file/',  {method: "POST", body: JSON.stringify(manual)});
-    // const man = await response.json()
-
-    const element = document.getElementById("manual-id");
-
-    //
-
-    /*
-    const { id: buildingId } = await new BuildingQuery().createOne({
-      name: building.value.name,
-      ivago_id: building.value.ivago_id,
-      description: description.value,
-      address: newAddress,
-      // manual_id: man.id,
-      }
-    );
-
-    /*
-    for(const image of images){
-      // create Image object from the image
-      const response = await fetch('http://10.0.0.5:8080/image/',  {method: "POST", body: JSON.stringify(image)});
-      const im = await response.json()
-
-      // add the image to the building
-      await new BuildingQuery().createImage({
-        id: buildingId,
-        image: im,
-        });
+      zip_code: Number(address.value.zip_code),
     };
-     */
 
-    // Upload file
-    //const file = await new FileQuery().createOne("manual-id");
-    //building.value.manual_id = file.id;
-    const buildingUnwrapped = building.value;
+    if (!edit) {
+      const isNewSyndicus: boolean = syndici.some(
+        (s: Result<SyndicusQuery>) => {
+          return s.user_id === buildingUnwrapped.syndicus.id;
+        },
+      );
+
+      // Create address
+      const newAddress = await new AddressQuery().createOne({
+        ...formattedAddress,
+        ...{ latitude: latitude.value, longitude: longitude.value },
+      });
 
-    const isNewSyndicus: boolean = syndici.some((s: Result<SyndicusQuery>) => {
-      return s.user_id === buildingUnwrapped.syndicus.id;
-    });
+      if (isNewSyndicus) {
+        let { id: syndicusId } = await new SyndicusQuery().createOne({
+          user_id: buildingUnwrapped.syndicus.id,
+        });
+        buildingUnwrapped.syndicus.id = syndicusId;
+      }
 
-    // Create address
-    const newAddress = await new AddressQuery().createOne({
-      ...address.value,
-      ...{ latitude: latitude.value, longitude: longitude.value },
-    });
+      const file = await new FileQuery().createOne("manual-id");
 
-    if (isNewSyndicus) {
-      let { id: syndicusId } = await new SyndicusQuery().createOne({
-        user_id: buildingUnwrapped.syndicus.id,
+      const newBuilding = await new BuildingQuery().createOne({
+        name: buildingUnwrapped.name,
+        address_id: newAddress.id,
+        description: buildingUnwrapped.description,
+        ivago_id: buildingUnwrapped.ivago_id,
+        expected_time: expectedTimeInHours.value * 60,
+        syndicus_id: buildingUnwrapped.syndicus.id,
+        manual_id: file.id,
       });
-      buildingUnwrapped.syndicus.id = syndicusId;
-    }
 
-    const file = await new FileQuery().createOne("manual-id");
-
-    const newBuilding = await new BuildingQuery().createOne({
-      name: buildingUnwrapped.name,
-      address_id: newAddress.id,
-      description: buildingUnwrapped.description,
-      ivago_id: buildingUnwrapped.ivago_id,
-      expected_time: expectedTimeInHours.value * 60,
-      syndicus_id: buildingUnwrapped.syndicus.id,
-      manual_id: file.id,
-    });
-
-    for (const fileId of fileIds.value) {
-      const element: any = document.getElementById(fileId);
-      console.log(element.files.length);
-      if (element.files.length > 0) {
-        await new BuildingQuery().createImage(newBuilding, fileId);
+      
+      for (const fileId of fileIds.value) {
+        const element: any = document.getElementById(fileId);
+        console.log(element.files.length);
+        if (element.files.length > 0) {
+          await new BuildingQuery().createImage(newBuilding, fileId);
+        }
       }
+      await router.push(`/gebouw/${newBuilding.id}`);
+    } else {
+      // Create address
+      console.log(formattedAddress);
+      const newAddress = await new AddressQuery().updateOne({
+        ...{ id: address_id.value },
+        ...formattedAddress,
+        ...{ latitude: latitude.value, longitude: longitude.value },
+      });
+      console.log(newAddress);
+
+      const newBuilding = await new BuildingQuery().updateOne({
+        id: buildingId.value,
+        name: buildingUnwrapped.name,
+        address_id: newAddress.id,
+        description: buildingUnwrapped.description,
+        ivago_id: buildingUnwrapped.ivago_id,
+        expected_time: expectedTimeInHours.value * 60,
+      });
+      await router.push(`/gebouw/${newBuilding.id}`);
     }
 
     // Redirect
-    await router.push(`/gebouw/${newBuilding.id}`);
   });
 };
+
+function getFullStudentName(s: Result<UserQuery> | undefined): string {
+  if (s) {
+    return s.first_name + " " + s.last_name;
+  } else {
+    return " ";
+  }
+}
+
+/* below are the rule checks*/
+
+const streetRules = [
+  // check if street is present
+  (street: string) => {
+    return street ? true : "Geef een straat op.";
+  },
+];
+
+const cityRules = [
+  // check if city is present
+  (city: string) => {
+    return city ? true : "Geef een stad op.";
+  },
+
+  // check if city only contains chars
+  (city: string) => {
+    return /^[a-zA-Z]+$/.test(city) ? true : "Stad kan geen nummers bevatten.";
+  },
+];
+
+const zoom = ref(8);
 </script>

From 6493acd8e5fed05507c64cce3363d70d542e7274 Mon Sep 17 00:00:00 2001
From: arne <vanheule.arne@ugent.be>
Date: Sun, 21 May 2023 07:08:26 +0200
Subject: [PATCH 15/18] feat: routing to page, button changed

---
 web/src/views/building/BuildingMaker.vue  |  3 +--
 web/src/views/building/BuildingScreen.vue | 16 +++++++++++++++-
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/web/src/views/building/BuildingMaker.vue b/web/src/views/building/BuildingMaker.vue
index 878fa474e..cf58b437d 100644
--- a/web/src/views/building/BuildingMaker.vue
+++ b/web/src/views/building/BuildingMaker.vue
@@ -213,7 +213,7 @@
       color="success"
       prepend-icon="mdi-check"
       class="mb-12"
-      >Maak gebouw</v-btn
+      >{{ edit ? "Pas wijzigingen toe" : "Maak gebouw" }}</v-btn
     >
   </HFillWrapper>
 </template>
@@ -384,7 +384,6 @@ const submit = () => {
         manual_id: file.id,
       });
 
-      
       for (const fileId of fileIds.value) {
         const element: any = document.getElementById(fileId);
         console.log(element.files.length);
diff --git a/web/src/views/building/BuildingScreen.vue b/web/src/views/building/BuildingScreen.vue
index a9914d219..57d4a7bb9 100644
--- a/web/src/views/building/BuildingScreen.vue
+++ b/web/src/views/building/BuildingScreen.vue
@@ -66,7 +66,15 @@
               Handleiding
             </v-btn>
           </div>
-
+          <v-btn
+            v-show="useAuthStore().auth?.admin && !building.deleted"
+            class="text-none"
+            prepend-icon="mdi-pencil"
+            @click="routeToChange()"
+            color="primary"
+          >
+            Pas aan
+          </v-btn>
           <v-btn
             v-show="useAuthStore().auth?.admin && !building.deleted"
             class="text-none"
@@ -392,6 +400,12 @@ async function restoreBuilding() {
   });
   router.go(0);
 }
+
+function routeToChange(){
+  router.push({name: 'building_new', params: {id: building.value?.id}})
+}
+
+
 </script>
 
 <style lang="scss" scoped>

From 94a6e0e47dd5fd5ce5f0331c8e5df7eb43c08f3e Mon Sep 17 00:00:00 2001
From: arne <vanheule.arne@ugent.be>
Date: Sun, 21 May 2023 07:10:05 +0200
Subject: [PATCH 16/18] chore: lint

---
 web/src/views/building/BuildingMaker.vue  | 2 +-
 web/src/views/building/BuildingScreen.vue | 6 ++----
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/web/src/views/building/BuildingMaker.vue b/web/src/views/building/BuildingMaker.vue
index cf58b437d..c19b5a6e8 100644
--- a/web/src/views/building/BuildingMaker.vue
+++ b/web/src/views/building/BuildingMaker.vue
@@ -165,7 +165,7 @@
         ><v-icon class="ml-2" icon="mdi-delete" @click="removeFileId()"></v-icon
       ></template>
       <v-list>
-        <v-list-item v-for="(fileId, id) of fileIds" :key="fileId">
+        <v-list-item v-for="fileId of fileIds" :key="fileId">
           <v-file-input
             class="mt-1"
             :multiple="false"
diff --git a/web/src/views/building/BuildingScreen.vue b/web/src/views/building/BuildingScreen.vue
index 57d4a7bb9..525d75824 100644
--- a/web/src/views/building/BuildingScreen.vue
+++ b/web/src/views/building/BuildingScreen.vue
@@ -401,11 +401,9 @@ async function restoreBuilding() {
   router.go(0);
 }
 
-function routeToChange(){
-  router.push({name: 'building_new', params: {id: building.value?.id}})
+function routeToChange() {
+  router.push({ name: "building_new", params: { id: building.value?.id } });
 }
-
-
 </script>
 
 <style lang="scss" scoped>

From 246fc091bb7f23ccba45e0cdb9adb1240cd01392 Mon Sep 17 00:00:00 2001
From: Jens Pots <jens@jenspots.com>
Date: Sun, 21 May 2023 21:09:54 +0200
Subject: [PATCH 17/18] fix(web): allow changing syndicus

---
 web/src/views/building/BuildingMaker.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/web/src/views/building/BuildingMaker.vue b/web/src/views/building/BuildingMaker.vue
index a96504c2f..ad67cc846 100644
--- a/web/src/views/building/BuildingMaker.vue
+++ b/web/src/views/building/BuildingMaker.vue
@@ -16,7 +16,6 @@
       ></v-text-field>
 
       <v-select
-        :disabled="edit"
         label="Syndicus"
         :items="possibleUsers"
         v-model="building.syndicus"

From 5ef51a1ed91c91d5aedce03354b2ec0429bd78c7 Mon Sep 17 00:00:00 2001
From: Jens Pots <jens@jenspots.com>
Date: Sun, 21 May 2023 21:35:21 +0200
Subject: [PATCH 18/18] fix(web): allow updating syndici

---
 web/src/views/building/BuildingMaker.vue      | 19 ++++++++++++++-----
 .../student/SchedulingScreenStudents.vue      |  4 +++-
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/web/src/views/building/BuildingMaker.vue b/web/src/views/building/BuildingMaker.vue
index ad67cc846..1c8fa6622 100644
--- a/web/src/views/building/BuildingMaker.vue
+++ b/web/src/views/building/BuildingMaker.vue
@@ -416,7 +416,6 @@ const submit = () => {
 
       for (const fileId of fileIds.value) {
         const element: any = document.getElementById(fileId);
-        console.log(element.files.length);
         if (element.files.length > 0) {
           await new BuildingQuery().createImage(newBuilding, fileId);
         }
@@ -429,12 +428,22 @@ const submit = () => {
       }
 
       // Create address
-      console.log(formattedAddress);
       const newAddress = await new AddressQuery().updateOne({
         ...{ id: address_id.value },
         ...formattedAddress,
       });
-      console.log(newAddress);
+
+      let syndicus = (
+        await new SyndicusQuery().getAll({
+          user: buildingUnwrapped.syndicus.id,
+        })
+      ).pop();
+
+      if (!syndicus) {
+        syndicus = await new SyndicusQuery().createOne({
+          user_id: buildingUnwrapped.syndicus.id,
+        });
+      }
 
       const newBuilding = await new BuildingQuery().updateOne({
         id: buildingId.value,
@@ -444,11 +453,11 @@ const submit = () => {
         ivago_id: buildingUnwrapped.ivago_id,
         expected_time: buildingUnwrapped.expectedTimeInHours * 60,
         manual_id: building.value.manual_id,
+        syndicus_id: syndicus.id,
       });
+
       await router.push(`/gebouw/${newBuilding.id}`);
     }
-
-    // Redirect
   });
 };
 
diff --git a/web/src/views/student/SchedulingScreenStudents.vue b/web/src/views/student/SchedulingScreenStudents.vue
index 733f7fa05..618dd6456 100644
--- a/web/src/views/student/SchedulingScreenStudents.vue
+++ b/web/src/views/student/SchedulingScreenStudents.vue
@@ -60,7 +60,9 @@
                 variant="text"
                 size="compact"
               >
-                {{ new Date(item.schedule.day).toLocaleTimeString().slice(0,5) }}
+                {{
+                  new Date(item.schedule.day).toLocaleTimeString().slice(0, 5)
+                }}
               </v-chip>
               <v-chip label color="primary" class="mr-2">
                 <v-icon