Add quickswitch for lengthinput

This commit is contained in:
pietervdvn 2022-06-19 19:10:56 +02:00
parent 470e9acc64
commit 56be8f9b25
3 changed files with 25 additions and 16 deletions

View file

@ -8,6 +8,7 @@ import {GeoOperations} from "../../Logic/GeoOperations";
import Minimap, {MinimapObj} from "../Base/Minimap"; import Minimap, {MinimapObj} from "../Base/Minimap";
import BackgroundMapSwitch from "../BigComponents/BackgroundMapSwitch"; import BackgroundMapSwitch from "../BigComponents/BackgroundMapSwitch";
import BaseUIElement from "../BaseUIElement"; import BaseUIElement from "../BaseUIElement";
import CR = Mocha.reporters.Base.cursor.CR;
/** /**
@ -61,27 +62,28 @@ export default class LengthInput extends InputElement<string> {
}) })
} }
const crosshair = new Combine([Svg.length_crosshair_svg().SetStyle(
`position: absolute;top: 0;left: 0;transform:rotate(${this.value.data ?? 0}deg);`)
]) .SetClass("block length-crosshair-svg relative")
.SetStyle("z-index: 1000; visibility: hidden")
const element = new Combine([ const element = new Combine([
new Combine([Svg.length_crosshair_svg().SetStyle( crosshair,
`position: absolute;top: 0;left: 0;transform:rotate(${this.value.data ?? 0}deg);`)
])
.SetClass("block length-crosshair-svg relative")
.SetStyle("z-index: 1000; visibility: hidden"),
layerControl?.SetStyle("position: absolute; bottom: 0.25rem; left: 0.25rem; z-index: 1000"), layerControl?.SetStyle("position: absolute; bottom: 0.25rem; left: 0.25rem; z-index: 1000"),
map?.SetClass("w-full h-full block absolute top-0 left-O overflow-hidden"), map?.SetClass("w-full h-full block absolute top-0 left-O overflow-hidden"),
]) ])
.SetClass("relative block bg-white border border-black rounded-3xl overflow-hidden") .SetClass("relative block bg-white border border-black rounded-xl overflow-hidden")
.ConstructElement() .ConstructElement()
this.RegisterTriggers(element, map?.leafletMap) this.RegisterTriggers(map?.ConstructElement(), map?.leafletMap, crosshair.ConstructElement())
element.style.overflow = "hidden" element.style.overflow = "hidden"
element.style.display = "block" element.style.display = "block"
return element return element
} }
private RegisterTriggers(htmlElement: HTMLElement, leafletMap: UIEventSource<L.Map>) { private RegisterTriggers(htmlElement: HTMLElement, leafletMap: UIEventSource<L.Map>, measurementCrosshair: HTMLElement) {
let firstClickXY: [number, number] = undefined let firstClickXY: [number, number] = undefined
let lastClickXY: [number, number] = undefined let lastClickXY: [number, number] = undefined
@ -123,7 +125,7 @@ export default class LengthInput extends InputElement<string> {
} }
const measurementCrosshair = htmlElement.getElementsByClassName("length-crosshair-svg")[0] as HTMLElement // const measurementCrosshair = htmlElement.getElementsByClassName("length-crosshair-svg")[0] as HTMLElement
const measurementCrosshairInner: HTMLElement = <HTMLElement>measurementCrosshair.firstChild const measurementCrosshairInner: HTMLElement = <HTMLElement>measurementCrosshair.firstChild
if (firstClickXY === undefined) { if (firstClickXY === undefined) {

View file

@ -3,7 +3,7 @@ import * as EmailValidator from "email-validator";
import {parsePhoneNumberFromString} from "libphonenumber-js"; import {parsePhoneNumberFromString} from "libphonenumber-js";
import {InputElement} from "./InputElement"; import {InputElement} from "./InputElement";
import {TextField} from "./TextField"; import {TextField} from "./TextField";
import {UIEventSource} from "../../Logic/UIEventSource"; import {Store, UIEventSource} from "../../Logic/UIEventSource";
import CombinedInputElement from "./CombinedInputElement"; import CombinedInputElement from "./CombinedInputElement";
import SimpleDatePicker from "./SimpleDatePicker"; import SimpleDatePicker from "./SimpleDatePicker";
import OpeningHoursInput from "../OpeningHours/OpeningHoursInput"; import OpeningHoursInput from "../OpeningHours/OpeningHoursInput";
@ -556,7 +556,8 @@ class LengthTextField extends TextFieldDef {
return !isNaN(t) return !isNaN(t)
} }
inputHelper = (value, options) => { inputHelper = (value: UIEventSource<string>, options:
{ location?: [number,number]; args?: string[]; feature?: any; mapBackgroundLayer?: Store<BaseLayer>; }) => {
options = options ?? {} options = options ?? {}
options.location = options.location ?? [0, 0] options.location = options.location ?? [0, 0]
@ -590,7 +591,8 @@ class LengthTextField extends TextFieldDef {
location, new UIEventSource<string[]>(args[1].split(",")) location, new UIEventSource<string[]>(args[1].split(","))
) )
} }
const li = new LengthInput(options?.mapBackgroundLayer, location, value) const background = options?.mapBackgroundLayer
const li = new LengthInput(new UIEventSource<BaseLayer>(background.data), location, value)
li.SetStyle("height: 20rem;") li.SetStyle("height: 20rem;")
return li; return li;
} }
@ -864,7 +866,12 @@ export default class ValidatedTextField {
] ]
public static allTypes: Map<string, TextFieldDef> = ValidatedTextField.allTypesDict(); public static allTypes: Map<string, TextFieldDef> = ValidatedTextField.allTypesDict();
public static ForType(type: string = "string"): TextFieldDef { public static ForType(type: string = "string"): TextFieldDef {
return ValidatedTextField.allTypes.get(type) const def = ValidatedTextField.allTypes.get(type)
if(def === undefined){
console.warn("Something tried to load a validated text field named",type, "but this type does not exist")
return this.ForType()
}
return def
} }
public static HelpText(): BaseUIElement { public static HelpText(): BaseUIElement {

View file

@ -413,7 +413,7 @@ export default class TagRenderingQuestion extends Combine {
const tagsData = tags.data; const tagsData = tags.data;
const feature = state?.allElements?.ContainingFeatures?.get(tagsData.id) const feature = state?.allElements?.ContainingFeatures?.get(tagsData.id)
const center = feature != undefined ? GeoOperations.centerpointCoordinates(feature) : [0,0] const center = feature != undefined ? GeoOperations.centerpointCoordinates(feature) : [0,0]
const input: InputElement<string> = ValidatedTextField.ForType(configuration.freeform.type).ConstructInputElement({ const input: InputElement<string> = ValidatedTextField.ForType(configuration.freeform.type)?.ConstructInputElement({
country: () => tagsData._country, country: () => tagsData._country,
location: [center[1], center[0]], location: [center[1], center[0]],
mapBackgroundLayer: state?.backgroundLayer, mapBackgroundLayer: state?.backgroundLayer,
@ -425,10 +425,10 @@ export default class TagRenderingQuestion extends Combine {
}); });
// Init with correct value // Init with correct value
input.GetValue().setData(tagsData[freeform.key] ?? freeform.default); input?.GetValue().setData(tagsData[freeform.key] ?? freeform.default);
// Add a length check // Add a length check
input.GetValue().addCallbackD((v : string | undefined) => { input?.GetValue().addCallbackD((v : string | undefined) => {
if(v?.length >= 255){ if(v?.length >= 255){
feedback.setData(Translations.t.validation.tooLong.Subs({count: v.length})) feedback.setData(Translations.t.validation.tooLong.Subs({count: v.length}))
} }