feat(infos): add info-panel

cypress/e2e/footer-bar.cy.ts

@@ -26,6 +26,13 @@ describe('Footer bar', () => {
       cy.get('button[data-cy="drawButton"]').click()
       cy.get('[data-cy="myMapsPanel"]').should('exist')
     })
+
+    it('closes the info panel', () => {
+      cy.get('[data-cy="infoOpenClose"]').find('button').click()
+      cy.get('[data-cy="infoPanel"]').should('exist')
+      cy.get('button[data-cy="drawButton"]').click()
+      cy.get('[data-cy="infoPanel"]').should('not.exist')
+    })
   })
 
   describe('Layers button', () => {
@@ -65,17 +72,45 @@ describe('Footer bar', () => {
       it('Other panels are closed', () => {
         cy.get('[data-cy="styleSelector"]').should('not.exist')
         cy.get('[data-cy="layerPanel"]').should('not.exist')
+        cy.get('[data-cy="infoPanel"]').should('not.exist')
       })
 
-      describe('When clicking on myMapsPanel button', () => {
+      describe('When clicking on layers panel button', () => {
         beforeEach(() => {
           cy.get('[data-cy="layersOpenClose"]').find('button').click()
         })
 
-        it('closes the left panel', () => {
+        it('closes the mymaps panel', () => {
           cy.get('[data-cy="myMapsPanel"]').should('not.exist')
         })
       })
     })
   })
+
+  describe('Info button', () => {
+    describe('When opening Info panel', () => {
+      beforeEach(() => {
+        cy.get('[data-cy="infoOpenClose"]').find('button').click()
+      })
+
+      it('Info panel is shown', () => {
+        cy.get('[data-cy="infoPanel"]').should('exist')
+      })
+
+      it('Other panels are closed', () => {
+        cy.get('[data-cy="styleSelector"]').should('not.exist')
+        cy.get('[data-cy="layerPanel"]').should('not.exist')
+      })
+
+      describe('When clicking on layers panel button', () => {
+        beforeEach(() => {
+          cy.get('[data-cy="layersOpenClose"]').find('button').click()
+        })
+
+        it('closes the info panel', () => {
+          cy.get('[data-cy="infoPanel"]').should('not.exist')
+        })
+      })
+    })
+  })
 })

public/assets/locales/app.de.json

@@ -49,5 +49,7 @@
   "Retry": "Von vorne anfangen",
   "small": "Klein",
   "Take measure": "Messen",
-  "Update offline data": "Offline-Daten updaten"
+  "Update offline data": "Offline-Daten updaten",
+  "A right click (tap and hold on mobile)...": "Durch Rechtsklick (tippen und halten auf Mobil) werden Informationen über den aktuellen Standort angezeigt",
+  "A short click (tap on mobile)...": "Durch Klick (tippen auf Mobil) auf einer Funktion wir diese Augewählt und weitere Informationen angezeigt"
 }

public/assets/locales/app.en.json

@@ -49,5 +49,7 @@
   "Retry": "Retry",
   "small": "small",
   "Take measure": "Take measure",
-  "Update offline data": "Update offline data"
+  "Update offline data": "Update offline data",
+  "A right click (tap and hold on mobile)...": "A right click (tap and hold on mobile) will display information about the current location.",
+  "A short click (tap on mobile)...": "A short click (tap on mobile) on a map feature will select the feature and show more information."
 }

public/assets/locales/app.fr.json

@@ -49,5 +49,7 @@
   "Retry": "Recommencez",
   "small": "Petite",
   "Take measure": "Mesurer",
-  "Update offline data": "Mettre à jour données hors connexion"
+  "Update offline data": "Mettre à jour données hors connexion",
+  "A right click (tap and hold on mobile)...": "Un clic droit (appuyez et maintenez sur mobile) affiche des informations sur l'emplacement actuel.",
+  "A short click (tap on mobile)...": "Un clic court (tap sur mobile) sur une caractéristique de la carte permet de sélectionner la caractéristique et de montrer plus d'informations"
 }

public/assets/locales/app.lb.json

@@ -49,5 +49,7 @@
   "Retry": "Nach eng Kéier probéiren",
   "small": "Kleng",
   "Take measure": "Moossen",
-  "Update offline data": "Offline-Daten updaten"
+  "Update offline data": "Offline-Daten updaten",
+  "A right click (tap and hold on mobile)...": "Duerch Rietsklick (tippen an gedréckt haalen op mobil) ginn d'Informatiounen iwwert déi aktuell Positioun ugewisen",
+  "A short click (tap on mobile)...": "Duerch Klick (tippen op mobil) op eng Funktioun gëtt dës ausgewielt an méi Informatiounen ugewisen"
 }

src/App.vue

@@ -14,6 +14,7 @@ import StylePanel from '@/components/style-selector/style-panel.vue'
 import MyMapsPanel from '@/components/my-maps/my-maps-panel.vue'
 import MapContainer from '@/components/map/map-container.vue'
 import SliderComparator from '@/components/slider/slider-comparator.vue'
+import InfoPanel from '@/components/info/info-panel.vue'
 
 import { statePersistorBgLayerService } from '@/services/state-persistor/state-persistor-layer-background.service'
 import { statePersistorLayersService } from '@/services/state-persistor/state-persistor-layers.service'
@@ -39,12 +40,13 @@ statePersistorStyleService.bootstrap()
 statePersistorBgLayerService.bootstrap()
 mvtStyleService.initBackgroundsConfigs()
 
-const { embedded, layersOpen, myMapsOpen, styleEditorOpen } =
+const { embedded, layersOpen, myMapsOpen, infoOpen, styleEditorOpen } =
   storeToRefs(appStore)
 
 watch(layersOpen, timeoutResizeMap)
 watch(styleEditorOpen, timeoutResizeMap)
 watch(myMapsOpen, timeoutResizeMap)
