luci.js

"use strict";
import Antifurto from "./antifurto.js";
import Scenari from "./scenari.js";
import { luciToggleListener } from "./toggles.js";
import { showAlert, makeElementBounce } from "./alerts.js";

const luceTemplate = {
    "luogo": "",
    "stato": 0,
    "id": ""
};

class Luci {
    static luciContainer;
    static luciBucket = [];
    static index = 0;

    constructor() {
        Luci.luciContainer = document.getElementById('luciContainer');
        Luci.init();
        Luci.modalListener();
    }

    static modalListener() {
        const select = document.getElementById('luogoLuce');
        const altroInput = document.getElementById('nuovaStanzaDIV');
        const altroClassList = altroInput.classList;
        const form = document.getElementById('search-form');
        const inputField = altroInput.querySelector('input');

        // show or hide the text input for the new room
        select.addEventListener('change', event => {
            event.preventDefault();
            const selected = event.target.value;

            if (selected === "altro") {
                altroClassList.remove('invisible');
                // set altroInput to required
                inputField.setAttribute('required', 'required');
            } else {
                altroClassList.add('invisible');
                // remove required from altroInput
                inputField.removeAttribute('required');
            }
        }, false);

        form.addEventListener('submit', event => {
            event.preventDefault();

            const selectedValue = select.value;
            if (selectedValue === "unselected") {
                alert("Selezionare una stanza nel menu a tendina.");
                return;
            }
            var stanza = select.options[select.selectedIndex].text.trim(); // get selected option text

            if (selectedValue === "altro") {
                const nuovaStanza = altroInput.querySelector('#nuovaStanza').value.trim();
                if (nuovaStanza == null || nuovaStanza == "" || nuovaStanza.toLowerCase() === "altro") {
                    alert("Inserire un nome valido per la stanza.");
                    return;
                }
                for (const stanza of Luci.luciBucket)
                    if (stanza.luogo === nuovaStanza) {
                        alert("Stanza già esistente");
                        return;
                    }
                stanza = nuovaStanza;
                // reset the select
                Luci.selectReset();
            }
            stanza = stanza[0].toUpperCase() + stanza.substring(1, stanza.length);
            // TODO server send stanza

            // add stanza to table
            const luceJSON = Luci.createLight(stanza, false);
            Luci.showNewLight(luceJSON);

            // close modal
            const closeBtn = document.querySelector('#luci-modal .btn.btn-secondary');
            closeBtn.click();
        }, false);
    }

    static init() {
        Luci.fillTable();

        const luciBtn = document.getElementById('mainButtonContainer').children[0];
        luciBtn.addEventListener('click', () => {
            Luci.toggleContainer(true);
            Scenari.toggleContainer(false);
            Antifurto.toggleContainer(false);
        }, false);

        // listen for the closing modal
        const cancelBtn = document.querySelector('#luci-modal .btn.btn-secondary');
        cancelBtn.addEventListener('click', () => {
            // delay 0.5s to allow the modal to close (otherwise it's not pretty)
            setTimeout(() => {
                Luci.selectReset();
            }, 500);
        }, false);
    }

    static fillTable() {
        // TODO server get all lights
        const luci = [];
        // for each, add to table and to luciBucket
        for (const luce of luci) {
            Luci.showNewLight(luce);
        }
    }

    // toggle the visibility of the luci container
    static toggleContainer(visible) {
        if (visible) {
            Luci.luciContainer.classList.remove('invisible');
            if (Luci.luciBucket.length === 0) {
                // make the + button bounce
                const plusBtn = document.querySelector('.fa-circle-plus');
                makeElementBounce(plusBtn);
            }
        } else {
            Luci.luciContainer.classList.add('invisible');
        }
    }

    static createLight(name, status) {
        const luce = Object.assign({}, luceTemplate);
        luce.luogo = name;
        luce.stato = status ? 1 : 0;
        luce.id = `luce-${Luci.index}`;
        Luci.luciBucket.push(luce);
        Luci.index++;
        return luce;
    }

    static showNewLight(luceJSON) {
        const luce = luceJSON.id == null ? Luci.createLight({ luceJSON }) : luceJSON;
        const table = document.getElementById('table-row-luci');
        const row = document.createElement('tr');
        row.innerHTML = `
        <th scope="row" id="${luce.id}">${luce.luogo}</th>
        <td>
            <div class="switch-container no-box-sizing">
                <div class="toggle-button no-box-sizing ${luce.stato === 1 ? 'active' : ''}">
                    <div class="inner-circle no-box-sizing" />
                </div>
            </div>
        </td>`;
        const lastRow = table.lastElementChild;
        table.insertBefore(row, lastRow);
        // add listener for switch
        const toggle = row.querySelector('.toggle-button');
        luciToggleListener(toggle,luce);
        // remove options from the select
        const select = document.getElementById('luogoLuce');
        const options = select.options;
        const luogoLowercase = luce.luogo.toLowerCase();
        for (const option of options) {
            if (option.text.toLowerCase() === luogoLowercase) {
                select.removeChild(option);
                break;
            }
        }
    }

    static selectReset() {
        const select = document.getElementById('luogoLuce');
        const altroInput = document.getElementById('nuovaStanzaDIV');
        const inputField = altroInput.querySelector('input');

        select.selectedIndex = 0;
        altroInput.classList.add('invisible');
        inputField.removeAttribute('required');
        inputField.value = "";
    }
}

export default Luci;