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

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

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}