From ebdd1550212ba28395392981b90cc8020ed349c9 Mon Sep 17 00:00:00 2001
From: Generoso Martello <generoso.martello@gmail.com>
Date: Sun, 7 Jun 2020 17:08:44 +0200
Subject: [PATCH] Scheduler UI improvements

---
 BaseFiles/Common/html/css/my.css              |  22 +--
 BaseFiles/Common/html/index.html              |  48 ++---
 BaseFiles/Common/html/js/api/homegenie.ui.js  |  38 ++--
 .../pages/configure/scheduler/_scheduler.js   | 169 +++++++++++-------
 .../html/pages/configure/scheduler/main.html  |   2 +-
 .../homegenie/generic/energymonitor.js        |  12 +-
 .../Common/html/ui/core/popup.cronwizard.html |  92 ++++++----
 .../Common/html/ui/core/popup.cronwizard.js   |  45 ++---
 8 files changed, 250 insertions(+), 178 deletions(-)

diff --git a/BaseFiles/Common/html/css/my.css b/BaseFiles/Common/html/css/my.css
index aaf292825..998728ef8 100644
--- a/BaseFiles/Common/html/css/my.css
+++ b/BaseFiles/Common/html/css/my.css
@@ -192,22 +192,6 @@ div[data-ui-field="wallpaper"] {
     margin-left: 4px;
 }
 
-.cronwiz-container .CodeMirror-code span {
-    font-family: Courier New, Courier, monospace !important;
-    font-size: 10pt !important;
-    white-space: pre;
-    line-height: 11pt;
-}
-
-.cronwiz-container .CodeMirror-linenumber {
-    font-size: 9pt;
-    font-family: Courier New, Courier, monospace !important;
-}
-
-.cronwiz-container .CodeMirror-scroll {
-    overflow-x: auto;
-}
-
 #systemsettings_browserepo div[data-ui-field="description_text"] pre {
     margin-left: 8px;
     border-left: solid 2px gray;
@@ -698,7 +682,6 @@ div.ui-page-theme-a div.ui-body-inherit img.auto-invert, div.ui-bar-inherit img.
 }
 
 .hg-scheduler-table-row {
-    margin-left: -20px;
 }
 
 #module_programs_featurelist {
@@ -817,6 +800,11 @@ div.ui-page-theme-a .ui-icon-microphone:after {
     display: none;
 }
 
+/*** jQuery Mobile overrides ***/
+.ui-header .ui-title, .ui-footer .ui-title {
+    margin: 0 2%;
+}
+
 /**** media queries ****/
 
 /** Small Mobile **/
diff --git a/BaseFiles/Common/html/index.html b/BaseFiles/Common/html/index.html
index d6a400460..c800aac5c 100644
--- a/BaseFiles/Common/html/index.html
+++ b/BaseFiles/Common/html/index.html
@@ -67,8 +67,8 @@
     <script src="js/codemirror-4.03/addon/hint/xml-hint.js"></script>
     <script src="js/codemirror-4.03/addon/hint/html-hint.js"></script>
     <script src="js/codemirror-4.03/addon/edit/closebrackets.js"></script>
-    <script src="js/codemirror-4.03/addon/edit/matchbrackets.js"></script>    
-    <script src="js/codemirror-4.03/addon/edit/matchtags.js"></script>    
+    <script src="js/codemirror-4.03/addon/edit/matchbrackets.js"></script>
+    <script src="js/codemirror-4.03/addon/edit/matchtags.js"></script>
     <script src="js/codemirror-4.03/addon/fold/foldcode.js"></script>
     <script src="js/codemirror-4.03/addon/fold/foldgutter.js"></script>
     <script src="js/codemirror-4.03/addon/fold/brace-fold.js"></script>
@@ -77,7 +77,7 @@
     <script src="js/codemirror-4.03/addon/search/searchcursor.js"></script>
     <script src="js/codemirror-4.03/addon/search/search.js"></script>
     <script src="js/codemirror-4.03/addon/search/match-highlighter.js"></script>
-    
+
     <!-- other js frameworks and utils -->
     <script src="js/error-stack-parser.min.js"></script>
     <script src="js/stackframe.min.js"></script>
@@ -97,15 +97,15 @@
     <script src="js/jqm-datebox.lang.utf8.min.js"></script>
 
     <!-- HomeGenie Javascript includes -->
-    <script src="js/homegenie.api.js?version=v1.3-stable.8"></script>
-    <script src="js/homegenie.webapp.js?version=v1.3-stable.8"></script>
+    <script src="js/homegenie.api.js?version=v1.3-stable.10"></script>
+    <script src="js/homegenie.webapp.js?version=v1.3-stable.10"></script>
 
     <!-- custom javascript --><!-- TODO: check wheter this can be deprecated/moved -->
-    <script src="js/my.js?version=v1.2-beta.40"></script>
+    <script src="js/my.js?version=v1.3-stable.10"></script>
 
     <!-- local css definitions and overrides -->
-    <link rel="stylesheet" href="css/my.css?version=v1.2-beta.40" />
-    <link rel="stylesheet" href="css/fonts/hg-fonts.css?version=v1.2-beta.40" />
+    <link rel="stylesheet" href="css/my.css?version=v1.3-stable.10" />
+    <link rel="stylesheet" href="css/fonts/hg-fonts.css?version=v1.3-stable.10" />
 
     <script type="text/javascript">
 
@@ -243,15 +243,15 @@ <h1>#{title}</h1>
             <p>#{text}</p>
         </div>
     </div>
-    
+
 <!-- BEGIN Global Popups -->
 
-        
+
     <!-- Confirm Popup -->
     <div id="actionconfirm_popup" class="ui-corner-all hg-popup-b" data-role="popup" data-title="Are you sure?" data-overlay-theme="b" data-position-to="window" data-transition="pop">
         <div data-role="header" class="ui-corner-top">
             <h3>Perform the selected action?</h3>
-        </div>    
+        </div>
         <div class="ui-content ui-corner-bottom">
             <p style="padding-left:20px;padding-right:20px;max-height:240px;overflow:hidden;overflow-y:auto;">This operation cannot be undone.</p>
             <div class="ui-grid-a">
@@ -259,15 +259,15 @@ <h3>Perform the selected action?</h3>
                 <div class="ui-block-b" align="right"><a data-locale-id="common_command_proceed" id="actionconfirm_confirm_button" class="ui-btn ui-corner-all ui-btn-icon-left ui-icon-check" data-rel="back">Proceed</a></div>
             </div>
         </div>
