midgard/mapcomplete
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Refactoring: attempting to make State smaller

Browse source
This commit is contained in:
pietervdvn 2021-01-02 16:04:16 +01:00
parent a6f56acad6
commit 849c61c8a1
28 changed files with 529 additions and 485 deletions
Show stats 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) => {

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

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

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

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
}

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