mapcomplete/UI/OpeningHours/OpeningHoursRange.ts

/**
 * 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))
        const endTime = new FixedUiElement(Utils.TwoDigits(oh.endHour) + ":" + Utils.TwoDigits(oh.endMinutes))

        const deleteRange =
            Svg.delete_icon_ui()
                .SetClass("rounded-full w-6 h-6 block bg-black")
                .onClick(() => {
                    this._onDelete()
                });


        let content: BaseUIElement;
        if (height > 2) {
            content = new Combine([startTime, deleteRange, endTime]).SetClass("flex flex-col h-full").SetStyle("justify-content: space-between;");
        } else {
            content = new Combine([deleteRange]).SetClass("flex flex-col h-full").SetStyle("flex-content: center; overflow-x: unset;")
        }

        const el = new Combine([content]).ConstructElement();

        el.style.top = `${100 * OH.startTime(oh) / 24}%`
        el.style.height = `${100 * this.getHeight() / 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));
    }


}