Merge remote-tracking branch 'origin/main' into preview

src/App.vue

@@ -12,11 +12,19 @@
   </div>
   <AppLegend/>
   <VirtualVisit v-if="store.getState().virtualVisitAlreadyOpened"/>
+  <div
+    v-if="store.getState().informationTooltip.visible"
+    class="information-tooltip"
+    :style="tooltipPosition"
+  >
+    <p class="information-tooltip-title">{{ store.getState().informationTooltip.content.title }}</p>
+    <p class="information-tooltip-text">{{ store.getState().informationTooltip.content.text }}</p>
+  </div>
 </template>
 
 <script lang="ts" setup>
 import { store } from "./main"
-import { onMounted } from "vue"
+import { computed, onMounted, watch } from "vue"
 import AppHeader from "./components/Header.vue"
 import AppLegend from "./components/MapLegend.vue"
 import BaseMap from "./components/BaseMap.vue"
@@ -30,4 +38,15 @@ onMounted(() => {
   store.initStore()
 })
 
+const tooltipPosition = computed(() => {
+  console.log(store.getTooltipPosition())
+  return store.getTooltipPosition()
+})
+
+watch(() => store.getState().informationTooltip.visible, () => {
+  if (store.getState().informationTooltip.visible) {
+    console.log("x:" + store.getState().informationTooltip.position.x + " y: " + store.getState().informationTooltip.position.y)
+  }
+})
+
 </script>

src/Store.ts

@@ -25,8 +25,20 @@ export class Store {
       harbor: true,
       srr: true,
       incident: false,
-      death: true,
-      shipwreck: true
+      death: false,
+      shipwreck: false
+    },
+    informationTooltip: {
+      visible: false,
+      position: {
+        orientation: "left",
+        x: 0,
+        y: 0
+      },
+      content: {
+        title: "",
+        text: ""
+      }
     }
   })
 
@@ -52,6 +64,23 @@ export class Store {
     this.appState.virtualVisitAlreadyOpened = !this.appState.virtualVisitAlreadyOpened
   }
 
