Merge pull request #149 from datalab-mi/enh/migrate-components-vue2-t…

…o-vue3

[WIP] enh: ♻️ migrate components vue2 to vue3

frontend/package.json

@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@gouvfr/dsfr": "^1.8.5",
-    "@gouvminint/vue-dsfr": "3.2.0",
+    "@gouvminint/vue-dsfr": "3.3.0",
     "@vue/compat": "^3.2.47",
     "@vueuse/core": "^9.12.0",
     "axios": "^0.27.2",

frontend/src/components/OnboardingSwiper.vue

@@ -1,3 +1,15 @@
+<script setup>
+
+import { Swiper, SwiperSlide } from 'swiper/vue'
+import { Navigation, Pagination, A11y } from 'swiper'
+
+import 'swiper/css'
+import 'swiper/css/navigation'
+import 'swiper/css/pagination'
+
+const modules = [Navigation, Pagination, A11y]
+
+</script>
 <template>
   <swiper
     :navigation="true"
@@ -58,32 +70,6 @@
     </swiper-slide>
   </swiper>
 </template>
-
-<script>
-
-import { Swiper, SwiperSlide } from 'swiper/vue'
-import { Navigation, Pagination, A11y } from 'swiper'
-
-import 'swiper/css'
-import 'swiper/css/navigation'
-import 'swiper/css/pagination'
-
-export default {
-  name: 'OnboardingSwiper',
-  components: {
-    Swiper,
-    SwiperSlide,
-  },
-
-  setup () {
-    return {
-      modules: [Navigation, Pagination, A11y],
-
-    }
-  },
-}
-</script>
-
 <style scoped>
 .swiper {
   width: 100%;

frontend/src/components/UploadButton.vue

@@ -1,23 +1,14 @@
-<template>
-  <div
-    id="demarrer"
-    style="width: 0; height: 1px; display: none;"
-  >
-    <input
-      ref="fileInput"
-      type="file"
-      style="width: 0; height: 1px"
-      :accept="handledImageTypes"
-      @change="onFileSelected($event)"
-    >
-  </div>
-</template>
-
-<script>
+<script setup>
+import { ref } from 'vue'
 import axios from 'axios'
 import { useResultStore } from '@/stores/result.js'
+import { useRouter } from 'vue-router'
 
 const resultStore = useResultStore()
+const router = useRouter()
+
+const fileInput = ref(null)
+const handledImageTypes = 'image/jpeg, image/png, image/tiff, image/webp, image/bmp, image/gif'
 
 function randomCoord (num) {
   num = parseFloat(num)
@@ -26,112 +17,118 @@ function randomCoord (num) {
   return (Math.random() * (max - min) + min) + num
 }
 
-export default {
-  name: 'UploadButton',
-  emits: ['file-selected'],
-  data () {
-    return {
-      baseUrl: import.meta.env.BASE_URL,
-      labelButton: 'Démarrer',
-      // supported image types: https://pillow.readthedocs.io/en/stable/handbook/image-file-formats.html
-      handledImageTypes: 'image/jpeg, image/png, image/tiff, image/webp, image/bmp, image/gif',
-    }
-  },
-  methods: {
-    click () {
-      this.$refs.fileInput.click()
-    },
-    onFileSelected (event) {
-      this.$emit('file-selected', event)
-      const uploadedFile = event.target.files[0]
-      const vm = this // store this to be able to do router redirection later
-
-      // get user geolocation
-      axios.get('https://api.ipgeolocation.io/ipgeo?apiKey=17dc6bed199b45ca92d60079686e03f1', { withCredentials: false })
-        .then(res => {
-          const latitude = randomCoord(res.data.latitude)
-          const longitude = randomCoord(res.data.longitude)
-          resultStore.setGeolocation(latitude.toString() + ',' + longitude.toString())
-        })
-        .catch(() => {})
-        .finally(() => {
-          // if geolocation is unavailable or incorrect format
-          resizeAndUpload(uploadedFile)
+function click () {
+  fileInput.value.click()
+}
+
+defineExpose({
+  click,
+})
+
+const emit = defineEmits(['file-selected'])
+
+function submitUpload (base64, fileName) {
+  srcToFile(base64, fileName, 'image/jpeg').then(file => {
+    const fd = new FormData()
+    fd.append('image', file, file.name)
+    fd.append('date', Date.now() / 1000) // date.now gives in milliseconds, convert to seconds
+    fd.append('geolocation', resultStore.geolocation)
+
+    axios.post('/upload', fd)
+      .then(res => {
+        resultStore.setResult({
+          typology: res.data.label,
+          confidence: res.data.confidence,
+          confidenceLevel: res.data.confidence_level,
+          resultText: "Type d'arme : " + res.data.label + ' ' + res.data.confidence + '%',
+          img: base64,
+          imgUrl: res.data.path,
         })
+        router.push({ name: 'Result' }).catch(() => {})
+      })
+      .catch((err) => {
+        console.log(err)
+        router.push({ name: 'Error' }).catch(() => {})
+      })
+  })
+}
+
+function resizeAndUpload (uploadedFile) {
+  const reader = new FileReader()
+  // convert File object to base64 data
+  reader.readAsDataURL(uploadedFile)
+
+  reader.onload = function (event) {
+    const imgElement = document.createElement('img')
+    imgElement.src = event.target.result
 
-      function resizeAndUpload (uploadedFile) {
-        const reader = new FileReader()
-        // convert File object to base64 data
-        reader.readAsDataURL(uploadedFile)
-
-        reader.onload = function (event) {
-          const imgElement = document.createElement('img')
-          imgElement.src = event.target.result
-
-          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, 0, 0, width, height)
-            const srcEncoded = ctx.canvas.toDataURL('image/jpeg')
-            submitUpload(srcEncoded, uploadedFile.name)
-          }
-
-          imgElement.onerror = function () {
-            alert('Corrupted image file, please try another')
-          }
+    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, 0, 0, width, height)
+      const srcEncoded = ctx.canvas.toDataURL('image/jpeg')
+      submitUpload(srcEncoded, uploadedFile.name)
+    }
 
-      function srcToFile (src, fileName, mimeType) {
-        return (fetch(src)
-          .then(function (res) { return res.arrayBuffer() })
-          .then(function (buf) { return new File([buf], fileName, { type: mimeType }) })
-        )
-      }
+    imgElement.onerror = function () {
+      alert('Corrupted image file, please try another')
+    }
+  }
+}
 
-      function submitUpload (base64, fileName) {
-        srcToFile(base64, fileName, 'image/jpeg').then(file => {
-          const fd = new FormData()
-          fd.append('image', file, file.name)
-          fd.append('date', Date.now() / 1000) // date.now gives in milliseconds, convert to seconds
-          fd.append('geolocation', resultStore.geolocation)
-
-          axios.post('/upload', fd)
-            .then(res => {
-              resultStore.setResult({
-                typology: res.data.label,
-                confidence: res.data.confidence,
-                confidenceLevel: res.data.confidence_level,
-                resultText: "Type d'arme : " + res.data.label + ' ' + res.data.confidence + '%',
-                img: base64,
-                imgUrl: res.data.path,
-              })
-              vm.$router.push({ name: 'Result' }).catch(() => {})
-            })
-            .catch((err) => {
-              console.log(err)
-              vm.$router.push({ name: 'Error' }).catch(() => {})
-            })
-        })
-      }
-    },
-  },
+async function srcToFile (src, fileName, mimeType) {
+  const res = await fetch(src)
+  const buf = await res.arrayBuffer()
+  return new File([buf], fileName, { type: mimeType })
+}
+
+function onFileSelected (event) {
+  emit('file-selected', event)
+  const uploadedFile = event.target.files[0]
+
+  // get user geolocation
+  axios.get('https://api.ipgeolocation.io/ipgeo?apiKey=17dc6bed199b45ca92d60079686e03f1', { withCredentials: false })
+    .then(res => {
+      const latitude = randomCoord(res.data.latitude)
+      const longitude = randomCoord(res.data.longitude)
+      resultStore.setGeolocation(latitude.toString() + ',' + longitude.toString())
+    })
+    .catch(() => {})
+    .finally(() => {
+      // if geolocation is unavailable or incorrect format
+      resizeAndUpload(uploadedFile)
+    })
 }
 </script>
+
+<template>
+  <div
+    id="demarrer"
+    style="width: 0; height: 1px; display: none;"
+  >
+    <input
+      ref="fileInput"
+      type="file"
+      style="width: 0; height: 1px"
+      :accept="handledImageTypes"
+      @change="onFileSelected($event)"
+    >
+  </div>
+</template>

frontend/src/views/Home.vue

@@ -1,6 +1,5 @@
 <script setup>
 import OnboardingSwiper from '@/components/OnboardingSwiper.vue'
-
 </script>
 
 <template>