Reservationer/application/scripts/product_editor.js

import { formscreen } from "./formscreen.js";
import { edit_request } from "./edit_request.js";
import { searcher } from "./searcher.js";
import { edit_image_request } from "./edit_image_request.js";

export class product_editor extends formscreen {
    #target;
    #name;
    #description;
    #author;
    #barcode;
    #stock_count;
    #image;

    constructor(target) {
        super();
        
        this.#target = target;
    }

    get target() {
        return this.#target;
    }

    get _name() {
        return "Product editor";
    }

    _build_form() {
         this.#name = this._create_input(
            "name", 
            "Name:", 
            "Sample...",
            (input) => {
                input.value = this.#target.name;
            }
        );

        this.#description = this._create_input(
            "description",
            "Description:",
            "This is sample product...",
            (input) => {
                input.value = this.#target.description;
            }
        );

        this.#author = this._create_input(
            "author",
            "Author:",
            "Jack Black",
            (input) => {
                input.value = this.#target.author;
            }
        );

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

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

        this._create_input(
            "image",
            "Change product image:",
            "",
            (input) => {
                this.#image = input;
                input.type = "file";
                input.accept = "image/*";
            }
        );
    }

    async #code_image() {
        if (this.#image.files.length === 0) {
            return null;
        }

        const file = this.#image.files.item(0);
        const buffer = await file.arrayBuffer();
        const list = new Uint8Array(buffer);

        let content = new String();

        list.forEach((code) => {
            content += String.fromCharCode(code);
        });

        return btoa(content);
    }

    async #submit() {
        const copy = this.#target.copy();
        copy.name = this.#name();
        copy.description = this.#description();
        copy.author = this.#author();
        copy.barcode = this.#barcode();
        copy.stock_count = this.#stock_count();
        
        const request = new edit_request(this.#target, copy);
        const response = await request.connect();

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

        this.#target = copy;
    }   

    async #image_submit() {
        const image = await this.#code_image();

        if (image === null) {
            return;
        }

        const request = new edit_image_request(this.#target, image);
        const response = await request.connect();

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

    async _process() {
        try {
            this._info = "Uploading...";
            await this.#submit();
            this._info = "Processing image...";
            await this.#image_submit();
            this._success = "Updated success!";

            searcher.reload();

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