progress is shown now when adding the first camera

diff --git a/static/css/main.css b/static/css/main.css
index 08d5d60c8272e4b0a6b1b9334e2234a6805a7612..8471257e372adf111c4cd4b58825dd9fbee218e6 100644 (file)
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -150,6 +150,11 @@ img.main-loading-progress {
     margin-top: 50px;
 }
 
+div.add-camera-message {
+    text-align: center;
+    margin-top: 30px;
+}
+
 
     /* settings */
 

diff --git a/static/js/main.js b/static/js/main.js
index 3c2873c35247801f66ad74b69bbf02f51aa8617d..599952501a7580eda4e673ceb07818e444435cfe 100644 (file)
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -737,9 +737,10 @@ function showProgress() {
     applyButton.html('<img class="apply-progress" src="' + staticUrl + 'img/apply-progress.gif">');
     applyButton.css('display', 'inline-block');
     applyButton.animate({'opacity': '1'}, 100);
-    applyButton.addClass('progress');   
+    applyButton.addClass('progress');
     
     $('div.camera-progress').css('opacity', '0.5');
+    $('div.add-camera-message').html('<img class="main-loading-progress" src="' + staticUrl + 'img/main-loading-progress.gif">');
 }
 
 function hideApply() {
@@ -766,6 +767,7 @@ function endProgress() {
     }
     
     $('div.camera-progress').css('opacity', '0');
+    $('div.add-camera-message').remove(); /* in case the message exists */
 }
 
 function isProgress() {
@@ -1722,7 +1724,7 @@ function recreateCameraFrames(cameras) {
         
         if ($('#videoDeviceSelect').find('option').length < 2 && user === 'admin' && $('#motionEyeSwitch')[0].checked) {
             /* invite the user to add a camera */
-            var addCameraLink = $('<div style="text-align: center; margin-top: 30px;">' + 
+            var addCameraLink = $('<div class="add-camera-message">' + 
                     '<a href="javascript:runAddCameraDialog()">You have not configured any camera yet. Click here to add one...</a></div>');
             pageContainer.append(addCameraLink);
         }