Stabilize personal theme, textfield now correctly appears if it is an option in the freeform too

This commit is contained in:
Pieter Vander Vennet 2021-02-20 01:45:51 +01:00
parent 79fc3f54e5
commit 416a76ae4f
22 changed files with 278 additions and 149 deletions

View file

@ -21,7 +21,6 @@ export default class ScrollableFullScreen extends UIElement {
Svg.close_svg().SetClass("hidden md:block")
])
.onClick(() => {
console.log("Closing...")
ScrollableFullScreen.RestoreLeaflet();
if (onClose !== undefined) {
onClose();

View file

@ -22,7 +22,7 @@ export default class LayerControlPanel extends UIElement {
}
if (State.state.filteredLayers.data.length > 1) {
const layerSelection = new LayerSelection();
const layerSelection = new LayerSelection(State.state.filteredLayers);
layerSelection.onClick(() => {
});
layerControlPanel = new Combine([layerSelection, "<br/>", layerControlPanel]);

View file

@ -6,27 +6,44 @@ import CheckBox from "../Input/CheckBox";
import Combine from "../Base/Combine";
import {FixedUiElement} from "../Base/FixedUiElement";
import Translations from "../i18n/Translations";
import LayerConfig from "../../Customizations/JSON/LayerConfig";
/**
* Shows the panel with all layers and a toggle for each of them
*/
export default class LayerSelection extends UIElement {
private readonly _checkboxes: UIElement[];
private _checkboxes: UIElement[];
private activeLayers: UIEventSource<{
readonly isDisplayed: UIEventSource<boolean>,
readonly layerDef: LayerConfig;
}[]>;
constructor(activeLayers: UIEventSource<{
readonly isDisplayed: UIEventSource<boolean>,
readonly layerDef: LayerConfig;
}[]>) {
super(activeLayers);
if(activeLayers === undefined){
throw "ActiveLayers should be defined..."
}
this.activeLayers = activeLayers;
}
InnerRender(): string {
constructor() {
super(undefined);
this._checkboxes = [];
for (const layer of State.state.filteredLayers.data) {
for (const layer of this.activeLayers.data) {
const leafletStyle = layer.layerDef.GenerateLeafletStyle(
new UIEventSource<any>({id: "node/-1"}),
new UIEventSource<any>({id: "node/-1"}),
false)
const leafletHtml = leafletStyle.icon.html;
const icon =
new FixedUiElement(leafletHtml.Render())
.SetClass("single-layer-selection-toggle")
let iconUnselected: UIElement = new FixedUiElement(leafletHtml.Render())
let iconUnselected: UIElement = new FixedUiElement(leafletHtml.Render())
.SetClass("single-layer-selection-toggle")
.SetStyle("opacity:0.2;");
@ -54,9 +71,8 @@ export default class LayerSelection extends UIElement {
.SetStyle("margin:0.3em;")
);
}
}
InnerRender(): string {
return new Combine(this._checkboxes)
.SetStyle("display:flex;flex-direction:column;")
.Render();

View file

@ -8,7 +8,7 @@ export default class CenterMessageBox extends UIElement {
super(State.state.centerMessage);
this.ListenTo(State.state.locationControl);
this.ListenTo(State.state.layerUpdater.retries);
this.ListenTo(State.state.layerUpdater.timeout);
this.ListenTo(State.state.layerUpdater.runningQuery);
this.ListenTo(State.state.layerUpdater.sufficientlyZoomed);
}
@ -18,9 +18,9 @@ export default class CenterMessageBox extends UIElement {
return {innerHtml: State.state.centerMessage.data, done: false};
}
const lu = State.state.layerUpdater;
if (lu.retries.data > 0) {
if (lu.timeout.data > 0) {
return {
innerHtml: Translations.t.centerMessage.retrying.Subs({count: "" + lu.retries.data}).Render(),
innerHtml: Translations.t.centerMessage.retrying.Subs({count: "" + lu.timeout.data}).Render(),
done: false
};
}

View file

@ -102,6 +102,10 @@ export default class TagRenderingQuestion extends UIElement {
return ff;
}
if(ff){
mappings.push(ff);
}
if (this._configuration.multiAnswer) {
return this.GenerateMultiAnswer(mappings, ff)
} else {

View file

@ -15,7 +15,7 @@ import {GeoOperations} from "../Logic/GeoOperations";
export default class ShowDataLayer {
private readonly _layerDict;
private _layerDict;
private readonly _leafletMap: UIEventSource<L.Map>;
constructor(features: UIEventSource<{ feature: any, freshness: Date }[]>,
@ -24,12 +24,11 @@ export default class ShowDataLayer {
this._leafletMap = leafletMap;
const self = this;
const mp = leafletMap.data;
this._layerDict = {};
self._layerDict = {};
layoutToUse.addCallbackAndRun(layoutToUse => {
for (const layer of layoutToUse.layers) {
this._layerDict[layer.id] = layer;
self._layerDict[layer.id] = layer;
}
});
@ -81,7 +80,7 @@ export default class ShowDataLayer {
const tagsSource = State.state.allElements.getEventSourceFor(feature);
// Every object is tied to exactly one layer
const layer = this._layerDict[feature._matching_layer_id];
return layer.GenerateLeafletStyle(tagsSource, layer._showOnPopup !== undefined);
return layer?.GenerateLeafletStyle(tagsSource, layer._showOnPopup !== undefined);
}
private pointToLayer(feature, latLng): L.Layer {
@ -111,6 +110,10 @@ export default class ShowDataLayer {
private postProcessFeature(feature, leafletLayer: L.Layer) {
const layer: LayerConfig = this._layerDict[feature._matching_layer_id];
if(layer === undefined){
console.warn("No layer found for object (probably a now disabled layer)", feature)
return;
}
if (layer.title === undefined && (layer.tagRenderings ?? []).length === 0) {
// No popup action defined -> Don't do anything
return;
@ -159,10 +162,10 @@ export default class ShowDataLayer {
const mp = this._leafletMap.data;
if (!popup.isOpen() && mp !== undefined) {
var centerpoint = GeoOperations.centerpointCoordinates(feature);
popup
.setLatLng(GeoOperations.centerpointCoordinates(feature))
.openOn(mp);
uiElement.Activate();
}
}
}