From 7c867262f1d155b5b65b100f5d4770e593c29b1a Mon Sep 17 00:00:00 2001
From: Brice Schaffner <brice.schaffner@swisstopo.ch>
Date: Mon, 24 Jun 2024 06:22:48 +0200
Subject: [PATCH 1/3] Set correct geoloc error in case of timeout

---
 src/store/plugins/geolocation-management.plugin.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/store/plugins/geolocation-management.plugin.js b/src/store/plugins/geolocation-management.plugin.js
index c70453996..e890b07f9 100644
--- a/src/store/plugins/geolocation-management.plugin.js
+++ b/src/store/plugins/geolocation-management.plugin.js
@@ -55,6 +55,9 @@ const handlePositionError = (error, store) => {
             })
             alert(i18n.global.t('geoloc_permission_denied'))
             break
+        case error.TIMEOUT:
+            alert(i18n.global.t('geoloc_time_out'))
+            break
         default:
             if (IS_TESTING_WITH_CYPRESS && error.code === error.POSITION_UNAVAILABLE) {
                 // edge case for e2e testing, if we are testing with Cypress and we receive a POSITION_UNAVAILABLE

From 350c13b4761bce8ece23584371a067206f4d0228 Mon Sep 17 00:00:00 2001
From: Brice Schaffner <brice.schaffner@swisstopo.ch>
Date: Mon, 24 Jun 2024 07:39:02 +0200
Subject: [PATCH 2/3] Improve geolocation error management by removing the
 alert()

Now the geolocation error is not anymore in a window.alert() but in an error
overlay on the top right corner that can be close.
---
 src/App.vue                                   |  11 +-
 .../map/components/toolbox/GeolocButton.vue   |  39 ++++--
 src/store/modules/ui.store.js                 |  13 ++
 .../plugins/geolocation-management.plugin.js  |   9 +-
 src/utils/components/ErrorWindow.vue          | 111 ++++++++++++++++++
 tests/cypress/tests-e2e/geolocation.cy.js     |   4 +
 6 files changed, 168 insertions(+), 19 deletions(-)
 create mode 100644 src/utils/components/ErrorWindow.vue

diff --git a/src/App.vue b/src/App.vue
index 6234c3691..ce5d23350 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,10 +5,11 @@
  * Will listen for screen size changes and commit this changes to the store
  */
 
-import { onMounted, onUnmounted, ref } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useStore } from 'vuex'
 
+import ErrorWindow from '@/utils/components/ErrorWindow.vue'
 import debounce from '@/utils/debounce'
 
 const withOutline = ref(false)
@@ -20,6 +21,8 @@ const dispatcher = { dispatcher: 'App.vue' }
 
 let debouncedOnResize
 
