Merge branch 'main' into preview

src/classes/BaseMap.ts

@@ -1,13 +1,12 @@
 /* eslint-disable no-return-assign */
 import { OpsData } from "./data/OpsData"
 import { MapboxGLButtonControl } from "./MapboxGLButtonControl"
-import { GeoJSONSource, LngLatBounds, LngLatLike, Map, MapMouseEvent, NavigationControl, Popup } from "mapbox-gl"
-// import { showOperationPopUp } from "./PopUpAndStats"
-import { FeatureCollection, Point } from "geojson"
+import { GeoJSONSource, LngLatBounds, Map, MapMouseEvent, NavigationControl, Popup } from "mapbox-gl"
+import { FeatureCollection } from "geojson"
 import "mapbox-gl/dist/mapbox-gl.css"
 import { BaseMapPickerControl } from "./BaseMapPickerControl"
 import { opsDataToGeoJSON } from "@/utils/arrayToGeojson"
-import { ref } from "vue"
+import { ref, reactive } from "vue"
 import { Store } from "@/Store"
 import { store } from "@/main"
 import { DataState, PopUpType } from "./State"
@@ -43,7 +42,15 @@ export const BASEMAPS: Array<SingleBasemap> = [{
 // Global variable used for setting on/off map event like click on operations layer
 // Explanation here: https://stackoverflow.com/questions/63036623/how-to-disable-an-event-listener-in-mapbox
 let map: Map
-const popup = new Popup({ closeOnClick: false, closeButton: false })
+// const popup = new Popup({ closeOnClick: false, closeButton: false, className: "harborPopUp" })
+export const harborPopUp = reactive({
+  visible: false,
+  content: "",
+  coordinates: {
+    x: 0,
+    y: 0
+  }
+})
 
 export class BaseMap {
   private map!: Map
@@ -194,6 +201,8 @@ export class BaseMap {
           "#F03E1B",
           "Transfer",
           "#9CA3AF",
+          "Medevac",
+          "#1A2747",
           /* other */ "#000"
         ]
       }
@@ -227,7 +236,7 @@ export class BaseMap {
       type: "circle",
       source: "Deaths",
       paint: {
-        "circle-radius": ["step", ["zoom"], 6, 6, 8, 7.5, 10, 9, 12],
+        "circle-radius": ["step", ["zoom"], 4, 6, 6, 7.5, 8, 9, 10],
         "circle-color": "#000000"
       }
     })
@@ -241,7 +250,7 @@ export class BaseMap {
       layout: {
         "text-field": ["get", "deathNumber"],
         // "text-size": ["step", ["zoom"], 0, 13, 15],
-        "text-size": 12,
+        "text-size": 10,
         "text-justify": "auto",
         "text-font": ["Open Sans Semibold"]
       }
@@ -255,16 +264,23 @@ export class BaseMap {
       source: "Shipwrecks",
       layout: {
         "icon-image": "shipwreck",
-        "icon-size": 0.5,
+        "icon-size": ["step", ["zoom"], 0.2, 6, 0.3, 7.5, 0.4, 9, 0.5],
         "icon-allow-overlap": true
       }
     })
   }
 
   private clickOnDataLayer (e: MapMouseEvent) {
     const data = map.queryRenderedFeatures(e.point)[0].properties
-    data!.imageSrc = data!.imageSrc ? data!.imageSrc.split(";").filter((x: any) => x !== "") : ""
-    data!.videoSrc = data!.videoSrc ? data!.videoSrc.split(";").filter((x: any) => x !== "") : ""
+    data!.imageSrc = data!.imageSrc ? data!.imageSrc.split(";").filter((x: any) => x !== "") : []
+    data!.videoSrc = data!.videoSrc ? data!.videoSrc.split(";").filter((x: any) => x !== "") : []
+    if (data!.testimonyName) {
+      data!.testimonyName = data!.testimonyName !== "[]" ? data!.testimonyName.split(";").filter((x: any) => x !== "") : []
+      data!.testimonySrc = data!.testimonySrc !== "[]" ? data!.testimonySrc.split(";").filter((x: any) => x !== "") : []
+    } else {
+      data!.testimonyName = []
+      data!.testimonySrc = []
+    }
     let type = PopUpType.OPS
     if (data?.type && data.type === OtherDataTypes.INCIDENT) type = PopUpType.INCIDENT
     if (data?.type && data.type === OtherDataTypes.DEATH) type = PopUpType.DEAD
@@ -279,7 +295,7 @@ export class BaseMap {
       source: "harbors",
       layout: {
         "icon-image": "harbor",
-        "icon-size": 0.35,
+        "icon-size": 0.45,
         "icon-allow-overlap": true
       }
     })