-    </div>        
-    
+    </div>
+
     <!-- Event Popup Settings -->
     <div id="configure_popupsettings_edit" class="ui-corner-all hg-popup-b" data-role="popup" data-theme="a" data-overlay-theme="b" data-position-to="window" data-transition="pop">
         <div data-role="header" class="ui-corner-top">
             <h1 data-locale-id="configure_popupfilter_title">Event popup filters</h1>
         </div>
         <div class="ui-content ui-corner-bottom" style="height:280px;max-height:280px;overflow-y:scroll;overflow-x:hidden;">
-        
+
             <ul data-role="listview" id="popupsettings_ignorelist">
                 <li data-role="list-divider">
                     <div class="ui-grid-b">
@@ -277,7 +277,7 @@ <h1 data-locale-id="configure_popupfilter_title">Event popup filters</h1>
                     </div>
                 </li>
             </ul>
-        
+
         </div>
         <div class="ui-grid-a ui-footer ui-bar-inherit" align="center">
             <div class="ui-block-a">
@@ -285,8 +285,8 @@ <h1 data-locale-id="configure_popupfilter_title">Event popup filters</h1>
             </div>
         </div>
     </div>
-    
-    
+
+
     <!-- Module Edit Popup -->
     <div id="automation_group_module_edit" class="ui-corner-all hg-popup-a" data-role="popup" data-theme="a" data-overlay-theme="b" data-position-to="window" data-transition="pop">
         <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
@@ -342,7 +342,7 @@ <h1 id="module_title">Module Settings</h1>
                     </div>
 
                     <div id="module_programs_featurelist"></div>
-                    
+
                     <p id="module_programs_featuredesc" style="margin-left:10px;margin-right:10px;font-size:10pt;opacity:0.9"></p>
 
                     <fieldset id="module_programs_features" data-role="controlgroup" data-type="vertical" style="border:solid 1px gray;padding:10px;"></fieldset>
@@ -472,7 +472,7 @@ <h2 id="automationprograms_program_title">Program Options</h2>
         <h3 data-ui-field="title" style="margin:5px;margin-top:0px">Fullscreen Editor</h3>
         <h4 data-ui-field="subtitle" style="margin:5px">...</h4>
         <div class="ui-shadow" style="position:absolute;top:100px;left:30px;right:30px;bottom:100px;"><textarea id="fullscreen_edit_text" style="width:100%;height:100%;border:0;margin:0"></textarea></div>
-        
+
         <div style="position:absolute;left:40px;bottom:20px">
             <h4 data-ui-field="namelabel"></h4>
             <div data-ui-field="nameinput" class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset" style="position:relative;display:none;border-color:#fff">
@@ -481,7 +481,7 @@ <h4 data-ui-field="namelabel"></h4>
         </div>
 
         <a data-ui-field="cancel" href="#" class="ui-btn ui-btn-a ui-corner-all" style="position:absolute;right:140px;bottom:20px">Cancel</a>
-        
+
         <a data-ui-field="confirm" href="#" class="ui-btn ui-btn-a ui-corner-all" style="position:absolute;right:40px;bottom:20px">Ok</a>
     </div>
 
@@ -504,7 +504,7 @@ <h4 data-ui-field="namelabel"></h4>
         </ul>
         <br clear="all" />
         <div align="center" style="font-size:9pt;position:absolute;left:0;right:0;bottom:0;height:30px">
-            HomeGenie &copy; 2011-2019 
+            HomeGenie &copy; 2011-2019
             <a href="https://github.com/genielabs/HomeGenie" target="_blank">G-Labs</a>
         </div>
     </div><!-- /panel -->
@@ -551,18 +551,18 @@ <h2 data-locale-id="home_menu_about">About</h2>
         </div>
 
     </div>
-    
+
 <!--- Boot progress overlay -->
 
     <div id="bootprogress_overlay" style="position:fixed;top:0;left:0;right:0;bottom:0;background-color:white;opacity:0.85;z-index:10000">
-    
+
         <div class="centered-text">
             <div id="bootprogress_text"></div>
             <div id="bootprogress_bar_container">
                 <div id="bootprogress_bar"></div>
             </div>
         </div>
-    
+
     </div>
 
 </body>
diff --git a/BaseFiles/Common/html/js/api/homegenie.ui.js b/BaseFiles/Common/html/js/api/homegenie.ui.js
index 9459207dc..cbebaf895 100644
--- a/BaseFiles/Common/html/js/api/homegenie.ui.js
+++ b/BaseFiles/Common/html/js/api/homegenie.ui.js
@@ -129,7 +129,7 @@ HG.Ui = HG.Ui || new function(){ var $$ = this;
             'DoorLock',
         Shutter:
             'Shutter',
-        Siren: 
+        Siren:
             'Siren',
         MediaTransmitter:
             'MediaTransmitter',
@@ -151,8 +151,8 @@ HG.Ui = HG.Ui || new function(){ var $$ = this;
     };
 
     $$.GenerateWidget = function(fieldType, context, callback) {
-        // fieldType: 
-        //    widgets/text, widgets/password, widgets/checkbox, widgets/slider, 
+        // fieldType:
+        //    widgets/text, widgets/password, widgets/checkbox, widgets/slider,
         //    widgets/store.text, widgets/store.password, widgets/store.checkbox,
         //    widgets/store.list, store.edit
         //    core/popup.cronwizard
@@ -233,7 +233,7 @@ HG.Ui = HG.Ui || new function(){ var $$ = this;
                 if (callback != null) callback(null);
             }
         });
