applications/luci-upnp: rework status javascript to use XHR.poll()
[project/luci.git] / applications / luci-upnp / luasrc / view / upnp_status.htm
1 <script type="text/javascript">//<![CDATA[
2 function upnp_delete_fwd(idx) {
3 XHR.get('<%=luci.dispatcher.build_url("admin", "services", "upnp", "delete")%>/' + idx, null,
4 function(x)
5 {
6 var tb = document.getElementById('upnp_status_table');
7 if (tb && (idx < tb.rows.length))
8 tb.rows[0].parentNode.removeChild(tb.rows[idx]);
9 }
10 );
11 }
12
13 XHR.poll(5, '<%=luci.dispatcher.build_url("admin", "services", "upnp", "status")%>', null,
14 function(x, st)
15 {
16 var tb = document.getElementById('upnp_status_table');
17 if (st && tb)
18 {
19 /* clear all rows */
20 while( tb.rows.length > 1 )
21 tb.deleteRow(1);
22
23 for( var i = 0; i < st.length; i++ )
24 {
25 var tr = tb.insertRow(-1);
26 tr.className = 'cbi-section-table-row cbi-rowstyle-' + ((i % 2) + 1);
27
28 tr.insertCell(-1).innerHTML = st[i].proto;
29 tr.insertCell(-1).innerHTML = st[i].extport;
30 tr.insertCell(-1).innerHTML = st[i].intaddr;
31 tr.insertCell(-1).innerHTML = st[i].intport;
32
33 tr.insertCell(-1).innerHTML = String.format(
34 '<input class="cbi-button cbi-input-remove" type="button" value="<%:Delete Redirect%>" onclick="upnp_delete_fwd(%d)" />',
35 st[i].num
36 );
37 }
38
39 if( tb.rows.length == 1 )
40 {
41 var tr = tb.insertRow(-1);
42 tr.className = 'cbi-section-table-row';
43
44 var td = tr.insertCell(-1);
45 td.colSpan = 5;
46 td.innerHTML = '<em><br /><%:There are no active redirects.%></em>';
47 }
48 }
49 }
50 );
51 //]]></script>
52
53 <fieldset class="cbi-section">
54 <legend><%:Active UPnP Redirects%></legend>
55 <table class="cbi-section-table" id="upnp_status_table">
56 <tr class="cbi-section-table-titles">
57 <th class="cbi-section-table-cell"><%:Protocol%></th>
58 <th class="cbi-section-table-cell"><%:External Port%></th>
59 <th class="cbi-section-table-cell"><%:Client Address%></th>
60 <th class="cbi-section-table-cell"><%:Client Port%></th>
61 <th class="cbi-section-table-cell">&#160;</th>
62 </tr>
63 <tr class="cbi-section-table-row">
64 <td colspan="5"><em><br /><%:Collecting data...%></em></td>
65 </tr>
66 </table>
67 </fieldset>