[minilinux] Visual feedback when loading ML version list

Disable all the controls while loading...

3 files changed, 20 insertions, 26 deletions

diff --git a/modules-available/minilinux/page.inc.php b/modules-available/minilinux/page.inc.php
index 2488b2dc..e973ee6e 100644
--- a/modules-available/minilinux/page.inc.php
+++ b/modules-available/minilinux/page.inc.php
@@ -20,9 +20,6 @@ class Page_MiniLinux extends Page
 		Render::addTemplate('page-minilinux', array(
 			'listurl' => '?do=MiniLinux&async=true&action=list'
 		));
-		Render::addFooter('<script> $(window).load(function (e) {
-			loadSystemList(0);
-			}); // </script>');
 	}
 	
 	protected function doAjax()
diff --git a/modules-available/minilinux/templates/filelist.html b/modules-available/minilinux/templates/filelist.html
index 3c840c57..234b6c41 100644
--- a/modules-available/minilinux/templates/filelist.html
+++ b/modules-available/minilinux/templates/filelist.html
@@ -3,7 +3,7 @@
 		<div id="download-{{id}}">
 			<div class="input-group pull-right" style="max-width: 400px">
 				<span class="input-group-addon slx-ga">{{lang_desiredVersion}}</span>
-				<select id="versionbox" class="form-control" onchange="loadSystemList($('#versionbox').val())">
+				<select id="versionbox" class="form-control">
 					{{#versions}}
 					{{#selected}}
 					<option value="{{version}}" selected>{{version}}</option>
diff --git a/modules-available/minilinux/templates/page-minilinux.html b/modules-available/minilinux/templates/page-minilinux.html
index 007e1e1b..afccf230 100644
--- a/modules-available/minilinux/templates/page-minilinux.html
+++ b/modules-available/minilinux/templates/page-minilinux.html
@@ -1,28 +1,25 @@
 <div id="systemlist">
 	<div class="panel panel-default">{{lang_listObtained}}</div>
-	<!-- OLD CODE ??
-	<script type="text/javascript">
-		var slx_check = setInterval(function() {
-			if (typeof $ === 'undefined') return;
-			clearInterval(slx_check);
-			$('#systemlist').load('{{{listurl}}}', function( response, status, xhr ) {
-				if ( status === "error" ) {
-					var msg = "{{lang_errorGetting}}";
-					$( "#systemlist" ).html( msg + xhr.status + " " + xhr.statusText );
-				}
-			})
-		}, 100);
-	</script>
-	OLD CODE ?? -->
 </div>
 
 <script type="text/javascript"><!--
-	function loadSystemList(version) {
-		$('#systemlist').load('{{{listurl}}}', { token: TOKEN, version: version }, function( response, status, xhr ) {
-			if ( status === "error" ) {
-				var msg = "{{lang_errorGetting}}";
-				$( "#systemlist" ).html( msg + xhr.status + " " + xhr.statusText );
-			}
-		});
-	}
+	document.addEventListener('DOMContentLoaded', function() {
+		var $list = $('#systemlist');
+		function loadSystemList(version) {
+			$list.addClass('disabled');
+			$list.find('select, input, button').prop('disabled', true);
+			$list.find('div, p, span').addClass('text-muted');
+			$list.load('{{{listurl}}}', { token: TOKEN, version: version }, function( response, status, xhr ) {
+				if ( status === "error" ) {
+					var msg = "{{lang_errorGetting}}";
+					$list.html( msg + xhr.status + " " + xhr.statusText );
+				}
+				$list.removeClass('disabled');
+				$('#versionbox').change(function() {
+					loadSystemList($('#versionbox').val());
+				});
+			});
+		}
+		loadSystemList(0);
+	});
 // --></script>
\ No newline at end of file