Working app (post request commented)

src/components/FullscreenCamera.vue

@@ -42,11 +42,11 @@ function switchCamera() {
     <div style="display: flex; justify-content: center; align-items: center; height: 100%">
       <div @click="snapshot" class="photo-button" style="align-content: center;">
         <div class="circle"></div>
-        <div class="ring"></div>
+        <div class="buttonring"></div>
       </div>
       <div @click="switchCamera" class="swap-button" style="align-content: center;">
         <img src="/home/patryk/WebstormProjects/camera-app/src/assets/sync_200dp_FFFFFF_FILL0_wght700_GRAD200_opsz48.svg" style="height:80px; margin-left: 10px"/>
-        <div class="ring"></div>
+        <div class="buttonring"></div>
       </div>
 
     </div>
@@ -80,7 +80,7 @@ function switchCamera() {
   background-color: #ffffff;
   opacity: 0;
 }
-.ring {
+.buttonring {
   position: absolute;
   top: 0;
   left: 0;
@@ -91,13 +91,13 @@ function switchCamera() {
   border: 0.5em solid #ffffff;
   opacity: 0.8;
 }
-.photo-button .circle, .photo-button .ring {
+.photo-button .circle, .photo-button .buttonring {
   transition: all 0.25s;
 }
 .photo-button:hover .circle {
   opacity: 1;
 }
-.photo-button:active .ring {
+.photo-button:active .buttonring {
   opacity: 1;
 }
 .photo-button:active .circle {

src/views/HomeView.vue

@@ -15,6 +15,7 @@ const siteControlStore = useSiteControlStore();
 const checkpointStore = useCheckpointStore();
 const { isCameraOn } = storeToRefs(siteControlStore);
 const { checkpointList, currentCheckpoint } = storeToRefs(checkpointStore);
+const base64StringbyCheckpoint = ref<Map<string, string>>(new Map<string, string>());
 
 
 function switchCamera(checkpoint : CheckpointPhoto) {
@@ -23,33 +24,52 @@ function switchCamera(checkpoint : CheckpointPhoto) {
 }
 
 function sendPhoto() {
-  // let reader = new FileReader();
-  // let base64String;
-  // reader.readAsDataURL(photosList.value[0].photoBlob);
-  // reader.onloadend = function () {
-  //   base64String = reader.result as string;
-  //   console.log('Base64 String - ', base64String);
-  //
-  //   // Simply Print the Base64 Encoded String,
-  //   // without additional data: Attributes.
-  //   console.log('Base64 String without Tags- ',
-  //     base64String.substring(base64String.indexOf(',') + 1));
-  //   const json = {
-  //     comment: 'test test',
-  //     filename: 'test.png',
-  //     base64: base64String
-  //   }
-  //   console.log(JSON.stringify(json));
-  //   // axiosInstance.post('/upload', JSON.stringify(json)).then( response => {
-  //   //   console.log(response);
-  //   // });
-  //}
+  for(const checkpoint of checkpointList.value) {
+    let reader = new FileReader();
+    let base64String;
+    reader.onloadend = function () {
+      base64String = reader.result as string;
+      //console.log('Base64 String - ', base64String);
+
+      //console.log('Base64 String without Tags- ',
+      //  base64String.substring(base64String.indexOf(',') + 1));
+      base64StringbyCheckpoint.value.set(checkpoint.checkpointName, base64String);
+      sendRequest();
+    }
+    reader.readAsDataURL(checkpoint.photoBlob);
+  }
+}
+
+function sendRequest() {
+  if(base64StringbyCheckpoint.value.size == checkpointList.value.length) {
+    const json = [];
+    for(const checkpoint of checkpointList.value) {
+      json.push({
+        comment: checkpoint.comment,
+        filename: new Date(Date.now()).toISOString() + checkpoint.checkpointName + '.png',
+        base64: base64StringbyCheckpoint.value.get(checkpoint.checkpointName)
+      });
+    }
+    //console.log(base64StringbyCheckpoint);
+    console.log(JSON.stringify(json));
+    console.log(json);
+    // axiosInstance.post('/upload', JSON.stringify(json), {
+    //   headers: {
+    //     'Content-Type': 'application/json'
+    //   }
+    // }).then( response => {
+    //   console.log(response);
+    // });
+  }
 }
 </script>
 
 <template>
   <FullscreenCamera v-if="isCameraOn == true"/>
   <div v-else>
+    <div class="mb-2 p-2 shadow h-20">
+      <p class="font-medium text-5xl">Inspekcja</p>
+    </div>
     <DataView :value="checkpointList" layout="grid" data-key="">
       <template #grid="slotProps">
         <div class="grid grid-cols-12 gap-4">
@@ -82,10 +102,9 @@ function sendPhoto() {
         </div>
       </template>
     </DataView>
-    <Button label="Send photo" @click="sendPhoto"/>
-    <h1 class="text-3xl font-bold underline">
-      Hello world!
-    </h1>
+    <div class="flex">
+      <Button label="Send photo" @click="sendPhoto" class="m-2 grow"/>
+    </div>
   </div>
 
 </template>