Let it glow! widths are on a black background, various small bugfixes

This commit is contained in:
Pieter Vander Vennet 2020-09-28 00:30:39 +02:00
parent 4a09a7ced9
commit 538d129941
5 changed files with 46 additions and 29 deletions

View file

@ -74,6 +74,16 @@ export class StreetWidth extends Layout{
"<p>Er is steeds meer druk op de openbare ruimte. Voetgangers, fietsers, steps, auto's, bussen, bestelwagens, buggies, cargobikes, ... willen allemaal hun deel van de openbare ruimte.</p>" +
"" +
"<p>In deze studie nemen we Brugge onder de loep en kijken we hoe breed elke straat is én hoe breed elke straat zou moeten zijn voor een veilig én vlot verkeer.</p>" +
"<h3>Legende</h3>" +
"<span style='background: red'>&NonBreakingSpace;&NonBreakingSpace;&NonBreakingSpace;</span> Straat te smal voor veilig verkeer<br/>"+
"<span style='background: #0f0'>&NonBreakingSpace;&NonBreakingSpace;&NonBreakingSpace;</span> Straat is breed genoeg veilig verkeer<br/>"+
"<span style='background: orange'>&NonBreakingSpace;&NonBreakingSpace;&NonBreakingSpace;</span> Straat zonder voetpad, te smal als ook voetgangers plaats krijgen<br/>"+
"<span style='background: lightgrey'>&NonBreakingSpace;&NonBreakingSpace;&NonBreakingSpace;</span> Woonerf, autoluw, autoloos of enkel plaatselijk verkeer<br/>" +
"<br/>" +
"<br/>" +
"Een gestippelde lijn is een straat waar ook voor fietsers éénrichtingsverkeer geldt.<br/>" +
"Klik op een straat om meer informatie te zien."+
"<h3>Hoe gaan we verder?</h3>" +
"Verschillende ingrepen kunnen de stad teruggeven aan de inwoners en de stad leefbaarder en levendiger maken.<br/>" +
"Denk aan:" +
"<ul>" +
@ -82,7 +92,7 @@ export class StreetWidth extends Layout{
"<li>Het aantal woonerven uitbreiden</li>" +
"<li>Grotere auto's meer belasten - ze nemen immers meer parkeerruimte in.</li>" +
"<li>Laat toeristen verplicht parkeren onder het zand; een (fiets)taxi kan hen naar hun hotel brengen</li>" +
"<li>Voorzie in elke straat enkele parkeerplaatsen voor kortparkeren. Zo kunnen leveringen, iemand afzetten,... gebeuren zonder dat er een fietspad of een straat geblokkeerd wordt</li>" +
"<li>Voorzie in elke straat enkele parkeerplaatsen voor kortparkeren. Zo kunnen leveringen, iemand afzetten,... gebeuren zonder op het voetpad en fietspad te parkeren</li>" +
"</ul>");
this.icon = "./assets/bug.svg";
this.enableSearch = false;
@ -91,6 +101,7 @@ export class StreetWidth extends Layout{
this.hideFromOverview = true;
this.enableMoreQuests = false;
this.enableShareScreen = false;
this.defaultBackground = "Stadia.AlidadeSmoothDark"
this.enableBackgroundLayers = false;
}
}

View file

