midgard/mapcomplete
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Add preferences panel

Browse source
This commit is contained in:
Pieter Vander Vennet 2020-08-07 16:01:18 +02:00
parent bd43e2537f
commit 2e7688a554
5 changed files with 98 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
Logic/FilteredLayer.ts
View file

@ -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
}

6
Logic/Osm/OsmConnection.ts
View file

@ -162,12 +162,12 @@ export class OsmConnection {
public preferences = new UIEventSource<any>({});
public preferenceSources : any = {}
public GetPreference(key: string) : UIEventSource<string>{
key = "mapcomplete-"+key;
public GetPreference(key: string, prefix : string = "mapcomplete-") : UIEventSource<string>{
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<string>(this.preferences.data[key]);

2
index.ts
View file

@ -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") {

27
preferences.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<link href="index.css" rel="stylesheet"/>
<title>Preferences editor</title>
<style>
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Preferences editor - developers only</h1>
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<br/>
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.
<div id="maindiv">'maindiv' not attached</div>
<script src="./preferences.ts"></script>
</body>
</html>

59
preferences.ts
View file

@ -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<string>(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<string>({
toString: (str) => str,
fromString: (str) => str,
value: pref
});
}
const c = [
"<tr><td>",
key,
"</td><td>",
new Button("delete", () => pref.setData("")),
"</td><td>",
value,
"</td></tr>"
];
prefs.push(...c);
}
const el = new Combine(
["<table>",
...prefs,
"</table>"]
); // .AttachTo("maindiv");
console.log(el.InnerRender())
el.AttachTo("maindiv");
}
connection.preferences.addCallback((prefs) => createTable(prefs))