Better handling connection error and waiting in locks page behaviour on ajax request

  * re-add error message on page
  * add a loading icon when a query is running
  * cancel ajax request when clicking on stop
  * preload image (start icon don't show up on error without it)

1 files changed, 29 insertions, 4 deletions

diff --git a/js/locks.js b/js/locks.js
index 81310e64..e069f1e9 100644
--- a/js/locks.js
+++ b/js/locks.js
@@ -1,20 +1,33 @@
 $(document).ready(function() {
 
-	var timeid = null;
+	var timeid = query = null;
 	var controlLink = $('#control');
+	var errmsg = $('<p class="errmsg">'+Database.errmsg+'</p>')
+		.insertBefore(controlLink)
+		.hide();
+	var loading = $('<img class="loading" alt="[loading]" src="'+ Database.load_icon +'" />')
+		.insertAfter(controlLink)
+		.hide();
 
 	function refreshLocksTable() {
 		if (Database.ajax_time_refresh > 0) {
-			$.ajax({
+			loading.show();
+			query = $.ajax({
 				type: 'GET',
 				dataType: 'html',
 				url: 'database.php?action=refresh_locks&' + Database.server,
-				timeout: Database.ajax_timeout - 100,
 				cache: false,
 				contentType: 'application/x-www-form-urlencoded',
 				success: function(html) {
 					$('#locks_block').html(html);
 					timeid = window.setTimeout(refreshLocksTable, Database.ajax_time_refresh)
+				},
+				error: function() {
+					controlLink.click();
+					errmsg.show();
+				},
+				complete: function () {
+					loading.hide();
 				}
 			});
 		}
@@ -22,17 +35,29 @@ $(document).ready(function() {
 
 	controlLink.toggle(
 		function() {
+			$(errmsg).hide();
 			timeid = window.setTimeout(refreshLocksTable, Database.ajax_time_refresh);
 			controlLink.html('<img src="'+ Database.str_stop.icon +'" alt="" />&nbsp;'
-				+ Database.str_stop.text);
+				+ Database.str_stop.text + '&nbsp;&nbsp;&nbsp;'
+			);
 		},
 		function() {
+			$(errmsg).hide();
+			$(loading).hide();
 			window.clearInterval(timeid);
+			query.abort();
 			controlLink.html('<img src="'+ Database.str_start.icon +'" alt="" />&nbsp;'
 				+ Database.str_start.text
 			);
 		}
 	);
 
+	/* preload images */
+	$('#control img').hide()
+		.attr('src', Database.str_start.icon)
+		.attr('src', Database.str_stop.icon)
+		.show();
+	
+	/* start refreshing */
 	controlLink.click();
 });