Reservationer/application/scripts/product_containers.js

import { product } from "./product.js";
import { product_container } from "./product_container.js";

export class product_containers {
    #content;
    #where;
    #inserted;
    #counter;
    #count;
    #next_button;
    #previous_button;

    constructor(where) {
        this.#counter = 0;
        this.#count = 24;
        
        this.#content = new Array();
        this.#inserted = new Array();

        this.#where = document.createElement("div");
        this.#where.classList.add("products-list");
        
        this.#next_button = document.createElement("input");
        this.#next_button.type = "button";
        this.#next_button.value = _("show-next");

        this.#previous_button = document.createElement("input");
        this.#previous_button.type = "button";
        this.#previous_button.value = _("show-previous");

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

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

        where.appendChild(this.#previous_button);
        where.appendChild(this.#where);
        where.appendChild(this.#next_button);
    }   
    
    add_list(target) {
        target.forEach(count => {
            this.add(count);
        });

        return this;
    }

    add(target) {
        const current = new product_container(target);
        this.#content.push(current);

        return this;
    }

    clean() {
        this.#counter = 0;
        this.#content = new Array();

        return this;
    }

    #update_buttons() {
        if (this.previous_avairable) {
            this.#previous_button.style.opacity = "1";
        } else {
            this.#previous_button.style.opacity = "0";
        }

        if (this.next_avairable) {
            this.#next_button.style.opacity = "1";
        } else {
            this.#next_button.style.opacity = "0";
        }
    }

    update() {
        this.#update_buttons();
        this.#hide();

        setTimeout(() => {
            const first = this.#counter;
            const last = this.#counter + this.#count;
            const current = this.#content.slice(first, last);
            
            current.forEach(count => { 
                this.#show_sigle(count); 
            });
        }, 500);

        return this;
    }

    get next_avairable() {
        return (this.#counter + this.#count) <= this.#content.length;
    }

    get previous_avairable() {
        return this.#counter >= this.#count;
    }

    #next() {
        if (!this.next_avairable) return;

        this.#counter += this.#count;
        this.update();
    }

    #previous() {
        if (!this.previous_avairable) return;

        this.#counter -= this.#count;
        this.#counter = this.#counter < 0 ? 0 : this.#counter;

        this.update();
    }

    #show_sigle(target) {
        this.#inserted.push(target);
        target.add(this.#where);
    }

    #hide() {
        this.#inserted.forEach(count => {
            count.drop();
        });

        this.#inserted = new Array();

        return this;
    }
}