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

WIP

Browse source
This commit is contained in:
Pieter Vander Vennet 2022-07-05 13:44:36 +02:00
parent 4246221e8e
commit dd992a1e0d
2 changed files with 248 additions and 96 deletions
Download patch file Download diff file Expand all files Collapse all files

255
test.ts
View file

@ -1,51 +1,216 @@
import {UIEventSource} from "./Logic/UIEventSource";
import TagRenderingQuestion from "./UI/Popup/TagRenderingQuestion";
import TagRenderingConfig from "./Models/ThemeConfig/TagRenderingConfig";
import {RadioButton} from "./UI/Input/RadioButton";
import {FixedInputElement} from "./UI/Input/FixedInputElement";
import * as shops from "./assets/generated/layers/shops.json"
import Combine from "./UI/Base/Combine";
import Img from "./UI/Base/Img";
import BaseUIElement from "./UI/BaseUIElement";
import Svg from "./Svg";
import {TextField} from "./UI/Input/TextField";
import {Store, UIEventSource} from "./Logic/UIEventSource";
import {VariableUiElement} from "./UI/Base/VariableUIElement";
import ValidatedTextField from "./UI/Input/ValidatedTextField";
import VariableInputElement from "./UI/Input/VariableInputElement";
import Locale from "./UI/i18n/Locale";
import LanguagePicker from "./UI/LanguagePicker";
import {InputElement} from "./UI/Input/InputElement";
import {UIElement} from "./UI/UIElement";
import Translations from "./UI/i18n/Translations";
import TagRenderingConfig, {Mapping} from "./Models/ThemeConfig/TagRenderingConfig";
import {MappingConfigJson} from "./Models/ThemeConfig/Json/QuestionableTagRenderingConfigJson";
import {FixedUiElement} from "./UI/Base/FixedUiElement";
import {TagsFilter} from "./Logic/Tags/TagsFilter";
const config = new TagRenderingConfig({
question: "What is the name?",
render: "The name is {name}",
freeform: {
key: 'name',
inline:true
},
mappings:[
{
if:"noname=yes",
then: "This feature has no name"
const mappingsRaw: MappingConfigJson[] = <any>shops.tagRenderings.find(tr => tr.id == "shop_types").mappings
const mappings = mappingsRaw.map((m, i) => TagRenderingConfig.ExtractMapping(m, i, "test", "test"))
export class SelfHidingToggle extends UIElement implements InputElement<boolean> {
private readonly _shown: BaseUIElement;
private readonly _searchTerms: Record<string, string[]>;
private readonly _search: Store<string>;
private readonly _selected: UIEventSource<boolean>
public constructor(
shown: string | BaseUIElement,
mainTerm: Record<string, string>,
search: Store<string>,
searchTerms?: Record<string, string[]>,
selected: UIEventSource<boolean> = new UIEventSource<boolean>(false)
) {
super();
this._shown = Translations.W(shown);
this._search = search;
this._searchTerms = {};
for (const lng in searchTerms ?? []) {
if (lng === "_context") {
continue
}
this._searchTerms[lng] = searchTerms[lng].map(t => t.trim().toLowerCase())
}
]
})
const tags = new UIEventSource<any>({
name: "current feature name"
})
/*new TagRenderingQuestion(
tags, config, undefined).AttachTo("maindiv")*/
const options = new UIEventSource<string[]>([])
const rb =
new VariableInputElement(
options.map(options => {
console.trace("Construction an input element for", options)
return new RadioButton(
[
...options.map(o => new FixedInputElement(o,o)),
new FixedInputElement<string>("abc", "abc"),
ValidatedTextField.ForType().ConstructInputElement()
])
for (const lng in mainTerm) {
if (lng === "_context") {
continue
}
this._searchTerms[lng] = [mainTerm[lng]].concat(this._searchTerms[lng] ?? [])
}
)
this._selected = selected;
}
GetValue(): UIEventSource<boolean> {
return this._selected
}
IsValid(t: boolean): boolean {
return true;
}
protected InnerRender(): string | BaseUIElement {
let el: BaseUIElement = this._shown;
const selected = this._selected;
const search = this._search;
const terms = this._searchTerms;
const applySearch = () => {
const s = search.data?.trim()?.toLowerCase()
if (s === undefined || s.length === 0 || selected.data) {
el.RemoveClass("hidden")
return;
}
if (terms[Locale.language.data].some(t => t.toLowerCase().indexOf(s) >= 0)) {
el.RemoveClass("hidden");
return;
}
el.SetClass("hidden")
}
search.addCallbackAndRun(_ => {
applySearch()
})
Locale.language.addCallback(_ => {
applySearch()
})
selected.addCallbackAndRun(selected => {
if (selected) {
el.SetClass("border-4")
el.RemoveClass("border")
el.SetStyle("margin: calc( 0.25rem )")
} else {
el.SetStyle("margin: calc( 0.25rem + 3px )")
el.SetClass("border")
el.RemoveClass("border-4")
}
applySearch()
})
el.onClick(() => selected.setData(!selected.data))
return el.SetClass("border border-black rounded-full p-1 px-4")
}
}
class SearchablePresets<T> extends Combine implements InputElement<T[]> {
private selectedElements: UIEventSource<T[]>;
constructor(
values: { show: BaseUIElement, value: T, mainTerm: Record<string, string>, searchTerms?: Record<string, string[]> }[],
mode: "select-one" | "select-many",
selectedElements: UIEventSource<T[]> = new UIEventSource<T[]>([])) {
const search = new TextField({})
const searchBar = new Combine([Svg.search_svg().SetClass("w-8"), search.SetClass("mr-4 w-full")])
.SetClass("flex rounded-full border-2 border-black items-center my-2 w-1/2")
const searchValue = search.GetValue().map(s => s?.trim()?.toLowerCase())
values = values.map(v => {
const vIsSelected = new UIEventSource(false);
selectedElements.addCallbackAndRunD(selectedElements => {
vIsSelected.setData(selectedElements.some(t => t === v.value))
})
vIsSelected.addCallback(selected => {
if (selected) {
if (mode === "select-one") {
selectedElements.setData([v.value])
} else if (!selectedElements.data.some(t => t === v.value)) {
selectedElements.data.push(v.value);
selectedElements.ping()
}
}else{
for (let i = 0; i < selectedElements.data.length; i++) {
const t = selectedElements.data[i]
if(t == v.value){
selectedElements.data.splice(i, 1)
selectedElements.ping()
break;
}
}
}
})
return {
...v,
show: new SelfHidingToggle(v.show, v.mainTerm, searchValue, v.searchTerms, vIsSelected)
};
})
super([
searchBar,
new VariableUiElement(Locale.language.map(lng => {
values.sort((a, b) => a.mainTerm[lng] < b.mainTerm[lng] ? -1 : 1)
return new Combine(values.map(e => e.show))
.SetClass("flex flex-wrap w-full")
}))
])
this.selectedElements = selectedElements;
}
public GetValue(): UIEventSource<T[]> {
return this.selectedElements;
}
IsValid(t: T[]): boolean {
return true;
}
}
function fromMapping(m: Mapping): { show: BaseUIElement, value: TagsFilter, mainTerm: Record<string, string>, searchTerms?: Record<string, string[]> } {
const el: BaseUIElement = m.then
let icon: BaseUIElement
if (m.icon !== undefined) {
icon = new Img(m.icon).SetClass("h-8 w-8 pr-2")
} else {
icon = new FixedUiElement("").SetClass("h-8 w-1")
}
const show = new Combine([
icon,
el.SetClass("block-ruby")
]).SetClass("flex items-center")
return {show, mainTerm: m.then.translations, searchTerms: m.searchTerms, value: m.if};
}
const sp = new SearchablePresets(
mappings.map(m => fromMapping(m)),
"select-one"
)
rb.AttachTo("maindiv")
rb.GetValue().addCallbackAndRun(v => console.log("Current value is",v))
new VariableUiElement(rb.GetValue()).AttachTo("extradiv")
window.setTimeout(() => {options.setData(["xyz","foo","bar"])},10000)
sp.AttachTo("maindiv")
const lp = new LanguagePicker(["en", "nl"], "")
new Combine([
new VariableUiElement(sp.GetValue().map(tf => new FixedUiElement("Selected tags: " + tf.map(tf => tf.asHumanString(false, false, {})).join(", ")))),
lp
]).SetClass("flex flex-col")
.AttachTo("extradiv")