useless separators in settings panel are now hidden

diff --git a/static/js/main.js b/static/js/main.js
index 12cbe441e46ec9599d838a6bb4381eac41733ad8..1db121f13e68c4b92ed36f90a6945145d8325ed1 100644 (file)
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -555,11 +555,13 @@ function initUI() {
     
     function checkMinimizeSection() {
         var $switch = $(this);
+        var $sectionDiv = $switch.parents('div.settings-section-title:eq(0)');
+        
         var $minimizeSpan = $switch.parent().find('span.minimize');
         if ($switch.is(':checked') && !$minimizeSpan.hasClass('open')) {
             $minimizeSpan.addClass('open');
         }
-        else if (!$switch.is(':checked') && $minimizeSpan.hasClass('open')) {
+        else if (!$switch.is(':checked') && $minimizeSpan.hasClass('open') && !$sectionDiv.attr('minimize-switch-independent')) {
             $minimizeSpan.removeClass('open');
         }
     }
@@ -602,7 +604,11 @@ function initUI() {
         /* enable the section switch when unminimizing */
         if ($(this).hasClass('open')) {
             var sectionSwitch = $(this).parent().find('input[type=checkbox]');
-            if (sectionSwitch.length && !sectionSwitch.is(':checked')) {
+            var sectionSwitchDiv = $(this).parent().find('div.check-box');
+            var sectionDiv = $(this).parents('div.settings-section-title:eq(0)');
+            if (sectionSwitch.length && !sectionSwitch.is(':checked') &&
+                !sectionSwitchDiv[0]._hideNull && !sectionDiv.attr('minimize-switch-independent')) {
+
                 sectionSwitch[0].checked = true;
                 sectionSwitch.change();
             }
@@ -753,7 +759,8 @@ function isSettingsOpen() {
 }
 
 function updateConfigUi() {
-    var objs = $('tr.settings-item, div.advanced-setting, table.advanced-setting, div.settings-section-title, table.settings');
+    var objs = $('tr.settings-item, div.advanced-setting, table.advanced-setting, div.settings-section-title, table.settings, ' +
+            'div.check-box.camera-config, div.check-box.main-config');
     
     function markHideLogic() {
         this._hideLogic = true;
@@ -854,7 +861,7 @@ function updateConfigUi() {
     
     /* video streaming */
     if (!$('#videoStreamingSwitch').get(0).checked) {
-        $('#videoStreamingSwitch').parent().next('table.settings').find('tr.settings-item').not('.local-streaming').each(markHideLogic);
+        $('#videoStreamingSwitch').parent().next('table.settings').find('tr.settings-item').not('.localhost-streaming').each(markHideLogic);
     }
     if (!$('#streamingServerResizeSwitch').get(0).checked) {
         $('#streamingResolutionSlider').parents('tr:eq(0)').each(markHideLogic);
@@ -977,8 +984,9 @@ function updateConfigUi() {
         var $table = $this.next();
         var controls = $table.find('input, select');
 
-        if ($this.children('input[type=checkbox]').length) {
-            return; /* has switch */
+        var switchButton = $this.children('div.check-box');
+        if (switchButton.length && !switchButton[0]._hideNull) {
+            return; /* has visible switch */
         }
 
         for (var i = 0; i < controls.length; i++) {
@@ -997,6 +1005,51 @@ function updateConfigUi() {
         $table.each(markHideLogic);
     });
     
+    /* hide useless separators */
+    $('div.settings-container table.settings').each(function () {
+        var $table = $(this);
+        
+        /* filter visible rows */
+        var visibleTrs = $table.find('tr').filter(function () {
+            return !this._hideLogic && !this._hideAdvanced && !this._hideNull;
+        }).map(function () {
+            var $tr = $(this);
+            $tr.isSeparator = $tr.find('div.settings-item-separator').length > 0;
+            
+            return $tr;
+        }).get();
+
+        for (var i = 1; i < visibleTrs.length; i++) {
+            var $prevTr = visibleTrs[i - 1];
+            var $tr = visibleTrs[i];
+            if ($prevTr.isSeparator && $tr.isSeparator) {
+                $tr.each(markHideLogic);
+            }
+        }
+
+        /* filter visible rows again */
+        visibleTrs = $table.find('tr').filter(function () {
+            return !this._hideLogic && !this._hideAdvanced && !this._hideNull;
+        }).map(function () {
+            var $tr = $(this);
+            $tr.isSeparator = $tr.find('div.settings-item-separator').length > 0;
+            
+            return $tr;
+        }).get();
+
+        if (visibleTrs.length) {
+            /* test first row */
+            if (visibleTrs[0].isSeparator) {
+                visibleTrs[0].each(markHideLogic);
+            }
+            
+            /* test last row */
+            if (visibleTrs[visibleTrs.length - 1].isSeparator) {
+                visibleTrs[visibleTrs.length - 1].each(markHideLogic);
+            }
+        }
+    });
+    
     var weekDays = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'];
     weekDays.forEach(function (weekDay) {
         var check = $('#' + weekDay + 'EnabledSwitch');
@@ -1108,11 +1161,14 @@ function mainUi2Dict() {
 function dict2MainUi(dict) {
     function markHideIfNull(field, elemId) {
         var elem = $('#' + elemId);
-        var sectionDiv = elem.parents('tr:eq(0), div.settings-section-title:eq(0)');
-        var hideNull = field == null || dict[field] == null;
+        var sectionDiv = elem.parents('div.settings-section-title:eq(0)');
+        var hideNull = (field === true) || (typeof field == 'string' && dict[field] == null);
 
         if (sectionDiv.length) { /* element is a section */
-            sectionDiv.add(sectionDiv.next()).each(function () {this._hideNull = hideNull;});
+            sectionDiv.find('div.check-box').each(function () {this._hideNull = hideNull;});
+            if (hideNull) {
+                sectionDiv.find('input[type=checkbox]').each(function () {this.checked = true;});
+            }
         }
         else { /* element is a config option */
             elem.parents('tr:eq(0)').each(function () {this._hideNull = hideNull;});
@@ -1375,11 +1431,14 @@ function dict2CameraUi(dict) {
 
     function markHideIfNull(field, elemId) {
         var elem = $('#' + elemId);
-        var sectionDiv = elem.parents('tr:eq(0), div.settings-section-title:eq(0)');
-        var hideNull = field == null || dict[field] == null;
+        var sectionDiv = elem.parents('div.settings-section-title:eq(0)');
+        var hideNull = (field === true) || (typeof field == 'string' && dict[field] == null);
 
         if (sectionDiv.length) { /* element is a section */
-            sectionDiv.add(sectionDiv.next()).each(function () {this._hideNull = hideNull;});
+            sectionDiv.find('div.check-box').each(function () {this._hideNull = hideNull;});
+            if (hideNull) {
+                sectionDiv.find('input[type=checkbox]').each(function () {this.checked = true;});
+            }
         }
         else { /* element is a config option */
             elem.parents('tr:eq(0)').each(function () {this._hideNull = hideNull;});
@@ -1409,7 +1468,7 @@ function dict2CameraUi(dict) {
     $('#videoDeviceSwitch')[0].checked = dict['enabled']; markHideIfNull('enabled', 'videoDeviceSwitch');
     $('#deviceNameEntry').val(dict['name']); markHideIfNull('name', 'deviceNameEntry');
     $('#deviceUriEntry').val(dict['device_url']); markHideIfNull('device_url', 'deviceUriEntry');
-    $('#deviceTypeEntry').val(prettyType); markHideIfNull(prettyType, 'deviceTypeEntry');
+    $('#deviceTypeEntry').val(prettyType); markHideIfNull(!prettyType, 'deviceTypeEntry');
     $('#deviceTypeEntry')[0].proto = dict['proto'];
     $('#lightSwitchDetectSwitch')[0].checked = dict['light_switch_detect']; markHideIfNull('light_switch_detect', 'lightSwitchDetectSwitch');
     $('#autoBrightnessSwitch')[0].checked = dict['auto_brightness']; markHideIfNull('auto_brightness', 'autoBrightnessSwitch');
@@ -1500,9 +1559,20 @@ function dict2CameraUi(dict) {
     $('#streamingMotion')[0].checked = dict['streaming_motion']; markHideIfNull('streaming_motion', 'streamingMotion');
     
     var cameraUrl = location.protocol + '//' + location.host + '/picture/' + dict.id + '/';
-    var snapshotUrl = cameraUrl + 'current/';
-    var mjpgUrl = location.protocol + '//' + location.host.split(':')[0] + ':' + dict.streaming_port;
-    var embedUrl = cameraUrl + 'frame/';
+    
+    var snapshotUrl = null;
+    var mjpgUrl = null;
+    var embedUrl = null;
+    
+    if (dict['proto'] == 'mjpeg') {
+        mjpgUrl = dict['url'];
+        embedUrl = cameraUrl + 'frame/';
+    }
+    else {
+        snapshotUrl = cameraUrl + 'current/';
+        mjpgUrl = location.protocol + '//' + location.host.split(':')[0] + ':' + dict.streaming_port;
+        embedUrl = cameraUrl + 'frame/';
+    }
 
     if (dict.proto == 'motioneye') {
         /* cannot tell the mjpg streaming url for a remote motionEye camera */
@@ -1516,9 +1586,9 @@ function dict2CameraUi(dict) {
         }
     }
     
-    $('#streamingSnapshotUrlEntry').val(snapshotUrl); markHideIfNull(snapshotUrl, 'streamingSnapshotUrlEntry');
-    $('#streamingMjpgUrlEntry').val(mjpgUrl); markHideIfNull(mjpgUrl, 'streamingMjpgUrlEntry');
-    $('#streamingEmbedUrlEntry').val(embedUrl); markHideIfNull(embedUrl, 'streamingEmbedUrlEntry');
+    $('#streamingSnapshotUrlEntry').val(snapshotUrl); markHideIfNull(!snapshotUrl, 'streamingSnapshotUrlEntry');
+    $('#streamingMjpgUrlEntry').val(mjpgUrl); markHideIfNull(!mjpgUrl, 'streamingMjpgUrlEntry');
+    $('#streamingEmbedUrlEntry').val(embedUrl); markHideIfNull(!embedUrl, 'streamingEmbedUrlEntry');
     
     /* still images */
     $('#stillImagesSwitch')[0].checked = dict['still_images']; markHideIfNull('still_images', 'stillImagesSwitch');
@@ -1557,18 +1627,18 @@ function dict2CameraUi(dict) {
     
     /* motion notifications */
     $('#emailNotificationsSwitch')[0].checked = dict['email_notifications_enabled']; markHideIfNull('email_notifications_enabled', 'emailNotificationsSwitch');
-    $('#emailAddressesEntry').val(dict['email_notifications_addresses']); markHideIfNull('email_notifications_addresses', 'emailAddressesEntry');
-    $('#smtpServerEntry').val(dict['email_notifications_smtp_server']); markHideIfNull('email_notifications_smtp_server', 'smtpServerEntry');
-    $('#smtpPortEntry').val(dict['email_notifications_smtp_port']); markHideIfNull('email_notifications_smtp_port', 'smtpPortEntry');
-    $('#smtpAccountEntry').val(dict['email_notifications_smtp_account']); markHideIfNull('email_notifications_smtp_account', 'smtpAccountEntry');
-    $('#smtpPasswordEntry').val(dict['email_notifications_smtp_password']); markHideIfNull('email_notifications_smtp_password', 'smtpPasswordEntry');
-    $('#smtpTlsSwitch')[0].checked = dict['email_notifications_smtp_tls']; markHideIfNull('email_notifications_smtp_tls', 'smtpTlsSwitch');
-    $('#emailPictureTimeSpanEntry').val(dict['email_notifications_picture_time_span']); markHideIfNull('email_notifications_picture_time_span', 'emailPictureTimeSpanEntry');
+    $('#emailAddressesEntry').val(dict['email_notifications_addresses']);
+    $('#smtpServerEntry').val(dict['email_notifications_smtp_server']);
+    $('#smtpPortEntry').val(dict['email_notifications_smtp_port']);
+    $('#smtpAccountEntry').val(dict['email_notifications_smtp_account']);
+    $('#smtpPasswordEntry').val(dict['email_notifications_smtp_password']);
+    $('#smtpTlsSwitch')[0].checked = dict['email_notifications_smtp_tls'];
+    $('#emailPictureTimeSpanEntry').val(dict['email_notifications_picture_time_span']);
     $('#webHookNotificationsSwitch')[0].checked = dict['web_hook_notifications_enabled']; markHideIfNull('web_hook_notifications_enabled', 'webHookNotificationsSwitch');
-    $('#webHookUrlEntry').val(dict['web_hook_notifications_url']); markHideIfNull('web_hook_notifications_url', 'webHookUrlEntry');
-    $('#webHookHttpMethodSelect').val(dict['web_hook_notifications_http_method']); markHideIfNull('web_hook_notifications_http_method', 'webHookHttpMethodSelect');
+    $('#webHookUrlEntry').val(dict['web_hook_notifications_url']);
+    $('#webHookHttpMethodSelect').val(dict['web_hook_notifications_http_method']);
     $('#commandNotificationsSwitch')[0].checked = dict['command_notifications_enabled']; markHideIfNull('command_notifications_enabled', 'commandNotificationsSwitch');
-    $('#commandNotificationsEntry').val(dict['command_notifications_exec']); markHideIfNull('command_notifications_exec', 'commandNotificationsEntry');
+    $('#commandNotificationsEntry').val(dict['command_notifications_exec']);
 
     /* working schedule */
     $('#workingScheduleSwitch')[0].checked = dict['working_schedule']; markHideIfNull('working_schedule', 'workingScheduleSwitch');

diff --git a/templates/main.html b/templates/main.html
index 184bd968b8f2df9716d31c7829b24e59cea0250c..968a70b8e2b97a5d43d9e875844768d69851bc7d 100644 (file)
--- a/templates/main.html
+++ b/templates/main.html
@@ -382,29 +382,29 @@
                     {% endfor %}
                 </table>
 
-                <div class="settings-section-title">
+                <div class="settings-section-title" minimize-switch-independent="true">
                     <input type="checkbox" class="styled section streaming camera-config" id="videoStreamingSwitch">
                     <span class="help-mark" title="enable this if you want video streaming for this camera">?</span>
                     <a class="settings-section-title">Video Streaming</a>
                     <span class="minimize"></span>
                 </div>
                 <table class="settings">
-                    <tr class="settings-item advanced-setting local-streaming" min="1" max="30" snap="0" ticks="1|5|10|15|20|25|30" decimals="0">
+                    <tr class="settings-item advanced-setting localhost-streaming" min="1" max="30" snap="0" ticks="1|5|10|15|20|25|30" decimals="0">
                         <td class="settings-item-label"><span class="settings-item-label">Streaming Frame Rate</span></td>
                         <td class="settings-item-value"><input type="text" class="range styled streaming camera-config" id="streamingFramerateSlider"></td>
                         <td><span class="help-mark" title="sets the number of frames transmitted every second on the live streaming">?</span></td>
                     </tr>
-                    <tr class="settings-item advanced-setting local-streaming" min="0" max="100" snap="2" ticksnum="5" decimals="0" unit="%">
+                    <tr class="settings-item advanced-setting localhost-streaming" min="0" max="100" snap="2" ticksnum="5" decimals="0" unit="%">
                         <td class="settings-item-label"><span class="settings-item-label">Streaming Quality</span></td>
                         <td class="settings-item-value"><input type="text" class="range styled streaming camera-config" id="streamingQualitySlider"></td>
                         <td><span class="help-mark" title="sets the live streaming quality (higher values produce a better video quality but require more bandwidth)">?</span></td>
                     </tr>
-                    <tr class="settings-item advanced-setting local-streaming">
+                    <tr class="settings-item advanced-setting localhost-streaming">
                         <td class="settings-item-label"><span class="settings-item-label">Streaming Image Resizing</span></td>
                         <td class="settings-item-value"><input type="checkbox" class="styled streaming camera-config" id="streamingServerResizeSwitch"></td>
                         <td><span class="help-mark" title="when this is enabled, the images are resized before they are sent to the browser (disable when running on a slow CPU)">?</span></td>
                     </tr>
-                    <tr class="settings-item advanced-setting local-streaming" min="0" max="100" snap="2" ticksnum="5" decimals="0" unit="%">
+                    <tr class="settings-item advanced-setting localhost-streaming" min="0" max="100" snap="2" ticksnum="5" decimals="0" unit="%">
                         <td class="settings-item-label"><span class="settings-item-label">Streaming Resolution</span></td>
                         <td class="settings-item-value"><input type="text" class="range styled streaming camera-config" id="streamingResolutionSlider"></td>
                         <td><span class="help-mark" title="the streaming resolution given as percent of the video device resolution (higher values produce better video quality but require more bandwidth)">?</span></td>
@@ -427,7 +427,7 @@
                         <td><span class="help-mark" title="the authentication mode to use when accessing the stream (use Basic instead of Digest if you encounter issues with third party apps)">?</span></td>
                     </tr>
                     {% endif %}
-                    <tr class="settings-item advanced-setting">
+                    <tr class="settings-item advanced-setting localhost-streaming">
                         <td class="settings-item-label"><span class="settings-item-label">Motion Optimization</span></td>
                         <td class="settings-item-value"><input type="checkbox" class="styled streaming camera-config" id="streamingMotion"></td>
                         <td><span class="help-mark" title="enable this if you want a lower frame rate for the live streaming when no motion is detected">?</span></td>
@@ -435,7 +435,7 @@
                     <tr class="settings-item advanced-setting">
                         <td colspan="100"><div class="settings-item-separator"></div></td>
                     </tr>
-                    <tr class="settings-item advanced-setting local-streaming">
+                    <tr class="settings-item advanced-setting localhost-streaming">
                         <td class="settings-item-label"><span class="settings-item-label">Snapshot URL</span></td>
                         <td class="settings-item-value"><input type="text" class="styled streaming camera-config" id="streamingSnapshotUrlEntry" readonly="readonly"></td>
                         <td><span class="help-mark" title="a URL that provides a JPEG image with the most recent snapshot of the camera">?</span></td>
@@ -445,7 +445,7 @@
                         <td class="settings-item-value"><input type="text" class="styled streaming camera-config" id="streamingMjpgUrlEntry" readonly="readonly"></td>
                         <td><span class="help-mark" title="a URL that provides a MJPEG stream of the camera (there is no password protection for this URL!)">?</span></td>
                     </tr>
-                    <tr class="settings-item advanced-setting local-streaming">
+                    <tr class="settings-item advanced-setting localhost-streaming">
                         <td class="settings-item-label"><span class="settings-item-label">Embed URL</span></td>
                         <td class="settings-item-value"><input type="text" class="styled streaming camera-config" id="streamingEmbedUrlEntry" readonly="readonly"></td>
                         <td><span class="help-mark" title="a URL that provides a minimal HTML document containing the camera frame, ready to be embedded">?</span></td>