luci-app-lxc: fix "plain-vanilla" integration, part 3

* migrate JS generated HTML tables to divs
* remove (most of) the inline styles
* various markup cleanups

That's the final part ... hopefully it's now in a  more usable &
maintainable state.

Signed-off-by: Dirk Brenken <dev@brenken.org>

1 files changed, 253 insertions, 264 deletions

diff --git a/applications/luci-app-lxc/luasrc/view/lxc.htm b/applications/luci-app-lxc/luasrc/view/lxc.htm
index e02c3a7888..a68143b796 100644
--- a/applications/luci-app-lxc/luasrc/view/lxc.htm
+++ b/applications/luci-app-lxc/luasrc/view/lxc.htm
@@ -14,42 +14,21 @@ Author: Petar Koretic <petar.koretic@sartura.hr>
 
 -%>
 
-<%
+<%-
 local fs     = require "nixio"
 local target = fs.uname().machine
-%>
-
-<style type="text/css">
-table.cbi-section-table th,
-table.cbi-section-table td,
-.cbi-section-table-cell,
-.cbi-input-select,
-.cbi-input-text
-{
-	text-align:left;
-	vertical-align:top;
-	padding-left:2px;
-	margin-right:auto;
-	margin-left:0px;
-}
-
-.cbi-input-select,
-.cbi-input-text
-{
-	width:15em;
-}
-</style>
+-%>
 
 <fieldset class="cbi-section">
 	<legend><%:Available Containers%></legend>
 	<div class="cbi-section-node">
-		<table id="t_lxc_list" class="cbi-section-table">
-			<tr class="cbi-section-table-titles">
-				<th class="cbi-section-table-cell"><%:Name%></th>
-				<th class="cbi-section-table-cell"><%:Status%></th>
-				<th class="cbi-section-table-cell"><%:Actions%></th>
-			</tr>
-		</table>
+		<div class="table cbi-section-table" id="t_lxc_list">
+			<div class="tr cbi-section-table-titles">
+				<div class="th cbi-section-table-cell"><%:Name%></div>
+				<div class="th cbi-section-table-cell"><%:Status%></div>
+				<div class="th cbi-section-table-cell"><%:Actions%></div>
+			</div>
+		</div>
 	</div>
 </fieldset>
 
@@ -61,26 +40,21 @@ table.cbi-section-table td,
 <fieldset class="cbi-section">
 	<legend><%:Create New Container%></legend>
 	<div class="cbi-section-node">
-		<table id="t_lxc_create" class="cbi-section-table">
-			<tr class="cbi-section-table-titles">
-				<th class="cbi-section-table-cell"><%:Name%></th>
-				<th class="cbi-section-table-cell"><%:Template%></th>
-				<th class="cbi-section-table-cell"><%:Actions%></th>
-			</tr>
-			<tr id="tr_holder">
-				<td>
-					<input class="cbi-input-text" type="text" id="tx_name" placeholder="<%:Enter new name%>" value='' />
-				</td>
-				<td>
-					<select id="s_template" class="cbi-input-select cbi-button">
-					</select>
-				</td>
-				<td>
-					<input type="button" id="bt_create" value="<%:Create%>" onclick="lxc_create(tr_holder)" class="cbi-button cbi-button-add" />
+		<div class="table cbi-section-table" id="t_lxc_create">
+			<div class="tr cbi-section-table-titles">
+				<div class="th cbi-section-table-cell"><%:Name%></div>
+				<div class="th cbi-section-table-cell"><%:Template%></div>
+				<div class="th cbi-section-table-cell"><%:Actions%></div>
+			</div>
+			<div class="tr cbi-section-table-row" id="div_holder">
+				<div class="td"><input class="cbi-input-text" type="text" id="tx_name" placeholder="<%:Enter new name%>" value='' /></div>
+				<div class="td"><select id="s_template" class="cbi-input-select cbi-button"></select></div>
+				<div class="td">
+					<input type="button" id="bt_create" value="<%:Create%>" onclick="lxc_create(div_holder)" class="cbi-button cbi-button-add" />
 					<span id="lxc-add-loader" style="display:inline-block; width:16px; height:16px; margin:0 5px"></span>
