forked from MapComplete/MapComplete
92 lines
2.6 KiB
Svelte
92 lines
2.6 KiB
Svelte
|
<script lang="ts">
|
||
|
|
import type { ConfigMeta } from "./configMeta";
|
||
|
|
import EditLayerState from "./EditLayerState";
|
||
|
|
import * as questions from "../../assets/generated/layers/questions.json";
|
||
|
|
import { ImmutableStore, Store } from "../../Logic/UIEventSource";
|
||
|
|
import TagRenderingEditable from "../Popup/TagRendering/TagRenderingEditable.svelte";
|
||
|
|
import TagRenderingConfig from "../../Models/ThemeConfig/TagRenderingConfig";
|
||
|
|
import * as nmd from "nano-markdown";
|
||
|
|
import type {
|
||
|
|
QuestionableTagRenderingConfigJson
|
||
|
|
} from "../../Models/ThemeConfig/Json/QuestionableTagRenderingConfigJson.js";
|
||
|
|
import type { TagRenderingConfigJson } from "../../Models/ThemeConfig/Json/TagRenderingConfigJson";
|
||
|
|
import FromHtml from "../Base/FromHtml.svelte";
|
||
|
|
|
||
|
|
export let state: EditLayerState;
|
||
|
|
export let path: ReadonlyArray<string | number>;
|
||
|
|
export let schema: ConfigMeta;
|
||
|
|
let value = state.getStoreFor(path);
|
||
|
|
|
||
|
|
let perId: Record<string, TagRenderingConfigJson[]> = {};
|
||
|
|
for (const tagRendering of questions.tagRenderings) {
|
||
|
|
if (tagRendering.labels) {
|
||
|
|
for (const label of tagRendering.labels) {
|
||
|
|
perId[label] = (perId[label] ?? []).concat(tagRendering);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
perId[tagRendering.id] = [tagRendering];
|
||
|
|
}
|
||
|
|
|
||
|
|
let configJson: Store<QuestionableTagRenderingConfigJson[]> = value.map(x => {
|
||
|
|
if (typeof x === "string") {
|
||
|
|
return perId[x];
|
||
|
|
} else {
|
||
|
|
return [x];
|
||
|
|
}
|
||
|
|
});
|
||
|
|
let configs: Store<TagRenderingConfig[]> = configJson.mapD(configs => configs.map(config => new TagRenderingConfig(config)));
|
||
|
|
let id: Store<string> = value.mapD(c => {
|
||
|
|
if (c.id) {
|
||
|
|
return c.id;
|
||
|
|
}
|
||
|
|
if (typeof c === "string") {
|
||
|
|
return c;
|
||
|
|
}
|
||
|
|
return undefined;
|
||
|
|
});
|
||
|
|
|
||
|
|
let tags = state.testTags;
|
||
|
|
|
||
|
|
let messages = state.messagesFor(path);
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<div class="flex">
|
||
|
|
|
||
|
|
<div class="flex flex-col interactive border-interactive m-4 w-full">
|
||
|
|
|
||
|
|
{#if $id}
|
||
|
|
TagRendering {$id}
|
||
|
|
{/if}
|
||
|
|
<button on:click={() => state.highlightedItem.setData({path, schema})}>
|
||
|
|
{#if schema.hints.question}
|
||
|
|
{schema.hints.question}
|
||
|
|
{/if}
|
||
|
|
</button>
|
||
|
|
{#if schema.description}
|
||
|
|
<FromHtml src={nmd(schema.description)} />
|
||
|
|
{/if}
|
||
|
|
{#each $messages as message}
|
||
|
|
<div class="alert">
|
||
|
|
{message.message}
|
||
|
|
</div>
|
||
|
|
{/each}
|
||
|
|
|
||
|
|
<slot class="self-end my-4"></slot>
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="flex flex-col w-full m-4">
|
||
|
|
{#each $configs as config}
|
||
|
|
<TagRenderingEditable
|
||
|
|
selectedElement={state.exampleFeature}
|
||
|
|
config={config} editingEnabled={new ImmutableStore(true)} showQuestionIfUnknown={true}
|
||
|
|
{state}
|
||
|
|
{tags}></TagRenderingEditable>
|
||
|
|
{/each}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|