From 6f44fe31d081dbcee99bd499a7df0267d07d58d7 Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Fri, 1 Aug 2025 00:43:52 +0200 Subject: [PATCH] Feature: add online indicator to special renderings or hide them in case of failure --- .../Sources/OverpassFeatureSource.ts | 6 +++++- src/UI/Base/LoginToggle.svelte | 18 +++++++++++------- src/UI/BigComponents/MenuDrawerIndex.svelte | 2 +- src/UI/Image/AttributedImage.svelte | 4 ++++ src/UI/Image/ImageCarousel.svelte | 6 +++++- src/UI/Popup/DeleteFlow/DeleteWizard.svelte | 2 +- src/UI/Popup/MoveWizard.svelte | 2 +- 7 files changed, 28 insertions(+), 12 deletions(-) diff --git a/src/Logic/FeatureSource/Sources/OverpassFeatureSource.ts b/src/Logic/FeatureSource/Sources/OverpassFeatureSource.ts index e78d09fa59..35055fa4ac 100644 --- a/src/Logic/FeatureSource/Sources/OverpassFeatureSource.ts +++ b/src/Logic/FeatureSource/Sources/OverpassFeatureSource.ts @@ -8,7 +8,8 @@ import { Utils } from "../../../Utils" import { TagsFilter } from "../../Tags/TagsFilter" import { BBox } from "../../BBox" import { OsmTags } from "../../../Models/OsmFeature" -;("use strict") + +("use strict") /** * A wrapper around the 'Overpass'-object. @@ -106,6 +107,9 @@ export default class OverpassFeatureSource implements UpdatableFeatureSource { * @private */ public async updateAsync(overrideBounds?: BBox): Promise { + if (!navigator.onLine) { + return + } let data: FeatureCollection = undefined let lastUsed = 0 const start = new Date() diff --git a/src/UI/Base/LoginToggle.svelte b/src/UI/Base/LoginToggle.svelte index e3f751bbd7..d4fa4fc6f3 100644 --- a/src/UI/Base/LoginToggle.svelte +++ b/src/UI/Base/LoginToggle.svelte @@ -8,6 +8,7 @@ import { ImmutableStore, Store, UIEventSource } from "../../Logic/UIEventSource" import Invalid from "../../assets/svg/Invalid.svelte" import ArrowPath from "@babeard/svelte-heroicons/mini/ArrowPath" + import { IsOnline } from "../../Logic/Web/IsOnline" export let state: { osmConnection: OsmConnection @@ -17,10 +18,6 @@ * If set, 'loading' will act as if we are already logged in. */ export let ignoreLoading: boolean = false - /** - * Only show the 'successful' state, don't show loading or error messages - */ - export let silentFail: boolean = false /** * If set and the OSM-api fails, do _not_ show any error messages nor the successful state, just hide. * Will still show the "not-logged-in"-slot @@ -37,14 +34,21 @@ } const apiState: Store = state?.osmConnection?.apiIsOnline ?? new ImmutableStore("online") + const online = IsOnline.isOnline {#if $badge} - {#if !ignoreLoading && !silentFail && $loadingStatus === "loading"} + {#if !$online} + {#if !hiddenFail} +
+ Your device is offline +
+ {/if} + {:else if !ignoreLoading && !hiddenFail && $loadingStatus === "loading"} - {:else if !silentFail && ($loadingStatus === "error" || $apiState === "readonly" || $apiState === "offline")} + {:else if ($loadingStatus === "error" || $apiState === "readonly" || $apiState === "offline")} {#if !hiddenFail}
@@ -61,7 +65,7 @@ {/if} {:else if $loadingStatus === "logged-in"} - {:else if !silentFail && $loadingStatus === "not-attempted"} + {:else if $loadingStatus === "not-attempted"} {/if} {/if} diff --git a/src/UI/BigComponents/MenuDrawerIndex.svelte b/src/UI/BigComponents/MenuDrawerIndex.svelte index 2524e22d50..0c7c29d5a1 100644 --- a/src/UI/BigComponents/MenuDrawerIndex.svelte +++ b/src/UI/BigComponents/MenuDrawerIndex.svelte @@ -178,7 +178,7 @@ {/if} - + {#if state.favourites} diff --git a/src/UI/Image/AttributedImage.svelte b/src/UI/Image/AttributedImage.svelte index 6984966f4f..784dc066b3 100644 --- a/src/UI/Image/AttributedImage.svelte +++ b/src/UI/Image/AttributedImage.svelte @@ -23,6 +23,7 @@ import Panorama360 from "../../assets/svg/Panorama360.svelte" import { ExternalLinkIcon } from "@rgossiaux/svelte-heroicons/solid" import { ExclamationTriangle as TriangleOutline } from "@babeard/svelte-heroicons/outline/ExclamationTriangle" + import { IsOnline } from "../../Logic/Web/IsOnline" export let image: Partial & { id: string; url: string } @@ -105,6 +106,7 @@ state?.geocodedImages.set([f]) } + let online = IsOnline.isOnline let debug = state?.featureSwitches?.featureSwitchIsDebugging ?? new ImmutableStore(false) @@ -133,6 +135,7 @@
{#if error} + {#if $online}
{#if notFound}
@@ -156,6 +159,7 @@ {/if} {/if}
+ {/if} {:else if image.status !== undefined && image.status !== "ready" && image.status !== "hidden"}
diff --git a/src/UI/Image/ImageCarousel.svelte b/src/UI/Image/ImageCarousel.svelte index f32b1d4818..1b7f5562c3 100644 --- a/src/UI/Image/ImageCarousel.svelte +++ b/src/UI/Image/ImageCarousel.svelte @@ -7,6 +7,7 @@ import ThemeViewState from "../../Models/ThemeViewState" import LayerConfig from "../../Models/ThemeConfig/LayerConfig" import { GeoOperations } from "../../Logic/GeoOperations" + import { IsOnline } from "../../Logic/Web/IsOnline" export let images: Store export let state: ThemeViewState @@ -27,10 +28,13 @@ focus: true, }, } + let online = IsOnline.isOnline {#if $estimated > 0 && $images.length < 1} - + {#if !online} + + {/if} {:else}
diff --git a/src/UI/Popup/DeleteFlow/DeleteWizard.svelte b/src/UI/Popup/DeleteFlow/DeleteWizard.svelte index 880027a7fb..11dc23a4fb 100644 --- a/src/UI/Popup/DeleteFlow/DeleteWizard.svelte +++ b/src/UI/Popup/DeleteFlow/DeleteWizard.svelte @@ -98,7 +98,7 @@ } - + {#if $canBeDeleted === false && !hasSoftDeletion}
diff --git a/src/UI/Popup/MoveWizard.svelte b/src/UI/Popup/MoveWizard.svelte index f6c61914d7..88f2b5ca29 100644 --- a/src/UI/Popup/MoveWizard.svelte +++ b/src/UI/Popup/MoveWizard.svelte @@ -87,7 +87,7 @@ {#if moveWizardState.reasons.length > 0} - + {#if $notAllowed}