better ajax error handling

diff --git a/doc/todo.txt b/doc/todo.txt
index 97b6a0b91becd5724cbfaa6eaaaf81a66d488d13..baee288e2abab8118e0e2be84fad8533408bb324 100644 (file)
--- a/doc/todo.txt
+++ b/doc/todo.txt
@@ -1,6 +1,4 @@
 
--> better ajax error handling
-
 -> authentication
 
 -> hide horrible 404 image on cameras

diff --git a/static/css/main.css b/static/css/main.css
index 126be741c5bd7f9640f7c7f3e8b0dc1c740de0e7..8d2b1dd5ecb231cbf841b508bd91b9a880487371 100644 (file)
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -25,14 +25,6 @@
 }
 
  
-    /* links */
-    
-a {
-    color: inherit;
-    text-decoration: inherit;
-}
-
-
     /* layout */
 
 html {
@@ -43,12 +35,12 @@ div.page,
 div.header-container {
     position: relative;
     min-width: 360px;
-    min-height: 60px;
+    min-height: 90%;
     width: 100%;
 }
 
 div.page {
-    margin-top: 50px;
+    padding-top: 50px;
     padding-bottom: 20px;
     font-size: 1em;
     transition: all 0.5s linear;
@@ -121,6 +113,7 @@ div.logo {
 }
 
 span.logo {
+    color: white;
     vertical-align: middle;
     font-size: 27px;
     font-weight: bold;

diff --git a/static/css/ui.css b/static/css/ui.css
index 260b1e2ae7736d6f50e1f2c62121752171fc1888..f54b56c766726b9d34d1407b288db1e2c680d6e4 100644 (file)
--- a/static/css/ui.css
+++ b/static/css/ui.css
@@ -17,6 +17,20 @@ input[type=checkbox].styled {
     display: none;
 }
 
+a {
+    color: #317CAD;
+    text-decoration: inherit;
+    transition: color 0.1s linear;
+}
+
+a:HOVER {
+    color: #3498db;
+}
+
+a:ACTIVE {
+    color: #317CAD;
+}
+
 
     /* buttons */
 

diff --git a/static/js/main.js b/static/js/main.js
index 647db28a0bcac7fd70e93a878840d6ca6fdf504d..430f93e457488975f7b066d68f1d0d6b4bb7557a 100644 (file)
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -12,7 +12,7 @@ function ajax(method, url, data, callback) {
         cache: false,
         success: callback,
         error: function (request, options, error) {
-            alert('Request failed with code: ' + request.status);
+            showErrorMessage();
             if (callback) {
                 callback();
             }
@@ -27,6 +27,11 @@ function ajax(method, url, data, callback) {
     $.ajax(options);
 }
 
+function showErrorMessage(message) {
+    message = message || 'An error occurred. Refreshing is recommended.';
+    showPopupMessage(message, 'error');
+}
+
 Object.keys = Object.keys || (function () {
     var hasOwnProperty = Object.prototype.hasOwnProperty;
     var hasDontEnumBug = !({toString: null}).propertyIsEnumerable('toString');
@@ -706,7 +711,9 @@ function doApply() {
     
     ajax('POST', '/config/0/set/', pushConfigs, function (data) {
         if (data == null || data.error) {
-            return; // TODO handle error
+            endProgress();
+            showErrorMessage(data && data.error);
+            return;
         }
         
         /* update the camera name in the device select */
@@ -737,7 +744,9 @@ function doRemCamera() {
         showProgress();
         ajax('POST', '/config/' + cameraId + '/rem/', null, function (data) {
             if (data == null || data.error) {
-                return; // TODO handle error
+                endProgress();
+                showErrorMessage(data && data.error);
+                return;
             }
             
             hideApply();
@@ -753,7 +762,8 @@ function fetchCurrentConfig() {
     /* fetch the main configuration */
     ajax('GET', '/config/main/get/', null, function (data) {
         if (data == null || data.error) {
-            return; // TODO handle error
+            showErrorMessage(data && data.error);
+            return;
         }
         
         dict2MainUi(data);
@@ -761,7 +771,8 @@ function fetchCurrentConfig() {
         /* fetch the camera list */
         ajax('GET', '/config/list/', null, function (data) {
             if (data == null || data.error) {
-                return; // TODO handle error
+                showErrorMessage(data && data.error);
+                return;
             }
             
             var i, cameras = data.cameras;
@@ -779,7 +790,6 @@ function fetchCurrentConfig() {
             }
             else {
                 videoDeviceSelect[0].selectedIndex = -1;
-                // TODO if admin, set a message saying that the user should add a camera
             }
             
             recreateCameraFrames(cameras);
@@ -793,7 +803,8 @@ function fetchCurrentCameraConfig() {
     if (cameraId != null) {
         ajax('GET', '/config/' + cameraId + '/get/', null, function (data) {
             if (data == null || data.error) {
-                return; // TODO handle error
+                showErrorMessage(data && data.error);
+                return;
             }
             
             dict2CameraUi(data);
@@ -839,7 +850,8 @@ function pushPreview() {
     
     ajax('POST', '/config/' + cameraId + '/set_preview/', data, function (data) {
         if (data == null || data.error) {
-            return; // TODO handle error
+            showErrorMessage(data && data.error);
+            return;
         }
     });
 }
@@ -966,7 +978,9 @@ function runAddCameraDialog() {
         
         ajax('GET', '/config/list/', data, function (data) {
             if (data == null || data.error) {
-                return; // TODO handle error
+                progress.remove();
+                showErrorMessage(data && data.error);
+                return;
             }
             
             cameraSelect.html('');
@@ -996,7 +1010,9 @@ function runAddCameraDialog() {
     /* fetch the available devices */
     ajax('GET', '/config/list_devices/', null, function (data) {
         if (data == null || data.error) {
-            return; // TODO handle error
+            hideModalDialog();
+            showErrorMessage(data && data.error);
+            return;
         }
         
         /* add available devices */
@@ -1035,10 +1051,11 @@ function runAddCameraDialog() {
                 }
 
                 showProgress();
-
                 ajax('POST', '/config/add/', data, function (data) {
                     if (data == null || data.error) {
-                        return; // TODO handle error
+                        endProgress();
+                        showErrorMessage(data && data.error);
+                        return;
                     }
                     
                     hideApply();
@@ -1149,6 +1166,9 @@ function recreateCameraFrames(cameras) {
         cameras = cameras.filter(function (camera) {return camera.enabled;});
         var i, camera, cameraId;
         
+        /* remove everything that is not a camera frame from the page */
+        pageContainer.children().not('div.camera-frame').remove();
+        
         /* remove no longer existing camera frames */
         var addedCameraFrames = pageContainer.find('div.camera-frame');
         for (i = 0; i < addedCameraFrames.length; i++) {
@@ -1169,6 +1189,13 @@ function recreateCameraFrames(cameras) {
                 cameraFrame[0].framerate = camera.streaming_framerate;
             }
         }
+        
+        if ($('#videoDeviceSelect').find('option').length < 2) {
+            /* invite the user to add a camera */
+            var addCameraLink = $('<div style="text-align: center; margin-top: 30px;">' + 
+                    '<a href="javascript:runAddCameraDialog()">You have not configured any camera yet. Click here to add one...</a></div>');
+            pageContainer.append(addCameraLink);
+        }
     }
     
     if (cameras != null) {
@@ -1177,7 +1204,8 @@ function recreateCameraFrames(cameras) {
     else {
         ajax('GET', '/config/list/', null, function (data) {
             if (data == null || data.error) {
-                return; // TODO handle error
+                showErrorMessage(data && data.error);
+                return;
             }
             
             updateCameras(data.cameras);
@@ -1194,13 +1222,16 @@ function doCloseCamera(cameraId) {
     showProgress();
     ajax('GET', '/config/' + cameraId + '/get/', null, function (data) {
         if (data == null || data.error) {
-            return; // TODO handle error
+            endProgress();
+            showErrorMessage(data && data.error);
+            return;
         }
         
         data['enabled'] = false;
         ajax('POST', '/config/' + cameraId + '/set/', data, function (data) {
             if (data == null || data.error) {
-                return; // TODO handle error
+                showErrorMessage(data && data.error);
+                return;
             }
             
             endProgress();