forked from MapComplete/MapComplete
First version with working level selector
This commit is contained in:
parent
15e6fde194
commit
707961761c
9 changed files with 266 additions and 121 deletions
|
|
@ -7,6 +7,11 @@ import MapState from "../../Logic/State/MapState";
|
|||
import LevelSelector from "../Input/LevelSelector";
|
||||
import FeaturePipeline from "../../Logic/FeatureSource/FeaturePipeline";
|
||||
import {Utils} from "../../Utils";
|
||||
import {TagUtils} from "../../Logic/Tags/TagUtils";
|
||||
import {RegexTag} from "../../Logic/Tags/RegexTag";
|
||||
import {Or} from "../../Logic/Tags/Or";
|
||||
import {Tag} from "../../Logic/Tags/Tag";
|
||||
import {TagsFilter} from "../../Logic/Tags/TagsFilter";
|
||||
|
||||
export default class RightControls extends Combine {
|
||||
|
||||
|
|
@ -42,26 +47,72 @@ export default class RightControls extends Combine {
|
|||
});
|
||||
|
||||
const levelsInView = state.currentBounds.map(bbox => {
|
||||
if(bbox === undefined){
|
||||
if (bbox === undefined) {
|
||||
return []
|
||||
}
|
||||
const allElements = state.featurePipeline.GetAllFeaturesAndMetaWithin(bbox);
|
||||
const allLevelsRaw: string[] = [].concat(...allElements.map(allElements => allElements.features.map(f => <string>f.properties["level"])))
|
||||
const allLevels = [].concat(...allLevelsRaw.map(l => LevelSelector.LevelsParser(l)))
|
||||
allLevels.sort((a,b) => a < b ? -1 : 1)
|
||||
const allLevels = [].concat(...allLevelsRaw.map(l => TagUtils.LevelsParser(l)))
|
||||
if(allLevels.indexOf("0") < 0){
|
||||
allLevels.push("0")
|
||||
}
|
||||
allLevels.sort((a, b) => a < b ? -1 : 1)
|
||||
return Utils.Dedup(allLevels)
|
||||
})
|
||||
state.globalFilters.data.push({
|
||||
filter: {
|
||||
currentFilter: undefined,
|
||||
state: undefined
|
||||
|
||||
}, id: "level"
|
||||
})
|
||||
const levelSelect = new LevelSelector(levelsInView)
|
||||
|
||||
levelsInView.addCallbackAndRun(levelsInView => {
|
||||
if(levelsInView.length <= 1){
|
||||
levelSelect.SetClass("invisible")
|
||||
}else{
|
||||
|
||||
const isShown = levelsInView.map(levelsInView => levelsInView.length !== 0 && state.locationControl.data.zoom >= 17,
|
||||
[state.locationControl])
|
||||
|
||||
function setLevelFilter() {
|
||||
const filter = state.globalFilters.data.find(gf => gf.id === "level")
|
||||
const oldState = filter.filter.state;
|
||||
if (!isShown.data) {
|
||||
filter.filter = {
|
||||
state: "*",
|
||||
currentFilter: undefined
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
const l = levelSelect.GetValue().data
|
||||
let neededLevel : TagsFilter = new RegexTag("level", new RegExp("(^|;)" + l + "(;|$)"));
|
||||
if(l === "0"){
|
||||
neededLevel = new Or([neededLevel, new Tag("level", "")])
|
||||
}
|
||||
filter.filter = {
|
||||
state: l,
|
||||
currentFilter: neededLevel
|
||||
}
|
||||
}
|
||||
if(filter.filter.state !== oldState){
|
||||
state.globalFilters.ping();
|
||||
console.log("Level filter is now ", filter?.filter?.currentFilter?.asHumanString(false, false, {}))
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
isShown.addCallbackAndRun(shown => {
|
||||
console.log("Is level selector shown?", shown)
|
||||
setLevelFilter()
|
||||
if (shown) {
|
||||
// levelSelect.SetClass("invisible")
|
||||
} else {
|
||||
levelSelect.RemoveClass("invisible")
|
||||
}
|
||||
})
|
||||
|
||||
levelSelect.GetValue().addCallback(_ => setLevelFilter())
|
||||
|
||||
super([levelSelect, plus, min, geolocationButton].map(el => el.SetClass("m-0.5 md:m-1")))
|
||||
super([new Combine([levelSelect]).SetClass(""), plus, min, geolocationButton].map(el => el.SetClass("m-0.5 md:m-1")))
|
||||
this.SetClass("flex flex-col items-center")
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ import Combine from "../Base/Combine";
|
|||
import Slider from "./Slider";
|
||||
import {ClickableToggle} from "./Toggle";
|
||||
import {FixedUiElement} from "../Base/FixedUiElement";
|
||||
import {Utils} from "../../Utils";
|
||||
import {VariableUiElement} from "../Base/VariableUIElement";
|
||||
|
||||
export default class LevelSelector extends VariableUiElement implements InputElement<string> {
|
||||
|
|
@ -16,11 +15,15 @@ export default class LevelSelector extends VariableUiElement implements InputEle
|
|||
}) {
|
||||
const value = options?.value ?? new UIEventSource<string>(undefined)
|
||||
super(Stores.ListStabilized(currentLevels).map(levels => {
|
||||
console.log("CUrrent levels are", levels)
|
||||
let slider = new Slider(0, levels.length - 1, {vertical: true});
|
||||
slider.SetClass("flex m-1 elevatorslider mb-0 mt-8").SetStyle("height: " + 2.5 * levels.length + "rem ")
|
||||
const toggleClass = "flex border-2 border-blue-500 w-10 h-10 place-content-center items-center"
|
||||
const toggleClass = "flex border-2 border-blue-500 w-10 h-10 place-content-center items-center border-box"
|
||||
slider.SetClass("flex elevator w-10").SetStyle(`height: ${2.5 * levels.length}rem; background: #00000000`)
|
||||
|
||||
const values = levels.map((data, i) => new ClickableToggle(
|
||||
new FixedUiElement(data).SetClass("active bg-subtle " + toggleClass), new FixedUiElement(data).SetClass(toggleClass), slider.GetValue().sync(
|
||||
new FixedUiElement(data).SetClass("font-bold active bg-subtle " + toggleClass),
|
||||
new FixedUiElement(data).SetClass("normal-background " + toggleClass),
|
||||
slider.GetValue().sync(
|
||||
(sliderVal) => {
|
||||
return sliderVal === i
|
||||
},
|
||||
|
|
@ -30,11 +33,13 @@ export default class LevelSelector extends VariableUiElement implements InputEle
|
|||
}
|
||||
))
|
||||
.ToggleOnClick()
|
||||
.SetClass("flex flex-column ml-5 bg-slate-200 w-10 h-10 valuesContainer"))
|
||||
.SetClass("flex w-10 h-10"))
|
||||
|
||||
const combine = new Combine([new Combine(values).SetClass("mt-8"), slider])
|
||||
combine.SetClass("flex flex-row h-14");
|
||||
values.reverse(/* This is a new list, no side-effects */)
|
||||
const combine = new Combine([new Combine(values), slider])
|
||||
combine.SetClass("flex flex-row overflow-hidden");
|
||||
|
||||
|
||||
slider.GetValue().addCallbackAndRun(i => {
|
||||
if (currentLevels?.data === undefined) {
|
||||
return
|
||||
|
|
@ -47,6 +52,8 @@ export default class LevelSelector extends VariableUiElement implements InputEle
|
|||
})
|
||||
return combine
|
||||
}))
|
||||
|
||||
this._value = value
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -59,35 +66,5 @@ export default class LevelSelector extends VariableUiElement implements InputEle
|
|||
}
|
||||
|
||||
|
||||
/**
|
||||
* Parses a level specifier to the various available levels
|
||||
*
|
||||
* LevelSelector.LevelsParser("0") // => ["0"]
|
||||
* LevelSelector.LevelsParser("1") // => ["1"]
|
||||
* LevelSelector.LevelsParser("0;2") // => ["0","2"]
|
||||
* LevelSelector.LevelsParser("0-5") // => ["0","1","2","3","4","5"]
|
||||
* LevelSelector.LevelsParser("0") // => ["0"]
|
||||
*/
|
||||
public static LevelsParser(level: string): string[] {
|
||||
let spec = [level]
|
||||
spec = [].concat(...spec.map(s => s.split(";")))
|
||||
spec = [].concat(...spec.map(s => {
|
||||
s = s.trim()
|
||||
if (s.indexOf("-") < 0) {
|
||||
return s
|
||||
}
|
||||
const [start, end] = s.split("-").map(s => Number(s.trim()))
|
||||
if (isNaN(start) || isNaN(end)) {
|
||||
return undefined
|
||||
}
|
||||
const values = []
|
||||
for (let i = start; i <= end; i++) {
|
||||
values.push(i + "")
|
||||
}
|
||||
return values
|
||||
}))
|
||||
return Utils.NoNull(spec);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue