More cleanup of code: remove the overly complicated layer selection

UI/Image/DeleteImage.ts

@@ -0,0 +1,53 @@
+import {UIElement} from "../UIElement";
+import {UIEventSource} from "../../Logic/UIEventSource";
+import Translations from "../i18n/Translations";
+import {CheckBox} from "../Input/CheckBox";
+import Combine from "../Base/Combine";
+import {State} from "../../State";
+import {Tag} from "../../Logic/Tags";
+
+
+export default class DeleteImage extends UIElement {
+    private readonly key: string;
+    private readonly tags: UIEventSource<any>;
+
+    private readonly isDeletedBadge: UIElement;
+    private readonly deleteDialog: UIElement;
+
+    constructor(key: string, tags: UIEventSource<any>) {
+        super(tags);
+        this.tags = tags;
+        this.key = key;
+
+        this.isDeletedBadge = Translations.t.image.isDeleted;
+
+        const style = "display:block;color:white;width:100%;"
+        const deleteButton = Translations.t.image.doDelete.Clone()
+            .SetStyle(style+"background:#ff8c8c;")
+            .onClick(() => {
+                State.state?.changes.addTag(tags.data.id, new Tag(key, ""));
+            });
+
+        const cancelButton = Translations.t.general.cancel;
+        this.deleteDialog = new CheckBox(
+            new Combine([
+                deleteButton,
+                cancelButton
+                
+            ]).SetStyle("display:flex;flex-direction:column;"),
+            "<img src='./assets/delete.svg' style='width:1.5em;'>"
+        )
+
+    }
+
+    InnerRender(): string {
+
+        const value = this.tags.data[this.key];
+        if (value === undefined || value === "") {
+            return this.isDeletedBadge.Render();
+        }
+
+        return this.deleteDialog.Render();
+    }
+
+}

UI/Image/ImageCarousel.ts

@@ -8,6 +8,8 @@ import {
     TagDependantUIElementConstructor
 } from "../../Customizations/UIElementConstructor";
 import Translation from "../i18n/Translation";
+import Combine from "../Base/Combine";
+import DeleteImage from "./DeleteImage";
 
 export class ImageCarouselConstructor implements TagDependantUIElementConstructor {
     IsKnown(properties: any): boolean {
@@ -34,16 +36,21 @@ export class ImageCarouselConstructor implements TagDependantUIElementConstructo
 
 export class ImageCarousel extends TagDependantUIElement {
 
-    public readonly searcher: ImageSearcher;
     public readonly slideshow: SlideShow;
 
     constructor(tags: UIEventSource<any>) {
         super(tags);
-        this.searcher = new ImageSearcher(tags);
-        const uiElements = this.searcher.map((imageURLS: string[]) => {
+        const searcher : UIEventSource<{url:string}[]> = new ImageSearcher(tags);
+        const uiElements = searcher.map((imageURLS: {key: string, url:string}[]) => {
             const uiElements: UIElement[] = [];
             for (const url of imageURLS) {
-                const image = ImageSearcher.CreateImageElement(url);
+                let image = ImageSearcher.CreateImageElement(url.url);
+                if(url.key !== undefined){
+                    image = new Combine([
+                        image,
+                        new DeleteImage(url.key, tags)
+                    ]);
+                }
                 uiElements.push(image);
             }
             return uiElements;

UI/Image/ImgurImage.ts

@@ -4,7 +4,7 @@ import {LicenseInfo} from "../../Logic/Web/Wikimedia";
 import {Imgur} from "../../Logic/Web/Imgur";
 
 
-export class    ImgurImage extends UIElement {
+export class ImgurImage extends UIElement {
 
 
     /***

UI/Image/WikimediaImage.ts

@@ -35,7 +35,7 @@ export class WikimediaImage extends UIElement {
 
         const wikimediaLink =
             "<a href='https://commons.wikimedia.org/wiki/" + this._imageLocation + "' target='_blank'>" +
-            "<img class='wikimedia-link' src='./assets/wikimedia-commons-white.svg' alt='Wikimedia Commons Logo'/>" +
+            "<img style='width:2em;height: 2em' class='wikimedia-link' src='./assets/wikimedia-commons-white.svg' alt='Wikimedia Commons Logo'/>" +
             "</a> ";
 
         const attribution =

UI/LayerSelection.ts

@@ -1,10 +1,9 @@
-import { UIElement } from "./UIElement";
-import { FilteredLayer } from "../Logic/FilteredLayer";
-import { CheckBox } from "./Input/CheckBox";
+import {UIElement} from "./UIElement";
+import {CheckBox} from "./Input/CheckBox";
 import Combine from "./Base/Combine";
-import {Utils} from "../Utils";
 import {Img} from "./Img";
 import {State} from "../State";
+import Translations from "./i18n/Translations";
 
 export class LayerSelection extends UIElement {
 
@@ -15,37 +14,27 @@ export class LayerSelection extends UIElement {
         this._checkboxes = [];
 
         for (const layer of State.state.filteredLayers.data) {
-            const checkbox = `<svg width="26" height="18" viewBox="0 0 26 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M3 7.28571L10.8261 15L23 3" stroke="#003B8B" stroke-width="4" stroke-linejoin="round"/>
-            </svg>`;
-            let icon = "<img >";
+            const checkbox = Img.checkmark;
+            let icon = "";
             if (layer.layerDef.icon && layer.layerDef.icon !== "") {
-                icon = `<img width="20" height="20" src="${layer.layerDef.icon}" alt="">`
+                icon = `<img width="20" height="20" src="${layer.layerDef.icon}">`
             }
-            const name = layer.layerDef.name;
+            const name = Translations.WT(layer.layerDef.name).Clone()
+                .SetStyle("font-size:large;");
 
             this._checkboxes.push(new CheckBox(
-              new Combine([checkbox, icon, name]),
-              new Combine([
-                  Img.no_checkmark,
-                  icon,
-                  layer.layerDef.name]),
-              layer.isDisplayed));
-      }
+                new Combine([checkbox, icon, name]),
+                new Combine([Img.no_checkmark, icon, name]),
+                layer.isDisplayed)
+                .SetStyle("margin:0.3em;")
+            );
+        }
     }
 
-  InnerRender(): string {
-    let html = ``;
-
-    for (const checkBox of this._checkboxes) {
-      const checkBoxHTML = checkBox.Render();
-      const checkBoxListItem = `<li>${checkBoxHTML}</li>`;
-
-      html = html + checkBoxListItem;
+    InnerRender(): string {
+        return new Combine(this._checkboxes)
+            .SetStyle("display:flex;flex-direction:column;")
+            .Render();
     }
 
-
-    return `<ul>${html}</ul>`;
-    }
-    
 }

UI/SlideShow.ts

@@ -71,5 +71,12 @@ export class SlideShow extends UIElement {
         index = index % this._embeddedElements.data.length;
         this._currentSlide.setData(index);
     }
+    
+    Update() {
+        super.Update();
+        for (const uiElement of this._embeddedElements.data) {
+            uiElement.Update();
+        }
+    }
 
- }
+}

UI/i18n/Translations.ts

@@ -1015,6 +1015,10 @@ export default class Translations {
                     "</ul></p>" +
                     "<p>Merk je een bug of wil je een extra feature? Wil je helpen vertalen? Bezoek dan de <a href='https://github.com/pietervdvn/MapComplete' target='_blank'>broncode</a> en <a href='https://github.com/pietervdvn/MapComplete/issues' target='_blank'>issue tracker</a></p>",
 
+            }),
+            backgroundMap: new T({
+                "en":"Background map",
+                "nl":"Achtergrondkaart"
             })