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

Refactoring: allow to reuse units, move all units into central file

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-12-12 03:46:51 +01:00
parent 067fb549c1
commit 94e07d5b13
30 changed files with 1495 additions and 1307 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,95 +1,102 @@
<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 getCountry: () => string | undefined
export let placeholder: string | Translation | undefined
export let unit: Unit = undefined
export let value: UIEventSource<string>
export let type: ValidatorType;
export let feedback: UIEventSource<Translation> | undefined = undefined;
export let cls: string = undefined;
export let getCountry: () => string | undefined;
export let placeholder: string | Translation | undefined;
export let unit: Unit = undefined;
/**
* Valid state, exported to the calling component
*/
export let value: UIEventSource<string | undefined>;
/**
* 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 _value = new UIEventSource(value.data ?? "");
let validator: Validator = Validators.get(type ?? "string")
let validator: Validator = Validators.get(type ?? "string");
if (validator === undefined) {
console.warn("Didn't find a validator for type", type)
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 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)
const [v, denom] = unit?.findDenomination(value.data, getCountry);
if (denom) {
_value.setData(v)
selectedUnit.setData(denom.canonical)
_value.setData(v);
selectedUnit.setData(denom.canonical);
} else {
_value.setData(value.data ?? "")
_value.setData(value.data ?? "");
}
} else {
_value.setData(value.data ?? "")
_value.setData(value.data ?? "");
}
}
initValueAndDenom()
initValueAndDenom();
$: {
// The type changed -> reset some values
validator = Validators.get(type ?? "string")
validator = Validators.get(type ?? "string");
_placeholder = placeholder ?? validator?.getPlaceholder() ?? type
feedback?.setData(validator?.getFeedback(_value.data, getCountry))
_placeholder = placeholder ?? validator?.getPlaceholder() ?? type;
feedback?.setData(validator?.getFeedback(_value.data, getCountry));
initValueAndDenom()
initValueAndDenom();
}
function setValues() {
// Update the value stores
const v = _value.data
const v = _value.data;
if (!validator?.isValid(v, getCountry) || v === "") {
feedback?.setData(validator?.getFeedback(v, getCountry))
value.setData("")
return
feedback?.setData(validator?.getFeedback(v, getCountry));
value.setData("");
return;
}
if (unit !== undefined && isNaN(Number(v))) {
value.setData(undefined)
return
value.setData(undefined);
return;
}
feedback?.setData(undefined)
feedback?.setData(undefined);
if (selectedUnit.data) {
value.setData(v + selectedUnit.data)
value.setData(unit.toOsm(v, selectedUnit.data))
} else {
value.setData(v)
value.setData(v);
}
}
onDestroy(_value.addCallbackAndRun((_) => setValues()))
onDestroy(
value.addCallbackAndRunD((fromUpstream) => {
if (_value.data !== fromUpstream && fromUpstream !== "") {
_value.setData(fromUpstream)
}
})
)
onDestroy(selectedUnit.addCallback((_) => setValues()))
onDestroy(_value.addCallbackAndRun((_) => setValues()));
if (unit === undefined) {
onDestroy(
value.addCallbackAndRunD((fromUpstream) => {
if (_value.data !== fromUpstream && fromUpstream !== "") {
_value.setData(fromUpstream);
}
})
);
}else{
// Handled by the UnitInput
}
onDestroy(selectedUnit.addCallback((_) => setValues()));
if (validator === undefined) {
throw (
"Not a valid type (no validator found) for type '" +
@ -102,17 +109,17 @@
)
.slice(0, 5)
.join(", ")
)
);
}
const isValid = _value.map((v) => validator?.isValid(v, getCountry) ?? true)
const isValid = _value.map((v) => validator?.isValid(v, getCountry) ?? true);
let htmlElem: HTMLInputElement
let htmlElem: HTMLInputElement;
let dispatch = createEventDispatcher<{ selected; submit }>()
let dispatch = createEventDispatcher<{ selected; submit }>();
$: {
if (htmlElem !== undefined) {
htmlElem.onfocus = () => dispatch("selected")
htmlElem.onfocus = () => dispatch("selected");
}
}
@ -121,9 +128,9 @@
*/
function sendSubmit() {
if (feedback?.data) {
console.log("Not sending a submit as there is feedback")
console.log("Not sending a submit as there is feedback");
}
dispatch("submit")
dispatch("submit");
}
</script>
@ -150,7 +157,7 @@
{/if}
{#if unit !== undefined}
<UnitInput {unit} {selectedUnit} textValue={_value} upstreamValue={value} />
<UnitInput {unit} {selectedUnit} textValue={_value} upstreamValue={value} {getCountry} />
{/if}
</form>
{/if}

73
src/UI/Popup/UnitInput.svelte
View file

@ -1,56 +1,67 @@
<script lang="ts">
import { Unit } from "../../Models/Unit"
import { Store, UIEventSource } from "../../Logic/UIEventSource"
import Tr from "../Base/Tr.svelte"
import { onDestroy } from "svelte"
import { Unit } from "../../Models/Unit";
import { Store, UIEventSource } from "../../Logic/UIEventSource";
import Tr from "../Base/Tr.svelte";
import { onDestroy, onMount } from "svelte";
import { Denomination } from "../../Models/Denomination";
export let unit: Unit
export let unit: Unit;
/**
* The current value of the input field
* Not necessarily a correct number
* Not necessarily a correct number, should not contain the denomination
*/
export let textValue: UIEventSource<string>
export let textValue: UIEventSource<string>;
/**
* The actual _valid_ value that is upstreamed
* The actual _valid_ value that is upstreamed, including the denomination
*/
export let upstreamValue: Store<string>
export let upstreamValue: Store<string>;
let isSingle: Store<boolean> = textValue.map((v) => Number(v) === 1)
let isSingle: Store<boolean> = textValue.map((v) => Number(v) === 1);
export let selectedUnit: UIEventSource<string> = new UIEventSource<string>(undefined)
export let getCountry = () => "be"
console.log("Unit", unit)
export let selectedUnit: UIEventSource<string> = new UIEventSource<string>(undefined);
export let getCountry = () => "?";
onMount(() => {
console.log("Setting selected unit based on country", getCountry(), upstreamValue.data)
if(upstreamValue.data === undefined || upstreamValue.data === ""){
// Init the selected unit
let denomination: Denomination = unit.getDefaultDenomination(getCountry);
console.log("Found denom", denomination.canonical)
selectedUnit.setData(denomination.canonical)
}
})
onDestroy(
upstreamValue.addCallbackAndRun((v) => {
if (v === undefined) {
if (!selectedUnit.data) {
selectedUnit.setData(unit.getDefaultDenomination(getCountry).canonical)
}
if(v === undefined || v === ""){
return
}
const selected = unit.findDenomination(v, getCountry)
if (selected === undefined) {
selectedUnit.setData(unit.getDefaultDenomination(getCountry).canonical)
return
let denomination: Denomination = unit.getDefaultDenomination(getCountry);
const selected = unit.findDenomination(v, getCountry);
if(selected){
denomination = selected[1];
}
const [value, denomination] = selected
selectedUnit.setData(denomination.canonical)
return
selectedUnit.setData(denomination.canonical);
})
)
);
onDestroy(
textValue.addCallbackAndRunD((v) => {
// Fallback in case that the user manually types a denomination
const [value, denomination] = unit.findDenomination(v, getCountry)
const [value, denomination] = unit.findDenomination(v, getCountry);
if (value === undefined || denomination === undefined) {
return
return;
}
textValue.setData(value)
selectedUnit.setData(denomination.canonical)
if(value === v){
// The input value actually didn't have a denomination typed out - so lets ignore this one
// If a denomination is given, it is the default value anyway
return;
}
textValue.setData(value);
selectedUnit.setData(denomination.canonical);
})
)
);
</script>
<select bind:value={$selectedUnit}>
@ -59,7 +70,7 @@
{#if $isSingle}
<Tr t={denom.humanSingular} />
{:else}
<Tr t={denom.human} />
<Tr t={denom.human.Subs({quantity: ""})} />
{/if}
</option>
{/each}

7
src/UI/SpecialVisualizations.ts
View file

@ -83,6 +83,7 @@ import NearbyImages from "./Image/NearbyImages.svelte"
import NearbyImagesCollapsed from "./Image/NearbyImagesCollapsed.svelte"
import { svelte } from "@sveltejs/vite-plugin-svelte"
import MoveWizard from "./Popup/MoveWizard.svelte"
import { Unit } from "../Models/Unit"
class NearbyImageVis implements SpecialVisualization {
// Class must be in SpecialVisualisations due to weird cyclical import that breaks the tests
@ -890,7 +891,7 @@ export default class SpecialVisualizations {
if (value === undefined) {
return undefined
}
const allUnits = [].concat(
const allUnits: Unit[] = [].concat(
...(state?.layout?.layers?.map((lyr) => lyr.units) ?? [])
)
const unit = allUnits.filter((unit) =>
@ -899,7 +900,9 @@ export default class SpecialVisualizations {
if (unit === undefined) {
return value
}
return unit.asHumanLongValue(value)
const getCountry = () => tagSource.data._country
const [v, denom] = unit.findDenomination(value, getCountry)
return unit.asHumanLongValue(v, getCountry)
})
)
},

2
src/UI/i18n/Translations.ts
View file

@ -131,7 +131,7 @@ export default class Translations {
}
static isProbablyATranslation(transl: any) {
if (typeof transl !== "object") {
if (!transl || typeof transl !== "object") {
return false
}
if (Object.keys(transl).length == 0) {