ilja_space/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Refactoring: attempting to make State smaller

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-01-02 16:04:16 +01:00
parent a6f56acad6
commit 849c61c8a1
28 changed files with 529 additions and 485 deletions
Download patch file Download diff file Expand all files Collapse all files

17
Changelog.md
View file

@ -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)

47
InitUiElements.ts
View file

@ -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) => {

156
Logic/AvailableBaseLayers.ts → Logic/Actors/AvailableBaseLayers.ts
View file

@ -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<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!
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];
@ -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,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 = `<a href='${attributionUrl}' target='_blank'>${attribution}</a>`;
}
return L.tileLayer(url,
{
attribution: attribution,
maxZoom: maxZoom,
minZoom: 1,
// @ts-ignore
wmts: isWMTS ?? false,
subdomains: domains
});
}
}

174
Logic/Actors/ImageSearcher.ts Normal file
View file

@ -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;
}
}

8
Logic/Actors/Readme.md Normal file
View file

@ -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

6
Logic/Bounds.ts
View file

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

166
Logic/ImageSearcher.ts
View file

@ -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));
}
}
}

107
Logic/Leaflet/Basemap.ts
View file

@ -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(Basemap.osmCarto);
public readonly CurrentLayer: UIEventSource<BaseLayer> = new UIEventSource(AvailableBaseLayers.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);
}
}

27
Logic/UpdateFromOverpass.ts
View file

@ -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);
}
}

10
Logic/Web/LiveQueryHandler.ts
View file

@ -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 */> {

0
Logic/BaseLayer.ts → Models/BaseLayer.ts
View file

19
Models/Constants.ts Normal file
View file

@ -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)
};
}

5
Models/Loc.ts Normal file
View file

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

52
State.ts
View file

@ -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";
// 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<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 }>({
zoom: Utils.asFloat(this.zoom.data),
lat: Utils.asFloat(this.lat.data),
lon: Utils.asFloat(this.lon.data),
this.locationControl = new UIEventSource<Loc>({
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(";")

4
UI/CenterMessageBox.ts
View file

@ -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};

2
UI/CustomGenerator/AllLayersPanel.ts
View file

@ -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";

31
UI/Image/ImageCarousel.ts
View file

@ -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();
}

2
UI/Input/ValidatedTextField.ts
View file

@ -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 {

65
UI/Misc/Attribution.ts Normal file
View file

@ -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();
}
}

15
UI/OhVisualization.ts → UI/OpeningHours/OhVisualization.ts
View file

@ -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;

2
Logic/OpeningHours.ts → UI/OpeningHours/OpeningHours.ts
View file

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

24
UI/Input/OpeningHours/OpeningHoursInput.ts → UI/OpeningHours/OpeningHoursInput.ts
View file

@ -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> {

12
UI/Input/OpeningHours/OpeningHoursPicker.ts → UI/OpeningHours/OpeningHoursPicker.ts
View file

@ -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<OpeningHour[]> {
private readonly _ohs: UIEventSource<OpeningHour[]>;

15
UI/Input/OpeningHours/OpeningHoursPickerTable.ts → UI/OpeningHours/OpeningHoursPickerTable.ts
View file

@ -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[]>;

17
UI/Input/OpeningHours/OpeningHoursRange.ts → UI/OpeningHours/OpeningHoursRange.ts
View file

@ -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>;

17
UI/Input/OpeningHours/PublicHolidayInput.ts → UI/OpeningHours/PublicHolidayInput.ts
View file

@ -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<string> {
IsSelected: UIEventSource<boolean> = new UIEventSource<boolean>(false);

0
Logic/PersonalLayersPanel.ts → UI/PersonalLayersPanel.ts
View file

2
UI/SpecialVisualizations.ts
View file

@ -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>;