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

Formatting

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-05-04 23:39:24 +02:00
parent 99b0135fa9
commit 9384267b74
1 changed files with 206 additions and 181 deletions
Download patch file Download diff file Expand all files Collapse all files

59
UI/Popup/TagRendering/TagRenderingQuestion.svelte
View file

@ -1,22 +1,25 @@
<script lang="ts">
import { UIEventSource } from "../../../Logic/UIEventSource";
import type { SpecialVisualizationState } from "../../SpecialVisualization";
import {UIEventSource} from "../../../Logic/UIEventSource";
import type {SpecialVisualizationState} from "../../SpecialVisualization";
import Tr from "../../Base/Tr.svelte";
import If from "../../Base/If.svelte";
import TagRenderingMapping from "./TagRenderingMapping.svelte";
import type { Feature } from "geojson";
import type { Mapping } from "../../../Models/ThemeConfig/TagRenderingConfig";
import type {Feature} from "geojson";
import type {Mapping} from "../../../Models/ThemeConfig/TagRenderingConfig";
import TagRenderingConfig from "../../../Models/ThemeConfig/TagRenderingConfig";
import { TagsFilter } from "../../../Logic/Tags/TagsFilter";
import {TagsFilter} from "../../../Logic/Tags/TagsFilter";
import FreeformInput from "./FreeformInput.svelte";
import Translations from "../../i18n/Translations.js";
import ChangeTagAction from "../../../Logic/Osm/Actions/ChangeTagAction";
import { createEventDispatcher, onDestroy } from "svelte";
import {createEventDispatcher, onDestroy} from "svelte";
import LayerConfig from "../../../Models/ThemeConfig/LayerConfig";
import { ExclamationIcon } from "@rgossiaux/svelte-heroicons/solid";
import {ExclamationIcon} from "@rgossiaux/svelte-heroicons/solid";
import SpecialTranslation from "./SpecialTranslation.svelte";
import TagHint from "../TagHint.svelte";
import Validators from "../../InputElement/Validators";
import LoginToggle from "../../Base/LoginToggle.svelte";
import SubtleButton from "../../Base/SubtleButton.svelte";
import Loading from "../../Base/Loading.svelte";
import type {Writable} from "svelte/store";
export let config: TagRenderingConfig;
export let tags: UIEventSource<Record<string, string>>;
@ -55,6 +58,9 @@
}
let mappings: Mapping[];
let searchTerm: Writable<string> = new UIEventSource("")
$:{console.log("Seachterm:", $searchTerm)}
$: {
mappings = config.mappings?.filter(m => !mappingIsHidden(m));
try {
@ -82,7 +88,7 @@
* We simply apply the tags onto the records
*/
const kv = selectedTags.asChange(tags.data);
for (const { k, v } of kv) {
for (const {k, v} of kv) {
if (v === undefined) {
delete tags.data[k];
} else {
@ -93,7 +99,7 @@
return;
}
dispatch("saved", { config, applied: selectedTags });
dispatch("saved", {config, applied: selectedTags});
const change = new ChangeTagAction(
tags.data.id,
selectedTags,
@ -135,9 +141,16 @@
</div>
{/if}
{#if config.mappings?.length >= 8}
<input type="text" bind:value={$searchTerm}>
{/if}
{#if config.freeform?.key && !(mappings?.length > 0)}
<!-- There are no options to choose from, simply show the input element: fill out the text field -->
<FreeformInput {config} {tags} feature={selectedElement} value={freeformInput} />
<FreeformInput {config} {tags} feature={selectedElement} value={freeformInput}/>
<img src="./assets/svg/search.svg" class="w-4 h-4"/>
{:else if mappings !== undefined && !config.multiAnswer}
<!-- Simple radiobuttons as mapping -->
<div class="flex flex-col">
@ -145,8 +158,10 @@
<!-- Even though we have a list of 'mappings' already, we still iterate over the list as to keep the original indices-->
{#if !mappingIsHidden(mapping) }
<label class="flex">
<input type="radio" bind:group={selectedMapping} name={"mappings-radio-"+config.id} value={i}>
<TagRenderingMapping {mapping} {tags} {state} {selectedElement} {layer}></TagRenderingMapping>
<input type="radio" bind:group={selectedMapping} name={"mappings-radio-"+config.id}
value={i}>
<TagRenderingMapping {mapping} {tags} {state} {selectedElement}
{layer}></TagRenderingMapping>
</label>
{/if}
{/each}
@ -155,7 +170,7 @@
<input type="radio" bind:group={selectedMapping} name={"mappings-radio-"+config.id}
value={config.mappings.length}>
<FreeformInput {config} {tags} feature={selectedElement} value={freeformInput}
on:selected={() => selectedMapping = config.mappings.length } />
on:selected={() => selectedMapping = config.mappings.length }/>
</label>
{/if}
</div>
@ -165,7 +180,8 @@
{#each config.mappings as mapping, i (mapping.then)}
{#if !mappingIsHidden(mapping)}
<label class="flex">
<input type="checkbox" name={"mappings-checkbox-"+config.id+"-"+i} bind:checked={checkedMappings[i]}>
<input type="checkbox" name={"mappings-checkbox-"+config.id+"-"+i}
bind:checked={checkedMappings[i]}>
<TagRenderingMapping {mapping} {tags} {state} {selectedElement}></TagRenderingMapping>
</label>
{/if}
@ -175,16 +191,25 @@
<input type="checkbox" name={"mappings-checkbox-"+config.id+"-"+config.mappings.length}
bind:checked={checkedMappings[config.mappings.length]}>
<FreeformInput {config} {tags} feature={selectedElement} value={freeformInput}
on:selected={() => checkedMappings[config.mappings.length] = true} />
on:selected={() => checkedMappings[config.mappings.length] = true}/>
</label>
{/if}
</div>
{/if}
<LoginToggle {state}>
<Loading slot="loading"/>
<SubtleButton slot="not-logged-in" on:click={() => state.osmConnection.AttemptLogin()}>
<img slot="image" src="./assets/svg/login.svg" class="w-8 h-8"/>
<Tr t={Translations.t.general.loginToStart} slot="message"></Tr>
</SubtleButton>
<TagHint osmConnection={state.osmConnection} tags={selectedTags}></TagHint>
<div>
<!-- TagRenderingQuestion-buttons -->
<slot name="cancel"></slot>
{#if selectedTags !== undefined}
<button on:click={onSave}>
<Tr t={Translations.t.general.save}></Tr>
@ -196,6 +221,6 @@
</div>
{/if}
</div>
</LoginToggle>
</div>
{/if}