From fe53038e597f0724e94c1bc95aefba270f966760 Mon Sep 17 00:00:00 2001 From: Tobias Kohr Date: Mon, 28 Oct 2024 16:18:24 +0100 Subject: [PATCH] feat(infos): add info-panel --- cypress/e2e/footer-bar.cy.ts | 39 ++++++++++++++++++++++-- public/assets/locales/app.de.json | 4 ++- public/assets/locales/app.en.json | 4 ++- public/assets/locales/app.fr.json | 4 ++- public/assets/locales/app.lb.json | 4 ++- src/App.vue | 11 +++++-- src/components/footer/footer-bar.vue | 10 ++++-- src/components/info/info-panel.vue | 34 +++++++++++++++++++++ src/components/side-panel/side-panel.vue | 21 +++++++++++++ src/stores/app.store.ts | 9 ++++++ 10 files changed, 129 insertions(+), 11 deletions(-) create mode 100644 src/components/info/info-panel.vue diff --git a/cypress/e2e/footer-bar.cy.ts b/cypress/e2e/footer-bar.cy.ts index 5f4b31c1..1496a958 100644 --- a/cypress/e2e/footer-bar.cy.ts +++ b/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') + }) + }) + }) + }) }) diff --git a/public/assets/locales/app.de.json b/public/assets/locales/app.de.json index 50d3bbc5..09663de8 100644 --- a/public/assets/locales/app.de.json +++ b/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" } diff --git a/public/assets/locales/app.en.json b/public/assets/locales/app.en.json index 72f5997b..f45da356 100644 --- a/public/assets/locales/app.en.json +++ b/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." } diff --git a/public/assets/locales/app.fr.json b/public/assets/locales/app.fr.json index 85395a99..268b1653 100644 --- a/public/assets/locales/app.fr.json +++ b/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" } diff --git a/public/assets/locales/app.lb.json b/public/assets/locales/app.lb.json index 0ca0fe4d..0905de5c 100644 --- a/public/assets/locales/app.lb.json +++ b/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" } diff --git a/src/App.vue b/src/App.vue index 107f90df..889345a8 100644 --- a/src/App.vue +++ b/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) diff --git a/src/components/footer/footer-bar.vue b/src/components/footer/footer-bar.vue index d5ac4aef..b8aacd59 100644 --- a/src/components/footer/footer-bar.vue +++ b/src/components/footer/footer-bar.vue @@ -14,6 +14,7 @@ const { toggleDrawToolbarOpen, toggleMyMapsOpen, toggleLegendsOpen, + toggleInfoOpen, } = appStore const { layersOpen, @@ -21,6 +22,7 @@ const { 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() { > -
  • +
    • diff --git a/src/components/info/info-panel.vue b/src/components/info/info-panel.vue new file mode 100644 index 00000000..f828a2dd --- /dev/null +++ b/src/components/info/info-panel.vue @@ -0,0 +1,34 @@ + + + diff --git a/src/components/side-panel/side-panel.vue b/src/components/side-panel/side-panel.vue index 04a3bff3..54a56673 100644 --- a/src/components/side-panel/side-panel.vue +++ b/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 } }) @@ -75,4 +91,9 @@ watch(drawToolbarOpen, drawToolbarOpen => {
    + + +
    + +
    diff --git a/src/stores/app.store.ts b/src/stores/app.store.ts index bd1fb323..bdd63d72 100644 --- a/src/stores/app.store.ts +++ b/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 = 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, }