Implement simple popup

src/App.vue

@@ -1,13 +1,15 @@
 <template>
   <Header />
   <BaseMap />
+  <PopUp />
   <HistogramSlider />
   <Legend />
 </template>
 
 <script lang="ts">
 import { Options, Vue } from 'vue-class-component'
 import BaseMap from './components/BaseMap.vue'
+import PopUp from './components/PopUp.vue'
 import Header from './components/Header.vue'
 import Legend from './components/Legend.vue'
 import HistogramSlider from './components/HistogramSlider.vue'
@@ -18,7 +20,8 @@ import { store } from './store'
     Header,
     BaseMap,
     HistogramSlider,
-    Legend
+    Legend,
+    PopUp
   }
 })
 export default class App extends Vue {

src/classes/BaseMap.ts

@@ -1,6 +1,7 @@
 import { OpsData, TypeOps } from './opsData'
 import { MapboxGLButtonControl } from './MapboxGLButtonControl'
 import mapboxgl from 'mapbox-gl'
+import { showPopUp } from './PopUp'
 
 export class BaseMap {
   private map!: mapboxgl.Map;
@@ -66,6 +67,7 @@ export class BaseMap {
         } else {
           el.className += ' bg-main'
         }
+        el.addEventListener('click', () => { showPopUp(data) })
         this.markers.push(
           new mapboxgl.Marker(el)
             .setLngLat([data.longitude, data.latitude])

src/classes/PopUp.ts

@@ -0,0 +1,52 @@
+import { OpsData } from './opsData'
+
+const numberToString = function (n: number) {
+  if (isNaN(n)) {
+    return ''
+  } else {
+    return n.toString()
+  }
+}
+
+const fillPopUp = function (data: OpsData) {
+  const popUpTypeOps = document.getElementById('popUpTypeOps')
+  if (popUpTypeOps) {
+    popUpTypeOps.innerText = data.typeOps
+  }
+  const popUpDate = document.getElementById('popUpDate')
+  if (popUpDate) {
+    popUpDate.innerText = data.date.toLocaleDateString()
+  }
+  const popUpBoatType = document.getElementById('popUpBoatType')
+  if (popUpBoatType) {
+    popUpBoatType.innerText = data.boatType
+  }
+  const popUpNbSurvivor = document.getElementById('popUpNbSurvivor')
+  if (popUpNbSurvivor) {
+    popUpNbSurvivor.innerText = numberToString(data.nbSurvivor)
+  }
+  const popUpWind = document.getElementById('popUpWind')
+  if (popUpWind) {
+    popUpWind.innerText = numberToString(data.windForce)
+  }
+  const popUpWave = document.getElementById('popUpWave')
+  if (popUpWave) {
+    popUpWave.innerText = numberToString(data.waveHeight)
+  }
+  const popUpLat = document.getElementById('popUpLat')
+  if (popUpLat) {
+    popUpLat.innerText = numberToString(data.latitude)
+  }
+  const popUpLon = document.getElementById('popUpLon')
+  if (popUpLon) {
+    popUpLon.innerText = numberToString(data.longitude)
+  }
+}
+
+export const showPopUp = function (data: OpsData) {
+  const popUp = document.getElementById('popUp')
+  if (popUp) {
+    popUp.classList.add('scale-100')
+  }
+  fillPopUp(data)
+}

src/components/PopUp.vue

@@ -0,0 +1,62 @@
+// Inspired from https://tailwindcomponents.com/component/very-simple-modal
+<template>
+  <div id='popUp' :style="style"
+       class='fixed top-0 left-0 w-screen h-screen flex items-center justify-center bg-black bg-opacity-50 transform scale-0 transition-transform duration-300'>
+    <div class="bg-white w-screen h-screen sm:w-1/4 sm:h-1/2 p-12">
+      <button id="closebutton" type="button" class="focus:outline-none relative">X</button>
+      <div class="flex flex-col justify-around h-3/4">
+        <h1 id='popUpTypeOps' class='font-bold'/>
+        <p id='popUpDate'/>
+        <p>Boat in distress: <span id='popUpBoatType' class='font-bold'/></p>
+        <p><span id='popUpNbSurvivor'  class='font-bold'/> people rescued</p>
+        <p>Wind: <span id='popUpWind'/> knots - Wave height: <span id='popUpWave'/> m</p>
+        <p>Lat: <span id='popUpLat'/> - Lon: <span id='popUpLon'/></p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang='ts'>
+import { Colors } from '@/utils/Colors'
+
+export default {
+  name: 'PopUp',
+
+  computed: {
+    style () {
+      return `
+        z-index: 100;
+        --title-color: ${Colors.ORANGE};
+        --text-color: ${Colors.BLUE};
+        --cross-color: ${Colors.GRAY};
+      `
+    }
+  },
+
+  mounted () {
+    const popUpMap = document.getElementById('popUp')
+    const closebutton = document.getElementById('closebutton')
+    if (closebutton && popUpMap) {
+      closebutton.addEventListener('click', () => popUpMap.classList.remove('scale-100'))
+    }
+  }
+}
+
+</script>
+
+<!-- Add 'scoped' attribute to limit CSS to this component only -->
+<style scoped>
+  h1 {
+    color: var(--title-color);
+    font-size: x-large;
+  }
+
+  p {
+    color: var(--text-color);
+  }
+
+  button {
+    color: var(--cross-color);
+    left: 100%;
+  }
+</style>