Merge pull request #168 from Geoportail-Luxembourg/GSLUX-754-info-panel

GSLUX-754: 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

@@ -38,13 +38,20 @@ statePersistorStyleService.bootstrap()
 statePersistorBgLayerService.bootstrap()
 mvtStyleService.initBackgroundsConfigs()
 
-const { embedded, layersOpen, legendsOpen, myMapsOpen, styleEditorOpen } =
-  storeToRefs(appStore)
+const {
+  embedded,
+  layersOpen,
+  legendsOpen,
+  myMapsOpen,
+  infoOpen,
+  styleEditorOpen,
+} = storeToRefs(appStore)
 
 watch(layersOpen, timeoutResizeMap)
 watch(legendsOpen, timeoutResizeMap)
 watch(styleEditorOpen, timeoutResizeMap)
 watch(myMapsOpen, timeoutResizeMap)
+watch(infoOpen, timeoutResizeMap)
 
 function timeoutResizeMap() {
   setTimeout(() => map.resize(), 50)

src/components/footer/footer-bar.vue

@@ -14,13 +14,15 @@ const {
   toggleDrawToolbarOpen,
   toggleMyMapsOpen,
   toggleLegendsOpen,
+  toggleInfoOpen,
 } = appStore
 const {
   layersOpen,
   legendsOpen,
   drawToolbarOpen,
   styleEditorOpen,
   myMapsOpen,
+  infoOpen,
   themeGridOpen,
 } = storeToRefs(appStore)
 
@@ -31,6 +33,7 @@ function onClickLayersIcon() {
   if (open) {
     styleEditorOpen.value = false
     myMapsOpen.value = false
+    infoOpen.value = false
   }
 
   themeGridOpen.value = false
@@ -67,11 +70,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/components/side-panel/side-panel.vue

@@ -6,6 +6,7 @@ import LayerPanel from '@/components/layer-panel/layer-panel.vue'
 import LegendsPanel from '@/components/legends/legends-panel.vue'
 import StylePanel from '@/components/style-selector/style-panel.vue'
 import MyMapsPanel from '@/components/my-maps/my-maps-panel.vue'
+import InfoPanel from '@/components/info/info-panel.vue'
 import { screenSizeIsAtLeast } from '@/services/common/device.utils'
 import { useAppStore } from '@/stores/app.store'
 
@@ -14,6 +15,7 @@ const {
   layersOpen,
   legendsOpen,
   myMapsOpen,
+  infoOpen,
   styleEditorOpen,
   themeGridOpen,
   drawToolbarOpen,
@@ -31,6 +33,7 @@ watch(myMapsOpen, myMapsOpen => {
       layersOpen.value =
       themeGridOpen.value =
       legendsOpen.value =
+      infoOpen.value =
         false
   }
 })
@@ -41,6 +44,7 @@ watch(legendsOpen, legendsOpen => {
       styleEditorOpen.value =
       layersOpen.value =
       themeGridOpen.value =
+      infoOpen.value =
         false
   }
 })
@@ -51,6 +55,18 @@ watch(drawToolbarOpen, drawToolbarOpen => {
     layersOpen.value = false
     legendsOpen.value = false
     themeGridOpen.value = false
+    infoOpen.value = false
+  }
+})
+
+watch(infoOpen, infoOpen => {
+  if (infoOpen) {
+    myMapsOpen.value =
+      styleEditorOpen.value =
+      layersOpen.value =
+      themeGridOpen.value =
+      legendsOpen.value =
+        false
   }
 })
 </script>
@@ -75,4 +91,9 @@ watch(drawToolbarOpen, drawToolbarOpen => {
   <div v-if="myMapsOpen" class="w-full md:w-80 bg-secondary z-10">
     <my-maps-panel />
   </div>
+
+  <!-- Info panel -->
+  <div v-if="infoOpen" class="w-full md:w-80 bg-secondary z-10">
+    <info-panel />
+  </div>
 </template>

src/stores/app.store.ts

@@ -8,6 +8,7 @@ export const DEFAULT_LEGENDS_PANEL_OPENED = false
 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
@@ -24,6 +25,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)
@@ -77,6 +79,7 @@ export const useAppStore = defineStore(
         layersOpen.value = true
         legendsOpen.value = false
         myMapsOpen.value = false
+        infoOpen.value = false
         styleEditorOpen.value = false
         myLayersTabOpen.value && (myLayersTabOpen.value = false)
       }
@@ -112,6 +115,10 @@ export const useAppStore = defineStore(
       legendsOpen.value = open ?? !legendsOpen.value
     }
 
+    function toggleInfoOpen(open?: boolean) {
+      infoOpen.value = open ?? !infoOpen.value
+    }
+
     return {
       embedded,
       lang,
@@ -121,6 +128,7 @@ export const useAppStore = defineStore(
       themeGridOpen,
       mapId,
       myMapsOpen,
+      infoOpen,
       feedbackOpen,
       feedbackanfOpen,
       feedbackageOpen,
@@ -142,6 +150,7 @@ export const useAppStore = defineStore(
       closeStyleEditorPanel,
       toggleDrawToolbarOpen,
       toggleMyMapsOpen,
+      toggleInfoOpen,
       toggleThemeGrid,
       toggleLegendsOpen,
     }