From: Calin Crisan Date: Sun, 6 Oct 2013 15:42:23 +0000 (+0300) Subject: better ajax error handling X-Git-Url: http://www.vanbest.org/gitweb/?a=commitdiff_plain;h=7040b31e937cf81e16c0fea99a02eedac711467b;p=motioneye-debian better ajax error handling --- diff --git a/doc/todo.txt b/doc/todo.txt index 97b6a0b..baee288 100644 --- 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 126be74..8d2b1dd 100644 --- 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 260b1e2..f54b56c 100644 --- 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 647db28..430f93e 100644 --- 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 = $('
' + + 'You have not configured any camera yet. Click here to add one...
'); + 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();