Reservationer/application/scripts/product_adder.js

import { formscreen } from "./formscreen.js";
import { create_request } from "./create_request.js";
import { bool_response } from "./bool_response.js";
import { product_base } from "./product_base.js";
import { searcher } from "./searcher.js";
import { autocomplete_request } from "./autocomplete_request.js";
import { autocomplete_response } from "./autocomplete_response.js";
import { product_give_back } from "./product_give_back.js";

export class product_adder extends formscreen {
    #name;
    #description;
    #author;
    #barcode;
    #stock_count;
    #image;
    #loaded_image_type;
    #loaded_image;
    #image_preview;

    get _name() {
        return "Add product";
    }

    async #autocomplete() {
        const barcode = this.#barcode();

        if (barcode.length === 0) {
            this._info = "Fill barcode first.";
            return;
        }
        
        this._info = "Searching in the web..."

        try {
            const request = new autocomplete_request(barcode);
            const response = await request.connect();

            if (!response.result) {
                throw new Error(response.cause);
            }
            
            const product = response.found;

            this.#name(product.title);
            this.#description(product.description);
            this.#author(product.author);
            this.#barcode(product.barcode);
            this.#loaded_image = product.image;
            this.#loaded_image_type = product.image_type;
            
            this.#update_image_preview();
            
            this._info = "Ready. Check results.";
        } catch (error) {
            this._error = new String(error);
        }
    }

    #update_image_preview() {
        this.#image_preview.src = (
            "data:" 
            + this.#loaded_image_type 
            + ";base64,"
            + this.#loaded_image
        );
        this.#image_preview.style.opacity = "1";
    }

    get #autocomplete_button() {
        const button = document.createElement("div");
        button.classList.add("autocomplete-button");
        button.classList.add("button");

        const icon = document.createElement("span");
        icon.classList.add("material-icons")
        icon.innerText = "auto_fix_normal";
        button.appendChild(icon);

        const text = document.createElement("span");
        text.classList.add("text");
        text.innerText = "Autocomplete";
        button.appendChild(text);

        return button;
    }

    _build_form() {
        this.#loaded_image = null;
        this.#loaded_image_type = null;

        this.#name = this._create_input(
            "name", 
            "Name:", 
            "Sample..."
        );

        this.#description = this._create_input(
            "description",
            "Description:",
            "This is sample product..."
        );

        this.#author = this._create_input(
            "author",
            "Author:",
            "Jack Black"
        );

        this.#barcode = this._create_input(
            "barcode",
            "Barcode (EAN):",
            "123456789012...",
            (input) => { input.type = "number"; }
        );

        this.#stock_count = this._create_input(
            "stock_count",
            "Stock count:",
            "10...",
            (input) => { input.type = "number"; }
        );

        this._create_input(
            "image",
            "Product image:",
            "",
            (input) => {
                this.#image = input;
                input.type = "file";
                input.accept = "image/*";
                
                input.addEventListener("change", () => {
                    this.#load_image_from_file();
                });
            }
        );

        this.#image_preview = document.createElement("img");
        this.#image_preview.style.opacity = "0";
        this._append_child(this.#image_preview);

        const autocomplete = this.#autocomplete_button;
        this._append_child(autocomplete);

        autocomplete.addEventListener("click", () => {
            this.#autocomplete();
        });
    }

    #reset_image() {
        this.#loaded_image = null;
        this.#loaded_image_type = null;
        this.#image_preview.style.opacity = "0";
        this.#image_preview.src = "";
    }

    async #load_image_from_file() {
        if (this.#image.files.length === 0) {
            this.#reset_image();
        }

        const file = this.#image.files.item(0);
        const buffer = await file.arrayBuffer();
        let as_string = new String();

        new Uint8Array(buffer).forEach(letter => {
            as_string += String.fromCharCode(letter);
        });

        this.#loaded_image = btoa(as_string);
        this.#loaded_image_type = file.type;
        this.#update_image_preview();
    }

    get #ready_image() {
        if (this.#loaded_image === null) {
            throw new Error("Loady any image first.");
        }

        return this.#loaded_image;
    }

    async #submit() {
        const product = new product_base();
        product.name = this.#name();
        product.description = this.#description();
        product.author = this.#author();
        product.stock_count = this.#stock_count();
        product.barcode = this.#barcode();

        const request = new create_request(product, this.#ready_image);
        const response = await request.connect();

        if (!response.result) {
            throw new Error(response.cause);
        }
    }

    async _process() {
        try {
            this._info = "Uploading...";
            await this.#submit();
            this._success = "Created success!";
        
            searcher.reload();

            setTimeout(() => {
                this.hide();
            }, 500);
        } catch (error) {
            this._error = new String(error);
        }
    }
}