diff options
| author | Jo-Philipp Wich <jo@mein.io> | 2018-06-19 17:18:02 +0200 |
|---|---|---|
| committer | Jo-Philipp Wich <jo@mein.io> | 2018-06-23 18:01:43 +0200 |
| commit | ce8101ae75fa8767bf84f692c5424e2cf3441f34 (patch) | |
| tree | 830cf1888660725040bcd4f26f5e5458b309eddc | |
| parent | e097d3f734d25b31fe511a0d344d913a6d411c87 (diff) | |
luci-app-upnp: rework lease status indicator
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>
| -rw-r--r-- | applications/luci-app-upnp/luasrc/view/upnp_status.htm | 51 |
1 files changed, 25 insertions, 26 deletions
diff --git a/applications/luci-app-upnp/luasrc/view/upnp_status.htm b/applications/luci-app-upnp/luasrc/view/upnp_status.htm index 1e09225793..459c63c1d7 100644 --- a/applications/luci-app-upnp/luasrc/view/upnp_status.htm +++ b/applications/luci-app-upnp/luasrc/view/upnp_status.htm @@ -16,40 +16,39 @@ var tb = document.getElementById('upnp_status_table'); if (st && tb) { - /* clear all rows */ - while (tb.firstElementChild !== tb.lastElementChild) - tb.removeChild(tb.lastElementChild); + var rows = []; 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), [ - E('<div class="td">', st[i].proto), - E('<div class="td">', st[i].extport), - E('<div class="td">', st[i].intaddr), - E('<div class="td">', st[i].intport), - E('<div class="td">', st[i].descr), - E('<input class="cbi-button cbi-input-remove" type="button" value="<%:Delete%>" onclick="upnp_delete_fwd(%d)" />'.format(st[i].num)) - ])); + rows.push([ + st[i].proto, + st[i].extport, + st[i].intaddr, + st[i].intport, + st[i].descr, + 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) - tb.appendChild(E('<div class="tr cbi-section-table-row"><div class="td"><em><br /><%:There are no active redirects.%></em></div></div>')); + cbi_update_table(tb, rows, '<em><%:There are no active redirects.%></em>'); } } ); //]]></script> -<fieldset class="cbi-section"> +<div class="cbi-section"> <legend><%:Active UPnP Redirects%></legend> - <div class="table cbi-section-table" id="upnp_status_table"> - <div class="tr cbi-section-table-titles"> - <div class="th cbi-section-table-cell"><%:Protocol%></div> - <div class="th cbi-section-table-cell"><%:External Port%></div> - <div class="th cbi-section-table-cell"><%:Client Address%></div> - <div class="th cbi-section-table-cell"><%:Client Port%></div> - <div class="th cbi-section-table-cell"><%:Description%></div> - <div class="th cbi-section-table-cell"> </div> - </div> - <div class="tr cbi-section-table-row"> - <div class="td" colspan="5"><em><br /><%:Collecting data...%></em></div> + <div class="cbi-section-node"> + <div class="table" id="upnp_status_table"> + <div class="tr table-titles"> + <div class="th"><%:Protocol%></div> + <div class="th"><%:External Port%></div> + <div class="th"><%:Client Address%></div> + <div class="th"><%:Client Port%></div> + <div class="th"><%:Description%></div> + <div class="th cbi-section-actions"> </div> + </div> + <div class="tr"> + <div class="td" colspan="5"><em><%:Collecting data...%></em></div> + </div> </div> </div> -</fieldset> +</div> |