Reservationer/application/scripts/confirm_action.js

export class confirm_action {
    #node;
    #action;

    constructor() {
        this.#node = null;
        this.#action = true;
    }

    get _description() {
        throw new TypeError("It must be overwriten.");
    }

    get _title() {
        return "You must confirm it.";
    }

    _action() {
        throw new TypeError("It must be overwriten.");
    }

    show() {
        if (this.#node !== null) {
            return;
        }

        this.#action = true;
        this.#node = this.#create_window();
        document.querySelector("body").appendChild(this.#node);

        setTimeout(() => {
            this.#node.style.opacity = "1";
        }, 100);
    }

    hide() {
        if (this.#node === null) {
            return;
        }

        this.#action = false;
        this.#node.style.opacity = "0";
        
        setTimeout(() => {
            if (this.#node === null) {
                return;
            }

            this.#node.remove();
            this.#node = null;
        }, 500);
    }

    #create_window() {
        const container = document.createElement("div");
        container.classList.add("confirm-window");
        container.style.transition = "opacity 0.5s";
        container.style.opacity = "0";

        const center = document.createElement("div");
        center.classList.add("center");
        container.appendChild(center);

        const title = document.createElement("div");
        title.classList.add("title");
        center.appendChild(title);

        const title_text = document.createElement("h3");
        title_text.innerText = this._title;
        title.appendChild(title_text);

        const description = document.createElement("div");
        description.classList.add("description");
        center.appendChild(description);

        const description_text = document.createElement("p");
        description_text.innerText = this._description;
        description.appendChild(description_text);

        const buttons = document.createElement("div");
        buttons.classList.add("buttons");
        center.appendChild(buttons);

        const cancel_button = document.createElement("button");
        cancel_button.classList.add("cancel");
        cancel_button.classList.add("material-icons");
        cancel_button.innerText = "clear";
        buttons.appendChild(cancel_button);

        const confirm_button = document.createElement("button");
        confirm_button.classList.add("confirm");
        confirm_button.classList.add("material-icons");
        confirm_button.innerText = "send";
        buttons.appendChild(confirm_button);

        cancel_button.addEventListener("click", () => {
            this.hide();
        });

        confirm_button.addEventListener("click", () => {
            if (this.#action === false) {
                return;
            }

            this._action();
            this.hide();
        });

        return container;
    }
}