PB-154: Added copy button to UA debug field

geoadmin · Aug 26, 2024 · b9b50b6 · b9b50b6
1 parent 4316395
commit b9b50b6
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 5 deletions.
diff --git a/src/modules/map/components/openlayers/OpenLayersGeolocationFeedback.vue b/src/modules/map/components/openlayers/OpenLayersGeolocationFeedback.vue
@@ -69,7 +69,7 @@ const orientationParameters = computed(() => {
         },
         {
             title: 'User Agent',
-            parameters: [{ value: navigator.userAgent }],
+            parameters: [{ value: navigator.userAgent, hasCopyBtn: true }],
         },
     ]
 })

diff --git a/src/modules/map/components/openlayers/debug/OpenLayersDeviceOrientationDebugInfo.vue b/src/modules/map/components/openlayers/debug/OpenLayersDeviceOrientationDebugInfo.vue
@@ -1,6 +1,10 @@
 <script setup>
 import { Toast } from 'bootstrap'
-import { onMounted, ref, toRefs } from 'vue'
+import tippy from 'tippy.js'
+import { onBeforeUnmount, onMounted, ref, toRefs } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import log from '@/utils/logging'
 
 const props = defineProps({
     parameters: {
@@ -10,12 +14,28 @@ const props = defineProps({
 })
 const { parameters } = toRefs(props)
 
+const i18n = useI18n()
+
 const deviceOrientationToast = ref(null)
 const deviceOrientationToastElement = ref(null)
 const isToastActive = ref(false)
 
+let copyTooltips = null
+
 onMounted(() => {
     deviceOrientationToast.value = Toast.getOrCreateInstance(deviceOrientationToastElement.value)
+    copyTooltips = tippy('.copy-btn', {
+        trigger: 'manual',
+        arrow: true,
+        placement: 'auto',
+        hideOnClick: false,
+        // The French translation of "copy_done" contains a &nbsp;
+        allowHTML: true,
+        content: i18n.t('copy_cta'),
+    })
+})
+onBeforeUnmount(() => {
+    copyTooltips?.forEach((instance) => instance.destroy())
 })
 
 function toggleToast() {
@@ -27,6 +47,21 @@ function toggleToast() {
         isToastActive.value = true
     }
 }
+
+async function copyValue(event, value) {
+    try {
+        await navigator.clipboard.writeText(value)
+        const btnElement = event.target
+        btnElement?._tippy?.setContent(i18n.t('copy_done'))
+        btnElement?._tippy?.show()
+        setTimeout(() => {
+            btnElement?._tippy?.setContent(i18n.t('copy_cta'))
+            btnElement?._tippy?.hide()
+        }, 3000)
+    } catch (error) {
+        log.error(`Failed to copy ${value} to clipboard`, error)
+    }
+}
 </script>
 
 <template>
@@ -45,7 +80,7 @@ function toggleToast() {
         </div>
     </teleport>
 
-    <div class="toast-container position-fixed bottom-0 end-0 p-3 clear-no-ios-long-press">
+    <div class="toast-container position-fixed bottom-0 end-0 p-5 clear-no-ios-long-press">
         <div
             id="DeviceOrientationToast"
             ref="deviceOrientationToastElement"
@@ -69,8 +104,22 @@ function toggleToast() {
                 <div v-for="parameter in parameters" :key="parameter.title">
                     <div class="text-decoration-underline fw-bold">{{ parameter.title }}:</div>
                     <div>
-                        <div v-for="subParam in parameter.parameters" :key="subParam.key">
-                            {{ subParam.key ? `${subParam.key}: ` : '' }}{{ subParam.value }}
+                        <div
+                            v-for="subParam in parameter.parameters"
+                            :key="subParam.key"
+                            class="d-flex"
+                        >
+                            <div>
+                                {{ subParam.key ? `${subParam.key}: ` : '' }}{{ subParam.value }}
+                            </div>
+                            <button
+                                v-if="subParam.hasCopyBtn"
+                                class="copy-btn btn btn-sm btn-light text-black-50"
+                                type="button"
+                                @click="copyValue($event, subParam.value)"
+                            >
+                                <FontAwesomeIcon class="icon" :icon="['far', 'copy']" />
+                            </button>
                         </div>
                     </div>
                 </div>