Merge branch 'main' into preview

CartONG · Mar 26, 2024 · 30178e7 · 30178e7
2 parents d45b36a + 791ccf0
commit 30178e7
Show file tree

Hide file tree

Showing 10 changed files with 76 additions and 167 deletions.
diff --git a/src/Store.ts b/src/Store.ts
@@ -13,6 +13,8 @@ export class Store {
   private appState: ApplicationState = reactive({
     isMenuVisible: false,
     isPopUpVisible: false,
+    isImageModalVisible: false,
+    imageModalUrl: "",
     popUpType: null,
     popUpData: null,
     virtualVisitAlreadyOpened: false,
@@ -55,6 +57,14 @@ export class Store {
     this.appState.isPopUpVisible = !this.appState.isPopUpVisible
   }
 
+  public updateImageModalVisibility (visibility: boolean) {
+    this.appState.isImageModalVisible = visibility
+  }
+
+  public setImageModalUrl (url: string) {
+    this.appState.imageModalUrl = url
+  }
+
   public setPopUpData (data: OpsData | OtherData, type: PopUpType) {
     this.appState.popUpType = type
     this.appState.popUpData = data

diff --git a/src/classes/State.ts b/src/classes/State.ts
@@ -23,6 +23,8 @@ export enum PopUpType {
 export interface ApplicationState {
   isMenuVisible: boolean;
   isPopUpVisible: boolean;
+  isImageModalVisible: boolean;
+  imageModalUrl: string;
   popUpType: PopUpType | null;
   popUpData: OpsData | OtherData | null;
   virtualVisitAlreadyOpened: boolean;

diff --git a/src/classes/data/OpsData.ts b/src/classes/data/OpsData.ts
@@ -26,11 +26,11 @@ export interface OpsData {
   boatType : string
   nbNationalities : string
   transfertType : string
-  imageSrc: string[]
-  videoSrc: string[]
+  imageSrc: string
+  videoSrc: string
   portDisembarkation : string
-  testimonyName: string[]
-  testimonySrc: string[]
+  testimonyName: string
+  testimonySrc: string
 }
 
 const createDate = function (dateDayFirst: string) {
@@ -84,13 +84,13 @@ const convertOpsData = function (rawOpsData: {[key: string]: string}, metadataEr
   res.boatType = rawOpsData.boatType
   res.nbNationalities = rawOpsData.typeNationalities
   res.transfertType = rawOpsData.transfertType
-  res.imageSrc = rawOpsData.imageSrc ? rawOpsData.imageSrc.split(";") : []
-  res.videoSrc = rawOpsData.videoSrv ? rawOpsData.videoSrv.split(";") : []
+  res.imageSrc = rawOpsData.imageSrc
+  res.videoSrc = rawOpsData.videoSrv
   res.portDisembarkation = rawOpsData.PortDisembarkation
-  res.testimonyName = rawOpsData.testimonyName ? rawOpsData.testimonyName.split(";") : []
-  if (res.testimonyName.length === 1) res.testimonyName = res.testimonyName.pop() as unknown as string[]
-  res.testimonySrc = rawOpsData.testimonySrc ? rawOpsData.testimonySrc.split(";") : []
-  if (res.testimonySrc.length === 1) res.testimonySrc = res.testimonySrc.pop() as unknown as string[]
+  res.testimonyName = rawOpsData.testimonyName
+  // if (res.testimonyName.length === 1) res.testimonyName = res.testimonyName.pop() as unknown as string[]
+  res.testimonySrc = rawOpsData.testimonySrc
+  // if (res.testimonySrc.length === 1) res.testimonySrc = res.testimonySrc.pop() as unknown as string[]
   return res
 }
 

diff --git a/src/components/PopUp.vue b/src/components/PopUp.vue
@@ -10,11 +10,25 @@
       </div>
     </div>
   </transition>
+  <transition name="fade">
+        <div v-if="isModalVisible">
+          <div
+            @click="toggleImageModalVisibility"
+            class="image-modal"
+          >
+            <div
+              class="max-w-7xl p-3 rounded-xl shadow-lg bg-white opacity-100"
+            >
+                <img class="w-full" :src="currentImage">
+            </div>
+          </div>
+        </div>
+      </transition>
 </template>
 
 <script lang="ts" setup>
 import { store } from "@/main"
-import { computed } from "vue"
+import { computed, ref } from "vue"
 import OperationDescription from "./popUpContent/OperationDescription.vue"
 import IncidentDescription from "./popUpContent/IncidentDescription.vue"
 import DeathDescription from "./popUpContent/DeathDescription.vue"
@@ -25,6 +39,12 @@ function toggleVisibility () {
 }
 const isPopUpVisible = computed(() => store.getState().isPopUpVisible)
 const popUpType = computed(() => store.getState().popUpType)
+
+const isModalVisible = computed(() => store.getState().isImageModalVisible)
+function toggleImageModalVisibility () {
+  store.updateImageModalVisibility(false)
+}
+const currentImage = computed(() => store.getState().imageModalUrl)
 </script>
 
 <style>
@@ -69,4 +89,17 @@ const popUpType = computed(() => store.getState().popUpType)
 .testimony-text{
   text-decoration: underline dotted;
 }
+
+.image-modal{
+    display: flex;
+    z-index: 500;
+    justify-content: center;
+    align-items: center;
+    background-color: black;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    height: 100%;
+    width: 100%;
+  }
 </style>
diff --git a/src/components/Stats.vue b/src/components/Stats.vue
@@ -42,17 +42,17 @@
       </p>
       <div class="flex flex-row justify-around mb-2 text-main">
         <div class="flex flex-col">
-          <span class="icon icon-female text-3xl text-center"/>
+          <span class="icon icon-female text-4xl text-center"/>
           <span id="statsFemale" class="font-bold text-center"/>
           <p class="text-xs uppercase text-center">{{ $t("stats.females") }}</p>
         </div>
         <div class="flex flex-col">
-          <span class="icon icon-male text-3xl text-center"/>
+          <span class="icon icon-male text-4xl text-center"/>
           <span id="statsMale" class="font-bold text-center"/>
           <p class="text-xs uppercase text-center">{{ $t("stats.males") }}</p>
         </div>
         <div class="flex flex-col">
-          <span class="icon icon-kid text-3xl text-center"/>
+          <span class="icon icon-kid text-4xl text-center"/>
           <span id="statsMinor" class="font-bold text-center"/>
           <p class="text-xs uppercase text-center">{{ $t("stats.minors") }}</p>
         </div>
@@ -73,7 +73,7 @@
         <div class="flex flex-row">
           <span class="icon icon-bib text-3xl text-left text-secondary"/>
           <div class="flex flex-col">
-            <span id="statsChildren" class="font-bold text-center text-secondary"/>
+            <span id="statsChildren" class="font-bold text-left text-secondary"/>
             <p class="text-3xs uppercase text-left text-secondary text-stats-box">{{ $t("stats.children") }}</p>
           </div>
         </div>

diff --git a/src/components/popUpContent/DeathDescription.vue b/src/components/popUpContent/DeathDescription.vue
@@ -7,10 +7,10 @@
         </div>
         <p class="font-bold">{{ format(deathData.date, "full") }}</p>
         <hr class="border-dotted border-main border"/>
-        <p class="text-sm"><span class="icon icon-lifebuoy text-xl mr-3"/> {{ $t("popup.boatInvolved") }}:
+        <p class="text-sm mt-2 mb-2"><span class="icon icon-lifebuoy text-xl mr-3"/> {{ $t("popup.boatInvolved") }}:
           <span class="font-bold">{{ deathData.boatInvolved }}</span>
         </p>
-        <p class="text-sm"><span class="icon icon-rescue text-xl mr-3"/> {{ $t("popup.peoplesNB") }}:
+        <p class="text-sm mb-2"><span class="icon icon-rescue text-xl mr-3"/> {{ $t("popup.peoplesNB") }}:
           <span class="font-bold">{{ deathData.deathNumber }}</span>
         </p>
         <p class="text-sm flex" v-if="deathData.testimonySrc.length > 0">
@@ -35,20 +35,6 @@
       </div>
     </div>
   </div>
-  <transition name="fade">
-      <div v-if="isModalVisible">
-        <div
-          @click="toggleImageModalVisibility"
-          class="image-modal"
-        >
-          <div
-            class="max-w-7xl p-3 rounded-xl shadow-lg bg-white opacity-100"
-          >
-              <img class="w-full" :src="currentImage">
-          </div>
-        </div>
-      </div>
-    </transition>
 </template>
 
 <script lang="ts" setup>
@@ -61,15 +47,10 @@ import { format } from "@formkit/tempo"
 const deathData = computed(() => store.getState().popUpData as OtherData)
 const style = `--text-color: ${Colors.BLUE};`
 
-const isModalVisible = ref(false)
-function toggleImageModalVisibility () {
-  isModalVisible.value = !isModalVisible.value
-}
 function setCurrentImage (url: string) {
-  currentImage.value = url
-  isModalVisible.value = true
+  store.setImageModalUrl(url)
+  store.updateImageModalVisibility(true)
 }
-const currentImage = ref("")
 
 </script>
 
@@ -95,17 +76,4 @@ p, span {
 button {
   left: 100%;
 }
-
-.image-modal{
-  display: flex;
-  z-index: 100;
-  justify-content: center;
-  align-items: center;
-  background-color: black;
-  position: fixed;
-  top: 0px;
-  left: 0px;
-  height: 100%;
-  width: 100%;
-}
 </style>
diff --git a/src/components/popUpContent/IncidentDescription.vue b/src/components/popUpContent/IncidentDescription.vue
@@ -7,10 +7,10 @@
           </div>
           <p class="font-bold">{{ format(incidentData.date, "full") }}</p>
           <hr class="border-dotted border-main border"/>
-          <p class="text-sm"><span class="icon icon-lifebuoy text-xl mr-3"/> {{ $t("popup.boatInvolved") }}:
+          <p class="text-sm mb-2 mt-2"><span class="icon icon-lifebuoy text-xl mr-3"/> {{ $t("popup.boatInvolved") }}:
             <span class="font-bold">{{ incidentData.boatInvolved }}</span>
           </p>
-          <p class="text-sm flex">
+          <p class="text-sm mb-2 flex">
             <img src="@/assets/warning.svg" class="popup-icon"> {{ $t("popup.facts") }}:
             <span class="font-bold">{{ incidentData.incAction }}</span>
           </p>
@@ -36,20 +36,6 @@
         </div>
       </div>
     </div>
-    <transition name="fade">
-        <div v-if="isModalVisible">
-          <div
-            @click="toggleImageModalVisibility"
-            class="image-modal"
-          >
-            <div
-              class="max-w-7xl p-3 rounded-xl shadow-lg bg-white opacity-100"
-            >
-                <img class="w-full" :src="currentImage">
-            </div>
-          </div>
-        </div>
-      </transition>
   </template>
 
 <script lang="ts" setup>
@@ -62,15 +48,10 @@ import { format } from "@formkit/tempo"
 const incidentData = computed(() => store.getState().popUpData as OtherData)
 const style = `--text-color: ${Colors.BLUE};`
 
-const isModalVisible = ref(false)
-function toggleImageModalVisibility () {
-  isModalVisible.value = !isModalVisible.value
-}
 function setCurrentImage (url: string) {
-  currentImage.value = url
-  isModalVisible.value = true
+  store.setImageModalUrl(url)
+  store.updateImageModalVisibility(true)
 }
-const currentImage = ref("")
 
 </script>
 
@@ -96,17 +77,4 @@ const currentImage = ref("")
   button {
     left: 100%;
   }
-
-  .image-modal{
-    display: flex;
-    z-index: 100;
-    justify-content: center;
-    align-items: center;
-    background-color: black;
-    position: fixed;
-    top: 0px;
-    left: 0px;
-    height: 100%;
-    width: 100%;
-  }
   </style>
diff --git a/src/components/popUpContent/OperationDescription.vue b/src/components/popUpContent/OperationDescription.vue
@@ -80,40 +80,21 @@
         </div>
       </div>
     </div>
-    <transition name="fade">
-        <div v-if="isModalVisible">
-          <div
-            @click="toggleImageModalVisibility"
-            class="image-modal"
-          >
-            <div
-              class="max-w-7xl p-3 rounded-xl shadow-lg bg-white opacity-100"
-            >
-                <img class="w-full" :src="currentImage">
-            </div>
-          </div>
-        </div>
-      </transition>
   </template>
 
 <script lang="ts" setup>
 // import { Colors } from "@/utils/Colors"
 import { store } from "@/main"
-import { computed, ref } from "vue"
+import { computed } from "vue"
 import { OpsData } from "@/classes/data/OpsData"
 import { format } from "@formkit/tempo"
 
 const opsData = computed(() => store.getState().popUpData as OpsData)
 
-const isModalVisible = ref(false)
-function toggleImageModalVisibility () {
-  isModalVisible.value = !isModalVisible.value
-}
 function setCurrentImage (url: string) {
-  currentImage.value = url
-  isModalVisible.value = true
+  store.setImageModalUrl(url)
+  store.updateImageModalVisibility(true)
 }
-const currentImage = ref("")
 
 </script>
 
@@ -136,16 +117,7 @@ const currentImage = ref("")
     left: 100%;
   }
 
-  .image-modal{
-    display: flex;
-    z-index: 100;
-    justify-content: center;
-    align-items: center;
-    background-color: black;
-    position: fixed;
-    top: 0px;
-    left: 0px;
-    height: 100%;
-    width: 100%;
-  }
+  p, span {
+  color: var(--text-color);
+}
   </style>