-        return widgetWrapper; 
+        return widgetWrapper;
     };
 
     $$.GetModuleIcon = function(module, callback, elid) {
@@ -254,7 +254,7 @@ HG.Ui = HG.Ui || new function(){ var $$ = this;
                 else // Compatibility fall-back for old widget format
                     icon = module.WidgetInstance.IconImage;
             } else {
-                // get reference to generic type widget 
+                // get reference to generic type widget
                 HG.WebApp.WidgetsList.GetWidgetIcon(widget, elid, callback);
                 return icon;
             }
@@ -263,11 +263,17 @@ HG.Ui = HG.Ui || new function(){ var $$ = this;
         return icon;
     };
 
-    $$.GetModuleDisplayName = function(module) {
+    $$.GetModuleDisplayName = function(module, short) {
         var name = module.Domain + ' ' + module.Address;
         try {
-            name = module.Name;
-            name += ' ('+module.Domain.substring(module.Domain.lastIndexOf('.')+1)+' '+module.Address+')';
+            if (module.Name && module.Name.length > 0) {
+                name = module.Name;
+                if (!short) {
+                    name += ' ('+module.Domain.substring(module.Domain.lastIndexOf('.')+1)+' '+module.Address+')';
+                }
+            } else {
+                name += module.Domain.substring(module.Domain.lastIndexOf('.')+1)+':'+module.Address;
+            }
             name = name.trim();
         } catch(e) { }
         return name;
@@ -343,7 +349,7 @@ HG.Ui = HG.Ui || new function(){ var $$ = this;
     $$.ConfigureProgram = function(module) {
         HG.WebApp.ProgramEdit._CurrentProgram.Domain = module.Domain;
         HG.WebApp.ProgramEdit._CurrentProgram.Address = module.Address;
-        HG.WebApp.ProgramsList.UpdateOptionsPopup();    
+        HG.WebApp.ProgramsList.UpdateOptionsPopup();
     }
 
     $$.GetParameterContext = function(module, parameter, value) {
@@ -365,7 +371,7 @@ HG.Ui = HG.Ui || new function(){ var $$ = this;
                 case ParameterType.Sensor_MotionDetect:
                     isStatusParam = true;
                     //hideable = true;
-                    if (parameter != ParameterType.Sensor_MotionDetect && 
+                    if (parameter != ParameterType.Sensor_MotionDetect &&
                         (parameter == ParameterType.Sensor_DoorWindow
                             || parameter == ParameterType.Status_DoorLock
                             || ((module != null && module.DeviceType != '') && (module.DeviceType == ModuleType.DoorWindow || module.DeviceType == ModuleType.DoorLock)))) {
@@ -534,27 +540,27 @@ HG.Ui.CreatePage = function(model, cuid) {
     var $$ = model;
     $$._fieldCache = [];
     $$.PageId = $$.pageId = cuid;
-    $$.getContainer = function() { 
+    $$.getContainer = function() {
         if (typeof $$.container == 'undefined')
-            $$.container = $('#'+$$.pageId); 
-        return $$.container; 
+            $$.container = $('#'+$$.pageId);
+        return $$.container;
     };
     $$.field = function(field, globalSearch) {
         var f = globalSearch ? '@'+field : field;
         var el = null;
         if (typeof $$._fieldCache[f] == 'undefined') {
             el = globalSearch ? $(field) : $$.container.find('[data-ui-field='+field+']');
-            if (el.length) 
+            if (el.length)
                 $$._fieldCache[f] = el;
         } else {
             el = $$._fieldCache[f];
         }
-        return el; 
+        return el;
     };
     $$.clearCache = function() {
         var obj = $$._fieldCache;
         for (var prop in obj) {
-            if (obj.hasOwnProperty(prop)) { delete obj[prop]; } 
+            if (obj.hasOwnProperty(prop)) { delete obj[prop]; }
         }
         $$._fieldCache = [];
     };
diff --git a/BaseFiles/Common/html/pages/configure/scheduler/_scheduler.js b/BaseFiles/Common/html/pages/configure/scheduler/_scheduler.js
index d13e57650..673302336 100644
--- a/BaseFiles/Common/html/pages/configure/scheduler/_scheduler.js
+++ b/BaseFiles/Common/html/pages/configure/scheduler/_scheduler.js
@@ -6,6 +6,7 @@
     $$._CurrentEventIndex = -1;
     $$._CurrentDate = new Date();
     $$._UpdateTimeout = null;
+    $$._RefreshTimeout = null;
 
     $$.InitializePage = function () {
         var page = $('#' + $$.PageId);
@@ -80,7 +81,7 @@
         setTimeout($$.LoadScheduling, 500);
     };
 
-    $$.GetItemMarkup = function (schedule) {
+    $$.GetItemMarkup = function (schedule, i) {
         var displayName = schedule.Name;
         if (displayName.indexOf('.') > 0)
             displayName = displayName.substring(displayName.indexOf('.') + 1);
@@ -98,9 +99,16 @@
         return item;
     }
 
+    $$.RefreshOccursTableOnce = function() {
+        if ($$._RefreshTimeout != null) clearTimeout($$._RefreshTimeout);
+        $$._RefreshTimeout = setTimeout($$.RefreshOccursTable, 500);
+    }
     $$.RefreshOccursTable = function() {
         var page = $('#' + $$.PageId);
         var occursList = page.find('[data-ui-field="occurs-table"]');
+        var w = occursList.width(); var h = 10;
+        if (w === 0) return;
+        w -= 8; // margin
         var dd = moment($$._CurrentDate).format('LL');
         $$.displayDate.html(dd);
         $.mobile.loading('show');
@@ -126,8 +134,9 @@
                 if (sv.Name == v.Name) {
                     entry.index = sk;
                     entry.description = sv.Description;
-                    entry.boundModules = sv.BoundModules.length;
+                    entry.boundModules = sv.BoundModules;
                     entry.hasScript = (typeof sv.Script != 'undefined' && sv.Script != null && sv.Script.trim() != '');
+                    entry.requiresBoundModules = sv.BoundModules && (sv.Script && sv.Script.indexOf('$$.boundModules.') > 0);
                     entry.prevOccurrence = 0;
                     entry.nextOccurrence = 0;
                 }
@@ -150,34 +159,52 @@
               entry.occurs.push({ from: start, to: end });
               occurrences.push(entry);
             });
-            var w = $(window).width()-32-50, h = 10;
+
             $.each(occurrences, function(k,v){
                 if (v.separator) {
-                    occursList.append('<div align="center" style="margin-top:1em;padding:0.25em;width:auto;font-size:16pt">'+v.title+'</div>');
+                    occursList.append('<div style="text-align: left;margin-top:1.5em;width:auto;font-size:20pt;font-weight:bold">'+v.title+'</div>');
                     return true;
                 }
 
-                var timeBarDiv = $('<div/>');
-                timeBarDiv.css('cursor', 'pointer');
-                timeBarDiv.addClass('hg-scheduler-table-row');
-                timeBarDiv.on('click',function(){
-                    $$._CurrentEventName = v.name;
+                var scheduleTitle = $('<div/>');
+                scheduleTitle.css('float', 'left');
+                scheduleTitle.css('cursor', 'pointer');
+                scheduleTitle.css('margin-top', '1.0em');
+                scheduleTitle.click(function() {
                     $$._CurrentEventIndex = v.index;
+                    $$._CurrentEventName = v.name;
                     $$.EditCurrentItem();
                 });
-                var indicators = '';
-                if (v.boundModules > 0)
-                    indicators += '<i title="bound modules" class="fa fa-check-square"></i> '+v.boundModules;
-                if (v.hasScript > 0)
-                    indicators += '&nbsp;&nbsp;&nbsp;<i title="runs script" class="fa fa-code"></i>';
+                scheduleTitle.append('<h3 style="text-align:left;margin:0;margin-top:0.5em;line-height:16pt;font-size:16pt;vertical-align:middle"><i class="fa fa-clock-o"></i>&nbsp;&nbsp;<span>'+v.title+'</span></h3>');
+                occursList.append(scheduleTitle).append('<br clear="all">');
+                if (typeof v.description != 'undefined' && v.description != null && v.description.trim() !== '') {
+                    var scheduleDescription = $('<div style="text-align:left;font-size:14pt;margin-bottom: 6px;margin-top:8px;opacity:0.75">' + v.description + '</div>');
+                    occursList.append(scheduleDescription);
+                }
+
+                if (v.prevOccurrence > 0 || v.nextOccurrence > 0) {
+                    var lastNextInfo = $('<div/>');
+                    occursList.append(lastNextInfo);
+                    lastNextInfo.css('margin-top', '8px');
+                    lastNextInfo.css('font-size', '10pt');
+                    lastNextInfo.css('width', '100%');
+                    lastNextInfo.css('height', '12px');
+                    if (v.prevOccurrence > 0) {
+                        lastNextInfo.append('<span style="display: block; float: left;margin-left:4px"><strong style="opacity: 0.65;margin-right: 10px">LAST</strong> ' + moment(v.prevOccurrence).format('LT')+'&nbsp;&nbsp;('+moment(v.prevOccurrence).from(new Date())+')</span>');
+                    }
+                    if (v.nextOccurrence > 0) {
+                        lastNextInfo.append('<span style="display: block; float: right;margin-right:4px"> <strong style="opacity: 0.65;margin-right: 10px">NEXT</strong> ' + moment(v.nextOccurrence).format('LT')+'&nbsp;&nbsp;('+moment(v.nextOccurrence).from(new Date())+')</span>');
+                    }
+                }
+
+                var timeBarDiv = $('<div/>');
+                timeBarDiv.addClass('hg-scheduler-table-row');
                 var timeBar = Raphael(timeBarDiv[0], w, h*2.5);
-                timeBarDiv.append('<i class="fa fa-clock-o" aria-hidden="true" style="font-size:20pt;margin-left:8px;opacity:0.65;vertical-align:top;"></i>');
                 timeBar.rect(0, 0, w, h*2.5).attr({
-                    fill: "rgb(90, 90, 90)", 
+                    fill: "rgb(90, 90, 90)",
                     stroke: "rgb(0,0,0)",
                     "stroke-width": 1
                 });
-                occursList.append('<div class="ui-grid-a"><div class="ui-block-a"><h3 style="text-align:left;margin:0;margin-top:0.5em;opacity:0.75">'+v.title+'</h3></div><div class="ui-block-b" align="right" style="padding-right:48px;padding-top:20px">'+indicators+'</div></div>');
                 occursList.append(timeBarDiv);
 
                 $.each(v.occurs, function(kk,vv){
@@ -187,44 +214,52 @@
                     vv.to -= sd.getTime();
                     var sx1 = Math.round(vv.from/(1440*60000)*w), sx2 = Math.round(vv.to/(1440*60000)*w)-sx1;
                     timeBar.rect(sx1-1, 0, sx2+1, h+1).attr({
-                        fill: "rgba(255, 255, 70, 85)", 
+                        fill: "rgba(255, 255, 70, 85)",
                         stroke: "rgba(255,255,255, 70)",
                         "stroke-width": 1
                     });
-                });    
+                });
 
 
                 for (var t = 0; t < 24; t++) {
                     timeBar.text(t*(w/24)+(w/48), 18, t.toString()).attr({fill:'white'});
                     timeBar.rect(t*(w/24), (h*1.25-1), (w/24), (h*1.25)+1).attr({
-                        stroke: "rgba(255, 255, 255, 0.2)", 
+                        stroke: "rgba(255, 255, 255, 0.2)",
                         "stroke-width": 1
                     });
                 }
 
-                d = new Date(); d.setSeconds(0);
-
-                // build basic tooltip data
-                var desc = '';
-                if (typeof v.description != 'undefined' && v.description != null && v.description.trim() != '')
-                    desc += v.description;
-                desc += '<p align="center"><strong>';
-                desc += moment($$._CurrentDate).format('LL');
-                desc += '</strong></p>';
-
-                // tooltip: previous/next occurrence text
-                if (v.prevOccurrence > 0 || v.nextOccurrence > 0) {
-                    if (v.prevOccurrence > 0) {
-                        desc += 'Last &nbsp;&nbsp;&nbsp;';
-                        desc += '<strong>'+moment(v.prevOccurrence).format('LT')+'</strong>&nbsp;&nbsp;('+moment(v.prevOccurrence).from(new Date())+')';
-                        desc += '<br/>';
-                    }
-                    if (v.nextOccurrence > 0) {
-                        desc += 'Next &nbsp;&nbsp;&nbsp;';
-                        desc += '<strong>'+moment(v.nextOccurrence).format('LT')+'</strong>&nbsp;&nbsp;('+moment(v.nextOccurrence).from(new Date())+')';
+                if (v.requiresBoundModules) {
+                    var scheduleModulesDiv = $('<div/>');
+                    scheduleModulesDiv.css('margin-top', '10px');
+                    scheduleModulesDiv.css('text-align', 'left');
+                    scheduleModulesDiv.css('clear', 'both');
+                    var modulesButton = $('<a class="ui-btn ui-corner-all ui-btn-icon-left ui-icon-fa-cube ui-btn-inline ui-mini" style="margin:0;margin-right: 0.5em;padding-top:4px;padding-bottom:4px">' + HG.WebApp.Locales.GetLocaleString('cronwizard_section_modules', 'Modules') + '</a>');
+                    modulesButton.click(function() {
+                        $$._CurrentEventIndex = v.index;
+                        $$._CurrentEventName = v.name;
+                        $$.EditCurrentItem(true);
+                    });
+                    scheduleModulesDiv.append(modulesButton);
+                    if (v.boundModules.length > 0) {
+                        var html = '<div style="margin:8px;margin-left: 24px;">';
+                        for (i = 0; i < v.boundModules.length; i++) {
+                            html += ' &nbsp;&nbsp;<span style="opacity: 0.65">&bull;</span>&nbsp;&nbsp;';
+                            var moduleRef = v.boundModules[i];
+                            var module = HG.WebApp.Utility.GetModuleByDomainAddress(moduleRef.Domain, moduleRef.Address);
+                            if (module) {
+                                html += HG.Ui.GetModuleDisplayName(module, true);
+                            } else {
+                                html += moduleRef.Domain  + ':' + moduleRef.Address;
+                            }
+                        }
+                        html += '</div>';
+                        scheduleModulesDiv.append(html);
                     }
+                    occursList.append(scheduleModulesDiv);
                 }
 
+                d = new Date(); d.setSeconds(0);
                 var isToday = d.toDateString() == $$._CurrentDate.toDateString();
                 if (isToday) {
                     d = d.getTime();
@@ -232,12 +267,12 @@
                     d -= d2.getTime();
                     var bw = Math.round(d/(1440*60000)*w);
                     timeBar.rect(bw+2, 1, w-bw-2, (h*2.5)-2).attr({
-                        fill: "rgba(0, 0, 0, 0.35)", 
+                        fill: "rgba(0, 0, 0, 0.35)",
                         stroke: "rgba(0,0,0, 70)",
                         "stroke-width": 0.5
                     });
                     timeBar.rect(bw-1, 0, 2, h*2.5).attr({
-                        fill: "rgba(80, 255, 80, 0.8)", 
+                        fill: "rgba(80, 255, 80, 0.8)",
                         stroke: "rgba(0,0,0, 70)",
                         "stroke-width": 0.5
                     });
@@ -245,7 +280,7 @@
                     var d2 = new Date(); d2.setHours(0,0,0,0);
                     if ($$._CurrentDate.getTime() > d2.getTime()) {
                         timeBar.rect(0, 1, w, (h*2.5)-2).attr({
-                            fill: "rgba(0, 0, 0, 0.35)", 
+                            fill: "rgba(0, 0, 0, 0.35)",
                             stroke: "rgba(0,0,0, 70)",
                             "stroke-width": 0.5
                         });
@@ -254,7 +289,7 @@
 
                 timeBarDiv.on('mousemove',function(e,d){
                     if ($(e.target).is('rect')) {
-                        
+
                         var md = new Date($$._CurrentDate.getTime());
                         md.setHours(0,0,0,0);
                         md = new Date(md.getTime()+(e.offsetX / w * 1440 * 60000)-60000);
@@ -263,22 +298,22 @@
                     }
                 });
 
+                // build basic tooltip data
+                var desc = '<p align="center"><strong>';
+                desc += moment($$._CurrentDate).format('LL');
+                desc += '</strong></p>';
                 // attach tooltip
                 timeBarDiv.qtip({
                   content: {
-                    text: desc,
-                    title: {
-                        text: '<strong>'+v.name+'</strong>',            
-                        //button: 'close'
-                    }
+                    text: desc
                   },
                   show: { delay: 350, solo: true, effect: function(offset) {
                     $(this).slideDown(100);
                   } },
                   hide: { inactive: 10000 },
-                  style: { 
+                  style: {
                     classes: 'qtip-red qtip-shadow qtip-rounded qtip-bootstrap',
-                    width: 400, 
+                    width: 200,
                     name: 'dark',
                     padding: 0
                   },
@@ -286,16 +321,22 @@
                 });
 
                 timeBar.rect(0, 0, w, h*2.5).attr({
-                    stroke: "rgba(255, 255, 255, 0.75)", 
+                    stroke: "rgba(255, 255, 255, 0.75)",
                     "stroke-width": 1
                 });
             });
             $.mobile.loading('hide');
-            // auto-refresh every minute
-            if ($$._UpdateTimeout != null)
-                clearTimeout($$._UpdateTimeout);
-            if ($.mobile.activePage.attr("id") == $$.PageId)
-                $$._UpdateTimeout = setTimeout($$.RefreshOccursTable, 60000);
+
+            // auto-refresh every minute and on window resize
+            $(window).off('resize', $$.RefreshOccursTable);
+            if ($$._UpdateTimeout != null) clearTimeout($$._UpdateTimeout);
+            if ($.mobile.activePage.attr("id") == $$.PageId) {
+                var time = Date.now() / 1000;
+                var minutes = Math.floor(time / 60);
+                var secondsToNextMinute = 60 - (time - minutes * 60);
+                $$._UpdateTimeout = setTimeout($$.RefreshOccursTable, secondsToNextMinute * 1000);
+                $(window).on('resize', $$.RefreshOccursTableOnce);
+            }
         });
 
     }
@@ -310,19 +351,19 @@
             $('#configure_schedulerservice_list').append('<li data-icon="false" data-role="list-divider">' + HG.WebApp.Locales.GetLocaleString('configure_scheduler_events') + '</li>');
             //
             // element containing '.' in the name are grouped into own sections
-            for (i = 0; i < $$._ScheduleList.length; i++) {
+            for (var i = 0; i < $$._ScheduleList.length; i++) {
                 var schedule = $$._ScheduleList[i];
                 if (schedule.Name.indexOf('.') < 0) {
-                    var item = $$.GetItemMarkup(schedule);
+                    var item = $$.GetItemMarkup(schedule, i);
                     $('#configure_schedulerservice_list').append(item);
                 }
             }
             var currentGroup = '';
-            for (i = 0; i < $$._ScheduleList.length; i++) {
+            for (var i = 0; i < $$._ScheduleList.length; i++) {
                 var schedule = $$._ScheduleList[i];
                 if (schedule.Name.indexOf('.') > 0) {
                     var scheduleGroup = schedule.Name.substring(0, schedule.Name.indexOf('.'));
-                    var item = $$.GetItemMarkup(schedule);
+                    var item = $$.GetItemMarkup(schedule, i);
                     if (scheduleGroup != currentGroup) {
                         $('#configure_schedulerservice_list').append('<li data-role="list-divider">' + scheduleGroup.replace(/\./g, ' / ') + '</li>');
                         currentGroup = scheduleGroup;
@@ -363,8 +404,8 @@
         });
     };
 
-    $$.EditCurrentItem = function() {
-        HG.Ui.Popup.CronWizard.open($$._CurrentEventName);
+    $$.EditCurrentItem = function(compactMode) {
+        HG.Ui.Popup.CronWizard.open($$._CurrentEventName, compactMode);
         HG.Ui.Popup.CronWizard.onChange = function(item) {
             HG.Automation.Scheduling.UpdateItem(item.Name, item, function () {
                 if ($$._CurrentEventName == '')
@@ -390,4 +431,4 @@
         }
     };
 
-};
\ No newline at end of file
+};
diff --git a/BaseFiles/Common/html/pages/configure/scheduler/main.html b/BaseFiles/Common/html/pages/configure/scheduler/main.html
index 1fd715c26..008e87b81 100644
--- a/BaseFiles/Common/html/pages/configure/scheduler/main.html
+++ b/BaseFiles/Common/html/pages/configure/scheduler/main.html
@@ -15,7 +15,7 @@ <h3 align="center" data-locale-id="configure_schedulerservice_title">Event Sched
             <div><input type="text" data-ui-field="calendar-date"/></div>
             <div data-ui-field="calendar-title" align="center" style="font-size:24pt;cursor:pointer">
                 <i class="fa fa-calendar" aria-hidden="true"></i>
-                <span data-ui-field="display-date">loading...</span>
+                <span data-ui-field="display-date" style="opacity: 0.65;margin-left: 8px">loading...</span>
             </div>
             <div data-ui-field="occurs-table" align="center"></div>
         </div>
diff --git a/BaseFiles/Common/html/pages/control/widgets/homegenie/generic/energymonitor.js b/BaseFiles/Common/html/pages/control/widgets/homegenie/generic/energymonitor.js
index 15219ee37..e6af244a2 100644
--- a/BaseFiles/Common/html/pages/control/widgets/homegenie/generic/energymonitor.js
+++ b/BaseFiles/Common/html/pages/control/widgets/homegenie/generic/energymonitor.js
@@ -138,15 +138,17 @@ function drawStats(mod) {
       try {
         var dateFormat = HG.WebApp.Store.get('UI.DateFormat');
         $.plot($$.field('energystats'), [
-          { label: statsField.desc+'&nbsp;', data: dataSerie, lines: { show: true, lineWidth: 2.0 }, bars: { show: false }, splines: { show: false }, points: { show: true } }
+          { label: statsField.desc+'&nbsp;', data: dataSerie, lines: { show: true, lineWidth: 1.0 }, bars: { show: false }, splines: { show: false }, points: { show: true, symbol: function(ctx, x, y, radius, shadow) {
+                ctx.arc(x, y, 2, 0, shadow ? Math.PI : Math.PI * 2, false);
+          } } }
         ],
                {
-          yaxis: { 
-            show: true, min: yMin 
+          yaxis: {
+            show: true, min: yMin
           },
           xaxis: { mode: "time", useLocalTime: true, timeformat: (dateFormat == "MDY12" ? "%h%p" : "%h"), minTickSize: [2, "hour"], tickSize: [2, "hour"] },
           legend: { position: "nw", noColumns: 6, backgroundColor: 'rgba(0,0,0,0.4)' },
-          lines: { 
+          lines: {
             show: showlines, lineWidth: 1.0,
             fill: true,
             fillColor: { colors: [ { opacity: 0.0 }, { opacity: 1.0 } ] }
@@ -171,5 +173,5 @@ function drawStats(mod) {
       } catch (e) { }
 
     }
-  });    
+  });
 }
diff --git a/BaseFiles/Common/html/ui/core/popup.cronwizard.html b/BaseFiles/Common/html/ui/core/popup.cronwizard.html
index 0f741d55c..81ac8f7d7 100644
--- a/BaseFiles/Common/html/ui/core/popup.cronwizard.html
+++ b/BaseFiles/Common/html/ui/core/popup.cronwizard.html
@@ -1,5 +1,5 @@
-<div class="ui-corner-all cronwiz-container" style="width:720px;position:relative" data-dismissible="false" data-theme="a" data-overlay-theme="b" data-position-to="window" data-transition="pop">
-    
+<div class="ui-corner-all cronwiz-container" data-dismissible="false" data-theme="a" data-overlay-theme="b" data-position-to="window" data-transition="pop">
+
     <div class="ui-corner-top" data-role="header">
         <h2 data-locale-id="cronwizard_title">Cron event Wizard</h2>
     </div>
@@ -12,7 +12,7 @@ <h2 data-locale-id="cronwizard_title">Cron event Wizard</h2>
             </div>
             <div class="ui-block-b" style="padding-left:10px;">
                 <span data-locale-id="cronwizard_event_description" class="label-small">Description</span><br/>
-                <textarea data-ui-field="cron-desc" 
+                <textarea data-ui-field="cron-desc"
                     data-role="none"
                     class="ui-input-text ui-shadow-inset ui-body-inherit ui-corner-all"
                     style="height:80px;max-height:80px;width:100%;font-size:10pt"></textarea>
@@ -21,6 +21,26 @@ <h2 data-locale-id="cronwizard_title">Cron event Wizard</h2>
     </div>
 
     <style>
+    .cronwiz-container {
+        width:720px;
+        position:relative;
+    }
+    .cronwiz-container .CodeMirror-code span {
+        font-family: Courier New, Courier, monospace !important;
+        font-size: 10pt !important;
+        white-space: pre;
+        line-height: 11pt;
+    }
+
+    .cronwiz-container .CodeMirror-linenumber {
+        font-size: 9pt;
+        font-family: Courier New, Courier, monospace !important;
+    }
+
+    .cronwiz-container .CodeMirror-scroll {
+        overflow-x: auto;
+    }
+
     .cronwiz-panel {
         width:100%;
         height:260px;
@@ -39,6 +59,16 @@ <h2 data-locale-id="cronwizard_title">Cron event Wizard</h2>
     .hg-ui-list-item span {
         float:left;
     }
+    /* compact UI mode */
+    .cronwiz-container.compact {
+        width: 360px;
+    }
+    .compact .ui-grid-a .ui-block-a {
+        display: none;
+    }
+    .compact .ui-grid-a .ui-block-b {
+        width: 100% !important;
+    }
     </style>
 
     <div data-ui-field="panel-scheduling" class="cronwiz-panel">
@@ -131,19 +161,19 @@ <h2 data-locale-id="cronwizard_title">Cron event Wizard</h2>
                             <option value="3" data-locale-id="cronwizard_minuteselect_eachselected">each selected minute</option>
                         </select>
                     </div>
-                
+
                     <div data-ui-field="minute-tab1" align="center"></div>
-                
+
                     <div data-ui-field="minute-tab2" align="center">
                         <input type="range" min="1" max="59" value="5" />
                     </div>
-                
+
                     <div data-ui-field="minute-tab3" align="center"></div>
 
                 </div>
-                
+
                 <div data-ui-field="options-tabs-2" class="crontab-option-tab">
-                    
+
                     <div align="center">
                         <select data-ui-field="hour-type-select" data-inline="true">
                             <option value="1" data-locale-id="cronwizard_hourselect_everyhour">every hour</option>
@@ -151,22 +181,22 @@ <h2 data-locale-id="cronwizard_title">Cron event Wizard</h2>
                             <option value="3" data-locale-id="cronwizard_hourselect_eachselected">each selected hour</option>
                         </select>
                     </div>
-                    
+
                     <div data-ui-field="hour-tab1" align="center"></div>
-                
+
                     <div data-ui-field="hour-tab2" align="center">
                         <input type="range" min="1" max="23" value="1" />
                     </div>
-                
+
                     <div data-ui-field="hour-tab3" align="center">
-                        
-                        
+
+
                     </div>
-                    
+
                 </div>
-                
+
                 <div data-ui-field="options-tabs-3" class="crontab-option-tab">
-                    
+
                     <div align="center">
                         <select data-ui-field="dayom-type-select" data-inline="true">
                             <option value="1" data-locale-id="cronwizard_dayselect_everyday">every day</option>
@@ -174,9 +204,9 @@ <h2 data-locale-id="cronwizard_title">Cron event Wizard</h2>
                             <option value="3" data-locale-id="cronwizard_dayowselect_eachselected">each selected day of week</option>
                         </select>
                     </div>
-                    
+
                     <div data-ui-field="dayom-tab1" align="center"></div>
-                
+
                     <div data-ui-field="dayom-tab2" align="center">
                     </div>
 
@@ -191,20 +221,20 @@ <h2 data-locale-id="cronwizard_title">Cron event Wizard</h2>
                             <input type="checkbox" id="dayow-n-06" value="6" /><label data-locale-id="common_dayofweek_sat" for="dayow-n-06">Sat</label>
                         </fieldset>
                     </div>
-                    
+
                 </div>
-                
+
                 <div data-ui-field="options-tabs-4" class="crontab-option-tab">
-                    
+
                     <div align="center">
                         <select data-ui-field="month-type-select" data-inline="true">
                             <option value="1" data-locale-id="cronwizard_monthselect_everymonth">every month</option>
                             <option value="2" data-locale-id="cronwizard_monthselect_eachselected">each selected month</option>
                         </select>
                     </div>
-                    
+
                     <div data-ui-field="month-tab1" align="center"></div>
-                
+
                     <div data-ui-field="month-tab2" align="center">
                         <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
                             <input type="checkbox" id="month-n-01" value="1" /><label data-locale-id="common_month_jan" for="month-n-01">Jan</label>
@@ -221,7 +251,7 @@ <h2 data-locale-id="cronwizard_title">Cron event Wizard</h2>
                             <input type="checkbox" id="month-n-12" value="12" /><label data-locale-id="common_month_dec" for="month-n-12">Dec</label>
                         </fieldset>
                     </div>
-                    
+
                 </div>
 
             </div>
@@ -231,9 +261,9 @@ <h2 data-locale-id="cronwizard_title">Cron event Wizard</h2>
         <div data-ui-field="cronexpr-container" class="ui-mini" style="margin-top:2em;padding-left:30px;padding-right:25px;">
 
             <div data-locale-id="cronwizard_event_cronexpr" align="center" class="label-small" style="margin-bottom:4px;margin-right:10px;margin-left:10px">Cron expression</div>
-            <textarea data-ui-field="cron-expr" 
+            <textarea data-ui-field="cron-expr"
                                 data-role="none"
-                                style="font-family:monospace;font-size:18pt"></textarea>            
+                                style="font-family:monospace;font-size:18pt"></textarea>
 
         </div><!-- end custom cron expression container -->
 
@@ -325,11 +355,11 @@ <h2 data-locale-id="cronwizard_title">Cron event Wizard</h2>
                 </div>
             </div>
             <div style="padding-left:0px;">
-                <textarea data-ui-field="program-script" 
+                <textarea data-ui-field="program-script"
                                     data-role="none"
-                                    style="font-family:monospace;font-size:18pt"></textarea>    
+                                    style="font-family:monospace;font-size:18pt"></textarea>
             </div>
-                                        
+
         </div><!-- end program container -->
 
     </div>
@@ -340,7 +370,7 @@ <h2 data-locale-id="cronwizard_title">Cron event Wizard</h2>
             <div class="ui-block-a" class="ui-mini" style="width:65%">
                 <a data-ui-field="panel-occurrence-btn" href="#" class="ui-btn ui-corner-all ui-btn-active"><i class="fa fa-clock-o"></i> <span data-locale-id="cronwizard_section_occurrence">Occurence</span></a>
                 <i class="fa fa-long-arrow-right"></i>
-                <a data-ui-field="panel-modules-btn" href="#" class="ui-btn ui-corner-all"><i class="fa fa-cube"></i> <span data-locale-id="cronwizard_section_modules">Modules</span></a> 
+                <a data-ui-field="panel-modules-btn" href="#" class="ui-btn ui-corner-all"><i class="fa fa-cube"></i> <span data-locale-id="cronwizard_section_modules">Modules</span></a>
                 <i class="fa fa-long-arrow-right"></i>
                 <a data-ui-field="panel-script-btn" href="#" class="ui-btn ui-corner-all"><i class="fa fa-code"></i> <span data-locale-id="cronwizard_section_script">Script</span></a>
             </div>
@@ -359,6 +389,6 @@ <h2 data-locale-id="cronwizard_title">Cron event Wizard</h2>
         padding-left:1.5em;
         padding-right:1.5em;
         clear: both;
-    }        
+    }
     </style>
 </div>
diff --git a/BaseFiles/Common/html/ui/core/popup.cronwizard.js b/BaseFiles/Common/html/ui/core/popup.cronwizard.js
index aeaa3c8dd..1676f0d0f 100644
--- a/BaseFiles/Common/html/ui/core/popup.cronwizard.js
+++ b/BaseFiles/Common/html/ui/core/popup.cronwizard.js
@@ -59,7 +59,7 @@ $$.bind = function() {
                 eachMonth.push($(this).val());
             });
             // update bound item data
-            if ($$.item.Name == '') 
+            if ($$.item.Name == '')
                 $$.item.Name = $$.cronName.val();
             $$.item.CronExpression = cronExpression;
             $$.item.Description = $$.element.find('[data-ui-field=cron-desc]').val();
@@ -103,13 +103,13 @@ $$.bind = function() {
         }
 
     });
-    
+
     // "each minute" control group
     var cg = $('<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true" />');
     for(var d = 0; d < 60; d++) {
         var mn = d.toString(); if (mn.length==1) mn = '0'+mn;
         var cr = $('<input type="checkbox" id="minute-n-'+mn+'" value="'+d+'" /><label for="minute-n-'+mn+'">'+mn+'</label>');
-        cg.append(cr);    
+        cg.append(cr);
     }
     element.find('[data-ui-field*="minute-tab3"]').append(cg);
     element.find('[data-ui-field*="minute-tab3"]').trigger('create');
@@ -181,13 +181,13 @@ $$.bind = function() {
         });
         $$.buildCron();
     });
-    
+
     // hour ui
     cg = $('<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true" />');
     for(var d = 0; d < 24; d++) {
         var hr = d.toString(); if (hr.length==1) hr = '0'+hr;
         var cr = $('<input type="checkbox" id="hour-n-'+hr+'" value="'+d+'" /><label for="hour-n-'+hr+'">'+hr+'</label>');
-        cg.append(cr);    
+        cg.append(cr);
     }
     element.find('[data-ui-field*="hour-tab3"]').append(cg);
     element.find('[data-ui-field*="hour-tab3"]').trigger('create');
@@ -196,7 +196,7 @@ $$.bind = function() {
         element.find('[data-ui-field*="hour-tab"]').hide(100);
         element.find('[data-ui-field="hour-tab'+$(this).val()+'"]').show(100);
         $$.buildCron();
-    });               
+    });
     // every hour value change
     $$.everyHourSlider = element.find('[data-ui-field="hour-tab2"]').find('input').on('change', function(){
         $$.buildCron();
@@ -208,22 +208,22 @@ $$.bind = function() {
         //});
         $$.buildCron();
     });
-    
+
     // day of month
     cg = $('<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true" />');
     for(var d = 1; d <= 31; d++) {
         var hr = d.toString(); if (hr.length==1) hr = '0'+hr;
         var cr = $('<input type="checkbox" id="dayom-n-'+hr+'" value="'+d+'" /><label for="dayom-n-'+hr+'">'+hr+'</label>');
-        cg.append(cr);    
+        cg.append(cr);
     }
     element.find('[data-ui-field*="dayom-tab2"]').append(cg);
-    element.find('[data-ui-field*="dayom-tab2"]').trigger('create');        
+    element.find('[data-ui-field*="dayom-tab2"]').trigger('create');
     // day of month type select
     $$.dayomTypeSelect = element.find('[data-ui-field=dayom-type-select]').on('change', function(){
         element.find('[data-ui-field*="dayom-tab"]').hide(100);
         element.find('[data-ui-field="dayom-tab'+$(this).val()+'"]').show(100);
         $$.buildCron();
-    });               
+    });
     // each day of month selection change
     $$.eachDayomGroup = cg.on('change', function(){
         //$(this).find("input[type=checkbox]:checked").each(function() {
@@ -238,7 +238,7 @@ $$.bind = function() {
         //});
         $$.buildCron();
     });
-    
+
     // month
     // expression type select
     $$.monthTypeSelect = element.find('[data-ui-field=month-type-select]').on('change', function(){
@@ -414,7 +414,7 @@ $$.bind = function() {
     $$.modulesList = $$.element.find('[data-ui-field="modules-select"]');
 }
 
-$$.open = function(name) {
+$$.open = function(name, compactMode) {
     $$.item = {
         Name: '',
         CronExpression: '',
@@ -424,6 +424,7 @@ $$.open = function(name) {
         ProgramId: '', // <-- this field is deprecated since hg r522
         Script:''
     }
+    $$.element.removeClass('compact');
     if (typeof name != 'undefined' && name != '' && name != null) {
         $.mobile.loading('show');
         HG.Automation.Scheduling.Get(name, function (item) {
@@ -454,6 +455,10 @@ $$.open = function(name) {
                     $$.item.Data.time = [{ start: $$.item.Data.start, end: $$.item.Data.end }];
             }
             $$._init();
+            if (compactMode) {
+                $$.element.addClass('compact');
+                $$._setPanel('1');
+            }
             $$.element.popup('open');
             $.mobile.loading('hide');
         });
@@ -507,7 +512,7 @@ $$._init = function() {
     $$.timeEnd.val(moment().format('HH:mm'));
     $$.timeEnd.html(moment().format('LT'));
 
-    // occurrence 
+    // occurrence
     $$.minuteTypeSelect.val($$.item.Data.occur_min_type).selectmenu().trigger('change');
     $$.hourTypeSelect.val($$.item.Data.occur_hour_type).selectmenu().trigger('change');
     $$.dayomTypeSelect.val($$.item.Data.occur_dayom_type).selectmenu().trigger('change');
@@ -685,7 +690,7 @@ $$.updateGfx = function(gfx, items, max, scaleMax, offset, labelFn) {
         gfx.text(m*($$.gfxWidth/scaleMax)+4, 8, labelFn(m)).attr({fill:'white'});
     }
     gfx.rect(0, $$.gfxHeight/2, $$.gfxWidth, $$.gfxHeight).attr({
-        fill: "rgba(100, 100, 100, 50)", 
+        fill: "rgba(100, 100, 100, 50)",
         stroke: "rgb(0,0,0)",
         "stroke-width": 2
     });
@@ -694,18 +699,18 @@ $$.updateGfx = function(gfx, items, max, scaleMax, offset, labelFn) {
         var ex = v.to*($$.gfxWidth/max);
         if (sx > ex) {
             gfx.rect(0, $$.gfxHeight/2, ex, $$.gfxHeight).attr({
-                fill: "rgba(0, 255, 0, 50)", 
+                fill: "rgba(0, 255, 0, 50)",
                 stroke: "rgb(255,255,255)",
                 "stroke-width": 1
             });
             gfx.rect(sx, $$.gfxHeight/2, $$.gfxWidth-sx, $$.gfxHeight).attr({
-                fill: "rgba(0, 255, 0, 50)", 
+                fill: "rgba(0, 255, 0, 50)",
                 stroke: "rgb(255,255,255)",
                 "stroke-width": 1
             });
         } else {
             gfx.rect(sx, $$.gfxHeight/2, ex-sx+3, $$.gfxHeight).attr({
-                fill: "rgba(0, 255, 0, 50)", 
+                fill: "rgba(0, 255, 0, 50)",
                 stroke: "rgb(255,255,255)",
                 "stroke-width": 1
             });
@@ -730,7 +735,7 @@ $$.getMonthCron = function(dateFrom, dateTo, dayOccur, monthOccur) {
         cronItems.push(cron);
         if (mf > mt || mt-mf > 1 || (mf == mt && dt < df)) {
             var mfn = mf<12 ? mf+1 : 1;
-            var mtp = mt>1 ? mt-1 : 12;            
+            var mtp = mt>1 ? mt-1 : 12;
             cron = '* * * '+mfn+(mfn!=mtp?'-'+mtp:'')+' *';
             cronItems.push(cron);
         }
@@ -955,13 +960,13 @@ $$._buildCron = function() {
     var cm = '';
     if ($$.cronTypeSelect.val() == '2') {
         $.each(cronMonth, function(k,v) {
-            cm+='('+v+') : '; 
+            cm+='('+v+') : ';
         });
         cm = '[ '+cm.substring(0, cm.length-3)+' ]';
     }
     var ct = '';
     $.each(cronTime, function(k,v) {
-        ct+='('+v+') : '; 
+        ct+='('+v+') : ';
     });
     ct = ct.substring(0, ct.length-3);
     if (cronOccur != emptyOccur)