mapcomplete/UI/Input/OpeningHours/OpeningHoursRange.ts

102 lines
3.2 KiB
TypeScript
Raw Normal View History

import {UIElement} from "../../UIElement";
2020-10-04 01:04:46 +02:00
import {UIEventSource} from "../../../Logic/UIEventSource";
2020-10-08 19:03:00 +02:00
import {OH, OpeningHour} from "../../../Logic/OpeningHours";
2020-10-04 01:04:46 +02:00
import Combine from "../../Base/Combine";
import {Utils} from "../../../Utils";
import {FixedUiElement} from "../../Base/FixedUiElement";
2020-10-08 19:03:00 +02:00
import {VariableUiElement} from "../../Base/VariableUIElement";
/**
* A single opening hours range, shown on top of the OH-picker table
*/
2020-10-04 01:04:46 +02:00
export default class OpeningHoursRange extends UIElement {
private _oh: UIEventSource<OpeningHour>;
2020-10-08 19:03:00 +02:00
private readonly _startTime: UIElement;
private readonly _endTime: UIElement;
private readonly _deleteRange: UIElement;
private readonly _tableId: string;
2020-10-04 01:04:46 +02:00
2020-10-08 19:03:00 +02:00
constructor(oh: UIEventSource<OpeningHour>, tableId: string) {
2020-10-04 01:04:46 +02:00
super(oh);
2020-10-08 19:03:00 +02:00
this._tableId = tableId;
2020-10-04 01:04:46 +02:00
const self = this;
this._oh = oh;
this.SetClass("oh-timerange");
2020-10-08 19:03:00 +02:00
oh.addCallbackAndRun(() => {
2020-10-04 01:04:46 +02:00
const el = document.getElementById(this.id) as HTMLElement;
self.InnerUpdate(el);
})
this._deleteRange = new FixedUiElement("<img src='./assets/delete.svg'>")
.SetClass("oh-delete-range")
.onClick(() => {
oh.data.weekday = undefined;
oh.ping();
});
2020-10-08 19:03:00 +02:00
this._startTime = new VariableUiElement(oh.map(oh => {
return Utils.TwoDigits(oh.startHour) + ":" + Utils.TwoDigits(oh.startMinutes);
})).SetClass("oh-timerange-label")
2020-10-04 01:04:46 +02:00
2020-10-08 19:03:00 +02:00
this._endTime = new VariableUiElement(oh.map(oh => {
return Utils.TwoDigits(oh.endHour) + ":" + Utils.TwoDigits(oh.endMinutes);
})).SetClass("oh-timerange-label")
2020-10-04 01:04:46 +02:00
}
2020-10-04 01:04:46 +02:00
InnerRender(): string {
2020-10-04 01:04:46 +02:00
const oh = this._oh.data;
if (oh === undefined) {
return "";
}
const height = this.getHeight();
2020-10-08 19:03:00 +02:00
let content = [this._deleteRange]
if (height > 2) {
content = [this._startTime, this._deleteRange, this._endTime];
}
return new Combine(content)
.SetClass("oh-timerange-inner")
2020-10-04 01:04:46 +02:00
.Render();
}
2020-10-04 01:04:46 +02:00
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;
}
2020-10-08 19:03:00 +02:00
// 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";
2020-10-04 01:04:46 +02:00
}
}