midgard/mapcomplete
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Linked data loader: prettier UI, some bugfixes

Browse source
This commit is contained in:
Pieter Vander Vennet 2024-03-01 00:50:19 +01:00
parent 13506a0e59
commit da1eca797c
4 changed files with 208 additions and 139 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

82
src/UI/Comparison/ComparisonAction.svelte
View file

@ -6,7 +6,10 @@
import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
import ChangeTagAction from "../../Logic/Osm/Actions/ChangeTagAction"
import { Tag } from "../../Logic/Tags/Tag"
import TagRenderingAnswer from "../Popup/TagRendering/TagRenderingAnswer.svelte"
import Loading from "../Base/Loading.svelte"
import Tr from "../Base/Tr.svelte"
import Translations from "../i18n/Translations"
export let key: string
export let externalProperties: Record<string, string>
@ -38,34 +41,77 @@
await state.changes.applyChanges(await change.CreateChangeDescriptions())
currentStep = "done"
}
let _country = $tags["_country"]
let mockPropertiesOsm = { id: feature.properties.id, [key]: $tags[key], _country }
let mockPropertiesExternal = { id: feature.properties.id, [key]: externalProperties[key], _country }
let trsWithKeys = layer.tagRenderings.filter(tr => {
const keys: string[] = [].concat(...tr.usedTags().map(t => t.usedKeys()))
return keys.indexOf(key) >= 0
})
let renderingBoth = undefined // trsWithKeys.find(tr => tr.IsKnown(mockPropertiesOsm) && tr.IsKnown(mockPropertiesExternal))
let renderingExternal = undefined // renderingBoth ?? trsWithKeys.find(tr => tr.IsKnown(mockPropertiesExternal))
let onOverwrite = false
const t = Translations.t.external
</script>
<tr>
<td><b>{key}</b></td>
<div>
{#if $tags[key]}
{$tags[key]}
{/if}
<td>
{#if externalProperties[key].startsWith("http")}
<a href={externalProperties[key]} target="_blank">
{externalProperties[key]}
</a>
<div class="py-1 px-2 interactive flex w-full justify-between">
{#if renderingExternal}
<TagRenderingAnswer tags={new UIEventSource(mockPropertiesExternal)} selectedElement={feature}
config={renderingExternal}
{layer} {state} />
{:else}
{externalProperties[key]}
<div class="flex gap-x-1 items-center">
<b>{key}</b>{externalProperties[key]}
</div>
{/if}
</td>
{#if !readonly}
<td>
{#if currentStep === "init"}
<button class="small" on:click={() => apply(key)}>Apply</button>
<button class="small" on:click={() => apply(key)}
on:mouseover={() => onOverwrite = true}
on:focus={() => onOverwrite = true}
on:blur={() => onOverwrite = false}
on:mouseout={() => onOverwrite = false }
>
{#if $tags[key]}
<Tr t={t.overwrite}/>
{:else}
<Tr t={t.apply}/>
{/if}
</button>
{:else if currentStep === "applying"}
<Loading />
{:else if currentStep === "done"}
<div class="thanks">Done</div>
<div class="thanks">
<Tr t={t.done}/>
</div>
{:else}
<div class="alert">Error</div>
<div class="alert">
<Tr t={t.error}/>
</div>
{/if}
</td>
{/if}
</tr>
</div>
{#if $tags[key]}
<div class:glowing-shadow={onOverwrite}>
<span class="subtle">
<Tr t={t.currentInOsmIs}/>
</span>
{#if renderingBoth}
<TagRenderingAnswer tags={new UIEventSource(mockPropertiesOsm)} selectedElement={feature} config={renderingBoth}
{layer} {state} />
{:else}
<div class="flex gap-x-2 items-center">
<b>{key}</b> {$tags[key]}
</div>
{/if}
</div>
{/if}
</div>

67
src/UI/Comparison/ComparisonTable.svelte
View file

@ -12,9 +12,12 @@
import { And } from "../../Logic/Tags/And"
import Loading from "../Base/Loading.svelte"
import AttributedImage from "../Image/AttributedImage.svelte"
import Translations from "../i18n/Translations"
import Tr from "../Base/Tr.svelte"
export let osmProperties: Record<string, string>
export let externalProperties: Record<string, string>
export let sourceUrl: string
export let tags: UIEventSource<OsmTags>
export let state: SpecialVisualizationState
@ -23,13 +26,15 @@
export let readonly = false
const t = Translations.t.external
let externalKeys: string[] = Object.keys(externalProperties).sort()
const imageKeyRegex = /image|image:[0-9]+/
let knownImages = new Set(
Object.keys(osmProperties)
.filter((k) => k.match(imageKeyRegex))
.map((k) => osmProperties[k])
.map((k) => osmProperties[k]),
)
let unknownImages = externalKeys
.filter((k) => k.match(imageKeyRegex))
@ -40,10 +45,11 @@
let missing = propertyKeysExternal.filter((k) => osmProperties[k] === undefined && typeof externalProperties[k] === "string")
let same = propertyKeysExternal.filter((key) => osmProperties[key] === externalProperties[key])
let different = propertyKeysExternal.filter(
(key) => osmProperties[key] !== undefined && osmProperties[key] !== externalProperties[key] && typeof externalProperties[key] === "string"
(key) => osmProperties[key] !== undefined && osmProperties[key] !== externalProperties[key] && typeof externalProperties[key] === "string",
)
let currentStep: "init" | "applying_all" | "all_applied" = "init"
let applyAllHovered = false
async function applyAllMissing() {
currentStep = "applying_all"
@ -56,49 +62,55 @@
currentStep = "all_applied"
}
</script>
{#if unknownImages.length === 0 && missing.length === 0 && different.length === 0}
<div class="thanks m-0 flex items-center gap-x-2 px-2">
<Party class="h-8 w-8" />
<Tr t={t.allIncluded} />
</div>
{:else}
<div class="low-interaction p-1 border-interactive">
<Tr t={t.loadedFrom.Subs({url: sourceUrl, source: sourceUrl})} />
<h3>
<Tr t={t.conflicting.title} />
</h3>
<div class="flex flex-col gap-y-8">
<Tr t={t.conflicting.intro} />
{#if different.length > 0}
<h3>Conflicting items</h3>
<table>
<tr>
<th>Key</th>
<th>OSM</th>
<th>External</th>
</tr>
{#each different as key}
<div class="mx-2 rounded-2xl">
<ComparisonAction {key} {state} {tags} {externalProperties} {layer} {feature} {readonly} />
</div>
{/each}
</table>
{/if}
{#if missing.length > 0}
{#if currentStep === "init"}
<table class="w-full">
<tr>
<th>Key</th>
<th>External</th>
</tr>
{#each missing as key}
<div class:glowing-shadow={applyAllHovered} class="mx-2 rounded-2xl">
<ComparisonAction {key} {state} {tags} {externalProperties} {layer} {feature} {readonly} />
</div>
{/each}
</table>
{#if !readonly}
<button on:click={() => applyAllMissing()}>Apply all missing values</button>
{#if !readonly && missing.length > 1}
<button on:click={() => applyAllMissing()}
on:mouseover={() => applyAllHovered = true}
on:focus={() => applyAllHovered = true}
on:blur={() => applyAllHovered = false}
on:mouseout={() => applyAllHovered = false }
>
<Tr t={t.applyAll} />
</button>
{/if}
{:else if currentStep === "applying_all"}
<Loading>Applying all missing values</Loading>
<Loading/>
{:else if currentStep === "all_applied"}
<div class="thanks">All values are applied</div>
<div class="thanks">
<Tr t={t.allAreApplied} />
</div>
{/if}
{/if}
{#if unknownImages.length === 0 && missing.length === 0 && different.length === 0}
<div class="thanks m-0 flex items-center gap-x-2 px-2">
<Party class="h-8 w-8" />
All data from Velopark is also included into OpenStreetMap
</div>
{/if}
{#if unknownImages.length > 0}
{#if readonly}
@ -132,3 +144,6 @@
{/each}
{/if}
{/if}
</div>
{/if}

14
src/UI/Comparison/ComparisonTool.svelte
View file

@ -10,6 +10,8 @@
import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
import type { Feature } from "geojson"
import type { OsmTags } from "../../Models/OsmFeature"
import Translations from "../i18n/Translations"
import Tr from "../Base/Tr.svelte"
export let externalData: Store<{ success: {content: Record<string, string> } } | { error: string } | undefined | null /* null if no URL is found, undefined if loading*/>
export let state: SpecialVisualizationState
@ -17,14 +19,17 @@
export let layer: LayerConfig
export let feature: Feature
export let readonly = false
export let sourceUrl: Store<string>
</script>
{#if $externalData === null}
{#if !$sourceUrl}
<!-- empty block -->
{:else if $externalData === undefined}
<Loading>{$externalData}</Loading>
<Loading/>
{:else if $externalData["error"] !== undefined}
<div class="alert">
Something went wrong: {$externalData["error"]}
<div class="alert flex">
<Tr t={Translations.t.general.error}/>
{$externalData["error"]}
</div>
{:else if $externalData["success"] !== undefined}
<ComparisonTable
@ -35,5 +40,6 @@
{layer}
{tags}
{readonly}
sourceUrl={$sourceUrl}
/>
{/if}

2
src/UI/SpecialVisualizations.ts
View file

@ -1743,6 +1743,7 @@ export default class SpecialVisualizations {
}
return ({ url: tags[key], country: tags._country })
})
const sourceUrl: Store<string | undefined> = url.mapD(url => url.url)
const externalData: Store<{ success: { content: any } } | {
error: string
} | undefined | null> = url.bindD(({
@ -1759,6 +1760,7 @@ export default class SpecialVisualizations {
tags,
layer,
externalData,
sourceUrl
}), undefined, url.map(url => !!url),
)
},