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

First version of the OH-input-element

Browse source
This commit is contained in:
Pieter Vander Vennet 2020-10-08 19:03:00 +02:00
parent b93f25d79c
commit 895ec01213
16 changed files with 532 additions and 248 deletions
Download patch file Download diff file Expand all files Collapse all files

2
UI/CustomGenerator/SavePanel.ts
View file

@ -49,7 +49,7 @@ export default class SavePanel extends UIElement {
InnerRender(): string {
return new Combine([
"<h3>Saving</h3>",
"<h3>Save your theme</h3>",
this.lastSaveEl,
"<h3>JSON configuration</h3>",
"The url hash is actually no more then a BASE64-encoding of the below JSON. This json contains the full configuration of the theme.<br/>" +

116
UI/Input/OpeningHours/OpeningHoursInput.ts Normal file
View file

@ -0,0 +1,116 @@
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
*/
export default class OpeningHoursInput extends InputElement<string> {
private readonly _value: UIEventSource<string>;
private readonly _ohPicker: UIElement;
private readonly _leftoverWarning: UIElement;
private readonly _phSelector: UIElement;
constructor(value: UIEventSource<string> = new UIEventSource<string>("")) {
super();
const rulesFromOhPicker = value.map(OH.Parse);
const leftoverRules = value.map<string[]>(str => {
if (str === undefined) {
return []
}
const leftOvers: string[] = [];
const rules = str.split(";");
for (const rule of rules) {
if (OH.ParseRule(rule) !== null) {
continue;
}
if (PublicHolidayInput.LoadValue(rule) !== null) {
continue;
}
leftOvers.push(rule);
}
return leftOvers;
})
const ph = value.map<string>(str => {
if (str === undefined) {
return ""
}
const rules = str.split(";");
for (const rule of rules) {
if (PublicHolidayInput.LoadValue(rule) !== null) {
return rule;
}
}
return "";
})
this._phSelector = new PublicHolidayInput(ph);
function update() {
let rules = OH.ToString(rulesFromOhPicker.data);
if (leftoverRules.data.length != 0) {
rules += ";" + leftoverRules.data.join(";")
}
const phData = ph.data;
if (phData !== undefined && phData !== "") {
rules += ";" + phData;
}
value.setData(rules);
}
rulesFromOhPicker.addCallback(update);
ph.addCallback(update);
this._leftoverWarning = new VariableUiElement(leftoverRules.map((leftovers: string[]) => {
if (leftovers.length == 0) {
return "";
}
return new Combine([
Translations.t.general.opening_hours.not_all_rules_parsed,
new FixedUiElement(leftovers.map(r => `${r}<br/>`).join("") ).SetClass("subtle")
]).Render();
}))
this._ohPicker = new OpeningHoursPicker(rulesFromOhPicker);
}
GetValue(): UIEventSource<string> {
return this._value;
}
InnerRender(): string {
return new Combine([
this._leftoverWarning,
this._ohPicker,
this._phSelector
]).Render();
}
public readonly IsSelected: UIEventSource<boolean> = new UIEventSource<boolean>(false);
IsValid(t: string): boolean {
return true;
}
}

6
UI/Input/OpeningHours/OpeningHoursPicker.ts
View file

@ -7,7 +7,7 @@ import OpeningHoursRange from "./OpeningHoursRange";
import Combine from "../../Base/Combine";
export default class OpeningHoursPicker extends InputElement<OpeningHour[]> {
private readonly _ohs: UIEventSource<OpeningHour[]>;
private readonly _ohs: UIEventSource<OpeningHour[]>;
public readonly IsSelected: UIEventSource<boolean> = new UIEventSource<boolean>(false);
private readonly _backgroundTable: OpeningHoursPickerTable;
@ -36,8 +36,8 @@ export default class OpeningHoursPicker extends InputElement<OpeningHour[]> {
source.addCallback(_ => {
self._ohs.setData(OH.MergeTimes(self._ohs.data))
})
const r = new OpeningHoursRange(source);
perWeekday[oh.weekday].push(r);
const r = new OpeningHoursRange(source, `oh-table-${this._backgroundTable.id}`);
perWeekday[oh.weekday].push(r);
}
for (let i = 0; i < 7; i++) {

19
UI/Input/OpeningHours/OpeningHoursPickerTable.ts
View file

@ -48,18 +48,15 @@ export default class OpeningHoursPickerTable extends InputElement<OpeningHour[]>
rows += `<tr><td rowspan="2" class="oh-left-col oh-timecell-full">${hs}:00</td>` +
Utils.Times(weekday => {
let innerContent = "";
if (h == 0) {
innerContent = self.weekdays.data[weekday]?.Render() ?? "";
}
return `<td id="${this.id}-timecell-${weekday}-${h}" class="oh-timecell oh-timecell-full"><div class="oh-timecell-inner"></div>${innerContent}</td>`;
}, 7) +
'</tr><tr>' +
Utils.Times(id => `<td id="${this.id}-timecell-${id}-${h}-30" class="oh-timecell oh-timecell-half"><div class="oh-timecell-inner"></div></td>`, 7) +
Utils.Times(weekday => `<td id="${this.id}-timecell-${weekday}-${h}" class="oh-timecell oh-timecell-full"></td>`, 7) +
'</tr><tr>' +
Utils.Times(id => `<td id="${this.id}-timecell-${id}-${h}-30" class="oh-timecell oh-timecell-half"></td>`, 7) +
'</tr>';
}
let days = OpeningHoursPickerTable.days.map(day => day.Render()).join("</th><th width='14%'>");
let days = OpeningHoursPickerTable.days.map((day, i) => {
const innerContent = self.weekdays.data[i]?.Render() ?? "";
return day.Render() + "<span style='width:100%; display:block; position: relative;'>"+innerContent+"</span>";
}).join("</th><th width='14%'>");
return `<table id="oh-table-${this.id}" class="oh-table"><tr><th></th><th width='14%'>${days}</th></tr>${rows}</table>`;
}
@ -181,7 +178,7 @@ export default class OpeningHoursPickerTable extends InputElement<OpeningHour[]>
for (let i = 1; i < table.rows.length; i++) {
let row = table.rows[i]
for (let j = 0; j < row.cells.length; j++) {
let cell = row.cells[j].getElementsByClassName("oh-timecell-inner")[0] as HTMLElement
let cell = row.cells[j]
let offset = 0;
if (i % 2 == 1) {
if (j == 0) {

147
UI/Input/OpeningHours/OpeningHoursRange.ts
View file

@ -1,10 +1,10 @@
import {UIElement} from "../../UIElement";
import {UIEventSource} from "../../../Logic/UIEventSource";
import {OpeningHour} from "../../../Logic/OpeningHours";
import {TextField} from "../TextField";
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";
/**
* A single opening hours range, shown on top of the OH-picker table
@ -12,16 +12,18 @@ import {FixedUiElement} from "../../Base/FixedUiElement";
export default class OpeningHoursRange extends UIElement {
private _oh: UIEventSource<OpeningHour>;
private _startTime: TextField;
private _endTime: TextField;
private _deleteRange: UIElement;
private readonly _startTime: UIElement;
private readonly _endTime: UIElement;
private readonly _deleteRange: UIElement;
private readonly _tableId: string;
constructor(oh: UIEventSource<OpeningHour>) {
constructor(oh: UIEventSource<OpeningHour>, tableId: string) {
super(oh);
this._tableId = tableId;
const self = this;
this._oh = oh;
this.SetClass("oh-timerange");
oh.addCallbackAndRun(oh => {
oh.addCallbackAndRun(() => {
const el = document.getElementById(this.id) as HTMLElement;
self.InnerUpdate(el);
})
@ -33,107 +35,15 @@ export default class OpeningHoursRange extends UIElement {
oh.ping();
});
this._startTime = new TextField({
value: oh.map(oh => {
if (oh) {
return Utils.TwoDigits(oh.startHour) + ":" + Utils.TwoDigits(oh.startMinutes);
}
}),
htmlType: "time"
});
this._endTime = new TextField({
value: oh.map(oh => {
if (oh) {
if (oh.endHour == 24) {
return "00:00";
}
return Utils.TwoDigits(oh.endHour) + ":" + Utils.TwoDigits(oh.endMinutes);
}
}),
htmlType: "time"
});
this._startTime = new VariableUiElement(oh.map(oh => {
return Utils.TwoDigits(oh.startHour) + ":" + Utils.TwoDigits(oh.startMinutes);
})).SetClass("oh-timerange-label")
this._endTime = new VariableUiElement(oh.map(oh => {
return Utils.TwoDigits(oh.endHour) + ":" + Utils.TwoDigits(oh.endMinutes);
})).SetClass("oh-timerange-label")
function applyStartTime() {
if (self._startTime.GetValue().data === undefined) {
return;
}
const spl = self._startTime.GetValue().data.split(":");
oh.data.startHour = Number(spl[0]);
oh.data.startMinutes = Number(spl[1]);
if (oh.data.startHour >= oh.data.endHour) {
if (oh.data.startMinutes + 10 >= oh.data.endMinutes) {
oh.data.endHour = oh.data.startHour + 1;
oh.data.endMinutes = oh.data.startMinutes;
if (oh.data.endHour > 23) {
oh.data.endHour = 24;
oh.data.endMinutes = 0;
oh.data.startHour = Math.min(oh.data.startHour, 23);
oh.data.startMinutes = Math.min(oh.data.startMinutes, 45);
}
}
}
oh.ping();
}
function applyEndTime() {
if (self._endTime.GetValue().data === undefined) {
return;
}
const spl = self._endTime.GetValue().data.split(":");
let newEndHour = Number(spl[0]);
const newEndMinutes = Number(spl[1]);
if (newEndHour == 0 && newEndMinutes == 0) {
newEndHour = 24;
}
if (newEndHour == oh.data.endMinutes && newEndMinutes == oh.data.endMinutes) {
// NOthing to change
return;
}
oh.data.endHour = newEndHour;
oh.data.endMinutes = newEndMinutes;
oh.ping();
}
this._startTime.GetValue().addCallbackAndRun(startTime => {
const spl = startTime.split(":");
if (spl[0].startsWith('0') || spl[1].startsWith('0')) {
return;
}
applyStartTime();
});
this._endTime.GetValue().addCallbackAndRun(endTime => {
const spl = endTime.split(":");
if (spl[0].startsWith('0') || spl[1].startsWith('0')) {
return;
}
applyEndTime()
});
this._startTime.enterPressed.addCallback(() => {
applyStartTime();
});
this._endTime.enterPressed.addCallbackAndRun(() => {
applyEndTime();
})
this._startTime.IsSelected.addCallback(isSelected => {
if (!isSelected) {
applyStartTime();
}
});
this._endTime.IsSelected.addCallback(isSelected => {
if (!isSelected) {
applyEndTime();
}
})
}
@ -143,8 +53,14 @@ export default class OpeningHoursRange extends UIElement {
return "";
}
const height = this.getHeight();
return new Combine([this._startTime, this._deleteRange, this._endTime])
.SetClass(height < 2 ? "oh-timerange-inner-small" : "oh-timerange-inner")
let content = [this._deleteRange]
if (height > 2) {
content = [this._startTime, this._deleteRange, this._endTime];
}
return new Combine(content)
.SetClass("oh-timerange-inner")
.Render();
}
@ -167,10 +83,19 @@ export default class OpeningHoursRange extends UIElement {
if (oh === undefined) {
return;
}
const height = this.getHeight();
el.style.height = `${height * 200}%`
const upperDiff = (oh.startHour + oh.startMinutes / 60);
el.style.marginTop = `${2 * upperDiff * el.parentElement.offsetHeight - upperDiff*0.75}px`;
// The header cell containing monday, tuesday, ...
const table = document.getElementById(this._tableId) as HTMLTableElement;
const bodyRect = document.body.getBoundingClientRect();
const rangeStart = table.rows[1].cells[1].getBoundingClientRect().top - bodyRect.top;
const rangeEnd = table.rows[table.rows.length - 1].cells[1].getBoundingClientRect().bottom - bodyRect.top;
const pixelsPerHour = (rangeEnd - rangeStart) / 24;
el.style.top = (pixelsPerHour * OH.startTime(oh)) + "px";
el.style.height = (pixelsPerHour * (OH.endTime(oh) - OH.startTime(oh))) + "px";
}

163
UI/Input/OpeningHours/PublicHolidayInput.ts Normal file
View file

@ -0,0 +1,163 @@
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";
export default class PublicHolidayInput extends InputElement<string> {
IsSelected: UIEventSource<boolean> = new UIEventSource<boolean>(false);
private readonly _value: UIEventSource<string>;
private readonly _dropdown: UIElement;
private readonly _mode: UIEventSource<string>;
private readonly _startHour: UIElement;
private readonly _endHour: UIElement;
constructor(value: UIEventSource<string> = new UIEventSource<string>("")) {
super();
this._value = value;
const dropdown = new DropDown(
Translations.t.general.opening_hours.open_during_ph,
[
{shown: "unknown", value: ""},
{shown: "closed", value: "off"},
{shown: "opened", value: " "}
]
);
this._dropdown = dropdown.SetStyle("display:inline-block;");
this._mode = dropdown.GetValue();
this.ListenTo(dropdown.GetValue());
const start = new TextField({
placeholder: "starthour",
htmlType: "time"
});
const end = new TextField({
placeholder: "starthour",
htmlType: "time"
});
this._startHour = start.SetStyle("display:inline-block;");
this._endHour = end.SetStyle("display:inline-block;");
const self = this;
this._value.addCallbackAndRun(ph => {
if (ph === undefined) {
return;
}
const parsed = PublicHolidayInput.LoadValue(ph);
if (parsed === null) {
return;
}
dropdown.GetValue().setData(parsed.mode);
if (parsed.start) {
start.GetValue().setData(parsed.start);
}
if (parsed.end) {
end.GetValue().setData(parsed.end);
}
})
function updateValue() {
const phStart = dropdown.GetValue().data;
if (phStart === undefined || phStart === "") {
// Unknown
self._value.setData("");
return;
}
if (phStart === " ") {
// THey are open, we need to include the start- and enddate
const startV = start.GetValue().data;
const endV = end.GetValue().data;
if (startV === undefined || endV === undefined) {
self._value.setData(`PH open`);
return;
}
self._value.setData(`PH ${startV}-${endV}`);
return;
}
self._value.setData(`PH ${phStart}`);
}
dropdown.GetValue().addCallbackAndRun(() => {
updateValue();
});
start.GetValue().addCallbackAndRun(() => {
updateValue();
});
end.GetValue().addCallbackAndRun(() => {
updateValue();
});
}
public static LoadValue(str: string): {
mode: string,
start?: string,
end?: string
} {
str = str.trim();
if (!str.startsWith("PH")) {
return null;
}
str = str.trim();
if (str === "PH off") {
return {
mode: "off"
}
}
if (!str.startsWith("PH ")) {
return null;
}
try {
const timerange = OH.parseHHMMRange(str.substring(2));
if (timerange === null) {
return null;
}
return {
mode: " ",
start: OH.hhmm(timerange.startHour, timerange.startMinutes),
end: OH.hhmm(timerange.endHour, timerange.endMinutes),
}
} catch (e) {
return null;
}
}
InnerRender(): string {
const mode = this._mode.data;
if (mode === " ") {
return new Combine([this._dropdown,
" ",
Translations.t.general.opening_hours.opensAt,
" ",
this._startHour,
" ",
Translations.t.general.opening_hours.openTill,
" ",
this._endHour]).Render();
}
return this._dropdown.Render();
}
GetValue(): UIEventSource<string> {
return this._value;
}
IsValid(t: string): boolean {
return true;
}
}

20
UI/Input/TextField.ts
View file

@ -2,6 +2,7 @@ import {UIElement} from "../UIElement";
import {InputElement} from "./InputElement";
import Translations from "../i18n/Translations";
import {UIEventSource} from "../../Logic/UIEventSource";
import Combine from "../Base/Combine";
export class TextField extends InputElement<string> {
private readonly value: UIEventSource<string>;
@ -12,12 +13,14 @@ export class TextField extends InputElement<string> {
private readonly _textAreaRows: number;
private readonly _isValid: (string, country) => boolean;
private _label: UIElement;
constructor(options?: {
placeholder?: string | UIElement,
value?: UIEventSource<string>,
textArea?: boolean,
htmlType?: string,
label?: UIElement,
textAreaRows?: number,
isValid?: ((s: string, country?: string) => boolean)
}) {
@ -28,6 +31,7 @@ export class TextField extends InputElement<string> {
this._htmlType = options.textArea ? "area" : (options.htmlType ?? "text");
this.value = options?.value ?? new UIEventSource<string>(undefined);
this._label = options.label;
this._textAreaRows = options.textAreaRows;
this._isValid = options.isValid ?? ((str, country) => true);
@ -64,10 +68,18 @@ export class TextField extends InputElement<string> {
}
const placeholder = this._placeholder.InnerRender().replace("'", "&#39");
return `<div id="${this.id}"><form onSubmit='return false' class='form-text-field'>` +
`<input type='${this._htmlType}' placeholder='${placeholder}' id='txt-${this.id}'/>` +
`</form></div>`;
let label = "";
if (this._label != undefined) {
label = this._label.Render();
}
return new Combine([
`<div id="${this.id}">`,
`<form onSubmit='return false' class='form-text-field'>`,
label,
`<input type='${this._htmlType}' placeholder='${placeholder}' id='txt-${this.id}'/>`,
`</form>`,
`</div>`
]).Render();
}
InnerUpdate() {

16
UI/Input/ValidatedTextField.ts
View file

@ -8,8 +8,7 @@ import {UIElement} from "../UIElement";
import {UIEventSource} from "../../Logic/UIEventSource";
import CombinedInputElement from "./CombinedInputElement";
import SimpleDatePicker from "./SimpleDatePicker";
import OpeningHoursPicker from "./OpeningHours/OpeningHoursPicker";
import {OpeningHour, OH} from "../../Logic/OpeningHours";
import OpeningHoursInput from "./OpeningHours/OpeningHoursInput";
interface TextFieldDef {
name: string,
@ -150,18 +149,7 @@ export default class ValidatedTextField {
(s, country) => true, // TODO
str => str,
(value) => {
const sourceMapped = value.map(OH.Parse, [], OH.ToString);
const input = new InputElementMap<OpeningHour[], string>(new OpeningHoursPicker(sourceMapped),
(a, b) => a === b,
ohs => OH.ToString(ohs),
str => OH.Parse(str)
)
input.GetValue().addCallback(latest => {
value.setData(latest);
})
return input;
return new OpeningHoursInput(value);
}
)
]

81
UI/OhVisualization.ts
View file

@ -1,38 +1,71 @@
import {UIElement} from "./UIElement";
import {UIEventSource} from "../Logic/UIEventSource";
import * as opening_hours from "opening_hours";
import opening_hours from "opening_hours";
export default class OhVisualization extends UIElement {
export default class OpeningHoursVisualization extends UIElement {
constructor(openingHours: UIEventSource<any>) {
super(openingHours);
constructor(tags: UIEventSource<any>) {
super(tags);
}
private static GetRanges(tags: any, from: Date, to: Date): {
isOpen: boolean,
isUnknown: boolean,
comment: string,
startDate: Date
}[] {
const oh = new opening_hours(tags.opening_hours, {
lat: tags._lat,
lon: tags._lon,
address: {
country_code: tags._country
}
});
const values = [];
const iterator = oh.getIterator(from);
while (iterator.advance(to)) {
const value = {
isUnknown: iterator.getUnknown(),
isOpen: iterator.getState(),
comment: iterator.getComment(),
startDate: iterator.getDate()
}
if (value.comment === undefined && !value.isOpen && !value.isUnknown) {
// simply closed, nothing special here
continue;
}
console.log(value)
values.push(value);
}
return values;
}
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]]
}
}]
const from = new Date("2019-12-31");
const to = new Date("2020-01-05");
const ranges = OpeningHoursVisualization.GetRanges(this._source.data, from, to);
return "";
let text = "";
for (const range of ranges) {
text += `From${range.startDate} it is${range.isOpen} ${range.comment?? ""}<br/>`
}
return text;
}
}

2
UI/UIElement.ts
View file

@ -101,7 +101,7 @@ export abstract class UIElement extends UIEventSource<string> {
const self = this;
element.onclick = (e) => {
// @ts-ignore
if (e.consumed) {
if(e.consumed){
return;
}
self._onClick();

18
UI/i18n/Translations.ts
View file

@ -881,6 +881,24 @@ export default class Translations {
"nl": "Zondag",
"fr": "Dimance",
})
},
opening_hours: {
open_during_ph: new T({
"nl": "Op een feestdag is deze zaak",
"en":"During a public holiday, this amenity is"
}),
opensAt: new T({
"en":"from",
"nl":"vanaf"
}),openTill: new T({
"en":"till",
"nl":"tot"
}),
not_all_rules_parsed: new T({
"en":"The openin hours of this shop are complicated. The following rules are ignored in the input element:"
})
}
},
favourite: {