Feat/add tutorial for detecting airsofts

backend/src/main.py

@@ -310,24 +310,26 @@ async def log_feedback(request: Request, user_id: Union[str, None] = Cookie(None
     return
 
 
-@app.post("/issue")
-async def log_issue(request: Request, user_id: Union[str, None] = Cookie(None)):
+@app.post("/tutorial-feedback")
+async def log_tutorial_feedback(request: Request, user_id: Union[str, None] = Cookie(None)):
     res = await request.json()
     user_agent = parse(request.headers.get("user-agent"))
 
     extras_logging = {
         "bg_date": datetime.now().isoformat(),
         "bg_image_url": res["image_url"],
-        "bg_issue": res["issue"],
+        "bg_tutorial_feedback": res["tutorial_feedback"],
         "bg_label": res["label"],
         "bg_confidence": res["confidence"],
         "bg_confidence_level": res["confidence_level"],
+        "bg_current_step": res["current_step"],
+        "bg_route_name": res["route_name"],
         "bg_user_id": user_id,
         "bg_device": get_device(user_agent),
         "bg_device_family": user_agent.device.family,
         "bg_device_os": user_agent.os.family,
         "bg_device_browser": user_agent.browser.family,
         "bg_version": APP_VERSION,
     }
-    logger.info("Issue", extra=extras_logging)
+    logger.info("Tutorial feedback", extra=extras_logging)
     return

frontend/src/components/OnboardingSwiper.vue

@@ -8,7 +8,7 @@
       >
         <swiper-slide class="flex justify-content-center">
           <img
-            src="../assets/basegun_green.png"
+            src="@/assets/basegun_green.png"
             alt=""
             class="swiper-logo"
           >
@@ -28,7 +28,7 @@
         </swiper-slide>
         <swiper-slide>
           <img
-            src="../assets/basegun_red.png"
+            src="@/assets/basegun_red.png"
             alt=""
             class="swiper-logo"
           >

frontend/src/components/SnackbarAlert.vue

@@ -22,7 +22,7 @@
 import { computed, watch } from 'vue'
 import { useRoute } from 'vue-router'
 
-import { useSnackbarStore } from '../stores/snackbar.js'
+import { useSnackbarStore } from '@/stores/snackbar.js'
 
 const route = useRoute()
 const snackbarStore = useSnackbarStore()

frontend/src/components/UploadButton.vue

@@ -46,7 +46,7 @@ export default {
   },
   methods: {
     onFileSelected (event) {
-      store.uploadMessage = 'Analyse...'
+      store.uploadMessage = 'Analyse'
       const uploadedFile = event.target.files[0]
       const vm = this // store this to be able to do router redirection later
 

frontend/src/views/Error.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="fr-container">
-    <div class="text-center m-4">
+    <div class="centered text-center m-4">
       <h1>Erreur</h1>
       <p>Une erreur est survenue dans le traitement de votre requête.</p>
       <p>Veuillez réessayer ou <a href="/informations"> nous contacter</a>.</p>

frontend/src/views/GuideFactice/AskingExpert.vue

@@ -2,7 +2,7 @@
 import { ref, computed } from 'vue'
 import axios from 'axios'
 import { useLocalStorage } from '@vueuse/core'
-import { useRouter } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 
 import { useSnackbarStore } from '@/stores/snackbar.js'
 import SnackbarAlert from '@/components/SnackbarAlert.vue'
@@ -11,32 +11,37 @@ import { useStepsStore } from '@/stores/steps.js'
 const stepsStore = useStepsStore()
 const { setMessage } = useSnackbarStore()
 const typology = computed(() => stepsStore.typology)
+
 const router = useRouter()
+const route = useRoute()
 
 const confidence = useLocalStorage('confidence')
 const confidenceLevel = useLocalStorage('confidenceLevel')
-const issue = useLocalStorage('issue')
+const tutorialFeedback = useLocalStorage('tutorialFeedback', '')
 const imgUrl = useLocalStorage('imgUrl')
 
 const showModal = ref(false)
-const issueText = ref('')
 
 function onClose () {
+  tutorialFeedback.value = ''
   showModal.value = false
 }
 
-async function sendIssue () {
+async function sendTutorialFeedback () {
   const json = {
     image_url: imgUrl.value,
-    issue: issueText.value,
-    confidence: confidence.value,
+    tutorial_feedback: tutorialFeedback.value,
     label: typology.value,
+    current_step: stepsStore.currentStep,
+    route_name: route.name,
+    confidence: confidence.value,
     confidence_level: confidenceLevel.value,
   }
-  await axios.post('/issue', json)
+  await axios.post('/tutorial-feedback', json)
     .then(async res => {
       console.log(res)
-      issue.value = json.issue
+      tutorialFeedback.value = json.tutorial_feedback
+      console.log(json)
       setMessage({ type: 'success', message: 'Votre message a été pris en compte' })
     })
     .catch(async (err) => {
@@ -45,6 +50,8 @@ async function sendIssue () {
     })
     .finally(setTimeout(() => {
       stepsStore.setCurrentStep(undefined)
+      tutorialFeedback.value = ''
+      console.log(json)
       router.push({ name: 'Result' }).catch(() => { })
     }, 3000))
 }
@@ -82,7 +89,7 @@ async function sendIssue () {
           En attendant, vous pouvez nous permettre d'améliorer le contenu de ce tutoriel en nous décrivant votre problème ci-dessous.
         </p>
         <DsfrInput
-          v-model="issueText"
+          v-model="tutorialFeedback"
           label="Décrivez votre problème"
           label-visible
           is-textarea
@@ -98,8 +105,8 @@ async function sendIssue () {
       <div class="footer-background">
         <DsfrButton
           label="Valider et retour au résultat"
-          :disabled="!issueText"
-          @click="sendIssue()"
+          :disabled="!tutorialFeedback"
+          @click="sendTutorialFeedback()"
         />
       </div>
     </DsfrModal>

frontend/src/views/GuideFactice/ExtractMag.vue

@@ -27,7 +27,7 @@ const typology = computed(() => stepsStore.typology)
           playsinline
           loop
           muted
-          :src="`/src/assets/videos-sm/${guideFacticeSelectOption[typology].video}`"
+          :src="`/guide-factice/videos/${guideFacticeSelectOption[typology].video}`"
         />
       </div>
     </div>
@@ -47,7 +47,7 @@ const typology = computed(() => stepsStore.typology)
           playsinline
           loop
           muted
-          :src="`/src/assets/videos-sm/${guideFacticeSelectOption[typology][selectedOption].video}`"
+          :src="`/guide-factice/videos/${guideFacticeSelectOption[typology][selectedOption].video}`"
         />
       </div>
     </div>

frontend/src/views/GuideFactice/SelectAmmo.vue

@@ -43,7 +43,7 @@ const zoomOn = (imgValue) => {
             class="radio"
             :class="{ 'wide': typology === 'epaule_a_verrou' }"
             v-bind="option"
-            :img="`/src/assets/${typology}/${option.img_ammo}`"
+            :img="`/guide-factice/images/${typology}/${option.img_ammo}`"
             required
             name="selectedAmmo"
           />
@@ -62,7 +62,7 @@ const zoomOn = (imgValue) => {
             >
               <img
                 v-if="zoom === option.value"
-                :src="`/src/assets/${typology}/${option.img_ammo}`"
+                :src="`/guide-factice/images/${typology}/${option.img_ammo}`"
                 :style="{'max-width': '100%'}"
               >
             </DsfrModal>

frontend/src/views/GuideFactice/SelectOption.vue

@@ -41,7 +41,7 @@ const zoomOn = (imgValue) => {
         <DsfrRadioButton
           v-model="selectedOption"
           v-bind="option"
-          :img="`/src/assets/${typology}/${option.img}`"
+          :img="`/guide-factice/images/${typology}/${option.img}`"
           required
           name="selectedOption"
         />
@@ -59,7 +59,7 @@ const zoomOn = (imgValue) => {
           >
             <img
               v-if="zoom === option.value"
-              :src="`/src/assets/${typology}/${option.img}`"
+              :src="`/guide-factice/images/${typology}/${option.img}`"
               :style="{'max-width': '100%'}"
             >
           </DsfrModal>

frontend/src/views/Instructions.vue

@@ -38,7 +38,7 @@ function readInstruction () {
     <div class="container-img  d-lg-flex">
       <div>
         <img
-          src="../assets/good-photo-example.jpg"
+          src="@/assets/good-photo-example.jpg"
           alt="photo d'une arme tournée vers la droite et centrée"
         >
         <p class="modal-img-text fr-text--xs">
@@ -47,8 +47,8 @@ function readInstruction () {
       </div>
       <div>
         <img
-          src="../assets/bad-photo-example.jpg"
-          alt="photo d'une arme tournée vers la gauche et partiellement coupée"
+          src="@/assets/bad-photo-example.jpg"
+          alt="photo d\'une arme tournée vers la gauche et partiellement coupée"
         >
         <p class="modal-img-text fr-text--xs">
           Exemple d'une mauvaise photo
@@ -79,7 +79,7 @@ function readInstruction () {
       v-else
       class="text-center bold"
     >
-      <p class="bold-highlight">
+      <p class="loading bold-highlight">
         {{ store.uploadMessage }}
       </p>
     </div>
@@ -115,4 +115,28 @@ img {
   font-style: italic;
 }
 
+/* loading dots */
+.loading:after {
+  content: ' .';
+  animation: dots 1s steps(5, end) infinite;}
+
+@keyframes dots {
+  0%, 20% {
+    color: rgba(0,0,0,0);
+    text-shadow:
+      .25em 0 0 rgba(0,0,0,0),
+      .5em 0 0 rgba(0,0,0,0);}
+  40% {
+    color: black;
+    text-shadow:
+      .25em 0 0 rgba(0,0,0,0),
+      .5em 0 0 rgba(0,0,0,0);}
+  60% {
+    text-shadow:
+      .25em 0 0 black,
+      .5em 0 0 rgba(0,0,0,0);}
+  80%, 100% {
+    text-shadow:
+      .25em 0 0 black,
+      .5em 0 0 black;}}
 </style>

frontend/src/views/PageNotFound.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="fr-container">
-    <div class="text-center m-4">
+    <div class="centered text-center m-4">
       <h1>Page non trouvée</h1>
       <p>Vous avez saisi ou suivi un lien vers une page qui n'existe pas.</p>
       <DsfrButton

frontend/src/views/Start.vue

@@ -2,7 +2,7 @@
   <div class="centered">
     <div class="text-center">
       <img
-        src="../assets/basegun.png"
+        src="@/assets/basegun.png"
         alt=""
       >
       <h1 class="accueil-title">