tiles.js

"use strict";

var ddata = null;
let cmddata = null; // devices in control panel
let lg = null;
let seldev=[];
let borderDevice=null;
let mks = null;
let goview = false;
let gotown = false;
let godevice = false;
let gostreet = false;
let selection = null;
let freeze = false;

const storagekey = "tiles"+window.location.pathname;

$(async function() {


    if( get['device']!==undefined ) {
        godevice = get['device'];
        borderDevice = get['device'];
    }

    selection = new SelectionArea({

        // Class for the selection-area
        class: 'selection',

        // All elements in this container can be selected
        selectables: ['.box-wrap > div.dropdown'],

        // The container is also the boundary in this case
        boundaries: ['#fsdiv'],
    }).on('beforestart', ({store, event}) => {
        if (!event.ctrlKey && !event.metaKey && !event.shiftKey && !event.altKey)
            return false;
    }).on('start', ({store, event}) => {
        freeze = true;
        // Remove class if the user isn't pressing the control key or ⌘ key
        if (!event.ctrlKey && !event.metaKey) {

            // Unselect all elements
            for (const el of store.stored) {
                el.classList.remove('selected');
            }

            // Clear previous selection
            selection.clearSelection();
        }
    }).on('move', ({store: {changed: {added, removed}}}) => {
        // Add a custom class to the elements that where selected.
        for (const el of added) {
            el.classList.add('selected');
    }

    // Remove the class from elements that where removed
    // since the last selection
    for (const el of removed) {
        el.classList.remove('selected');
    }
    }).on('stop', () => {
        selection.keepSelection();
        let ssd = selection.getSelection();
        seldev = ssd.map( e => e.id.substr(2) );
        freeze = false;
        selection_fire(true);
    });
});

function tiles() {
    let html="";
    let i = 0, type = 0;
    for(let dev of ddata.rows) {
        i++;
        let icon = devicon(dev);
        let cls = dev.Type == 1 ? 'icon-box' : 'icon-lamp';
        let div = `
        <div class="dropdown ${i>500?'cva':''}" id="d_${dev.id}">
            <div data-toggle="dropdown" data-boundary="viewport" id="btn_${dev.id}">
                <img loading:"eager" src="${icon}" class="${cls}"><p>${dev.CustomNum||''}</p>
            </div>

            <div class="dropdown-menu" aria-labelledby="btn_${dev.id}" ></div>
        </div>
        `;

        if(type == 1 && dev.Type == 2)
            html += '<div class="break"></div>';

        html +=div;
        type = dev.Type;
    }

    $('.boxes div.dropdown').tooltip('hide');
    selection.clearSelection();
    //$("#tiles").html(html);
    document.getElementById("tiles").innerHTML = html;

    for(let sd of seldev) {
        if(ddata.map[sd] !== undefined)
            selection.select("#d_"+sd);
    }
    selection.keepSelection();

    //$('.boxes div.dropdown').dropdown();

    $('.boxes div.dropdown').tooltip({
        html: true,
        delay: { "show": 500, "hide": 0 },
        title: function() {
            let ind = ddata.map[this.id.substr(2)];
            let dev = ddata.rows[ind];

            return `${dev.sn?HtmlEncode(dev.sn)+"</br>":""}${HtmlEncode(dev.Name)}<br>${HtmlEncode(dev.Location)}`
        }
    });

    $('.boxes div.dropdown-menu').parent().on('show.bs.dropdown', function () {
        $(this).css("content-visibility", "visible");
        let mnu = $(this).find(".dropdown-menu")[0];
        let id = ($(mnu).attr("aria-labelledby")).substr(4);
        $(mnu).html(deviceContextMenu(id));
    });
}

async function renew() {

    let nextt = 500;

    let isnew = false;
    if(!freeze)
        isnew = await dataload();
    if(isnew) {
        if(godevice) {
            goDevice(godevice);
        }
        tiles();
        goview = false;
        gotown = false;
        gostreet = false;
        godevice = false;
        nextt = 1500;
    }
    if(seldev.length > 0)
        nextt = 3000;

    setTimeout(renew, nextt);
}

function goDevice(id, border=false, fire=false) {
    let el = document.getElementById("d_"+id);
    window.scrollTo(0,0);
    let topPos = el.offsetTop;
    let tof = topPos -$(".sidebar-item").height() - $(".sidebar-item").offset().top - 20;

    window.scrollTo(0, tof);
    if(border) {
        $(".boxes div.dropdown").removeClass("fborder");
        $(el).addClass("fborder");
    }

    if(fire) {
        $(el).addClass("shadowpulse");
        $(el).on('animationend',()=>$(el).removeClass("shadowpulse"));
    }

}


