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

luci-app-upnp: rework lease status indicator

Browse source 
Turn the dynamic lease status table into responsive table by using the
cbi_update_table() helper in conjunction with title annotation attributes.

Signed-off-by: Jo-Philipp Wich <jo@mein.io>
This commit is contained in:
Jo-Philipp Wich 2018-06-19 17:18:02 +02:00
parent e097d3f734
commit ce8101ae75
1 changed files with 25 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
applications/luci-app-upnp/luasrc/view/upnp_status.htm
View file

@ -16,40 +16,39 @@
var tb = document.getElementById('upnp_status_table'); var tb = document.getElementById('upnp_status_table');
if (st && tb) if (st && tb)
{ {
/* clear all rows */ var rows = [];
while (tb.firstElementChild !== tb.lastElementChild)
tb.removeChild(tb.lastElementChild);
for (var i = 0; i < st.length; i++) for (var i = 0; i < st.length; i++)
tb.appendChild(E('<div class="tr cbi-section-table-row cbi-rowstyle-%d">'.format((i % 2) + 1), [ rows.push([
E('<div class="td">', st[i].proto), st[i].proto,
E('<div class="td">', st[i].extport), st[i].extport,
E('<div class="td">', st[i].intaddr), st[i].intaddr,
E('<div class="td">', st[i].intport), st[i].intport,
E('<div class="td">', st[i].descr), st[i].descr,
E('<input class="cbi-button cbi-input-remove" type="button" value="<%:Delete%>" onclick="upnp_delete_fwd(%d)" />'.format(st[i].num)) E('<input class="cbi-button cbi-button-remove" type="button" value="<%:Delete%>" onclick="upnp_delete_fwd(%d)" />'.format(st[i].num))
])); ]);
if (tb.firstElementChild === tb.lastElementChild) cbi_update_table(tb, rows, '<em><%:There are no active redirects.%></em>');
tb.appendChild(E('<div class="tr cbi-section-table-row"><div class="td"><em><br /><%:There are no active redirects.%></em></div></div>'));
} }
} }
); );
//]]></script> //]]></script>
<fieldset class="cbi-section"> <div class="cbi-section">
<legend><%:Active UPnP Redirects%></legend> <legend><%:Active UPnP Redirects%></legend>
<div class="table cbi-section-table" id="upnp_status_table"> <div class="cbi-section-node">
<div class="tr cbi-section-table-titles"> <div class="table" id="upnp_status_table">
<div class="th cbi-section-table-cell"><%:Protocol%></div> <div class="tr table-titles">
<div class="th cbi-section-table-cell"><%:External Port%></div> <div class="th"><%:Protocol%></div>
<div class="th cbi-section-table-cell"><%:Client Address%></div> <div class="th"><%:External Port%></div>
<div class="th cbi-section-table-cell"><%:Client Port%></div> <div class="th"><%:Client Address%></div>
<div class="th cbi-section-table-cell"><%:Description%></div> <div class="th"><%:Client Port%></div>
<div class="th cbi-section-table-cell">&#160;</div> <div class="th"><%:Description%></div>
</div> <div class="th cbi-section-actions">&#160;</div>
<div class="tr cbi-section-table-row"> </div>
<div class="td" colspan="5"><em><br /><%:Collecting data...%></em></div> <div class="tr">
<div class="td" colspan="5"><em><%:Collecting data...%></em></div>
</div>
</div> </div>
</div> </div>
</fieldset> </div>