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)).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));
    }


}