Add port, videos and pictures in pop-up

src/Store.ts

@@ -9,6 +9,15 @@ export interface ReactiveStore {
 
   updatePopUpVisibility: () => void;
   isPopUpVisible: boolean;
+
+  setVideoAndPicturePopUpVisibility: (visible: boolean) => void;
+  isVideoAndPicturePopUpVisible: boolean;
+
+  setPopUpVideoUrls: (popUpVideoUrls: string[]) => void;
+  popUpVideoUrls: string[];
+
+  setPopUpImageUrls: (popUpImageUrls: string[]) => void;
+  popUpImageUrls: string[];
 }
 
 export const reactiveStore : ReactiveStore = reactive({
@@ -30,6 +39,36 @@ export const reactiveStore : ReactiveStore = reactive({
 
   get isPopUpVisible (): boolean {
     return this._isPopUpVisible
+  },
+
+  _isVideoAndPicturePopUpVisible: false,
+
+  setVideoAndPicturePopUpVisibility (visible: boolean) {
+    this._isVideoAndPicturePopUpVisible = visible
+  },
+
+  get isVideoAndPicturePopUpVisible (): boolean {
+    return this._isVideoAndPicturePopUpVisible
+  },
+
+  _popUpVideoUrls: [""],
+
+  setPopUpVideoUrls (popUpVideoUrls: string[]) {
+    this._popUpVideoUrls = popUpVideoUrls
+  },
+
+  get popUpVideoUrls (): string[] {
+    return this._popUpVideoUrls
+  },
+
+  _popUpImageUrls: [""],
+
+  setPopUpImageUrls (popUpImageUrls: string[]) {
+    this._popUpImageUrls = popUpImageUrls
+  },
+
+  get popUpImageUrls (): string[] {
+    return this._popUpImageUrls
   }
 })
 

src/classes/OpsData.ts

@@ -25,6 +25,9 @@ export class OpsData {
   boatType = ""
   nbNationalities = NaN
   transfertType = ""
+  imageSrc: string[] = []
+  videoSrc: string[] = []
+  portDisembarkation = ""
 }
 
 const createDate = function (dateDayFirst: string) {
@@ -57,6 +60,9 @@ const convertOpsData = function (rawOpsData: {[key: string]: string}, metadataEr
   res.boatType = rawOpsData.boatType
   res.nbNationalities = parseInt(rawOpsData.nbNationalities)
   res.transfertType = rawOpsData.transfertType
+  res.imageSrc = rawOpsData.imageSrc ? rawOpsData.imageSrc.split(";") : []
+  res.videoSrc = rawOpsData.videoSrv ? rawOpsData.videoSrv.split(";") : []
+  res.portDisembarkation = rawOpsData.PortDisembarkation
   return res
 }
 

src/classes/PopUpAndStats.ts

@@ -21,6 +21,7 @@ const fillPopUp = function (data: OpsData) {
   setInnerText("popUpTypeOps", data.typeOps)
   setInnerText("popUpDate", data.date.toDateString())
   setInnerText("popUpBoatType", data.boatType)
+  setInnerText("popUpPort", data.portDisembarkation)
   setInnerText("popUpNbSurvivor", numberToString(data.nbSurvivor))
   setInnerText("popUpFemale", numberToString(data.female))
   setInnerText("popUpMale", numberToString(data.male))
@@ -38,6 +39,9 @@ const fillPopUp = function (data: OpsData) {
 export const showPopUp = function (data: OpsData): void {
   reactiveStore.updatePopUpVisibility()
   fillPopUp(data)
+  reactiveStore.setVideoAndPicturePopUpVisibility(data.imageSrc.length > 0 || data.videoSrc.length > 0)
+  reactiveStore.setPopUpVideoUrls(data.videoSrc)
+  reactiveStore.setPopUpImageUrls(data.imageSrc)
 }
 
 export const updateStats = function (state: State): void {

src/components/PopUp.vue

@@ -3,7 +3,7 @@
   <div id="popUp" :style="style"
        class="z-100 fixed top-0 left-0 w-screen h-screen flex items-center justify-center transform transition-transform duration-300"
        :class="scaleClass">
-    <div class="bg-white rounded-3xl p-6">
+    <div class="bg-white rounded-3xl p-6 max-w-[90%] sm:max-w-[20%] max-h-[80%] overflow-auto">
       <div class="flex flex-col justify-around h-3/4">
         <div class="flex justify-between">
           <h1 id="popUpTypeOps" class="font-bold text-secondary"/>
@@ -14,6 +14,9 @@
         <p class="text-sm"><span class="icon icon-lifebuoy text-xl mr-3"/>Boat in distress: <span id="popUpBoatType"
                                                                                                   class="font-bold"/>
         </p>
+        <p class="text-sm"><span class="icon icon-anchor text-xl mr-3"/>Disembarkation port: <span id="popUpPort"
+                                                                                                  class="font-bold"/>
+        </p>
         <p class="text-sm"><span class="icon icon-rescue text-xl mr-3"/><span id="popUpNbSurvivor" class="font-bold"/>
           people rescued</p>
         <div class="flex flex-row">
@@ -65,6 +68,13 @@
           height: <span id="popUpWave"/> m</p>
         <p class="text-sm"><span class="icon icon-marker text-xl mr-3"/>Lat: <span id="popUpLat"/> - Lon: <span
           id="popUpLon"/></p>
+        <p v-if="videoAndPictures" class="text-sm"><span class="icon icon-camera text-xl mr-3"/>Videos and pictures</p>
+        <div v-if="videoAndPictures" class="flex flex-wrap">
+          <video v-for="url in videoUrls" :key="url" class="max-w-[50%] p-1" controls>
+            <source :src="url" type="video/mp4">
+          </video>
+          <img v-for="url in imageUrls" :key="url" class="max-w-[50%] p-1" :src="url">
+        </div>
       </div>
     </div>
   </div>
@@ -88,6 +98,15 @@ export default {
       return `
         --text-color: ${Colors.BLUE};
       `
+    },
+    videoAndPictures (): boolean {
+      return reactiveStore.isVideoAndPicturePopUpVisible
+    },
+    videoUrls (): string[] {
+      return reactiveStore.popUpVideoUrls
+    },
+    imageUrls (): string[] {
+      return reactiveStore.popUpImageUrls
     }
   },
   data (): { reactiveStore: ReactiveStore } {