schedule page

[Thomas]

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;