diff options
| author | Duda Dornelles <ddornell@thoughtworks.com> | 2014-12-20 09:25:44 -0200 |
|---|---|---|
| committer | Duda Dornelles <ddornell@thoughtworks.com> | 2014-12-20 10:55:24 -0200 |
| commit | a0cbaf84fd86fc91cba892a7a19b0ade7c017a3c (patch) | |
| tree | d911b8ccf7986fd3570c6a42615442bb8acca9df | |
| parent | 32fe00c7b23883a0ce35910537cb1966457624cb (diff) | |
#82: adding "loading..." message to sinalize an ajax call has been made
| -rw-r--r-- | web-ui/app/index.html | 5 | ||||
| -rw-r--r-- | web-ui/app/js/helpers/monitored_ajax.js | 69 | ||||
| -rw-r--r-- | web-ui/app/scss/_alerts.scss | 2 |
3 files changed, 42 insertions, 34 deletions
diff --git a/web-ui/app/index.html b/web-ui/app/index.html index 16521d37..7e3189a2 100644 --- a/web-ui/app/index.html +++ b/web-ui/app/index.html @@ -15,8 +15,9 @@ <body> <div class="off-canvas-wrap" data-offcanvas> - <header id="main"> - <div id="user-alerts"></div> + <header id="main" > + <div id="user-alerts" class="message-panel"></div> + <div id="loading" class="message-panel"><span>Loading...</span></div> </header> <div class="inner-wrap"> diff --git a/web-ui/app/js/helpers/monitored_ajax.js b/web-ui/app/js/helpers/monitored_ajax.js index 3f5ff2fe..0ec92901 100644 --- a/web-ui/app/js/helpers/monitored_ajax.js +++ b/web-ui/app/js/helpers/monitored_ajax.js @@ -16,36 +16,43 @@ */ /*global _ */ -define( - ['page/events', - 'views/i18n'], - function(events, i18n) { - - 'use strict'; - - function monitoredAjax(on, url, config) { - if (config) { - config.timeout = 60*1000; +define(['page/events', 'views/i18n'], function (events, i18n) { + + 'use strict'; + + var messages = { + timeout: 'a timeout occurred', + error: 'problems talking to server', + parseerror: 'got invalid response from server' + }; + + function monitoredAjax(on, url, config) { + config = config || {}; + config.timeout = 60 * 1000; + + var originalBeforeSend = config.beforeSend; + config.beforeSend = function () { + $('#loading').show(); + if (originalBeforeSend) { + originalBeforeSend(); + } + }; + + var originalComplete = config.complete; + config.complete = function () { + $('#loading').hide(); + if (originalComplete) { + originalComplete(); } - return $.ajax(url, config).fail(function(xmlhttprequest, textstatus, message) { - var msg = ''; - switch (textstatus) { - case 'timeout': - msg = 'a timeout occurred'; - break; - case 'error': - msg = 'problems talking to server'; - break; - case 'parseerror': - msg = 'got invalid response from server'; - break; - default: - msg = 'unexpected problem while talking to server'; - } - on.trigger(document, events.ui.userAlerts.displayMessage, { message: i18n(msg) }); - }.bind(this)); - } - - return monitoredAjax; + }; + + return $.ajax(url, config).fail(function (xmlhttprequest, textstatus, message) { + var msg = messages[textstatus] || 'unexpected problem while talking to server'; + on.trigger(document, events.ui.userAlerts.displayMessage, { message: i18n(msg) }); + }.bind(this)); + } -); + + return monitoredAjax; + +}); diff --git a/web-ui/app/scss/_alerts.scss b/web-ui/app/scss/_alerts.scss index 16171fd7..bd1210df 100644 --- a/web-ui/app/scss/_alerts.scss +++ b/web-ui/app/scss/_alerts.scss @@ -1,4 +1,4 @@ -#user-alerts { +.message-panel { width: 100%; margin: 10px auto; position: fixed; |