From 2e7688a5547520f29776ac25dc53483e4ab02b72 Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Fri, 7 Aug 2020 16:01:18 +0200 Subject: [PATCH] Add preferences panel --- Logic/FilteredLayer.ts | 25 ++++++---------- Logic/Osm/OsmConnection.ts | 6 ++-- index.ts | 2 +- preferences.html | 27 +++++++++++++++++ preferences.ts | 59 +++++++++++++++++++++++++++++++++++++- 5 files changed, 98 insertions(+), 21 deletions(-) create mode 100644 preferences.html diff --git a/Logic/FilteredLayer.ts b/Logic/FilteredLayer.ts index 919580d..c140655 100644 --- a/Logic/FilteredLayer.ts +++ b/Logic/FilteredLayer.ts @@ -1,14 +1,10 @@ import {TagsFilter, TagUtils} from "./TagsFilter"; import {UIEventSource} from "../UI/UIEventSource"; -import {ElementStorage} from "./ElementStorage"; import L from "leaflet" import {GeoOperations} from "./GeoOperations"; import {UIElement} from "../UI/UIElement"; import {LayerDefinition} from "../Customizations/LayerDefinition"; import codegrid from "codegrid-js"; -import {Changes} from "./Osm/Changes"; -import {UserDetails} from "./Osm/OsmConnection"; -import {Basemap} from "./Leaflet/Basemap"; import {State} from "../State"; /*** @@ -228,17 +224,17 @@ export class FilteredLayer { onEachFeature: function (feature, layer) { + // We monky-patch the feature element with an update-style feature.updateStyle = () => { if (layer.setIcon) { layer.setIcon(L.icon(self._style(feature.properties).icon)) } else { - self._geolayer.setStyle(function (feature) { - const style = self._style(feature.properties); - if (State.state.selectedElement.data?.feature === feature) { - if (style.weight !== undefined) { - style.weight = style.weight * 1.8; - }else{ - } + self._geolayer.setStyle(function (featureX) { + const style = self._style(featureX.properties); + if (featureX === feature) { + console.log("Selected element is", featureX.properties.id) + // style.weight = style.weight * 2; + // console.log(style) } return style; }); @@ -251,12 +247,9 @@ export class FilteredLayer { eventSource.addCallback(feature.updateStyle); layer.on("click", function (e) { - const previousFeature =State.state.selectedElement.data?.feature; + const prevSelectedElement = State.state.selectedElement.data?.feature.updateStyle(); State.state.selectedElement.setData({feature: feature}); - feature.updateStyle(); - previousFeature?.updateStyle(); - - + feature.updateStyle() if (feature.geometry.type === "Point") { return; // Points bind there own popups } diff --git a/Logic/Osm/OsmConnection.ts b/Logic/Osm/OsmConnection.ts index 3706ee1..c7dfb06 100644 --- a/Logic/Osm/OsmConnection.ts +++ b/Logic/Osm/OsmConnection.ts @@ -162,12 +162,12 @@ export class OsmConnection { public preferences = new UIEventSource({}); public preferenceSources : any = {} - public GetPreference(key: string) : UIEventSource{ - key = "mapcomplete-"+key; + public GetPreference(key: string, prefix : string = "mapcomplete-") : UIEventSource{ + key = prefix+key; if (this.preferenceSources[key] !== undefined) { return this.preferenceSources[key]; } - if (this.userDetails.data.loggedIn) { + if (this.userDetails.data.loggedIn && this.preferences.data[key] === undefined) { this.UpdatePreferences(); } const pref = new UIEventSource(this.preferences.data[key]); diff --git a/index.ts b/index.ts index 8f60b98..5952b02 100644 --- a/index.ts +++ b/index.ts @@ -40,7 +40,7 @@ if (location.hostname === "localhost" || location.hostname === "127.0.0.1") { // ----------------- SELECT THE RIGHT QUESTSET ----------------- -let defaultLayout = "bookcases" +let defaultLayout = "buurtnatuur" const path = window.location.pathname.split("/").slice(-1)[0]; if (path !== "index.html") { diff --git a/preferences.html b/preferences.html new file mode 100644 index 0000000..42d9995 --- /dev/null +++ b/preferences.html @@ -0,0 +1,27 @@ + + + + + Preferences editor + + + + + + +

Preferences editor - developers only

+Only use if you know what you're doing. To prevent newbies to make mistakes here, editing a mapcomplete-preference is only available if over 500 changes
+Editing any preference -including non-mapcomplete ones- is available when you have more then 2500 changesets. Until that point, only editing mapcomplete-preferences is possible. +
'maindiv' not attached
+ + + diff --git a/preferences.ts b/preferences.ts index 2691186..18e879a 100644 --- a/preferences.ts +++ b/preferences.ts @@ -1,4 +1,61 @@ import {OsmConnection} from "./Logic/Osm/OsmConnection"; +import {VerticalCombine} from "./UI/Base/VerticalCombine"; +import Combine from "./UI/Base/Combine"; +import {UIEventSource} from "./UI/UIEventSource"; +import {SubtleButton} from "./UI/Base/SubtleButton"; +import {Button} from "./UI/Base/Button"; +import {VariableUiElement} from "./UI/Base/VariableUIElement"; +import {All} from "./Customizations/Layouts/All"; +import {TextField} from "./UI/Input/TextField"; +import {FixedUiElement} from "./UI/Base/FixedUiElement"; +import {UIElement} from "./UI/UIElement"; -const connection = new OsmConnection(false, undefined); +const connection = new OsmConnection(false, new UIEventSource(undefined)); + +let rendered = false; + +function createTable(preferences: any) { + if (rendered) { + return; + } + rendered = true; + const prefs = []; + console.log(preferences); + for (const key in preferences) { + console.log(key) + const pref = connection.GetPreference(key, ""); + + let value: UIElement = new FixedUiElement(pref.data); + if (connection.userDetails.data.csCount > 500 && + (key.startsWith("mapcomplete") || connection.userDetails.data.csCount > 2500)) { + value = new TextField({ + toString: (str) => str, + fromString: (str) => str, + value: pref + }); + } + + const c = [ + "", + key, + "", + new Button("delete", () => pref.setData("")), + "", + value, + "" + ]; + prefs.push(...c); + } + + const el = new Combine( + ["", + ...prefs, + "
"] + ); // .AttachTo("maindiv"); + console.log(el.InnerRender()) + el.AttachTo("maindiv"); +} + +connection.preferences.addCallback((prefs) => createTable(prefs)) +