Add viewpoint for buurtnatuur, add translation of AddPointPoi

Customizations/LayerDefinition.ts

@@ -88,7 +88,8 @@ export class LayerDefinition {
     static WAYHANDLING_CENTER_AND_WAY = 2;
     
     constructor(options: {
-        name: string,
+        name: string | UIElement,
+        description: string | UIElement,
         newElementTags: Tag[],
         icon: string,
         minzoom: number,
@@ -106,6 +107,7 @@ export class LayerDefinition {
             return;
         }
         this.name = options.name;
+        this.description = options.description;
         this.maxAllowedOverlapPercentage = options.maxAllowedOverlapPercentage ?? 0;
         this.newElementTags = options.newElementTags;
         this.icon = options.icon;
@@ -119,7 +121,7 @@ export class LayerDefinition {
 
     asLayer(basemap: Basemap, allElements: ElementStorage, changes: Changes, userDetails: UIEventSource<UserDetails>,
             selectedElement: UIEventSource<{feature: any}>,
-            showOnPopup: (tags: UIEventSource<(any)>, feature: any) => UIElement):
+            showOnPopup: (tags: UIEventSource<any>, feature: any) => UIElement):
         FilteredLayer {
         return new FilteredLayer(
             this,

Customizations/Layers/Viewpoint.ts

@@ -1,6 +1,46 @@
 import {LayerDefinition} from "../LayerDefinition";
-
+import L from "leaflet"
+import {FixedUiElement} from "../../UI/Base/FixedUiElement";
+import FixedText from "../Questions/FixedText";
+import {Tag} from "../../Logic/TagsFilter";
+import {ImageCarouselWithUploadConstructor} from "../../UI/Image/ImageCarouselWithUpload";
+import {TagRenderingOptions} from "../TagRendering";
 
 export class Viewpoint extends LayerDefinition {
 
+    constructor() {
+        super({
+            name: "Bezienswaardigheid",
+            description: "Wil je een foto toevoegen van iets dat geen park, bos of natuurgebied is? Dit kan hiermee",
+            newElementTags: [new Tag("tourism", "viewpoint"), new Tag("fixme", "Added with mapcomplete. This viewpoint should probably me merged with some existing feature")],
+            icon: "assets/viewpoint.svg",
+            wayHandling: LayerDefinition.WAYHANDLING_CENTER_ONLY,
+            style: tags => {
+                return {
+                    color: undefined, icon: new L.icon({
+                        iconUrl: "assets/viewpoint.svg",
+                        iconSize: [20, 20]
+                    })
+                }
+            },
+            maxAllowedOverlapPercentage: 0,
+            overpassFilter: new Tag("tourism", "viewpoint"),
+            minzoom: 13,
+            title: new FixedText("Bezienswaardigheid")
+        });
+        
+        this.elementsToShow = [
+            new FixedText(this.description),
+            new ImageCarouselWithUploadConstructor(),
+            new TagRenderingOptions({
+                question: "Zijn er bijzonderheden die je wilt toevoegen?",
+                freeform:{
+                    key: "description:0",
+                    template: "$$$",
+                    renderTemplate: "<h3>Bijzonderheden</h3>{description:0}"
+                }
+            })
+        ]
+    }
+
 }

Customizations/Layouts/Groen.ts

@@ -2,6 +2,7 @@ import {NatureReserves} from "../Layers/NatureReserves";
 import {Park} from "../Layers/Park";
 import {Bos} from "../Layers/Bos";
 import {Layout} from "../Layout";
+import {Viewpoint} from "../Layers/Viewpoint";
 
 export class Groen extends Layout {
     
@@ -9,7 +10,7 @@ export class Groen extends Layout {
         super("buurtnatuur",
             ["nl"],
             "Buurtnatuur",
-            [new NatureReserves(), new Park(), new Bos()],
+            [new NatureReserves(), new Park(), new Bos(), new Viewpoint()],
             10,
             50.8435,
             4.3688,
@@ -39,12 +40,12 @@ export class Groen extends Layout {
             "<li>Je kan altijd een vraag overslaan als je het antwoord niet weet of niet zeker bent</li>" +
             "<li>Je kan altijd een foto toevoegen</li>" +
             "<li>Je kan ook zelf een gebied toevoegen door op de kaart te klikken</li>" +
-            "<li>Je kan deze website ook openen op je smartphone, zo kan je ter plaatse gaan om vragen te beantwoorden en foto's te maken</li>" +
+            "<li>Open buurtnatuur.be <b>op je smartphone</b> om al wandelend foto's te maken en vragen te beantwoorden</li>" +
             "</ul>" +
             "<small>" +
             "<p>" +
             "De oorspronkelijke data komt van <b>OpenStreetMap</b> en je antwoorden worden daar bewaard.<br/> Omdat iedereen vrij kan meewerken aan dit project, kunnen we niet garanderen dat er geen fouten opduiken." +
-            "Kan je hier niet aanpassen wat je wilt, dan kan je dat zelf via OpenStreetMap.org doen. Groen kan geen enkele verantwoordelijkheid nemen over de kaart." +
+            "Kan je hier niet aanpassen wat je wilt, dan kan je dat zelf via OpenStreetMap.org doen. Groen kan <b>geen enkele verantwoordelijkheid</b> nemen over de kaart." +
             "</p>" +
             "Je privacy is belangrijk. We tellen wel hoeveel gebruikers deze website bezoeken. We plaatsen een cookie waar geen persoonlijke informatie in bewaard wordt. " +
             "Als je inlogt, komt er een tweede cookie bij met je inloggegevens." +

Logic/FilteredLayer.ts

@@ -49,7 +49,7 @@ export class FilteredLayer {
         map: Basemap, storage: ElementStorage,
         changes: Changes,
         selectedElement: UIEventSource<any>,
-        showOnPopup: ((tags: UIEventSource<any>) => UIElement)
+        showOnPopup: ((tags: UIEventSource<any>, feature: any) => UIElement)
     ) {
         this.layerDef = layerDef;
 

Logic/LayerUpdater.ts

@@ -57,12 +57,14 @@ export class LayerUpdater {
         }
     }
 
+    private _failCount = 0;
     private handleFail(reason: any) {
         console.log("QUERY FAILED (retrying in 1 sec)", reason);
         this.previousBounds = undefined;
         const self = this;
+        this._failCount++;
         window.setTimeout(
-            function(){self.update()}, 1000
+            function(){self.update()}, this._failCount * 1000
         )
     }
 

UI/Base/Button.ts

@@ -1,4 +1,5 @@
 import {UIElement} from "../UIElement";
+import Locale from "../i18n/Locale";
 
 export class Button extends UIElement {
     private _text: UIElement;
@@ -6,7 +7,7 @@ export class Button extends UIElement {
     private _clss: string;
 
     constructor(text: UIElement, onclick: (() => void), clss: string = "") {
-        super(undefined);
+        super(Locale.language);
         this._text = text;
         this._onclick = onclick;
         if (clss !== "") {
@@ -28,9 +29,7 @@ export class Button extends UIElement {
     InnerUpdate(htmlElement: HTMLElement) {
         super.InnerUpdate(htmlElement);
         const self = this;
-        console.log("Update for ", htmlElement)
         document.getElementById("button-"+this.id).onclick = function(){
-            console.log("Clicked");
             self._onclick();
         }
     }

UI/Input/DropDown.ts

@@ -89,7 +89,6 @@ export class DropDown<T> extends InputElement<T> {
         var t = this._value.data;
         for (let i = 0; i < this._values.length ; i++) {
             const value = this._values[i].value;
-            console.log("Checking",value," against ",t, ":", t === value)
             if (value === t) {
                 // @ts-ignore
                 e.selectedIndex = i;

UI/SimpleAddUI.ts

@@ -6,6 +6,8 @@ import {Changes} from "../Logic/Changes";
 import {FixedUiElement} from "./Base/FixedUiElement";
 import {Button} from "./Base/Button";
 import {UserDetails} from "../Logic/OsmConnection";
+import Translations from "./i18n/Translations";
+import Combine from "./Base/Combine";
 
 /**
  * Asks to add a feature at the last clicked location, at least if zoom is sufficient
@@ -42,7 +44,7 @@ export class SimpleAddUI extends UIElement {
             // <button type='button'> looks SO retarded
             // the default type of button is 'submit', which performs a POST and page reload
             const button =
-                new Button(new FixedUiElement("Add a " + option.name.Render() + " here"),
+                new Button(Translations.t.general.add.addNew.Subs({category: option.name}),
                     this.CreatePoint(option));
             this._addButtons.push(button);
         }
@@ -60,25 +62,25 @@ export class SimpleAddUI extends UIElement {
     }
 
     InnerRender(): string {
-        const header = "<h2>No data here</h2>" +
+        const header = Translations.t.general.add.header;
-            "You clicked somewhere where no data is known yet.<br/>";
+            
         if (!this._userDetails.data.loggedIn) {
-            return header + "<a class='activate-osm-authentication'>Please log in to add a new point</a>"
+            return new Combine([header, Translations.t.general.add.pleaseLogin]).Render()
         }
 
         if (this._zoomlevel.data.zoom < 19) {
-            return header + "Zoom in further to add a point.";
+            return new Combine([header, Translations.t.general.add.zoomInFurther]).Render()
         }
 
         if (this._dataIsLoading.data) {
-            return header + "The data is still loading. Please wait a bit before you add a new point";
+            return new Combine([header, Translations.t.general.add.stillLoading]).Render()
         }
 
         var html = "";
         for (const button of this._addButtons) {
             html += button.Render();
         }
-        return header + html;
+        return header.Render() + html;
     }
 
     InnerUpdate(htmlElement: HTMLElement) {

UI/i18n/Translation.ts

@@ -1,11 +1,48 @@
 import {UIElement} from "../UIElement"
 import Locale from "./Locale"
 import {FixedUiElement} from "../Base/FixedUiElement";
+import {TagUtils} from "../../Logic/TagsFilter";
+import Combine from "../Base/Combine";
 
 
 export default class Translation extends UIElement {
+
+    private static forcedLanguage = undefined;
+
+    public Subs(text: any /*Map<string, string | UIElement>*/) {
+        const newTranslations = {};
+        for (const lang in this.translations) {
+            let template: string = this.translations[lang];
+            for (const k in text) {
+                const combined = [];
+                const parts = template.split("{" + k + "}");
+                const el: string | UIElement = text[k];
+                let rtext: string = "";
+                console.log(parts)
+                if (typeof (el) === "string") {
+                    rtext = el;
+                } else {
+                    Translation.forcedLanguage = lang; // This is a very dirty hack - it'll bite me one day
+                    rtext = el.InnerRender();
+                    console.log(rtext)
+                }
+                for (let i = 0; i < parts.length - 1; i++) {
+                    combined.push(parts[i]);
+                    combined.push(rtext)
+                }
+                combined.push(parts[parts.length - 1]);
+                template = new Combine(combined).InnerRender();
+            }
+            newTranslations[lang] = template;
+        }
+        Translation.forcedLanguage = undefined;
+        return new Translation(newTranslations);
+
+    }
+
+
     get txt(): string {
-        const txt = this.translations[Locale.language.data];
+        const txt = this.translations[Translation.forcedLanguage ?? Locale.language.data];
         if (txt !== undefined) {
             return txt;
         }
@@ -40,4 +77,5 @@ export default class Translation extends UIElement {
         return new Translation(this.translations)
     }
 
+ 
 }

UI/i18n/Translations.ts

@@ -391,9 +391,33 @@ export default class Translations {
             number: new T({
                 en: "number",
                 nl: "getal"
+            }),
+
+            add: {
+
+                addNew: new T({
+                    en: "Add a new {category} here",
+                    nl: "Voeg hier een {category} toe"
+                }),
+                header: new T({
+                    en: "<h2>No data</h2>You clicked somewhere where no data is known yet.<br/>",
+                    nl: "<h2>Geen selectie</h2>Je klikte ergens waar er nog geen data is.<br/>"
+                }),
+                pleaseLogin: new T({
+                    en: "<a class='activate-osm-authentication'>Please log in to add a new point</a>",
+                    nl: "<a class='activate-osm-authentication'>Gelieve je aan te melden om een punt to te voegen</a>"
+                }),
+                zoomInFurther: new T({
+                    en: "Zoom in further to add a point.",
+                    nl: "Gelieve verder in te zoomen om een punt toe te voegen"
+                }),
+                stillLoading: new T({
+                    en: "The data is still loading. Please wait a bit before you add a new point",
+                    nl: "De data wordt nog geladen. Nog even geduld en dan kan je een punt toevoegen."
                 })
             }
         }   
+    }
 
     public static W(s: string | UIElement): UIElement {
         if (s instanceof UIElement) {

assets/viewpoint.svg

@@ -0,0 +1,82 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   width="16"
+   height="16"
+   viewBox="0 0 16 16"
+   id="svg2"
+   sodipodi:docname="viewpoint.svg"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1001"
+     id="namedview7"
+     showgrid="false"
+     inkscape:zoom="14.75"
+     inkscape:cx="8"
+     inkscape:cy="4.0750604"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer2" />
+  <metadata
+     id="metadata8">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs6" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer2"
+     inkscape:label="background">
+    <circle
+       style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="path817"
+       cx="8"
+       cy="8"
+       r="8" />
+  </g>
+  <rect
+     width="16"
+     height="16"
+     x="0"
+     y="0"
+     id="canvas"
+     style="fill:none;stroke:none;visibility:hidden" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer1"
+     inkscape:label="icon"
+     sodipodi:insensitive="true"
+     style="display:inline">
+    <path
+       d="m 9.65625,0.59375 c -0.3024732,0.0462641 -0.5739493,0.24857188 -0.75,0.5 C 8.4915325,1.6542533 8.3846231,2.3479287 8.1875,3 7.9662603,3.8420605 7.7522058,4.7006473 7.625,5.5625 7.6044,5.8106582 7.7926492,5.8644805 8.03125,5.625 8.8564261,4.8565483 9.6689927,4.0447405 10.46875,3.25 10.66307,3.0435127 10.857947,2.8397801 11,2.59375 c 0.22114,-0.3696454 0.325018,-0.8581921 0.09375,-1.25 -0.238762,-0.3960416 -0.675926,-0.6652283 -1.125,-0.75 -0.1037376,-0.0197567 -0.2116756,-0.0154214 -0.3125,0 z m -5.4375,0.0625 C 3.756376,0.664435 3.298377,0.9038402 3,1.25 2.7236959,1.5695061 2.7337489,2.0351336 2.90625,2.40625 3.1835185,3.0459969 3.721958,3.5026801 4.1875,4 4.8053738,4.6133884 5.4428785,5.2080755 6.125,5.75 6.3294366,5.8921706 6.4627003,5.7639689 6.375,5.4375 6.1234386,4.3383434 5.8495515,3.246582 5.5625,2.15625 5.4811703,1.8846207 5.3917386,1.5899614 5.25,1.34375 5.0409086,0.9671579 4.6737053,0.6524279 4.21875,0.65625 Z M 1,5.65625 C 0.6728589,5.7133884 0.35581084,5.8906685 0.1875,6.1875 -0.03684961,6.5918816 -0.05657638,7.0996758 0.09375,7.53125 0.23204898,7.9303783 0.65487609,8.1823302 1.0625,8.21875 1.7551236,8.2989321 2.398939,8.029096 3.0625,7.875 3.9027885,7.6471232 4.7519195,7.4130156 5.5625,7.09375 5.787908,6.9879268 5.7327889,6.7749958 5.40625,6.6875 4.3287785,6.3551066 3.2438454,6.0472518 2.15625,5.75 1.8803888,5.6844434 1.596594,5.6567822 1.3125,5.65625 1.2048302,5.6543848 1.109047,5.6372039 1,5.65625 Z m 11.6875,0 C 12.403405,5.6567822 12.119611,5.684443 11.84375,5.75 10.756155,6.0472518 9.6712203,6.3551066 8.59375,6.6875 8.2672114,6.7749958 8.21209,6.9879301 8.4375,7.09375 c 0.8105812,0.3192656 1.659711,0.5533732 2.5,0.78125 0.663559,0.154096 1.307371,0.4239353 2,0.34375 0.407624,-0.03642 0.830451,-0.2883717 0.96875,-0.6875 C 14.056568,7.0996758 14.036852,6.5918816 13.8125,6.1875 13.588087,5.7917247 13.118179,5.64879 12.6875,5.65625 Z M 6.28125,8.0625 C 6.24107,8.0647215 6.1761092,8.0894573 6.125,8.125 5.4428785,8.6669264 4.8053738,9.2928641 4.1875,9.90625 3.721958,10.403571 3.1835185,10.829001 2.90625,11.46875 2.7337489,11.839865 2.7236959,12.305494 3,12.625 3.298377,12.97116 3.756376,13.241771 4.21875,13.25 4.6737053,13.253823 5.0409086,12.90784 5.25,12.53125 5.3917386,12.285037 5.48117,12.02163 5.5625,11.75 5.8495515,10.659668 6.1234386,9.5366567 6.375,8.4375 6.4407752,8.1926478 6.4017899,8.0558356 6.28125,8.0625 Z M 7.75,8.125 C 7.676409,8.138699 7.6147,8.21967 7.625,8.34375 c 0.1272058,0.8618534 0.3412603,1.689188 0.5625,2.53125 0.1971231,0.652072 0.3040361,1.376995 0.71875,1.9375 0.2347344,0.335235 0.6475495,0.54778 1.0625,0.46875 0.449074,-0.08477 0.886238,-0.353959 1.125,-0.75 C 11.325022,12.139441 11.22114,11.650893 11,11.28125 10.857947,11.035219 10.66307,10.831485 10.46875,10.625 9.6689927,9.8302564 8.8564261,9.0496977 8.03125,8.28125 7.9119496,8.1615102 7.8235913,8.1113005 7.75,8.125 Z"
+       id="viewpoint"
+       style="fill:#734a08;fill-opacity:1"
+       transform="translate(1,1)"
+       inkscape:connector-curvature="0" />
+  </g>
+</svg>

index.css

@@ -252,10 +252,6 @@ form {
         margin: 0.5em;
     }
     
-    .collapse-button {
-        height: calc(100% - 3.5em) !important;
-    }
-
 }
 
 
@@ -285,7 +281,7 @@ form {
     border-top-left-radius: 2em;
     border-bottom-left-radius: 2em;
     display: inline-block;
-    height:calc(100% - 8em);
+    height:100%;
 }
 
 .collapse-button .collapse-button-img{
@@ -329,6 +325,7 @@ form {
 
 #messagesbox {
     /*Only shown on big screens*/
+    position: relative;
     padding: 0;
     pointer-events: all;
 }
@@ -429,6 +426,33 @@ form {
     border-radius: 15px 15px 0 0;
 }
 
+
+#centermessage {
+    position: absolute;
+    top: 30%;
+    
+    left: 25%;
+    width: 50%;
+
+    font-size: large;
+
+    padding: 2em;
+    border-radius: 2em;
+    z-index: 4000;
+    pointer-events: none;
+
+    opacity: 1;
+    background-color: white;
+
+    transition: opacity 500ms linear;
+
+
+    text-align: center;
+    horiz-align: center;
+    font-weight: bold;
+}
+
+
 @media only screen and (max-width: 600px), only screen and (max-height: 300px) {
     #messagesbox-wrapper {
         display: none;
@@ -447,6 +471,13 @@ form {
         display: none;
     }
     
+    #centermessage {
+        top: 30%;
+        left: 15%;
+        width: 60%;
+
+    }
+
     #messagesboxmobilewrapper {
         position: absolute;
         padding: 0;
@@ -476,6 +507,19 @@ form {
         border-radius: 1em;
         background-color: white;
     }
+
+    #welcomeMessage {
+        display: inline-block;
+        background-color: white;
+        padding: 1em;
+        border-radius: 0;
+        width: 100%;
+        max-width: 100%;
+        margin: 0;
+        box-sizing: border-box;
+    }
+    
+
 }
 
 
@@ -541,45 +585,11 @@ form {
 
 }
 
-#logo {
+.logo {
-    position: relative;
-    display: flex;
     float:right;
     margin: 1em;
-    margin-top: 0;
+    width: 10em;
-    margin-right: -0.5em;
+    height: auto;
-    padding: 0;
-    right: 1em;
-    top: 1em;
-    border-radius: 0;
-}
-
-#centermessage {
-    position: absolute;
-    display: block ruby;
-
-    margin: auto;
-    top: 30%;
-    left: 50%;
-    margin-left: -15%;
-    width: 30%;
-
-    font-size: large;
-
-    padding: 2em;
-    border-radius: 2em;
-    z-index: 5000;
-    pointer-events: none;
-
-    opacity: 1;
-    background-color: white;
-
-    transition: opacity 500ms linear;
-
-
-    text-align: center;
-    horiz-align: center;
-    font-weight: bold;
 }
 
 #bottomRight {

index.ts

@@ -274,8 +274,7 @@ new UserBadge(osmConnection.userDetails,
 
 new SearchAndGo(bm).AttachTo("searchbox");
 
-const welcome = new WelcomeMessage(layoutToUse, osmConnection).onClick(() => {
+const welcome = new WelcomeMessage(layoutToUse, osmConnection).onClick(() => {});
-});
 
 const help = new FixedUiElement(`<div class='collapse-button-img'><img src='assets/help.svg'  alt='help'></div>`);
 const close = new FixedUiElement(`<div class='collapse-button-img'><img src='assets/close.svg'  alt='close'></div>`);
@@ -291,6 +290,8 @@ new CheckBox(
 new FullScreenMessageBoxHandler(fullScreenMessage, () => {
     selectedElement.setData(undefined)
 }).update();
+fullScreenMessage.setData(new WelcomeMessage(layoutToUse, osmConnection))
+
 
 new CenterMessageBox(
     minZoom,
@@ -310,5 +311,5 @@ osmConnection.registerActivateOsmAUthenticationClass();
 new GeoLocationHandler(bm).AttachTo("geolocate-button");
 
 
-
+locationControl.ping()