midgard/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

162
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];
@ -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 = `<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

10
Logic/BaseLayer.ts
View file

@ -1,10 +0,0 @@
import {TileLayer} from "leaflet";
export interface BaseLayer {
id: string,
name: string,
layer: TileLayer,
max_zoom: number,
min_zoom: number;
feature: any,
}

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

348
Logic/OpeningHours.ts
View file

@ -1,348 +0,0 @@
import {Utils} from "../Utils";
export interface OpeningHour {
weekday: number, // 0 is monday, 1 is tuesday, ...
startHour: number,
startMinutes: number,
endHour: number,
endMinutes: number
}
export class OH {
private static readonly days = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"]
private static readonly daysIndexed = {
mo: 0,
tu: 1,
we: 2,
th: 3,
fr: 4,
sa: 5,
su: 6
}
public static hhmm(h: number, m: number): string {
if (h == 24) {
return "00:00";
}
return Utils.TwoDigits(h) + ":" + Utils.TwoDigits(m);
}
public static ToString(ohs: OpeningHour[]) {
if (ohs.length == 0) {
return "";
}
const partsPerWeekday: string [][] = [[], [], [], [], [], [], []];
for (const oh of ohs) {
partsPerWeekday[oh.weekday].push(OH.hhmm(oh.startHour, oh.startMinutes) + "-" + OH.hhmm(oh.endHour, oh.endMinutes));
}
const stringPerWeekday = partsPerWeekday.map(parts => parts.sort().join(", "));
const rules = [];
let rangeStart = 0;
let rangeEnd = 0;
function pushRule(){
const rule = stringPerWeekday[rangeStart];
if(rule === ""){
return;
}
if (rangeStart == (rangeEnd - 1)) {
rules.push(
`${OH.days[rangeStart]} ${rule}`
);
} else {
rules.push(
`${OH.days[rangeStart]}-${OH.days[rangeEnd-1]} ${rule}`
);
}
}
for (; rangeEnd < 7; rangeEnd++) {
if (stringPerWeekday[rangeStart] != stringPerWeekday[rangeEnd]) {
pushRule();
rangeStart = rangeEnd
}
}
pushRule();
const oh = rules.join("; ")
if (oh === "Mo-Su 00:00-00:00") {
return "24/7"
}
return oh;
}
/**
* Merge duplicate opening-hour element in place.
* Returns true if something changed
* @param ohs
* @constructor
*/
public static MergeTimes(ohs: OpeningHour[]): OpeningHour[] {
const queue = [...ohs];
const newList = [];
while (queue.length > 0) {
let maybeAdd = queue.pop();
let doAddEntry = true;
if(maybeAdd.weekday == undefined){
doAddEntry = false;
}
for (let i = newList.length - 1; i >= 0 && doAddEntry; i--) {
let guard = newList[i];
if (maybeAdd.weekday != guard.weekday) {
// Not the same day
continue
}
if (OH.startTimeLiesInRange(maybeAdd, guard) && OH.endTimeLiesInRange(maybeAdd, guard)) {
// Guard fully covers 'maybeAdd': we can safely ignore maybeAdd
doAddEntry = false;
break;
}
if (OH.startTimeLiesInRange(guard, maybeAdd) && OH.endTimeLiesInRange(guard, maybeAdd)) {
// 'maybeAdd' fully covers Guard - the guard is killed
newList.splice(i, 1);
break;
}
if (OH.startTimeLiesInRange(maybeAdd, guard) || OH.endTimeLiesInRange(maybeAdd, guard)
|| OH.startTimeLiesInRange(guard, maybeAdd) || OH.endTimeLiesInRange(guard, maybeAdd)) {
// At this point, the maybeAdd overlaps the guard: we should extend the guard and retest it
newList.splice(i, 1);
let startHour = guard.startHour;
let startMinutes = guard.startMinutes;
if (OH.startTime(maybeAdd) < OH.startTime(guard)) {
startHour = maybeAdd.startHour;
startMinutes = maybeAdd.startMinutes;
}
let endHour = guard.endHour;
let endMinutes = guard.endMinutes;
if (OH.endTime(maybeAdd) > OH.endTime(guard)) {
endHour = maybeAdd.endHour;
endMinutes = maybeAdd.endMinutes;
}
queue.push({
startHour: startHour,
startMinutes: startMinutes,
endHour:endHour,
endMinutes:endMinutes,
weekday: guard.weekday
});
doAddEntry = false;
break;
}
}
if (doAddEntry) {
newList.push(maybeAdd);
}
}
// New list can only differ from the old list by merging entries
// This means that the list is changed only if the lengths are different.
// If the lengths are the same, we might just as well return the old list and be a bit more stable
if (newList.length !== ohs.length) {
return newList;
} else {
return ohs;
}
}
public static startTime(oh: OpeningHour): number {
return oh.startHour + oh.startMinutes / 60;
}
public static endTime(oh: OpeningHour): number {
return oh.endHour + oh.endMinutes / 60;
}
public static startTimeLiesInRange(checked: OpeningHour, mightLieIn: OpeningHour) {
return OH.startTime(mightLieIn) <= OH.startTime(checked) &&
OH.startTime(checked) <= OH.endTime(mightLieIn)
}
public static endTimeLiesInRange(checked: OpeningHour, mightLieIn: OpeningHour) {
return OH.startTime(mightLieIn) <= OH.endTime(checked) &&
OH.endTime(checked) <= OH.endTime(mightLieIn)
}
private static parseHHMM(hhmm: string): { hours: number, minutes: number } {
if(hhmm === undefined || hhmm == null){
return null;
}
const spl = hhmm.trim().split(":");
if(spl.length != 2){
return null;
}
return {hours: Number(spl[0].trim()), minutes: Number(spl[1].trim())};
}
public static parseHHMMRange(hhmmhhmm: string): {
startHour: number,
startMinutes: number,
endHour: number,
endMinutes: number
} {
if (hhmmhhmm == "off") {
return null;
}
const timings = hhmmhhmm.split("-");
const start = OH.parseHHMM(timings[0])
const end = OH.parseHHMM(timings[1]);
return {
startHour: start.hours,
startMinutes: start.minutes,
endHour: end.hours,
endMinutes: end.minutes
}
}
private static ParseHhmmRanges(hhmms: string): {
startHour: number,
startMinutes: number,
endHour: number,
endMinutes: number
}[] {
if (hhmms === "off") {
return [];
}
return hhmms.split(",")
.map(s => s.trim())
.filter(str => str !== "")
.map(OH.parseHHMMRange)
.filter(v => v != null)
}
private static ParseWeekday(weekday: string): number {
return OH.daysIndexed[weekday.trim().toLowerCase()];
}
private static ParseWeekdayRange(weekdays: string): number[] {
const split = weekdays.split("-");
if (split.length == 1) {
const parsed = OH.ParseWeekday(weekdays);
if(parsed == null){
return null;
}
return [parsed];
} else if (split.length == 2) {
let start = OH.ParseWeekday(split[0]);
let end = OH.ParseWeekday(split[1]);
if ((start ?? null) === null || (end ?? null) === null) {
return null;
}
let range = [];
for (let i = start; i <= end; i++) {
range.push(i);
}
return range;
} else {
return null;
}
}
private static ParseWeekdayRanges(weekdays: string): number[] {
let ranges = [];
let split = weekdays.split(",");
for (const weekday of split) {
const parsed = OH.ParseWeekdayRange(weekday)
if (parsed === undefined || parsed === null) {
return null;
}
ranges.push(...parsed);
}
return ranges;
}
private static multiply(weekdays: number[], timeranges: { startHour: number, startMinutes: number, endHour: number, endMinutes: number }[]) {
if ((weekdays ?? null) == null || (timeranges ?? null) == null) {
return null;
}
const ohs: OpeningHour[] = []
for (const timerange of timeranges) {
for (const weekday of weekdays) {
ohs.push({
weekday: weekday,
startHour: timerange.startHour, startMinutes: timerange.startMinutes,
endHour: timerange.endHour, endMinutes: timerange.endMinutes,
});
}
}
return ohs;
}
public static ParseRule(rule: string): OpeningHour[] {
try {
if (rule.trim() == "24/7") {
return OH.multiply([0, 1, 2, 3, 4, 5, 6], [{
startHour: 0,
startMinutes: 0,
endHour: 24,
endMinutes: 0
}]);
}
const split = rule.trim().replace(/, */g, ",").split(" ");
if (split.length == 1) {
// First, try to parse this rule as a rule without weekdays
let timeranges = OH.ParseHhmmRanges(rule);
let weekdays = [0, 1, 2, 3, 4, 5, 6];
return OH.multiply(weekdays, timeranges);
}
if (split.length == 2) {
const weekdays = OH.ParseWeekdayRanges(split[0]);
const timeranges = OH.ParseHhmmRanges(split[1]);
return OH.multiply(weekdays, timeranges);
}
return null;
} catch (e) {
console.log("Could not parse weekday rule ", rule);
return null;
}
}
static Parse(rules: string) {
if (rules === undefined || rules === "") {
return []
}
const ohs = []
const split = rules.split(";");
for (const rule of split) {
if(rule === ""){
continue;
}
try {
const parsed = OH.ParseRule(rule)
if (parsed !== null) {
ohs.push(...parsed);
}
} catch (e) {
console.error("Could not parse ", rule, ": ", e)
}
}
return ohs;
}
}

136
Logic/PersonalLayersPanel.ts
View file

@ -1,136 +0,0 @@
import {UIElement} from "../UI/UIElement";
import State from "../State";
import Translations from "../UI/i18n/Translations";
import {UIEventSource} from "./UIEventSource";
import {AllKnownLayouts} from "../Customizations/AllKnownLayouts";
import Combine from "../UI/Base/Combine";
import CheckBox from "../UI/Input/CheckBox";
import * as personal from "../assets/themes/personalLayout/personalLayout.json";
import {SubtleButton} from "../UI/Base/SubtleButton";
import {FixedUiElement} from "../UI/Base/FixedUiElement";
import {Img} from "../UI/Img";
import Svg from "../Svg";
import LayoutConfig from "../Customizations/JSON/LayoutConfig";
export class PersonalLayersPanel extends UIElement {
private checkboxes: UIElement[] = [];
constructor() {
super(State.state.favouriteLayers);
this.ListenTo(State.state.osmConnection.userDetails);
this.UpdateView([]);
const self = this;
State.state.installedThemes.addCallback(extraThemes => {
self.UpdateView(extraThemes.map(layout => layout.layout.layoutConfig));
self.Update();
})
}
private UpdateView(extraThemes: LayoutConfig[]) {
this.checkboxes = [];
const favs = State.state.favouriteLayers.data ?? [];
const controls = new Map<string, UIEventSource<boolean>>();
const allLayouts = AllKnownLayouts.layoutsList.concat(extraThemes);
for (const layout of allLayouts) {
if (layout.id === personal.id) {
continue;
}
const header =
new Combine([
`<img style="max-width: 3em;max-height: 3em; float: left; padding: 0.1em; margin-right: 0.3em;" src='${layout.icon}'>`,
"<b>",
layout.title,
"</b><br/>",
layout.shortDescription ?? ""
]).SetStyle("background: #eee; display: block; padding: 0.5em; border-radius:0.5em; overflow:auto;")
this.checkboxes.push(header);
for (const layer of layout.layers) {
if(layer === undefined){
console.warn("Undefined layer for ",layout.id)
continue;
}
if (typeof layer === "string") {
continue;
}
let icon = layer.icon ?? Img.AsData(Svg.checkmark);
let iconUnset = layer.icon ?? "";
if (layer.icon !== undefined && typeof (layer.icon) !== "string") {
icon = layer.icon.GetRenderValue({"id": "node/-123456"}).txt ?? Img.AsData(Svg.checkmark)
iconUnset = icon;
}
let name = layer.name ?? layer.id;
if (name === undefined) {
continue;
}
const content = new Combine([
"<b>",
name,
"</b> ",
layer.description !== undefined ? new Combine(["<br/>", layer.description]) : "",
])
const iconImage = `<img src="${icon}">`;
const iconUnsetImage = `<img src="${iconUnset}">`
const cb = new CheckBox(
new SubtleButton(
new FixedUiElement(iconImage).SetStyle(""),
content),
new SubtleButton(
new FixedUiElement(iconUnsetImage).SetStyle("opacity:0.1;"),
new Combine(["<del>",
content,
"</del>"
])),
controls[layer.id] ?? (favs.indexOf(layer.id) >= 0)
);
cb.SetClass("custom-layer-checkbox");
controls[layer.id] = cb.isEnabled;
cb.isEnabled.addCallback((isEnabled) => {
const favs = State.state.favouriteLayers;
if (isEnabled) {
if(favs.data.indexOf(layer.id)>= 0){
return; // Already added
}
favs.data.push(layer.id);
} else {
favs.data.splice(favs.data.indexOf(layer.id), 1);
}
favs.ping();
})
this.checkboxes.push(cb);
}
}
State.state.favouriteLayers.addCallback((layers) => {
for (const layerId of layers) {
controls[layerId]?.setData(true);
}
});
}
InnerRender(): string {
const t = Translations.t.favourite;
const userDetails = State.state.osmConnection.userDetails.data;
if(!userDetails.loggedIn){
return t.loginNeeded.Render();
}
return new Combine([
t.panelIntro,
...this.checkboxes
]).Render();
}
}

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