mapcomplete/UI/OpeningHours/OpeningHoursRange.ts

64 lines
No EOL
1.9 KiB
TypeScript

/**
* A single opening hours range, shown on top of the OH-picker table
*/
import Svg from "../../Svg";
import {Utils} from "../../Utils";
import Combine from "../Base/Combine";
import {OH, OpeningHour} from "./OpeningHours";
import BaseUIElement from "../BaseUIElement";
import {FixedUiElement} from "../Base/FixedUiElement";
export default class OpeningHoursRange extends BaseUIElement {
private _oh: OpeningHour;
private readonly _onDelete: () => void;
constructor(oh: OpeningHour, onDelete: () => void) {
super();
this._oh = oh;
this._onDelete = onDelete;
this.SetClass("oh-timerange");
}
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")
const deleteRange =
Svg.delete_icon_ui()
.SetClass("oh-delete-range")
.onClick(() => {
this._onDelete()
});
let content = [deleteRange]
if (height > 2) {
content = [startTime, deleteRange, endTime];
}
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;
let endhour = oh.endHour;
if (oh.endHour == 0 && oh.endMinutes == 0) {
endhour = 24;
}
return (endhour - oh.startHour + ((oh.endMinutes - oh.startMinutes) / 60));
}
}