Merge pull request #535 from SELab-2/web/feature/api-foto-ronde-integ…

…ratie Web: functionaliteit foto en comment toevoegen aan ronde
SELab-2 · May 21, 2023 · dc8398e · dc8398e
2 parents ad2cb80 + 84671a5
commit dc8398e
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 10 deletions.
diff --git a/web/src/components/images/PhotoMaker.vue b/web/src/components/images/PhotoMaker.vue
@@ -13,6 +13,7 @@
         v-if="isPhoto"
         single
         v-model="photo.image"
+        id="upload-progress"
         label="Selecteer afbeelding"
         accept="image/*"
         prepend-icon=""
@@ -38,7 +39,10 @@
       <div class="d-flex mb-4">
         <v-spacer></v-spacer
         ><SimpleButton
-          @click="$emit('confirm', photo, isPhoto)"
+          @click="
+            upload();
+            $emit('update', newProgress?.id);
+          "
           color="primary"
           prepend-icon="mdi-check"
           >Opslaan</SimpleButton
@@ -52,6 +56,10 @@
 import Photo from "@/components/models/Photo";
 import { ref } from "vue";
 import SimpleButton from "@/components/buttons/SimpleButton.vue";
+import { ProgressQuery, Result } from "@selab-2/groep-1-query";
+import { tryOrAlertAsync } from "@/try";
+import { PropType } from "vue";
+import { ProgressImageType } from "@selab-2/groep-1-orm";
 
 const ImageTypes = ["ARRIVAL", "DEPARTURE", "GARBAGE"];
 
@@ -64,16 +72,47 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
-  currentComments: String,
+  progress: { type: Object as PropType<Result<ProgressQuery>>, required: true },
 });
 
+const newProgress = ref<Result<ProgressQuery>>(props.progress);
+
 const photo = ref<Photo>({
   image: [],
   comments: "geen commentaar",
   type: "ARRIVAL",
 });
 
+async function upload() {
+  if (props.isPhoto) {
+    await uploadImage();
+  } else {
+    await report();
+  }
+}
+
+async function report() {
+  console.log(props.progress?.id);
+  tryOrAlertAsync(async () => {
+    newProgress.value = await new ProgressQuery().updateOne({
+      id: newProgress.value?.id,
+      report: photo.value.comments,
+    });
+  });
+}
+
+async function uploadImage() {
+  tryOrAlertAsync(async () => {
+    newProgress.value = await new ProgressQuery().createImage(
+      newProgress.value!,
+      "upload-progress",
+      photo.value.type as ProgressImageType,
+      photo.value.comments,
+    );
+  });
+}
+
 if (!props.isPhoto) {
-  photo.value.comments = String(props.currentComments);
+  photo.value.comments = "";
 }
 </script>
diff --git a/web/src/components/models/Photo.ts b/web/src/components/models/Photo.ts
@@ -1,6 +1,6 @@
 import { ProgressImageType } from "@selab-2/groep-1-orm";
 
-export default interface Address {
+export default interface Photo {
   image: File[];
   comments: string;
   type: ProgressImageType;

diff --git a/web/src/components/round/RoundDetailCard.vue b/web/src/components/round/RoundDetailCard.vue
@@ -187,10 +187,7 @@
               v-for="image in progress?.images"
               :key="image.id"
             >
-              <img
-                src="https://unsplash.com/photos/u_khkgVDmxA/download?ixid=MnwxMjA3fDB8MXxzZWFyY2h8Mnx8YmFzZW1lbnR8ZW58MHx8fHwxNjgxNzA5NzIx&force=true&w=640"
-                alt="opvolgfoto"
-              />
+              <img :src="ImgProxy.env.url(image.image)" alt="opvolgfoto" />
               <p style="font-weight: 700; font-size: 14px" class="mt-2">
                 {{ image.type }}
               </p>
@@ -225,6 +222,7 @@ import { ProgressQuery } from "@selab-2/groep-1-query";
 import { useAuthStore } from "@/stores/auth";
 import SimpleButton from "@/components/buttons/SimpleButton.vue";
 import RoundedInfoChip from "@/components/chips/RoundedInfoChip.vue";
+import { ImgProxy } from "@/imgproxy";
 
 const props = defineProps(["entry", "day", "schedule_id"]);
 const progress = ref(
@@ -233,6 +231,9 @@ const progress = ref(
     : undefined,
 );
 
+console.log(progress);
+console.log(progress.value.images);
+
 const isStudent = useAuthStore().auth?.student;
 const canEdit =
   isStudent && new Date(new Date(props.day).setHours(0, 0, 0)) <= new Date();

diff --git a/web/src/views/round/RoundDetail.vue b/web/src/views/round/RoundDetail.vue
@@ -150,9 +150,14 @@
   <v-overlay v-model="showOverlay" class="align-center justify-center">
     <PhotoMaker
       @cancel="showOverlay = false"
-      @confirm="() => {}"
+      @update="
+        (id) => {
+          showOverlay = false;
+          progressUpdated(id);
+        }
+      "
       :is-photo="overlayIsPhoto"
-      :current-comments="currentProgress?.report"
+      :progress="currentProgress!"
     />
   </v-overlay>
 </template>
@@ -186,6 +191,7 @@ const actions: Button[] = [
     title: "Opmerking toevoegen",
     clicked: () => {
       showOverlay.value = true;
+      setCurrentProgress();
       overlayIsPhoto.value = false;
     },
   },