From 5b59d7dbd07102da810f42f10f496b6bc3b9650b Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Thu, 12 Nov 2020 12:18:02 +0100 Subject: [PATCH] Fixed small bugs, add documentation to query parameters, draft of surveillance cams --- Logic/Web/QueryParameters.ts | 2 +- State.ts | 11 +- UI/Input/MultiInput.ts | 8 +- UI/Popup/FeatureInfoBox.ts | 3 +- assets/layers/surveillance_cameras.json | 228 ++++++++++++++++++++++++ index.css | 5 + 6 files changed, 246 insertions(+), 11 deletions(-) create mode 100644 assets/layers/surveillance_cameras.json diff --git a/Logic/Web/QueryParameters.ts b/Logic/Web/QueryParameters.ts index 21a57cc..235ff7b 100644 --- a/Logic/Web/QueryParameters.ts +++ b/Logic/Web/QueryParameters.ts @@ -59,7 +59,7 @@ export class QueryParameters { } - public static GetQueryParameter(key: string, deflt: string): UIEventSource { + public static GetQueryParameter(key: string, deflt: string, documentation?: string): UIEventSource { if(!this.initialized){ this.init(); } diff --git a/State.ts b/State.ts index 19e041a..5843018 100644 --- a/State.ts +++ b/State.ts @@ -165,7 +165,7 @@ export default class State { }); - function featSw(key: string, deflt: (layout: LayoutConfig) => boolean): UIEventSource { + function featSw(key: string, deflt: (layout: LayoutConfig) => boolean, documentation?: string): UIEventSource { const queryParameterSource = QueryParameters.GetQueryParameter(key, undefined); // I'm so sorry about someone trying to decipher this @@ -173,13 +173,14 @@ export default class State { return UIEventSource.flatten( self.layoutToUse.map((layout) => { const defaultValue = deflt(layout); - const queryParam = QueryParameters.GetQueryParameter(key, "" + defaultValue) + const queryParam = QueryParameters.GetQueryParameter(key, "" + defaultValue, documentation) return queryParam.map((str) => str === undefined ? defaultValue : (str !== "false")); }), [queryParameterSource]); } - this.featureSwitchUserbadge = featSw("fs-userbadge", (layoutToUse) => layoutToUse?.enableUserBadge ?? true); + this.featureSwitchUserbadge = featSw("fs-userbadge", (layoutToUse) => layoutToUse?.enableUserBadge ?? true, + "Disables the userbadge (and thus disables login capabilities)"); this.featureSwitchSearch = featSw("fs-search", (layoutToUse) => layoutToUse?.enableSearch ?? true); this.featureSwitchLayers = featSw("fs-layers", (layoutToUse) => layoutToUse?.enableLayers ?? true); this.featureSwitchAddNew = featSw("fs-add-new", (layoutToUse) => layoutToUse?.enableAddNewPoints ?? true); @@ -213,8 +214,10 @@ export default class State { continue; } try { + const json = btoa(customLayout.data); + console.log(json); const layout = new LayoutConfig( - JSON.parse(btoa(customLayout.data))); + JSON.parse(json)); installedThemes.push({ layout: layout, definition: customLayout.data diff --git a/UI/Input/MultiInput.ts b/UI/Input/MultiInput.ts index 22f9fdf..3e40480 100644 --- a/UI/Input/MultiInput.ts +++ b/UI/Input/MultiInput.ts @@ -71,7 +71,7 @@ export class MultiInput extends InputElement { input.IsSelected.addCallback(() => this.UpdateIsSelected()); const moveUpBtn = Svg.up_ui() - .onClick(() => { + .SetClass('small-image').onClick(() => { const v = self._value.data[i]; self._value.data[i] = self._value.data[i - 1]; self._value.data[i - 1] = v; @@ -79,8 +79,8 @@ export class MultiInput extends InputElement { }); const moveDownBtn = - Svg.down_ui().SetStyle('max-width: 1.5em; margin-left: 5px;display:block;') - .onClick(() => { + Svg.down_ui() + .SetClass('small-image') .onClick(() => { const v = self._value.data[i]; self._value.data[i] = self._value.data[i + 1]; self._value.data[i + 1] = v; @@ -98,7 +98,7 @@ export class MultiInput extends InputElement { const deleteBtn = - Svg.delete_icon_ui().SetStyle('max-width: 1.5em;width:1.5em; margin-left: 5px;') + Svg.delete_icon_ui().SetClass('small-image') .onClick(() => { self._value.data.splice(i, 1); self._value.ping(); diff --git a/UI/Popup/FeatureInfoBox.ts b/UI/Popup/FeatureInfoBox.ts index c0439c2..ddf23a3 100644 --- a/UI/Popup/FeatureInfoBox.ts +++ b/UI/Popup/FeatureInfoBox.ts @@ -5,6 +5,7 @@ import EditableTagRendering from "./EditableTagRendering"; import QuestionBox from "./QuestionBox"; import Combine from "../Base/Combine"; import TagRenderingAnswer from "./TagRenderingAnswer"; +import State from "../../State"; export class FeatureInfoBox extends UIElement { private _tags: UIEventSource; @@ -33,8 +34,6 @@ export class FeatureInfoBox extends UIElement { layerConfig.titleIcons.map(icon => new TagRenderingAnswer(tags, icon))) .SetClass("featureinfobox-icons"); this._renderings = layerConfig.tagRenderings.map(tr => new EditableTagRendering(tags, tr)); - this._questionBox = new QuestionBox(tags, layerConfig.tagRenderings); - } InnerRender(): string { diff --git a/assets/layers/surveillance_cameras.json b/assets/layers/surveillance_cameras.json new file mode 100644 index 0000000..46126a5 --- /dev/null +++ b/assets/layers/surveillance_cameras.json @@ -0,0 +1,228 @@ +{ + "id": "surveillance", + "title": { + "en": "Surveillance under Surveillance", + "nl": "Surveillance under Surveillance" + }, + "shortDescription": { + "en": "Surveillance cameras and other means of surveillance", + "nl": "Bewakingscameras en dergelijke" + }, + "description": { + "en": "On this open map, you can find surveillance cameras.", + "nl": "Op deze open kaart kan je bewakingscamera's vinden." + }, + "language": [ + "en", + "nl" + ], + "maintainer": "", + "icon": "https://upload.wikimedia.org/wikipedia/commons/b/b7/Video_surveillance_logo.svg", + "version": "0", + "startLat": 0, + "startLon": 0, + "startZoom": 1, + "widenFactor": 0.05, + "socialImage": "", + "layers": [ + { + "id": "cameras", + "name": { + "en": "Surveillance camera's", + "nl": "Bewakingscamera's" + }, + "minzoom": 12, + "overpassTags": { + "and": [ + "man_made=surveillance", + { + "or": [ + "surveillance:type=camera", + "surveillance:type=ALPR", + "surveillance:type=ANPR" + ] + } + ] + }, + "title": { + "render": { + "en": "Surveillance Camera", + "nl": "Bewakingscamera" + } + }, + "description": {}, + "tagRenderings": [ + { + "question": { + "en": "What kind of camera is this?", + "nl": "Wat voor soort camera is dit?" + }, + "mappings": [ + { + "if": { + "and": [ + "camera:type=fixed" + ] + }, + "then": { + "en": "A fixed (non-moving) camera", + "nl": "Een vaste camera" + } + }, + { + "if": { + "and": [ + "camera:type=dome" + ] + }, + "then": { + "en": "A dome camera (which can turn)", + "nl": "Een dome (bolvormige camera die kan draaien)" + } + }, + { + "if": { + "and": [ + "camera:type=panning" + ] + }, + "then": { + "en": "A panning camera", + "nl": "Een camera die (met een motor) van links naar rechts kan draaien" + } + } + ] + }, + { + "freeform": { + "key": "operator" + }, + "question": { + "en": "Who operates this CCTV?", + "nl": "Wie beheert deze bewakingscamera?" + }, + "render": { + "en": "Operated by {operator}", + "nl": "Beheer door {operator}" + } + }, + { + "question": { + "en": "What k ind of surveillance is this camera", + "nl": "Wat soort bewaking wordt hier uitgevoerd?" + }, + "mappings": [ + { + "if": { + "and": [ + "surveillance=public" + ] + }, + "then": { + "en": "A public area is surveilled, such as a street, a bridge, a square, a park, a train station...", + "nl": "Bewaking van de publieke ruilmte, dus een straat, een brug, een park, een plein, een stationsgebouw..." + } + }, + { + "if": { + "and": [ + "surveillance=outdoor" + ] + }, + "then": { + "en": "An outdoor, yet private area is surveilled (e.g. a parking lot, a fuel station, courtyard, entrance, private driveway, ...)", + "nl": "Een buitenruimte met privaat karakter (zoals een privé-oprit, een parking, tankstation, ...)" + } + }, + { + "if": { + "and": [ + "surveillance=indoor" + ] + }, + "then": { + "nl": "Een private binnenruimte wordt bewaakt, bv. een wiinkel, een parkeergarage, ...", + "en": "A private indoor area is surveilled, e.g. a shop, a private underground parking, ..." + } + } + ] + }, + { + "question": { + "en": "What exactly is surveilled here?", + "nl": "Wat wordt hier precies bewaakt?" + }, + "freeform": { + "key": "surveillance:type" + }, + "render": { + "en": " Surveills a {surveillance:type}", + "nl": "Bewaakt een {surveillance:type}" + }, + "mappings": [ + { + "if": { + "and": [ + "surveillance:zone=parking" + ] + }, + "then": { + "en": "Surveills a parking", + "nl": "Bewaakt een parking" + } + }, + { + "if": { + "and": [ + "surveillance:zone=traffic" + ] + }, + "then": { + "en": "Surveills the traffic", + "nl": "Bewaakt het verkeer" + } + }, + { + "if": { + "and": [ + "surveillance:zone=entrance" + ] + }, + "then": { + "en": "Surveills an entrance", + "nl": "Bewaakt een ingang" + } + }, + { + "if": { + "and": [ + "surveillance:zone=shop" + ] + }, + "then": { + "en": "Surveills a shop", + "nl": "Bewaakt een winkel" + } + } + ] + } + ], + "hideUnderlayingFeaturesMinPercentage": 0, + "icon": { + "render": "https://upload.wikimedia.org/wikipedia/commons/b/b7/Video_surveillance_logo.svg" + }, + "width": { + "render": "8" + }, + "iconSize": { + "render": "30,30,center" + }, + "color": { + "render": "#00f" + }, + "presets": [], + "wayHandling": 2 + } + ], + "roamingRenderings": [] +} \ No newline at end of file diff --git a/index.css b/index.css index 135578a..8df3e9a 100644 --- a/index.css +++ b/index.css @@ -416,3 +416,8 @@ body { } +.small-image img { + height: 1em; + max-width: 1em; +} +