Merge pull request #967 from geoadmin/feat-print-progress

PB-726: Added a print progress bar instead of a spinner - #patch

src/modules/menu/components/print/MenuPrintSection.vue

@@ -8,6 +8,7 @@ import {
     usePrint,
 } from '@/modules/map/components/openlayers/utils/usePrint.composable'
 import MenuSection from '@/modules/menu/components/menu/MenuSection.vue'
+import ProgressBar from '@/utils/components/ProgressBar.vue'
 import log from '@/utils/logging'
 import { formatThousand } from '@/utils/numberUtils'
 
@@ -27,6 +28,8 @@ const store = useStore()
 const availablePrintLayouts = computed(() => store.state.print.layouts)
 const selectedLayout = computed(() => store.state.print.selectedLayout)
 const scales = computed(() => selectedLayout.value?.scales || [])
+// approximate print duration := 8s per layer (+1 is for the background layer and to avoid 0 duration)
+const printDuration = computed(() => 8 * (store.getters.visibleLayers.length + 1))
 
 const selectedLayoutName = computed({
     get() {
@@ -198,6 +201,12 @@ defineExpose({
                 <div class="valid-feedback">{{ i18n.t('operation_successful') }}</div>
             </div>
             <div class="full-width justify-content-center">
+                <ProgressBar
+                    v-if="printStatus === PrintStatus.PRINTING"
+                    :duration="printDuration"
+                    bar-class="bg-danger"
+                    class="mb-2"
+                />
                 <button
                     v-if="printStatus === PrintStatus.PRINTING"
                     type="button"
@@ -206,7 +215,6 @@ defineExpose({
                     @click="abortCurrentJob"
                 >
                     {{ i18n.t('abort') }}
-                    <font-awesome-icon spin :icon="['fa', 'spinner']" class="ms-2" />
                 </button>
                 <button
                     v-else

src/utils/components/ProgressBar.vue

@@ -0,0 +1,71 @@
+<script setup>
+import { onBeforeUnmount, onMounted, ref, toRefs } from 'vue'
+
+import log from '@/utils/logging'
+
+const props = defineProps({
+    duration: {
+        type: Number,
+        required: true,
+    },
+    barClass: {
+        type: String,
+        default: '',
+    },
+})
+const { duration, barClass } = toRefs(props)
+
+const value = ref(0)
+const waitTime = ref(0)
+const totalTime = ref(0)
+const slot = ref(0)
+
+const maxValue = 100
+
+let started = null
+let timer = null
+onMounted(() => {
+    started = Date.now()
+    totalTime.value = duration.value * 1000
+    slot.value = Math.floor((maxValue * 2) / 3)
+    waitTime.value = (totalTime.value * 2) / 3 / slot.value
+    log.debug(
+        `progress value=${value.value} slot=${slot.value} duration=${duration.value} waitTime=${waitTime.value}`
+    )
+    timer = setTimeout(progress, waitTime.value)
+})
+
+onBeforeUnmount(() => {
+    clearTimeout(timer)
+    log.debug(`progress finished after ${Date.now() - started}ms`)
+})
+
+function progress() {
+    value.value += 1
+    if (value.value < maxValue) {
+        if (value.value === slot.value) {
+            slot.value = Math.floor((100 - slot.value) / 2 + slot.value)
+
+            waitTime.value *= 2
+            log.debug(
+                `progress value=${value.value} slot=${slot.value} new waitTime=${waitTime.value}`
+            )
+        }
+        timer = setTimeout(progress, waitTime.value)
+    }
+}
+</script>
+
+<template>
+    <div class="progress">
+        <div
+            class="progress-bar"
+            :class="barClass"
+            role="progressbar"
+            :style="`width: ${value}%`"
+            :aria-valuenow="value"
+            aria-valuemin="0"
+            aria-valuemax="100"
+        />
+    </div>
+</template>

tests/cypress/tests-e2e/3d/navigation.cy.js

@@ -99,7 +99,7 @@ describe('Testing 3D navigation', () => {
             center: '0,0',
         })
         cy.log('check if center is moved to out of bounds location')
-        cy.readStoreValue('state.position').then((positionStore) => {
+        cy.readStoreValue('state.position').should((positionStore) => {
             expect(positionStore.center).to.deep.equal([2660000, 1190000])
         })
     })
@@ -110,7 +110,7 @@ describe('Testing 3D navigation', () => {
         })
         cy.waitUntilCesiumTilesLoaded()
         cy.log('check if camera is moved to out of bounds location')
-        cy.readStoreValue('state.position').then((positionStore) => {
+        cy.readStoreValue('state.position').should((positionStore) => {
             expect(positionStore.camera.x).to.deep.equal(8.225457)
             expect(positionStore.camera.y).to.deep.equal(46.858429)
         })