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

Housekeeping

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-11-23 15:47:16 +01:00
parent 21c35fc2c5
commit f7d19bcc02
216 changed files with 33997 additions and 1554 deletions
Download patch file Download diff file Expand all files Collapse all files

117
src/UI/BigComponents/Giggity.svelte
View file

@ -1,84 +1,99 @@
<script lang="ts">
import { Store, UIEventSource } from "../../Logic/UIEventSource"
import type { SpecialVisualizationState } from "../SpecialVisualization"
import { Utils } from "../../Utils"
import Loading from "../../assets/svg/Loading.svelte"
import { Store, UIEventSource } from "../../Logic/UIEventSource";
import type { SpecialVisualizationState } from "../SpecialVisualization";
import { Utils } from "../../Utils";
import Loading from "../../assets/svg/Loading.svelte";
export let tags: Store<Record<string, string>>
export let giggityUrl: string
export let state: SpecialVisualizationState
export let tags: Store<Record<string, string>>;
export let giggityUrl: string;
export let state: SpecialVisualizationState;
let name = $tags["name"];
let events: UIEventSource<{
date: Date,
start: string,
duration: string,
room: string,
slug: string,
url: string,
title: string,
track: string,
type: string,
language: string,
abstract: string,
description: string,
persons: string,
} []> = new UIEventSource(undefined);
let name = $tags["name"]
let events: UIEventSource<
{
date: Date
start: string
duration: string
room: string
slug: string
url: string
title: string
track: string
type: string
language: string
abstract: string
description: string
persons: string
}[]
> = new UIEventSource(undefined)
async function loadXml() {
if (!name) {
console.log("Not fetching giggity events as name is", name, tags);
return;
console.log("Not fetching giggity events as name is", name, tags)
return
}
const xmlStr = await Utils.downloadAdvanced(giggityUrl);
console.log("Raw xml", xmlStr);
const parser = new DOMParser();
let doc = parser.parseFromString(xmlStr.content, "application/xml");
let days = Array.from(doc.documentElement.getElementsByTagName("day"));
let today = new Date().toISOString().split("T")[0];
const eventsToday = days.find(day => day.getAttribute("date") === today);
console.log("Events today", eventsToday);
const childs = ["date", "start", "duration", "room", "slug", "url", "title", "track", "type", "language", "abstract", "description", "persons"];
const xmlStr = await Utils.downloadAdvanced(giggityUrl)
console.log("Raw xml", xmlStr)
const parser = new DOMParser()
let doc = parser.parseFromString(xmlStr.content, "application/xml")
let days = Array.from(doc.documentElement.getElementsByTagName("day"))
let today = new Date().toISOString().split("T")[0]
const eventsToday = days.find((day) => day.getAttribute("date") === today)
console.log("Events today", eventsToday)
const childs = [
"date",
"start",
"duration",
"room",
"slug",
"url",
"title",
"track",
"type",
"language",
"abstract",
"description",
"persons",
]
const now = new Date().toISOString().split("T")[1].substring(0, 5)
let eventsList = [];
let eventsList = []
for (const eventXml of Array.from(eventsToday.getElementsByTagName("event"))) {
const event: Record<string, string> = {};
const event: Record<string, string> = {}
for (const child of childs) {
const v = Array.from(eventXml.getElementsByTagName(child)).map(xml => xml.textContent).join("; ");
event[child] = v;
const v = Array.from(eventXml.getElementsByTagName(child))
.map((xml) => xml.textContent)
.join("; ")
event[child] = v
}
if(!name.startsWith(event.room)){
if (!name.startsWith(event.room)) {
continue
}
if(now > event.start){
if (now > event.start) {
continue
}
eventsList.push(event);
eventsList.push(event)
}
events.setData(eventsList);
events.setData(eventsList)
}
loadXml();
loadXml()
</script>
{#if $events === undefined}
<Loading class="h-4">Loading giggity events from {giggityUrl}</Loading>
{:else if $events.length === 0}
{:else if $events.length === 0}
<i>No upcoming events in this room</i>
{:else}
<div>
<h2>Upcoming events</h2>
{#each $events as event}
<div class="flex flex-col m-2 border border-gray-200 border-dotted">
<div class="m-2 flex flex-col border border-dotted border-gray-200">
{#if event.url}
<h3><a href={event.url} target="_blank">{event.title}</a></h3>
{:else }
<h3>{event.title}</h3>
{/if}
{:else}
<h3>{event.title}</h3>
{/if}
<div><b>{event.start}</b></div>
<i>By {event.persons}</i>
<div>

1
src/UI/BigComponents/SelectedElementTitle.svelte
View file

@ -38,7 +38,6 @@
<div class="flex flex-col">
<!-- Title element-->
<h3>
<TagRenderingAnswer config={layer.title} {selectedElement} {state} {tags} {layer} />
</h3>
<div

39
src/UI/BigComponents/SelectedElementView.svelte
View file

@ -20,15 +20,20 @@
_metatags = tags
})
)
let knownTagRenderings = layer.tagRenderings
.filter(config => (config.condition?.matchesProperties($tags) ?? true) && (config.metacondition?.matchesProperties({ ...$tags, ..._metatags } ?? true)
&& config.IsKnown($tags)))
let knownTagRenderings = layer.tagRenderings.filter(
(config) =>
(config.condition?.matchesProperties($tags) ?? true) &&
config.metacondition?.matchesProperties({ ...$tags, ..._metatags } ?? true) &&
config.IsKnown($tags)
)
$: {
knownTagRenderings = layer.tagRenderings
.filter(config => (config.condition?.matchesProperties($tags) ?? true) && (config.metacondition?.matchesProperties({ ...$tags, ..._metatags } ?? true)
&& config.IsKnown($tags)))
knownTagRenderings = layer.tagRenderings.filter(
(config) =>
(config.condition?.matchesProperties($tags) ?? true) &&
config.metacondition?.matchesProperties({ ...$tags, ..._metatags } ?? true) &&
config.IsKnown($tags)
)
}
</script>
@ -40,15 +45,15 @@
{:else}
<div class="flex h-full flex-col gap-y-2 overflow-y-auto p-1 px-2">
{#each knownTagRenderings as config (config.id)}
<TagRenderingEditable
{tags}
{config}
{state}
{selectedElement}
{layer}
{highlightedRendering}
clss={knownTagRenderings.length === 1 ? "h-full" : "tr-length-"+knownTagRenderings.length}
/>
<TagRenderingEditable
{tags}
{config}
{state}
{selectedElement}
{layer}
{highlightedRendering}
clss={knownTagRenderings.length === 1 ? "h-full" : "tr-length-" + knownTagRenderings.length}
/>
{/each}
</div>
{/if}

17
src/UI/BigComponents/Summary.svelte
View file

@ -1,16 +1,15 @@
<script lang="ts">
import type { Feature } from "geojson";
import type { SpecialVisualizationState } from "../SpecialVisualization";
import SelectedElementTitle from "./SelectedElementTitle.svelte";
import LayerConfig from "../../Models/ThemeConfig/LayerConfig";
import TagRenderingAnswer from "../Popup/TagRendering/TagRenderingAnswer.svelte";
import type { Feature } from "geojson"
import type { SpecialVisualizationState } from "../SpecialVisualization"
import SelectedElementTitle from "./SelectedElementTitle.svelte"
import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
import TagRenderingAnswer from "../Popup/TagRendering/TagRenderingAnswer.svelte"
export let state: SpecialVisualizationState;
export let state: SpecialVisualizationState
export let feature: Feature
let id = feature.properties.id
let tags = state.featureProperties.getStore(id);
let tags = state.featureProperties.getStore(id)
let layer: LayerConfig = state.layout.getMatchingLayer(tags.data)
</script>
<TagRenderingAnswer config={layer.title} selectedElement={feature} {state} {tags} {layer} />
<TagRenderingAnswer config={layer.title} selectedElement={feature} {state} {tags} {layer} />

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

@ -87,10 +87,10 @@
{#if theme.id !== personal.id || $unlockedPersonal}
<SubtleLink href={$href} options={{ extraClasses: "w-full" }}>
<img slot="image" src={theme.icon} class="mr-2 m-1 sm:mr-4 sm:m-2 block h-11 w-11" alt="" />
<img slot="image" src={theme.icon} class="m-1 mr-2 block h-11 w-11 sm:m-2 sm:mr-4" alt="" />
<span class="flex flex-col overflow-hidden text-ellipsis">
<Tr t={title} />
{#if selected}
<span class="alert">
<Tr t={Translations.t.general.morescreen.enterToOpen} />

1
src/UI/DownloadFlow/DownloadButton.svelte
View file

@ -71,7 +71,6 @@
gpsLayer.isDisplayed.setData(gpsIsDisplayed)
state.userRelatedState.preferencesAsTags.data["__showTimeSensitiveIcons"] = "yes"
state.userRelatedState.preferencesAsTags.ping()
}
}
</script>

11
src/UI/DownloadFlow/DownloadPdf.svelte
View file

@ -11,7 +11,7 @@
import Locale from "../i18n/Locale"
import { UIEventSource } from "../../Logic/UIEventSource"
import DownloadHelper from "./DownloadHelper"
import Qr from "../../Utils/Qr";
import Qr from "../../Utils/Qr"
export let templateName: string
export let state: ThemeViewState
@ -31,11 +31,11 @@
freeComponentId: "belowmap",
createImage: (key: string, width: string, height: string) => {
console.log("Creating an image for key", key)
if(key === "qr"){
if (key === "qr") {
const toShare = window.location.href.split("#")[0]
return new Qr(toShare).toImageElement(parseFloat(width), parseFloat(height))
}
return downloadHelper.createImage(key, width, height);
return downloadHelper.createImage(key, width, height)
},
textSubstitutions: <Record<string, string>>{
"layout.title": state.layout.title,
@ -62,7 +62,10 @@
extension="pdf"
helperText={t.downloadAsPdfHelper}
metaIsIncluded={false}
mainText={t.pdf.current_view_generic.Subs({orientation: template.orientation, paper_size: template.format.toUpperCase()})}
mainText={t.pdf.current_view_generic.Subs({
orientation: template.orientation,
paper_size: template.format.toUpperCase(),
})}
mimetype="application/pdf"
{state}
/>

3
src/UI/Map/DynamicMarker.svelte
View file

@ -9,8 +9,7 @@
export let config: PointRenderingConfig
let icons: IconConfig[] = config.marker
export let tags: Store<Record<string, string>>
let rotation = tags.map(tags => config.rotation.GetRenderValue(tags).Subs(tags).txt)
let rotation = tags.map((tags) => config.rotation.GetRenderValue(tags).Subs(tags).txt)
</script>
{#if config !== undefined}

58
src/UI/Popup/TagRendering/Questionbox.svelte
View file

@ -3,16 +3,16 @@
* Shows all questions for which the answers are unknown.
* The questions can either be shown all at once or one at a time (in which case they can be skipped)
*/
import TagRenderingConfig from "../../../Models/ThemeConfig/TagRenderingConfig";
import { UIEventSource } from "../../../Logic/UIEventSource";
import type { Feature } from "geojson";
import type { SpecialVisualizationState } from "../../SpecialVisualization";
import LayerConfig from "../../../Models/ThemeConfig/LayerConfig";
import If from "../../Base/If.svelte";
import TagRenderingQuestion from "./TagRenderingQuestion.svelte";
import Tr from "../../Base/Tr.svelte";
import Translations from "../../i18n/Translations.js";
import { Utils } from "../../../Utils";
import TagRenderingConfig from "../../../Models/ThemeConfig/TagRenderingConfig"
import { UIEventSource } from "../../../Logic/UIEventSource"
import type { Feature } from "geojson"
import type { SpecialVisualizationState } from "../../SpecialVisualization"
import LayerConfig from "../../../Models/ThemeConfig/LayerConfig"
import If from "../../Base/If.svelte"
import TagRenderingQuestion from "./TagRenderingQuestion.svelte"
import Tr from "../../Base/Tr.svelte"
import Translations from "../../i18n/Translations.js"
import { Utils } from "../../../Utils"
export let layer: LayerConfig
export let tags: UIEventSource<Record<string, string>>
@ -68,12 +68,12 @@
},
[skippedQuestions]
)
let firstQuestion = questionsToAsk.map(qta => qta[0])
let firstQuestion = questionsToAsk.map((qta) => qta[0])
let answered: number = 0
let skipped: number = 0
function skip(question: {id: string}, didAnswer: boolean = false) {
function skip(question: { id: string }, didAnswer: boolean = false) {
skippedQuestions.data.add(question.id)
skippedQuestions.ping()
if (didAnswer) {
@ -146,25 +146,25 @@
</div>
{:else}
<TagRenderingQuestion
config={$firstQuestion}
{layer}
{selectedElement}
{state}
{tags}
on:saved={() => {
skip($firstQuestion, true)
config={$firstQuestion}
{layer}
{selectedElement}
{state}
{tags}
on:saved={() => {
skip($firstQuestion, true)
}}
>
<button
class="secondary"
on:click={() => {
skip($firstQuestion)
}}
slot="cancel"
>
<button
class="secondary"
on:click={() => {
skip($firstQuestion)
}}
slot="cancel"
>
<Tr t={Translations.t.general.skip} />
</button>
</TagRenderingQuestion>
<Tr t={Translations.t.general.skip} />
</button>
</TagRenderingQuestion>
{/if}
</div>
{/if}

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

@ -106,7 +106,7 @@
</div>
{/if}
{:else}
<div class="w-full h-full overflow-hidden p-2">
<div class="h-full w-full overflow-hidden p-2">
<TagRenderingAnswer {config} {tags} {selectedElement} {state} {layer} />
</div>
{/if}

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

@ -191,13 +191,7 @@
<div class="sticky top-0" style="z-index: 11">
<div class="interactive sticky top-0 flex justify-between">
<span class="font-bold">
<SpecialTranslation
t={question}
{tags}
{state}
{layer}
feature={selectedElement}
/>
<SpecialTranslation t={question} {tags} {state} {layer} feature={selectedElement} />
</span>
<slot name="upper-right" />
</div>

11
src/UI/Studio/SchemaBasedArray.svelte
View file

@ -64,7 +64,16 @@
}
}
newPath.push(...toAdd)
console.log("Fused path ", path.join("."), "+", i,"+", subpartPath.join("."),"into",newPath.join("."))
console.log(
"Fused path ",
path.join("."),
"+",
i,
"+",
subpartPath.join("."),
"into",
newPath.join(".")
)
return newPath
}

123
src/UI/Studio/TagRenderingInput.svelte
View file

@ -3,104 +3,104 @@
* Little helper class to deal with choosing a builtin tagRendering or defining one yourself.
* Breaks the ideology that everything should be schema based
*/
import EditLayerState from "./EditLayerState";
import type { ConfigMeta } from "./configMeta";
import EditLayerState from "./EditLayerState"
import type { ConfigMeta } from "./configMeta"
import type {
MappingConfigJson,
QuestionableTagRenderingConfigJson
} from "../../Models/ThemeConfig/Json/QuestionableTagRenderingConfigJson";
import TagRenderingConfig from "../../Models/ThemeConfig/TagRenderingConfig";
import TagRenderingEditable from "../Popup/TagRendering/TagRenderingEditable.svelte";
import { Store, UIEventSource } from "../../Logic/UIEventSource";
import * as questions from "../../assets/generated/layers/questions.json";
import MappingInput from "./MappingInput.svelte";
import { TrashIcon } from "@rgossiaux/svelte-heroicons/outline";
import questionableTagRenderingSchemaRaw from "../../assets/schemas/questionabletagrenderingconfigmeta.json";
import SchemaBasedField from "./SchemaBasedField.svelte";
import Region from "./Region.svelte";
import NextButton from "../Base/NextButton.svelte";
import { QuestionMarkCircleIcon } from "@rgossiaux/svelte-heroicons/solid";
import { LocalStorageSource } from "../../Logic/Web/LocalStorageSource";
import { onMount } from "svelte";
QuestionableTagRenderingConfigJson,
} from "../../Models/ThemeConfig/Json/QuestionableTagRenderingConfigJson"
import TagRenderingConfig from "../../Models/ThemeConfig/TagRenderingConfig"
import TagRenderingEditable from "../Popup/TagRendering/TagRenderingEditable.svelte"
import { Store, UIEventSource } from "../../Logic/UIEventSource"
import * as questions from "../../assets/generated/layers/questions.json"
import MappingInput from "./MappingInput.svelte"
import { TrashIcon } from "@rgossiaux/svelte-heroicons/outline"
import questionableTagRenderingSchemaRaw from "../../assets/schemas/questionabletagrenderingconfigmeta.json"
import SchemaBasedField from "./SchemaBasedField.svelte"
import Region from "./Region.svelte"
import NextButton from "../Base/NextButton.svelte"
import { QuestionMarkCircleIcon } from "@rgossiaux/svelte-heroicons/solid"
import { LocalStorageSource } from "../../Logic/Web/LocalStorageSource"
import { onMount } from "svelte"
export let state: EditLayerState;
export let schema: ConfigMeta;
export let path: (string | number)[];
let expertMode = state.expertMode;
const store = state.getStoreFor(path);
let value = store.data;
export let state: EditLayerState
export let schema: ConfigMeta
export let path: (string | number)[]
let expertMode = state.expertMode
const store = state.getStoreFor(path)
let value = store.data
let hasSeenIntro = UIEventSource.asBoolean(
LocalStorageSource.Get("studio-seen-tagrendering-tutorial", "false")
);
)
onMount(() => {
if (!hasSeenIntro.data) {
state.showIntro.setData("tagrenderings");
hasSeenIntro.setData(true);
state.showIntro.setData("tagrenderings")
hasSeenIntro.setData(true)
}
});
})
/**
* Allows the theme builder to create 'writable' themes.
* Should only be enabled for 'tagrenderings' in the theme, if the source is OSM
*/
let allowQuestions: Store<boolean> = state.configuration.mapD(
(config) => path.at(0) === "tagRenderings" && config.source?.geoJson === undefined
);
)
let mappingsBuiltin: MappingConfigJson[] = [];
let perLabel: Record<string, MappingConfigJson> = {};
let mappingsBuiltin: MappingConfigJson[] = []
let perLabel: Record<string, MappingConfigJson> = {}
for (const tr of questions.tagRenderings) {
let description = tr["description"] ?? tr["question"] ?? "No description available";
description = description["en"] ?? description;
let description = tr["description"] ?? tr["question"] ?? "No description available"
description = description["en"] ?? description
if (tr["labels"]) {
const labels: string[] = tr["labels"];
const labels: string[] = tr["labels"]
for (const label of labels) {
let labelMapping: MappingConfigJson = perLabel[label];
let labelMapping: MappingConfigJson = perLabel[label]
if (!labelMapping) {
labelMapping = {
if: "value=" + label,
then: {
en: "Builtin collection <b>" + label + "</b>:"
}
};
perLabel[label] = labelMapping;
mappingsBuiltin.push(labelMapping);
en: "Builtin collection <b>" + label + "</b>:",
},
}
perLabel[label] = labelMapping
mappingsBuiltin.push(labelMapping)
}
labelMapping.then.en = labelMapping.then.en + "<div>" + description + "</div>";
labelMapping.then.en = labelMapping.then.en + "<div>" + description + "</div>"
}
}
mappingsBuiltin.push({
if: "value=" + tr["id"],
then: {
en: "Builtin <b>" + tr["id"] + "</b> <div class='subtle'>" + description + "</div>"
}
});
en: "Builtin <b>" + tr["id"] + "</b> <div class='subtle'>" + description + "</div>",
},
})
}
const configBuiltin = new TagRenderingConfig(<QuestionableTagRenderingConfigJson>{
question: "Which builtin element should be shown?",
mappings: mappingsBuiltin
});
mappings: mappingsBuiltin,
})
const tags = new UIEventSource({ value });
const tags = new UIEventSource({ value })
tags.addCallbackAndRunD((tgs) => {
store.setData(tgs["value"]);
});
store.setData(tgs["value"])
})
let mappings: UIEventSource<MappingConfigJson[]> = state.getStoreFor([...path, "mappings"]);
let mappings: UIEventSource<MappingConfigJson[]> = state.getStoreFor([...path, "mappings"])
const topLevelItems: Record<string, ConfigMeta> = {};
const topLevelItems: Record<string, ConfigMeta> = {}
for (const item of questionableTagRenderingSchemaRaw) {
if (item.path.length === 1) {
topLevelItems[item.path[0]] = <ConfigMeta>item;
topLevelItems[item.path[0]] = <ConfigMeta>item
}
}
function initMappings() {
if (mappings.data === undefined) {
mappings.setData([]);
mappings.setData([])
}
}
@ -113,28 +113,25 @@
"condition",
"metacondition",
"mappings",
"icon"
]);
const ignored = new Set(["labels", "description", "classes"]);
"icon",
])
const ignored = new Set(["labels", "description", "classes"])
const freeformSchemaAll = <ConfigMeta[]>(
questionableTagRenderingSchemaRaw.filter(
(schema) =>
schema.path.length == 2 &&
schema.path[0] === "freeform" &&
($allowQuestions)
(schema) => schema.path.length == 2 && schema.path[0] === "freeform" && $allowQuestions
)
);
)
let freeformSchema = $expertMode
? freeformSchemaAll
: freeformSchemaAll.filter((schema) => schema.hints?.group !== "expert");
: freeformSchemaAll.filter((schema) => schema.hints?.group !== "expert")
const missing: string[] = questionableTagRenderingSchemaRaw
.filter(
(schema) =>
schema.path.length >= 1 && !items.has(schema.path[0]) && !ignored.has(schema.path[0])
)
.map((schema) => schema.path.join("."));
console.log({ state });
.map((schema) => schema.path.join("."))
console.log({ state })
</script>
{#if typeof $store === "string"}

10
src/UI/StudioGUI.svelte
View file

@ -26,9 +26,9 @@
import EditTheme from "./Studio/EditTheme.svelte"
import * as meta from "../../package.json"
import Checkbox from "./Base/Checkbox.svelte"
import { Utils } from "../Utils";
import Translations from "./i18n/Translations";
import Tr from "./Base/Tr.svelte";
import { Utils } from "../Utils"
import Translations from "./i18n/Translations"
import Tr from "./Base/Tr.svelte"
export let studioUrl =
window.location.hostname === "127.0.0.2"
@ -154,7 +154,7 @@
Contact <a href="https://app.element.io/#/room/#MapComplete:matrix.org">
the MapComplete community via the chat.
</a>
Someone might be able to help you
Someone might be able to help you
</li>
<li>
File <a href="https://github.com/pietervdvn/MapComplete/issues">an issue</a>
@ -196,7 +196,7 @@
<QuestionMarkCircleIcon class="h-6 w-6" />
Show the introduction again
</button>
<a class="flex button" href={Utils.HomepageLink()}>
<a class="button flex" href={Utils.HomepageLink()}>
<img class="h-6 w-6" src="./assets/svg/add.svg" />
<Tr t={Translations.t.general.backToIndex} />
</a>

7
src/UI/StylesheetTestGui.svelte
View file

@ -1,7 +1,7 @@
<script lang="ts">
import Svg from "../Svg";
import Loading from "./Base/Loading.svelte";
import ToSvelte from "./Base/ToSvelte.svelte";
import Svg from "../Svg"
import Loading from "./Base/Loading.svelte"
import ToSvelte from "./Base/ToSvelte.svelte"
</script>
<div>
@ -55,7 +55,6 @@
<button class="small primary">Small button</button>
<button class="small primary disabled">Small, disabled button</button>
</div>
<div class="flex">
<button>

179
src/UI/ThemeViewGUI.svelte
View file

@ -1,127 +1,127 @@
<script lang="ts">
import { Store, UIEventSource } from "../Logic/UIEventSource";
import { Map as MlMap } from "maplibre-gl";
import MaplibreMap from "./Map/MaplibreMap.svelte";
import FeatureSwitchState from "../Logic/State/FeatureSwitchState";
import MapControlButton from "./Base/MapControlButton.svelte";
import ToSvelte from "./Base/ToSvelte.svelte";
import If from "./Base/If.svelte";
import { GeolocationControl } from "./BigComponents/GeolocationControl";
import type { Feature } from "geojson";
import SelectedElementView from "./BigComponents/SelectedElementView.svelte";
import LayerConfig from "../Models/ThemeConfig/LayerConfig";
import Filterview from "./BigComponents/Filterview.svelte";
import ThemeViewState from "../Models/ThemeViewState";
import type { MapProperties } from "../Models/MapProperties";
import Geosearch from "./BigComponents/Geosearch.svelte";
import Translations from "./i18n/Translations";
import { CogIcon, EyeIcon, MenuIcon, XCircleIcon } from "@rgossiaux/svelte-heroicons/solid";
import Tr from "./Base/Tr.svelte";
import CommunityIndexView from "./BigComponents/CommunityIndexView.svelte";
import FloatOver from "./Base/FloatOver.svelte";
import PrivacyPolicy from "./BigComponents/PrivacyPolicy";
import Constants from "../Models/Constants";
import TabbedGroup from "./Base/TabbedGroup.svelte";
import UserRelatedState from "../Logic/State/UserRelatedState";
import LoginToggle from "./Base/LoginToggle.svelte";
import LoginButton from "./Base/LoginButton.svelte";
import CopyrightPanel from "./BigComponents/CopyrightPanel";
import DownloadPanel from "./DownloadFlow/DownloadPanel.svelte";
import ModalRight from "./Base/ModalRight.svelte";
import { Utils } from "../Utils";
import Hotkeys from "./Base/Hotkeys";
import { VariableUiElement } from "./Base/VariableUIElement";
import SvelteUIElement from "./Base/SvelteUIElement";
import OverlayToggle from "./BigComponents/OverlayToggle.svelte";
import LevelSelector from "./BigComponents/LevelSelector.svelte";
import ExtraLinkButton from "./BigComponents/ExtraLinkButton";
import SelectedElementTitle from "./BigComponents/SelectedElementTitle.svelte";
import Svg from "../Svg";
import ThemeIntroPanel from "./BigComponents/ThemeIntroPanel.svelte";
import type { RasterLayerPolygon } from "../Models/RasterLayers";
import { AvailableRasterLayers } from "../Models/RasterLayers";
import RasterLayerOverview from "./Map/RasterLayerOverview.svelte";
import IfHidden from "./Base/IfHidden.svelte";
import { onDestroy } from "svelte";
import { OpenJosm } from "./BigComponents/OpenJosm";
import MapillaryLink from "./BigComponents/MapillaryLink.svelte";
import OpenIdEditor from "./BigComponents/OpenIdEditor.svelte";
import OpenBackgroundSelectorButton from "./BigComponents/OpenBackgroundSelectorButton.svelte";
import StateIndicator from "./BigComponents/StateIndicator.svelte";
import LanguagePicker from "./LanguagePicker";
import Locale from "./i18n/Locale";
import ShareScreen from "./BigComponents/ShareScreen.svelte";
import UploadingImageCounter from "./Image/UploadingImageCounter.svelte";
import PendingChangesIndicator from "./BigComponents/PendingChangesIndicator.svelte";
import Cross from "../assets/svg/Cross.svelte";
import Summary from "./BigComponents/Summary.svelte";
import { Store, UIEventSource } from "../Logic/UIEventSource"
import { Map as MlMap } from "maplibre-gl"
import MaplibreMap from "./Map/MaplibreMap.svelte"
import FeatureSwitchState from "../Logic/State/FeatureSwitchState"
import MapControlButton from "./Base/MapControlButton.svelte"
import ToSvelte from "./Base/ToSvelte.svelte"
import If from "./Base/If.svelte"
import { GeolocationControl } from "./BigComponents/GeolocationControl"
import type { Feature } from "geojson"
import SelectedElementView from "./BigComponents/SelectedElementView.svelte"
import LayerConfig from "../Models/ThemeConfig/LayerConfig"
import Filterview from "./BigComponents/Filterview.svelte"
import ThemeViewState from "../Models/ThemeViewState"
import type { MapProperties } from "../Models/MapProperties"
import Geosearch from "./BigComponents/Geosearch.svelte"
import Translations from "./i18n/Translations"
import { CogIcon, EyeIcon, MenuIcon, XCircleIcon } from "@rgossiaux/svelte-heroicons/solid"
import Tr from "./Base/Tr.svelte"
import CommunityIndexView from "./BigComponents/CommunityIndexView.svelte"
import FloatOver from "./Base/FloatOver.svelte"
import PrivacyPolicy from "./BigComponents/PrivacyPolicy"
import Constants from "../Models/Constants"
import TabbedGroup from "./Base/TabbedGroup.svelte"
import UserRelatedState from "../Logic/State/UserRelatedState"
import LoginToggle from "./Base/LoginToggle.svelte"
import LoginButton from "./Base/LoginButton.svelte"
import CopyrightPanel from "./BigComponents/CopyrightPanel"
import DownloadPanel from "./DownloadFlow/DownloadPanel.svelte"
import ModalRight from "./Base/ModalRight.svelte"
import { Utils } from "../Utils"
import Hotkeys from "./Base/Hotkeys"
import { VariableUiElement } from "./Base/VariableUIElement"
import SvelteUIElement from "./Base/SvelteUIElement"
import OverlayToggle from "./BigComponents/OverlayToggle.svelte"
import LevelSelector from "./BigComponents/LevelSelector.svelte"
import ExtraLinkButton from "./BigComponents/ExtraLinkButton"
import SelectedElementTitle from "./BigComponents/SelectedElementTitle.svelte"
import Svg from "../Svg"
import ThemeIntroPanel from "./BigComponents/ThemeIntroPanel.svelte"
import type { RasterLayerPolygon } from "../Models/RasterLayers"
import { AvailableRasterLayers } from "../Models/RasterLayers"
import RasterLayerOverview from "./Map/RasterLayerOverview.svelte"
import IfHidden from "./Base/IfHidden.svelte"
import { onDestroy } from "svelte"
import { OpenJosm } from "./BigComponents/OpenJosm"
import MapillaryLink from "./BigComponents/MapillaryLink.svelte"
import OpenIdEditor from "./BigComponents/OpenIdEditor.svelte"
import OpenBackgroundSelectorButton from "./BigComponents/OpenBackgroundSelectorButton.svelte"
import StateIndicator from "./BigComponents/StateIndicator.svelte"
import LanguagePicker from "./LanguagePicker"
import Locale from "./i18n/Locale"
import ShareScreen from "./BigComponents/ShareScreen.svelte"
import UploadingImageCounter from "./Image/UploadingImageCounter.svelte"
import PendingChangesIndicator from "./BigComponents/PendingChangesIndicator.svelte"
import Cross from "../assets/svg/Cross.svelte"
import Summary from "./BigComponents/Summary.svelte"
export let state: ThemeViewState;
let layout = state.layout;
export let state: ThemeViewState
let layout = state.layout
let maplibremap: UIEventSource<MlMap> = state.map;
let selectedElement: UIEventSource<Feature> = state.selectedElement;
let selectedLayer: UIEventSource<LayerConfig> = state.selectedLayer;
let maplibremap: UIEventSource<MlMap> = state.map
let selectedElement: UIEventSource<Feature> = state.selectedElement
let selectedLayer: UIEventSource<LayerConfig> = state.selectedLayer
let currentZoom = state.mapProperties.zoom;
let showCrosshair = state.userRelatedState.showCrosshair;
let arrowKeysWereUsed = state.mapProperties.lastKeyNavigation;
let centerFeatures = state.closestFeatures.features;
let currentZoom = state.mapProperties.zoom
let showCrosshair = state.userRelatedState.showCrosshair
let arrowKeysWereUsed = state.mapProperties.lastKeyNavigation
let centerFeatures = state.closestFeatures.features
$: console.log("Centerfeatures are", $centerFeatures)
const selectedElementView = selectedElement.map(
(selectedElement) => {
// Svelte doesn't properly reload some of the legacy UI-elements
// As such, we _reconstruct_ the selectedElementView every time a new feature is selected
// This is a bit wasteful, but until everything is a svelte-component, this should do the trick
const layer = selectedLayer.data;
const layer = selectedLayer.data
if (selectedElement === undefined || layer === undefined) {
return undefined;
return undefined
}
if (!(layer.tagRenderings?.length > 0) || layer.title === undefined) {
return undefined;
return undefined
}
const tags = state.featureProperties.getStore(selectedElement.properties.id);
const tags = state.featureProperties.getStore(selectedElement.properties.id)
return new SvelteUIElement(SelectedElementView, {
state,
layer,
selectedElement,
tags
}).SetClass("h-full w-full");
tags,
}).SetClass("h-full w-full")
},
[selectedLayer]
);
)
const selectedElementTitle = selectedElement.map(
(selectedElement) => {
// Svelte doesn't properly reload some of the legacy UI-elements
// As such, we _reconstruct_ the selectedElementView every time a new feature is selected
// This is a bit wasteful, but until everything is a svelte-component, this should do the trick
const layer = selectedLayer.data;
const layer = selectedLayer.data
if (selectedElement === undefined || layer === undefined) {
return undefined;
return undefined
}
const tags = state.featureProperties.getStore(selectedElement.properties.id);
return new SvelteUIElement(SelectedElementTitle, { state, layer, selectedElement, tags });
const tags = state.featureProperties.getStore(selectedElement.properties.id)
return new SvelteUIElement(SelectedElementTitle, { state, layer, selectedElement, tags })
},
[selectedLayer]
);
)
let mapproperties: MapProperties = state.mapProperties;
let featureSwitches: FeatureSwitchState = state.featureSwitches;
let availableLayers = state.availableLayers;
let userdetails = state.osmConnection.userDetails;
let currentViewLayer = layout.layers.find((l) => l.id === "current_view");
let rasterLayer: Store<RasterLayerPolygon> = state.mapProperties.rasterLayer;
let mapproperties: MapProperties = state.mapProperties
let featureSwitches: FeatureSwitchState = state.featureSwitches
let availableLayers = state.availableLayers
let userdetails = state.osmConnection.userDetails
let currentViewLayer = layout.layers.find((l) => l.id === "current_view")
let rasterLayer: Store<RasterLayerPolygon> = state.mapProperties.rasterLayer
let rasterLayerName =
rasterLayer.data?.properties?.name ?? AvailableRasterLayers.maptilerDefaultLayer.properties.name;
rasterLayer.data?.properties?.name ?? AvailableRasterLayers.maptilerDefaultLayer.properties.name
onDestroy(
rasterLayer.addCallbackAndRunD((l) => {
rasterLayerName = l.properties.name;
rasterLayerName = l.properties.name
})
);
)
</script>
<div class="absolute top-0 left-0 h-screen w-screen overflow-hidden">
@ -224,10 +224,11 @@
</div>
{#if $arrowKeysWereUsed !== undefined}
<div class="pointer-events-auto interactive p-1">
<div class="interactive pointer-events-auto p-1">
{#each $centerFeatures as feat, i (feat.properties.id)}
<div class="flex">
<b>{i+1}.</b><Summary {state} feature={feat}/>
<b>{i + 1}.</b>
<Summary {state} feature={feat} />
</div>
{/each}
</div>
@ -263,7 +264,7 @@
</div>
<LoginToggle ignoreLoading={true} {state}>
{#if $showCrosshair === "yes" && ($currentZoom >= 17 || $arrowKeysWereUsed !== undefined) }
{#if $showCrosshair === "yes" && ($currentZoom >= 17 || $arrowKeysWereUsed !== undefined)}
<div
class="pointer-events-none absolute top-0 left-0 flex h-full w-full items-center justify-center"
>