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

UI: don't break embedded titles over multiple lines; add optional question to the review form

Browse source
This commit is contained in:
Pieter Vander Vennet 2025-01-08 18:04:32 +01:00
parent 551235a185
commit 3a230b13ea
3 changed files with 163 additions and 138 deletions
Download patch file Download diff file Expand all files Collapse all files

27
src/UI/Popup/Title.svelte Normal file
View file

@ -0,0 +1,27 @@
<script lang="ts">
import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
import type { SpecialVisualizationState } from "../SpecialVisualization"
import { UIEventSource } from "../../Logic/UIEventSource"
import type { Feature } from "geojson"
import SpecialTranslation from "./TagRendering/SpecialTranslation.svelte"
/**
* The 'title'-special visualisation
* Mainly used to embed in other special renderings
*/
export let state: SpecialVisualizationState
export let layer: LayerConfig
export let tags: UIEventSource<Record<string, string>>
export let feature: Feature
let theme = state.theme
let title = tags.mapD(tags => layer?.title?.GetRenderValue(tags))
</script>
{#if theme === undefined}
_feature title_ <!-- Probably doc generation -->
{/if}
{#if $title}
<SpecialTranslation t={$title} {tags} {state} {feature} {layer} />
{/if}

6
src/UI/Reviews/ReviewForm.svelte
View file

@ -20,6 +20,7 @@
export let tags: UIEventSource<Record<string, string>> export let tags: UIEventSource<Record<string, string>>
export let feature: Feature export let feature: Feature
export let layer: LayerConfig export let layer: LayerConfig
export let question: string = undefined
/** /**
* The form to create a new review. * The form to create a new review.
* This is multi-stepped. * This is multi-stepped.
@ -70,7 +71,6 @@
_state = "done" _state = "done"
} }
</script> </script>
{#if uploadFailed} {#if uploadFailed}
<div class="alert flex"> <div class="alert flex">
<ExclamationTriangle class="h-6 w-6" /> <ExclamationTriangle class="h-6 w-6" />
@ -86,7 +86,11 @@
{:else} {:else}
<div class="interactive border-interactive p-1"> <div class="interactive border-interactive p-1">
<div class="font-bold"> <div class="font-bold">
{#if question}
{question}
{:else}
<SpecialTranslation {feature} {layer} {state} t={Translations.t.reviews.question} {tags} /> <SpecialTranslation {feature} {layer} {state} t={Translations.t.reviews.question} {tags} />
{/if}
</div> </div>
<StarsBar <StarsBar
on:click={(e) => { on:click={(e) => {

246
src/UI/SpecialVisualizations.ts
View file

@ -2,6 +2,7 @@ import Combine from "./Base/Combine"
import { FixedUiElement } from "./Base/FixedUiElement" import { FixedUiElement } from "./Base/FixedUiElement"
import BaseUIElement from "./BaseUIElement" import BaseUIElement from "./BaseUIElement"
import Title from "./Base/Title" import Title from "./Base/Title"
import { default as FeatureTitle } from "./Popup/Title.svelte"
import { import {
RenderingSpecification, RenderingSpecification,
SpecialVisualization, SpecialVisualization,
@ -125,7 +126,7 @@ class NearbyImageVis implements SpecialVisualization {
tags: UIEventSource<Record<string, string>>, tags: UIEventSource<Record<string, string>>,
args: string[], args: string[],
feature: Feature, feature: Feature,
layer: LayerConfig layer: LayerConfig,
): SvelteUIElement { ): SvelteUIElement {
const isOpen = args[0] === "open" const isOpen = args[0] === "open"
const readonly = args[1] === "readonly" || args[1] === "yes" const readonly = args[1] === "readonly" || args[1] === "yes"
@ -192,7 +193,7 @@ class StealViz implements SpecialVisualization {
selectedElement: otherFeature, selectedElement: otherFeature,
state, state,
layer, layer,
}) }),
) )
} }
if (elements.length === 1) { if (elements.length === 1) {
@ -200,8 +201,8 @@ class StealViz implements SpecialVisualization {
} }
return new Combine(elements).SetClass("flex flex-col") return new Combine(elements).SetClass("flex flex-col")
}, },
[state.indexedFeatures.featuresById] [state.indexedFeatures.featuresById],
) ),
) )
} }
@ -253,11 +254,11 @@ class CloseNoteViz implements SpecialVisualization {
public constr( public constr(
state: SpecialVisualizationState, state: SpecialVisualizationState,
tags: UIEventSource<Record<string, string>>, tags: UIEventSource<Record<string, string>>,
args: string[] args: string[],
): SvelteUIElement { ): SvelteUIElement {
const { text, icon, idkey, comment, minZoom, zoomButton } = Utils.ParseVisArgs( const { text, icon, idkey, comment, minZoom, zoomButton } = Utils.ParseVisArgs(
this.args, this.args,
args args,
) )
return new SvelteUIElement(CloseNoteButton, { return new SvelteUIElement(CloseNoteButton, {
@ -298,7 +299,7 @@ export class QuestionViz implements SpecialVisualization {
tags: UIEventSource<Record<string, string>>, tags: UIEventSource<Record<string, string>>,
args: string[], args: string[],
feature: Feature, feature: Feature,
layer: LayerConfig layer: LayerConfig,
): SvelteUIElement { ): SvelteUIElement {
const labels = args[0] const labels = args[0]
?.split(";") ?.split(";")
@ -330,7 +331,7 @@ export default class SpecialVisualizations {
for (const specialVisualization of SpecialVisualizations.specialVisualizations) { for (const specialVisualization of SpecialVisualizations.specialVisualizations) {
SpecialVisualizations.specialVisualisationsDict.set( SpecialVisualizations.specialVisualisationsDict.set(
specialVisualization.funcName, specialVisualization.funcName,
specialVisualization specialVisualization,
) )
} }
} }
@ -357,7 +358,7 @@ export default class SpecialVisualizations {
defaultArg = "_empty string_" defaultArg = "_empty string_"
} }
return [arg.name, defaultArg, arg.doc] return [arg.name, defaultArg, arg.doc]
}) }),
) )
: undefined, : undefined,
"#### Example usage of " + viz.funcName, "#### Example usage of " + viz.funcName,
@ -367,18 +368,18 @@ export default class SpecialVisualizations {
public static constructSpecification( public static constructSpecification(
template: string, template: string,
extraMappings: SpecialVisualization[] = [] extraMappings: SpecialVisualization[] = [],
): RenderingSpecification[] { ): RenderingSpecification[] {
return SpecialVisualisationUtils.constructSpecification( return SpecialVisualisationUtils.constructSpecification(
template, template,
SpecialVisualizations.specialVisualisationsDict, SpecialVisualizations.specialVisualisationsDict,
extraMappings extraMappings,
) )
} }
public static HelpMessage(): string { public static HelpMessage(): string {
const helpTexts: string[] = SpecialVisualizations.specialVisualizations.map((viz) => const helpTexts: string[] = SpecialVisualizations.specialVisualizations.map((viz) =>
SpecialVisualizations.DocumentationFor(viz) SpecialVisualizations.DocumentationFor(viz),
) )
const firstPart = new Combine([ const firstPart = new Combine([
@ -411,10 +412,10 @@ export default class SpecialVisualizations {
}, },
}, },
null, null,
" " " ",
) ),
).SetClass("code"), ).SetClass("code"),
'In other words: use `{ "before": ..., "after": ..., "special": {"type": ..., "argname": ...argvalue...}`. The args are in the `special` block; an argvalue can be a string, a translation or another value. (Refer to class `RewriteSpecial` in case of problems)', "In other words: use `{ \"before\": ..., \"after\": ..., \"special\": {\"type\": ..., \"argname\": ...argvalue...}`. The args are in the `special` block; an argvalue can be a string, a translation or another value. (Refer to class `RewriteSpecial` in case of problems)",
]) ])
.SetClass("flex flex-col") .SetClass("flex flex-col")
.AsMarkdown() .AsMarkdown()
@ -452,10 +453,10 @@ export default class SpecialVisualizations {
assignTo: state.userRelatedState.language, assignTo: state.userRelatedState.language,
availableLanguages: languages, availableLanguages: languages,
preferredLanguages: state.osmConnection.userDetails.map( preferredLanguages: state.osmConnection.userDetails.map(
(ud) => ud.languages (ud) => ud.languages,
), ),
}) })
}) }),
) )
}, },
}, },
@ -494,7 +495,7 @@ export default class SpecialVisualizations {
state: SpecialVisualizationState, state: SpecialVisualizationState,
tagSource: UIEventSource<Record<string, string>>, tagSource: UIEventSource<Record<string, string>>,
args: string[], args: string[],
feature: Feature feature: Feature,
): SvelteUIElement { ): SvelteUIElement {
return new SvelteUIElement(MinimapViz, { state, args, feature, tagSource }) return new SvelteUIElement(MinimapViz, { state, args, feature, tagSource })
}, },
@ -506,7 +507,7 @@ export default class SpecialVisualizations {
constr( constr(
state: SpecialVisualizationState, state: SpecialVisualizationState,
tagSource: UIEventSource<Record<string, string>> tagSource: UIEventSource<Record<string, string>>,
): BaseUIElement { ): BaseUIElement {
return new VariableUiElement( return new VariableUiElement(
tagSource tagSource
@ -516,7 +517,7 @@ export default class SpecialVisualizations {
return new SvelteUIElement(SplitRoadWizard, { id, state }) return new SvelteUIElement(SplitRoadWizard, { id, state })
} }
return undefined return undefined
}) }),
) )
}, },
}, },
@ -530,7 +531,7 @@ export default class SpecialVisualizations {
tagSource: UIEventSource<Record<string, string>>, tagSource: UIEventSource<Record<string, string>>,
argument: string[], argument: string[],
feature: Feature, feature: Feature,
layer: LayerConfig layer: LayerConfig,
): BaseUIElement { ): BaseUIElement {
if (feature.geometry.type !== "Point") { if (feature.geometry.type !== "Point") {
return undefined return undefined
@ -553,7 +554,7 @@ export default class SpecialVisualizations {
tagSource: UIEventSource<Record<string, string>>, tagSource: UIEventSource<Record<string, string>>,
argument: string[], argument: string[],
feature: Feature, feature: Feature,
layer: LayerConfig layer: LayerConfig,
): BaseUIElement { ): BaseUIElement {
if (!layer.deletion) { if (!layer.deletion) {
return undefined return undefined
@ -579,7 +580,7 @@ export default class SpecialVisualizations {
tags: UIEventSource<Record<string, string>>, tags: UIEventSource<Record<string, string>>,
argument: string[], argument: string[],
feature: Feature, feature: Feature,
layer: LayerConfig layer: LayerConfig,
) { ) {
if (feature.geometry.type !== "LineString") { if (feature.geometry.type !== "LineString") {
return undefined return undefined
@ -611,7 +612,7 @@ export default class SpecialVisualizations {
state: SpecialVisualizationState, state: SpecialVisualizationState,
tagSource: UIEventSource<Record<string, string>>, tagSource: UIEventSource<Record<string, string>>,
argument: string[], argument: string[],
feature: Feature feature: Feature,
): BaseUIElement { ): BaseUIElement {
const [lon, lat] = GeoOperations.centerpointCoordinates(feature) const [lon, lat] = GeoOperations.centerpointCoordinates(feature)
return new SvelteUIElement(CreateNewNote, { return new SvelteUIElement(CreateNewNote, {
@ -674,7 +675,7 @@ export default class SpecialVisualizations {
.map((tags) => tags[args[0]]) .map((tags) => tags[args[0]])
.map((wikidata) => { .map((wikidata) => {
wikidata = Utils.NoEmpty( wikidata = Utils.NoEmpty(
wikidata?.split(";")?.map((wd) => wd.trim()) ?? [] wikidata?.split(";")?.map((wd) => wd.trim()) ?? [],
)[0] )[0]
const entry = Wikidata.LoadWikidataEntry(wikidata) const entry = Wikidata.LoadWikidataEntry(wikidata)
return new VariableUiElement( return new VariableUiElement(
@ -684,9 +685,9 @@ export default class SpecialVisualizations {
} }
const response = <WikidataResponse>e["success"] const response = <WikidataResponse>e["success"]
return Translation.fromMap(response.labels) return Translation.fromMap(response.labels)
}) }),
) )
}) }),
), ),
}, },
new MapillaryLinkVis(), new MapillaryLinkVis(),
@ -700,7 +701,7 @@ export default class SpecialVisualizations {
tags: UIEventSource<Record<string, string>>, tags: UIEventSource<Record<string, string>>,
_, _,
__, __,
layer: LayerConfig layer: LayerConfig,
) => new SvelteUIElement(AllTagsPanel, { tags, layer }), ) => new SvelteUIElement(AllTagsPanel, { tags, layer }),
}, },
{ {
@ -784,7 +785,7 @@ export default class SpecialVisualizations {
nameKey: nameKey, nameKey: nameKey,
fallbackName, fallbackName,
}, },
state.featureSwitchIsTesting state.featureSwitchIsTesting,
) )
return new SvelteUIElement(StarsBarIcon, { return new SvelteUIElement(StarsBarIcon, {
score: reviews.average, score: reviews.average,
@ -806,10 +807,15 @@ export default class SpecialVisualizations {
name: "fallback", name: "fallback",
doc: "The identifier to use, if <i>tags[subjectKey]</i> as specified above is not available. This is effectively a fallback value", doc: "The identifier to use, if <i>tags[subjectKey]</i> as specified above is not available. This is effectively a fallback value",
}, },
{
name: "question",
doc: "The question to ask during the review",
},
], ],
constr: (state, tags, args, feature, layer) => { constr: (state, tags, args, feature, layer) => {
const nameKey = args[0] ?? "name" const nameKey = args[0] ?? "name"
const fallbackName = args[1] const fallbackName = args[1]
const question = args[2]
const reviews = FeatureReviews.construct( const reviews = FeatureReviews.construct(
feature, feature,
tags, tags,
@ -818,9 +824,9 @@ export default class SpecialVisualizations {
nameKey: nameKey, nameKey: nameKey,
fallbackName, fallbackName,
}, },
state.featureSwitchIsTesting state.featureSwitchIsTesting,
) )
return new SvelteUIElement(ReviewForm, { reviews, state, tags, feature, layer }) return new SvelteUIElement(ReviewForm, { reviews, state, tags, feature, layer, question })
}, },
}, },
{ {
@ -849,7 +855,7 @@ export default class SpecialVisualizations {
nameKey: nameKey, nameKey: nameKey,
fallbackName, fallbackName,
}, },
state.featureSwitchIsTesting state.featureSwitchIsTesting,
) )
return new SvelteUIElement(AllReviews, { reviews, state, tags, feature, layer }) return new SvelteUIElement(AllReviews, { reviews, state, tags, feature, layer })
}, },
@ -869,28 +875,32 @@ export default class SpecialVisualizations {
name: "fallback", name: "fallback",
doc: "The identifier to use, if <i>tags[subjectKey]</i> as specified above is not available. This is effectively a fallback value", doc: "The identifier to use, if <i>tags[subjectKey]</i> as specified above is not available. This is effectively a fallback value",
}, },
{
name: "question",
doc: "The question to ask in the review form. Optional",
},
], ],
constr( constr(
state: SpecialVisualizationState, state: SpecialVisualizationState,
tagSource: UIEventSource<Record<string, string>>, tagSource: UIEventSource<Record<string, string>>,
args: string[], args: string[],
feature: Feature, feature: Feature,
layer: LayerConfig layer: LayerConfig,
): BaseUIElement { ): BaseUIElement {
return new Combine([ return new Combine([
SpecialVisualizations.specialVisualisationsDict["create_review"].constr( SpecialVisualizations.specialVisualisationsDict.get("create_review").constr(
state, state,
tagSource, tagSource,
args, args,
feature, feature,
layer layer,
), ),
SpecialVisualizations.specialVisualisationsDict["list_reviews"].constr( SpecialVisualizations.specialVisualisationsDict.get("list_reviews").constr(
state, state,
tagSource, tagSource,
args, args,
feature, feature,
layer layer,
), ),
]) ])
}, },
@ -908,7 +918,7 @@ export default class SpecialVisualizations {
constr( constr(
state: SpecialVisualizationState, state: SpecialVisualizationState,
_: UIEventSource<Record<string, string>>, _: UIEventSource<Record<string, string>>,
argument: string[] argument: string[],
): BaseUIElement { ): BaseUIElement {
const [text] = argument const [text] = argument
return new SvelteUIElement(ImportReviewIdentity, { state, text }) return new SvelteUIElement(ImportReviewIdentity, { state, text })
@ -965,7 +975,7 @@ export default class SpecialVisualizations {
constr( constr(
state: SpecialVisualizationState, state: SpecialVisualizationState,
tags: UIEventSource<Record<string, string>>, tags: UIEventSource<Record<string, string>>,
args: string[] args: string[],
): SvelteUIElement { ): SvelteUIElement {
const keyToUse = args[0] const keyToUse = args[0]
const prefix = args[1] const prefix = args[1]
@ -1002,17 +1012,17 @@ export default class SpecialVisualizations {
return undefined return undefined
} }
const allUnits: Unit[] = [].concat( const allUnits: Unit[] = [].concat(
...(state?.theme?.layers?.map((lyr) => lyr.units) ?? []) ...(state?.theme?.layers?.map((lyr) => lyr.units) ?? []),
) )
const unit = allUnits.filter((unit) => const unit = allUnits.filter((unit) =>
unit.isApplicableToKey(key) unit.isApplicableToKey(key),
)[0] )[0]
if (unit === undefined) { if (unit === undefined) {
return value return value
} }
const getCountry = () => tagSource.data._country const getCountry = () => tagSource.data._country
return unit.asHumanLongValue(value, getCountry) return unit.asHumanLongValue(value, getCountry)
}) }),
) )
}, },
}, },
@ -1066,7 +1076,7 @@ export default class SpecialVisualizations {
constr: (state) => { constr: (state) => {
return new SubtleButton( return new SubtleButton(
new SvelteUIElement(Trash), new SvelteUIElement(Trash),
Translations.t.general.removeLocationHistory Translations.t.general.removeLocationHistory,
).onClick(() => { ).onClick(() => {
state.historicalUserLocations.features.setData([]) state.historicalUserLocations.features.setData([])
state.selectedElement.setData(undefined) state.selectedElement.setData(undefined)
@ -1107,10 +1117,10 @@ export default class SpecialVisualizations {
new SvelteUIElement(NoteCommentElement, { new SvelteUIElement(NoteCommentElement, {
comment, comment,
state, state,
}) }),
) ),
).SetClass("flex flex-col") ).SetClass("flex flex-col")
}) }),
), ),
}, },
{ {
@ -1140,29 +1150,13 @@ export default class SpecialVisualizations {
"`What is the phone number of {title()}`, which might automatically become `What is the phone number of XYZ`.", "`What is the phone number of {title()}`, which might automatically become `What is the phone number of XYZ`.",
constr: ( constr: (
state: SpecialVisualizationState, state: SpecialVisualizationState,
tagsSource: UIEventSource<Record<string, string>>, tags: UIEventSource<Record<string, string>>,
_: string[], _: string[],
feature: Feature, feature: Feature,
layer: LayerConfig layer: LayerConfig,
) => ) => {
new VariableUiElement( return new SvelteUIElement(FeatureTitle, { state, tags, feature, layer })
tagsSource.map((tags) => { },
if (state.theme === undefined) {
return "<feature title>"
}
const title = layer?.title?.GetRenderValue(tags)
if (title === undefined) {
return undefined
}
return new SvelteUIElement(SpecialTranslation, {
t: title,
tags: tagsSource,
state,
feature,
layer,
})
})
),
}, },
{ {
funcName: "maproulette_task", funcName: "maproulette_task",
@ -1177,8 +1171,8 @@ export default class SpecialVisualizations {
const challenge = Stores.FromPromise( const challenge = Stores.FromPromise(
Utils.downloadJsonCached<MaprouletteTask>( Utils.downloadJsonCached<MaprouletteTask>(
`${Maproulette.defaultEndpoint}/challenge/${parentId}`, `${Maproulette.defaultEndpoint}/challenge/${parentId}`,
24 * 60 * 60 * 1000 24 * 60 * 60 * 1000,
) ),
) )
return new VariableUiElement( return new VariableUiElement(
@ -1203,7 +1197,7 @@ export default class SpecialVisualizations {
} else { } else {
return [title, new List(listItems)] return [title, new List(listItems)]
} }
}) }),
) )
}, },
docs: "Fetches the metadata of MapRoulette campaign that this task is part of and shows those details (namely `title`, `description` and `instruction`).\n\nThis reads the property `mr_challengeId` to detect the parent campaign.", docs: "Fetches the metadata of MapRoulette campaign that this task is part of and shows those details (namely `title`, `description` and `instruction`).\n\nThis reads the property `mr_challengeId` to detect the parent campaign.",
@ -1217,15 +1211,15 @@ export default class SpecialVisualizations {
"\n" + "\n" +
"```json\n" + "```json\n" +
"{\n" + "{\n" +
' "id": "mark_duplicate",\n' + " \"id\": \"mark_duplicate\",\n" +
' "render": {\n' + " \"render\": {\n" +
' "special": {\n' + " \"special\": {\n" +
' "type": "maproulette_set_status",\n' + " \"type\": \"maproulette_set_status\",\n" +
' "message": {\n' + " \"message\": {\n" +
' "en": "Mark as not found or false positive"\n' + " \"en\": \"Mark as not found or false positive\"\n" +
" },\n" + " },\n" +
' "status": "2",\n' + " \"status\": \"2\",\n" +
' "image": "close"\n' + " \"image\": \"close\"\n" +
" }\n" + " }\n" +
" }\n" + " }\n" +
"}\n" + "}\n" +
@ -1301,7 +1295,7 @@ export default class SpecialVisualizations {
(l) => (l) =>
l.name !== null && l.name !== null &&
l.title && l.title &&
state.perLayer.get(l.id) !== undefined state.perLayer.get(l.id) !== undefined,
) )
.map( .map(
(l) => { (l) => {
@ -1311,8 +1305,8 @@ export default class SpecialVisualizations {
const fsBboxed = new BBoxFeatureSourceForLayer(fs, bbox) const fsBboxed = new BBoxFeatureSourceForLayer(fs, bbox)
return new StatisticsPanel(fsBboxed) return new StatisticsPanel(fsBboxed)
}, },
[state.mapProperties.bounds] [state.mapProperties.bounds],
) ),
) )
}, },
}, },
@ -1382,7 +1376,7 @@ export default class SpecialVisualizations {
constr( constr(
state: SpecialVisualizationState, state: SpecialVisualizationState,
tagSource: UIEventSource<Record<string, string>>, tagSource: UIEventSource<Record<string, string>>,
args: string[] args: string[],
): SvelteUIElement { ): SvelteUIElement {
let [text, href, classnames, download, ariaLabel, icon] = args let [text, href, classnames, download, ariaLabel, icon] = args
if (download === "") { if (download === "") {
@ -1420,7 +1414,7 @@ export default class SpecialVisualizations {
}, },
}, },
null, null,
" " " ",
) + ) +
"\n```", "\n```",
args: [ args: [
@ -1444,7 +1438,7 @@ export default class SpecialVisualizations {
featureTags: UIEventSource<Record<string, string>>, featureTags: UIEventSource<Record<string, string>>,
args: string[], args: string[],
feature: Feature, feature: Feature,
layer: LayerConfig layer: LayerConfig,
) { ) {
const [key, tr, classesRaw] = args const [key, tr, classesRaw] = args
let classes = classesRaw ?? "" let classes = classesRaw ?? ""
@ -1462,7 +1456,7 @@ export default class SpecialVisualizations {
"Could not create a special visualization for multi(", "Could not create a special visualization for multi(",
args.join(", ") + ")", args.join(", ") + ")",
"no properties found for object", "no properties found for object",
feature.properties.id feature.properties.id,
) )
return undefined return undefined
} }
@ -1479,7 +1473,7 @@ export default class SpecialVisualizations {
elements.push(subsTr) elements.push(subsTr)
} }
return elements return elements
}) }),
) )
}, },
}, },
@ -1499,7 +1493,7 @@ export default class SpecialVisualizations {
tagSource: UIEventSource<Record<string, string>>, tagSource: UIEventSource<Record<string, string>>,
argument: string[], argument: string[],
feature: Feature, feature: Feature,
layer: LayerConfig layer: LayerConfig,
): BaseUIElement { ): BaseUIElement {
return new VariableUiElement( return new VariableUiElement(
tagSource.map((tags) => { tagSource.map((tags) => {
@ -1511,7 +1505,7 @@ export default class SpecialVisualizations {
console.error("Cannot create a translation for", v, "due to", e) console.error("Cannot create a translation for", v, "due to", e)
return JSON.stringify(v) return JSON.stringify(v)
} }
}) }),
) )
}, },
}, },
@ -1531,7 +1525,7 @@ export default class SpecialVisualizations {
tags: UIEventSource<Record<string, string>>, tags: UIEventSource<Record<string, string>>,
argument: string[], argument: string[],
feature: Feature, feature: Feature,
layer: LayerConfig layer: LayerConfig,
): BaseUIElement { ): BaseUIElement {
const key = argument[0] const key = argument[0]
return new SvelteUIElement(FediverseLink, { key, tags, state }) return new SvelteUIElement(FediverseLink, { key, tags, state })
@ -1553,7 +1547,7 @@ export default class SpecialVisualizations {
tagSource: UIEventSource<Record<string, string>>, tagSource: UIEventSource<Record<string, string>>,
args: string[], args: string[],
feature: Feature, feature: Feature,
layer: LayerConfig layer: LayerConfig,
): BaseUIElement { ): BaseUIElement {
return new FixedUiElement("{" + args[0] + "}") return new FixedUiElement("{" + args[0] + "}")
}, },
@ -1574,7 +1568,7 @@ export default class SpecialVisualizations {
tagSource: UIEventSource<Record<string, string>>, tagSource: UIEventSource<Record<string, string>>,
argument: string[], argument: string[],
feature: Feature, feature: Feature,
layer: LayerConfig layer: LayerConfig,
): BaseUIElement { ): BaseUIElement {
const key = argument[0] ?? "value" const key = argument[0] ?? "value"
return new VariableUiElement( return new VariableUiElement(
@ -1594,10 +1588,10 @@ export default class SpecialVisualizations {
"Could not parse this tag: " + "Could not parse this tag: " +
JSON.stringify(value) + JSON.stringify(value) +
" due to " + " due to " +
e e,
).SetClass("alert") ).SetClass("alert")
} }
}) }),
) )
}, },
}, },
@ -1618,7 +1612,7 @@ export default class SpecialVisualizations {
tagSource: UIEventSource<Record<string, string>>, tagSource: UIEventSource<Record<string, string>>,
argument: string[], argument: string[],
feature: Feature, feature: Feature,
layer: LayerConfig layer: LayerConfig,
): BaseUIElement { ): BaseUIElement {
const giggityUrl = argument[0] const giggityUrl = argument[0]
return new SvelteUIElement(Giggity, { tags: tagSource, state, giggityUrl }) return new SvelteUIElement(Giggity, { tags: tagSource, state, giggityUrl })
@ -1634,12 +1628,12 @@ export default class SpecialVisualizations {
_: UIEventSource<Record<string, string>>, _: UIEventSource<Record<string, string>>,
argument: string[], argument: string[],
feature: Feature, feature: Feature,
layer: LayerConfig layer: LayerConfig,
): BaseUIElement { ): BaseUIElement {
const tags = (<ThemeViewState>( const tags = (<ThemeViewState>(
state state
)).geolocation.currentUserLocation.features.map( )).geolocation.currentUserLocation.features.map(
(features) => features[0]?.properties (features) => features[0]?.properties,
) )
return new Combine([ return new Combine([
new SvelteUIElement(OrientationDebugPanel, {}), new SvelteUIElement(OrientationDebugPanel, {}),
@ -1661,7 +1655,7 @@ export default class SpecialVisualizations {
tagSource: UIEventSource<Record<string, string>>, tagSource: UIEventSource<Record<string, string>>,
argument: string[], argument: string[],
feature: Feature, feature: Feature,
layer: LayerConfig layer: LayerConfig,
): BaseUIElement { ): BaseUIElement {
return new SvelteUIElement(MarkAsFavourite, { return new SvelteUIElement(MarkAsFavourite, {
tags: tagSource, tags: tagSource,
@ -1681,7 +1675,7 @@ export default class SpecialVisualizations {
tagSource: UIEventSource<Record<string, string>>, tagSource: UIEventSource<Record<string, string>>,
argument: string[], argument: string[],
feature: Feature, feature: Feature,
layer: LayerConfig layer: LayerConfig,
): BaseUIElement { ): BaseUIElement {
return new SvelteUIElement(MarkAsFavouriteMini, { return new SvelteUIElement(MarkAsFavouriteMini, {
tags: tagSource, tags: tagSource,
@ -1701,7 +1695,7 @@ export default class SpecialVisualizations {
tagSource: UIEventSource<Record<string, string>>, tagSource: UIEventSource<Record<string, string>>,
argument: string[], argument: string[],
feature: Feature, feature: Feature,
layer: LayerConfig layer: LayerConfig,
): BaseUIElement { ): BaseUIElement {
return new SvelteUIElement(DirectionIndicator, { state, feature }) return new SvelteUIElement(DirectionIndicator, { state, feature })
}, },
@ -1714,7 +1708,7 @@ export default class SpecialVisualizations {
state: SpecialVisualizationState, state: SpecialVisualizationState,
tags: UIEventSource<Record<string, string>>, tags: UIEventSource<Record<string, string>>,
argument: string[], argument: string[],
feature: Feature feature: Feature,
): SvelteUIElement { ): SvelteUIElement {
return new SvelteUIElement(QrCode, { state, tags, feature }) return new SvelteUIElement(QrCode, { state, tags, feature })
}, },
@ -1733,7 +1727,7 @@ export default class SpecialVisualizations {
constr( constr(
state: SpecialVisualizationState, state: SpecialVisualizationState,
tagSource: UIEventSource<Record<string, string>>, tagSource: UIEventSource<Record<string, string>>,
args: string[] args: string[],
): BaseUIElement { ): BaseUIElement {
const key = args[0] === "" ? "_direction:centerpoint" : args[0] const key = args[0] === "" ? "_direction:centerpoint" : args[0]
return new VariableUiElement( return new VariableUiElement(
@ -1744,11 +1738,11 @@ export default class SpecialVisualizations {
}) })
.mapD((value) => { .mapD((value) => {
const dir = GeoOperations.bearingToHuman( const dir = GeoOperations.bearingToHuman(
GeoOperations.parseBearing(value) GeoOperations.parseBearing(value),
) )
console.log("Human dir", dir) console.log("Human dir", dir)
return Translations.t.general.visualFeedback.directionsAbsolute[dir] return Translations.t.general.visualFeedback.directionsAbsolute[dir]
}) }),
) )
}, },
}, },
@ -1778,7 +1772,7 @@ export default class SpecialVisualizations {
tagSource: UIEventSource<Record<string, string>>, tagSource: UIEventSource<Record<string, string>>,
args: string[], args: string[],
feature: Feature, feature: Feature,
layer: LayerConfig layer: LayerConfig,
): BaseUIElement { ): BaseUIElement {
const url = args[0] const url = args[0]
const readonly = args[3] === "yes" const readonly = args[3] === "yes"
@ -1804,12 +1798,12 @@ export default class SpecialVisualizations {
tagSource: UIEventSource<Record<string, string>>, tagSource: UIEventSource<Record<string, string>>,
args: string[], args: string[],
feature: Feature, feature: Feature,
layer: LayerConfig layer: LayerConfig,
): BaseUIElement { ): BaseUIElement {
return new Toggle( return new Toggle(
undefined, undefined,
new SvelteUIElement(LoginButton, { osmConnection: state.osmConnection }), new SvelteUIElement(LoginButton, { osmConnection: state.osmConnection }),
state.osmConnection.isLoggedIn state.osmConnection.isLoggedIn,
) )
}, },
}, },
@ -1847,7 +1841,7 @@ export default class SpecialVisualizations {
tags: UIEventSource<Record<string, string>>, tags: UIEventSource<Record<string, string>>,
argument: string[], argument: string[],
feature: Feature, feature: Feature,
layer: LayerConfig layer: LayerConfig,
): BaseUIElement { ): BaseUIElement {
const key = argument[0] ?? "website" const key = argument[0] ?? "website"
const useProxy = argument[1] !== "no" const useProxy = argument[1] !== "no"
@ -1855,7 +1849,7 @@ export default class SpecialVisualizations {
const isClosed = (argument[4] ?? "yes") === "yes" const isClosed = (argument[4] ?? "yes") === "yes"
const countryStore: Store<string | undefined> = tags.mapD( const countryStore: Store<string | undefined> = tags.mapD(
(tags) => tags._country (tags) => tags._country,
) )
const sourceUrl: Store<string | undefined> = tags.mapD((tags) => { const sourceUrl: Store<string | undefined> = tags.mapD((tags) => {
if (!tags[key] || tags[key] === "undefined") { if (!tags[key] || tags[key] === "undefined") {
@ -1877,24 +1871,24 @@ export default class SpecialVisualizations {
const features = const features =
await LinkedDataLoader.fetchVeloparkEntry( await LinkedDataLoader.fetchVeloparkEntry(
url, url,
loadAll loadAll,
) )
const feature = const feature =
features.find( features.find(
(f) => f.properties["ref:velopark"] === url (f) => f.properties["ref:velopark"] === url,
) ?? features[0] ) ?? features[0]
const properties = feature.properties const properties = feature.properties
properties["ref:velopark"] = url properties["ref:velopark"] = url
console.log( console.log(
"Got properties from velopark:", "Got properties from velopark:",
properties properties,
) )
return properties return properties
} catch (e) { } catch (e) {
console.error(e) console.error(e)
throw e throw e
} }
})() })(),
) )
} }
if (country === undefined) { if (country === undefined) {
@ -1906,29 +1900,29 @@ export default class SpecialVisualizations {
return await LinkedDataLoader.fetchJsonLd( return await LinkedDataLoader.fetchJsonLd(
url, url,
{ country }, { country },
useProxy ? "proxy" : "fetch-lod" useProxy ? "proxy" : "fetch-lod",
) )
} catch (e) { } catch (e) {
console.log( console.log(
"Could not get with proxy/download LOD, attempting to download directly. Error for ", "Could not get with proxy/download LOD, attempting to download directly. Error for ",
url, url,
"is", "is",
e e,
) )
return await LinkedDataLoader.fetchJsonLd( return await LinkedDataLoader.fetchJsonLd(
url, url,
{ country }, { country },
"fetch-raw" "fetch-raw",
) )
} }
})() })(),
) )
}, },
[countryStore] [countryStore],
) )
externalData.addCallbackAndRunD((lod) => externalData.addCallbackAndRunD((lod) =>
console.log("linked_data_from_website received the following data:", lod) console.log("linked_data_from_website received the following data:", lod),
) )
return new Toggle( return new Toggle(
@ -1943,7 +1937,7 @@ export default class SpecialVisualizations {
collapsed: isClosed, collapsed: isClosed,
}), }),
undefined, undefined,
sourceUrl.map((url) => !!url) sourceUrl.map((url) => !!url),
) )
}, },
}, },
@ -1963,7 +1957,7 @@ export default class SpecialVisualizations {
tagSource: UIEventSource<Record<string, string>>, tagSource: UIEventSource<Record<string, string>>,
argument: string[], argument: string[],
feature: Feature, feature: Feature,
layer: LayerConfig layer: LayerConfig,
): BaseUIElement { ): BaseUIElement {
const text = argument[0] const text = argument[0]
const cssClasses = argument[1] const cssClasses = argument[1]
@ -1985,7 +1979,7 @@ export default class SpecialVisualizations {
tagSource: UIEventSource<Record<string, string>>, tagSource: UIEventSource<Record<string, string>>,
argument: string[], argument: string[],
feature: Feature, feature: Feature,
layer: LayerConfig layer: LayerConfig,
): BaseUIElement { ): BaseUIElement {
const translation = tagSource.map((tags) => { const translation = tagSource.map((tags) => {
const layer = state.theme.getMatchingLayer(tags) const layer = state.theme.getMatchingLayer(tags)
@ -2017,7 +2011,7 @@ export default class SpecialVisualizations {
tagSource: UIEventSource<Record<string, string>>, tagSource: UIEventSource<Record<string, string>>,
argument: string[], argument: string[],
feature: Feature, feature: Feature,
layer: LayerConfig layer: LayerConfig,
): SvelteUIElement { ): SvelteUIElement {
return new SvelteUIElement<any, any, any>(ClearCaches, { return new SvelteUIElement<any, any, any>(ClearCaches, {
msg: argument[0] ?? "Clear local caches", msg: argument[0] ?? "Clear local caches",
@ -2042,7 +2036,7 @@ export default class SpecialVisualizations {
tags: UIEventSource<Record<string, string>>, tags: UIEventSource<Record<string, string>>,
argument: string[], argument: string[],
selectedElement: Feature, selectedElement: Feature,
layer: LayerConfig layer: LayerConfig,
): SvelteUIElement { ): SvelteUIElement {
const [header, labelsStr] = argument const [header, labelsStr] = argument
const labels = labelsStr.split(";").map((x) => x.trim()) const labels = labelsStr.split(";").map((x) => x.trim())
@ -2065,7 +2059,7 @@ export default class SpecialVisualizations {
tags: UIEventSource<Record<string, string>>, tags: UIEventSource<Record<string, string>>,
argument: string[], argument: string[],
selectedElement: Feature, selectedElement: Feature,
layer: LayerConfig layer: LayerConfig,
): SvelteUIElement { ): SvelteUIElement {
const t = Translations.t.preset_type const t = Translations.t.preset_type
const question: QuestionableTagRenderingConfigJson = { const question: QuestionableTagRenderingConfigJson = {
@ -2105,7 +2099,7 @@ export default class SpecialVisualizations {
tagSource: UIEventSource<Record<string, string>>, tagSource: UIEventSource<Record<string, string>>,
argument: string[], argument: string[],
feature: Feature, feature: Feature,
layer: LayerConfig layer: LayerConfig,
): BaseUIElement { ): BaseUIElement {
const text = argument[0] const text = argument[0]
return new SubtleButton(undefined, text).onClick(() => { return new SubtleButton(undefined, text).onClick(() => {
@ -2136,7 +2130,7 @@ export default class SpecialVisualizations {
"Invalid special visualisation found: funcName is undefined or doesn't match " + "Invalid special visualisation found: funcName is undefined or doesn't match " +
regex + regex +
invalid.map((sp) => sp.i).join(", ") + invalid.map((sp) => sp.i).join(", ") +
'. Did you perhaps type \n funcName: "funcname" // type declaration uses COLON\ninstead of:\n funcName = "funcName" // value definition uses EQUAL' ". Did you perhaps type \n funcName: \"funcname\" // type declaration uses COLON\ninstead of:\n funcName = \"funcName\" // value definition uses EQUAL"
) )
} }