+const errorText = computed(() => store.state.ui.errorText)
+
 onMounted(() => {
     // reading size
     setScreenSizeFromWindowSize()
@@ -51,6 +54,12 @@ function refreshPageTitle() {
         @pointerdown="withOutline = false"
     >
         <router-view />
+        <ErrorWindow
+            v-if="errorText"
+            title="error"
+            @close="store.dispatch('setErrorText', { errorText: null, ...dispatcher })"
+            ><div>{{ i18n.t(errorText) }}</div></ErrorWindow
+        >
     </div>
 </template>
 
diff --git a/src/modules/map/components/toolbox/GeolocButton.vue b/src/modules/map/components/toolbox/GeolocButton.vue
index 08e4bbcc6..103c1110a 100644
--- a/src/modules/map/components/toolbox/GeolocButton.vue
+++ b/src/modules/map/components/toolbox/GeolocButton.vue
@@ -8,10 +8,19 @@ const dispatcher = { dispatcher: 'GeolocButton.vue' }
 
 const store = useStore()
 
-useTippyTooltip('.geoloc-button[data-tippy-content]', { placement: 'left' })
+useTippyTooltip('.geoloc-button-div[data-tippy-content]', { placement: 'left' })
 
 const isActive = computed(() => store.state.geolocation.active)
 const isDenied = computed(() => store.state.geolocation.denied)
+const tippyContent = computed(() => {
+    if (isDenied.value) {
+        return 'geoloc_permission_denied'
+    }
+    if (isActive.value) {
+        return 'geoloc_stop_tracking'
+    }
+    return 'geoloc_start_tracking'
+})
 
 function toggleGeolocation() {
     store.dispatch('toggleGeolocation', dispatcher)
@@ -19,18 +28,22 @@ function toggleGeolocation() {
 </script>
 
 <template>
-    <button
-        class="toolbox-button geoloc-button"
-        type="button"
-        :class="{ active: isActive, disabled: isDenied }"
-        :data-tippy-content="isActive ? 'geoloc_stop_tracking' : 'geoloc_start_tracking'"
-        data-cy="geolocation-button"
-        @click="toggleGeolocation"
-    >
-        <svg xmlns="http://www.w3.org/2000/svg" y="0" x="0">
-            <ellipse class="geoloc-button-inner-circle" />
-        </svg>
-    </button>
+    <!-- Here belowe we need to set the tippy to an external div instead of directely to the button,
+     otherwise the tippy won't work when the button is disabled -->
+    <div class="geoloc-button-div" :data-tippy-content="tippyContent">
+        <button
+            class="toolbox-button geoloc-button"
+            type="button"
+            :disabled="isDenied"
+            :class="{ active: isActive, disabled: isDenied }"
+            data-cy="geolocation-button"
+            @click="toggleGeolocation"
+        >
+            <svg xmlns="http://www.w3.org/2000/svg" y="0" x="0">
+                <ellipse class="geoloc-button-inner-circle" />
+            </svg>
+        </button>
+    </div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/store/modules/ui.store.js b/src/store/modules/ui.store.js
index 25b9f4216..5848e7895 100644
--- a/src/store/modules/ui.store.js
+++ b/src/store/modules/ui.store.js
@@ -151,6 +151,15 @@ export default {
          * @type Boolean
          */
         showDisclaimer: true,
+
+        /**
+         * Text to display in the error window
+         *
+         * When this text is set the error window will be displayed
+         *
+         * @type String
+         */
+        errorText: null,
     },
     getters: {
         showLoadingBar(state) {
@@ -368,6 +377,9 @@ export default {
         setShowDisclaimer({ commit }, { showDisclaimer, dispatcher }) {
             commit('setShowDisclaimer', { showDisclaimer, dispatcher })
         },
+        setErrorText({ commit }, { errorText, dispatcher }) {
+            commit('setErrorText', { errorText, dispatcher })
+        },
     },
     mutations: {
         setSize(state, { height, width }) {
@@ -427,5 +439,6 @@ export default {
             state.featureInfoPosition = position
         },
         setShowDisclaimer: (state, { showDisclaimer }) => (state.showDisclaimer = showDisclaimer),
+        setErrorText: (state, { errorText }) => (state.errorText = errorText),
     },
 }
diff --git a/src/store/plugins/geolocation-management.plugin.js b/src/store/plugins/geolocation-management.plugin.js
index e890b07f9..68d78b061 100644
--- a/src/store/plugins/geolocation-management.plugin.js
+++ b/src/store/plugins/geolocation-management.plugin.js
@@ -1,7 +1,6 @@
 import proj4 from 'proj4'
 
 import { IS_TESTING_WITH_CYPRESS } from '@/config'
-import i18n from '@/modules/i18n'
 import { STANDARD_ZOOM_LEVEL_1_25000_MAP } from '@/utils/coordinates/CoordinateSystem.class'
 import { WGS84 } from '@/utils/coordinates/coordinateSystems'
 import CustomCoordinateSystem from '@/utils/coordinates/CustomCoordinateSystem.class.js'
@@ -53,20 +52,20 @@ const handlePositionError = (error, store) => {
                 denied: true,
                 ...dispatcher,
             })
-            alert(i18n.global.t('geoloc_permission_denied'))
+            store.dispatch('setErrorText', { errorText: 'geoloc_permission_denied', ...dispatcher })
             break
         case error.TIMEOUT:
-            alert(i18n.global.t('geoloc_time_out'))
+            store.dispatch('setErrorText', { errorText: 'geoloc_time_out', ...dispatcher })
             break
         default:
             if (IS_TESTING_WITH_CYPRESS && error.code === error.POSITION_UNAVAILABLE) {
                 // edge case for e2e testing, if we are testing with Cypress and we receive a POSITION_UNAVAILABLE
-                // we don't raise an alert as it's "normal" in Electron to have this error raised (this API doesn't work
+                // we don't raise an error as it's "normal" in Electron to have this error raised (this API doesn't work
                 // on Electron embedded in Cypress : no Geolocation hardware detected, etc...)
                 // the position will be returned by a mocked up function by Cypress we can ignore this error
                 // we do nothing...
             } else {
-                alert(i18n.global.t('geoloc_unknown'))
+                store.dispatch('setErrorText', { errorText: 'geoloc_unknown', ...dispatcher })
             }
     }
 }
diff --git a/src/utils/components/ErrorWindow.vue b/src/utils/components/ErrorWindow.vue
new file mode 100644
index 000000000..678338d67
--- /dev/null
+++ b/src/utils/components/ErrorWindow.vue
@@ -0,0 +1,111 @@
+<script setup>
+import { computed, ref, toRefs } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
+
+const props = defineProps({
+    title: {
+        type: String,
+        default: '',
+    },
+    /**
+     * Hide the modal with backdrop, can be used to temporarily hide the modal without loosing its
+     * content
+     */
+    hide: {
+        type: Boolean,
+        default: false,
+    },
+    /** Add a minimize button in header that will hide/show the body */
+    hasMinimize: {
+        type: Boolean,
+        default: true,
+    },
+    /** Set to true if this is and */
+})
+const { title, hide } = toRefs(props)
+
+const store = useStore()
+
+const showBody = ref(true)
+const hasDevSiteWarning = computed(() => store.getters.hasDevSiteWarning)
+
+const i18n = useI18n()
+
+const emit = defineEmits(['close'])
+</script>
+
+<template>
+    <teleport to="#main-component">
+        <div
+            v-show="!hide"
+            class="simple-window card bg-danger text-white fw-bold"
+            :class="{ 'dev-disclaimer-present': hasDevSiteWarning }"
+            data-cy="error-window"
+        >
+            <div
+                class="card-header d-flex align-items-center justify-content-sm-end"
+                data-cy="window-header"
+            >
+                <span v-if="title" class="me-auto text-truncate">{{ i18n.t(title) }}</span>
+                <span v-else class="me-auto" />
+                <button
+                    class="btn btn-light btn-sm btn-outline-danger me-2"
+                    @click.stop="showBody = !showBody"
+                >
+                    <FontAwesomeIcon :icon="`caret-${showBody ? 'down' : 'right'}`" />
+                </button>
+                <button
+                    class="btn btn-light btn-sm btn-outline-danger"
+                    data-cy="error-window-close"
+                    @click.stop="emit('close')"
+                >
+                    <FontAwesomeIcon icon="times" />
+                </button>
+            </div>
+            <div class="card-body" :class="{ hide: !showBody }" data-cy="error-window-body">
+                <slot />
+            </div>
+        </div>
+    </teleport>
+</template>
+
+<style lang="scss" scoped>
+@import '@/scss/variables.module';
+@import '@/scss/media-query.mixin';
+
+.simple-window {
+    $top-margin: calc(2 * $header-height + 2rem);
+    z-index: calc($zindex-menu - 1);
+    position: fixed;
+    top: $top-margin;
+    right: 4rem;
+
+    width: max-content;
+    max-width: 400px;
+
+    max-height: calc(100vh - $top-margin);
+    @include respond-below(phone) {
+        $top-margin: $header-height;
+        &.dev-disclaimer-present {
+            $top-margin: calc($header-height + $dev-disclaimer-height);
+        }
+
+        top: $top-margin;
+        left: 50%;
+        right: unset;
+        transform: translate(-50%, 0%);
+        max-height: calc(100vh - $top-margin);
+        max-width: 100vw;
+    }
+    .card-body {
+        overflow-y: auto;
+
+        &.hide {
+            visibility: hidden;
+            height: 0px;
+            padding: 0px;
+        }
+    }
+}
+</style>
diff --git a/tests/cypress/tests-e2e/geolocation.cy.js b/tests/cypress/tests-e2e/geolocation.cy.js
index 3e7be21cf..719da434f 100644
--- a/tests/cypress/tests-e2e/geolocation.cy.js
+++ b/tests/cypress/tests-e2e/geolocation.cy.js
@@ -11,6 +11,10 @@ function getGeolocationButtonAndClickIt() {
     cy.get(geolocationButtonSelector).should('be.visible').click()
 }
 
+// TODO Those tests below are not working as expected, as the cypress-browser-permissions is not
+// working and the goelocation is always allowed, this needs to be reworked and probably need to
+// use another plugin.
+
 describe('Geolocation cypress', () => {
     context(
         'Test geolocation when first time activating it',

From 85a12c623069ff409e0e858457c297495d39d67d Mon Sep 17 00:00:00 2001
From: Brice Schaffner <brice.schaffner@swisstopo.ch>
Date: Mon, 24 Jun 2024 11:42:57 +0200
Subject: [PATCH 3/3] Fixing some typos

---
 src/modules/map/components/toolbox/GeolocButton.vue | 2 +-
 src/utils/components/ErrorWindow.vue                | 1 -
 tests/cypress/tests-e2e/geolocation.cy.js           | 4 ++--
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/modules/map/components/toolbox/GeolocButton.vue b/src/modules/map/components/toolbox/GeolocButton.vue
index 103c1110a..d7e15f01f 100644
--- a/src/modules/map/components/toolbox/GeolocButton.vue
+++ b/src/modules/map/components/toolbox/GeolocButton.vue
@@ -28,7 +28,7 @@ function toggleGeolocation() {
 </script>
 
 <template>
-    <!-- Here belowe we need to set the tippy to an external div instead of directely to the button,
+    <!-- Here below we need to set the tippy to an external div instead of directly to the button,
      otherwise the tippy won't work when the button is disabled -->
     <div class="geoloc-button-div" :data-tippy-content="tippyContent">
         <button
diff --git a/src/utils/components/ErrorWindow.vue b/src/utils/components/ErrorWindow.vue
index 678338d67..5cbb61b38 100644
--- a/src/utils/components/ErrorWindow.vue
+++ b/src/utils/components/ErrorWindow.vue
@@ -21,7 +21,6 @@ const props = defineProps({
         type: Boolean,
         default: true,
     },
-    /** Set to true if this is and */
 })
 const { title, hide } = toRefs(props)
 
diff --git a/tests/cypress/tests-e2e/geolocation.cy.js b/tests/cypress/tests-e2e/geolocation.cy.js
index 719da434f..fe9d40bbb 100644
--- a/tests/cypress/tests-e2e/geolocation.cy.js
+++ b/tests/cypress/tests-e2e/geolocation.cy.js
@@ -11,8 +11,8 @@ function getGeolocationButtonAndClickIt() {
     cy.get(geolocationButtonSelector).should('be.visible').click()
 }
 
-// TODO Those tests below are not working as expected, as the cypress-browser-permissions is not
-// working and the goelocation is always allowed, this needs to be reworked and probably need to
+// PB-701: TODO Those tests below are not working as expected, as the cypress-browser-permissions is not
+// working and the geolocation is always allowed, this needs to be reworked and probably need to
 // use another plugin.
 
 describe('Geolocation cypress', () => {