Refactoring: attempting to make State smaller

Changelog.md

@@ -1,17 +0,0 @@
-
-
-# 0.1.0
-
-New features in 0.1.0
-
-- Integrate the Editor Layer Index: tons of backgrounds to choose from
-- Add an opening hours picker
-- Add an opening hours visualization (thanks to opening_hours.js)
-- Add a small 'shop'-theme to boast the Opening hour-picker
-- Small improvements to the themes
-- Various bugfixes
-
-
-# 0.0.9 (and before)
-
-- Don't close changesets immedietely, keep the CS open and reuse it for one hour (even accross devices)

InitUiElements.ts

@@ -15,7 +15,7 @@ import {VariableUiElement} from "./UI/Base/VariableUIElement";
 import {UpdateFromOverpass} from "./Logic/UpdateFromOverpass";
 import {UIEventSource} from "./Logic/UIEventSource";
 import {QueryParameters} from "./Logic/Web/QueryParameters";
-import {PersonalLayersPanel} from "./Logic/PersonalLayersPanel";
+import {PersonalLayersPanel} from "./UI/PersonalLayersPanel";
 import Locale from "./UI/i18n/Locale";
 import {StrayClickHandler} from "./Logic/Leaflet/StrayClickHandler";
 import {SimpleAddUI} from "./UI/SimpleAddUI";
@@ -29,7 +29,7 @@ import {GeoLocationHandler} from "./Logic/Leaflet/GeoLocationHandler";
 import {LocalStorageSource} from "./Logic/Web/LocalStorageSource";
 import {Utils} from "./Utils";
 import BackgroundSelector from "./UI/BackgroundSelector";
-import AvailableBaseLayers from "./Logic/AvailableBaseLayers";
+import AvailableBaseLayers from "./Logic/Actors/AvailableBaseLayers";
 import {FeatureInfoBox} from "./UI/Popup/FeatureInfoBox";
 import Svg from "./Svg";
 import Link from "./UI/Base/Link";
@@ -38,6 +38,7 @@ import LayoutConfig from "./Customizations/JSON/LayoutConfig";
 import * as L from "leaflet";
 import {Img} from "./UI/Img";
 import {UserDetails} from "./Logic/Osm/OsmConnection";
