Use OSM-settings to keep track of the chosen license; change tree marker to circle (fix #24)

UI/Base/DropDownUI.ts

@@ -7,12 +7,19 @@ export class DropDownUI extends UIElement {
     private _label: string;
     private _values: { value: string; shown: string }[];
 
-    constructor(label: string, values: { value: string, shown: string }[]) {
+    constructor(label: string, values: { value: string, shown: string }[],
+                selectedElement: UIEventSource<string> = undefined) {
         super(undefined);
         this._label = label;
         this._values = values;
-        this.selectedElement = new UIEventSource<string>(values[0].value);
-
+        this.selectedElement = selectedElement ?? new UIEventSource<string>(values[0].value);
+        if(selectedElement.data === undefined){
+            this.selectedElement.setData(values[0].value)
+        }
+        const self = this;
+        this.selectedElement.addCallback(() => {
+            self.InnerUpdate();
+        });
     }
 
 
@@ -31,17 +38,21 @@ export class DropDownUI extends UIElement {
             "</form>";
     }
 
-    InnerUpdate(htmlElement: HTMLElement) {
-        super.InnerUpdate(htmlElement);
-
+    InnerUpdate() {
         const self = this;
         const e = document.getElementById("dropdown-" + this.id);
+        // @ts-ignore
+        if (this.selectedElement.data !== e.value) {
+            // @ts-ignore
+            e.value = this.selectedElement.data;
+        }
         e.onchange = function () {
             // @ts-ignore
             const selectedValue = e.options[e.selectedIndex].value;
-
+            console.log("Putting data", selectedValue)
             self.selectedElement.setData(selectedValue);
         }
+        
     }
 
 }

UI/FeatureInfoBox.ts

@@ -7,10 +7,7 @@ import {OsmImageUploadHandler} from "../Logic/OsmImageUploadHandler";
 import {ImageCarousel} from "./Image/ImageCarousel";
 import {Changes} from "../Logic/Changes";
 import {UserDetails} from "../Logic/OsmConnection";
-import {Img} from "./Img";
 import {CommonTagMappings} from "../Layers/CommonTagMappings";
-import {Tag} from "../Logic/TagsFilter";
-import {ImageUploadFlow} from "./ImageUploadFlow";
 import {VerticalCombine} from "./Base/VerticalCombine";
 
 export class FeatureInfoBox extends UIElement {
@@ -38,6 +35,7 @@ export class FeatureInfoBox extends UIElement {
         questions: QuestionDefinition[],
         changes: Changes,
         userDetails: UIEventSource<UserDetails>,
+        preferedPictureLicense : UIEventSource<string>
     ) {
         super(tagsES);
         this._tagsES = tagsES;
@@ -71,7 +69,8 @@ export class FeatureInfoBox extends UIElement {
 
         this._osmLink = new TagMapping(CommonTagMappings.osmLink, this._tagsES);
         this._wikipedialink = new TagMapping(CommonTagMappings.wikipediaLink, this._tagsES);
-        this._pictureUploader = new OsmImageUploadHandler(tagsES, userDetails, changes, this._imageElement.slideshow).getUI();
+        this._pictureUploader = new OsmImageUploadHandler(tagsES, userDetails, preferedPictureLicense,
+            changes, this._imageElement.slideshow).getUI();
 
 
     }

UI/ImageUploadFlow.ts

@@ -16,6 +16,7 @@ export class ImageUploadFlow extends UIElement {
 
     constructor(
         userInfo: UIEventSource<UserDetails>,
+        preferedLicense : UIEventSource<string>,
         uploadOptions: ((license: string) =>
             {
                 title: string,
@@ -36,7 +37,8 @@ export class ImageUploadFlow extends UIElement {
                 {value: "CC0", shown: "in het publiek domein"},
                 {value: "CC-BY-SA 4.0", shown: "onder een CC-BY-SA-licentie"},
                 {value: "CC-BY 4.0", shown: "onder een CC-BY-licentie"}
-            ]
+            ],
+            preferedLicense
         );
         this._licensePicker = licensePicker;
         this._selectedLicence = licensePicker.selectedElement;

UI/UIElement.ts

@@ -33,6 +33,7 @@ export abstract class UIElement {
     public onClick(f: (() => void)) {
         this._onClick = f;
         this.Update();
+        return this;
     }
 
     Update(): void {
@@ -52,10 +53,8 @@ export abstract class UIElement {
         }
 
         if (this._onClick !== undefined) {
-            console.log("Registering")
             const self = this;
             element.onclick = () => {
-                console.log("Clicked!")
                 self._onClick();
             }
             element.style.cursor = "pointer";

UI/UIEventSource.ts

@@ -22,8 +22,8 @@ export class UIEventSource<T>{
     }
 
     public ping(): void {
-        for (let i in this._callbacks) {
-            this._callbacks[i](this.data);
+        for (const callback of this._callbacks) {
+            callback(this.data);
         }
     }
 

UI/UserBadge.ts

@@ -3,6 +3,7 @@ import {UserDetails} from "../Logic/OsmConnection";
 import {UIEventSource} from "./UIEventSource";
 import {Basemap} from "../Logic/Basemap";
 import L from "leaflet";
+import {FixedUiElement} from "./Base/FixedUiElement";
 
 /**
  * Handles and updates the user badge
@@ -10,6 +11,7 @@ import L from "leaflet";
 export class UserBadge extends UIElement {
     private _userDetails: UIEventSource<UserDetails>;
     private _pendingChanges: UIElement;
+    private _logout: UIElement;
     private _basemap: Basemap;
 
 
@@ -20,6 +22,9 @@ export class UserBadge extends UIElement {
         this._userDetails = userDetails;
         this._pendingChanges = pendingChanges;
         this._basemap = basemap;
+        
+        this._logout = new FixedUiElement("<img src='assets/logout.svg' alt='logout'>")
+            .onClick(() => {userDetails.data.osmConnection.LogOut();});
 
         userDetails.addCallback(function () {
             const profilePic = document.getElementById("profile-pic");