let loadfail=0;
async function dataload() {
    let url = environment.base_url+"/"+"?do=api&fn=states&order";
    let flt=$.param(makeflt());
    if(flt!=="")
        url+="&"+flt;
    let result, ret=false;
    try {
        result = await $.ajax({
            url: url,
            type: 'GET',
            dataType: "json",
        });
    } catch (error) {
        console.log("Error: ",error);
        if(error.status == 401) //unautorized
            window.location=environment.base_url+"/"+"?do=login&b="+encodeURIComponent(window.location);

        loadfail++;
        if(ddata === null)
            $("#content").html("<h2>Data was not loaded</h2>");
        else if(loadfail>1) {
            hulla.send(i18next.t("No connection to the server"));
            loadfail = 0;
        }
        return ret;
    }
    loadfail=0;
    if(ddata==null || ddata.timestamp != result.timestamp) {
        ddata = result;
        ret = true;
    }

    return ret;
}


function cmdclear() {
    $("#devlist").html("");
    seldev = [];
    cmddata = null;
    $(".boxes div.dropdown").removeClass("selected");
    selection.clearSelection();
    cmdpanel();
}

let doMgtStatus = true;
function cmdpanel() {
    if(seldev.length == 0 && !editmode)
        $("#allfilter").removeClass("d-none");
    else
        $("#allfilter").addClass("d-none");


    if(seldev.length == 0) {
        $("#mapcmd").addClass("d-none");
        $("#formedit").removeClass("d-none");
        doMgtStatus = false;
    }
    else {
        $("#mapcmd").removeClass("d-none");
        $("#formedit").addClass("d-none");
        doMgtStatus = true;
        mgtStatus(true);
    }
}

async function mgtStatus(force=false) {
    if(seldev.length == 0)
        return;

    if(mgtStatus.cnt === undefined)
        mgtStatus.cnt = 0;

    let headers = {};
    if(mgtStatus.cnt++ > 20 || force) {
        mgtStatus.cnt = 0;
        headers = {"Cache-Control": "No-Cache"};
    }
    let url = environment.base_url+"/"+"?do=api&fn=mgtstates&devices="+seldev.join(",");
    let result;
    try {
        result = await $.ajax({
            url: url,
            type: 'GET',
            dataType: "json",
            headers: headers,
        });
    } catch (error) {
        console.log("Error: ",error);
    }
    let nextt = 550;
    if(cmddata == null || cmddata.last.timestamp !== result.last.timestamp) {
        cmddata = result;
        nextt = 1000;
        $(".devctrl").removeClass("queued");
        for(let id of seldev) {
            let textcolor = "black", title="";

            let queue = cmddata.queue.rows.find(x=>x.Devices_id == id);
            if(queue) {
                $(`#ctrl_${id}`).addClass("queued");
                title += i18next.t("Queued up") + ": " + i18next.t(queue.Name);
            }

            let last = cmddata.last.rows.find(x=>x.Devices_id == id);
            if(last) {
                textcolor = last.success?"green":"red";
                let date = new Date(last.cmdtime * 1000);
                if(title)
                    title += "<br>";

                title += moment(date).format("LT");
                title += " " + i18next.t(last.Name) + " - " + i18next.t(last.success?"Success":"Fail");

            }
            $(`#ctrl_${id}`).css('color', textcolor);
            $(`#ctrl_${id}`).attr('data-original-title', title);
            //$(`#ctrl_${id}`).attr('title', title).tooltip('update');

        }
        $(".devctrl").tooltip({container:'#mapcmd'});
    }
    if(doMgtStatus)
        setTimeout(mgtStatus, nextt);
}


function findDevice() {
    let ss = $("#findStr").val().trim().toUpperCase();

    if(ss) {
        let fr = ddata.rows.find(x => (x.CustomNum||"").toUpperCase() == ss || (x.sn||"").toUpperCase() == ss);
        fr = fr || ddata.rows.find(x => (x.Name||"").toUpperCase().includes(ss));

        if(fr) {
            $(".cli").removeClass("clisel");
            goDevice(fr.id, true, true);
            borderDevice = fr.id;
        }
    }

    return false;
}