From 9354fbea8a523d31071c8eb7fc3d67c5880fcfd8 Mon Sep 17 00:00:00 2001
From: Thomas Bernard <thomashbernard@gmail.com>
Date: Wed, 24 Jan 2024 15:43:54 +0100
Subject: [PATCH] Fix tutorial not showing

---
 frontend/src/components/UploadButton.vue | 138 -----------------------
 frontend/src/views/InstructionsPage.vue  | 112 ++++++++++++++++--
 2 files changed, 101 insertions(+), 149 deletions(-)
 delete mode 100644 frontend/src/components/UploadButton.vue

diff --git a/frontend/src/components/UploadButton.vue b/frontend/src/components/UploadButton.vue
deleted file mode 100644
index c0d02ccb7..000000000
--- a/frontend/src/components/UploadButton.vue
+++ /dev/null
@@ -1,138 +0,0 @@
-<script lang="ts" setup>
-import { ref } from 'vue'
-import axios from 'axios'
-import { useRouter } from 'vue-router'
-
-import { useResultStore } from '@/stores/result'
-import { getNextRouteAfterResult } from '@/utils/firearms-utils/get-next-route-after-result'
-
-const resultStore = useResultStore()
-const router = useRouter()
-
-const fileInput = ref<HTMLInputElement | null>(null)
-const handledImageTypes = 'image/jpeg, image/png, image/tiff, image/webp, image/bmp, image/gif'
-
-function randomCoord (num: string) {
-  const nb = parseFloat(num)
-  const max = 0.1
-  const min = -0.1
-  return (Math.random() * (max - min) + min) + nb
-}
-
-function click () {
-  fileInput.value?.click()
-}
-
-defineExpose({
-  click,
-})
-
-const emit = defineEmits(['file-selected'])
-
-async function submitUpload (base64: string, fileName: string) {
-  const file = await srcToFile(base64, fileName, 'image/jpeg')
-
-  const fd = new FormData()
-  fd.append('image', file, file.name)
-  fd.append('date', '' + (Date.now() / 1000)) // date.now gives in milliseconds, convert to seconds
-
-  try {
-    const { data } = await axios.post('/upload', fd)
-    resultStore.setResult({
-      typology: data.label,
-      confidence: data.confidence,
-      confidenceLevel: data.confidence_level,
-      resultText: "Type d'arme : " + data.label + ' ' + data.confidence + '%',
-      img: base64,
-      imgUrl: data.path,
-    })
-    const nextRoute = getNextRouteAfterResult({
-      securingTutorial: resultStore.securingTutorial,
-      confidenceLevel: resultStore.confidenceLevel,
-      typology: resultStore.typology,
-    })
-    router.push(nextRoute)
-  } catch (error) {
-    console.log(error)
-    router.push({ name: 'ErrorPage' })
-  }
-}
-
-function resizeAndUpload (uploadedFile: File) {
-  const reader = new FileReader()
-  // convert File object to base64 data
-  reader.readAsDataURL(uploadedFile)
-
-  reader.onload = function (event: ProgressEvent<FileReader>) {
-    const imgElement = document.createElement('img')
-    imgElement.src = event.target?.result as string
-
-    imgElement.onload = function (e) {
-      const canvas = document.createElement('canvas')
-      const MAX_WIDTH = 600
-      const MAX_HEIGHT = 600
-      let width = imgElement.width
-      let height = imgElement.height
-      if (width > height) {
-        if (width > MAX_WIDTH) {
-          height *= MAX_WIDTH / width
-          width = MAX_WIDTH
-        }
-      } else {
-        if (height > MAX_HEIGHT) {
-          width *= MAX_HEIGHT / height
-          height = MAX_HEIGHT
-        }
-      }
-      canvas.width = width
-      canvas.height = height
-      const ctx = canvas.getContext('2d')
-      ctx?.drawImage(e.target as CanvasImageSource, 0, 0, width, height)
-      const srcEncoded = ctx?.canvas.toDataURL('image/jpeg') as string
-      submitUpload(srcEncoded, uploadedFile.name)
-    }
-
-    imgElement.onerror = function () {
-      // TODO: Afficher l’erreur en français et dans une modal du DSFR et surtout pas dans un alert()
-      alert('Corrupted image file, please try another')
-    }
-  }
-}
-
-async function srcToFile (src: string, fileName: string, mimeType: string) {
-  const res = await fetch(src)
-  const buf = await res.arrayBuffer()
-  return new File([buf], fileName, { type: mimeType })
-}
-
-function onFileSelected (event: InputEvent & { target: InputEvent['target'] & { files: File[] } }) {
-  emit('file-selected', event)
-  const uploadedFile = event.target?.files[0]
-  resizeAndUpload(uploadedFile)
-}
-</script>
-
-<template>
-  <form
-    id="demarrer"
-    style="width: 0; height: 1px; display: none;"
-    @submit="submitUpload"
-  >
-    <input
-      ref="fileInput"
-      data-testid="select-file"
-      type="file"
-      style="width: 0; height: 1px"
-      :accept="handledImageTypes"
-      @change="onFileSelected($event)"
-    >
-    <button
-      id="file-submit"
-      data-testid="file-submit"
-      type="submit"
-      style="width: 0; height: 1px"
-    >
-      ok
-    </button>
-  </form>
-</template>
diff --git a/frontend/src/views/InstructionsPage.vue b/frontend/src/views/InstructionsPage.vue
index 5924b4f1c..056842dfe 100644
--- a/frontend/src/views/InstructionsPage.vue
+++ b/frontend/src/views/InstructionsPage.vue
@@ -1,13 +1,99 @@
 <script lang="ts" setup>
