API tools faq
paste
Advertisement
eqeqwan21

tiles.js

eqeqwan21
Jun 18th, 2025
273
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 7.69 KB | None | 0 0
raw download clone embed print report
  1. "use strict";
  2.  
  3. var ddata = null;
  4. let cmddata = null; // devices in control panel
  5. let lg = null;
  6. let seldev=[];
  7. let borderDevice=null;
  8. let mks = null;
  9. let goview = false;
  10. let gotown = false;
  11. let godevice = false;
  12. let gostreet = false;
  13. let selection = null;
  14. let freeze = false;
  15.  
  16. const storagekey = "tiles"+window.location.pathname;
  17.  
  18. $(async function() {
  19.    
  20.    
  21.     if( get['device']!==undefined ) {
  22.         godevice = get['device'];
  23.         borderDevice = get['device'];
  24.     }
  25.  
  26.     selection = new SelectionArea({
  27.  
  28.         // Class for the selection-area
  29.         class: 'selection',
  30.        
  31.         // All elements in this container can be selected
  32.         selectables: ['.box-wrap > div.dropdown'],
  33.  
  34.         // The container is also the boundary in this case
  35.         boundaries: ['#fsdiv'],
  36.     }).on('beforestart', ({store, event}) => {
  37.         if (!event.ctrlKey && !event.metaKey && !event.shiftKey && !event.altKey)
  38.             return false;
  39.     }).on('start', ({store, event}) => {
  40.         freeze = true;
  41.         // Remove class if the user isn't pressing the control key or ⌘ key
  42.         if (!event.ctrlKey && !event.metaKey) {
  43.  
  44.             // Unselect all elements
  45.             for (const el of store.stored) {
  46.                 el.classList.remove('selected');
  47.             }
  48.  
  49.             // Clear previous selection
  50.             selection.clearSelection();
  51.         }
  52.     }).on('move', ({store: {changed: {added, removed}}}) => {
  53.         // Add a custom class to the elements that where selected.
  54.         for (const el of added) {
  55.             el.classList.add('selected');
  56.     }
  57.  
  58.     // Remove the class from elements that where removed
  59.     // since the last selection
  60.     for (const el of removed) {
  61.         el.classList.remove('selected');
  62.     }
  63.     }).on('stop', () => {
  64.         selection.keepSelection();
  65.         let ssd = selection.getSelection();
  66.         seldev = ssd.map( e => e.id.substr(2) );
  67.         freeze = false;
  68.         selection_fire(true);
  69.     });
  70. });
  71.  
  72. function tiles() {
  73.     let html="";
  74.     let i = 0, type = 0;
  75.     for(let dev of ddata.rows) {
  76.         i++;
  77.         let icon = devicon(dev);
  78.         let cls = dev.Type == 1 ? 'icon-box' : 'icon-lamp';
  79.         let div = `
  80.         <div class="dropdown ${i>500?'cva':''}" id="d_${dev.id}">
  81.             <div data-toggle="dropdown" data-boundary="viewport" id="btn_${dev.id}">
  82.                 <img loading:"eager" src="${icon}" class="${cls}"><p>${dev.CustomNum||''}</p>
  83.             </div>
  84.            
  85.             <div class="dropdown-menu" aria-labelledby="btn_${dev.id}" ></div>     
  86.         </div>
  87.         `;
  88.        
  89.         if(type == 1 && dev.Type == 2)
  90.             html += '<div class="break"></div>';
  91.  
  92.         html +=div;
  93.         type = dev.Type;
  94.     }
  95.        
  96.     $('.boxes div.dropdown').tooltip('hide');
  97.     selection.clearSelection();
  98.     //$("#tiles").html(html);
  99.     document.getElementById("tiles").innerHTML = html;
  100.    
  101.     for(let sd of seldev) {
  102.         if(ddata.map[sd] !== undefined)
  103.             selection.select("#d_"+sd);
  104.     }
  105.     selection.keepSelection();
  106.  
  107.     //$('.boxes div.dropdown').dropdown();
  108.    
  109.     $('.boxes div.dropdown').tooltip({
  110.         html: true,
  111.         delay: { "show": 500, "hide": 0 },
  112.         title: function() {
  113.             let ind = ddata.map[this.id.substr(2)];
  114.             let dev = ddata.rows[ind];
  115.            
  116.             return `${dev.sn?HtmlEncode(dev.sn)+"</br>":""}${HtmlEncode(dev.Name)}<br>${HtmlEncode(dev.Location)}`
  117.         }
  118.     });
  119.    
  120.     $('.boxes div.dropdown-menu').parent().on('show.bs.dropdown', function () {
  121.         $(this).css("content-visibility", "visible");
  122.         let mnu = $(this).find(".dropdown-menu")[0];
  123.         let id = ($(mnu).attr("aria-labelledby")).substr(4);
  124.         $(mnu).html(deviceContextMenu(id));
  125.     });
  126. }
  127.  
  128. async function renew() {
  129.    
  130.     let nextt = 500;   
  131.  
  132.     let isnew = false;
  133.     if(!freeze)
  134.         isnew = await dataload();
  135.     if(isnew) {
  136.         if(godevice) {
  137.             goDevice(godevice);
  138.         }
  139.         tiles();
  140.         goview = false;
  141.         gotown = false;
  142.         gostreet = false;
  143.         godevice = false;
  144.         nextt = 1500;
  145.     }
  146.     if(seldev.length > 0)
  147.         nextt = 3000;
  148.  
  149.     setTimeout(renew, nextt);
  150. }
  151.  
  152. function goDevice(id, border=false, fire=false) {
  153.     let el = document.getElementById("d_"+id);
  154.     window.scrollTo(0,0);
  155.     let topPos = el.offsetTop;
  156.     let tof = topPos -$(".sidebar-item").height() - $(".sidebar-item").offset().top - 20;
  157.    
  158.     window.scrollTo(0, tof);
  159.     if(border) {
  160.         $(".boxes div.dropdown").removeClass("fborder");
  161.         $(el).addClass("fborder");
  162.     }
  163.    
  164.     if(fire) {
  165.         $(el).addClass("shadowpulse");
  166.         $(el).on('animationend',()=>$(el).removeClass("shadowpulse")); 
  167.     }
  168.    
  169. }
  170.  
  171.  
  172. let loadfail=0;
  173. async function dataload() {
  174.     let url = environment.base_url+"/"+"?do=api&fn=states&order";
  175.     let flt=$.param(makeflt());
  176.     if(flt!=="")
  177.         url+="&"+flt;
  178.     let result, ret=false;
  179.     try {
  180.         result = await $.ajax({
  181.             url: url,
  182.             type: 'GET',
  183.             dataType: "json",
  184.         });
  185.     } catch (error) {
  186.         console.log("Error: ",error);
  187.         if(error.status == 401) //unautorized
  188.             window.location=environment.base_url+"/"+"?do=login&b="+encodeURIComponent(window.location);        
  189.  
  190.         loadfail++;
  191.         if(ddata === null)
  192.             $("#content").html("<h2>Data was not loaded</h2>");
  193.         else if(loadfail>1) {
  194.             hulla.send(i18next.t("No connection to the server"));
  195.             loadfail = 0;
  196.         }
  197.         return ret;
  198.     }
  199.     loadfail=0;
  200.     if(ddata==null || ddata.timestamp != result.timestamp) {
  201.         ddata = result;
  202.         ret = true;
  203.     }
  204.    
  205.     return ret;
  206. }
  207.  
  208.  
  209. function cmdclear() {
  210.     $("#devlist").html("");
  211.     seldev = [];
  212.     cmddata = null;
  213.     $(".boxes div.dropdown").removeClass("selected");
  214.     selection.clearSelection();
  215.     cmdpanel();
  216. }
  217.  
  218. let doMgtStatus = true;
  219. function cmdpanel() {
  220.     if(seldev.length == 0 && !editmode)
  221.         $("#allfilter").removeClass("d-none");
  222.     else
  223.         $("#allfilter").addClass("d-none");
  224.  
  225.    
  226.     if(seldev.length == 0) {
  227.         $("#mapcmd").addClass("d-none");
  228.         $("#formedit").removeClass("d-none");
  229.         doMgtStatus = false;
  230.     }
  231.     else {
  232.         $("#mapcmd").removeClass("d-none");
  233.         $("#formedit").addClass("d-none");
  234.         doMgtStatus = true;
  235.         mgtStatus(true);
  236.     }
  237. }
  238.  
  239. async function mgtStatus(force=false) {
  240.     if(seldev.length == 0)
  241.         return;
  242.    
  243.     if(mgtStatus.cnt === undefined)
  244.         mgtStatus.cnt = 0;
  245.    
  246.     let headers = {};
  247.     if(mgtStatus.cnt++ > 20 || force) {
  248.         mgtStatus.cnt = 0;
  249.         headers = {"Cache-Control": "No-Cache"};
  250.     }
  251.     let url = environment.base_url+"/"+"?do=api&fn=mgtstates&devices="+seldev.join(",");
  252.     let result;
  253.     try {
  254.         result = await $.ajax({
  255.             url: url,
  256.             type: 'GET',
  257.             dataType: "json",
  258.             headers: headers,
  259.         });
  260.     } catch (error) {
  261.         console.log("Error: ",error);
  262.     }
  263.     let nextt = 550;
  264.     if(cmddata == null || cmddata.last.timestamp !== result.last.timestamp) {
  265.         cmddata = result;
  266.         nextt = 1000;
  267.         $(".devctrl").removeClass("queued");
  268.         for(let id of seldev) {        
  269.             let textcolor = "black", title="";
  270.            
  271.             let queue = cmddata.queue.rows.find(x=>x.Devices_id == id);
  272.             if(queue) {
  273.                 $(`#ctrl_${id}`).addClass("queued");
  274.                 title += i18next.t("Queued up") + ": " + i18next.t(queue.Name);
  275.             }
  276.            
  277.             let last = cmddata.last.rows.find(x=>x.Devices_id == id);
  278.             if(last) {
  279.                 textcolor = last.success?"green":"red";
  280.                 let date = new Date(last.cmdtime * 1000);
  281.                 if(title)
  282.                     title += "<br>";
  283.                
  284.                 title += moment(date).format("LT");
  285.                 title += " " + i18next.t(last.Name) + " - " + i18next.t(last.success?"Success":"Fail");
  286.                
  287.             }
  288.             $(`#ctrl_${id}`).css('color', textcolor);
  289.             $(`#ctrl_${id}`).attr('data-original-title', title);
  290.             //$(`#ctrl_${id}`).attr('title', title).tooltip('update');
  291.            
  292.         }
  293.         $(".devctrl").tooltip({container:'#mapcmd'});
  294.     }
  295.     if(doMgtStatus)
  296.         setTimeout(mgtStatus, nextt);
  297. }
  298.  
  299.  
  300. function findDevice() {
  301.     let ss = $("#findStr").val().trim().toUpperCase();
  302.    
  303.     if(ss) {
  304.         let fr = ddata.rows.find(x => (x.CustomNum||"").toUpperCase() == ss || (x.sn||"").toUpperCase() == ss);
  305.         fr = fr || ddata.rows.find(x => (x.Name||"").toUpperCase().includes(ss));
  306.        
  307.         if(fr) {
  308.             $(".cli").removeClass("clisel");
  309.             goDevice(fr.id, true, true);
  310.             borderDevice = fr.id;
  311.         }
  312.     }
  313.  
  314.     return false;
  315. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!