@@ -288,14 +304,13 @@ export class BaseMap {
   }
 
   private setHarborsPopUp (e: MapMouseEvent) {
-    const features = map.queryRenderedFeatures(e.point, { layers: ["harbors"] })
-    popup
-      .setLngLat((features[0].geometry as Point).coordinates as LngLatLike)
-      .setHTML(`<h1>${features[0].properties?.name}</h1>`).addTo(map)
+    harborPopUp.coordinates = e.point
+    harborPopUp.content = map.queryRenderedFeatures(e.point, { layers: ["harbors"] })[0].properties?.name
+    harborPopUp.visible = true
   }
 
   private removeHarborsPopUp () {
-    popup.remove()
+    harborPopUp.visible = false
   }
 
   private addSarLayers () {
@@ -325,7 +340,7 @@ export class BaseMap {
       this.map.off("mouseenter", "harbors", this.setHarborsPopUp)
       this.map.off("mouseleave", "harbors", this.removeHarborsPopUp)
     }
-    if (this.filtersState.rescue || this.filtersState.transfer) {
+    if (this.filtersState.rescue || this.filtersState.transfer || this.filtersState.medEvac) {
       if (!this.map.getLayer("Operation")) this.addOperationLayer()
       this.filterOperationsData()
     } else {
@@ -365,6 +380,9 @@ export class BaseMap {
     if (!this.filtersState.transfer) {
       this.filteredOperationsData = this.operationsData.filter(x => x.typeOps !== "Transfer")
     }
+    if (!this.filtersState.medEvac) {
+      this.filteredOperationsData = this.operationsData.filter(x => x.typeOps !== "Medevac")
+    }
     (this.map.getSource("operations") as GeoJSONSource).setData(opsDataToGeoJSON(this.filteredOperationsData))
   }
 

src/classes/data/OpsData.ts

@@ -4,7 +4,8 @@ const dataRequestUrl = `https://sheets.googleapis.com/v4/spreadsheets/1opF61Qq2D
 
 export enum TypeOps {
   rescue = "Rescue",
-  transfer = "Transfer"
+  transfer = "Transfer",
+  medEvac = "Medevac"
 }
 
 export interface OpsData {
@@ -28,8 +29,8 @@ export interface OpsData {
   imageSrc: string[]
   videoSrc: string[]
   portDisembarkation : string
-  testimonyName: string;
-  testimonySrc: string;
+  testimonyName: string[];
+  testimonySrc: string[];
 }
 
 const createDate = function (dateDayFirst: string) {
@@ -86,8 +87,8 @@ const convertOpsData = function (rawOpsData: {[key: string]: string}, metadataEr
   res.imageSrc = rawOpsData.imageSrc ? rawOpsData.imageSrc.split(";") : []
   res.videoSrc = rawOpsData.videoSrv ? rawOpsData.videoSrv.split(";") : []
   res.portDisembarkation = rawOpsData.PortDisembarkation
-  res.testimonyName = rawOpsData.testimony_name
-  res.testimonySrc = rawOpsData.testimony_src
+  res.testimonyName = rawOpsData.testimony_name ? rawOpsData.testimony_name.split(";") : []
+  res.testimonySrc = rawOpsData.testimony_src ? rawOpsData.testimony_src.split(";") : []
   return res
 }
 

src/classes/data/OtherData.ts

@@ -87,8 +87,8 @@ export interface OtherData {
     incAction: string;
     shipwreckNumber: number;
     boatInvolved: string;
-    testimonyName: string;
-    testimonySrc: string;
+    testimonyName: string[];
+    testimonySrc: string[];
     imageSrc: string[];
     videoSrc: string[];
 }

src/components/BaseMap.vue

@@ -1,12 +1,26 @@
 <template>
-  <div id="mapContainer" class="w-screen z-0 h-full"></div>
+  <div id="mapContainer" class="w-screen z-0 h-full">
+    <div v-if="harborPopUp.visible" class="customPopUp" :style="{ left: harborPopUp.coordinates.x + 'px', top: harborPopUp.coordinates.y + 'px' }"> {{ harborPopUp.content }} </div>
+  </div>
 </template>
 
 <script setup lang="ts">
+import { harborPopUp } from "@/classes/BaseMap"
 import { store } from "@/main"
 import { watch } from "vue"
 
 watch(() => store.getData().dataLoaded, () => {
   if (store.getData().dataLoaded) store.displayMap()
 })
 </script>
+
+<style>
+.customPopUp {
+  position: absolute;
+  background-color: rgba(26, 39, 71, 0.8);
+  color: white;
+  padding: 10px;
+  border-radius: 5px;
+  z-index: 1000;
+}
+</style>

src/components/Header.vue

@@ -39,8 +39,8 @@
       </div>
     </div>
     <div class="hidden lg:block">
-      <nav class="bg-main text-white flex h-10 items-center">
-        <div class="flex-none flex ml-8">
+      <nav class="bg-main text-white flex h-10 items-center header-desktop">
+        <div class="flex-none flex">
           <a href="https://www.sosmediterranee.org/glossary/" target="_blank" class="px-1 flex-initial inline-block">{{ $t("header.glossary") }}</a>
         </div>
         <div class="flex-none flex ml-8">
@@ -49,15 +49,14 @@
           </a>
         </div>
         <div class="flex-grow"></div>
-        <span @click="setLocale('en')" :class="{activeLanguage: $i18n.locale === 'en'}" class="cursor-pointer">EN</span>
+        <span @click="setLocale('en')" :class="{activeLanguage: $i18n.locale === 'en'}" class="cursor-pointer text-sm">EN</span>
         <span class="mr-2 ml-2">|</span>
-        <span @click="setLocale('fr')" :class="{activeLanguage: $i18n.locale === 'fr'}" class="cursor-pointer">FR</span>
+        <span @click="setLocale('fr')" :class="{activeLanguage: $i18n.locale === 'fr'}" class="cursor-pointer text-sm">FR</span>
         <span class="mr-2 ml-2">|</span>
-        <span @click="setLocale('it')" :class="{activeLanguage: $i18n.locale === 'it'}" class="cursor-pointer">IT</span>
+        <span @click="setLocale('it')" :class="{activeLanguage: $i18n.locale === 'it'}" class="cursor-pointer text-sm">IT</span>
         <span class="mr-2 ml-2">|</span>
-        <span @click="setLocale('de')" :class="{activeLanguage: $i18n.locale === 'de'}" class="mr-4 cursor-pointer">DE</span>
+        <span @click="setLocale('de')" :class="{activeLanguage: $i18n.locale === 'de'}" class="mr-4 cursor-pointer text-sm">DE</span>
         <HeaderContributors />
-        <a href="#" class=" text-center inline-block h-6 w-6 bg-white ml-4 mr-3 text-black">?</a>
       </nav>
     </div>
   </header>
@@ -95,6 +94,10 @@ export default defineComponent({
 </script>
 
 <style scoped>
+.header-desktop{
+  padding-left: 3%;
+  padding-right: 3%;
+}
 .up-arrow {
   transform: rotate(180deg);
 }

src/components/HeaderContributors.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="Contributors__container flex flex-col w-9 justify-center items-center">
-    <img alt="logo CartONG" class="Contributors__img cursor-pointer inline-block h-full" src="@/assets/Cartong_logo-square-white.png"/>
+  <div class="Contributors__container flex flex-col h-full justify-center items">
+    <img alt="logo CartONG" class="h-full py-2" src="@/assets/Cartong_logo.png"/>
     <div class="Contributors__content text-main bg-white p-0 rounded-3xl overflow-hidden ">
       <div class="m-8 flex flex-col">
       <h1 class="font-bold text-xl text-secondary">

src/components/KeyNumbers.vue

@@ -36,6 +36,6 @@ export default defineComponent({
 <style scoped>
 .position-desktop {
   top: 3rem;
-  right: 1em;
+  right: 3%;
 }
 </style>

src/components/LegendSwitch.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="flex flex-row justify-between">
-    <div class="flex flex-row items-center legend-label">
+    <div class="flex flex-row items-start legend-label">
       <div v-if="color" class="legend-marker mr-2" :style="{ backgroundColor: color}"></div>
       <div v-if="iconName" class="legend-marker mr-2"><img :src="`./basemaps-icons/${iconName}`" alt=""></div>
       <label :for="id" class="text-xs label-color">{{title}}</label>
     </div>
-    <div class="relative inline-block w-8 mr-2 align-middle select-none transition duration-200 ease-in">
+    <div class="relative inline-block w-8 mr-2 align-middle select-none transition duration-200 ease-in" v-if="switchable">
         <input
             type="checkbox"
             :name="id"
@@ -27,6 +27,7 @@ import { store } from "@/main"
 import { SwitchType } from "@/classes/State"
 
 defineProps<{
+  switchable: boolean
   checked: boolean
   id: SwitchType
   title: string
@@ -39,7 +40,7 @@ function toggle (id: SwitchType) {
 }
 </script>
 
-<style scoped>
+<style>
   .label-color {
     color: theme('colors.main')
   }