Add download size to tile downloading

src/components/widgets/Map.vue

@@ -218,8 +218,10 @@
   >
     <p>
       Saving offline map content
-      <span v-if="savingLayerName">({{ savingLayerName }})</span>:&nbsp;
-      {{ tilesTotal ? Math.round((tilesSaved / tilesTotal) * 100) : 0 }}%
+      <span v-if="savingLayerName">({{ savingLayerName }})</span>:&nbsp; {{ savePercentage }}%
+      <span v-if="estimatedDownloadedMB && estimatedTotalMB">
+        (~{{ estimatedDownloadedMB }} / {{ estimatedTotalMB }} MB)
+      </span>
     </p>
   </div>
 </template>
@@ -228,7 +230,7 @@
 import { useDebounceFn, useElementHover } from '@vueuse/core'
 import { formatDistanceToNow } from 'date-fns'
 import L, { type LatLngTuple, LayersControlEvent, LeafletMouseEvent, Map } from 'leaflet'
-import { SaveStatus, savetiles, tileLayerOffline } from 'leaflet.offline'
+import { tileLayerOffline } from 'leaflet.offline'
 import {
   computed,
   nextTick,
@@ -254,6 +256,7 @@ import PoiMapArrows from '@/components/poi/PoiMapArrows.vue'
 import { useInteractionDialog } from '@/composables/interactionDialog'
 import { setMapLayer } from '@/composables/map/useMapLayer'
 import { openSnackbar } from '@/composables/snackbar'
+import { useOfflineTiles } from '@/composables/useOfflineTiles'
 import { MavCmd, MavType } from '@/libs/connection/m2r/messages/mavlink2rest-enum'
 import { datalogger, DatalogVariable } from '@/libs/sensors-logging'
 import { degrees } from '@/libs/utils'
@@ -263,7 +266,6 @@ import { useAppInterfaceStore } from '@/stores/appInterface'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 import { useMissionStore } from '@/stores/mission'
 import { useWidgetManagerStore } from '@/stores/widgetManager'
-import { DialogActions } from '@/types/general'
 import type {
   IconDimensions,
   MapTileProvider,
@@ -282,6 +284,15 @@ const props = defineProps<{ widget: Widget }>()
 const widget = toRefs(props).widget
 const interfaceStore = useAppInterfaceStore()
 const { showDialog, closeDialog } = useInteractionDialog()
+const {
+  isSavingOfflineTiles,
+  savingLayerName,
+  estimatedTotalMB,
+  estimatedDownloadedMB,
+  savePercentage,
+  downloadOfflineMapTiles,
+  attachOfflineProgress,
+} = useOfflineTiles({ showDialog, closeDialog, openSnackbar })
 // Instantiate the necessary stores
 const vehicleStore = useMainVehicleStore()
 const missionStore = useMissionStore()
@@ -302,10 +313,6 @@ const contextMenuRef = ref()
 const isDragging = ref(false)
 const isPinching = ref(false)
 const isMissionChecklistOpen = ref(false)
-const isSavingOfflineTiles = ref(false)
-const tilesSaved = ref(0)
-const tilesTotal = ref(0)
-const savingLayerName = ref<string>('')
 let esriSaveBtn: HTMLAnchorElement | undefined
 let osmSaveBtn: HTMLAnchorElement | undefined
 let seamarksSaveBtn: HTMLAnchorElement | undefined
@@ -817,86 +824,6 @@ onMounted(async () => {
   })
 })
 
-const confirmDownloadDialog =
-  (layerLabel: string) =>
-  (status: SaveStatus, ok: () => void): void => {
-    showDialog({
-      variant: 'info',
-      message: `Save ${status._tilesforSave.length} ${layerLabel} tiles for offline use?`,
-      persistent: false,
-      maxWidth: '450px',
-      actions: [
-        { text: 'Cancel', color: 'white', action: closeDialog },
-        {
-          text: 'Save tiles',
-          color: 'white',
-          action: () => {
-            ok()
-            closeDialog()
-          },
-        },
-      ] as DialogActions[],
-    })
-  }
-
-const deleteDownloadedTilesDialog =
-  (layerLabel: string) =>
-  (_status: SaveStatus, ok: () => void): void => {
-    showDialog({
-      variant: 'warning',
-      message: `Remove all saved ${layerLabel} tiles for this layer?`,
-      persistent: false,
-      maxWidth: '450px',
-      actions: [
-        { text: 'Cancel', color: 'white', action: closeDialog },
-        {
-          text: 'Remove tiles',
-          color: 'white',
-          action: () => {
-            ok()
-            closeDialog()
-            openSnackbar({ message: `${layerLabel} offline tiles removed`, variant: 'info', duration: 3000 })
-          },
-        },
-      ] as DialogActions[],
-    })
-  }
-
-const downloadOfflineMapTiles = (layer: any, layerLabel: string, maxZoom: number): L.Control => {
-  return savetiles(layer, {
-    saveWhatYouSee: true,
-    maxZoom,
-    alwaysDownload: false,
-    position: 'topright',
-    parallel: 20,
-    confirm: confirmDownloadDialog(layerLabel),
-    confirmRemoval: deleteDownloadedTilesDialog(layerLabel),
-    saveText: `<i class="mdi mdi-download" title="Save ${layerLabel} tiles"></i>`,
-    rmText: `<i class="mdi mdi-trash-can" title="Remove ${layerLabel} tiles"></i>`,
-  })
-}
-
-const attachOfflineProgress = (layer: any, layerName: string): void => {
-  layer.on('savestart', (e: any) => {
-    tilesSaved.value = 0
-    tilesTotal.value = e?._tilesforSave?.length ?? 0
-    savingLayerName.value = layerName
-    isSavingOfflineTiles.value = true
-    openSnackbar({ message: `Saving ${tilesTotal.value} ${layerName} tiles...`, variant: 'info', duration: 2000 })
-  })
-
-  layer.on('loadtileend', () => {
-    tilesSaved.value += 1
-    if (tilesTotal.value > 0 && tilesSaved.value >= tilesTotal.value) {
-      openSnackbar({ message: `${layerName} offline tiles saved!`, variant: 'success', duration: 3000 })
-      isSavingOfflineTiles.value = false
-      savingLayerName.value = ''
-      tilesSaved.value = 0
-      tilesTotal.value = 0
-    }
-  })
-}
-
 const handleContextMenu = {
   open: async (event: MouseEvent): Promise<void> => {
     if (!map.value || isPinching.value || isDragging.value) return