Difuse/luci
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

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

Browse source 
* 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>
This commit is contained in:
Dirk Brenken 2018-05-30 21:56:50 +02:00
parent d9b6c5dd78
commit d8f2f24a5b
2 changed files with 251 additions and 262 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
applications/luci-app-lxc/luasrc/controller/lxc.lua
View file

@ -131,7 +131,7 @@ end
function lxc_configuration_set(lxc_name) function lxc_configuration_set(lxc_name)
luci.http.prepare_content("text/plain") luci.http.prepare_content("text/plain")
local lxc_configuration = luci.http.formvalue("lxc_configuration") local lxc_configuration = luci.http.formvalue("lxc_conf")
if lxc_configuration == nil then if lxc_configuration == nil then
util.perror("lxc error: config formvalue is empty") util.perror("lxc error: config formvalue is empty")
return return

511
applications/luci-app-lxc/luasrc/view/lxc.htm
View file

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