This forum uses cookies
This forum makes use of cookies to store your login information if you are registered, and your last visit if you are not. Cookies are small text documents stored on your computer; the cookies set by this forum can only be used on this website and pose no security risk. Cookies on this forum also track the specific topics you have read and when you last read them. Please confirm that you accept these cookies being set.

schedule page
#9
(28.01.2018, 16:01)buuuudzik Wrote: This code is for using one widget page with an iframe for showing trends and schedulers:
Code:
// Change src of widget and have 1 widget for every trend and scheduler in visualisation
$(function(){
  if (!$('body').hasClass('usermode')) {
    return;
  }
 
  // BELOW CHANGE TRENDS AND SCHEDULERS LIST
  let mapping = [
    // Trends:
    {type: 't', className: 'wt_1', query: 'id=1'},
    {type: 't', className: 'wt_2', query: 'id=2&mode=week'},
    {type: 't', className: 'wt_kitchen-living', query: 'id=2,3&multiple=1'},
    
    // Schedulers:
    {type: 's', className: 'ws_1', query: 'id=1'},
    {type: 's', className: 'ws_2', query: 'id=2'},
    {type: 's', className: 'ws_outdoor-light', query: 'id=1,2&nohol'}
  ];
 
  function updateFrameSource(interval) {
      let widgetIframe = $('.trends_n_schedulers > iframe')[0];
    
    if (widgetIframe) {
         if (widgetIframe.src != location.origin + currentFrameURL) widgetIframe.src = currentFrameURL;
         else clearInterval(interval);
    };
  };
 
  function initEventListeners() {
    for (let i=0; i<mapping.length; i++) {
      let {type, className, query} = mapping[i];
      let newFrameSrc = (type=='t' ? '/scada-vis/trends?' : '/scada-vis/schedulers?') + query;
          
      $('.' + className).on('vclick', function () {
        currentFrameURL = newFrameSrc;
        let intervalId;
        intervalId = setInterval(updateFrameSource.bind(this, intervalId), 50);
      });
    };
  };
 
  // Initialization
  let currentFrameURL;
  initEventListeners();
});

How to use it:
1. Create a widget
2. Add the iframe to the widget and add to it Additional class "trends_n_schedulers"
3. Add above Javascript code to your Custom Javascript and edit trendsMap and schedulersMap tables

This row

Code:
let {type, className, query} = mapping[i];
doesn't work in Edge.
Working solution is

Code:
 let type = mapping[i].type;
     let className = mapping[i].className;
     let query = mapping[i].query;
LM5Lp, firmware: 2018.08.22 and 2021.12.15, FlashSYS v2, ARMv7 Processor rev 5 (v7l), kernel 4.4.151 and 4.4.259
Reply


Messages In This Thread
schedule page - by Daponte - 25.01.2018, 08:11
RE: schedule page - by Daniel - 25.01.2018, 11:55
RE: schedule page - by Daponte - 25.01.2018, 12:14
RE: schedule page - by Thomas - 26.01.2018, 10:31
RE: schedule page - by buuuudzik - 26.01.2018, 10:35
RE: schedule page - by buuuudzik - 28.01.2018, 16:01
RE: schedule page - by Thomas - 29.01.2019, 14:24
RE: schedule page - by Thomas - 06.02.2018, 19:04
RE: schedule page - by buuuudzik - 06.02.2018, 19:15

Forum Jump: