add popup video component

dnum-mi · Nov 9, 2023 · 55364ae · 55364ae
1 parent 41b8d6b
commit 55364ae
Show file tree

Hide file tree

Showing 8 changed files with 128 additions and 43 deletions.
diff --git a/frontend/src/assets/guide-mise-en-securite/videos/epaule_a_verrou/epaule_verrou_surete.mp4 b/frontend/src/assets/guide-mise-en-securite/videos/epaule_a_verrou/epaule_verrou_surete.mp4
diff --git a/frontend/src/components.d.ts b/frontend/src/components.d.ts
@@ -8,6 +8,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     AskingExpert: typeof import('./components/AskingExpert.vue')['default']
+    FooterMES: typeof import('./components/FooterMES.vue')['default']
     HeaderMain: typeof import('./components/HeaderMain.vue')['default']
     OnboardingSwiper: typeof import('./components/OnboardingSwiper.vue')['default']
     PopupVideo: typeof import('./components/PopupVideo.vue')['default']

diff --git a/frontend/src/components/FooterMES.vue b/frontend/src/components/FooterMES.vue
@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+</script>
+
+<template>
+  <div class="footer">
+    <div class="fr-col-11 fr-col-lg-6 footer-actions mx-auto">
+      <DsfrButton
+        class="m-1 flex justify-center"
+        icon="ri-arrow-left-line"
+        :secondary="true"
+        label="Précédent"
+        @click="router.back()"
+      />
+      <DsfrButton
+        class="m-1 flex justify-center"
+        icon="ri-arrow-right-line"
+        data-testid="button-next"
+        label="Suivant"
+        :icon-right="true"
+        @click="router.push({ name:'SecuringAchievement'})"
+      />
+    </div>
+  </div>
+</template>
+
+<style>
+.footer {
+  background-color: #fff;
+  box-shadow: 0 -4px 16px rgb(0 0 0 / 25%);
+}
+
+.footer button {
+  width: 50%;
+}
+</style>
diff --git a/frontend/src/components/PopupVideo.vue b/frontend/src/components/PopupVideo.vue
@@ -1,10 +1,10 @@
 <script lang="ts" setup>
-import { useRoute, useRouter } from 'vue-router'
+import { useResultStore } from '@/stores/result'
 import semiAutoMilitairePistoletMitralleurVideoS from '@/assets/guide-mise-en-securite/videos/semi_auto_militaire_autre/semi_auto_mil_uzi_surete.mp4'
+import epauleAVerrouVideoS from '@/assets/guide-mise-en-securite/videos/epaule_a_verrou/epaule_verrou_surete.mp4'
 
-const stepsStore = useStepsStore()
 const resultStore = useResultStore()
-
+const typology = computed(() => resultStore.typology)
 const showModal = ref(false)
 
 function onClose () {
@@ -17,6 +17,7 @@ function onClose () {
     <DsfrButton
       class="m-1 flex justify-center"
       href="#"
+      icon="ri-lock-line"
       label="Si le levier est bloqué, cliquer ici"
       @click="showModal = true"
     />
@@ -36,16 +37,41 @@ function onClose () {
             />
             Le levier est bloqué ?
           </h2>
-
-          <div class="fr-content-media relative">
-            <video
-              controls
-              playsinline
-              muted
-              :src="semiAutoMilitairePistoletMitralleurVideoS"
-              data-testid="video-tutoriel"
-            />
-            <span class="absolute -bottom-1.5rem right-0 text-sm">Environ 12 sec</span>
+          <div v-if="typology === 'semi_auto_style_militaire_autre'">
+            <div class="fr-content-media relative">
+              <video
+                controls
+                playsinline
+                muted
+                :src="semiAutoMilitairePistoletMitralleurVideoS"
+                data-testid="video-tutoriel"
+              />
+              <span class="absolute -bottom-1.5rem right-0 text-sm">Environ 12 sec</span>
+            </div>
+            <div class="manipulations -mx-1 p-5">
+              <ol class="list text-sm">
+                <li> Observer l’arme en l’orientant dans une <span class="font-bold">direction sans risque</span>, en manipulant avec précaution</li>
+                <li> <span class="font-bold">Appuyer sur la pédale de sûreté</span> située sur l'arrière afin de pouvoir manipuler le levier</li>
+              </ol>
+            </div>
+          </div>
+          <div v-else>
+            <div class="fr-content-media relative">
+              <video
+                controls
+                playsinline
+                muted
+                :src="epauleAVerrouVideoS"
+                data-testid="video-tutoriel"
+              />
+              <span class="absolute -bottom-1.5rem right-0 text-sm">Environ 15 sec</span>
+            </div>
+            <div class="manipulations -mx-1 p-5">
+              <ol class="list text-sm">
+                <li> Observer l’arme en l’orientant dans une <span class="font-bold">direction sans risque</span>, en manipulant avec précaution</li>
+                <li> <span class="font-bold">Faites basculer le levier de sûreté</span> situé à la base du levier de culasse pour le débloquer</li>
+              </ol>
+            </div>
           </div>
           <div class="fr-col-11 fr-col-lg-6 footer-actions mx-auto">
             <DsfrButton
@@ -93,4 +119,11 @@ video {
   width: 100% !important;
   height: auto !important;
 }
+
+.manipulations {
+  background-color: #E3E3FD;
+  margin-top: 40px;
+  margin-bottom: 24px;
+  margin-right: 0;
+}
 </style>
diff --git a/frontend/src/views/GuideIdentificationFirearm/GuideIdentificationFirearm.vue b/frontend/src/views/GuideIdentificationFirearm/GuideIdentificationFirearm.vue
@@ -98,7 +98,7 @@ async function sendLogsIdentificationDummy () {
         :to="{name: 'StartPage'}"
       >
         <DsfrButton
-          class="flex justify-center w-full"
+          class="flex justify-center !w-full"
           label="Retour à l'accueil"
           icon="ri-home-4-line"
           data-testid="return-to-home-end"
@@ -108,7 +108,7 @@ async function sendLogsIdentificationDummy () {
       </router-link>
       <DsfrButton
         v-if="resultTree[typology]?.isDummyTypology"
-        class="mt-3 flex justify-center w-full"
+        class="mt-3 flex justify-center !w-full"
         label="Retourner à l'étape précédente"
         icon="ri-arrow-go-back-fill"
         :icon-right="true"

diff --git a/frontend/src/views/GuideSecuringFirearm/SecuringAchievement.vue b/frontend/src/views/GuideSecuringFirearm/SecuringAchievement.vue
@@ -61,7 +61,7 @@ const typology = computed(() => resultStore.typology)
         :to="{name: 'IdentificationTypologyResult'}"
       >
         <DsfrButton
-          class="flex justify-center w-full"
+          class="flex justify-center !w-full"
           label="Je veux identifier mon arme"
           icon="ri-arrow-right-line"
           :icon-right="true"
@@ -74,7 +74,7 @@ const typology = computed(() => resultStore.typology)
         :to="{name:'StartPage'}"
       >
         <DsfrButton
-          class="mt-3 flex justify-center w-full"
+          class="mt-3 flex justify-center !w-full"
           label="Retour à l'accueil"
           icon="ri-home-4-line"
           :icon-right="true"

diff --git a/frontend/src/views/GuideSecuringFirearm/SecuringFooter.vue b/frontend/src/views/GuideSecuringFirearm/SecuringFooter.vue
@@ -25,15 +25,15 @@ const backClick = (navigate: () => void) => {
 
 <template>
   <div class="footer">
-    <div class="fr-col-11  fr-col-lg-6  footer-actions  mx-auto">
+    <div class="fr-col-11 fr-col-lg-6 footer-actions mx-auto">
       <RouterLink
         v-slot="{ navigate }"
         class="m-1"
         :to="backTo"
       >
         <DsfrButton
+          class="flex justify-center !w-full"
           icon="ri-arrow-left-line"
-          class="flex  justify-center  w-full"
           :secondary="true"
           label="Précédent"
           @click.stop.prevent="backClick(navigate)"
@@ -45,7 +45,7 @@ const backClick = (navigate: () => void) => {
         :to="nextTo"
       >
         <DsfrButton
-          class="flex  justify-center  w-full"
+          class="flex justify-center !w-full"
           icon="ri-arrow-right-line"
           :disabled="nextDisabled"
           data-testid="button-next"
@@ -62,4 +62,5 @@ const backClick = (navigate: () => void) => {
 .footer a {
   width: 50%;
 }
+
 </style>
diff --git a/frontend/src/views/GuideSecuringFirearm/SecuringTutorialContent.vue b/frontend/src/views/GuideSecuringFirearm/SecuringTutorialContent.vue
@@ -87,10 +87,10 @@ const openNextAccordion = (currentIndex: number) => {
                     </DsfrButton>
                   </div>
                   <AskingExpert />
-                  <div class="small-blank" />
                 </DsfrAccordion>
               </li>
             </DsfrAccordionsGroup>
+            <FooterMES />
           </div>
         </div>
         <div v-else-if="selectedOptionStep === 'revolver_verrou_1892'">
@@ -119,6 +119,7 @@ const openNextAccordion = (currentIndex: number) => {
           </p>
           <div class="small-blank" />
           <AskingExpert />
+          <FooterMES />
         </div>
         <div v-else>
           <div
@@ -148,6 +149,9 @@ const openNextAccordion = (currentIndex: number) => {
               />
             </ul>
           </div>
+          <div class="small-blank" />
+          <AskingExpert />
+          <FooterMES />
         </div>
       </div>
       <div v-else>
@@ -175,7 +179,12 @@ const openNextAccordion = (currentIndex: number) => {
                 v-html="option"
               />
             </ul>
+            <div v-if="typology === `semi_auto_style_militaire_autre` && stepsStore.currentOptionStep['1'] === 'uzi'">
+              <PopupVideo />
+            </div>
           </div>
+          <div class="small-blank" />
+          <AskingExpert />
         </div>
         <div v-else>
           <div
@@ -201,30 +210,32 @@ const openNextAccordion = (currentIndex: number) => {
                 v-html="option"
               />
             </ul>
+            <div v-if="typology === 'epaule_a_verrou'">
+              <PopupVideo />
+            </div>
+          </div>
+          <div class="small-blank" />
+          <AskingExpert />
+        </div>
+        <div class="footer">
+          <div class="fr-col-11 fr-col-lg-6 footer-actions mx-auto">
+            <DsfrButton
+              class="m-1 flex justify-center"
+              icon="ri-arrow-left-line"
+              :secondary="true"
+              label="Précédent"
+              @click="router.back()"
+            />
+            <DsfrButton
+              class="m-1 flex justify-center"
+              icon="ri-arrow-right-line"
+              data-testid="button-next"
+              label="Suivant"
+              :icon-right="true"
+              @click="router.push({ name:'SecuringAchievement'})"
+            />
           </div>
         </div>
-        <div class="small-blank" />
-        <PopupVideo />
-        <AskingExpert />
-      </div>
-    </div>
-    <div class="footer">
-      <div class="fr-col-11 fr-col-lg-6 footer-actions mx-auto">
-        <DsfrButton
-          class="m-1 flex justify-center"
-          icon="ri-arrow-left-line"
-          :secondary="true"
-          label="Précédent"
-          @click="router.back()"
-        />
-        <DsfrButton
-          class="m-1 flex justify-center"
-          icon="ri-arrow-right-line"
-          data-testid="button-next"
-          label="Suivant"
-          :icon-right="true"
-          @click="router.push({ name:'SecuringAchievement'})"
-        />
       </div>
     </div>
   </div>