-				</td>
-			</tr>
-		</table>
+				</div>
+			</div>
+		</div>
 	</div>
 </fieldset>
 
@@ -98,313 +72,310 @@ table.cbi-section-table td,
 
 	var t_lxc_list  = document.getElementById('t_lxc_list');
 	var loader_html = '<img src="<%=resource%>/icons/loading.gif" alt="<%:Loading%>" width="16" height="16" style="vertical-align:middle" />';
-	var timeout_msg = 0
 	var output_list = document.getElementById("lxc-list-output")
 	var output_add  = document.getElementById("lxc-add-output")
 	var loader_add  = document.getElementById("lxc-add-loader")
 
-	info_message(output_add, "Template download in progress, please be patient!", 10000)
-
-	function lxc_create(tr)
+	function lxc_create(div)
 	{
-		var lxc_name     = tr.querySelector("#tx_name").value.replace(/[\s!@#$%^&*()+=\[\]{};':"\\|,<>\/?]/g,'')
-		var lxc_template = tr.querySelector("#s_template").value
-		var bt_create    = tr.querySelector("#bt_create")
+		var lxc_name     = div.querySelector("#tx_name").value.replace(/[\s!@#$%^&*()+=\[\]{};':"\\|,<>\/?]/g,'');
+		var lxc_template = div.querySelector("#s_template").value;
+		var bt_create    = div.querySelector("#bt_create");
 
 		if (t_lxc_list.querySelector("[data-id='" + lxc_name + "']") != null)
-			return info_message(output_add, "Container with that name already exists!", 4000)
+		{
+			return info_message(output_add, "Container with that name already exists!", 2000);
+		}
 
-		bt_create.disabled = true
-		output_add.innerHTML = ''
+		bt_create.disabled = true;
+		output_add.innerHTML = '';
 
-		if (!lxc_name || !lxc_name.length)
+		if (!lxc_template)
 		{
-			bt_create.disabled = false
-			return info_message(output_add, "The 'Name' field must not be empty!", 4000)
+			return set_no_template();
 		}
 
-		if (!lxc_template)
+		if (!lxc_name || !lxc_name.length)
 		{
-			bt_create.disabled = false
-			return info_message(output_add, "The 'Template' field must not be empty!", 4000)
+			bt_create.disabled = false;
+			return info_message(output_add, "The 'Name' field must not be empty!", 2000);
 		}
 
-		loading(loader_add)
+		loading(loader_add);
 
 		new XHR().get('<%=luci.dispatcher.build_url("admin", "services")%>/lxc_create/' + '%h/%h'.format(lxc_name, lxc_template) , null,
 		function(x)
 		{
-			bt_create.disabled = false
-
-			loading(loader_add, 0)
+			bt_create.disabled = false;
+			loading(loader_add, 0);
 
 			if (!x)
-				info_message(output_add, "Container creation failed!")
+			{
+				info_message(output_add, "Container creation failed!", 2000);
+			}
 		})
 	}
 
 	function lxc_create_template(lxc_name, lxc_state)
 	{
-		var info_row = t_lxc_list.querySelector("#empty")
-		if (info_row)
-			t_lxc_list.deleteRow(1)
-
-		var actions = ''
-		actions += '<input type="button" onclick="action_handler(this)" data-action="start" value="<%:Start%>" class="cbi-button cbi-button-apply" />'
-		actions += '&#160;<input type="button" onclick="action_handler(this)" data-action="stop" value="<%:Stop%>" class="cbi-button cbi-button-reset" />'
-		actions += '&#160;<input type="button" onclick="action_handler(this)" data-action="destroy" value="<%:Delete%>" class="cbi-button cbi-button-remove" />'
-		actions += '&#160;<select class="cbi-input-select cbi-button" onchange="action_more_handler(this)">\
+		if (document.getElementById(lxc_name))
+		{
+			return;
+		}
+
+		info_message(output_list, "");
+		var actions = '';
+		actions += '<input type="button" onclick="action_handler(this)" data-action="start" value="<%:Start%>" class="cbi-button cbi-button-apply" />';
+		actions += '&#160;<input type="button" onclick="action_handler(this)" data-action="stop" value="<%:Stop%>" class="cbi-button cbi-button-reset" />';
+		actions += '&#160;<input type="button" onclick="action_handler(this)" data-action="destroy" value="<%:Delete%>" class="cbi-button cbi-button-remove" />';
+		actions += '&#160;<select class="cbi-input-select cbi-button" style="width:10em" onchange="action_more_handler(this)">\
 						<option selected="selected" disabled="disabled">more</option>\
 						<option>configure</option>\
 						<option>freeze</option>\
 						<option>unfreeze</option>\
 						<option>reboot</option>\
-					</select>'
-		actions += '<span data-loader="" style="display:inline-block; width:16px; height:16px; margin:0 5px"></span>'
-
-		var row = t_lxc_list.insertRow(-1)
-		var cell = row.insertCell(-1)
-		cell.innerHTML = '%q%h%q'.format("<strong>", lxc_name, "</strong>")
-		cell.width = "30%"
-		cell.setAttribute("data-id", lxc_name)
-
-		cell = row.insertCell(-1)
-		cell.width = "20%"
-		cell.innerHTML = "<img src='"+window.img[lxc_state]+"'/>"
-
-		cell = row.insertCell(-1)
-		cell.width = "50%"
-		cell.innerHTML = actions
+					</select>';
+		actions += '<span data-loader="" style="display:inline-block; width:16px; height:16px; margin:0 5px"></span>';
+
+		var div0 = document.createElement("div");
+		div0.className = "tr cbi-section-table-row";
+		div0.id = lxc_name;
+		div0.setAttribute("data-id", lxc_name);
+
+		var div1 = document.createElement("div");
+		div1.className = "td";
+		div1.style.width = "30%";
+		div1.innerHTML = '%q%h%q'.format("<strong>", lxc_name, "</strong>");
+
+		var div2 = document.createElement("div");
+		div2.className = "td";
+		div2.style.width = "20%";
+		div2.innerHTML = "<img src='"+window.img[lxc_state]+"'/>";
+
+		var div3 = document.createElement("div");
+		div3.className = "td";
+		div3.style.width = "50%";
+		div3.innerHTML = actions
+
+		document.getElementById("t_lxc_list").appendChild(div0);
+		div0.appendChild(div1);
+		div0.appendChild(div2);
+		div0.appendChild(div3);
 	}
 
 	function action_handler(self)
 	{
-		var action     = self.getAttribute("data-action");
-		var bt_action  = self
-		var lxc_name   = self.parentNode.parentNode.children[0].getAttribute('data-id')
-		var status_img = self.parentNode.parentNode.querySelector('img')
-		var loader     = self.parentNode.querySelector('[data-loader]')
+		var bt_action  = self;
+		var action     = self.dataset['action'];
+		var lxc_name   = self.parentNode.parentNode.dataset['id'];
+		var status_img = self.parentNode.parentNode.querySelector('img');
+		var loader     = self.parentNode.querySelector('[data-loader]');
 
-		bt_action.disabled = true
+		bt_action.disabled = true;
 
 		if (action == "stop")
 		{
-			loading(loader)
+			loading(loader);
 
 			new XHR().get('<%=luci.dispatcher.build_url("admin", "services")%>/lxc_action/' + '%h/%h'.format(action, lxc_name), null,
 			function(x, ec)
 			{
-				loading(loader, 0)
-				bt_action.disabled = false
+				loading(loader, 0);
+				bt_action.disabled = false;
 
 				if (!x || ec)
-					return info_message(output_list,"Action failed!")
-
-				set_status(status_img, "red")
-
+				{
+					return info_message(output_list,"Action failed!", 2000);
+				}
+				set_status(status_img, "red");
 			});
 		}
-
 		else if (action == "start")
 		{
-			loading(loader)
+			loading(loader);
 
 			new XHR().get('<%=luci.dispatcher.build_url("admin", "services")%>/lxc_action/' + '%h/%h'.format(action, lxc_name), null,
 			function(x, data)
 			{
-				loading(loader, 0)
-				bt_action.disabled = false
+				loading(loader, 0);
+				bt_action.disabled = false;
 
-				if (!x /*|| ec */)
-					return info_message(output_list,"Action failed!")
-
-				set_status(status_img, "green")
+				if (!x || data)
+				{
+					return info_message(output_list,"Action failed!", 2000);
+				}
+				set_status(status_img, "green");
 			});
 		}
-
 		else if (action == "destroy")
 		{
-			var tr = self.parentNode.parentNode
-			var img = tr.querySelector('img')
+			var div = self.parentNode.parentNode
+			var img = div.querySelector('img')
+
 			if (img.getAttribute('src') != window.img["red"])
 			{
-				bt_action.disabled = false
-				return info_message(output_list,"Container is still running!")
+				bt_action.disabled = false;
+				return info_message(output_list,"Container is still running!", 2000);
 			}
 
 			if (!confirm("This will completely remove a stopped LXC container from disk. Are you sure?"))
-				return
-
-			loading(loader)
+			{
+				bt_action.disabled = false;
+				return;
+			}
+			loading(loader);
 
 			new XHR().get('<%=luci.dispatcher.build_url("admin", "services")%>/lxc_action/' + '%h/%h'.format(action, lxc_name), null,
 			function(x, ec)
 			{
-				loading(loader, 0)
-				bt_action.disabled = false
+				loading(loader, 0);
+				bt_action.disabled = false;
 
 				if (!x || ec)
-					return info_message(output_list,"Action failed!")
-
-				var row = self.parentNode.parentNode
-				row.parentNode.removeChild(row)
-
+				{
+					return info_message(output_list,"Action failed!", 2000);
+				}
+				var div = self.parentNode.parentNode;
+				div.parentNode.removeChild(div);
 			});
 		}
 	}
 
 	function lxc_configure_handler(self)
 	{
-		var td = self.parentNode
-		var textarea = td.querySelector('[data-id]')
-		var lxc_name = textarea.getAttribute('data-id')
-		var lxc_configuration = textarea.value
+		var div      = self.parentNode;
+		var textarea = div.querySelector('[data-id]');
+		var lxc_name = textarea.dataset['id'];
+		var lxc_conf = textarea.value;
 
-		new XHR().post('<%=luci.dispatcher.build_url("admin", "services")%>/lxc_configuration_set/' + lxc_name, "lxc_configuration=" + encodeURIComponent(lxc_configuration) ,
+	new XHR().post('<%=luci.dispatcher.build_url("admin", "services")%>/lxc_configuration_set/' + lxc_name, "lxc_conf=" + encodeURIComponent(lxc_conf),
 		function(x)
 		{
 			if (!x || x.responseText != "0")
-				return info_message(output_list,"Action failed!")
-
-			info_message(output_list,"LXC configuration updated")
-			var row = td.parentNode
-			row.parentNode.removeChild(row)
+			{
+				return info_message(output_list,"Action failed!", 2000);
+			}
+			info_message(output_list,"LXC configuration updated", 2000);
+			var rmdiv = div.parentNode;
+			rmdiv.parentNode.removeChild(rmdiv);
 		})
 	}
 
-	function lxc_rename_template(lxc_name)
-	{
-		var h = '\
-			<input data-id="'+ lxc_name + '" type="text" placeholder="Enter new name" /> \
-			<input data-id="bt_confirm" onclick="lxc_rename_handler(this)" type="button" class="cbi-button" value="Confirm" />'
-
-		return h
-	}
-
-	function lxc_configure_template(lxc_name, lxc_configuration)
+	function lxc_configure_template(lxc_name, lxc_conf)
 	{
 		var h = '\
-			<textarea data-id="'+ lxc_name + '" rows="20" style="width:100%">'+ lxc_configuration +'</textarea> \
-			<input data-id="bt_confirm" onclick="lxc_configure_handler(this)" type="button" class="cbi-button" value="Confirm" />'
-
-		return h
+			<textarea data-id="' + lxc_name + '" rows="20" style="width:600px;font-family:monospace;white-space:pre;overflow-wrap:normal;overflow-x:scroll;">'+ lxc_conf +'</textarea> \
+			<input data-id="bt_confirm" onclick="lxc_configure_handler(this)" type="button" class="cbi-button" value="Confirm" />';
+		return h;
 	}
 
 	function action_more_handler(self)
 	{
-		var lxc_name = self.parentNode.parentNode.querySelector('[data-id]').getAttribute('data-id')
-		var loader   = self.parentNode.parentNode.querySelector('[data-loader]')
-		var option   = self.options[self.selectedIndex].text
-
-		self.value = "more"
+		var lxc_name = self.parentNode.parentNode.dataset['id'];
+		var loader   = self.parentNode.querySelector('[data-loader]');
+		var option   = self.options[self.selectedIndex].text;
+		self.value   = "more";
 
 		switch(option)
 		{
 			case "configure":
-				var tr = document.createElement('tr')
-				var row = self.parentNode.parentNode
-				var next_row = row.nextSibling
-				if (next_row && next_row.getAttribute('data-action') !== null)
-					row.parentNode.removeChild(next_row)
+				var div0 = document.createElement('div');
+				var div1 = self.parentNode.parentNode;
+				var next_div = div1.nextSibling;
+
+				if (next_div && next_div.dataset['action'] !== null)
+				{
+					div1.parentNode.removeChild(next_div);
+				}
 
 				new XHR().get('<%=luci.dispatcher.build_url("admin", "services")%>/lxc_configuration_get/' + lxc_name, null,
 				function(x)
 				{
-					tr.innerHTML="<td colspan='" + row.cells.length + "'>" + lxc_configure_template(lxc_name, x.responseText) + "</td>"
-					tr.setAttribute('data-action','')
-					row.parentNode.insertBefore(tr, row.nextSibling)
+					div0.innerHTML="<div>" + lxc_configure_template(lxc_name, x.responseText) + "</div>";
+					div0.setAttribute('data-action','');
+					div1.parentNode.insertBefore(div0, div1.nextSibling);
 				})
-
-			break
+			break;
 
 			case "freeze":
-				var tr = self.parentNode.parentNode
-				var img = tr.querySelector('img')
+				var img = self.parentNode.parentNode.querySelector('img');
 				if(img.getAttribute('src') != window.img["green"])
-					return info_message(output_list,"Container is not running!")
+				{
+					return info_message(output_list,"Container is not running!", 2000);
+				}
+
+				loading(loader);
 
-				loading(loader)
 				new XHR().get('<%=luci.dispatcher.build_url("admin", "services")%>/lxc_action/' + '%h/%h'.format(option, lxc_name), null,
 				function(x, ec)
 				{
 					loading(loader, 0)
 					if (!x || ec)
-						return info_message(output_list,"Action failed!")
-
-					set_status(img, "purple")
+					{
+						return info_message(output_list,"Action failed!", 2000);
+					}
+					set_status(img, "purple");
 				})
-
-			break
+			break;
 
 			case "unfreeze":
-				var tr = self.parentNode.parentNode
-				var img = tr.querySelector('img')
-
+				var img = self.parentNode.parentNode.querySelector('img');
 				if(img.getAttribute('src') != window.img["purple"])
-					return info_message(output_list,"Container is not frozen!")
+				{
+					return info_message(output_list,"Container is not frozen!", 2000);
+				}
+
+				loading(loader);
 
-				loading(loader)
 				new XHR().get('<%=luci.dispatcher.build_url("admin", "services")%>/lxc_action/' + '%h/%h'.format(option, lxc_name), null,
 				function(x, ec)
 				{
-					loading(loader, 0)
+					loading(loader, 0);
 					if (!x || ec)
-						return info_message(output_list,"Action failed!")
-
-					set_status(img, "green")
+					{
+						return info_message(output_list,"Action failed!", 2000);
+					}
+					set_status(img, "green");
 				})
-
-			break
+			break;
 
 			case "reboot":
-				var tr = self.parentNode.parentNode
-				var img = tr.querySelector('img')
+				var img = self.parentNode.parentNode.querySelector('img');
 				if(img.getAttribute('src') != window.img["green"])
-					return info_message(output_list,"Container is not running!")
+				{
+					return info_message(output_list,"Container is not running!", 2000);
+				}
 
 				if (!confirm("Are you sure?"))
-					return
+				{
+					return;
+				}
+
+				loading(loader);
 
-				loading(loader)
 				new XHR().get('<%=luci.dispatcher.build_url("admin", "services")%>/lxc_action/' + '%h/%h'.format(option, lxc_name), null,
 				function(x, ec)
 				{
 					loading(loader, 0)
 					if (!x || ec)
-						return info_message(output_list,"Action failed!")
-
-					info_message(output_list,"LXC rebooted")
+					{
+						return info_message(output_list,"Action failed!", 2000);
+					}
+					info_message(output_list,"LXC container rebooted", 2000);
 				})
-			break
+			break;
 		}
-
 	}
 
-	function set_empty(t_lxc_list)
+	function set_no_container()
 	{
-		if (document.getElementById('empty') !== null)
-			return
-
-		var row_count = t_lxc_list.rows.length;
-		while(--row_count) t_lxc_list.deleteRow(row_count);
-
-		var row = t_lxc_list.insertRow(-1);
-		row.id = 'empty'
-		var cell = row.insertCell(0);
-		cell.colSpan = 3;
-		cell.innerHTML = '<em><br />There are no containers available yet.</em>';
+		info_message(output_list, "There are no containers available yet.");
 	}
 
-	function set_empty_template()
+	function set_no_template()
 	{
-		var row_count = t_lxc_create.rows.length;
-		while(--row_count) t_lxc_create.deleteRow(row_count);
-
-		var row = t_lxc_create.insertRow(-1);
-		row.id = 'tr_holder'
-		var cell = row.insertCell(0);
-		cell.colSpan = 3;
-		cell.innerHTML = '<em><br />There are no templates for your architecture (<%=target%>) available, please select another containers URL.</em>';
+		bt_create.disabled = true;
+		info_message(output_add, "There are no templates for your architecture (<%=target%>) available, please select another containers URL.");
 	}
 
 	function lxc_list_update()
@@ -412,96 +383,113 @@ table.cbi-section-table td,
 		XHR.poll(4, '<%=luci.dispatcher.build_url("admin", "services")%>/lxc_action/list', null,
 		function(x, data)
 		{
-			if (!x) return;
-
-			if (!data)
-				return set_empty(t_lxc_list)
+			if (!x || !data)
+			{
+				return;
+			}
 
-			var lxc_count = Object.keys(data).length
+			var lxc_count = Object.keys(data).length;
 			if (!lxc_count)
-				return set_empty(t_lxc_list)
-
-			if (document.getElementById('empty') !== null)
-				t_lxc_list.deleteRow(1);
+			{
+				return set_no_container();
+			}
 
-			var lxcs = t_lxc_list.querySelectorAll('td[data-id]')
-			var lxc_name_table = {}
+			var lxcs = t_lxc_list.querySelectorAll('td[data-id]');
+			var lxc_name_div = {};
 			for (var i = 0, len = lxcs.length; i < len; i++)
 			{
-				var lxc_name = lxcs[i].getAttribute('data-id')
+				var lxc_name = lxcs[i].dataset['id'];
 				if (!(lxc_name in data))
 				{
-					var row = t_lxc_list.querySelector("[data-id='" + lxc_name + "']").parentNode
-					row.parentNode.removeChild(row)
-					continue
+					var div = t_lxc_list.querySelector("[data-id='" + lxc_name + "']").parentNode;
+					div.parentNode.removeChild(div);
+					continue;
 				}
-
-				lxc_name_table[lxc_name] = lxcs[i].parentNode.querySelector('img')
+				lxc_name_div[lxc_name] = lxcs[i].parentNode.querySelector('img');
 			}
 
 			for(var key in data)
 			{
-				var lxc_name = key
-				var state = window.states[data[key]]
+				var lxc_name = key;
+				var state = window.states[data[key]];
 
-				if (!(lxc_name in lxc_name_table))
-					lxc_create_template(lxc_name, state)
-
-				else if (state != get_status(lxc_name_table[lxc_name]))
-					set_status(lxc_name_table[lxc_name], state)
+				if (!(lxc_name in lxc_name_div))
+				{
+					lxc_create_template(lxc_name, state);
+				}
+				else if (state != get_status(lxc_name_div[lxc_name]))
+				{
+					set_status(lxc_name_div[lxc_name], state);
+				}
 			}
-
 		})
 	}
 
 	function loading(elem, state)
 	{
-		state = (typeof state === 'undefined') ? 1 : state
-
+		state = (typeof state === 'undefined') ? 1 : state;
 		if (state === 1)
-			elem.innerHTML = loader_html
+		{
+			elem.innerHTML = loader_html;
+		}
 		else
-			setTimeout(function() { elem.innerHTML = ''}, 1000)
+		{
+			setTimeout(function() { elem.innerHTML = ''}, 1000);
+		}
 	}
 
 	function set_status(elem, state)
 	{
-		state = (typeof state === 'undefined') ? 1 : state
-
-		setTimeout(function() { elem.setAttribute('src', window.img[state])}, 300)
+		state = (typeof state === 'undefined') ? 1 : state;
+		setTimeout(function() { elem.setAttribute('src', window.img[state])}, 300);
 	}
 
 	function get_status(elem)
 	{
-		var src = elem.getAttribute('src')
-
+		var src = elem.getAttribute('src');
 		for (var i in img)
 		{
 			if (img[i] == src)
-				return i
+			{
+				return i;
+			}
 		}
 	}
 
 	function info_message(output, msg, timeout)
 	{
-		timeout = timeout || 3000
-		output.innerHTML = msg
-		clearTimeout(timeout_msg)
-		timeout_msg = setTimeout(function(){ output.innerHTML=""}, timeout);
+		timeout = timeout || 0;
+		output.innerHTML = '<em>' + msg + '</em>';
+		if (timeout > 0)
+		{
+			setTimeout(function(){ output.innerHTML=""}, timeout);
+		}
 	}
 
-	lxc_list_update()
+	lxc_list_update();
+
+	info_message(output_add, "Template download in progress, please be patient!");
 
 	new XHR().get('<%=luci.dispatcher.build_url("admin", "services")%>/lxc_get_downloadable', null,
 	function(x, data)
 	{
-		if (!x) return;
+		if (!x)
+		{
+			return;
+		}
 
-		if (!data) return set_empty_template();
+		if (!data)
+		{
+			return set_no_template();
+		}
 
 		var lxc_count = Object.keys(data).length;
-		if (!lxc_count) return set_empty_template();
+		if (!lxc_count)
+		{
+			return set_no_template();
+		}
 
+		bt_create.disabled = false;
 		var select = document.getElementById("s_template");
 		for(var key in data)
 		{
@@ -510,6 +498,7 @@ table.cbi-section-table td,
 			option.text = data[key].replace(/[_:]/g, ' ');
 			select.add(option, -1);
 		}
+		info_message(output_add, "");
 	})
 //]]>
 </script>