+  public setInformationTooltipParameters (visible: boolean, position?: ApplicationState["informationTooltip"]["position"], content?: ApplicationState["informationTooltip"]["content"]) {
+    if (position) this.appState.informationTooltip.position = position
+    if (content) this.appState.informationTooltip.content = content
+    this.appState.informationTooltip.visible = visible
+  }
+
+  public getTooltipPosition () {
+    const position: any = {}
+    this.appState.informationTooltip.position.orientation === "right"
+      ? position.top = this.appState.informationTooltip.position.y - 15 + "px"
+      : position.bottom = (window.innerHeight - this.appState.informationTooltip.position.y) + 5 + "px"
+    this.appState.informationTooltip.position.orientation === "right"
+      ? position.left = this.appState.informationTooltip.position.x + 15 + "px"
+      : position.right = (window.innerWidth - this.appState.informationTooltip.position.x) + 15 + "px"
+    return position
+  }
+
   // ////////////// ---------DATA STATE---------- \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
 
   private dataState: DataState = reactive({

src/assets/styles/index.css

@@ -57,4 +57,27 @@
 
 .BaseMapPicker__itemBtnGrp {
     overflow: hidden;
-}
+}
+
+.more-information-button{
+    height: 12px;
+    cursor: pointer;
+}
+
+.information-tooltip{
+    position: fixed;
+    z-index: 3000;
+    background-color: rgba(26, 39, 71, 0.9);
+    color: white;
+    padding: 15px;
+    max-width: 350px;
+    border-radius: 5px;
+}
+
+.information-tooltip-title{
+    color: #F03E1B;
+    font-size: 1.2em;
+    font-weight: bold;
+}
+
+/* .information-tooltip-text */

src/classes/State.ts

@@ -27,7 +27,19 @@ export interface ApplicationState {
   virtualVisitAlreadyOpened: boolean;
   minDate: Date;
   maxDate: Date;
-  switch: { [key in SwitchType]: boolean }
+  switch: { [key in SwitchType]: boolean };
+  informationTooltip: {
+    visible: boolean;
+    position: {
+      orientation: "right" | "left";
+      x: number;
+      y: number;
+    };
+    content: {
+      title: string;
+      text: string;
+    }
+  };
 }
 
 export interface DataState {

src/components/BaseMap.vue

@@ -19,7 +19,7 @@ watch(() => store.getData().dataLoaded, () => {
   position: absolute;
   background-color: rgba(26, 39, 71, 0.8);
   color: white;
-  padding: 10px;
+  padding: 2px 5px;
   border-radius: 5px;
   z-index: 1000;
 }

src/components/HistogramSlider.vue

@@ -86,10 +86,15 @@ export default defineComponent({
 <style>
   .histo{
     margin-left: 3% !important;
-    height: 20% !important;
     padding: 20px !important;
   }
 
+  @media only screen and (min-width: 500px) {
+    .histo{
+      height: 9rem !important;
+    }
+  }
+
   @media only screen and (max-width: 500px){
     .histo{
       padding: 0px !important;

src/components/LegendSwitch.vue

@@ -4,6 +4,7 @@
       <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>
+      <img v-if="tooltip" class="more-information-button ml-1" src="@/assets/question.svg" alt="" @mouseenter="setInformationTooltip($event, tooltip[0], tooltip[1])" @mouseleave="removeInformationTooltip">
     </div>
     <div class="relative inline-block w-8 mr-2 align-middle select-none transition duration-200 ease-in" v-if="switchable">
         <input
@@ -33,11 +34,18 @@ defineProps<{
   title: string
   iconName? : string
   color?: string
+  tooltip?: [string, string]
 }>()
 const url = process.env.BASE_URL
 function toggle (id: SwitchType) {
   store.toggleSwitch(id)
 }
+function setInformationTooltip (event: MouseEvent, title: string, text: string) {
+  store.setInformationTooltipParameters(true, { orientation: "left", x: event.clientX, y: event.clientY }, { title, text })
+}
+function removeInformationTooltip () {
+  store.setInformationTooltipParameters(false)
+}
 </script>
 
 <style>

src/components/MapLegend.vue

@@ -3,8 +3,8 @@
     class="flex flex-col rounded-2xl w-1/2 legend-background absolute top-32 ml-4 legend-position-mobile sm:w-60 md:right-5 md:absolute md:bottom-5 md:top-auto">
     <p class="text-xs text-center font-bold text-secondary">{{ $t("legend.title").toUpperCase() }}</p>
     <Legend-switch :id="SwitchType.rescue" :checked="switchState.rescue" :title="$t(`legend.${SwitchType.rescue}`)" color="#F03E1B" :switchable="true"></Legend-switch>
-    <Legend-switch :id="SwitchType.transfer" :checked="switchState.transfer" :title="$t(`legend.${SwitchType.transfer}`)" color="#9CA3AF" :switchable="true"></Legend-switch>
-    <Legend-switch v-if="showAllLegend" :id="SwitchType.medEvac" :checked="switchState.medEvac" :title="$t(`legend.${SwitchType.medEvac}`)" color="#1A2747" :switchable="true"></Legend-switch>
+    <Legend-switch :id="SwitchType.transfer" :checked="switchState.transfer" :title="$t(`legend.${SwitchType.transfer}`)" color="#9CA3AF" :switchable="true" :tooltip="[$t(`legend.${SwitchType.transfer}`), $t('legend.transferDescription')]"></Legend-switch>
+    <Legend-switch v-if="showAllLegend" :id="SwitchType.medEvac" :checked="switchState.medEvac" :title="$t(`legend.${SwitchType.medEvac}`)" color="#1A2747" :switchable="true" :tooltip="[$t(`legend.${SwitchType.medEvac}`), $t('legend.medEvacDescription')]"></Legend-switch>
     <Legend-switch :id="SwitchType.death" :checked="switchState.death" :title="$t(`legend.${SwitchType.death}`)" iconName="deaths.svg" :switchable="true"></Legend-switch>
     <Legend-switch v-if="showAllLegend" :id="SwitchType.shipwreck" :checked="switchState.shipwreck" :title="$t(`legend.${SwitchType.shipwreck}`)" iconName="shipwreck.png" :switchable="true"></Legend-switch>
     <Legend-switch v-if="showAllLegend" :id="SwitchType.incident" :checked="switchState.incident" :title="$t(`legend.${SwitchType.incident}`)" iconName="incident.png" :switchable="true"></Legend-switch>
@@ -13,7 +13,7 @@
       <line x1="0" y1="20" x2="100" y2="20" stroke="black"/>
     </svg>
     <Legend-switch :id="SwitchType.harbor" :checked="switchState.harbor" :title="$t(`legend.${SwitchType.harbor}`)" iconName="harbor.png" :switchable="false"></Legend-switch>
-    <Legend-switch :id="SwitchType.srr" :checked="switchState.srr" :title="$t(`legend.${SwitchType.srr}`)" iconName="srr.png" class="srr" :switchable="false"></Legend-switch>
+    <Legend-switch :id="SwitchType.srr" :checked="switchState.srr" :title="$t(`legend.${SwitchType.srr}`)" iconName="srr.png" class="srr" :switchable="false" :tooltip="[$t(`legend.${SwitchType.srr}`), $t('legend.srrDescription')]"></Legend-switch>
   </div>
 </template>
 
@@ -25,6 +25,7 @@ import LegendSwitch from "./LegendSwitch.vue"
 
 const switchState = computed(() => store.getState().switch)
 const showAllLegend = ref(false)
+
 </script>
 
 <style>

src/components/PopUp.vue

@@ -64,6 +64,9 @@ const popUpType = computed(() => store.getState().popUpType)
 
 .divider{
   margin: 10px 40px;
-  border-bottom: 1px solid var(--text-color);
+  /* border-bottom: 1px solid var(--text-color); */
+}
+.testimony-text{
+  text-decoration: underline dotted;
 }
 </style>

src/components/Stats.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <template>
 
   <!-- mobile version -->
@@ -35,7 +36,10 @@
     </h1>
     <div class="flex flex-col pb-3 pl-6 pr-6">
       <span class="icon icon-rescue text-3xl text-center text-secondary"/>
-      <p class="text-main text-xl font-bold mb-2"><span id="statsNbSurvivor" class="text-secondary"/> {{ $t("stats.peoples") }}</p>
+      <p class="text-main text-xl font-bold mb-2 flex justify-center">
+        <span id="statsNbSurvivor" class="text-secondary mr-2"/> {{ $t("stats.peoples") }}
+        <img class="more-information-button ml-2" src="@/assets/question.svg" alt="" @mouseenter="setInformationTooltip($event, $t('stats.peoples'), $t('stats.peoplesDescription'))" @mouseleave="removeInformationTooltip">
+      </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"/>
@@ -80,27 +84,29 @@
       <div class="flex flex-col flex-wrap align-center cursor-pointer virtual-visit-shower" @click.stop="showVirtualVisit()">
         <span class="icon icon-tour text-8xl leading-6 text-center text-secondary mb-2"/>
         <span class="icon icon-sosmed-ship  text-8xl leading-6 text-center text-secondary mb-2"/>
-        <p class="text-center text-main text-xl font-bold"><span id="statsOps3" class="text-secondary"/> {{ $t("stats.rescueNb") }}</p>
+        <p class="text-center text-main text-xl font-bold flex justify-center">
+          <span id="statsOps3" class="text-secondary mr-2"/> {{ $t("stats.rescueNb") }}
+          <img class="more-information-button ml-2" src="@/assets/question.svg" alt="" @mouseenter="setInformationTooltip($event, $t('stats.rescueNb'), $t('stats.rescueDescription'))" @mouseleave="removeInformationTooltip">
+        </p>
       </div>
     </div>
   </div>
 </template>
 
-<script lang="ts">
-
-import { defineComponent } from "vue"
+<script lang="ts" setup>
 import { store } from "@/main"
-export default defineComponent({
-  data () {
-    return { displayingStats: true }
-  },
-  name: "Base-Map-Stats",
-  methods: {
-    showVirtualVisit (): void {
-      store.switchVirtualVisitVisibility()
-    }
-  }
-})
+import { ref } from "vue"
+const displayingStats = ref(true)
+function showVirtualVisit (): void {
+  store.switchVirtualVisitVisibility()
+}
+
+function setInformationTooltip (event: MouseEvent, title: string, text: string) {
+  store.setInformationTooltipParameters(true, { orientation: "right", x: event.clientX, y: event.clientY }, { title, text })
+}
+function removeInformationTooltip () {
+  store.setInformationTooltipParameters(false)
+}
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

src/components/popUpContent/DeathDescription.vue

@@ -16,7 +16,7 @@
         <div class="divider"></div>
         <p class="text-sm flex" v-if="deathData.testimonySrc.length > 0">
           <img src="@/assets/comments.svg" class="popup-icon"> {{ $t("popup.testimony") }}:
-          <span class="font-bold ml-2 underline" v-for="(src, i) in deathData.testimonySrc" :key="src+i">
+          <span class="font-bold ml-2 testimony-text" v-for="(src, i) in deathData.testimonySrc" :key="src+i">
             <a :href="src" target="_blank">{{ deathData.testimonyName[i] }} {{ i < deathData.testimonySrc.length -1 ? "," : "" }}</a>
           </span>
         </p>

src/components/popUpContent/IncidentDescription.vue

@@ -16,7 +16,7 @@
           </p>
           <p class="text-sm flex" v-if="incidentData.testimonySrc.length > 0">
             <img src="@/assets/comments.svg" class="popup-icon"> {{ $t("popup.testimony") }}:
-            <span class="font-bold ml-2 underline" v-for="(src, i) in incidentData.testimonySrc" :key="src+i">
+            <span class="font-bold ml-2 testimony-text" v-for="(src, i) in incidentData.testimonySrc" :key="src+i">
               <a :href="src" target="_blank">{{ incidentData.testimonyName[i] }} {{ i < incidentData.testimonySrc.length -1 ? "," : "" }}</a>
             </span>
           </p>

src/components/popUpContent/OperationDescription.vue

@@ -64,7 +64,7 @@
           </div>
           <p class="text-sm flex" v-if="opsData.testimonySrc.length > 0">
             <img src="@/assets/comments.svg" class="popup-icon"> {{ $t("popup.testimony") }}:
-            <span class="font-bold ml-2 underline" v-for="(src, i) in opsData.testimonySrc" :key="src+i">
+            <span class="font-bold ml-2 testimony-text" v-for="(src, i) in opsData.testimonySrc" :key="src+i">
               <a :href="src" target="_blank">{{ opsData.testimonyName[i] }} {{ i < opsData.testimonySrc.length -1 ? "," : "" }}</a>
             </span>
           </p>

src/components/popUpContent/ShipwreckDescription.vue

@@ -20,7 +20,7 @@
         <div class="divider"></div>
         <p class="text-sm flex" v-if="shipwreckData.testimonySrc.length > 0">
             <img src="@/assets/comments.svg" class="popup-icon"> {{ $t("popup.testimony") }}:
-          <span class="font-bold ml-2 underlinex" v-for="(src, i) in shipwreckData.testimonySrc" :key="src+i">
+          <span class="font-bold ml-2 testimony-text" v-for="(src, i) in shipwreckData.testimonySrc" :key="src+i">
             <a :href="src" target="_blank">{{ shipwreckData.testimonyName[i] }} {{ i < shipwreckData.testimonySrc.length -1 ? "," : "" }}</a>
           </span>
         </p>

src/locales/de.json

@@ -23,8 +23,11 @@
         "title": "Ansicht",
         "rescue": "Rettung", 
         "transfer": "Überführung",
+        "transferDescription": "Überführung geretteter Personen zwischen zwei Schiffen. Dies kann durch RIBs oder daneben erfolgen.",
         "medEvac": "medizinische Evakuierung",
+        "medEvacDescription": "Rettungstechnik, die auf dem schnellen Transport und der medizinischen Betreuung von verletzten und kranken Personen zu einer besser ausgestatteten Gesundheitseinrichtung beruht.",
         "srr": "Such- und Rettungsregion",
+        "srrDescription": "Ein mit aRCC verbundener Bereich mit definierten Abmessungen, in dem SAR-Dienste bereitgestellt werden. Suche: Eine Operation, die normalerweise von einer Rettungsleitstelle oder einer Rettungsunterzentrale koordiniert wird und bei der das verfügbare Personal und die verfügbaren Einrichtungen genutzt werden, um in Not geratene Personen zu lokalisieren. Rettung Eine Operation, um in Not geratene Personen zu bergen, ihren ersten medizinischen oder anderen Bedarf zu decken und sie an einen sicheren Ort zu bringen; (Quelle: SAR-Übereinkommen 1979, Kapitel 1.3.1-2)",
         "harbor": "Hafen",
         "shipwreck": "Schiffbruch",
         "incident": "Zwischenfall",
@@ -38,11 +41,13 @@
         "minors": "Minderjährige",
         "pregnants": "Schwangere Frauen",
         "unaccompanied": "Unbegleitete Minderjährige",
-        "children": "Kinder",
+        "children": "Kinder unter 5 Jahren",
         "nationalities": "Nationalitäten",
         "peoples": "Überlebende",
+        "peoplesDescription": "Offizieller Begriff zur Bezeichnung der aus einer Notsituation geretteten Personen.",
         "opDays": "Tage der Operation",
         "rescueNb" : "Rettungseinsätze",
+        "rescueDescription" : "",
         "since": "Seit"
     },
     "popup": {
@@ -63,4 +68,4 @@
     "histogram": {
         "text": "Anzahl der Operationen pro Monat"
     }
-}
+}