mapcomplete/UI/OpeningHours/OpeningHoursInput.ts

/**
 * The full opening hours element, including the table, opening hours picker.
 * Keeps track of unparsed rules
 * Exports everything conventiently as a string, for direct use
 */
import OpeningHoursPicker from "./OpeningHoursPicker";
import {Store, UIEventSource} from "../../Logic/UIEventSource";
import {VariableUiElement} from "../Base/VariableUIElement";
import Combine from "../Base/Combine";
import {FixedUiElement} from "../Base/FixedUiElement";
import {OH, OpeningHour} from "./OpeningHours";
import {InputElement} from "../Input/InputElement";
import PublicHolidayInput from "./PublicHolidayInput";
import Translations from "../i18n/Translations";
import BaseUIElement from "../BaseUIElement";


export default class OpeningHoursInput extends InputElement<string> {


    public readonly IsSelected: UIEventSource<boolean> = new UIEventSource<boolean>(false);
    private readonly _value: UIEventSource<string>;
    private readonly _element: BaseUIElement;

    constructor(value: UIEventSource<string> = new UIEventSource<string>(""), prefix = "", postfix = "") {
        super();
        this._value = value;
        let valueWithoutPrefix = value
        if (prefix !== "" && postfix !== "") {
            valueWithoutPrefix = value.sync(str => {
                if (str === undefined) {
                    return undefined;
                }
                if (str === "") {
                    return ""
                }
                if (str.startsWith(prefix) && str.endsWith(postfix)) {
                    return str.substring(prefix.length, str.length - postfix.length)
                }
                return str
            }, [], 
                    noPrefix => {
                if (noPrefix === undefined) {
                    return undefined;
                }
                if (noPrefix === "") {
                    return ""
                }
                if (noPrefix.startsWith(prefix) && noPrefix.endsWith(postfix)) {
                    return noPrefix
                }

                return prefix + noPrefix + postfix
            })
        }

        const leftoverRules: Store<string[]> = valueWithoutPrefix.map(str => {
            if (str === undefined) {
                return []
            }
            const leftOvers: string[] = [];
            const rules = str.split(";");
            for (const rule of rules) {
                if (OH.ParseRule(rule) !== null) {
                    continue;
                }
                if (OH.ParsePHRule(rule) !== null) {
                    continue;
                }
                leftOvers.push(rule);
            }
            return leftOvers;
        })
       
        let ph = "";
        const rules = valueWithoutPrefix.data?.split(";") ?? [];
        for (const rule of rules) {
            if (OH.ParsePHRule(rule) !== null) {
                ph = rule;
                break;
            }
        }
        const phSelector = new PublicHolidayInput(new UIEventSource<string>(ph));
        
        
        // Note: MUST be bound AFTER the leftover rules!
        const rulesFromOhPicker: UIEventSource<OpeningHour[]> = valueWithoutPrefix.sync(str => {
            return OH.Parse(str);
        }, [leftoverRules, phSelector.GetValue()], (rules, oldString) => {
            // We always add a ';', to easily add new rules. We remove the ';' again at the end of the function
            // Important: spaces are _not_ allowed after a ';' as it'll destabilize the parsing!
            let str = OH.ToString(rules) + ";"
            const ph = phSelector.GetValue().data;
            if(ph){
               str += ph + ";"
            }
            
            str += leftoverRules.data.join(";") + ";"
            
            str = str.trim()
            if(str.endsWith(";")){
                str = str.substring(0, str.length - 1)
            }
            if(str.startsWith(";")){
                str = str.substring(1)
            }
            str.trim()
            
            if(str === oldString){
                return oldString; // We pass a reference to the old string to stabilize the EventSource
            }
            return str;
        });


        const leftoverWarning = new VariableUiElement(leftoverRules.map((leftovers: string[]) => {

            if (leftovers.length == 0) {
                return "";
            }
            return new Combine([
                Translations.t.general.opening_hours.not_all_rules_parsed,
                new FixedUiElement(leftovers.map(r => `${r}<br/>`).join("")).SetClass("subtle")
            ]);

        }))

        const ohPicker = new OpeningHoursPicker(rulesFromOhPicker);

        this._element = new Combine([
            leftoverWarning,
            ohPicker,
            phSelector
        ])
    }

    GetValue(): UIEventSource<string> {
        return this._value;
    }

    IsValid(t: string): boolean {
        return true;
    }

    protected InnerConstructElement(): HTMLElement {
        return this._element.ConstructElement()
    }

}