Reservationer/application/scripts/formscreen.js

import { fullscreen } from "./fullscreen.js";

export class formscreen extends fullscreen {
    #form;
    #result;

    constructor() {
        super();

        this.#form = null;
        this.#result = null;
    }

    get _name() {
        throw new TypeError("This is virtual getter!");
    }

    _process() {
        this._error = "This is abstract, and must be overwriten.";
    }

    _build_form() {
        throw new TypeError("This is virtual method!");
    }
    
    _get_input(name) {
        return this.get_query("input[name=\"" + name + "\"]");
    }

    get _has_submit() {
        return true;
    }

    _build_node() {
        const center = document.createElement("div");
        center.classList.add("center");

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

        const title_content = document.createElement("h3");
        title_content.innerText = this._name;
        title.appendChild(title_content);

        const form = document.createElement("form");
        center.appendChild(form);

        form.addEventListener("change", () => {
            this._clear_results();
        });

        this.#form = document.createElement("div");
        this.#form.classList.add("content");
        form.appendChild(this.#form);

        this.#result = document.createElement("div");
        this.#result.classList.add("result");
        form.appendChild(this.#result);
    
        const bottom = document.createElement("div");
        bottom.classList.add("bottom");
        form.appendChild(bottom);

        const close_button = document.createElement("button");
        close_button.classList.add("close");
        close_button.classList.add("material-icons");
        close_button.innerText = "close";
        close_button.type = "button";
        bottom.appendChild(close_button);
      
        if (this._has_submit) {
            const send_button = document.createElement("button");
            send_button.classList.add("send");
            send_button.classList.add("material-icons");
            send_button.innerText = "send";
            send_button.type = "submit";
            bottom.appendChild(send_button);
        }

        close_button.addEventListener("click", () => {
            this.hide();
        });
 
        form.addEventListener("submit", (target) => {
            target.preventDefault();

            this._process();
        });

        this._refresh();
        
        return center;
    }

    _refresh() {
        while (this.#form.lastChild) {
            this.#form.lastChild.remove();
        }

        this._build_form();
    }

    _create_input(name, label_text, placeholder, worker = null) {
        const container = document.createElement("div");
        container.classList.add("input-container");
        container.classList.add("input-" + name);

        const label = document.createElement("label");
        label.htmlFor = name;
        label.innerText = label_text;
        container.appendChild(label);

        const input = document.createElement("input");
        input.type = "text";
        input.placeholder = placeholder;
        input.name = name;
        input.id = name;
        container.appendChild(input);

        if (worker !== null) {
            worker(input);
        }

        if (!this.#form) {
            throw new Error("Screen is not visible yet!");
        }

        this._append_child(container);

        return (target = null) => {
            if (target !== null) {
                input.value = target;
            }

            return input.value;
        };
    }

    _append_child(target) {
        this.#form.appendChild(target);
    }

    _clear_results() {
        if (!this.#result) {
            return;
        }

        while (this.#result.lastChild) {
            this.#result.lastChild.remove();
        }
    }
    
    set _info(target) {
        this._clear_results();

        const info = document.createElement("p");
        info.classList.add("info");
        info.innerText = target;
        
        if (this.#result) {
            this.#result.appendChild(info);
        }
    }
    
    set _error(target) {
        this._clear_results();

        const info = document.createElement("p");
        info.classList.add("error");
        info.innerText = target;
        
        if (this.#result) {
            this.#result.appendChild(info);
        }
    }

    set _success(target) {
        this._clear_results();

        const info = document.createElement("p");
        info.classList.add("success");
        info.innerText = target;
       
        if (this.#result) {
            this.#result.appendChild(info);
        }
    }
}