Cleanup of empty classes, partial use of default export

This commit is contained in:
Pieter Vander Vennet 2020-10-02 19:00:24 +02:00
parent cc75f5c4fd
commit 9970c4b8bb
55 changed files with 939 additions and 206 deletions

View file

@ -1,7 +1,7 @@
import {UIElement} from "./UIElement";
import {DropDown} from "./Input/DropDown";
import Translations from "./i18n/Translations";
import {State} from "../State";
import State from "../State";
import {UIEventSource} from "../Logic/UIEventSource";
import {BaseLayer} from "../Logic/BaseLayer";

View file

@ -1,20 +0,0 @@
import {UIElement} from "../UIElement";
export class Image extends UIElement{
private src: string;
private style: string = "";
constructor(src: string, style: string = "") {
super(undefined);
this.style = style;
this.src = src;
}
InnerRender(): string {
if(this.src === undefined){
return "";
}
return `<img src='${this.src}' style='${this.style}'>`;
}
}

View file

@ -1,28 +1,20 @@
import {UIElement} from "../UIElement";
export class VerticalCombine extends UIElement {
private _elements: UIElement[];
private _className: string;
private readonly _elements: UIElement[];
constructor(elements: UIElement[], className: string = undefined) {
constructor(elements: UIElement[]) {
super(undefined);
this._elements = elements;
this._className = className;
}
InnerRender(): string {
let html = "";
for (const element of this._elements) {
if (element!== undefined && !element.IsEmpty()) {
if (element !== undefined && !element.IsEmpty()) {
html += "<div>" + element.Render() + "</div>";
}
}
if(html === ""){
return "";
}
if (this._className === undefined) {
return html;
}
return "<div class='"+this._className+"'>" + html + "</div>";
return html;
}
}

View file

@ -1,6 +1,6 @@
import {UIElement} from "./UIElement";
import Translations from "./i18n/Translations";
import {State} from "../State";
import State from "../State";
export class CenterMessageBox extends UIElement {

View file

@ -11,7 +11,7 @@ import AllLayersPanel from "./AllLayersPanel";
import SharePanel from "./SharePanel";
import {LayoutConfigJson} from "../../Customizations/JSON/LayoutConfigJson";
import {SubtleButton} from "../Base/SubtleButton";
import {State} from "../../State";
import State from "../../State";
import {FixedUiElement} from "../Base/FixedUiElement";
import SavePanel from "./SavePanel";
import {LocalStorageSource} from "../../Logic/Web/LocalStorageSource";

View file

@ -44,7 +44,9 @@ export class GenerateEmpty {
widenFactor: 0.05,
socialImage: "",
layers: []
layers: [
GenerateEmpty.createEmptyLayer()
]
}
}

View file

@ -8,8 +8,8 @@ import Combine from "../Base/Combine";
import {TextField} from "../Input/TextField";
import {InputElement} from "../Input/InputElement";
import MultiLingualTextFields from "../Input/MultiLingualTextFields";
import {CheckBox} from "../Input/CheckBox";
import {AndOrTagInput} from "../Input/AndOrTagInput";
import CheckBox from "../Input/CheckBox";
import AndOrTagInput from "../Input/AndOrTagInput";
import TagRenderingPanel from "./TagRenderingPanel";
import {DropDown} from "../Input/DropDown";
import {TagRenderingConfigJson} from "../../Customizations/JSON/TagRenderingConfigJson";
@ -17,7 +17,7 @@ import {MultiInput} from "../Input/MultiInput";
import {LayerConfigJson} from "../../Customizations/JSON/LayerConfigJson";
import PresetInputPanel from "./PresetInputPanel";
import {UserDetails} from "../../Logic/Osm/OsmConnection";
import {State} from "../../State";
import State from "../../State";
import {FixedUiElement} from "../Base/FixedUiElement";
import ValidatedTextField from "../Input/ValidatedTextField";

View file

@ -4,7 +4,7 @@ import {UIEventSource} from "../../Logic/UIEventSource";
import {UIElement} from "../UIElement";
import SettingsTable from "./SettingsTable";
import SingleSetting from "./SingleSetting";
import {AndOrTagInput} from "../Input/AndOrTagInput";
import AndOrTagInput from "../Input/AndOrTagInput";
import MultiLingualTextFields from "../Input/MultiLingualTextFields";
import {DropDown} from "../Input/DropDown";

View file

@ -6,14 +6,14 @@ import SettingsTable from "./SettingsTable";
import {TextField} from "../Input/TextField";
import Combine from "../Base/Combine";
import MultiLingualTextFields from "../Input/MultiLingualTextFields";
import {AndOrTagInput} from "../Input/AndOrTagInput";
import AndOrTagInput from "../Input/AndOrTagInput";
import {MultiTagInput} from "../Input/MultiTagInput";
import {MultiInput} from "../Input/MultiInput";
import MappingInput from "./MappingInput";
import {AndOrTagConfigJson} from "../../Customizations/JSON/TagConfigJson";
import {TagRenderingConfigJson} from "../../Customizations/JSON/TagRenderingConfigJson";
import {UserDetails} from "../../Logic/Osm/OsmConnection";
import {State} from "../../State";
import State from "../../State";
import {VariableUiElement} from "../Base/VariableUIElement";
import {FromJSON} from "../../Customizations/JSON/FromJSON";
import ValidatedTextField from "../Input/ValidatedTextField";
@ -50,7 +50,8 @@ export default class TagRenderingPanel extends InputElement<TagRenderingConfigJs
(this.options.disableQuestions ?? false) ||
questionsNotUnlocked;
this.intro = new Combine(["<h3>", options?.title ?? "TagRendering", "</h3>", options?.description ?? ""])
this.intro = new Combine(["<h3>", options?.title ?? "TagRendering", "</h3>",
options?.description ?? "A tagrendering converts OSM-tags into a value on screen. Fill out the field 'render' with the text that should appear. Note that `{key}` will be replaced with the corresponding `value`, if present.<br/>For specific known tags (e.g. if `foo=bar`, make a mapping). "])
this.IsImage = options?.isImage ?? false;
const value = new UIEventSource<TagRenderingConfigJson>({});

View file

@ -7,7 +7,7 @@ import {TagDependantUIElement, TagDependantUIElementConstructor} from "../Custom
import Translations from "./i18n/Translations";
import {Changes} from "../Logic/Osm/Changes";
import {FixedUiElement} from "./Base/FixedUiElement";
import {State} from "../State";
import State from "../State";
import {TagRenderingOptions} from "../Customizations/TagRenderingOptions";
import {UIEventSource} from "../Logic/UIEventSource";
import Combine from "./Base/Combine";
@ -133,7 +133,8 @@ export class FeatureInfoBox extends UIElement {
}
const infoboxcontents = new Combine(
[new VerticalCombine(info, "infobox-information "), questionElement ?? ""]);
[new VerticalCombine(info).SetClass("infobox-information")
, questionElement ?? ""]);
return new Combine([
this._title,

View file

@ -1,6 +1,6 @@
import {UIElement} from "./UIElement";
import Translations from "./i18n/Translations";
import {State} from "../State";
import State from "../State";
import Combine from "./Base/Combine";
/**

View file

@ -1,9 +1,9 @@
import {UIElement} from "../UIElement";
import {UIEventSource} from "../../Logic/UIEventSource";
import Translations from "../i18n/Translations";
import {CheckBox} from "../Input/CheckBox";
import CheckBox from "../Input/CheckBox";
import Combine from "../Base/Combine";
import {State} from "../../State";
import State from "../../State";
import {Tag} from "../../Logic/Tags";

View file

@ -6,7 +6,7 @@ import {
import {ImageCarousel} from "./ImageCarousel";
import {ImageUploadFlow} from "../ImageUploadFlow";
import {OsmImageUploadHandler} from "../../Logic/Osm/OsmImageUploadHandler";
import {State} from "../../State";
import State from "../../State";
import Translation from "../i18n/Translation";
export default class ImageCarouselWithUploadConstructor implements TagDependantUIElementConstructor{

View file

@ -3,7 +3,7 @@ import $ from "jquery"
import {DropDown} from "./Input/DropDown";
import Translations from "./i18n/Translations";
import Combine from "./Base/Combine";
import {State} from "../State";
import State from "../State";
import {UIEventSource} from "../Logic/UIEventSource";
import {Imgur} from "../Logic/Web/Imgur";
import {FixedUiElement} from "./Base/FixedUiElement";

View file

@ -3,7 +3,7 @@ import {UIEventSource} from "../../Logic/UIEventSource";
import {UIElement} from "../UIElement";
import Combine from "../Base/Combine";
import {SubtleButton} from "../Base/SubtleButton";
import {CheckBox} from "./CheckBox";
import CheckBox from "./CheckBox";
import {AndOrTagConfigJson} from "../../Customizations/JSON/TagConfigJson";
import {MultiTagInput} from "./MultiTagInput";
@ -13,7 +13,7 @@ class AndOrConfig implements AndOrTagConfigJson {
}
export class AndOrTagInput extends InputElement<AndOrTagConfigJson> {
export default class AndOrTagInput extends InputElement<AndOrTagConfigJson> {
private readonly _rawTags = new MultiTagInput();
private readonly _subAndOrs: AndOrTagInput[] = [];

View file

@ -2,7 +2,7 @@ import {UIElement} from "../UIElement";
import Translations from "../../UI/i18n/Translations";
import {UIEventSource} from "../../Logic/UIEventSource";
export class CheckBox extends UIElement{
export default class CheckBox extends UIElement{
public readonly isEnabled: UIEventSource<boolean>;
private readonly _showEnabled: UIElement;
private readonly _showDisabled: UIElement;

View file

@ -6,7 +6,7 @@ import {UIElement} from "../UIElement";
/**
* Supports multi-input
*/
export class CheckBoxes extends InputElement<number[]> {
export default class CheckBoxes extends InputElement<number[]> {
IsSelected: UIEventSource<boolean> = new UIEventSource<boolean>(false);
private readonly value: UIEventSource<number[]>;

View file

@ -1,27 +1,24 @@
import {InputElement} from "./InputElement";
import {UIEventSource} from "../../Logic/UIEventSource";
import {Utils} from "../../Utils";
/**
* 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 {Utils} from "../../../Utils";
import {OpeningHour} from "../../../Logic/OpeningHours";
import {InputElement} from "../InputElement";
export interface OpeningHour {
weekdayStart: number, // 0 is monday, 1 is tuesday, ...
weekdayEnd: number,
startHour: number,
startMinutes: number,
endHour: number,
endMinutes: number
}
export default class OpeningHours extends InputElement<OpeningHour[]> {
export default class OpeningHoursPicker extends InputElement<OpeningHour> {
public readonly IsSelected: UIEventSource<boolean>;
public static readonly days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
public static readonly days = ["Maan", "Din", "Woe", "Don", "Vrij", "Zat", "Zon"];
private readonly source: UIEventSource<OpeningHour[]>;
private readonly source: UIEventSource<OpeningHour>;
constructor(source: UIEventSource<OpeningHour[]> = undefined) {
constructor(source: UIEventSource<OpeningHour> = undefined) {
super();
this.source = source ?? new UIEventSource<OpeningHour[]>([]);
this.source = source ?? new UIEventSource<OpeningHour>(undefined);
this.IsSelected = new UIEventSource<boolean>(false);
this.SetStyle("width:100%;height:100%;display:block;")
}
InnerRender(): string {
@ -31,24 +28,17 @@ export default class OpeningHours extends InputElement<OpeningHour[]> {
if (hs.length == 1) {
hs = "0" + hs;
}
for (let m = 0; m < 60; m += 60) {
let min = "" + m;
const style = "width:0.5em;font-size:small;";
if (m === 0) {
min = "00";
}
rows += `<tr><td class="oh-left-col" rowspan="4" style="${style}">${hs}:${min}</td>` +
Utils.Times('<td class="oh-timecell oh-timecell-full"></td>', 7) +
'</tr><tr>' +
Utils.Times('<td class="oh-timecell"></td>', 7) +
'</tr><tr>' +
Utils.Times('<td class="oh-timecell oh-timecell-half"></td>', 7) +
'</tr><tr>' +
Utils.Times('<td class="oh-timecell"></td>', 7) +
'</tr>';
}
rows += `<tr><td rowspan="2" class="oh-left-col oh-timecell-full">${hs}:00</td>` +
Utils.Times('<td class="oh-timecell oh-timecell-full"></td>', 7) +
'</tr><tr>' +
// Utils.Times('<td class="oh-timecell"></td>', 7) +
// '</tr><tr>' +
Utils.Times('<td class="oh-timecell oh-timecell-half"></td>', 7) +
// '</tr><tr>' +
// Utils.Times('<td class="oh-timecell"></td>', 7) +
'</tr>';
}
let days = OpeningHours.days.join("</th><th>");
let days = OpeningHoursPicker.days.join("</th><th>");
return `<table id="oh-table-${this.id}" class="oh-table"><tr><th></th><th>${days}</tr>${rows}</table>`;
}
@ -68,14 +58,9 @@ export default class OpeningHours extends InputElement<OpeningHour[]> {
}
function m(timeSegment: number) {
return (timeSegment % 4) * 15;
return (timeSegment % 2) * 30;
}
function hhmm(timeSegment: number) {
return h(timeSegment) + ":" + m(timeSegment)
}
function startSelection(i: number, j: number, cell: HTMLElement) {
mouseIsDown = true;
selectionStart = [i, j];
@ -92,9 +77,6 @@ export default class OpeningHours extends InputElement<OpeningHour[]> {
const dEnd = Math.max(selectionStart[1], selectionEnd[1]);
const timeStart = Math.min(selectionStart[0], selectionEnd[0]) - 1;
const timeEnd = Math.max(selectionStart[0], selectionEnd[0]) - 1;
console.log("Selected from day", OpeningHours.days[dStart], "at",
hhmm(timeStart), "till", OpeningHours.days[dEnd], "at", hhmm(timeEnd + 1)
)
const oh: OpeningHour = {
weekdayStart: dStart,
weekdayEnd: dEnd,
@ -103,8 +85,7 @@ export default class OpeningHours extends InputElement<OpeningHour[]> {
endHour: h(timeEnd + 1),
endMinutes: m(timeEnd + 1)
}
self.source.data.push(oh);
self.source.ping();
self.source.setData(oh);
}
table.onmouseup = () => {
@ -134,7 +115,7 @@ export default class OpeningHours extends InputElement<OpeningHour[]> {
for (let j = 0; j < row.cells.length; j++) {
let cell = row.cells[j]
let offset = 0;
if (i % 4 == 1) {
if (i % 2 == 1) {
if (j == 0) {
continue;
}
@ -157,7 +138,7 @@ export default class OpeningHours extends InputElement<OpeningHour[]> {
for (let j = 0; j < row.cells.length; j++) {
let cell = row.cells[j]
let offset = 0;
if (i % 4 == 1) {
if (i % 2 == 1) {
if (j == 0) {
continue;
}
@ -168,10 +149,12 @@ export default class OpeningHours extends InputElement<OpeningHour[]> {
cell.onmousedown = (ev) => {
ev.preventDefault();
startSelection(i, j + offset, cell)
selectAllBetween(i, j + offset);
}
cell.ontouchstart = (ev) => {
ev.preventDefault();
startSelection(i, j + offset, cell)
startSelection(i, j + offset, cell);
selectAllBetween(i, j + offset);
}
cell.onmouseenter = () => {
if (mouseIsDown) {
@ -180,16 +163,39 @@ export default class OpeningHours extends InputElement<OpeningHour[]> {
}
}
cell.ontouchmove = (ev) => {
cell.ontouchmove = (ev: TouchEvent) => {
ev.preventDefault();
selectionEnd = [i, j + offset];
selectAllBetween(i, j + offset)
for (const k in ev.targetTouches) {
const touch = ev.targetTouches[k];
const elUnderTouch = document.elementFromPoint(
touch.screenX,
touch.screenY
);
// @ts-ignore
const f = elUnderTouch.onmouseenter;
if (f) {
f();
}
}
}
cell.ontouchend = (ev) => {
ev.preventDefault();
selectionEnd = [i, j + offset];
selectAllBetween(i, j + offset)
for (const k in ev.targetTouches) {
const touch = ev.targetTouches[k];
const elUnderTouch = document.elementFromPoint(
touch.pageX,
touch.pageY
);
// @ts-ignore
const f = elUnderTouch.onmouseup;
if (f) {
f();
}
}
}
}
@ -198,11 +204,11 @@ export default class OpeningHours extends InputElement<OpeningHour[]> {
}
IsValid(t: OpeningHour[]): boolean {
IsValid(t: OpeningHour): boolean {
return true;
}
GetValue(): UIEventSource<OpeningHour[]> {
GetValue(): UIEventSource<OpeningHour> {
return this.source;
}

View file

@ -0,0 +1,19 @@
import {UIElement} from "../../UIElement";
/**
* A single opening hours range, shown on top of the OH-picker table
*/
export default class OpeningHoursRange extends UIElement{
private _parentCell: HTMLElement;
constructor(parentCell : HTMLElement) {
super();
this._parentCell = parentCell;
}
InnerRender(): string {
this.SetStyle(`display:block;position:absolute;top:0;left:0;width:100%;background:blue;height:${this._parentCell.offsetHeight*2}px`)
return "Hi";
}
}

View file

@ -156,7 +156,7 @@ export default class ValidatedTextField {
const values: { value: string, shown: string }[] = [];
const expl = ValidatedTextField.tpList;
for (const key in expl) {
values.push({value: key, shown: `${key} - ${expl[key]}`})
values.push({value: key, shown: `${expl[key].name} - ${expl[key].explanation}`})
}
return new DropDown<string>("", values)
}

View file

@ -1,7 +1,7 @@
import {UIElement} from "./UIElement";
import {CheckBox} from "./Input/CheckBox";
import CheckBox from "./Input/CheckBox";
import Combine from "./Base/Combine";
import {State} from "../State";
import State from "../State";
import Translations from "./i18n/Translations";
import {FixedUiElement} from "./Base/FixedUiElement";
import {VariableUiElement} from "./Base/VariableUIElement";

View file

@ -4,7 +4,7 @@ import Translations from "./i18n/Translations";
import {AllKnownLayouts} from "../Customizations/AllKnownLayouts";
import Combine from "./Base/Combine";
import {SubtleButton} from "./Base/SubtleButton";
import {State} from "../State";
import State from "../State";
import {VariableUiElement} from "./Base/VariableUIElement";
import {PersonalLayout} from "../Logic/PersonalLayout";
import {Layout} from "../Customizations/Layout";

38
UI/OhVisualization.ts Normal file
View file

@ -0,0 +1,38 @@
import {UIElement} from "./UIElement";
import {UIEventSource} from "../Logic/UIEventSource";
import * as opening_hours from "opening_hours";
export default class OhVisualization extends UIElement {
constructor(openingHours: UIEventSource<any>) {
super(openingHours);
}
InnerRender(): string {
const oh = new opening_hours(this._source.data, {});
let nominatim_example = [{
"place_id": 79276782,
"licence": "Data © OpenStreetMap contributors, ODbL 1.0. https://osm.org/copyright",
"osm_type": "way",
"osm_id": 4575088,
"boundingbox": ["52.5519288", "52.5541724", "-1.8278941", "-1.8238916"],
"lat": "52.553624",
"lon": "-1.8256057",
"display_name": "Pilkington Avenue, Sutton Coldfield, Birmingham, West Midlands Combined Authority, England, B72, United Kingdom",
"place_rank": 26,
"category": "highway",
"type": "residential",
"importance": 0.4,
"geojson": {
"type": "LineString",
"coordinates": [[-1.8278941, 52.55417], [-1.8277256, 52.5541716], [-1.8276423, 52.5541724], [-1.8267652, 52.5539852], [-1.8261462, 52.5538445], [-1.8258137, 52.5537286], [-1.8256057, 52.553624], [-1.8254024, 52.5534973], [-1.8252343, 52.5533435], [-1.8245486, 52.5526243], [-1.8238916, 52.5519288]]
}
}]
return "";
}
}

View file

@ -6,7 +6,7 @@ import {FixedUiElement} from "./Base/FixedUiElement";
import {TextField} from "./Input/TextField";
import {Geocoding} from "../Logic/Osm/Geocoding";
import Translations from "./i18n/Translations";
import {State} from "../State";
import State from "../State";
import {UIEventSource} from "../Logic/UIEventSource";

View file

@ -3,10 +3,10 @@ import Translations from "./i18n/Translations";
import {FixedUiElement} from "./Base/FixedUiElement";
import Combine from "./Base/Combine";
import {VariableUiElement} from "./Base/VariableUIElement";
import {CheckBox} from "./Input/CheckBox";
import CheckBox from "./Input/CheckBox";
import {VerticalCombine} from "./Base/VerticalCombine";
import {Img} from "./Img";
import {State} from "../State";
import State from "../State";
import {Basemap} from "../Logic/Leaflet/Basemap";
import {FilteredLayer} from "../Logic/FilteredLayer";
import {Utils} from "../Utils";

View file

@ -5,7 +5,7 @@ import Translations from "./i18n/Translations";
import Combine from "./Base/Combine";
import {SubtleButton} from "./Base/SubtleButton";
import Locale from "./i18n/Locale";
import {State} from "../State";
import State from "../State";
import {UIEventSource} from "../Logic/UIEventSource";
import {Utils} from "../Utils";

View file

@ -2,14 +2,12 @@ import {UIEventSource} from "../Logic/UIEventSource";
import {And, Tag, TagsFilter, TagUtils} from "../Logic/Tags";
import Translations from "../UI/i18n/Translations";
import Locale from "../UI/i18n/Locale";
import {State} from "../State";
import Translation from "../UI/i18n/Translation";
import Combine from "../UI/Base/Combine";
import {TagDependantUIElement} from "../Customizations/UIElementConstructor";
import {UIElement} from "./UIElement";
import {VariableUiElement} from "./Base/VariableUIElement";
import InputElementMap from "./Input/InputElementMap";
import {CheckBoxes} from "./Input/Checkboxes";
import {InputElement} from "./Input/InputElement";
import {SaveButton} from "./SaveButton";
import {RadioButton} from "./Input/RadioButton";
@ -17,6 +15,8 @@ import {FixedInputElement} from "./Input/FixedInputElement";
import {TagRenderingOptions} from "../Customizations/TagRenderingOptions";
import {FixedUiElement} from "./Base/FixedUiElement";
import ValidatedTextField from "./Input/ValidatedTextField";
import CheckBoxes from "./Input/Checkboxes";
import State from "../State";
export class TagRendering extends UIElement implements TagDependantUIElement {

View file

@ -1,10 +1,10 @@
import {UIElement} from "./UIElement";
import L from "leaflet";
import * as L from "leaflet";
import {FixedUiElement} from "./Base/FixedUiElement";
import {VariableUiElement} from "./Base/VariableUIElement";
import Translations from "./i18n/Translations";
import {UserDetails} from "../Logic/Osm/OsmConnection";
import {State} from "../State";
import State from "../State";
import {UIEventSource} from "../Logic/UIEventSource";
import {InitUiElements} from "../InitUiElements";
import Combine from "./Base/Combine";

View file

@ -1,6 +1,6 @@
import {UIElement} from "./UIElement";
import Locale from "../UI/i18n/Locale";
import {State} from "../State";
import State from "../State";
import Translations from "./i18n/Translations";
import Combine from "./Base/Combine";
import {InitUiElements} from "../InitUiElements";