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

Chore: formatting

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-11-09 16:30:26 +01:00
parent 6c3c67af56
commit 286578bfc7
58 changed files with 2199 additions and 1915 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/UI/InputElement/Helpers/ImageHelper.svelte
View file

@ -1,10 +1,10 @@
<script lang="ts">
import {UIEventSource} from "../../../Logic/UIEventSource";
import { UIEventSource } from "../../../Logic/UIEventSource"
/**
* Simply shows the image
*/
export let value: UIEventSource<undefined | string>
/**
* Simply shows the image
*/
export let value: UIEventSource<undefined | string>
</script>
<img src={$value}/>
<img src={$value} />

58
src/UI/InputElement/Helpers/SimpleTagInput.svelte
View file

@ -1,31 +1,39 @@
<script lang="ts">/**
* Input helper to create a tag. The tag is JSON-encoded
*/
import { UIEventSource } from "../../../Logic/UIEventSource";
import BasicTagInput from "../../Studio/TagInput/BasicTagInput.svelte";
import { TagUtils } from "../../../Logic/Tags/TagUtils";
import nmd from "nano-markdown"
import FromHtml from "../../Base/FromHtml.svelte";
export let value: UIEventSource<undefined | string>;
export let args: string[] = [];
let uploadableOnly: boolean = args[0] === "uploadableOnly";
export let overpassSupportNeeded: boolean;
<script lang="ts">
/**
* Input helper to create a tag. The tag is JSON-encoded
*/
import { UIEventSource } from "../../../Logic/UIEventSource"
import BasicTagInput from "../../Studio/TagInput/BasicTagInput.svelte"
import { TagUtils } from "../../../Logic/Tags/TagUtils"
import nmd from "nano-markdown"
import FromHtml from "../../Base/FromHtml.svelte"
export let value: UIEventSource<undefined | string>
export let args: string[] = []
let uploadableOnly: boolean = args[0] === "uploadableOnly"
export let overpassSupportNeeded: boolean
/**
* Only show the taginfo-statistics if they are suspicious (thus: less then 250 entries)
*/
export let silent: boolean = false;
let mode: string = "=";
let dropdownFocussed = new UIEventSource(false);
let documentation = TagUtils.modeDocumentation[mode];
$: documentation = TagUtils.modeDocumentation[mode];
/**
* Only show the taginfo-statistics if they are suspicious (thus: less then 250 entries)
*/
export let silent: boolean = false
let mode: string = "="
let dropdownFocussed = new UIEventSource(false)
let documentation = TagUtils.modeDocumentation[mode]
$: documentation = TagUtils.modeDocumentation[mode]
</script>
<BasicTagInput bind:mode={mode} {dropdownFocussed} {overpassSupportNeeded} {silent} tag={value} {uploadableOnly} on:submit />
<BasicTagInput
bind:mode
{dropdownFocussed}
{overpassSupportNeeded}
{silent}
tag={value}
{uploadableOnly}
on:submit
/>
{#if $dropdownFocussed}
<div class="border border-dashed border-black p-2 m-2">
<b>{documentation.name}</b>
<FromHtml src={nmd(documentation.docs)}/>
<div class="m-2 border border-dashed border-black p-2">
<b>{documentation.name}</b>
<FromHtml src={nmd(documentation.docs)} />
</div>
{/if}

33
src/UI/InputElement/Helpers/TagInput.svelte
View file

@ -1,22 +1,21 @@
<script lang="ts">/**
* Input helper to create a tag. The tag is JSON-encoded
*/
import { UIEventSource } from "../../../Logic/UIEventSource";
import type { TagConfigJson } from "../../../Models/ThemeConfig/Json/TagConfigJson";
import FullTagInput from "../../Studio/TagInput/FullTagInput.svelte";
<script lang="ts">
/**
* Input helper to create a tag. The tag is JSON-encoded
*/
import { UIEventSource } from "../../../Logic/UIEventSource"
import type { TagConfigJson } from "../../../Models/ThemeConfig/Json/TagConfigJson"
import FullTagInput from "../../Studio/TagInput/FullTagInput.svelte"
export let value: UIEventSource<TagConfigJson>;
export let uploadableOnly: boolean;
export let overpassSupportNeeded: boolean;
export let value: UIEventSource<TagConfigJson>
export let uploadableOnly: boolean
export let overpassSupportNeeded: boolean
/**
* Only show the taginfo-statistics if they are suspicious (thus: less then 250 entries)
*/
export let silent: boolean = false;
let tag: UIEventSource<string | TagConfigJson> = value
/**
* Only show the taginfo-statistics if they are suspicious (thus: less then 250 entries)
*/
export let silent: boolean = false
let tag: UIEventSource<string | TagConfigJson> = value
</script>
<FullTagInput {overpassSupportNeeded} {silent} {tag} {uploadableOnly} on:submit/>
<FullTagInput {overpassSupportNeeded} {silent} {tag} {uploadableOnly} on:submit />

75
src/UI/InputElement/Helpers/TranslationInput.svelte
View file

@ -1,55 +1,59 @@
<script lang="ts">
import { UIEventSource } from "../../../Logic/UIEventSource"
import LanguageUtils from "../../../Utils/LanguageUtils"
import { createEventDispatcher, onDestroy } from "svelte"
import ValidatedInput from "../ValidatedInput.svelte"
import { UIEventSource } from "../../../Logic/UIEventSource";
import LanguageUtils from "../../../Utils/LanguageUtils";
import { createEventDispatcher, onDestroy } from "svelte";
import ValidatedInput from "../ValidatedInput.svelte";
export let value: UIEventSource<Record<string, string>> = new UIEventSource<
Record<string, string>
>({})
export let value: UIEventSource<Record<string, string>> = new UIEventSource<Record<string, string>>({});
export let args: string[] = []
let prefix = args[0] ?? ""
let postfix = args[1] ?? ""
let translations: UIEventSource<Record<string, string>> = value
const allLanguages: string[] = LanguageUtils.usedLanguagesSorted;
let currentLang = new UIEventSource("en");
const currentVal = new UIEventSource<string>("");
const allLanguages: string[] = LanguageUtils.usedLanguagesSorted
let currentLang = new UIEventSource("en")
const currentVal = new UIEventSource<string>("")
let dispatch = createEventDispatcher<{ submit }>()
function update() {
const v = currentVal.data;
const l = currentLang.data;
if(translations.data === "" || translations.data === undefined){
const v = currentVal.data
const l = currentLang.data
if (translations.data === "" || translations.data === undefined) {
translations.data = {}
}
if (translations.data[l] === v) {
return;
return
}
translations.data[l] = v;
translations.ping();
translations.data[l] = v
translations.ping()
}
onDestroy(currentLang.addCallbackAndRunD(currentLang => {
console.log("Applying current lang:", currentLang);
if(!translations.data){
translations.data = {}
}
translations.data[currentLang] = translations.data[currentLang] ?? "";
currentVal.setData(translations.data[currentLang]);
}));
onDestroy(currentVal.addCallbackAndRunD(v => {
update();
}));
onDestroy(
currentLang.addCallbackAndRunD((currentLang) => {
console.log("Applying current lang:", currentLang)
if (!translations.data) {
translations.data = {}
}
translations.data[currentLang] = translations.data[currentLang] ?? ""
currentVal.setData(translations.data[currentLang])
})
)
onDestroy(
currentVal.addCallbackAndRunD((v) => {
update()
})
)
</script>
<div class="flex font-bold space-x-1 m-1 mt-2 interactive">
<div class="interactive m-1 mt-2 flex space-x-1 font-bold">
<span>
{prefix}
{prefix}
</span>
<select bind:value={$currentLang}>
{#each allLanguages as language}
@ -58,8 +62,13 @@
</option>
{/each}
</select>
<ValidatedInput type="string" cls="w-full" value={currentVal} on:submit={() => dispatch("submit")} />
<ValidatedInput
type="string"
cls="w-full"
value={currentVal}
on:submit={() => dispatch("submit")}
/>
<span>
{postfix}
{postfix}
</span>
</div>

55
src/UI/InputElement/InputHelper.svelte
View file

@ -4,50 +4,49 @@
* Note that all values are stringified
*/
import { UIEventSource } from "../../Logic/UIEventSource";
import type { ValidatorType } from "./Validators";
import InputHelpers from "./InputHelpers";
import ToSvelte from "../Base/ToSvelte.svelte";
import type { Feature } from "geojson";
import { createEventDispatcher } from "svelte";
import ImageHelper from "./Helpers/ImageHelper.svelte";
import TranslationInput from "./Helpers/TranslationInput.svelte";
import TagInput from "./Helpers/TagInput.svelte";
import SimpleTagInput from "./Helpers/SimpleTagInput.svelte";
import DirectionInput from "./Helpers/DirectionInput.svelte";
import DateInput from "./Helpers/DateInput.svelte";
import ColorInput from "./Helpers/ColorInput.svelte";
import OpeningHoursInput from "./Helpers/OpeningHoursInput.svelte";
import { UIEventSource } from "../../Logic/UIEventSource"
import type { ValidatorType } from "./Validators"
import InputHelpers from "./InputHelpers"
import ToSvelte from "../Base/ToSvelte.svelte"
import type { Feature } from "geojson"
import { createEventDispatcher } from "svelte"
import ImageHelper from "./Helpers/ImageHelper.svelte"
import TranslationInput from "./Helpers/TranslationInput.svelte"
import TagInput from "./Helpers/TagInput.svelte"
import SimpleTagInput from "./Helpers/SimpleTagInput.svelte"
import DirectionInput from "./Helpers/DirectionInput.svelte"
import DateInput from "./Helpers/DateInput.svelte"
import ColorInput from "./Helpers/ColorInput.svelte"
import OpeningHoursInput from "./Helpers/OpeningHoursInput.svelte"
export let type: ValidatorType;
export let value: UIEventSource<string | object>;
export let type: ValidatorType
export let value: UIEventSource<string | object>
export let feature: Feature;
export let args: (string | number | boolean)[] = undefined;
export let feature: Feature
export let args: (string | number | boolean)[] = undefined
let properties = { feature, args: args ?? [] };
let properties = { feature, args: args ?? [] }
let dispatch = createEventDispatcher<{
selected
}>();
}>()
</script>
{#if type === "translation" }
{#if type === "translation"}
<TranslationInput {value} on:submit {args} />
{:else if type === "direction"}
<DirectionInput {value} mapProperties={InputHelpers.constructMapProperties(properties)} />
{:else if type === "date"}
<DateInput { value } />
<DateInput {value} />
{:else if type === "color"}
<ColorInput { value } />
<ColorInput {value} />
{:else if type === "image"}
<ImageHelper { value } />
<ImageHelper {value} />
{:else if type === "tag"}
<TagInput { value } on:submit />
<TagInput {value} on:submit />
{:else if type === "simple_tag"}
<SimpleTagInput { value } {args} on:submit />
<SimpleTagInput {value} {args} on:submit />
{:else if type === "opening_hours"}
<OpeningHoursInput { value } />
<OpeningHoursInput {value} />
{:else if type === "wikidata"}
<ToSvelte construct={() => InputHelpers.constructWikidataHelper(value, properties)} />
{/if}

249
src/UI/InputElement/ValidatedInput.svelte
View file

@ -1,145 +1,156 @@
<script lang="ts">
import {UIEventSource} from "../../Logic/UIEventSource"
import type {ValidatorType} from "./Validators"
import Validators from "./Validators"
import {ExclamationIcon} from "@rgossiaux/svelte-heroicons/solid"
import {Translation} from "../i18n/Translation"
import {createEventDispatcher, onDestroy} from "svelte"
import {Validator} from "./Validator"
import {Unit} from "../../Models/Unit"
import UnitInput from "../Popup/UnitInput.svelte"
import {Utils} from "../../Utils";
import { twMerge } from "tailwind-merge";
import { UIEventSource } from "../../Logic/UIEventSource"
import type { ValidatorType } from "./Validators"
import Validators from "./Validators"
import { ExclamationIcon } from "@rgossiaux/svelte-heroicons/solid"
import { Translation } from "../i18n/Translation"
import { createEventDispatcher, onDestroy } from "svelte"
import { Validator } from "./Validator"
import { Unit } from "../../Models/Unit"
import UnitInput from "../Popup/UnitInput.svelte"
import { Utils } from "../../Utils"
import { twMerge } from "tailwind-merge"
export let type: ValidatorType
export let feedback: UIEventSource<Translation> | undefined = undefined
export let cls : string = undefined
export let cls: string = undefined
export let getCountry: () => string | undefined
export let placeholder: string | Translation | undefined
export let unit: Unit = undefined
export let value: UIEventSource<string>
/**
* Internal state bound to the input element.
*
* This is only copied to 'value' when appropriate so that no invalid values leak outside;
* Additionally, the unit is added when copying
*/
let _value = new UIEventSource(value.data ?? "")
export let value: UIEventSource<string>
/**
* Internal state bound to the input element.
*
* This is only copied to 'value' when appropriate so that no invalid values leak outside;
* Additionally, the unit is added when copying
*/
let _value = new UIEventSource(value.data ?? "")
let validator: Validator = Validators.get(type ?? "string")
if(validator === undefined){
console.warn("Didn't find a validator for type", type)
}
let selectedUnit: UIEventSource<string> = new UIEventSource<string>(undefined)
let _placeholder = placeholder ?? validator?.getPlaceholder() ?? type
let validator: Validator = Validators.get(type ?? "string")
if (validator === undefined) {
console.warn("Didn't find a validator for type", type)
}
let selectedUnit: UIEventSource<string> = new UIEventSource<string>(undefined)
let _placeholder = placeholder ?? validator?.getPlaceholder() ?? type
function initValueAndDenom() {
if (unit && value.data) {
const [v, denom] = unit?.findDenomination(value.data, getCountry)
if (denom) {
_value.setData(v)
selectedUnit.setData(denom.canonical)
} else {
_value.setData(value.data ?? "")
}
} else {
_value.setData(value.data ?? "")
}
function initValueAndDenom() {
if (unit && value.data) {
const [v, denom] = unit?.findDenomination(value.data, getCountry)
if (denom) {
_value.setData(v)
selectedUnit.setData(denom.canonical)
} else {
_value.setData(value.data ?? "")
}
} else {
_value.setData(value.data ?? "")
}
}
initValueAndDenom()
$: {
// The type changed -> reset some values
validator = Validators.get(type ?? "string")
_placeholder = placeholder ?? validator?.getPlaceholder() ?? type
feedback?.setData(validator?.getFeedback(_value.data, getCountry))
initValueAndDenom()
}
$: {
// The type changed -> reset some values
validator = Validators.get(type ?? "string")
_placeholder = placeholder ?? validator?.getPlaceholder() ?? type
feedback?.setData(validator?.getFeedback(_value.data, getCountry))
initValueAndDenom()
function setValues() {
// Update the value stores
const v = _value.data
if (!validator?.isValid(v, getCountry) || v === "") {
feedback?.setData(validator?.getFeedback(v, getCountry))
value.setData("")
return
}
function setValues() {
// Update the value stores
const v = _value.data
if (!validator?.isValid(v, getCountry) || v === "") {
feedback?.setData(validator?.getFeedback(v, getCountry))
value.setData("")
return
}
if (unit !== undefined && isNaN(Number(v))) {
value.setData(undefined)
return
}
feedback?.setData(undefined)
if(selectedUnit.data){
value.setData(v + selectedUnit.data)
}else{
value.setData(v)
}
}
onDestroy(_value.addCallbackAndRun((_) => setValues()))
onDestroy(value.addCallbackAndRunD(fromUpstream => {
if(_value.data !== fromUpstream && fromUpstream !== ""){
_value.setData(fromUpstream)
}
}))
onDestroy(selectedUnit.addCallback((_) => setValues()))
if (validator === undefined) {
throw "Not a valid type (no validator found) for type '" + type+"'; did you perhaps mean one of: "+Utils.sortedByLevenshteinDistance(type, Validators.AllValidators.map(v => v.name), v => v).slice(0, 5).join(", ")
if (unit !== undefined && isNaN(Number(v))) {
value.setData(undefined)
return
}
const isValid = _value.map((v) => validator?.isValid(v, getCountry) ?? true)
let htmlElem: HTMLInputElement
let dispatch = createEventDispatcher<{ selected, submit }>()
$: {
if (htmlElem !== undefined) {
htmlElem.onfocus = () => dispatch("selected")
}
feedback?.setData(undefined)
if (selectedUnit.data) {
value.setData(v + selectedUnit.data)
} else {
value.setData(v)
}
}
/**
* Dispatches the submit, but only if the value is valid
*/
function sendSubmit(){
if(feedback?.data){
console.log("Not sending a submit as there is feedback")
}
dispatch("submit")
onDestroy(_value.addCallbackAndRun((_) => setValues()))
onDestroy(
value.addCallbackAndRunD((fromUpstream) => {
if (_value.data !== fromUpstream && fromUpstream !== "") {
_value.setData(fromUpstream)
}
})
)
onDestroy(selectedUnit.addCallback((_) => setValues()))
if (validator === undefined) {
throw (
"Not a valid type (no validator found) for type '" +
type +
"'; did you perhaps mean one of: " +
Utils.sortedByLevenshteinDistance(
type,
Validators.AllValidators.map((v) => v.name),
(v) => v
)
.slice(0, 5)
.join(", ")
)
}
const isValid = _value.map((v) => validator?.isValid(v, getCountry) ?? true)
let htmlElem: HTMLInputElement
let dispatch = createEventDispatcher<{ selected; submit }>()
$: {
if (htmlElem !== undefined) {
htmlElem.onfocus = () => dispatch("selected")
}
}
/**
* Dispatches the submit, but only if the value is valid
*/
function sendSubmit() {
if (feedback?.data) {
console.log("Not sending a submit as there is feedback")
}
dispatch("submit")
}
</script>
{#if validator?.textArea}
<form on:submit|preventDefault={() => sendSubmit()}>
<textarea
class="w-full"
bind:value={$_value}
inputmode={validator?.inputmode ?? "text"}
placeholder={_placeholder}></textarea>
</form>
<form on:submit|preventDefault={() => sendSubmit()}>
<textarea
class="w-full"
bind:value={$_value}
inputmode={validator?.inputmode ?? "text"}
placeholder={_placeholder}
/>
</form>
{:else}
<form class={twMerge("inline-flex",cls )} on:submit|preventDefault={() => sendSubmit()}>
<input
bind:this={htmlElem}
bind:value={$_value}
class="w-full"
inputmode={validator?.inputmode ?? "text"}
placeholder={_placeholder}
/>
{#if !$isValid}
<ExclamationIcon class="-ml-6 h-6 w-6"/>
{/if}
<form class={twMerge("inline-flex", cls)} on:submit|preventDefault={() => sendSubmit()}>
<input
bind:this={htmlElem}
bind:value={$_value}
class="w-full"
inputmode={validator?.inputmode ?? "text"}
placeholder={_placeholder}
/>
{#if !$isValid}
<ExclamationIcon class="-ml-6 h-6 w-6" />
{/if}
{#if unit !== undefined}
<UnitInput {unit} {selectedUnit} textValue={_value} upstreamValue={value}/>
{/if}
</form>
{#if unit !== undefined}
<UnitInput {unit} {selectedUnit} textValue={_value} upstreamValue={value} />
{/if}
</form>
{/if}

1
src/UI/InputElement/Validators/TagKeyValidator.ts
View file

@ -3,7 +3,6 @@ import { Translation } from "../../i18n/Translation"
import Translations from "../../i18n/Translations"
export default class TagKeyValidator extends Validator {
public readonly isMeta = true
constructor() {
super("key", "Validates a key, mostly that no weird characters are used")

1
src/UI/InputElement/Validators/TagValidator.ts
View file

@ -8,7 +8,6 @@ import SimpleTagValidator from "./SimpleTagValidator"
* Checks that the input conforms a JSON-encoded tag expression or a simpleTag`key=value`,
*/
export default class TagValidator extends Validator {
public readonly isMeta = true
constructor() {
super("tag", "A simple tag of the format `key=value` OR a tagExpression")

1
src/UI/InputElement/Validators/TranslationValidator.ts
View file

@ -1,7 +1,6 @@
import { Validator } from "../Validator"
export default class TranslationValidator extends Validator {
public readonly isMeta = true
constructor() {
super("translation", "Makes sure the the string is of format `Record<string, string>` ")

5
src/UI/InputElement/Validators/UrlValidator.ts
View file

@ -3,8 +3,9 @@ import { Validator } from "../Validator"
export default class UrlValidator extends Validator {
constructor(name?: string, explanation?: string) {
super(
name ??"url",
explanation?? "The validatedTextField will format URLs to always be valid and have a https://-header (even though the 'https'-part will be hidden from the user. Furthermore, some tracking parameters will be removed",
name ?? "url",
explanation ??
"The validatedTextField will format URLs to always be valid and have a https://-header (even though the 'https'-part will be hidden from the user. Furthermore, some tracking parameters will be removed",
"url"
)
}