luci-app-ddns: Convert HTML tables to div

diff --git a/applications/luci-app-ddns/luasrc/view/ddns/system_status.htm b/applications/luci-app-ddns/luasrc/view/ddns/system_status.htm
index 5bdcb03e736bd56ef74e18441b881faa2d54acc9..4293e35d3ae01bfba65b2fdbc7cd02923dd08b7c 100644 (file)
--- a/applications/luci-app-ddns/luasrc/view/ddns/system_status.htm
+++ b/applications/luci-app-ddns/luasrc/view/ddns/system_status.htm
@@ -1,4 +1,3 @@
-
 <!-- ++ BEGIN ++ Dynamic DNS ++ system_status.htm ++ -->
 <script type="text/javascript">//<![CDATA[
        // helper to move status data to the relevant
@@ -10,8 +9,8 @@
                if ( !(tbl) ) { return; }
 
                // clear all rows
-               while (tbl.rows.length > 1)
-                       tbl.deleteRow(1);
+               while (tbl.firstElementChild !== tbl.lastElementChild)
+                       tbl.removeChild(tbl.lastElementChild);
 
                // variable for Modulo-Division use to set cbi-rowstyle-? (0 or 1)
                var i = -1;
@@ -21,22 +20,22 @@
                if (data[0].enabled == 0) {
                        var txt = '<strong><font color="red"><%:DDNS Autostart disabled%></font>' ;
                        var url = '<a href="' + data[0].url_up + '"><%:enable here%></a></strong>' ;
-                       var tr = tbl.insertRow(-1);
-                       tr.className = 'cbi-section-table-row cbi-rowstyle-' + (((j + i) % 2) + 1);
-                       var td = tr.insertCell(-1);
-                       td.colSpan = 2 ;
-                       td.innerHTML = txt + " - " + url
-                       tr.insertCell(-1).colSpan = 3 ;
+                       tbl.appendChild(E('<div class="tr cbi-section-table-row cbi-rowstyle-%d">'.format(((j + i) % 2) + 1), [
+                                       E('<div class="td">', [ txt," - ", url ])
+                                       ]));
                        i++ ;
                }
 
+               var configuration;
+               var next_update;
+               var lookup;
+               var registered_ip;
+               var network;
+
                for( j = 1; j < data.length; j++ )
                {
-                       var tr = tbl.insertRow(-1);
-                       tr.className = 'cbi-section-table-row cbi-rowstyle-' + (((j + i) % 2) + 1) ;
-
                        // configuration
-                       tr.insertCell(-1).innerHTML = '<strong>' + data[j].section + '</strong>' ;
+                       configuration = data[j].section;
 
                        // pid
                        // data[j].pid ignored here
@@ -47,66 +46,74 @@
                        // next update
                        switch (data[j].datenext) {
                                case "_empty_":
-                                       tr.insertCell(-1).innerHTML = '<em><%:Unknown error%></em>' ;
+                                       next_update = '<em><%:Unknown error%></em>';
                                        break;
                                case "_stopped_":
-                                       tr.insertCell(-1).innerHTML = '<em><%:Stopped%></em>' ;
+                                       next_update = '<em><%:Stopped%></em>';
                                        break;
                                case "_disabled_":
-                                       tr.insertCell(-1).innerHTML = '<em><%:Disabled%></em>' ;
+                                       next_update = '<em><%:Disabled%></em>';
                                        break;
                                case "_noupdate_":
-                                       tr.insertCell(-1).innerHTML = '<em><%:Update error%></em>' ;
+                                       next_update = '<em><%:Update error%></em>';
                                        break;
                                case "_runonce_":
-                                       tr.insertCell(-1).innerHTML = '<em><%:Run once%></em>' ;
+                                       next_update = '<em><%:Run once%></em>';
                                        break;
                                case "_verify_":
-                                       tr.insertCell(-1).innerHTML = '<em><%:Verify%></em>';
+                                       next_update = '<em><%:Verify%></em>';
                                        break;
                                default:
-                                       tr.insertCell(-1).innerHTML = data[j].datenext ;
+                                       next_update = data[j].datenext;
                                        break;
                        }
 
                        // lookup
                        if (data[j].lookup == "_nolookup_")
-                               tr.insertCell(-1).innerHTML = '<em><%:config error%></em>';
+                               lookup = '<em><%:config error%></em>';
                        else
-                               tr.insertCell(-1).innerHTML = data[j].lookup;
+                               lookup = data[j].lookup;
 
                        // registered IP
                        switch (data[j].reg_ip) {
                                case "_nolookup_":
-                                       tr.insertCell(-1).innerHTML = '<em><%:Config error%></em>';
+                                       registered_ip = '<em><%:config error%></em>';
                                        break;
                                case "_nodata_":
-                                       tr.insertCell(-1).innerHTML = '<em><%:No data%></em>';
+                                       registered_ip = '<em><%:No data%></em>';
                                        break;
                                case "_noipv6_":
-                                       tr.insertCell(-1).innerHTML = '<em><%:IPv6 not supported%></em>';
+                                       registered_ip = '<em><%:IPv6 not supported%></em>';
                                        break;
                                default:
-                                       tr.insertCell(-1).innerHTML = data[j].reg_ip;
+                                       registered_ip = data[j].reg_ip;
                                        break;
                        }
 
                        // monitored interface
                        if (data[j].iface == "_nonet_")
-                               tr.insertCell(-1).innerHTML = '<em><%:Config error%></em>';
+                               network = '<em><%:Config error%></em>';
                        else
-                               tr.insertCell(-1).innerHTML = data[j].iface;
+                               network = data[j].iface;
+
+                       tbl.appendChild(E('<div class="tr cbi-section-table-row cbi-rowstyle-%d">'.format(((j + i) % 2) + 1), [
+                                       E('<div class="td">', [ E('<strong>', configuration) ]),
+                                       E('<div class="td">', next_update),
+                                       E('<div class="td">', lookup),
+                                       E('<div class="td">', registered_ip),
+                                       E('<div class="td">', network)
+                                       ]));
                }
 
