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

UX: add indicicator in settings of pending changes, add button to clear the selected changes

Browse source
This commit is contained in:
Pieter Vander Vennet 2024-08-02 13:31:45 +02:00
parent 74b2d38a14
commit 0a7d48de5b
5 changed files with 58 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

37
src/UI/BigComponents/PendingChangesIndicator.svelte
View file

@ -5,13 +5,15 @@
import Loading from "../Base/Loading.svelte"
import Translations from "../i18n/Translations"
import Tr from "../Base/Tr.svelte"
import { TagUtils } from "../../Logic/Tags/TagUtils"
export let state: SpecialVisualizationState
export let compact: boolean = true
const changes: Changes = state.changes
const isUploading: Store<boolean> = changes.isUploading
const pendingChangesCount: Store<number> = changes.pendingChanges.map((ls) => ls.length)
const errors = changes.errors
const pending = changes.pendingChanges
</script>
<div
@ -22,16 +24,43 @@
<Loading>
<Tr cls="thx" t={Translations.t.general.uploadingChanges} />
</Loading>
{:else if $pendingChangesCount === 1}
{:else if $pending.length === 1}
<Tr cls="alert" t={Translations.t.general.uploadPendingSingle} />
{:else if $pendingChangesCount > 1}
{:else if $pending.length > 1}
<Tr
cls="alert"
t={Translations.t.general.uploadPending.Subs({ count: $pendingChangesCount })}
t={Translations.t.general.uploadPending.Subs({ count: $pending.length })}
/>
{/if}
{#each $errors as error}
<Tr cls="alert" t={Translations.t.general.uploadError.Subs({ error })} />
{/each}
{#if !compact && $pending.length > 0}
<button on:click={() => state.changes.pendingChanges.set([])}>
<Tr t={Translations.t.general.clearPendingChanges} />
</button>
<ul>
{#each $pending as pending}
<li>
{#if pending.changes !== undefined}
Create {pending.type}/{pending.id} {JSON.stringify(TagUtils.KVObjtoProperties(pending.tags))}
{:else}
Modify {pending.type}/{pending.id} {JSON.stringify(pending.tags)}
{/if}
{#if pending.type === "way" && pending.changes?.nodes}
{pending.changes.nodes.join(" ")}
{/if}
</li>
{/each}
</ul>
{/if}
</div>