+watch(infoOpen, timeoutResizeMap)
 
 function timeoutResizeMap() {
   setTimeout(() => map.resize(), 50)
@@ -78,6 +80,11 @@ onUnmounted(() => window.removeEventListener('resize', map.resize))
           <my-maps-panel />
         </div>
 
+        <!-- Info panel -->
+        <div v-if="infoOpen" class="w-full md:w-80 bg-secondary z-10">
+          <info-panel />
+        </div>
+
         <!-- Map container and slider comparator -->
         <div class="map-wrapper grow bg-blue-100 relative">
           <map-container :v4_standalone="true" />

src/components/footer/footer-bar.vue

@@ -9,12 +9,14 @@ import { useAppStore } from '@/stores/app.store'
 
 const { t, i18next } = useTranslation()
 const appStore = useAppStore()
-const { setLayersOpen, setDrawToolbarOpen, toggleMyMapsOpen } = appStore
+const { setLayersOpen, setDrawToolbarOpen, toggleMyMapsOpen, toggleInfoOpen } =
+  appStore
 const {
   layersOpen,
   drawToolbarOpen,
   styleEditorOpen,
   myMapsOpen,
+  infoOpen,
   themeGridOpen,
 } = storeToRefs(appStore)
 
@@ -25,6 +27,7 @@ function onClickLayersIcon() {
   if (open) {
     styleEditorOpen.value = false
     myMapsOpen.value = false
+    infoOpen.value = false
   }
 
   themeGridOpen.value = false
@@ -61,11 +64,12 @@ function onClickLayersIcon() {
         >
         </button-icon>
       </li>
-      <li>
+      <li data-cy="infoOpenClose">
         <button-icon
-          class="text-gray-300"
-          :label="t('infos', { ns: 'client' })"
+          :label="t('Infos', { ns: 'client' })"
           icon="infos"
+          :active="infoOpen"
+          @click="() => toggleInfoOpen()"
         >
         </button-icon>
       </li>

src/components/info/info-panel.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { useTranslation } from 'i18next-vue'
+import SidePanelLayout from '@/components/common/side-panel-layout.vue'
+import { useAppStore } from '@/stores/app.store'
+
+const { t } = useTranslation()
+const appStore = useAppStore()
+</script>
+
+<template>
+  <side-panel-layout
+    :data-cy-value="'infoPanel'"
+    :close-fn="() => appStore.toggleInfoOpen(false)"
+  >
+    <template v-slot:header>
+      <h1>
+        {{ t('infos', { ns: 'client' }) }}
+      </h1>
+    </template>
+
+    <template v-slot:content>
+      <div class="text-white">
+        <ul class="list-disc pl-10">
+          <li>
+            {{ t(`A right click (tap and hold on mobile)...`, { ns: 'app' }) }}
+          </li>
+          <li>
+            {{ t(`A short click (tap on mobile)...`, { ns: 'app' }) }}
+          </li>
+        </ul>
+      </div>
+    </template>
+  </side-panel-layout>
+</template>

src/stores/app.store.ts

@@ -8,6 +8,7 @@ export const DEFAULT_LAYER_PANEL_OPENED = true
 export const DEFAULT_MY_LAYERS_TAB_OPENED = false
 export const DEFAULT_THEME_GRID_OPENED = false
 export const DEFAULT_MYMAPS_OPENED = false
+export const DEFAULT_INFO_OPENED = false
 export const DEFAULT_FEEDBACK_OPENED = false
 export const DEFAULT_FEEDBACKANF_OPENED = false
 export const DEFAULT_FEEDBACKAGE_OPENED = false
@@ -23,6 +24,7 @@ export const useAppStore = defineStore(
     const themeGridOpen = ref(DEFAULT_THEME_GRID_OPENED)
     const mapId: Ref<string | undefined> = ref() // => MyMaps map id
     const myMapsOpen = ref(DEFAULT_MYMAPS_OPENED)
+    const infoOpen = ref(DEFAULT_INFO_OPENED)
     const feedbackOpen = ref(DEFAULT_FEEDBACK_OPENED)
     const feedbackanfOpen = ref(DEFAULT_FEEDBACKANF_OPENED)
     const feedbackageOpen = ref(DEFAULT_FEEDBACKAGE_OPENED)
@@ -101,6 +103,7 @@ export const useAppStore = defineStore(
         myMapsOpen.value = true
         layersOpen.value = false
         themeGridOpen.value = false
+        infoOpen.value = false
       }
     }
 
@@ -111,6 +114,18 @@ export const useAppStore = defineStore(
         styleEditorOpen.value = false
         layersOpen.value = false
         themeGridOpen.value = false
+        infoOpen.value = false
+      }
+    }
+
+    function toggleInfoOpen(open?: boolean) {
+      infoOpen.value = open ?? !infoOpen.value
+
+      if (infoOpen.value) {
+        styleEditorOpen.value = false
+        layersOpen.value = false
+        themeGridOpen.value = false
+        myMapsOpen.value = false
       }
     }
 
@@ -122,6 +137,7 @@ export const useAppStore = defineStore(
       themeGridOpen,
       mapId,
       myMapsOpen,
+      infoOpen,
       feedbackOpen,
       feedbackanfOpen,
       feedbackageOpen,
@@ -143,6 +159,7 @@ export const useAppStore = defineStore(
       closeStyleEditorPanel,
       setDrawToolbarOpen,
       toggleMyMapsOpen,
+      toggleInfoOpen,
       toggleThemeGrid,
     }
   },