-               if (tbl.rows.length == 1 || (data[0].enabled == 0 && tbl.rows.length == 2) ) {
+               if (tbl.firstElementChild === tbl.lastElementChild || (data[0].enabled == 0 && tbl.childNodes.length == 2) ) {
                        var br = '<br />';
-                       if (tbl.rows.length > 1)
+                       var msg = '<%:There is no service configured.%>';
+                       if (tbl.firstElementChild !== tbl.lastElementChild)
                                br = '';
-                       var tr = tbl.insertRow(-1);
-                       tr.className = "cbi-section-table-row";
-                       var td = tr.insertCell(-1);
-                       td.colSpan = 5;
-                       td.innerHTML = '<em>' + br + '<%:There is no service configured.%></em>' ;
+                       msg = br + msg;
+                       tbl.appendChild(E('<div class="tr cbi-section-table-row">', [
+                                       E('<div class="td">', [ E('<em>', msg) ])
+                                       ]));
                }
        }
 
@@ -128,17 +135,17 @@
 <fieldset class="cbi-section" id="ddns_status_section">
        <legend><a href="<%=url([[admin]], [[services]], [[ddns]])%>"><%:Dynamic DNS%></a></legend>
 
-       <table class="cbi-section-table" id="ddns_status_table">
-               <tr class="cbi-section-table-titles">
-                       <th class="cbi-section-table-cell"><%:Configuration%></th>
-                       <th class="cbi-section-table-cell"><%:Next Update%></th>
-                       <th class="cbi-section-table-cell"><%:Lookup Hostname%></th>
-                       <th class="cbi-section-table-cell"><%:Registered IP%></th>
-                       <th class="cbi-section-table-cell"><%:Network%></th>
-               </tr>
-               <tr class="cbi-section-table-row">
-                       <td colspan="5"><em><br /><%:Collecting data...%></em></td>
-               </tr>
+       <div class="table cbi-section-table" id="ddns_status_table">
+               <div class="tr cbi-section-table-titles">
+                       <div class="th cbi-section-table-cell"><%:Configuration%></div>
+                       <div class="th cbi-section-table-cell"><%:Next Update%></div>
+                       <div class="th cbi-section-table-cell"><%:Lookup Hostname%></div>
+                       <div class="th cbi-section-table-cell"><%:Registered IP%></div>
+                       <div class="th cbi-section-table-cell"><%:Network%></div>
+               </div>
+               <div class="tr cbi-section-table-row">
+                       <div class="td" colspan="5"><em><br /><%:Collecting data...%></em></div>
+               </div>
        </table>
 </fieldset>
 <!-- ++ END ++ Dynamic DNS ++ system_status.htm ++ -->