+import Attribution from "./UI/Misc/Attribution";
 
 export class InitUiElements {
 
@@ -414,7 +415,7 @@ export class InitUiElements {
             checkbox.AttachTo("layer-selection");
 
 
-            State.state.bm.Location.addCallback(() => {
+            State.state.locationControl.addCallback(() => {
                 // Close the layer selection when the map is moved
                 checkbox.isEnabled.setData(false);
             });
@@ -433,51 +434,15 @@ export class InitUiElements {
 
         });
     }
-
-
-    static CreateAttribution() {
-        return new VariableUiElement(
-            State.state.locationControl.map((location) => {
-                const mapComplete = new Link(`Mapcomplete ${State.vNumber}`, 'https://github.com/pietervdvn/MapComplete', true);
-                const reportBug = new Link(Svg.bug_img, "https://github.com/pietervdvn/MapComplete/issues", true);
-
-                const layoutId = State.state.layoutToUse.data.id;
-                const osmChaLink = `https://osmcha.org/?filters=%7B%22comment%22%3A%5B%7B%22label%22%3A%22%23${layoutId}%22%2C%22value%22%3A%22%23${layoutId}%22%7D%5D%2C%22date__gte%22%3A%5B%7B%22label%22%3A%222020-07-05%22%2C%22value%22%3A%222020-07-05%22%7D%5D%2C%22editor%22%3A%5B%7B%22label%22%3A%22MapComplete%22%2C%22value%22%3A%22MapComplete%22%7D%5D%7D`
-                const stats = new Link(Svg.statistics_img, osmChaLink, true)
-                let editHere: (UIElement | string) = "";
-                if (location !== undefined) {
-                    const idLink = `https://www.openstreetmap.org/edit?editor=id#map=${location.zoom}/${location.lat}/${location.lon}`
-                    editHere = new Link(Svg.pencil_img, idLink, true);
-                }
-                let editWithJosm: (UIElement | string) = ""
-                if (location !== undefined &&
-                    State.state.osmConnection !== undefined &&
-                    State.state.bm !== undefined &&
-                    State.state.osmConnection.userDetails.data.csCount >= State.userJourney.tagsVisibleAndWikiLinked) {
-                    const bounds = (State.state.bm as Basemap).map.getBounds();
-                    const top = bounds.getNorth();
-                    const bottom = bounds.getSouth();
-                    const right = bounds.getEast();
-                    const left = bounds.getWest();
-
-                    const josmLink = `http://127.0.0.1:8111/load_and_zoom?left=${left}&right=${right}&top=${top}&bottom=${bottom}`
-                    editWithJosm = new Link(Svg.josm_logo_img, josmLink, true);
-                }
-                return new Combine([mapComplete, reportBug, " | ", stats, " | ", editHere, editWithJosm]).Render();
-
-            }, [State.state.osmConnection.userDetails])
-        ).SetClass("map-attribution")
-    }
-
     static InitBaseMap() {
-        const bm = new Basemap("leafletDiv", State.state.locationControl, this.CreateAttribution());
+        const bm = new Basemap("leafletDiv", State.state.locationControl, new Attribution(State.state.locationControl, State.state.osmConnection.userDetails, State.state.layoutToUse, State.state.bm));
         State.state.bm = bm;
         bm.map.on("popupclose", () => {
             State.state.selectedElement.setData(undefined)
         })
         State.state.layerUpdater = new UpdateFromOverpass(State.state);
 
-        State.state.availableBackgroundLayers = new AvailableBaseLayers(State.state).availableEditorLayers;
+        State.state.availableBackgroundLayers = new AvailableBaseLayers(State.state.locationControl, State.state.bm).availableEditorLayers;
         const queryParam = QueryParameters.GetQueryParameter("background", State.state.layoutToUse.data.defaultBackgroundId, "The id of the background layer to start with");
 
         queryParam.addCallbackAndRun((selectedId: string) => {

Logic/Actors/AvailableBaseLayers.ts

@@ -1,25 +1,42 @@
-import * as editorlayerindex from "../assets/editor-layer-index.json"
+import * as editorlayerindex from "../../assets/editor-layer-index.json"
-import {UIEventSource} from "./UIEventSource";
+import {UIEventSource} from "../UIEventSource";
-import {GeoOperations} from "./GeoOperations";
+import {GeoOperations} from "../GeoOperations";
-import {State} from "../State";
+import {Basemap} from "../Leaflet/Basemap";
-import {Basemap} from "./Leaflet/Basemap";
+import {BaseLayer} from "../../Models/BaseLayer";
-import {QueryParameters} from "./Web/QueryParameters";
+import * as X from "leaflet-providers";
-import {BaseLayer} from "./BaseLayer";
+import * as L from "leaflet";
+import {TileLayer} from "leaflet";
+import {Utils} from "../../Utils";
 
 /**
  * Calculates which layers are available at the current location
+ * Changes the basemap
  */
 export default class AvailableBaseLayers {
 
 
+    public static osmCarto: BaseLayer =
+        {
+            id: "osm",
+            name: "OpenStreetMap",
+            layer: AvailableBaseLayers.CreateBackgroundLayer("osm", "OpenStreetMap",
+                "https://tile.openstreetmap.org/{z}/{x}/{y}.png", "OpenStreetMap", "https://openStreetMap.org/copyright",
+                19,
+                false, false),
+            feature: null,
+            max_zoom: 19,
+            min_zoom: 0
+        }
+
 
     public static layerOverview = AvailableBaseLayers.LoadRasterIndex().concat(AvailableBaseLayers.LoadProviderIndex());
     public availableEditorLayers: UIEventSource<BaseLayer[]>;
 
-    constructor(state: State) {
+    constructor(location: UIEventSource<{ lat: number, lon: number, zoom: number }>,
+                bm: Basemap) {
         const self = this;
         this.availableEditorLayers =
-            state.locationControl.map(
+            location.map(
                 (currentLocation) => {
                     const currentLayers = self.availableEditorLayers?.data;
                     const newLayers = AvailableBaseLayers.AvailableLayersAt(currentLocation?.lon, currentLocation?.lat);
@@ -40,36 +57,34 @@ export default class AvailableBaseLayers {
                 });
 
 
+        // Change the baselayer back to OSM if we go out of the current range of the layer
         this.availableEditorLayers.addCallbackAndRun(availableLayers => {
-            const layerControl = (state.bm as Basemap).CurrentLayer;
+            const layerControl = bm.CurrentLayer;
             const currentLayer = layerControl.data.id;
             for (const availableLayer of availableLayers) {
                 if (availableLayer.id === currentLayer) {
 
-                    if (availableLayer.max_zoom < state.locationControl.data.zoom) {
+                    if (availableLayer.max_zoom < location.data.zoom) {
                         break;
                     }
 
-                    if (availableLayer.min_zoom > state.locationControl.data.zoom) {
+                    if (availableLayer.min_zoom > location.data.zoom) {
                         break;
                     }
-
+                    return; // All good - the current layer still works!
-
-                    return; // All good!
                 }
             }
             // Oops, we panned out of range for this layer!
             console.log("AvailableBaseLayers-actor: detected that the current bounds aren't sufficient anymore - reverting to OSM standard")
-            layerControl.setData(Basemap.osmCarto);
+            layerControl.setData(AvailableBaseLayers.osmCarto);
 
         });
 
 
-
     }
 
-    public static AvailableLayersAt(lon: number, lat: number): BaseLayer[] {
+    private static AvailableLayersAt(lon: number, lat: number): BaseLayer[] {
-        const availableLayers = [Basemap.osmCarto]
+        const availableLayers = [AvailableBaseLayers.osmCarto]
         const globalLayers = [];
         for (const i in AvailableBaseLayers.layerOverview) {
             const layer = AvailableBaseLayers.layerOverview[i];
@@ -116,18 +131,18 @@ export default class AvailableBaseLayers {
                 continue;
             }
 
-            if(props.max_zoom < 19){
+            if (props.max_zoom < 19) {
                 // We want users to zoom to level 19 when adding a point
                 // If they are on a layer which hasn't enough precision, they can not zoom far enough. This is confusing, so we don't use this layer
                 continue;
             }
 
-            if(props.name === undefined){
+            if (props.name === undefined) {
                 console.warn("Editor layer index: name not defined on ", props)
                 continue
             }
 
-            const leafletLayer = Basemap.CreateBackgroundLayer(
+            const leafletLayer = AvailableBaseLayers.CreateBackgroundLayer(
                 props.id,
                 props.name,
                 props.url,
@@ -152,9 +167,11 @@ export default class AvailableBaseLayers {
     }
 
     private static LoadProviderIndex(): BaseLayer[] {
-
+        // @ts-ignore
-        function l(id: string, name: string){
+        X; // Import X to make sure the namespace is not optimized away
-            const layer = Basemap.ProvidedLayer(id);
+        function l(id: string, name: string) {
+            try {
+                const layer: any = L.tileLayer.provider(id, undefined);
                 return {
                     feature: null,
                     id: id,
@@ -163,9 +180,13 @@ export default class AvailableBaseLayers {
                     min_zoom: layer.minzoom,
                     max_zoom: layer.maxzoom
                 }
+            } catch (e) {
+                console.error("Could not find provided layer", name, e);
+                return null;
+            }
         }
 
-        return [
+        const layers = [
             l("CyclOSM", "CyclOSM - A bicycle oriented map"),
             l("Stamen.TonerLite", "Toner Lite (by Stamen)"),
             l("Stamen.TonerBackground", "Toner Background - no labels (by Stamen)"),
@@ -177,9 +198,76 @@ export default class AvailableBaseLayers {
             l("CartoDB.PositronNoLabels", "Positron  - no labels (by CartoDB)"),
             l("CartoDB.Voyager", "Voyager (by CartoDB)"),
             l("CartoDB.VoyagerNoLabels", "Voyager  - no labels (by CartoDB)"),
-
         ];
+        return Utils.NoNull(layers);
 
     }
 
+    /**
+     * Converts a layer from the editor-layer-index into a tilelayer usable by leaflet
+     */
+    private static CreateBackgroundLayer(id: string, name: string, url: string, attribution: string, attributionUrl: string,
+                                         maxZoom: number, isWms: boolean, isWMTS?: boolean): TileLayer {
+
+        url = url.replace("{zoom}", "{z}")
+            .replace("&BBOX={bbox}", "")
+            .replace("&bbox={bbox}", "");
+
+        const subdomainsMatch = url.match(/{switch:[^}]*}/)
+        let domains: string[] = [];
+        if (subdomainsMatch !== null) {
+            let domainsStr = subdomainsMatch[0].substr("{switch:".length);
+            domainsStr = domainsStr.substr(0, domainsStr.length - 1);
+            domains = domainsStr.split(",");
+            url = url.replace(/{switch:[^}]*}/, "{s}")
+        }
+
+
+        if (isWms) {
+            url = url.replace("&SRS={proj}", "");
+            url = url.replace("&srs={proj}", "");
+            const paramaters = ["format", "layers", "version", "service", "request", "styles", "transparent", "version"];
+            const urlObj = new URL(url);
+
+            const isUpper = urlObj.searchParams["LAYERS"] !== null;
+            const options = {
+                maxZoom: maxZoom ?? 19,
+                attribution: attribution + " | ",
+                subdomains: domains,
+                uppercase: isUpper,
+                transparent: false
+            };
+
+            for (const paramater of paramaters) {
+                let p = paramater;
+                if (isUpper) {
+                    p = paramater.toUpperCase();
+                }
+                options[paramater] = urlObj.searchParams.get(p);
+            }
+
+            if (options.transparent === null) {
+                options.transparent = false;
+            }
+
+
+            return L.tileLayer.wms(urlObj.protocol + "//" + urlObj.host + urlObj.pathname, options);
+        }
+
+        if (attributionUrl) {
+            attribution = `<a href='${attributionUrl}' target='_blank'>${attribution}</a>`;
+        }
+
+        return L.tileLayer(url,
+            {
+                attribution: attribution,
+                maxZoom: maxZoom,
+                minZoom: 1,
+                // @ts-ignore
+                wmts: isWMTS ?? false,
+                subdomains: domains
+            });
+    }
+
+
 }

Logic/Actors/ImageSearcher.ts

@@ -0,0 +1,174 @@
+import {ImagesInCategory, Wikidata, Wikimedia} from "../Web/Wikimedia";
+import {UIEventSource} from "../UIEventSource";
+
+/**
+ * There are multiple way to fetch images for an object
+ * 1) There is an image tag
+ * 2) There is an image tag, the image tag contains multiple ';'-seperated URLS
+ * 3) there are multiple image tags, e.g. 'image', 'image:0', 'image:1', and 'image_0', 'image_1' - however, these are pretty rare so we are gonna ignore them
+ * 4) There is a wikimedia_commons-tag, which either has a 'File': or a 'category:' containing images
+ * 5) There is a wikidata-tag, and the wikidata item either has an 'image' attribute or has 'a link to a wikimedia commons category'
+ * 6) There is a wikipedia article, from which we can deduct the wikidata item
+ *
+ * For some images, author and license should be shown
+ */
+/**
+ * Class which search for all the possible locations for images and which builds a list of UI-elements for it.
+ * Note that this list is embedded into an UIEVentSource, ready to put it into a carousel.
+ *
+ */
+export class ImageSearcher {
+
+    public readonly images = new UIEventSource<{ key: string, url: string }[]>([]);
+    private readonly _wdItem = new UIEventSource<string>("");
+    private readonly _commons = new UIEventSource<string>("");
+
+    constructor(tags: UIEventSource<any>, imagePrefix = "image", loadSpecial = true) {
+        const self = this;
+
+        function AddImages(images: { key: string, url: string }[]) {
+            const oldUrls = self.images.data.map(kurl => kurl.url);
+            let somethingChanged = false;
+            for (const image of images) {
+                const url = image.url;
+                const key = image.key;
+
+                if (url === undefined || url === null || url === "") {
+                    continue;
+                }
+                if (oldUrls.indexOf(url) >= 0) {
+                    // Already exists
+                    continue;
+                }
+
+                self.images.data.push(image);
+                somethingChanged = true;
+            }
+            if (somethingChanged) {
+                self.images.ping();
+            }
+        }
+
+
+        // By wrapping this in a UIEventSource, we prevent multiple queries of loadWikiData
+        this._wdItem.addCallback(wdItemContents => {
+            // TODO HANDLE IMAGES
+            const images = ImageSearcher.loadWikidata(wdItemContents).map(url => {
+                return {url: url, key: undefined}
+            });
+            AddImages(images);
+        });
+        this._commons.addCallback(commonsData => {
+            // TODO Handle images
+            const images = ImageSearcher.LoadCommons(commonsData).map(url => {
+                return {url: url, key: undefined}
+            });
+            AddImages(images);
+        });
+        tags.addCallbackAndRun(tags => {
+            const images = ImageSearcher.LoadImages(tags, imagePrefix, loadSpecial);
+            AddImages(images);
+        });
+
+        if (loadSpecial) {
+            tags.addCallbackAndRun(tags => {
+
+                const wdItem = tags.wikidata;
+                if (wdItem !== undefined) {
+                    self._wdItem.setData(wdItem);
+                }
+                const commons = tags.wikimedia_commons;
+                if (commons !== undefined) {
+                    self._commons.setData(commons);
+                }
+
+                if (tags.mapillary) {
+                    let mapillary = tags.mapillary;
+                    const prefix = "https://www.mapillary.com/map/im/";
+
+                    let regex = /https?:\/\/www.mapillary.com\/app\/.*&pKey=([^&]*)/
+                    let match = mapillary.match(regex);
+                    if (match) {
+                        mapillary = match[1];
+                    }
+
+                    if (mapillary.indexOf(prefix) < 0) {
+                        mapillary = prefix + mapillary;
+                    }
+                    
+
+                    AddImages([{url: mapillary, key: undefined}]);
+                }
+            })
+        }
+    }
+
+    private static loadWikidata(wikidataItem): string[] {
+        // Load the wikidata item, then detect usage on 'commons'
+        let allWikidataId = wikidataItem.split(";");
+        const imageURLS: string[] = [];
+        for (let wikidataId of allWikidataId) {
+            // @ts-ignore
+            if (wikidataId.startsWith("Q")) {
+                wikidataId = wikidataId.substr(1);
+            }
+            Wikimedia.GetWikiData(parseInt(wikidataId), (wd: Wikidata) => {
+                imageURLS.push(wd.image);
+                Wikimedia.GetCategoryFiles(wd.commonsWiki, (images: ImagesInCategory) => {
+                    for (const image of images.images) {
+                        // @ts-ignore
+                        if (image.startsWith("File:")) {
+                            imageURLS.push(image);
+                        }
+                    }
+                })
+            })
+        }
+        return imageURLS;
+    }
+
+    private static LoadCommons(commonsData: string): string[] {
+        const imageUrls = [];
+        const allCommons: string[] = commonsData.split(";");
+        for (const commons of allCommons) {
+            // @ts-ignore
+            if (commons.startsWith("Category:")) {
+                Wikimedia.GetCategoryFiles(commons, (images: ImagesInCategory) => {
+                    for (const image of images.images) {
+                        // @ts-ignore
+                        if (image.startsWith("File:")) {
+                            imageUrls.push(image);
+                        }
+                    }
+                })
+            } else { // @ts-ignore
+                if (commons.startsWith("File:")) {
+                    imageUrls.push(commons);
+                }
+            }
+        }
+        return imageUrls;
+    }
+
+    private static LoadImages(tags: any, imagePrefix: string, loadAdditional: boolean): { key: string, url: string }[] {
+        const imageTag = tags[imagePrefix];
+        const images: { key: string, url: string }[] = [];
+        if (imageTag !== undefined) {
+            const bareImages = imageTag.split(";");
+            for (const bareImage of bareImages) {
+                images.push({key: imagePrefix, url: bareImage})
+            }
+        }
+
+        for (const key in tags) {
+            if (key.startsWith(imagePrefix + ":")) {
+                const url = tags[key]
+                images.push({key: key, url: url})
+            }
+        }
+
+
+        return images;
+    }
+
+}

Logic/Actors/Readme.md

@@ -0,0 +1,8 @@
+Actors
+======
+
+An **actor** is a module which converts one UIEventSource into another while performing logic.
+
+Typically, it will only expose the constructor taking some UIEventSources (and configuration) and a few fields which are UIEVentSources.
+
+An actor should _never_ have a dependency on 'State' and should _never_ import it

Logic/Bounds.ts

@@ -1,6 +0,0 @@
-export interface Bounds {
-    north: number,
-    east: number,
-    south: number,
-    west: number
-}

Logic/ImageSearcher.ts

@@ -1,166 +0,0 @@
-import {WikimediaImage} from "../UI/Image/WikimediaImage";
-import {SimpleImageElement} from "../UI/Image/SimpleImageElement";
-import {UIElement} from "../UI/UIElement";
-import {ImgurImage} from "../UI/Image/ImgurImage";
-import {ImagesInCategory, Wikidata, Wikimedia} from "./Web/Wikimedia";
-import {UIEventSource} from "./UIEventSource";
-import {MapillaryImage} from "../UI/Image/MapillaryImage";
-
-/**
- * There are multiple way to fetch images for an object
- * 1) There is an image tag
- * 2) There is an image tag, the image tag contains multiple ';'-seperated URLS
- * 3) there are multiple image tags, e.g. 'image', 'image:0', 'image:1', and 'image_0', 'image_1' - however, these are pretty rare so we are gonna ignore them
- * 4) There is a wikimedia_commons-tag, which either has a 'File': or a 'category:' containing images
- * 5) There is a wikidata-tag, and the wikidata item either has an 'image' attribute or has 'a link to a wikimedia commons category'
- * 6) There is a wikipedia article, from which we can deduct the wikidata item
- *
- * For some images, author and license should be shown
- */
-/**
- * Class which search for all the possible locations for images and which builds a list of UI-elements for it.
- * Note that this list is embedded into an UIEVentSource, ready to put it into a carousel
- */
-export class ImageSearcher extends UIEventSource<{key: string, url: string}[]> {
-
-    private readonly _tags: UIEventSource<any>;
-    private readonly _wdItem = new UIEventSource<string>("");
-    private readonly _commons = new UIEventSource<string>("");
-
-
-    constructor(tags: UIEventSource<any>, imagePrefix = "image", loadSpecial = true) {
-        super([]);
-
-        this._tags = tags;
-
-        const self = this;
-
-        // By wrapping this in a UIEventSource, we prevent multiple queries of loadWikiData
-        this._wdItem.addCallback(() => self.loadWikidata());
-        this._commons.addCallback(() => self.LoadCommons());
-
-
-        this._tags.addCallbackAndRun(() => self.LoadImages(imagePrefix, loadSpecial));
-
-    }
-
-    private AddImage(key: string, url: string) {
-        if (url === undefined || url === null || url === "") {
-            return;
-        }
-        for (const el of this.data) {
-            if (el.url === url) {
-                // This url is already seen -> don't add it
-                return;
-            }
-        }
-
-        this.data.push({key: key, url: url});
-        this.ping();
-    }
-
-    private loadWikidata() {
-        // Load the wikidata item, then detect usage on 'commons'
-        let allWikidataId = this._wdItem.data.split(";");
-        for (let wikidataId of allWikidataId) {
-            // @ts-ignore
-            if (wikidataId.startsWith("Q")) {
-                wikidataId = wikidataId.substr(1);
-            }
-            Wikimedia.GetWikiData(parseInt(wikidataId), (wd: Wikidata) => {
-                this.AddImage(undefined, wd.image);
-                Wikimedia.GetCategoryFiles(wd.commonsWiki, (images: ImagesInCategory) => {
-                    for (const image of images.images) {
-                        // @ts-ignore
-                        if (image.startsWith("File:")) {
-                            this.AddImage(undefined, image);
-                        }
-                    }
-                })
-            })
-        }
-    }
-
-    private LoadCommons() {
-        const allCommons: string[] = this._commons.data.split(";");
-        for (const commons of allCommons) {
-            // @ts-ignore
-            if (commons.startsWith("Category:")) {
-                Wikimedia.GetCategoryFiles(commons, (images: ImagesInCategory) => {
-                    for (const image of images.images) {
-                        // @ts-ignore
-                        if (image.startsWith("File:")) {
-                            this.AddImage(undefined, image);
-                        }
-                    }
-                })
-            } else { // @ts-ignore
-                if (commons.startsWith("File:")) {
-                    this.AddImage(undefined, commons);
-                }
-            }
-        }
-    }
-
-    private LoadImages(imagePrefix: string, loadAdditional: boolean): void {
-        const imageTag = this._tags.data[imagePrefix];
-        if (imageTag !== undefined) {
-            const bareImages = imageTag.split(";");
-            for (const bareImage of bareImages) {
-                this.AddImage(imagePrefix, bareImage);
-            }
-        }
-
-        for (const key in this._tags.data) {
-            if (key.startsWith(imagePrefix+":")) {
-                const url = this._tags.data[key]
-                this.AddImage(key, url);
-            }
-        }
-
-        if (loadAdditional) {
-
-            const wdItem = this._tags.data.wikidata;
-            if (wdItem !== undefined) {
-                this._wdItem.setData(wdItem);
-            }
-            const commons = this._tags.data.wikimedia_commons;
-            if (commons !== undefined) {
-                this._commons.setData(commons);
-            }
-
-            if (this._tags.data.mapillary) {
-                let mapillary =  this._tags.data.mapillary;
-                const prefix = "https://www.mapillary.com/map/im/";
-                if(mapillary.indexOf(prefix) < 0){
-                    mapillary = prefix + mapillary;
-                }
-                this.AddImage(undefined, mapillary)
-            }
-
-        }
-    }
-
-
-    /***
-     * Creates either a 'simpleimage' or a 'wikimediaimage' based on the string
-     * @param url
-     * @constructor
-     */
-    static CreateImageElement(url: string): UIElement {
-        // @ts-ignore
-        if (url.startsWith("File:")) {
-            return new WikimediaImage(url);
-        } else if (url.toLowerCase().startsWith("https://commons.wikimedia.org/wiki/")) {
-            const commons = url.substr("https://commons.wikimedia.org/wiki/".length);
-            return new WikimediaImage(commons);
-        } else if (url.toLowerCase().startsWith("https://i.imgur.com/")) {
-            return new ImgurImage(url);
-        } else if (url.toLowerCase().startsWith("https://www.mapillary.com/map/im/")) {
-            return new MapillaryImage(url);
-        } else {
-            return new SimpleImageElement(new UIEventSource<string>(url));
-        }
-    }
-
-}

Logic/Leaflet/Basemap.ts

@@ -1,45 +1,27 @@
 import * as L from "leaflet"
-import * as X from "leaflet-providers"
-import {TileLayer} from "leaflet"
 import {UIEventSource} from "../UIEventSource";
 import {UIElement} from "../../UI/UIElement";
-import {BaseLayer} from "../BaseLayer";
+import {BaseLayer} from "../../Models/BaseLayer";
+import AvailableBaseLayers from "../Actors/AvailableBaseLayers";
+import Loc from "../../Models/Loc";
 
-// Contains all setup and baselayers for Leaflet stuff
 export class Basemap {
 
 
-    public static osmCarto: BaseLayer =
-        {
-            id: "osm",
-            //max_zoom: 19, 
-            name: "OpenStreetMap",
-            layer: Basemap.CreateBackgroundLayer("osm", "OpenStreetMap",
-                "https://tile.openstreetmap.org/{z}/{x}/{y}.png", "OpenStreetMap", "https://openStreetMap.org/copyright",
-                19,
-                false, false),
-            feature: null,
-            max_zoom: 19,
-            min_zoom: 0
-        }
-
     // @ts-ignore
     public readonly map: Map;
 
-    public readonly Location: UIEventSource<{ zoom: number, lat: number, lon: number }>;
     public readonly LastClickLocation: UIEventSource<{ lat: number, lon: number }> = new UIEventSource<{ lat: number, lon: number }>(undefined)
-    private _previousLayer: TileLayer = undefined;
+    public readonly CurrentLayer: UIEventSource<BaseLayer> = new UIEventSource(AvailableBaseLayers.osmCarto);
-    public readonly CurrentLayer: UIEventSource<BaseLayer> = new UIEventSource(Basemap.osmCarto);
 
 
     constructor(leafletElementId: string,
-                location: UIEventSource<{ zoom: number, lat: number, lon: number }>,
+                location: UIEventSource<Loc>,
                 extraAttribution: UIElement) {
-        this._previousLayer = Basemap.osmCarto.layer;
         this.map = L.map(leafletElementId, {
             center: [location.data.lat ?? 0, location.data.lon ?? 0],
             zoom: location.data.zoom ?? 2,
-            layers: [this._previousLayer],
+            layers: [ AvailableBaseLayers.osmCarto.layer],
         });
 
         L.control.scale(
@@ -56,8 +38,6 @@ export class Basemap {
         );
         this.map.attributionControl.setPrefix(
             extraAttribution.Render() + " | <a href='https://osm.org'>OpenStreetMap</a>");
-        this.Location = location;
-
 
         this.map.zoomControl.setPosition("bottomright");
         const self = this;
@@ -69,14 +49,6 @@ export class Basemap {
             location.ping();
         });
 
-        this.CurrentLayer.addCallback((layer: BaseLayer) => {
-            if (self._previousLayer !== undefined) {
-                self.map.removeLayer(self._previousLayer);
-            }
-            self._previousLayer = layer.layer;
-            self.map.addLayer(layer.layer);
-        });
-
         this.map.on("click", function (e) {
             self.LastClickLocation.setData({lat: e.latlng.lat, lon: e.latlng.lng})
         });
@@ -87,72 +59,5 @@ export class Basemap {
         });
     }
 
-    public static CreateBackgroundLayer(id: string, name: string, url: string, attribution: string, attributionUrl: string,
-                                        maxZoom: number, isWms: boolean, isWMTS?: boolean): TileLayer {
 
-        url = url.replace("{zoom}", "{z}")
-            .replace("&BBOX={bbox}", "")
-            .replace("&bbox={bbox}", "");
-
-        const subdomainsMatch = url.match(/{switch:[^}]*}/)
-        let domains: string[] = [];
-        if (subdomainsMatch !== null) {
-            let domainsStr = subdomainsMatch[0].substr("{switch:".length);
-            domainsStr = domainsStr.substr(0, domainsStr.length - 1);
-            domains = domainsStr.split(",");
-            url = url.replace(/{switch:[^}]*}/, "{s}")
-        }
-
-
-        if (isWms) {
-            url = url.replace("&SRS={proj}","");
-            url = url.replace("&srs={proj}","");
-            const paramaters = ["format", "layers", "version", "service", "request", "styles", "transparent", "version"];
-            const urlObj = new URL(url);
-
-            const isUpper = urlObj.searchParams["LAYERS"] !== null;
-            const options = {
-                maxZoom: maxZoom ?? 19,
-                attribution: attribution + " | ",
-                subdomains: domains,
-                uppercase: isUpper,
-                transparent: false
-            };
-
-            for (const paramater of paramaters) {
-                let p = paramater;
-                if (isUpper) {
-                    p = paramater.toUpperCase();
-                }
-                options[paramater] = urlObj.searchParams.get(p);
-            }
-            
-            if(options.transparent === null){
-                options.transparent = false;
-            }
-
-
-            return L.tileLayer.wms(urlObj.protocol + "//" + urlObj.host + urlObj.pathname, options);
-        }
-
-        if (attributionUrl) {
-            attribution = `<a href='${attributionUrl}' target='_blank'>${attribution}</a>`;
-        }
-
-        return L.tileLayer(url,
-            {
-                attribution: attribution,
-                maxZoom: maxZoom,
-                minZoom: 1,
-                // @ts-ignore
-                wmts: isWMTS ?? false,
-                subdomains: domains
-            });
-    }
-
-    public static ProvidedLayer(name: string, options?: any): any {
-        X // We simply 'call' the namespace X here to force the import to run and not to be optimized away
-        // @ts-ignore
-        return L.tileLayer.provider(name, options);
-    }
 }

Logic/UpdateFromOverpass.ts

@@ -8,7 +8,7 @@ import MetaTagging from "./MetaTagging";
 
 export class UpdateFromOverpass {
 
-    public readonly sufficentlyZoomed: UIEventSource<boolean>;
+    public readonly sufficientlyZoomed: UIEventSource<boolean>;
     public readonly runningQuery: UIEventSource<boolean> = new UIEventSource<boolean>(false);
     public readonly retries: UIEventSource<number> = new UIEventSource<number>(0);
     /**
@@ -29,7 +29,7 @@ export class UpdateFromOverpass {
         this.state = state;
         const self = this;
 
-        this.sufficentlyZoomed = State.state.locationControl.map(location => {
+        this.sufficientlyZoomed = State.state.locationControl.map(location => {
                 if(location?.zoom === undefined){
                     return false;
                 }
@@ -50,7 +50,14 @@ export class UpdateFromOverpass {
 
         self.update(state);
         
-    }q
+    }
+
+    public ForceRefresh() {
+        for (let i = 0; i < 25; i++) {
+            this.previousBounds.set(i, []);
+        }
+        this.update(this.state);
+    }
 
     private GetFilter(state: State) {
         const filters: TagsFilter[] = [];
@@ -91,7 +98,6 @@ export class UpdateFromOverpass {
         }
         return new Or(filters);
     }
-
     private handleData(geojson: any) {
         const self = this;
 
@@ -131,7 +137,6 @@ export class UpdateFromOverpass {
 
         renderLayers(State.state.filteredLayers.data);
     }
-
     private handleFail(state: State, reason: any) {
         this.retries.data++;
         this.ForceRefresh();
@@ -146,8 +151,6 @@ export class UpdateFromOverpass {
         )
 
     }
-
-
     private update(state: State): void {
         const filter = this.GetFilter(state);
         if (filter === undefined) {
@@ -188,8 +191,6 @@ export class UpdateFromOverpass {
         
 
     }
-
-
     private IsInBounds(state: State, bounds: Bounds): boolean {
         if (this.previousBounds === undefined) {
             return false;
@@ -202,11 +203,7 @@ export class UpdateFromOverpass {
             b.getWest() >= bounds.west;
     }
     
-    public ForceRefresh() {
+    
-        for (let i = 0; i < 25; i++) {
+    
-            this.previousBounds.set(i, []);
-        }
-        this.update(this.state);
-    }
     
 }

Logic/Web/LiveQueryHandler.ts

@@ -1,13 +1,11 @@
-/**
+
- * Fetches data from random data sources
- */
 import {UIEventSource} from "../UIEventSource";
 import * as $ from "jquery"
-
+/**
+ * Fetches data from random data sources, used in the metatagging
+ */
 export default class LiveQueryHandler {
 
-
-    private static cache = {} // url --> UIEventSource<actual data>
     private static neededShorthands = {} // url -> (shorthand:paths)[]
 
     public static FetchLiveData(url: string, shorthands: string[]): UIEventSource<any /* string -> string */> {

Models/Constants.ts

@@ -0,0 +1,19 @@
+import { Utils } from "../Utils";
+
+export default class Constants {
+    public static vNumber = "0.2.6a";
+
+    // The user journey states thresholds when a new feature gets unlocked
+    public static userJourney = {
+        addNewPointsUnlock: 0,
+        moreScreenUnlock: 5,
+        personalLayoutUnlock: 20,
+        tagsVisibleAt: 100,
+        mapCompleteHelpUnlock: 200,
+        tagsVisibleAndWikiLinked: 150,
+        themeGeneratorReadOnlyUnlock: 200,
+        themeGeneratorFullUnlock: 500,
+        addNewPointWithUnreadMessagesUnlock: 500,
+        minZoomLevelToAddNewPoints: (Utils.isRetina() ? 18 : 19)
+    };
+}

Models/Loc.ts

@@ -0,0 +1,5 @@
+export default interface Loc {
+    lat: number,
+    lon: number,
+    zoom: number
+}

State.ts

@@ -10,11 +10,13 @@ import {UpdateFromOverpass} from "./Logic/UpdateFromOverpass";
 import {UIEventSource} from "./Logic/UIEventSource";
 import {LocalStorageSource} from "./Logic/Web/LocalStorageSource";
 import {QueryParameters} from "./Logic/Web/QueryParameters";
-import {BaseLayer} from "./Logic/BaseLayer";
 import LayoutConfig from "./Customizations/JSON/LayoutConfig";
 import Hash from "./Logic/Web/Hash";
 import {MangroveIdentity} from "./Logic/Web/MangroveReviews";
 import InstalledThemes from "./Logic/InstalledThemes";
+import {BaseLayer} from "./Models/BaseLayer";
+import Loc from "./Models/Loc";
+import Constants from "./Models/Constants";
 
 /**
  * Contains the global state: a bunch of UI-event sources
@@ -25,24 +27,13 @@ export default class State {
     // The singleton of the global state
     public static state: State;
     
-    public static vNumber = "0.2.6a";
+    public static vNumber = Constants.vNumber;
-
+    public static userJourney = Constants.userJourney;
-    // The user journey states thresholds when a new feature gets unlocked
-    public static userJourney = {
-        addNewPointsUnlock: 0,
-        moreScreenUnlock: 5,
-        personalLayoutUnlock: 20,
-        tagsVisibleAt: 100,
-        mapCompleteHelpUnlock: 200,
-        tagsVisibleAndWikiLinked: 150,
-        themeGeneratorReadOnlyUnlock: 200,
-        themeGeneratorFullUnlock: 500, 
-        addNewPointWithUnreadMessagesUnlock: 500,
-        minZoomLevelToAddNewPoints: (Utils.isRetina() ? 18 : 19)
-    };
     
     public static runningFromConsole: boolean = false;
 
+    
+    
     public readonly layoutToUse = new UIEventSource<LayoutConfig>(undefined);
 
     /**
@@ -89,11 +80,6 @@ export default class State {
      */
     public readonly selectedElement = new UIEventSource<any>(undefined);
 
-    public readonly zoom: UIEventSource<number>;
-    public readonly lat: UIEventSource<number>;
-    public readonly lon: UIEventSource<number>;
-
-
     public readonly featureSwitchUserbadge: UIEventSource<boolean>;
     public readonly featureSwitchSearch: UIEventSource<boolean>;
     public readonly featureSwitchLayers: UIEventSource<boolean>;
@@ -108,7 +94,7 @@ export default class State {
     /**
      * The map location: currently centered lat, lon and zoom
      */
-    public readonly locationControl = new UIEventSource<{ lat: number, lon: number, zoom: number }>(undefined);
+    public readonly locationControl = new UIEventSource<Loc>(undefined);
 
     /**
      * The location as delivered by the GPS
@@ -142,23 +128,23 @@ export default class State {
                 return ("" + fl).substr(0, 8);
             })
         }
-        this.zoom = asFloat(
+        const zoom = asFloat(
             QueryParameters.GetQueryParameter("z", "" + layoutToUse.startZoom, "The initial/current zoom level")
             .syncWith(LocalStorageSource.Get("zoom")));
-        this.lat = asFloat(QueryParameters.GetQueryParameter("lat", "" + layoutToUse.startLat, "The initial/current latitude")
+        const lat = asFloat(QueryParameters.GetQueryParameter("lat", "" + layoutToUse.startLat, "The initial/current latitude")
             .syncWith(LocalStorageSource.Get("lat")));
-        this.lon = asFloat(QueryParameters.GetQueryParameter("lon", "" + layoutToUse.startLon, "The initial/current longitude of the app")
+        const lon = asFloat(QueryParameters.GetQueryParameter("lon", "" + layoutToUse.startLon, "The initial/current longitude of the app")
             .syncWith(LocalStorageSource.Get("lon")));
 
 
-        this.locationControl = new UIEventSource<{ lat: number, lon: number, zoom: number }>({
+        this.locationControl = new UIEventSource<Loc>({
-            zoom: Utils.asFloat(this.zoom.data),
+            zoom: Utils.asFloat(zoom.data),
-            lat: Utils.asFloat(this.lat.data),
+            lat: Utils.asFloat(lat.data),
-            lon: Utils.asFloat(this.lon.data),
+            lon: Utils.asFloat(lon.data),
         }).addCallback((latlonz) => {
-            this.zoom.setData(latlonz.zoom);
+            zoom.setData(latlonz.zoom);
-            this.lat.setData(latlonz.lat);
+            lat.setData(latlonz.lat);
-            this.lon.setData(latlonz.lon);
+            lon.setData(latlonz.lon);
         });
 
         this.layoutToUse.addCallback(layoutToUse => {
@@ -236,7 +222,7 @@ export default class State {
 
         this.installedThemes = InstalledThemes.InstalledThemes(this.osmConnection );
 
-        // IMportant: the favourite layers are initiliazed _after_ the installed themes, as these might contain an installedTheme
+        // Important: the favourite layers are initialized _after_ the installed themes, as these might contain an installedTheme
         this.favouriteLayers = this.osmConnection.GetLongPreference("favouriteLayers").map(
             str => Utils.Dedup(str?.split(";")) ?? [],
             [], layers => Utils.Dedup(layers)?.join(";")

UI/CenterMessageBox.ts

@@ -11,7 +11,7 @@ export class CenterMessageBox extends UIElement {
         this.ListenTo(State.state.locationControl);
         this.ListenTo(State.state.layerUpdater.retries);
         this.ListenTo(State.state.layerUpdater.runningQuery);
-        this.ListenTo(State.state.layerUpdater.sufficentlyZoomed);
+        this.ListenTo(State.state.layerUpdater.sufficientlyZoomed);
     }
 
     private static prep(): { innerHtml: string, done: boolean } {
@@ -27,7 +27,7 @@ export class CenterMessageBox extends UIElement {
             return {innerHtml: Translations.t.centerMessage.loadingData.Render(), done: false};
             
         } 
-        if (!lu.sufficentlyZoomed.data) {
+        if (!lu.sufficientlyZoomed.data) {
             return {innerHtml: Translations.t.centerMessage.zoomIn.Render(), done: false};
         } else {
             return {innerHtml: Translations.t.centerMessage.ready.Render(), done: true};

UI/CustomGenerator/AllLayersPanel.ts

@@ -11,7 +11,7 @@ import {MultiInput} from "../Input/MultiInput";
 import TagRenderingPanel from "./TagRenderingPanel";
 import SingleSetting from "./SingleSetting";
 import {VariableUiElement} from "../Base/VariableUIElement";
-import AvailableBaseLayers from "../../Logic/AvailableBaseLayers";
+import AvailableBaseLayers from "../../Logic/Actors/AvailableBaseLayers";
 import {DropDown} from "../Input/DropDown";
 import TagRenderingConfig from "../../Customizations/JSON/TagRenderingConfig";
 import Svg from "../../Svg";

UI/Image/ImageCarousel.ts

@@ -1,9 +1,13 @@
 import {UIElement} from "../UIElement";
-import {ImageSearcher} from "../../Logic/ImageSearcher";
+import {ImageSearcher} from "../../Logic/Actors/ImageSearcher";
 import {SlideShow} from "./SlideShow";
 import {UIEventSource} from "../../Logic/UIEventSource";
 import Combine from "../Base/Combine";
 import DeleteImage from "./DeleteImage";
+import {WikimediaImage} from "./WikimediaImage";
+import {ImgurImage} from "./ImgurImage";
+import {MapillaryImage} from "./MapillaryImage";
+import {SimpleImageElement} from "./SimpleImageElement";
 
 
 export class ImageCarousel extends UIElement{
@@ -12,11 +16,11 @@ export class ImageCarousel extends UIElement{
 
     constructor(tags: UIEventSource<any>, imagePrefix: string = "image", loadSpecial: boolean =true) {
         super(tags);
-        const searcher : UIEventSource<{url:string}[]> = new ImageSearcher(tags, imagePrefix, loadSpecial);
+        const searcher : UIEventSource<{url:string}[]> = new ImageSearcher(tags, imagePrefix, loadSpecial).images;
         const uiElements = searcher.map((imageURLS: {key: string, url:string}[]) => {
             const uiElements: UIElement[] = [];
             for (const url of imageURLS) {
-                let image = ImageSearcher.CreateImageElement(url.url);
+                let image = ImageCarousel.CreateImageElement(url.url);
                 if(url.key !== undefined){
                     image = new Combine([
                         image,
@@ -32,6 +36,27 @@ export class ImageCarousel extends UIElement{
         
     }
 
+    /***
+     * Creates either a 'simpleimage' or a 'wikimediaimage' based on the string
+     * @param url
+     * @constructor
+     */
+    private static CreateImageElement(url: string): UIElement {
+        // @ts-ignore
+        if (url.startsWith("File:")) {
+            return new WikimediaImage(url);
+        } else if (url.toLowerCase().startsWith("https://commons.wikimedia.org/wiki/")) {
+            const commons = url.substr("https://commons.wikimedia.org/wiki/".length);
+            return new WikimediaImage(commons);
+        } else if (url.toLowerCase().startsWith("https://i.imgur.com/")) {
+            return new ImgurImage(url);
+        } else if (url.toLowerCase().startsWith("https://www.mapillary.com/map/im/")) {
+            return new MapillaryImage(url);
+        } else {
+            return new SimpleImageElement(new UIEventSource<string>(url));
+        }
+    }
+    
     InnerRender(): string {
         return this.slideshow.Render();
     }

UI/Input/ValidatedTextField.ts

@@ -8,7 +8,7 @@ import {UIElement} from "../UIElement";
 import {UIEventSource} from "../../Logic/UIEventSource";
 import CombinedInputElement from "./CombinedInputElement";
 import SimpleDatePicker from "./SimpleDatePicker";
-import OpeningHoursInput from "./OpeningHours/OpeningHoursInput";
+import OpeningHoursInput from "../OpeningHours/OpeningHoursInput";
 import DirectionInput from "./DirectionInput";
 
 interface TextFieldDef {

UI/Misc/Attribution.ts

@@ -0,0 +1,65 @@
+import {UIElement} from "../UIElement";
+import Link from "../Base/Link";
+import Svg from "../../Svg";
+import {Basemap} from "../../Logic/Leaflet/Basemap";
+import Combine from "../Base/Combine";
+import {UIEventSource} from "../../Logic/UIEventSource";
+import {UserDetails} from "../../Logic/Osm/OsmConnection";
+import Constants from "../../Models/Constants";
+import LayoutConfig from "../../Customizations/JSON/LayoutConfig";
+import Loc from "../../Models/Loc";
+
+export default class Attribution extends UIElement {
+    
+    private readonly _location: UIEventSource<Loc>;
+    private readonly _layoutToUse: UIEventSource<LayoutConfig>;
+    private readonly _userDetails: UIEventSource<UserDetails>;
+    private readonly _basemap: Basemap;
+
+    constructor(location: UIEventSource<Loc>,
+                userDetails: UIEventSource<UserDetails>,
+                layoutToUse: UIEventSource<LayoutConfig>,
+                basemap: Basemap) {
+        super(location);
+        this._layoutToUse = layoutToUse;
+        this.ListenTo(layoutToUse);
+        this._userDetails = userDetails;
+        this._basemap = basemap;
+        this.ListenTo(userDetails);
+        this._location = location;
+        this.SetClass("map-attribution");
+    }
+
+    InnerRender(): string {
+        const location : Loc = this._location.data;
+        const userDetails = this._userDetails.data;
+
+        const mapComplete = new Link(`Mapcomplete ${Constants.vNumber}`, 'https://github.com/pietervdvn/MapComplete', true);
+        const reportBug = new Link(Svg.bug_img, "https://github.com/pietervdvn/MapComplete/issues", true);
+
+        const layoutId = this._layoutToUse.data.id;
+        const osmChaLink = `https://osmcha.org/?filters=%7B%22comment%22%3A%5B%7B%22label%22%3A%22%23${layoutId}%22%2C%22value%22%3A%22%23${layoutId}%22%7D%5D%2C%22date__gte%22%3A%5B%7B%22label%22%3A%222020-07-05%22%2C%22value%22%3A%222020-07-05%22%7D%5D%2C%22editor%22%3A%5B%7B%22label%22%3A%22MapComplete%22%2C%22value%22%3A%22MapComplete%22%7D%5D%7D`
+        const stats = new Link(Svg.statistics_img, osmChaLink, true)
+        let editHere: (UIElement | string) = "";
+        if (location !== undefined) {
+            const idLink = `https://www.openstreetmap.org/edit?editor=id#map=${location.zoom}/${location.lat}/${location.lon}`
+            editHere = new Link(Svg.pencil_img, idLink, true);
+        }
+        let editWithJosm: (UIElement | string) = ""
+        if (location !== undefined &&
+            this._basemap !== undefined &&
+            userDetails.csCount >=  Constants.userJourney.tagsVisibleAndWikiLinked) {
+            const bounds = this._basemap.map.getBounds();
+            const top = bounds.getNorth();
+            const bottom = bounds.getSouth();
+            const right = bounds.getEast();
+            const left = bounds.getWest();
+
+            const josmLink = `http://127.0.0.1:8111/load_and_zoom?left=${left}&right=${right}&top=${top}&bottom=${bottom}`
+            editWithJosm = new Link(Svg.josm_logo_img, josmLink, true);
+        }
+        return new Combine([mapComplete, reportBug, " | ", stats, " | ", editHere, editWithJosm]).Render();
+    }
+
+
+}

UI/OpeningHours/OhVisualization.ts

@@ -1,11 +1,10 @@
-import {UIElement} from "./UIElement";
+import {UIEventSource} from "../../Logic/UIEventSource";
-import {UIEventSource} from "../Logic/UIEventSource";
+import {UIElement} from "../UIElement";
-import opening_hours from "opening_hours";
+import Combine from "../Base/Combine";
-import Combine from "./Base/Combine";
+import State from "../../State";
-import Translations from "./i18n/Translations";
+import {FixedUiElement} from "../Base/FixedUiElement";
-import {FixedUiElement} from "./Base/FixedUiElement";
+import {OH} from "./OpeningHours";
-import {OH} from "../Logic/OpeningHours";
+import Translations from "../i18n/Translations";
-import State from "../State";
 
 export default class OpeningHoursVisualization extends UIElement {
     private readonly _key: string;

UI/OpeningHours/OpeningHours.ts

@@ -1,4 +1,4 @@
-import {Utils} from "../Utils";
+import {Utils} from "../../Utils";
 
 export interface OpeningHour {
     weekday: number, // 0 is monday, 1 is tuesday, ...

UI/OpeningHours/OpeningHoursInput.ts

@@ -1,20 +1,20 @@
-import {InputElement} from "../InputElement";
-import {UIEventSource} from "../../../Logic/UIEventSource";
-import {UIElement} from "../../UIElement";
-import Combine from "../../Base/Combine";
-import {OH} from "../../../Logic/OpeningHours";
-import OpeningHoursPicker from "./OpeningHoursPicker";
-import {VariableUiElement} from "../../Base/VariableUIElement";
-import Translations from "../../i18n/Translations";
-import {FixedUiElement} from "../../Base/FixedUiElement";
-import PublicHolidayInput from "./PublicHolidayInput";
-
-
 /**
  * The full opening hours element, including the table, opening hours picker.
  * Keeps track of unparsed rules
  * Exports everything conventiently as a string, for direct use
  */
+import OpeningHoursPicker from "./OpeningHoursPicker";
+import {UIEventSource} from "../../Logic/UIEventSource";
+import {UIElement} from "../UIElement";
+import {VariableUiElement} from "../Base/VariableUIElement";
+import Combine from "../Base/Combine";
+import {FixedUiElement} from "../Base/FixedUiElement";
+import {OH} from "./OpeningHours";
+import {InputElement} from "../Input/InputElement";
+import PublicHolidayInput from "./PublicHolidayInput";
+import Translations from "../i18n/Translations";
+
+
 export default class OpeningHoursInput extends InputElement<string> {
 
 

UI/OpeningHours/OpeningHoursPicker.ts

@@ -1,10 +1,10 @@
-import {UIElement} from "../../UIElement";
+import {UIEventSource} from "../../Logic/UIEventSource";
-import {InputElement} from "../InputElement";
+import {UIElement} from "../UIElement";
-import {OpeningHour, OH} from "../../../Logic/OpeningHours";
-import {UIEventSource} from "../../../Logic/UIEventSource";
-import OpeningHoursPickerTable from "./OpeningHoursPickerTable";
 import OpeningHoursRange from "./OpeningHoursRange";
-import Combine from "../../Base/Combine";
+import Combine from "../Base/Combine";
+import OpeningHoursPickerTable from "./OpeningHoursPickerTable";
+import {OH, OpeningHour} from "./OpeningHours";
+import {InputElement} from "../Input/InputElement";
 
 export default class OpeningHoursPicker extends InputElement<OpeningHour[]> {
     private readonly _ohs: UIEventSource<OpeningHour[]>;    

UI/OpeningHours/OpeningHoursPickerTable.ts

@@ -1,15 +1,14 @@
-import {InputElement} from "../InputElement";
-import {OpeningHour} from "../../../Logic/OpeningHours";
-import {UIEventSource} from "../../../Logic/UIEventSource";
-import {Utils} from "../../../Utils";
-import {UIElement} from "../../UIElement";
-import Translations from "../../i18n/Translations";
-import {Browser} from "leaflet";
-
 /**
  * This is the base-table which is selectable by hovering over it.
  * It will genarate the currently selected opening hour.
  */
+import {UIEventSource} from "../../Logic/UIEventSource";
+import {UIElement} from "../UIElement";
+import {Utils} from "../../Utils";
+import {OpeningHour} from "./OpeningHours";
+import {InputElement} from "../Input/InputElement";
+import Translations from "../i18n/Translations";
+
 export default class OpeningHoursPickerTable extends InputElement<OpeningHour[]> {
     public readonly IsSelected: UIEventSource<boolean>;
     private readonly weekdays: UIEventSource<UIElement[]>;

UI/OpeningHours/OpeningHoursRange.ts

@@ -1,15 +1,14 @@
-import {UIElement} from "../../UIElement";
-import {UIEventSource} from "../../../Logic/UIEventSource";
-import {OH, OpeningHour} from "../../../Logic/OpeningHours";
-import Combine from "../../Base/Combine";
-import {Utils} from "../../../Utils";
-import {FixedUiElement} from "../../Base/FixedUiElement";
-import {VariableUiElement} from "../../Base/VariableUIElement";
-import Svg from "../../../Svg";
-
 /**
  * A single opening hours range, shown on top of the OH-picker table
  */
+import {UIEventSource} from "../../Logic/UIEventSource";
+import {UIElement} from "../UIElement";
+import {VariableUiElement} from "../Base/VariableUIElement";
+import Svg from "../../Svg";
+import {Utils} from "../../Utils";
+import Combine from "../Base/Combine";
+import {OH, OpeningHour} from "./OpeningHours";
+
 export default class OpeningHoursRange extends UIElement {
     private _oh: UIEventSource<OpeningHour>;
 

UI/OpeningHours/PublicHolidayInput.ts

@@ -1,11 +1,12 @@
-import {InputElement} from "../InputElement";
+
-import {UIEventSource} from "../../../Logic/UIEventSource";
+import {OH} from "./OpeningHours";
-import {UIElement} from "../../UIElement";
+import {UIEventSource} from "../../Logic/UIEventSource";
-import {DropDown} from "../DropDown";
+import {UIElement} from "../UIElement";
-import Translations from "../../i18n/Translations";
+import Combine from "../Base/Combine";
-import Combine from "../../Base/Combine";
+import {TextField} from "../Input/TextField";
-import {TextField} from "../TextField";
+import {DropDown} from "../Input/DropDown";
-import {OH} from "../../../Logic/OpeningHours";
+import {InputElement} from "../Input/InputElement";
+import Translations from "../i18n/Translations";
 
 export default class PublicHolidayInput extends InputElement<string> {
     IsSelected: UIEventSource<boolean> = new UIEventSource<boolean>(false);

UI/SpecialVisualizations.ts

@@ -1,5 +1,4 @@
 import {UIElement} from "./UIElement";
-import OpeningHoursVisualization from "./OhVisualization";
 import {UIEventSource} from "../Logic/UIEventSource";
 import {VariableUiElement} from "./Base/VariableUIElement";
 import LiveQueryHandler from "../Logic/Web/LiveQueryHandler";
@@ -16,6 +15,7 @@ import ReviewElement from "./Reviews/ReviewElement";
 import MangroveReviews from "../Logic/Web/MangroveReviews";
 import Translations from "./i18n/Translations";
 import ReviewForm from "./Reviews/ReviewForm";
+import OpeningHoursVisualization from "./OpeningHours/OhVisualization";
 
 export class SubstitutedTranslation extends UIElement {
     private readonly tags: UIEventSource<any>;