<script type="text/javascript">//<![CDATA[
function ocserv_disconnect(idx) {
- XHR.get('<%=url('admin/services/ocserv/disconnect')%>/' + idx, null,
+ (new XHR()).post('<%=url('admin/vpn/ocserv/disconnect')%>/' + idx, { token: '<%=token%>' },
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]);
}
);
}
- XHR.poll(5, '<%=url('admin/services/ocserv/status')%>', null,
+ XHR.poll(-1, '<%=url('admin/vpn/ocserv/status')%>', null,
function(x, st)
{
var tb = document.getElementById('ocserv_status_table');
if (st && tb)
{
- /* clear all rows */
- while( tb.rows.length > 1 )
- tb.deleteRow(1);
+ var rows = [];
- 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
- );
+ 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.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>';
- }
+ cbi_update_table(tb, rows, '<em><%:There are no active users.%></em>');
}
}
);
<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" 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 placeholder">
+ <div class="td"><em><%:Collecting data...%></em></div>
+ </div>
+ </div>
</fieldset>
+