Reservationer/application/scripts/product_container.js

import { product } from "./product.js";
import { product_fullscreen } from "./product_fullscreen.js";
import { login_manager } from "./login_manager.js";
import { delete_product_window } from "./delete_product_window.js";
import { product_editor } from "./product_editor.js";
import { product_rent } from "./product_rent.js";
import { product_give_back } from "./product_give_back.js";

export class product_container {
    #target;
    #node;
    #login;

    constructor(target) {
        this.#target = new product(target.dump);
        this.#node = null;
        this.#login = new login_manager().logged_in; 
    }

    get #header() {
        const header = document.createElement("div");
        header.classList.add("header");

        const title = document.createElement("h3");
        title.innerText = this.#target.name;
        header.appendChild(title);

        if (this.#login) {
            header.appendChild(this.#manage);
        }   

        return header;
    }   

    get #manage() {
        const manage = document.createElement("div");
        manage.classList.add("manage");

        const all_rents_button = document.createElement("button");
        all_rents_button.classList.add("material-icons");
        all_rents_button.classList.add("all-rents-button");
        all_rents_button.innerText = "list";
        manage.appendChild(all_rents_button);

        const rent_button = document.createElement("button");
        rent_button.classList.add("material-icons");
        rent_button.classList.add("rent-button");
        rent_button.innerText = "backpack";
        manage.appendChild(rent_button);

        const give_back_button = document.createElement("button");
        give_back_button.classList.add("material-icons");
        give_back_button.classList.add("give-back-button");
        give_back_button.innerText = "save_alt";
        manage.appendChild(give_back_button);

        const edit_button = document.createElement("button");
        edit_button.classList.add("material-icons");
        edit_button.classList.add("edit-button");
        edit_button.innerText = "edit";
        manage.appendChild(edit_button);

        const delete_button = document.createElement("button");
        delete_button.classList.add("material-icons");
        delete_button.classList.add("delete-button");
        delete_button.innerText = "remove_circle_outline";
        manage.appendChild(delete_button);

        all_rents_button.addEventListener("click", () => {
            new product_all_rents(this.#target).show();
        });

        rent_button.addEventListener("click", () => {
            new product_rent(this.#target).show();
        });

        give_back_button.addEventListener("click", () => {
            new product_give_back(this.#target).show();
        });

        edit_button.addEventListener("click", () => {
            new product_editor(this.#target).show();
        });

        delete_button.addEventListener("click", () => {
            new delete_product_window(this.#target).show();
        });

        return manage;
    }

    get #description() {
        const container = document.createElement("div");
        container.classList.add("description");

        const description = document.createElement("p");
        description.innerText = this.#target.description;
        description.classList.add("content");

        const author_container = document.createElement("div");
        author_container.classList.add("author");

        const author = document.createElement("span");
        author.innerText = this.#target.author;

        const author_icon = document.createElement("span");
        author_icon.classList.add("material-icons");
        author_icon.innerText = "attribution";

        author_container.appendChild(author_icon);
        author_container.appendChild(author);

        const stock_count = document.createElement("p");
        stock_count.classList.add("stock-count");
        stock_count.classList.add("material-icons");

        if (this.#target.on_stock > 0) {
            stock_count.innerText = "check_circle";
            stock_count.classList.add("avairable");
        } else {
            stock_count.innerText = "cancel";
            stock_count.classList.add("unavairable");
        }

        const barcode_container = document.createElement("p");
        barcode_container.classList.add("barcode");

        const barcode = document.createElement("span");
        barcode.innerText = this.#target.barcode;
        barcode.classList.add("numbers");

        const barcode_icon = document.createElement("span");
        barcode_icon.classList.add("material-icons");
        barcode_icon.innerText = "qr_code_scanner";

        barcode_container.appendChild(barcode_icon);
        barcode_container.appendChild(barcode);

        container.appendChild(description);
        container.appendChild(author_container);
        container.appendChild(barcode_container);
        container.appendChild(stock_count);

        return container;
    }

    get #cache_bypass() {
        return "?cache=" + new String(Math.floor(Math.random() * 100));
    }

    get #image() {
        const image = document.createElement("img");
        image.classList.add("image");
        image.src = this.#target.thumbnail + this.#cache_bypass;
        image.alt = this.#target.name;

        image.addEventListener("click", () => {
            new product_fullscreen(this.#target).show();
        });

        return image;
    }   

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

        const bottom_container = document.createElement("div");
        bottom_container.classList.add("bottom-container");
        bottom_container.appendChild(this.#description);
        bottom_container.appendChild(this.#image);

        const container = document.createElement("div");
        container.classList.add("product");
        container.appendChild(this.#header);
        container.appendChild(bottom_container);

        return this.#node = container;
    }

    add(target) {
        const node = this.node;

        node.style.opacity = "0";
        node.style.transition = "opacity 0.5s";
        
        target.appendChild(node);

        setTimeout(() => {
            node.style.opacity = "1";
        }, 50);
    }

    drop() {
        const container = this.#node;

        if (container === null) {
            throw new TypeError("It is not showed yet.");
        }

        container.style.opacity = "1";
        container.style.transition = "opacity 0.5s";

        setTimeout(() => {
            container.style.opacity = "0";
        }, 50);

        setTimeout(() => {
            this.#node = null;
            container.remove();
        }, 550);
    }
}