midgard/mapcomplete
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add quickswitch for lengthinput

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

20
UI/Input/LengthInput.ts
View file

@ -8,6 +8,7 @@ import {GeoOperations} from "../../Logic/GeoOperations";
import Minimap, {MinimapObj} from "../Base/Minimap";
import BackgroundMapSwitch from "../BigComponents/BackgroundMapSwitch";
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([
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"),
crosshair,
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"),
])
.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()
this.RegisterTriggers(element, map?.leafletMap)
this.RegisterTriggers(map?.ConstructElement(), map?.leafletMap, crosshair.ConstructElement())
element.style.overflow = "hidden"
element.style.display = "block"
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 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
if (firstClickXY === undefined) {

15
UI/Input/ValidatedTextField.ts
View file

@ -3,7 +3,7 @@ import * as EmailValidator from "email-validator";
import {parsePhoneNumberFromString} from "libphonenumber-js";
import {InputElement} from "./InputElement";
import {TextField} from "./TextField";
import {UIEventSource} from "../../Logic/UIEventSource";
import {Store, UIEventSource} from "../../Logic/UIEventSource";
import CombinedInputElement from "./CombinedInputElement";
import SimpleDatePicker from "./SimpleDatePicker";
import OpeningHoursInput from "../OpeningHours/OpeningHoursInput";
@ -556,7 +556,8 @@ class LengthTextField extends TextFieldDef {
return !isNaN(t)
}
inputHelper = (value, options) => {
inputHelper = (value: UIEventSource<string>, options:
{ location?: [number,number]; args?: string[]; feature?: any; mapBackgroundLayer?: Store<BaseLayer>; }) => {
options = options ?? {}
options.location = options.location ?? [0, 0]
@ -590,7 +591,8 @@ class LengthTextField extends TextFieldDef {
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;")
return li;
}
@ -864,7 +866,12 @@ export default class ValidatedTextField {
]
public static allTypes: Map<string, TextFieldDef> = ValidatedTextField.allTypesDict();
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 {

6
UI/Popup/TagRenderingQuestion.ts
View file

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