From d4235104a81c39865a1ea9ae365787788b8ee0d2 Mon Sep 17 00:00:00 2001
From: Luc Claustres <luc.claustres@orange.fr>
Date: Thu, 24 Oct 2024 19:17:43 +0200
Subject: [PATCH] wip: Allow to make layers available offline - improved
 offline view dialog (#833)

---
 .../components/catalog/KCreateOfflineView.vue | 36 +++++++++++++++++--
 map/client/components/catalog/KViewsPanel.vue | 12 +++----
 map/client/i18n/map_en.json                   |  3 +-
 map/client/i18n/map_fr.json                   |  3 +-
 4 files changed, 44 insertions(+), 10 deletions(-)

diff --git a/map/client/components/catalog/KCreateOfflineView.vue b/map/client/components/catalog/KCreateOfflineView.vue
index 53ff4ee62..ffe3d822e 100644
--- a/map/client/components/catalog/KCreateOfflineView.vue
+++ b/map/client/components/catalog/KCreateOfflineView.vue
@@ -5,15 +5,32 @@
   <KForm
     ref="form"
     :schema="schema"
+    @field-changed="onFieldChanged"
     class="q-pa-sm"
   />
+  {{ $t('KCreateOfflineView.NUMBER_OF_TILES') + n }}
+  
 </template>
 <script setup>
+import SphericalMercator from '@mapbox/sphericalmercator'
 import { ref, computed } from 'vue'
 import KForm from '../../../../core/client/components/form/KForm.vue'
 
+// Props
+const props = defineProps({
+  zoomLevel: {
+    type: Number,
+    default: 8
+  },
+  view: {
+    type: Object,
+    required: true
+  }
+})
+
 // Data
 const form = ref(null)
+const n = ref(0)
 
 // Computed
 const schema = computed(() => {
@@ -25,7 +42,7 @@ const schema = computed(() => {
     properties: {
       minZoom: {
         type: 'number',
-        default: 8,
+        default: props.zoomLevel,
         field: {
           component: 'form/KNumberField',
           label: 'KCreateOfflineView.MIN_ZOOM_FIELD_LABEL'
@@ -33,7 +50,7 @@ const schema = computed(() => {
       },
       maxZoom: {
         type: 'number',
-        default: 10,
+        default: props.zoomLevel + 2,
         field: {
           component: 'form/KNumberField',
           label: 'KCreateOfflineView.MAX_ZOOM_FIELD_LABEL'
@@ -53,6 +70,18 @@ const schema = computed(() => {
 })
 
 // Functions
+function updateNumberOfTiles (minZoom, maxZoom) {
+  n.value = 0
+  for (let z = minZoom; z <= maxZoom; z++) {
+    let sm =  new SphericalMercator()
+    const tilesBounds = sm.xyz([props.view.west, props.view.south, props.view.east, props.view.north], z)
+    n.value += (tilesBounds.maxX - tilesBounds.minX + 1) * (tilesBounds.maxY - tilesBounds.minY + 1)
+  }
+}
+function onFieldChanged() {
+  const { minZoom, maxZoom } = form.value.values()
+  updateNumberOfTiles(minZoom, maxZoom)
+}
 async function apply () {
   const { isValid, values } = form.value.validate()
   if (isValid) {
@@ -61,6 +90,9 @@ async function apply () {
   return isValid
 }
 
+// Immediate
+updateNumberOfTiles(props.zoomLevel, props.zoomLevel + 2)
+
 // Expose
 defineExpose({
   apply
diff --git a/map/client/components/catalog/KViewsPanel.vue b/map/client/components/catalog/KViewsPanel.vue
index ee18ccb5e..446afe6ba 100644
--- a/map/client/components/catalog/KViewsPanel.vue
+++ b/map/client/components/catalog/KViewsPanel.vue
@@ -127,6 +127,7 @@ export default {
         }
         case 'cache-view': {
           // Select cache options
+          const center = this.kActivity.getCenter()
           Dialog.create({
             title: i18n.t('KViewsPanel.CACHE_VIEW_DIALOG_TITLE'),
             message: i18n.t('KViewsPanel.CACHE_VIEW_DIALOG_MESSAGE'),
@@ -134,17 +135,15 @@ export default {
             component: 'KDialog',
             componentProps: {
               component: 'catalog/KCreateOfflineView',
+              zoomLevel: center.zoomLevel,
+              view,
               okAction: {
                 id: 'ok-button',
                 label: 'OK',
                 handler: 'apply',
                 flat: true
               },
-              cancelAction: {
-                id: 'cancel-button',
-                label: 'CANCEL',
-                flat: true
-              }
+              cancelAction: 'CANCEL'
             }
           }).onOk(async (values) => {
             const dismiss = Notify.create({
@@ -170,7 +169,8 @@ export default {
             icon: 'las la-trash-alt',
             message: i18n.t('KViewsPanel.UNCACHING_VIEW'),
             color: 'primary',
-            timeout: 0
+            timeout: 0,
+              spinner: true
           })
           await uncacheView(view, this.getProjectLayers(), {
             contextId: this.kActivity.contextId
diff --git a/map/client/i18n/map_en.json b/map/client/i18n/map_en.json
index 4b1312378..41de74a1d 100644
--- a/map/client/i18n/map_en.json
+++ b/map/client/i18n/map_en.json
@@ -458,7 +458,8 @@
   "KCreateOfflineView": {
     "MIN_ZOOM_FIELD_LABEL": "Zoom level from which data will be downloaded, increase will reduce data size",
     "MAX_ZOOM_FIELD_LABEL": "Zoom level until which data will be downloaded, increase will increase data size",
-    "NB_CONCURRENT_REQUESTS_FIELD_LABEL": "Number of concurrent requests issued to download, increase will speed up download but load the device and the server"
+    "NB_CONCURRENT_REQUESTS_FIELD_LABEL": "Number of concurrent requests issued to download, increase will speed up download but load the device and the server",
+    "NUMBER_OF_TILES": "Estimated number of tiles to download per layer: "
   },
   "KProjectsPanel": {
     "SORT_PROJECTS": "Sort projects",
diff --git a/map/client/i18n/map_fr.json b/map/client/i18n/map_fr.json
index 62bd981ab..06004208f 100644
--- a/map/client/i18n/map_fr.json
+++ b/map/client/i18n/map_fr.json
@@ -457,7 +457,8 @@
   "KCreateOfflineView": {
     "MIN_ZOOM_FIELD_LABEL": "Niveau de zoom à partir duquel les données vont être téléchargées, l'augmenter réduira la taille des données",
     "MAX_ZOOM_FIELD_LABEL": "Niveau de zoom jusqu'auquel les données vont être téléchargées, l'augmenter augmentera la taille des données",
-    "NB_CONCURRENT_REQUESTS_FIELD_LABEL": "Nombre de requêtes concurrentes utilisées pour le téléchargement, l'augmenter accélèrera le processus mais pourra surcharger la machine et le serveur"
+    "NB_CONCURRENT_REQUESTS_FIELD_LABEL": "Nombre de requêtes concurrentes utilisées pour le téléchargement, l'augmenter accélèrera le processus mais pourra surcharger la machine et le serveur",
+    "NUMBER_OF_TILES": "Estimation du nombre de tuiles à télécharger pour chaque couche: "
   },
   "KProjectsPanel": {
     "SORT_PROJECTS": "Trier les projets",