luci-app-dawn: network overview rewrite with div tables

Signed-off-by: Jonny Tischbein <jonny_tischbein@systemli.org>

diff --git a/applications/luci-app-dawn/luasrc/model/cbi/dawn/dawn_network.lua b/applications/luci-app-dawn/luasrc/model/cbi/dawn/dawn_network.lua
index fb6ab298a335ff5a047946a2b0531e509b57bbad..c626a3d0c0733fd8993ffe3517a232faffa58210 100644 (file)
--- a/applications/luci-app-dawn/luasrc/model/cbi/dawn/dawn_network.lua
+++ b/applications/luci-app-dawn/luasrc/model/cbi/dawn/dawn_network.lua
@@ -8,84 +8,84 @@ function s.render(self, sid)
        local json = require "luci.json"
        local utl = require "luci.util"
        tpl.render_string([[
-               <table class="table" style="border: 1px solid grey;">
-                       <thead style="background-color: grey; color: white;">
-                               <tr>
-                                               <th>SSID</th>
-                                               <th>MAC</th>
-                                               <th>Channel Utilization</th>
-                                               <th>Frequency</th>
-                                               <th>Stations</th>
-                                               <th>HT Sup</th>
-                                               <th>VHT Sup</th>
-                               </tr>
-                       </thead>
-                       <tbody>
+               <%
+           local status = require "luci.tools.ieee80211"
+               local utl = require "luci.util"
+               local sys = require "luci.sys"
+               local hosts = sys.net.host_hints()
+               local stat = utl.ubus("dawn", "get_network", { })
+               local name, macs
+               for name, macs in pairs(stat) do
+               %>
+
+                       <div class="cbi-section-node">
+               <h3>SSID: <%= name %></h3>
+                       <div class="table" id=network_overview_main">
+                               <div class="tr table-titles">
+                                       <div class="th">AP</div>
+                                       <div class="th">Clients</div>
+                               </div>
                        <%
-                       local status = require "luci.tools.ieee80211"
-                       local utl = require "luci.util"
-                       local sys = require "luci.sys"
-                       local hosts = sys.net.host_hints()
-                       local stat = utl.ubus("dawn", "get_network", { })
-                       local name, macs
-                       for name, macs in pairs(stat) do
-                               local mac, data
-                               for mac, data in pairs(macs) do
+                       local mac, data
+                       for mac, data in pairs(macs) do
                        %>
-                               <tr class="center">
-                                       <td><%= name %></td>
-                                       <td><%= mac %></td>
-                                       <td><%= "%.2f" %(data.channel_utilization / 2.55) %> %</td>
-                                       <td><%= "%.3f" %( data.freq / 1000 ) %> GHz (Channel: <%= "%d" %( status.frequency_to_channel(data.freq) ) %>)</td>
-                                       <td><%= "%d" %data.num_sta %></td>
-                                       <td><%= (data.ht_support == true) and "available" or "not available" %></td>
-                                       <td><%= (data.vht_support == true) and "available" or "not available" %></td>
-                               </tr>
-                               <tr>
-                                       <td colspan="7"><hr></td>
-                               </tr>
-                               <tr>
-                                       <td colspan="2" class="center"><strong>Clients</strong></td>
-                                       <td colspan="4">
-                                       <table class="table" style="border: 1px solid grey;">
-                                       <thead style="background-color: grey; color: white;">
-                                               <tr>
-                                                       <th>MAC</th>
-                                                       <th>HT</th>
-                                                       <th>VHT</th>
-                                                       <th>Signal</th>
-                                               </tr>
-                                       </thead>
-                                       <tbody>
-                                       <%
-                                       local mac2, data2
-                                       for clientmac, clientvals in pairs(data) do
-                                               if (type(clientvals) == "table") then 
-                                       %>
-                                               <tr class="center">
-                                                       <td><%= clientmac %></td>
-                                                       <td><%= (clientvals.ht == true) and "available" or "not available" %></td>
-                                                       <td><%= (clientvals.vht == true) and "available" or "not available" %></td>
-                                                       <td><%= "%d" %clientvals.signal %></td>
-                                               </tr>
-                                       <%
-                                               end
-                                       end
-                                       %>
-                                       </tbody>
-                                       </table>
-                               </tr>
-                               <tr>
-                                       <td colspan="7"><hr></td>
-                               </tr>
-                               <%
-                               end
-                               %>
+                               <div class="tr">
+                                       <div class="td" style="vertical-align: top;">
+                                               <div class="table" id="ap-<%= mac %>">
+                                                       <div class="tr table-titles">
+                                                               <div class="th">MAC</div>
+                                                               <div class="th">Utilization</div>
+                                                               <div class="th">Frequency</div>
+                                                               <div class="th">Stations</div>
+                                                               <div class="th">HT Sup</div>
+                                                               <div class="th">VHT Sup</div>
+                                                       </div>
+                                                       <div class="tr">
+                                                               <div class="td"><%= mac %></div>
+                                                               <div class="td"><%= "%.2f" %(data.channel_utilization / 2.55) %> %</div>
+                                                               <div class="td"><%= "%.3f" %( data.freq / 1000 ) %> GHz (Channel: <%= "%d" %( status.frequency_to_channel(data.freq) ) %>)</div>
+                                                               <div class="td"><%= "%d" %data.num_sta %></div>
+                                                               <div class="td"><%= (data.ht_support == true) and "available" or "not available" %></div>
+                                                               <div class="td"><%= (data.vht_support == true) and "available" or "not available" %></div>
+                                                       </div>
+                                                       </div>
+                                               </div>
+                                       <div class="td" style="vertical-align: top;">
+                                               <div class="table" id="clients-<%= mac %>">
+                                                       <div class="tr table-titles">
+                                                               <div class="th">MAC</div>
+                                                               <div class="th">HT</div>
+                                                               <div class="th">VHT</div>
+                                                               <div class="th">Signal</div>
+                                                       </div>
+                                                       <%
+                                                       local mac2, data2
+                                                       for clientmac, clientvals in pairs(data) do
+                                                               if (type(clientvals) == "table") then
+                                                       %>
+                                                               <div class="tr">
+                                                                       <div class="td"><%= clientmac %></div>
+                                                                       <div class="td"><%= (clientvals.ht == true) and "available" or "not available" %></div>
+                                                                       <div class="td"><%= (clientvals.vht == true) and "available" or "not available" %></div>
+                                                                       <div class="td"><%= "%d" %clientvals.signal %></div>
+                                                               </div>
+                                                               <%
+                                                               end
+                                                               %>
+                                                       <%
+                                                       end
+                                                       %>
+                                                       </div>
+                                               </div>
+                                       </div>
                        <%
                        end
                        %>
-                       </tbody>
-               </table>
+                       </div>
+                       </div>
+               <%
+               end
+               %>
        ]])
 end