-import UploadButton from '@/components/UploadButton.vue'
 import GoodExamplePhoto from '@/assets/good-photo-example.jpg'
 import BadExamplePhoto from '@/assets/bad-photo-example.jpg'
 
-const uploadMessage = ref('')
+import { ref } from 'vue'
+import axios from 'axios'
+import { useRouter } from 'vue-router'
+
+import { useResultStore } from '@/stores/result'
+import { getNextRouteAfterResult } from '@/utils/firearms-utils/get-next-route-after-result'
+
+var loading = ref(false)
 const fileInput = ref<HTMLInputElement | null>(null)
 
-function readInstruction () {
-  fileInput.value?.click()
+const resultStore = useResultStore()
+const router = useRouter()
+
+const handledImageTypes = 'image/jpeg, image/png, image/tiff, image/webp, image/bmp, image/gif'
+
+async function uploadImage (base64: string, fileName: string, securingTutorial: boolean) {
+  const file = await srcToFile(base64, fileName, 'image/jpeg')
+
+  const fd = new FormData()
+  fd.append('image', file, file.name)
+  fd.append('date', '' + (Date.now() / 1000)) // date.now gives in milliseconds, convert to seconds
+
+  try {
+    const { data } = await axios.post('/upload', fd)
+    resultStore.setResult({
+      typology: data.label,
+      confidence: data.confidence,
+      confidenceLevel: data.confidence_level,
+      resultText: "Type d'arme : " + data.label + ' ' + data.confidence + '%',
+      img: base64,
+      imgUrl: data.path,
+    })
+    const nextRoute = getNextRouteAfterResult({
+      securingTutorial: securingTutorial,
+      confidenceLevel: resultStore.confidenceLevel,
+      typology: resultStore.typology,
+    })
+    router.push(nextRoute)
+  } catch (error) {
+    console.log(error)
+    router.push({ name: 'ErrorPage' })
+  }
+}
+
+function resizeImage (uploadedFile: File) {
+  const MAX_SIZE = 600
+  const reader = new FileReader()
+  const image = new Image()
+  const canvas = document.createElement('canvas')
+
+  reader.readAsDataURL(uploadedFile)
+  reader.onload = (event: ProgressEvent<FileReader>) => {
+    image.src = event.target?.result as string
+  }
+  return new Promise<string>((resolve, reject) => {
+    image.onload = (e) => {
+      let width = image.width
+      let height = image.height
+      if (width > height) {
+        if (width > MAX_SIZE) {
+          height *= MAX_SIZE / width
+          width = MAX_SIZE
+        }
+      } else {
+        if (height > MAX_SIZE) {
+          width *= MAX_SIZE / height
+          height = MAX_SIZE
+        }
+      }
+      canvas.width = width
+      canvas.height = height
+      const ctx = canvas.getContext('2d')
+      ctx?.drawImage(e.target as CanvasImageSource, 0, 0, width, height)
+      resolve(ctx?.canvas.toDataURL('image/jpeg') as string)
+    }
+    image.onerror = (err) => reject(err)
+  })
+}
+
+async function srcToFile (src: string, fileName: string, mimeType: string) {
+  const res = await fetch(src)
+  const buf = await res.arrayBuffer()
+  return new File([buf], fileName, { type: mimeType })
+}
+
+function onFileSelected (event: InputEvent & { target: InputEvent['target'] & { files: File[] } }) {
+  loading.value = true
+  const uploadedFile = event.target?.files[0]
+  
+  resizeImage(uploadedFile).then((resizedBase64Image) => (
+    uploadImage(resizedBase64Image, uploadedFile.name, resultStore.securingTutorial)
+  ))
 }
 </script>
 
@@ -45,23 +131,27 @@ function readInstruction () {
   <div class="big-blank" />
   <div class="footer">
     <div
-      v-if="!uploadMessage"
+      v-if="!loading"
       class="btn-read-instruction text-center"
     >
       <div
         class="fr-col-11 fr-col-lg-6 mx-auto"
       >
-        <UploadButton
+        <input
           ref="fileInput"
-          @file-selected="uploadMessage = 'Analyse en cours'"
-        />
+          data-testid="select-file"
+          type="file"
+          style="width: 0; height: 1px"
+          :accept="handledImageTypes"
+          @change="onFileSelected($event)"
+        >
         <DsfrButton
-          class="flex justify-center"
+          class="fr-btn flex justify-center"
           data-testid="take-a-picture"
           label="Prendre la photo"
           icon="ri-camera-fill"
           :icon-right="true"
-          @click="readInstruction()"
+          @click="$refs.fileInput.click()"
         />
       </div>
     </div>
@@ -70,7 +160,7 @@ function readInstruction () {
       class="text-center bold"
     >
       <p class="loading font-bold">
-        {{ uploadMessage }}
+        Analyse en cours
       </p>
     </div>
   </div>