midgard/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

UX: improve display if OSM.org is down

Browse source
This commit is contained in:
Pieter Vander Vennet 2024-12-15 22:39:22 +01:00
parent d4dc5f3548
commit a55bd55b46
6 changed files with 101 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

106
src/Logic/Osm/OsmConnection.ts
View file

@ -40,19 +40,49 @@ export default class UserDetails {
export type OsmServiceState = "online" | "readonly" | "offline" | "unknown" | "unreachable"
interface CapabilityResult {
"version": "0.6" | string,
"generator": "OpenStreetMap server" | string,
"copyright": "OpenStreetMap and contributors" | string,
"attribution": "http://www.openstreetmap.org/copyright" | string,
"license": "http://opendatacommons.org/licenses/odbl/1-0/" | string,
"api": {
"version": { "minimum": "0.6", "maximum": "0.6" },
"area": { "maximum": 0.25 | number },
"note_area": { "maximum": 25 | number },
"tracepoints": { "per_page": 5000 | number },
"waynodes": { "maximum": 2000 | number },
"relationmembers": { "maximum": 32000 | number },
"changesets": { "maximum_elements": 10000 | number,
"default_query_limit": 100 | number,
"maximum_query_limit": 100 |number},
"notes": { "default_query_limit": 100 | number, "maximum_query_limit": 10000 |number},
"timeout": { "seconds": 300 |number},
"status": {
"database": OsmServiceState,
"api": OsmServiceState,
"gpx": OsmServiceState }
},
"policy": {
"imagery": {
"blacklist":{regex: string}[]
}
}
}
export class OsmConnection {
public auth: osmAuth
public userDetails: UIEventSource<UserDetails>
public isLoggedIn: Store<boolean>
public gpxServiceIsOnline: UIEventSource<OsmServiceState> = new UIEventSource<OsmServiceState>(
"unknown"
"unknown",
)
public apiIsOnline: UIEventSource<OsmServiceState> = new UIEventSource<OsmServiceState>(
"unknown"
"unknown",
)
public loadingStatus = new UIEventSource<"not-attempted" | "loading" | "error" | "logged-in">(
"not-attempted"
"not-attempted",
)
public preferencesHandler: OsmPreferences
public readonly _oauth_config: AuthConfig
@ -96,7 +126,7 @@ export class OsmConnection {
this.userDetails = new UIEventSource<UserDetails>(
new UserDetails(this._oauth_config.url),
"userDetails"
"userDetails",
)
if (options.fakeUser) {
const ud = this.userDetails.data
@ -117,7 +147,7 @@ export class OsmConnection {
(user) =>
user.loggedIn &&
(this.apiIsOnline.data === "unknown" || this.apiIsOnline.data === "online"),
[this.apiIsOnline]
[this.apiIsOnline],
)
this.isLoggedIn.addCallback((isLoggedIn) => {
if (this.userDetails.data.loggedIn == false && isLoggedIn == true) {
@ -160,7 +190,7 @@ export class OsmConnection {
defaultValue: string = undefined,
options?: {
prefix?: string
}
},
): UIEventSource<T | undefined> {
const prefix = options?.prefix ?? "mapcomplete-"
return <UIEventSource<T>>this.preferencesHandler.getPreference(key, defaultValue, prefix)
@ -169,7 +199,7 @@ export class OsmConnection {
public getPreference<T extends string = string>(
key: string,
defaultValue: string = undefined,
prefix: string = "mapcomplete-"
prefix: string = "mapcomplete-",
): UIEventSource<T | undefined> {
return <UIEventSource<T>>this.preferencesHandler.getPreference(key, defaultValue, prefix)
}
@ -213,7 +243,7 @@ export class OsmConnection {
this.updateAuthObject()
LocalStorageSource.get("location_before_login").setData(
Utils.runningFromConsole ? undefined : window.location.href
Utils.runningFromConsole ? undefined : window.location.href,
)
this.auth.xhr(
{
@ -251,13 +281,13 @@ export class OsmConnection {
data.account_created = userInfo.getAttribute("account_created")
data.uid = Number(userInfo.getAttribute("id"))
data.languages = Array.from(
userInfo.getElementsByTagName("languages")[0].getElementsByTagName("lang")
userInfo.getElementsByTagName("languages")[0].getElementsByTagName("lang"),
).map((l) => l.textContent)
data.csCount = Number.parseInt(
userInfo.getElementsByTagName("changesets")[0].getAttribute("count") ?? "0"
userInfo.getElementsByTagName("changesets")[0].getAttribute("count") ?? "0",
)
data.tracesCount = Number.parseInt(
userInfo.getElementsByTagName("traces")[0].getAttribute("count") ?? "0"
userInfo.getElementsByTagName("traces")[0].getAttribute("count") ?? "0",
)
data.img = undefined
@ -289,7 +319,7 @@ export class OsmConnection {
action(this.userDetails.data)
}
this._onLoggedIn = []
}
},
)
}
@ -307,7 +337,7 @@ export class OsmConnection {
method: "GET" | "POST" | "PUT" | "DELETE",
header?: Record<string, string>,
content?: string,
allowAnonymous: boolean = false
allowAnonymous: boolean = false,
): Promise<string> {
const connection: osmAuth = this.auth
if (allowAnonymous && !this.auth.authenticated()) {
@ -315,7 +345,7 @@ export class OsmConnection {
`${this.Backend()}/api/0.6/${path}`,
header,
method,
content
content,
)
if (possibleResult["content"]) {
return possibleResult["content"]
@ -338,7 +368,7 @@ export class OsmConnection {
} else {
ok(response)
}
}
},
)
})
}
@ -347,7 +377,7 @@ export class OsmConnection {
path: string,
content?: string,
header?: Record<string, string>,
allowAnonymous: boolean = false
allowAnonymous: boolean = false,
): Promise<T> {
return <T>await this.interact(path, "POST", header, content, allowAnonymous)
}
@ -355,7 +385,7 @@ export class OsmConnection {
public async put<T extends string>(
path: string,
content?: string,
header?: Record<string, string>
header?: Record<string, string>,
): Promise<T> {
return <T>await this.interact(path, "PUT", header, content)
}
@ -363,7 +393,7 @@ export class OsmConnection {
public async get(
path: string,
header?: Record<string, string>,
allowAnonymous: boolean = false
allowAnonymous: boolean = false,
): Promise<string> {
return await this.interact(path, "GET", header, undefined, allowAnonymous)
}
@ -402,7 +432,7 @@ export class OsmConnection {
return new Promise<{ id: number }>((ok) => {
window.setTimeout(
() => ok({ id: Math.floor(Math.random() * 1000) }),
Math.random() * 5000
Math.random() * 5000,
)
})
}
@ -414,7 +444,7 @@ export class OsmConnection {
{
"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
},
true
true,
)
const parsed = JSON.parse(response)
console.log("Got result:", parsed)
@ -437,14 +467,14 @@ export class OsmConnection {
* Note: these are called 'tags' on the wiki, but I opted to name them 'labels' instead as they aren't "key=value" tags, but just words.
*/
labels: string[]
}
},
): Promise<{ id: number }> {
if (this._dryRun.data) {
console.warn("Dryrun enabled - not actually uploading GPX ", gpx)
return new Promise<{ id: number }>((ok) => {
window.setTimeout(
() => ok({ id: Math.floor(Math.random() * 1000) }),
Math.random() * 5000
Math.random() * 5000,
)
})
}
@ -461,9 +491,9 @@ export class OsmConnection {
}
const extras = {
file:
'; filename="' +
"; filename=\"" +
(options.filename ?? "gpx_track_mapcomplete_" + new Date().toISOString()) +
'"\r\nContent-Type: application/gpx+xml',
"\"\r\nContent-Type: application/gpx+xml",
}
const boundary = "987654"
@ -471,7 +501,7 @@ export class OsmConnection {
let body = ""
for (const key in contents) {
body += "--" + boundary + "\r\n"
body += 'Content-Disposition: form-data; name="' + key + '"'
body += "Content-Disposition: form-data; name=\"" + key + "\""
if (extras[key] !== undefined) {
body += extras[key]
}
@ -511,7 +541,7 @@ export class OsmConnection {
} else {
ok()
}
}
},
)
})
}
@ -600,20 +630,22 @@ export class OsmConnection {
return parsed
}
private async FetchCapabilities(): Promise<{ api: OsmServiceState; gpx: OsmServiceState }> {
private async FetchCapabilities(): Promise<{ api: OsmServiceState; gpx: OsmServiceState; database: OsmServiceState }> {
if (Utils.runningFromConsole) {
return { api: "online", gpx: "online" }
return { api: "online", gpx: "online" , database: "online"}
}
const result = await Utils.downloadAdvanced(this.Backend() + "/api/0.6/capabilities")
if (result["content"] === undefined) {
try{
const result = await Utils.downloadJson<CapabilityResult>(this.Backend() + "/api/0.6/capabilities.json")
if (result?.api?.status === undefined) {
console.log("Something went wrong:", result)
return { api: "unreachable", gpx: "unreachable" }
return { api: "unreachable", gpx: "unreachable" , database: "unreachable"}
}
return result.api.status
}catch (e) {
console.error("Could not fetch capabilities")
return { api: "offline", gpx: "offline" , database: "online"}
}
const xmlRaw = result["content"]
const parsed = new DOMParser().parseFromString(xmlRaw, "text/xml")
const statusEl = parsed.getElementsByTagName("status")[0]
const api = <OsmServiceState>statusEl.getAttribute("api")
const gpx = <OsmServiceState>statusEl.getAttribute("gpx")
return { api, gpx }
}
}

12
src/UI/Base/LoginToggle.svelte
View file

@ -5,7 +5,7 @@
import { Translation } from "../i18n/Translation"
import Translations from "../i18n/Translations"
import Tr from "./Tr.svelte"
import { ImmutableStore, UIEventSource } from "../../Logic/UIEventSource"
import { ImmutableStore, Store, UIEventSource } from "../../Logic/UIEventSource"
import Invalid from "../../assets/svg/Invalid.svelte"
import ArrowPath from "@babeard/svelte-heroicons/mini/ArrowPath"
@ -21,6 +21,10 @@
* 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
*/
export let hiddenFail: boolean = false
let loadingStatus = state?.osmConnection?.loadingStatus ?? new ImmutableStore("logged-in")
let badge = state?.featureSwitches?.featureSwitchEnableLogin ?? new ImmutableStore(true)
const t = Translations.t.general
@ -30,7 +34,7 @@
unknown: t.loginFailedUnreachableMode,
readonly: t.loginFailedReadonlyMode,
}
const apiState =
const apiState: Store<string> =
state?.osmConnection?.apiIsOnline ?? new ImmutableStore<OsmServiceState>("online")
</script>
@ -39,7 +43,8 @@
<slot name="loading">
<Loading />
</slot>
{:else if !silentFail && $loadingStatus === "error"}
{:else if !silentFail && ($loadingStatus === "error" || $apiState === "readonly" || $apiState === "offline")}
{#if !hiddenFail}
<slot name="error">
<div class="alert flex flex-col items-center">
<div class="max-w-64 flex items-center">
@ -52,6 +57,7 @@
</button>
</div>
</slot>
{/if}
{:else if $loadingStatus === "logged-in"}
<slot />
{:else if !silentFail && $loadingStatus === "not-attempted"}

4
src/UI/BigComponents/MenuDrawer.svelte
View file

@ -124,7 +124,7 @@
</svelte:fragment>
<!-- All shown components are set by 'usersettings.json', which happily uses some special visualisations created specifically for it -->
<LoginToggle {state}>
<LoginToggle {state} silentFail>
<div class="flex flex-col" slot="not-logged-in">
<LanguagePicker availableLanguages={theme.language} />
<Tr cls="alert" t={Translations.t.userinfo.notLoggedIn} />
@ -144,7 +144,7 @@
</LoginToggle>
</Page>
<LoginToggle {state}>
<LoginToggle {state} silentFail>
<Page {onlyLink} shown={pg.favourites}>
<svelte:fragment slot="header">
<HeartIcon />

2
src/UI/Popup/MarkAsFavouriteMini.svelte
View file

@ -24,7 +24,7 @@
}
</script>
<LoginToggle ignoreLoading={true} {state}>
<LoginToggle ignoreLoading={true} hiddenFail {state}>
{#if $isFavourite}
<button
class="soft no-image-background m-0 h-8 w-8 p-0"

4
src/UI/Popup/TagRendering/TagRenderingEditable.svelte
View file

@ -85,6 +85,8 @@
}
let answerId = "answer-" + Utils.randomString(5)
let debug = state?.featureSwitches?.featureSwitchIsDebugging ?? new ImmutableStore(false)
let apiState: Store<string> = state?.osmConnection?.apiIsOnline ?? new ImmutableStore("online")
</script>
<div bind:this={htmlElem} class={twMerge(clss, "tr-" + config.id)}>
@ -126,7 +128,7 @@
{layer}
extraClasses="my-2"
/>
{#if !editingEnabled || $editingEnabled}
{#if (!editingEnabled || $editingEnabled) && $apiState !== "readonly" && $apiState !== "offline"}
<EditButton
arialabel={config.editButtonAriaLabel}
ariaLabelledBy={answerId}

4
src/UI/Popup/TagRendering/TagRenderingQuestion.svelte
View file

@ -355,9 +355,11 @@
disabledInTheme.set(newList)
menuIsOpened.set(false)
}
let apiState = state.osmConnection.apiIsOnline
</script>
{#if question !== undefined}
{#if question !== undefined && $apiState !== "readonly" && $apiState !== "offline"}
<div class={clss}>
{#if layer.isNormal()}
<LoginToggle {state}>