From 849c61c8a1fcbf8e9f13516336e876dea2f91c53 Mon Sep 17 00:00:00 2001 From: pietervdvn Date: Sat, 2 Jan 2021 16:04:16 +0100 Subject: [PATCH] Refactoring: attempting to make State smaller --- Changelog.md | 17 -- InitUiElements.ts | 47 +---- Logic/{ => Actors}/AvailableBaseLayers.ts | 162 ++++++++++++---- Logic/Actors/ImageSearcher.ts | 174 ++++++++++++++++++ Logic/Actors/Readme.md | 8 + Logic/Bounds.ts | 6 - Logic/ImageSearcher.ts | 166 ----------------- Logic/Leaflet/Basemap.ts | 107 +---------- Logic/UpdateFromOverpass.ts | 29 ++- Logic/Web/LiveQueryHandler.ts | 10 +- {Logic => Models}/BaseLayer.ts | 0 Models/Constants.ts | 19 ++ Models/Loc.ts | 5 + State.ts | 56 +++--- UI/CenterMessageBox.ts | 4 +- UI/CustomGenerator/AllLayersPanel.ts | 2 +- UI/Image/ImageCarousel.ts | 31 +++- UI/Input/ValidatedTextField.ts | 2 +- UI/Misc/Attribution.ts | 65 +++++++ UI/{ => OpeningHours}/OhVisualization.ts | 15 +- {Logic => UI/OpeningHours}/OpeningHours.ts | 2 +- .../OpeningHours/OpeningHoursInput.ts | 24 +-- .../OpeningHours/OpeningHoursPicker.ts | 12 +- .../OpeningHours/OpeningHoursPickerTable.ts | 15 +- .../OpeningHours/OpeningHoursRange.ts | 17 +- .../OpeningHours/PublicHolidayInput.ts | 17 +- {Logic => UI}/PersonalLayersPanel.ts | 0 UI/SpecialVisualizations.ts | 2 +- 28 files changed, 529 insertions(+), 485 deletions(-) delete mode 100644 Changelog.md rename Logic/{ => Actors}/AvailableBaseLayers.ts (51%) create mode 100644 Logic/Actors/ImageSearcher.ts create mode 100644 Logic/Actors/Readme.md delete mode 100644 Logic/Bounds.ts delete mode 100644 Logic/ImageSearcher.ts rename {Logic => Models}/BaseLayer.ts (100%) create mode 100644 Models/Constants.ts create mode 100644 Models/Loc.ts create mode 100644 UI/Misc/Attribution.ts rename UI/{ => OpeningHours}/OhVisualization.ts (97%) rename {Logic => UI/OpeningHours}/OpeningHours.ts (99%) rename UI/{Input => }/OpeningHours/OpeningHoursInput.ts (88%) rename UI/{Input => }/OpeningHours/OpeningHoursPicker.ts (88%) rename UI/{Input => }/OpeningHours/OpeningHoursPickerTable.ts (96%) rename UI/{Input => }/OpeningHours/OpeningHoursRange.ts (87%) rename UI/{Input => }/OpeningHours/PublicHolidayInput.ts (92%) rename {Logic => UI}/PersonalLayersPanel.ts (100%) diff --git a/Changelog.md b/Changelog.md deleted file mode 100644 index c035984..0000000 --- a/Changelog.md +++ /dev/null @@ -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) \ No newline at end of file diff --git a/InitUiElements.ts b/InitUiElements.ts index e5e8881..5ec645a 100644 --- a/InitUiElements.ts +++ b/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) => { diff --git a/Logic/AvailableBaseLayers.ts b/Logic/Actors/AvailableBaseLayers.ts similarity index 51% rename from Logic/AvailableBaseLayers.ts rename to Logic/Actors/AvailableBaseLayers.ts index dc020dd..627104f 100644 --- a/Logic/AvailableBaseLayers.ts +++ b/Logic/Actors/AvailableBaseLayers.ts @@ -1,25 +1,42 @@ -import * as editorlayerindex from "../assets/editor-layer-index.json" -import {UIEventSource} from "./UIEventSource"; -import {GeoOperations} from "./GeoOperations"; -import {State} from "../State"; -import {Basemap} from "./Leaflet/Basemap"; -import {QueryParameters} from "./Web/QueryParameters"; -import {BaseLayer} from "./BaseLayer"; +import * as editorlayerindex from "../../assets/editor-layer-index.json" +import {UIEventSource} from "../UIEventSource"; +import {GeoOperations} from "../GeoOperations"; +import {Basemap} from "../Leaflet/Basemap"; +import {BaseLayer} from "../../Models/BaseLayer"; +import * as X from "leaflet-providers"; +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; - 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! + return; // All good - the current layer still works! } } // 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[] { - const availableLayers = [Basemap.osmCarto] + private static AvailableLayersAt(lon: number, lat: number): BaseLayer[] { + const availableLayers = [AvailableBaseLayers.osmCarto] const globalLayers = []; for (const i in AvailableBaseLayers.layerOverview) { const layer = AvailableBaseLayers.layerOverview[i]; @@ -115,19 +130,19 @@ export default class AvailableBaseLayers { if (props.url.toLowerCase().indexOf("apikey") > 0) { 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,20 +167,26 @@ export default class AvailableBaseLayers { } private static LoadProviderIndex(): BaseLayer[] { - - function l(id: string, name: string){ - const layer = Basemap.ProvidedLayer(id); - return { - feature: null, - id: id, - name: name, - layer: layer, - min_zoom: layer.minzoom, - max_zoom: layer.maxzoom + // @ts-ignore + X; // Import X to make sure the namespace is not optimized away + function l(id: string, name: string) { + try { + const layer: any = L.tileLayer.provider(id, undefined); + return { + feature: null, + id: id, + name: name, + layer: layer, + 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 = `${attribution}`; + } + + return L.tileLayer(url, + { + attribution: attribution, + maxZoom: maxZoom, + minZoom: 1, + // @ts-ignore + wmts: isWMTS ?? false, + subdomains: domains + }); + } + + } \ No newline at end of file diff --git a/Logic/Actors/ImageSearcher.ts b/Logic/Actors/ImageSearcher.ts new file mode 100644 index 0000000..fa650fb --- /dev/null +++ b/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(""); + private readonly _commons = new UIEventSource(""); + + constructor(tags: UIEventSource, 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; + } + +} \ No newline at end of file diff --git a/Logic/Actors/Readme.md b/Logic/Actors/Readme.md new file mode 100644 index 0000000..8aa5574 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/Logic/Bounds.ts b/Logic/Bounds.ts deleted file mode 100644 index e11e7d0..0000000 --- a/Logic/Bounds.ts +++ /dev/null @@ -1,6 +0,0 @@ -export interface Bounds { - north: number, - east: number, - south: number, - west: number -} \ No newline at end of file diff --git a/Logic/ImageSearcher.ts b/Logic/ImageSearcher.ts deleted file mode 100644 index 79b88c9..0000000 --- a/Logic/ImageSearcher.ts +++ /dev/null @@ -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; - private readonly _wdItem = new UIEventSource(""); - private readonly _commons = new UIEventSource(""); - - - constructor(tags: UIEventSource, 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(url)); - } - } - -} \ No newline at end of file diff --git a/Logic/Leaflet/Basemap.ts b/Logic/Leaflet/Basemap.ts index e1139e7..4773369 100644 --- a/Logic/Leaflet/Basemap.ts +++ b/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 = new UIEventSource(Basemap.osmCarto); + public readonly CurrentLayer: UIEventSource = new UIEventSource(AvailableBaseLayers.osmCarto); constructor(leafletElementId: string, - location: UIEventSource<{ zoom: number, lat: number, lon: number }>, + location: UIEventSource, 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() + " | OpenStreetMap"); - 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 = `${attribution}`; - } - - 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); - } } diff --git a/Logic/UpdateFromOverpass.ts b/Logic/UpdateFromOverpass.ts index 1483c0f..8762b30 100644 --- a/Logic/UpdateFromOverpass.ts +++ b/Logic/UpdateFromOverpass.ts @@ -8,7 +8,7 @@ import MetaTagging from "./MetaTagging"; export class UpdateFromOverpass { - public readonly sufficentlyZoomed: UIEventSource; + public readonly sufficientlyZoomed: UIEventSource; public readonly runningQuery: UIEventSource = new UIEventSource(false); public readonly retries: UIEventSource = new UIEventSource(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); - } - + + + } \ No newline at end of file diff --git a/Logic/Web/LiveQueryHandler.ts b/Logic/Web/LiveQueryHandler.ts index b2cca20..9b8fc77 100644 --- a/Logic/Web/LiveQueryHandler.ts +++ b/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 private static neededShorthands = {} // url -> (shorthand:paths)[] public static FetchLiveData(url: string, shorthands: string[]): UIEventSource string */> { diff --git a/Logic/BaseLayer.ts b/Models/BaseLayer.ts similarity index 100% rename from Logic/BaseLayer.ts rename to Models/BaseLayer.ts diff --git a/Models/Constants.ts b/Models/Constants.ts new file mode 100644 index 0000000..c45285b --- /dev/null +++ b/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) + }; +} \ No newline at end of file diff --git a/Models/Loc.ts b/Models/Loc.ts new file mode 100644 index 0000000..f0d3f81 --- /dev/null +++ b/Models/Loc.ts @@ -0,0 +1,5 @@ +export default interface Loc { + lat: number, + lon: number, + zoom: number +} \ No newline at end of file diff --git a/State.ts b/State.ts index 934b7e3..85eda79 100644 --- a/State.ts +++ b/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 @@ -24,25 +26,14 @@ export default class State { // The singleton of the global state public static state: State; - - 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) - }; - + + public static vNumber = Constants.vNumber; + public static userJourney = Constants.userJourney; + public static runningFromConsole: boolean = false; + + public readonly layoutToUse = new UIEventSource(undefined); /** @@ -89,11 +80,6 @@ export default class State { */ public readonly selectedElement = new UIEventSource(undefined); - public readonly zoom: UIEventSource; - public readonly lat: UIEventSource; - public readonly lon: UIEventSource; - - public readonly featureSwitchUserbadge: UIEventSource; public readonly featureSwitchSearch: UIEventSource; public readonly featureSwitchLayers: UIEventSource; @@ -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(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 }>({ - zoom: Utils.asFloat(this.zoom.data), - lat: Utils.asFloat(this.lat.data), - lon: Utils.asFloat(this.lon.data), + this.locationControl = new UIEventSource({ + zoom: Utils.asFloat(zoom.data), + lat: Utils.asFloat(lat.data), + lon: Utils.asFloat(lon.data), }).addCallback((latlonz) => { - this.zoom.setData(latlonz.zoom); - this.lat.setData(latlonz.lat); - this.lon.setData(latlonz.lon); + zoom.setData(latlonz.zoom); + lat.setData(latlonz.lat); + 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(";") diff --git a/UI/CenterMessageBox.ts b/UI/CenterMessageBox.ts index 000eb0a..71e2fdf 100644 --- a/UI/CenterMessageBox.ts +++ b/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}; diff --git a/UI/CustomGenerator/AllLayersPanel.ts b/UI/CustomGenerator/AllLayersPanel.ts index 34b00ea..c214f93 100644 --- a/UI/CustomGenerator/AllLayersPanel.ts +++ b/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"; diff --git a/UI/Image/ImageCarousel.ts b/UI/Image/ImageCarousel.ts index 6810d1e..6388aa2 100644 --- a/UI/Image/ImageCarousel.ts +++ b/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, 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, @@ -31,6 +35,27 @@ export class ImageCarousel extends UIElement{ this.slideshow = new SlideShow(uiElements).HideOnEmpty(true); } + + /*** + * 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(url)); + } + } InnerRender(): string { return this.slideshow.Render(); diff --git a/UI/Input/ValidatedTextField.ts b/UI/Input/ValidatedTextField.ts index 5d0e3a4..82b2f39 100644 --- a/UI/Input/ValidatedTextField.ts +++ b/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 { diff --git a/UI/Misc/Attribution.ts b/UI/Misc/Attribution.ts new file mode 100644 index 0000000..5c954ba --- /dev/null +++ b/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; + private readonly _layoutToUse: UIEventSource; + private readonly _userDetails: UIEventSource; + private readonly _basemap: Basemap; + + constructor(location: UIEventSource, + userDetails: UIEventSource, + layoutToUse: UIEventSource, + 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(); + } + + +} \ No newline at end of file diff --git a/UI/OhVisualization.ts b/UI/OpeningHours/OhVisualization.ts similarity index 97% rename from UI/OhVisualization.ts rename to UI/OpeningHours/OhVisualization.ts index e665539..13a6146 100644 --- a/UI/OhVisualization.ts +++ b/UI/OpeningHours/OhVisualization.ts @@ -1,11 +1,10 @@ -import {UIElement} from "./UIElement"; -import {UIEventSource} from "../Logic/UIEventSource"; -import opening_hours from "opening_hours"; -import Combine from "./Base/Combine"; -import Translations from "./i18n/Translations"; -import {FixedUiElement} from "./Base/FixedUiElement"; -import {OH} from "../Logic/OpeningHours"; -import State from "../State"; +import {UIEventSource} from "../../Logic/UIEventSource"; +import {UIElement} from "../UIElement"; +import Combine from "../Base/Combine"; +import State from "../../State"; +import {FixedUiElement} from "../Base/FixedUiElement"; +import {OH} from "./OpeningHours"; +import Translations from "../i18n/Translations"; export default class OpeningHoursVisualization extends UIElement { private readonly _key: string; diff --git a/Logic/OpeningHours.ts b/UI/OpeningHours/OpeningHours.ts similarity index 99% rename from Logic/OpeningHours.ts rename to UI/OpeningHours/OpeningHours.ts index bab8c59..733f516 100644 --- a/Logic/OpeningHours.ts +++ b/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, ... diff --git a/UI/Input/OpeningHours/OpeningHoursInput.ts b/UI/OpeningHours/OpeningHoursInput.ts similarity index 88% rename from UI/Input/OpeningHours/OpeningHoursInput.ts rename to UI/OpeningHours/OpeningHoursInput.ts index df483ed..7a9ca26 100644 --- a/UI/Input/OpeningHours/OpeningHoursInput.ts +++ b/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 { diff --git a/UI/Input/OpeningHours/OpeningHoursPicker.ts b/UI/OpeningHours/OpeningHoursPicker.ts similarity index 88% rename from UI/Input/OpeningHours/OpeningHoursPicker.ts rename to UI/OpeningHours/OpeningHoursPicker.ts index 0dc5633..ad8c0cb 100644 --- a/UI/Input/OpeningHours/OpeningHoursPicker.ts +++ b/UI/OpeningHours/OpeningHoursPicker.ts @@ -1,10 +1,10 @@ -import {UIElement} from "../../UIElement"; -import {InputElement} from "../InputElement"; -import {OpeningHour, OH} from "../../../Logic/OpeningHours"; -import {UIEventSource} from "../../../Logic/UIEventSource"; -import OpeningHoursPickerTable from "./OpeningHoursPickerTable"; +import {UIEventSource} from "../../Logic/UIEventSource"; +import {UIElement} from "../UIElement"; 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 { private readonly _ohs: UIEventSource; diff --git a/UI/Input/OpeningHours/OpeningHoursPickerTable.ts b/UI/OpeningHours/OpeningHoursPickerTable.ts similarity index 96% rename from UI/Input/OpeningHours/OpeningHoursPickerTable.ts rename to UI/OpeningHours/OpeningHoursPickerTable.ts index 99852de..2248d7a 100644 --- a/UI/Input/OpeningHours/OpeningHoursPickerTable.ts +++ b/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 { public readonly IsSelected: UIEventSource; private readonly weekdays: UIEventSource; diff --git a/UI/Input/OpeningHours/OpeningHoursRange.ts b/UI/OpeningHours/OpeningHoursRange.ts similarity index 87% rename from UI/Input/OpeningHours/OpeningHoursRange.ts rename to UI/OpeningHours/OpeningHoursRange.ts index 6b5b906..5f67f8e 100644 --- a/UI/Input/OpeningHours/OpeningHoursRange.ts +++ b/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; diff --git a/UI/Input/OpeningHours/PublicHolidayInput.ts b/UI/OpeningHours/PublicHolidayInput.ts similarity index 92% rename from UI/Input/OpeningHours/PublicHolidayInput.ts rename to UI/OpeningHours/PublicHolidayInput.ts index 3676f1f..bcdc3ce 100644 --- a/UI/Input/OpeningHours/PublicHolidayInput.ts +++ b/UI/OpeningHours/PublicHolidayInput.ts @@ -1,11 +1,12 @@ -import {InputElement} from "../InputElement"; -import {UIEventSource} from "../../../Logic/UIEventSource"; -import {UIElement} from "../../UIElement"; -import {DropDown} from "../DropDown"; -import Translations from "../../i18n/Translations"; -import Combine from "../../Base/Combine"; -import {TextField} from "../TextField"; -import {OH} from "../../../Logic/OpeningHours"; + +import {OH} from "./OpeningHours"; +import {UIEventSource} from "../../Logic/UIEventSource"; +import {UIElement} from "../UIElement"; +import Combine from "../Base/Combine"; +import {TextField} from "../Input/TextField"; +import {DropDown} from "../Input/DropDown"; +import {InputElement} from "../Input/InputElement"; +import Translations from "../i18n/Translations"; export default class PublicHolidayInput extends InputElement { IsSelected: UIEventSource = new UIEventSource(false); diff --git a/Logic/PersonalLayersPanel.ts b/UI/PersonalLayersPanel.ts similarity index 100% rename from Logic/PersonalLayersPanel.ts rename to UI/PersonalLayersPanel.ts diff --git a/UI/SpecialVisualizations.ts b/UI/SpecialVisualizations.ts index bcbc04f..d1d626b 100644 --- a/UI/SpecialVisualizations.ts +++ b/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;