<script type="text/javascript">//<![CDATA[ function ocserv_disconnect(idx) { (new XHR()).post('<%=url('admin/services/ocserv/disconnect')%>/' + idx, { token: '<%=token%>' }, function(x) { var tb = document.getElementById('ocserv_status_table'); if (tb && (idx + 1 < tb.childNodes.length)) tb.removeChild(tb.childNodes[idx + 1]); } ); } XHR.poll(5, '<%=url('admin/services/ocserv/status')%>', null, function(x, st) { var tb = document.getElementById('ocserv_status_table'); if (st && tb) { /* clear all rows */ while (tb.firstElementChild !== tb.lastElementChild) tb.removeChild(tb.lastElementChild); 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))) ])); } 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>')); } } ); //]]></script> <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> <div class="tr cbi-section-table-row"> <div class="td" colspan="5"><em><br /><%:Collecting data...%></em></div> </div> </div> </fieldset>