diff --git a/src/UI/BigComponents/OfflineManagement.svelte b/src/UI/BigComponents/OfflineManagement.svelte index d2638ce066..dcb022f511 100644 --- a/src/UI/BigComponents/OfflineManagement.svelte +++ b/src/UI/BigComponents/OfflineManagement.svelte @@ -18,8 +18,9 @@ import ShowDataLayer from "../Map/ShowDataLayer" import StaticFeatureSource from "../../Logic/FeatureSource/Sources/StaticFeatureSource" import LayerConfig from "../../Models/ThemeConfig/LayerConfig" - import AccordionSingle from "../Flowbite/AccordionSingle.svelte" import { DownloadIcon, TrashIcon } from "@rgossiaux/svelte-heroicons/solid" + import { Accordion, AccordionItem } from "flowbite-svelte" + import ServiceWorkerStatus from "./ServiceWorkerStatus.svelte" export let state: ThemeViewState & SpecialVisualizationState = undefined @@ -35,7 +36,7 @@ const offlineMapManager = new OfflineBasemapManager("https://cache.mapcomplete.org/") - let installedMeta: UIEventSource = new UIEventSource() + let installedMeta: UIEventSource = new UIEventSource([]) function updateMeta() { @@ -43,15 +44,7 @@ } - async function pingServiceWorker() { - const l = window.location - const sw = await Utils.downloadJson(l.protocol + "//" + l.host + "/service-worker/offline-basemapM/update") - console.log("Service worker has data:", sw) - } - - updateMeta() - pingServiceWorker() let installing = new UIEventSource([]) @@ -62,7 +55,6 @@ const descr = OfflineBasemapManager.getAreaDescriptionForMapcomplete(key + ".pmtiles") await offlineMapManager.installArea(descr) updateMeta() - pingServiceWorker() } catch (e) { installing.set(installing.data.filter(k => k !== key)) } finally { @@ -71,13 +63,14 @@ } - let installed: Store> = installedMeta.map(meta => + let installed: Store[]> = installedMeta.map(meta => (meta ?? []) .map(area => { const f = Tiles.asGeojson(area.minzoom, area.x, area.y) f.properties = { id: area.minzoom + "-" + area.x + "-" + area.y, - downloaded: "yes" + downloaded: "yes", + text: area.name + " " + area.dataVersion + " " + Utils.toHumanByteSize(Number(area.size)) } return f } @@ -104,7 +97,7 @@ async function download() { const areasToInstall = Array.from(offlineMapManager.getInstallCandidates(focusTile.data)) - for (const area: AreaDescription of areasToInstall) { + for (const area of areasToInstall) { console.log("Attempting to install", area) await install(area) } @@ -135,7 +128,14 @@ ] } }], - pointRendering: null + pointRendering: [ + { + location: ["point", "centroid"], + label: "{text}", + labelCss: "width: w-min", + labelCssClasses: "bg-white rounded px-2" + } + ] }) }) @@ -173,71 +173,101 @@ {#if $installedMeta === undefined} {:else} -
-
- -
-
-
- {#if $focusTileIsInstalling} -
- - Data is being downloaded - +
+ + + +
Map
+
+
+ +
+
+
+ {#if $focusTileIsInstalling} +
+ + Data is being downloaded + +
+ {:else} + + {/if} +
- {:else} - - {/if} -
-
+ - -
- Offline tile management -
+ +
+ Offline tile management +
- {Utils.toHumanByteSize(Utils.sum($installedMeta.map(area => area.size)))} - - - - - - - - - - {#each ($installedMeta ?? []) as area } - - - - - - - - {/each} + + Delete all + +
NameMap generation dateSizeZoom rangesActions
{area.name}{area.dataVersion}{Utils.toHumanByteSize(area.size ?? -1)}{area.minzoom} - {#if area.maxzoom !== undefined} - - {area.maxzoom} - {:else} - and above - {/if} - - -
+ + + + + + + + {#each ($installedMeta ?? []) as area } + + + + + + + + {/each} -
NameMap generation dateSizeZoom rangesActions
{area.name}{area.dataVersion}{Utils.toHumanByteSize(area.size ?? -1)}{area.minzoom} + {#if area.maxzoom !== undefined} + - {area.maxzoom} + {:else} + and above + {/if} + + +
-
+ +
+ + +
+ Service worker status +
+
+ +
+
+ +
{/if} + +