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

Fix opening hours input element

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-06-16 14:23:53 +02:00
parent 94f9a0de56
commit 64ec06bfc8
19 changed files with 643 additions and 599 deletions
Download patch file Download diff file Expand all files Collapse all files

99
UI/OpeningHours/OpeningHoursRange.ts
View file

@ -1,73 +1,57 @@
/**
* 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";
import OpeningHoursPickerTable from "./OpeningHoursPickerTable";
import BaseUIElement from "../BaseUIElement";
import {FixedUiElement} from "../Base/FixedUiElement";
export default class OpeningHoursRange extends UIElement {
private _oh: UIEventSource<OpeningHour>;
export default class OpeningHoursRange extends BaseUIElement {
private _oh: OpeningHour;
private readonly _startTime: BaseUIElement;
private readonly _endTime: BaseUIElement;
private readonly _deleteRange: BaseUIElement;
private readonly _tableId: OpeningHoursPickerTable;
private readonly _onDelete: () => void;
constructor(oh: UIEventSource<OpeningHour>, tableId: OpeningHoursPickerTable) {
super(oh);
this._tableId = tableId;
const self = this;
constructor(oh: OpeningHour, onDelete: () => void) {
super();
this._oh = oh;
this._onDelete = onDelete;
this.SetClass("oh-timerange");
oh.addCallbackAndRun(() => {
const el = document.getElementById(this.id) as HTMLElement;
self.InnerUpdate(el);
})
this._deleteRange =
Svg.delete_icon_ui()
.SetClass("oh-delete-range")
.onClick(() => {
oh.data.weekday = undefined;
oh.ping();
});
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")
}
InnerRender(): BaseUIElement {
const oh = this._oh.data;
if (oh === undefined) {
return undefined;
}
InnerConstructElement(): HTMLElement {
const height = this.getHeight();
const oh = this._oh;
const startTime = new FixedUiElement(Utils.TwoDigits(oh.startHour) + ":" + Utils.TwoDigits(oh.startMinutes)).SetClass("oh-timerange-label")
const endTime = new FixedUiElement(Utils.TwoDigits(oh.endHour) + ":" + Utils.TwoDigits(oh.endMinutes)).SetClass("oh-timerange-label")
let content = [this._deleteRange]
const deleteRange =
Svg.delete_icon_ui()
.SetClass("oh-delete-range")
.onClick(() => {
this._onDelete()
});
let content = [deleteRange]
if (height > 2) {
content = [this._startTime, this._deleteRange, this._endTime];
content = [startTime, deleteRange, endTime];
}
return new Combine(content)
.SetClass("oh-timerange-inner")
const el = new Combine(content)
.SetClass("oh-timerange-inner").ConstructElement();
el.style.top = (100 * OH.startTime(oh) / 24) + "%"
el.style.height = (100 * (OH.endTime(oh) - OH.startTime(oh)) / 24) + "%"
return el;
}
private getHeight(): number {
const oh = this._oh.data;
const oh = this._oh;
let endhour = oh.endHour;
if (oh.endHour == 0 && oh.endMinutes == 0) {
@ -76,28 +60,5 @@ export default class OpeningHoursRange extends UIElement {
return (endhour - oh.startHour + ((oh.endMinutes - oh.startMinutes) / 60));
}
protected InnerUpdate(el: HTMLElement) {
if (el == null) {
return;
}
const oh = this._oh.data;
if (oh === undefined) {
return;
}
// The header cell containing monday, tuesday, ...
const table = this._tableId.ConstructElement() 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";
}
}