@ -36,6 +36,7 @@ import {LocalStorageSource} from "./Logic/Web/LocalStorageSource";
import {FromJSON} from "./Customizations/JSON/FromJSON";
import {Utils} from "./Utils";
import BackgroundSelector from "./UI/BackgroundSelector";
import AvailableBaseLayers from "./Logic/AvailableBaseLayers";
export class InitUiElements {
@ -357,12 +358,11 @@ export class InitUiElements {
let layerControlPanel: UIElement = undefined;
if (State.state.layoutToUse.data.enableBackgroundLayers) {
layerControlPanel = new BackgroundSelector(State.state);
layerControlPanel = new BackgroundSelector();
layerControlPanel.SetStyle("margin:1em");
layerControlPanel.onClick(() => { });
}
if (State.state.filteredLayers.data.length > 1) {
const layerSelection = new LayerSelection();
layerSelection.onClick(() => {
@ -375,8 +375,12 @@ export class InitUiElements {
static InitLayerSelection() {
InitUiElements.OnlyIf(State.state.featureSwitchLayers, () => {
const layerControlPanel = this.GenerateLayerControlPanel()
.SetStyle("display:block;padding:1em;border-radius:1em;");
const layerControlPanel = this.GenerateLayerControlPanel();
if (layerControlPanel === undefined) {
return;
}
layerControlPanel.SetStyle("display:block;padding:1em;border-radius:1em;");
const closeButton = new Combine([Img.openFilterButton])
.SetStyle("display:block; width: min-content; background: #e5f5ff;padding:1em; border-radius:1em;");
const checkbox = new CheckBox(
@ -451,7 +455,23 @@ export class InitUiElements {
);
State.state.bm = bm;
State.state.layerUpdater = new LayerUpdater(State.state);
State.state.availableBackgroundLayers = new AvailableBaseLayers(State.state).availableEditorLayers;
const queryParam = QueryParameters.GetQueryParameter("background", State.state.layoutToUse.data.defaultBackground);
queryParam.addCallbackAndRun((selectedId:string) => {
console.log("Selected layer is ", selectedId)
const available = State.state.availableBackgroundLayers.data;
for (const layer of available) {
if (layer.id === selectedId) {
State.state.bm.CurrentLayer.setData(layer);
}
}
})
State.state.bm.CurrentLayer.addCallbackAndRun(currentLayer => {
queryParam.setData(currentLayer.id);
});
}

View file

@ -65,21 +65,6 @@ export default class AvailableBaseLayers {
});
const queryParam = QueryParameters.GetQueryParameter("background", State.state.layoutToUse.data.defaultBackground);
queryParam.addCallbackAndRun((selectedId:string) => {
console.log("Selected layer is ", selectedId)
const available = self.availableEditorLayers.data;
for (const layer of available) {
if (layer.id === selectedId) {
state.bm.CurrentLayer.setData(layer);
}
}
})
state.bm.CurrentLayer.addCallbackAndRun(currentLayer => {
queryParam.setData(currentLayer.id);
});
}

View file

@ -12,6 +12,7 @@ import {LayerUpdater} from "./Logic/LayerUpdater";
import {UIEventSource} from "./Logic/UIEventSource";
import {LocalStorageSource} from "./Logic/Web/LocalStorageSource";
import {QueryParameters} from "./Logic/Web/QueryParameters";
import {BaseLayer} from "./Logic/BaseLayer";
/**
* Contains the global state: a bunch of UI-event sources
@ -54,6 +55,10 @@ export class State {
THe basemap with leaflet instance
*/
public bm;
/**
* Background layer id
*/
public availableBackgroundLayers: UIEventSource<BaseLayer[]>;
/**
The user credentials
*/

View file

@ -1,5 +1,4 @@
import {UIElement} from "./UIElement";
import AvailableBaseLayers from "../Logic/AvailableBaseLayers";
import {DropDown} from "./Input/DropDown";
import Translations from "./i18n/Translations";
import {State} from "../State";
@ -9,15 +8,12 @@ import {BaseLayer} from "../Logic/BaseLayer";
export default class BackgroundSelector extends UIElement {
private _dropdown: UIElement;
private readonly state: State;
private readonly _availableLayers: UIEventSource<any>;
private readonly _availableLayers: UIEventSource<BaseLayer[]>;
constructor(state: State) {
constructor() {
super();
this.state = state;
this._availableLayers = new AvailableBaseLayers(state).availableEditorLayers;
const self = this;
this._availableLayers = State.state.availableBackgroundLayers;
this._availableLayers.addCallbackAndRun(available => self.CreateDropDown(available));
}