diff options
Diffstat (limited to 'applications/luci-app-ocserv/luasrc/view')
| -rw-r--r-- | applications/luci-app-ocserv/luasrc/view/ocserv_status.htm | 83 |
1 files changed, 37 insertions, 46 deletions
diff --git a/applications/luci-app-ocserv/luasrc/view/ocserv_status.htm b/applications/luci-app-ocserv/luasrc/view/ocserv_status.htm index 03a9ed70ee..66e44e9676 100644 --- a/applications/luci-app-ocserv/luasrc/view/ocserv_status.htm +++ b/applications/luci-app-ocserv/luasrc/view/ocserv_status.htm @@ -5,8 +5,8 @@ function(x) { var tb = document.getElementById('ocserv_status_table'); - if (tb && (idx < tb.rows.length)) - tb.rows[0].parentNode.removeChild(tb.rows[idx]); + if (tb && (idx + 1 < tb.childNodes.length)) + tb.removeChild(tb.childNodes[idx + 1]); } ); } @@ -18,38 +18,28 @@ if (st && tb) { /* clear all rows */ - while( tb.rows.length > 1 ) - tb.deleteRow(1); + 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++) { - var tr = tb.insertRow(-1); - tr.className = 'cbi-section-table-row cbi-rowstyle-' + ((i % 2) + 1); - - tr.insertCell(-1).innerHTML = st[i].user; - tr.insertCell(-1).innerHTML = st[i].group; - tr.insertCell(-1).innerHTML = st[i].vpn_ip; - tr.insertCell(-1).innerHTML = st[i].ip; - tr.insertCell(-1).innerHTML = st[i].device; - tr.insertCell(-1).innerHTML = st[i].time; - tr.insertCell(-1).innerHTML = st[i].cipher; - tr.insertCell(-1).innerHTML = st[i].status; - - tr.insertCell(-1).innerHTML = String.format( - '<input class="cbi-button cbi-input-remove" type="button" value="<%:Disconnect%>" onclick="ocserv_disconnect(%d)" />', - st[i].id - ); + 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))) + ])); } - if( tb.rows.length == 1 ) - { - var tr = tb.insertRow(-1); - tr.className = 'cbi-section-table-row'; - - var td = tr.insertCell(-1); - td.colSpan = 5; - td.innerHTML = '<em><br /><%:There are no active users.%></em>'; - } + 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>')); } } ); @@ -57,20 +47,21 @@ <fieldset class="cbi-section"> <legend><%:Active OpenConnect Users%></legend> - <table class="cbi-section-table" id="ocserv_status_table"> - <tr class="cbi-section-table-titles"> - <th class="cbi-section-table-cell"><%:User%></th> - <th class="cbi-section-table-cell"><%:Group%></th> - <th class="cbi-section-table-cell"><%:IP Address%></th> - <th class="cbi-section-table-cell"><%:VPN IP Address%></th> - <th class="cbi-section-table-cell"><%:Device%></th> - <th class="cbi-section-table-cell"><%:Time%></th> - <th class="cbi-section-table-cell"><%:Cipher%></th> - <th class="cbi-section-table-cell"><%:Status%></th> - <th class="cbi-section-table-cell"> </th> - </tr> - <tr class="cbi-section-table-row"> - <td colspan="5"><em><br /><%:Collecting data...%></em></td> - </tr> - </table> + <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> + <div class="tr cbi-section-table-row"> + <div class="td" colspan="5"><em><br /><%:Collecting data...%></em></div> + </div> + </div> </fieldset> + |