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

added filter ui

Browse source
This commit is contained in:
Bavo Vanderghote 2020-07-20 16:57:46 +02:00
parent 4abe74fbf1
commit 0f2a2c651a
4 changed files with 55 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

9
UI/Base/CheckBox.ts
View file

@ -1,17 +1,18 @@
import {UIElement} from "../UIElement"; import {UIElement} from "../UIElement";
import {UIEventSource} from "../UIEventSource"; import {UIEventSource} from "../UIEventSource";
import { FilteredLayer } from "../../Logic/FilteredLayer";
export class CheckBox extends UIElement{ export class CheckBox extends UIElement{
constructor(data: UIEventSource<boolean>) { constructor(data: UIEventSource<boolean>, name: String) {
super(data); super(data);
this.data = data;
this.name = name
} }
protected InnerRender(): string { protected InnerRender(): string {
return ""; return `${this.data.data? `<svg class="checkbox__check" width="28" height="20" viewBox="0 0 28 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.5 8L11.5 17L25.5 3" stroke="#003B8B" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/></svg><p class="checkbox__label--checked">${this.name}</p>`: `<p class="checkbox__label--unchecked">${this.name}</p>`}`;
} }
} }

24
index.css
View file

@ -254,6 +254,30 @@ form {
pointer-events: all; pointer-events: all;
} }
#filterui {
padding: 2em;
padding-top: 1em;
padding-bottom: 1em;
z-index: 5000;
background-color: white;
border-radius: 2em;
pointer-events: all;
list-style: none;
}
#filterui li span {
display: flex;
align-items: center;
}
.checkbox__label--checked {
margin-left: .7rem;
}
.checkbox__label--unchecked {
margin-left: 2.45rem;
}
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
#messagesbox-wrapper { #messagesbox-wrapper {

2
index.html
View file

@ -36,6 +36,8 @@
<div id="collapseButton"></div> <div id="collapseButton"></div>
<div id="messagesbox"></div> <div id="messagesbox"></div>
</div> </div>
<ul id="filterui">
</ul>
</div> </div>

25
index.ts
View file

@ -21,7 +21,9 @@ import {VariableUiElement} from "./UI/Base/VariableUIElement";
import {SearchAndGo} from "./UI/SearchAndGo"; import {SearchAndGo} from "./UI/SearchAndGo";
import {CollapseButton} from "./UI/Base/CollapseButton"; import {CollapseButton} from "./UI/Base/CollapseButton";
import {AllKnownLayouts} from "./Customizations/AllKnownLayouts"; import {AllKnownLayouts} from "./Customizations/AllKnownLayouts";
import {All} from "./Customizations/Layouts/All"; import { All } from "./Customizations/Layouts/All";
import {CheckBox} from "./UI/Base/CheckBox";
import { DrinkingWater } from "./Customizations/Layers/DrinkingWater";
// --------------------- Read the URL parameters ----------------- // --------------------- Read the URL parameters -----------------
@ -48,7 +50,7 @@ if (location.hostname === "localhost" || location.hostname === "127.0.0.1") {
// ----------------- SELECT THE RIGHT QUESTSET ----------------- // ----------------- SELECT THE RIGHT QUESTSET -----------------
let defaultLayout = "buurtnatuur" let defaultLayout = "walkbybrussels"
// Run over all questsets. If a part of the URL matches a searched-for part in the layout, it'll take that as the default // Run over all questsets. If a part of the URL matches a searched-for part in the layout, it'll take that as the default
@ -177,6 +179,9 @@ for (const layer of layoutToUse.layers) {
} }
addButtons.push(addButton); addButtons.push(addButton);
flayers.push(flayer); flayers.push(flayer);
console.log(flayers);
} }
const layerUpdater = new LayerUpdater(bm, minZoom, flayers); const layerUpdater = new LayerUpdater(bm, minZoom, flayers);
@ -277,3 +282,19 @@ new GeoLocationHandler(bm).AttachTo("geolocate-button");
locationControl.ping(); locationControl.ping();
messageBox.update(); messageBox.update();
// --------------- Setting up filter ui --------
for (let i = 0; i < flayers.length; i++) {
const listItem = document.createElement(`li`);
listItem.setAttribute(`id`,`${flayers[i].name}`)
document.querySelector(`#filterui`).appendChild(listItem);
const eventSource = new UIEventSource(flayers[i].isDisplayed.data);
new CheckBox(eventSource, flayers[i].name)
.onClick(() => {
eventSource.setData(!eventSource.data);
flayers[i].isDisplayed.setData(eventSource.data);
})
.AttachTo(flayers[i].name);
}