diff options
| author | Jo-Philipp Wich <jo@mein.io> | 2018-07-20 09:07:23 +0200 |
|---|---|---|
| committer | Jo-Philipp Wich <jo@mein.io> | 2018-07-20 09:08:15 +0200 |
| commit | f4ba55532f01bc484543074c174f198a0ddd3087 (patch) | |
| tree | e7b088900ac483f6c42b00aabb57dda17c856c83 | |
| parent | b56fb05eb94baadd4a424adb977a502307f7e6fd (diff) | |
luci-app-ocserv: update user status template
- Use cbi_update_table() helper to refresh user list
- Cleanup markup and remove uneeded CSS classes
Signed-off-by: Jo-Philipp Wich <jo@mein.io>
| -rw-r--r-- | applications/luci-app-ocserv/luasrc/view/ocserv_status.htm | 61 |
1 files changed, 30 insertions, 31 deletions
diff --git a/applications/luci-app-ocserv/luasrc/view/ocserv_status.htm b/applications/luci-app-ocserv/luasrc/view/ocserv_status.htm index 66e44e967..44e196582 100644 --- a/applications/luci-app-ocserv/luasrc/view/ocserv_status.htm +++ b/applications/luci-app-ocserv/luasrc/view/ocserv_status.htm @@ -17,29 +17,28 @@ var tb = document.getElementById('ocserv_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].user), - E('<div class="td">', st[i].group), - E('<div class="td">', st[i].vpn_ip), - E('<div class="td">', st[i].ip), - E('<div class="td">', st[i].device), - E('<div class="td">', st[i].time), - E('<div class="td">', st[i].cipher), - E('<div class="td">', st[i].status), - E('<div class="td">', - E('<input class="cbi-button cbi-input-remove" type="button" value="<%:Disconnect%>" onclick="ocserv_disconnect(%d)" />' - .format(st[i].id))) - ])); + rows.push([ + st[i].user, + st[i].group, + st[i].vpn_ip, + st[i].ip, + st[i].device, + st[i].time, + st[i].cipher, + st[i].status, + E('input', { + type: 'button', + class: 'cbi-button cbi-button-remove', + onclick: 'ocserv_disconnect(%d)'.format(st[i].id) + }) + ]); } - if (tb.firstElementChild === tb.lastElementChild) - tb.appendChild(E('<div class="tr cbi-section-table-row"><div class="td"><em><br /><%:There are no active users.%></em></div></div>')); + cbi_update_table(tb, rows, '<em><%:There are no active users.%></em>'); } } ); @@ -47,20 +46,20 @@ <fieldset class="cbi-section"> <legend><%:Active OpenConnect Users%></legend> - <div class="table cbi-section-table" id="ocserv_status_table"> - <div class="tr cbi-section-table-titles"> - <div class="th cbi-section-table-cell"><%:User%></div> - <div class="th cbi-section-table-cell"><%:Group%></div> - <div class="th cbi-section-table-cell"><%:IP Address%></div> - <div class="th cbi-section-table-cell"><%:VPN IP Address%></div> - <div class="th cbi-section-table-cell"><%:Device%></div> - <div class="th cbi-section-table-cell"><%:Time%></div> - <div class="th cbi-section-table-cell"><%:Cipher%></div> - <div class="th cbi-section-table-cell"><%:Status%></div> - <div class="th cbi-section-table-cell"> </div> + <div class="table" id="ocserv_status_table"> + <div class="tr table-titles"> + <div class="th"><%:User%></div> + <div class="th"><%:Group%></div> + <div class="th"><%:IP Address%></div> + <div class="th"><%:VPN IP Address%></div> + <div class="th"><%:Device%></div> + <div class="th"><%:Time%></div> + <div class="th"><%:Cipher%></div> + <div class="th"><%:Status%></div> + <div class="th"> </div> </div> - <div class="tr cbi-section-table-row"> - <div class="td" colspan="5"><em><br /><%:Collecting data...%></em></div> + <div class="tr placeholder"> + <div class="td"><em><br /><%:Collecting data...%></em></div> </div> </div> </fieldset> |