mapcomplete/UI/OpeningHours/OpeningHoursRange.ts
2021-01-02 16:04:16 +01:00

103 lines
No EOL
3.2 KiB
TypeScript

/**
* 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>;
private readonly _startTime: UIElement;
private readonly _endTime: UIElement;
private readonly _deleteRange: UIElement;
private readonly _tableId: string;
constructor(oh: UIEventSource<OpeningHour>, tableId: string) {
super(oh);
this._tableId = tableId;
const self = this;
this._oh = oh;
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(): string {
const oh = this._oh.data;
if (oh === undefined) {
return "";
}
const height = this.getHeight();
let content = [this._deleteRange]
if (height > 2) {
content = [this._startTime, this._deleteRange, this._endTime];
}
return new Combine(content)
.SetClass("oh-timerange-inner")
.Render();
}
private getHeight(): number {
const oh = this._oh.data;
let endhour = oh.endHour;
if (oh.endHour == 0 && oh.endMinutes == 0) {
endhour = 24;
}
const height = (endhour - oh.startHour + ((oh.endMinutes - oh.startMinutes) / 60));
return height;
}
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 = 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";
}
}