Documentation

Customizations/TagRendering.ts

@@ -27,11 +27,7 @@ export class TagRenderingOptions implements TagDependantUIElementConstructor {
 
     constructor(options: {
 
-        /**
+       
-         * What is the priority of the question.
-         * By default, in the popup of a feature, only one question is shown at the same time. If multiple questions are unanswered, the question with the highest priority is asked first
-         */
-        priority?: number
 
         /**
          * This is the string that is shown in the popup if this tag is missing.
@@ -42,17 +38,12 @@ export class TagRenderingOptions implements TagDependantUIElementConstructor {
         question?: string,
 
         /**
-         * Optional:
+         * What is the priority of the question.
-         * if defined, this a common piece of tag that is shown in front of every mapping (except freeform)
+         * By default, in the popup of a feature, only one question is shown at the same time. If multiple questions are unanswered, the question with the highest priority is asked first
          */
-        primer?: string,
+        priority?: number,
-        tagsPreprocessor?: ((tags: any) => any),
+
-        freeform?: {
+        
-            key: string, template: string,
-            renderTemplate: string
-            placeholder?: string,
-            extraTags?: TagsFilter,
-        },
         /**
          * Mappings convert a well-known tag combination into a user friendly text.
          * It converts e.g. 'access=yes' into 'this area can be accessed'
@@ -65,7 +56,33 @@ export class TagRenderingOptions implements TagDependantUIElementConstructor {
          * 
          * 
          */
-        mappings?: { k: TagsFilter, txt: string, priority?: number, substitute?: boolean }[]
+        mappings?: { k: TagsFilter, txt: string, priority?: number, substitute?: boolean }[],
+
+
+        /**
+         * If one wants to render a freeform tag (thus no predefined key/values) or if there are a few well-known tags with a freeform object,
+         * use this.
+         * In the question, it'll offer a textfield
+         */
+        freeform?: {
+            key: string, template: string,
+            renderTemplate: string
+            placeholder?: string,
+            extraTags?: TagsFilter,
+        },
+        
+        
+        /**
+         * Optional:
+         * if defined, this a common piece of tag that is shown in front of every mapping (except freeform)
+         */
+        primer?: string,
+
+        /**
+         * In some very rare cases, tags have to be rewritten before displaying
+         * This function adds this
+         */
+        tagsPreprocessor?: ((tags: any) => any)
     }) {
         this.options = options;
     }

UI/SimpleAddUI.ts

@@ -63,6 +63,10 @@ export class SimpleAddUI extends UIElement {
     protected InnerRender(): string {
         const header = "<h2>Geen selectie</h2>" +
             "Je klikte ergens waar er nog geen gezochte data is.<br/>";
+        if (!this._userDetails.data.loggedIn) {
+            return header + "<a class='activate-osm-authentication'>Gelieve je aan te melden om een nieuw punt toe te voegen</a>"
+        }
+
         if (this._zoomlevel.data.zoom < 19) {
             return header + "Zoom verder in om een element toe te voegen.";
         }
@@ -71,10 +75,6 @@ export class SimpleAddUI extends UIElement {
             return header + "De data is nog aan het laden. Nog even geduld, dan kan je een punt toevoegen";
         }
 
-        if (!this._userDetails.data.loggedIn) {
-            return header + "<a class='activate-osm-authentication'>Gelieve je aan te melden om een nieuw punt toe te voegen</a>"
-        }
-
         var html = "";
         for (const button of this._addButtons) {
             html += button.Render();

index.html

@@ -23,10 +23,10 @@
 </div>
 
 <div id="topleft-tools">
-    <div id="userbadge-and-search">
-        <div id="userbadge">
             Loading... If this message persists, check if javascript is enabled and if no extension (uMatrix) is
             blocking it.
+    <div id="userbadge-and-search">
+        <div id="userbadge">
         </div>
         <br/>
         <div id="searchbox"></div>

index.ts

@@ -50,43 +50,47 @@ if (location.hostname === "localhost" || location.hostname === "127.0.0.1") {
 // ----------------- SELECT THE RIGHT QUESTSET -----------------
 
 
-let defaultQuest = "buurtnatuur"
+let defaultLayout = "buurtnatuur"
 
+
+// Run over all questsets. If a part of the URL matches a searched-for part in the layout, it'll take that as the default
 for (const k in AllKnownLayouts.allSets) {
     const layout = AllKnownLayouts.allSets[k];
     const possibleParts = layout.locationContains ?? [];
-    console.log(layout.locationContains)
     for (const locationMatch of possibleParts) {
-        if(locationMatch === ""){
+        if (locationMatch === "") {
             continue
         }
-        console.log(layout.name," -> ", locationMatch, window.location.href.indexOf(locationMatch))
+        if (window.location.href.toLowerCase().indexOf(locationMatch.toLowerCase()) >= 0) {
-        if(window.location.href.toLowerCase().indexOf(locationMatch.toLowerCase()) >= 0){
+            defaultLayout = layout.name;
-            defaultQuest = layout.name;
-            console.log("Detected a default by URL: ", layout.name, "matches", locationMatch)
         }
     }
 }
 
+// Read the query string to grap settings
+let paramDict: any = {};
 if (window.location.search) {
     const params = window.location.search.substr(1).split("&");
-    const paramDict: any = {};
     for (const param of params) {
         var kv = param.split("=");
         paramDict[kv[0]] = kv[1];
     }
-    if (paramDict.quests) {
+
-        defaultQuest = paramDict.quests
+
-    }
-    if(paramDict.test){
-        dryRun = true;
-    }
 }
 
-const questSetToRender = AllKnownLayouts.allSets[defaultQuest];
+if (paramDict.layout) {
-console.log("Using quests: ", questSetToRender.name);
+    defaultLayout = paramDict.quests
+}
 
-document.title = questSetToRender.title;
+if (paramDict.test) {
+    dryRun = true;
+}
+
+const layoutToUse = AllKnownLayouts.allSets[defaultLayout];
+console.log("Using layout: ", layoutToUse.name);
+
+document.title = layoutToUse.title;
 
 
 // ----------------- Setup a few event sources -------------
@@ -104,9 +108,9 @@ const selectedElement = new UIEventSource<any>(undefined);
 
 
 const locationControl = new UIEventSource<{ lat: number, lon: number, zoom: number }>({
-    zoom: questSetToRender.startzoom,
+    zoom: layoutToUse.startzoom,
-    lat: questSetToRender.startLat,
+    lat: layoutToUse.startLat,
-    lon: questSetToRender.startLon
+    lon: layoutToUse.startLon
 });
 
 
@@ -116,7 +120,7 @@ const saveTimeout = 30000; // After this many milliseconds without changes, save
 const allElements = new ElementStorage();
 const osmConnection = new OsmConnection(dryRun);
 const changes = new Changes(
-    "Beantwoorden van vragen met #MapComplete voor vragenset #" + questSetToRender.name,
+    "Beantwoorden van vragen met #MapComplete voor vragenset #" + layoutToUse.name,
     osmConnection, allElements);
 const bm = new Basemap("leafletDiv", locationControl, new VariableUiElement(
     locationControl.map((location) => {
@@ -150,7 +154,7 @@ const flayers: FilteredLayer[] = []
 
 let minZoom = 0;
 
-for (const layer of questSetToRender.layers) {
+for (const layer of layoutToUse.layers) {
 
     const generateInfo = (tagsES) => {
 
@@ -165,8 +169,7 @@ for (const layer of questSetToRender.layers) {
 
     minZoom = Math.max(minZoom, layer.minzoom);
 
-    const flayer = layer.asLayer(bm, allElements, changes, osmConnection.userDetails, selectedElement,
+    const flayer = layer.asLayer(bm, allElements, changes, osmConnection.userDetails, selectedElement, generateInfo);
-        generateInfo);
 
     const addButton = {
         name: layer.name,
@@ -200,7 +203,7 @@ new StrayClickHandler(bm, selectedElement, leftMessage, () => {
  */
 selectedElement.addCallback((data) => {
     // Which is the applicable set?
-    for (const layer of questSetToRender.layers) {
+    for (const layer of layoutToUse.layers) {
 
         const applicable = layer.overpassFilter.matches(TagUtils.proprtiesToKV(data));
         if (applicable) {
@@ -234,12 +237,12 @@ new CollapseButton("messagesbox")
 var welcomeMessage = () => {
     return new VariableUiElement(
         osmConnection.userDetails.map((userdetails) => {
-            var login = questSetToRender.gettingStartedPlzLogin;
+            var login = layoutToUse.gettingStartedPlzLogin;
             if (userdetails.loggedIn) {
-                login = questSetToRender.welcomeBackMessage;
+                login = layoutToUse.welcomeBackMessage;
             }
             return "<div id='welcomeMessage'>" +
-                questSetToRender.welcomeMessage + login + questSetToRender.welcomeTail+
+                layoutToUse.welcomeMessage + login + layoutToUse.welcomeTail +
                 "</div>";
         }),
         function () {

test.ts

@@ -6,4 +6,12 @@ import {WikipediaLink} from "./Customizations/Questions/WikipediaLink";
 import {OsmLink} from "./Customizations/Questions/OsmLink";
 import {ConfirmDialog} from "./UI/ConfirmDialog";
 import {Imgur} from "./Logic/Imgur";
+import {VariableUiElement} from "./UI/Base/VariableUIElement";
 
+
+const html = new UIEventSource<string>("Some text");
+
+const uielement = new VariableUiElement(html);
+uielement.AttachTo("maindiv")
+
+window.setTimeout(() => {html.setData("Different text")}, 1000)