luci-app-dawn: hearing map with div tables

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

1 files changed, 48 insertions, 61 deletions

diff --git a/applications/luci-app-dawn/luasrc/model/cbi/dawn/dawn_hearing_map.lua b/applications/luci-app-dawn/luasrc/model/cbi/dawn/dawn_hearing_map.lua
index e8b0240ea..29bcb2f11 100644
--- a/applications/luci-app-dawn/luasrc/model/cbi/dawn/dawn_hearing_map.lua
+++ b/applications/luci-app-dawn/luasrc/model/cbi/dawn/dawn_hearing_map.lua
@@ -6,7 +6,6 @@ s = m:section(NamedSection, "__hearingmap__")
 function s.render(self, sid)
     local tpl = require "luci.template"
     tpl.render_string([[
-        <style>.hearing_table tr{ border-bottom: 1px solid grey;} tr:nth-child(even){background-color: lightgrey;}</style>
         <%
         local utl = require "luci.util"
         local status = require "luci.tools.ieee80211"
@@ -14,71 +13,59 @@ function s.render(self, sid)
         local name, macs
 
         for name, macs in pairs(stat) do
-            local count = 0
-            for a,b in pairs(macs) do for _ in pairs(b) do count = count + 1 end end
         %>
-            <table class="table" style="border: 1px solid grey;">
-                <thead style="background-color: grey; color: white;">
-                    <tr>
-                        <th>SSID</th>
-                        <th>Client MAC</th>
-                        <th>AP MAC</th>
-                        <th>Frequency</th>
-                        <th>HT Sup</th>
-                        <th>VHT Sup</th>
-                        <th>Signal</th>
-                        <th>RCPI</th>
-                        <th>RSNI</th>
-                        <th>Channel<br />Utilization</th>
-                        <th>Station connect<br />to AP</th>
-                        <th>Score</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr class="center" style="border: 1px solid grey;">
-                        <td rowspan="<%= count + 1 %>" style="background-color: white; border-right: 1px solid grey;"><%= name %></td>
-                        <%
-                        local mac, data
-                        for mac, data in pairs(macs) do
-                            local mac2, data2
-                            local count_macs = 0
-                            local count_loop = 0
-                            for _ in pairs(data) do count_macs = count_macs + 1 end
+        <div class="cbi-section-node">
+	        <h3>SSID: <%= name %></h3>
+            <div class="table" id="dawn_hearing_map">
+		        <div class="tr table-titles">
+                    <div class="th">Client MAC</div>
+                    <div class="th">AP MAC</div>
+                    <div class="th">Frequency</div>
+                    <div class="th">HT Sup</div>
+                    <div class="th">VHT Sup</div>
+                    <div class="th">Signal</div>
+                    <div class="th">RCPI</div>
+                    <div class="th">RSNI</div>
+                    <div class="th">Channel Utilization</div>
+                    <div class="th">Station connect to AP</div>
+                    <div class="th">Score</div>
+                </div>
+                <%
+                local mac, data
+                for mac, data in pairs(macs) do
+                    local mac2, data2
+                    local count_loop = 0
 
-                            for mac2, data2 in pairs(data) do
-                        %>
-                                <tr class="center" style="border: 1px solid grey;">
-                                    <% if (count_macs > 1) then %>
-                                        <% if (count_loop == 0 ) then %>
-                                            <td rowspan="<%= count_macs %>" style="background-color: white; border-right: 1px solid grey;"><%= mac %></td>
-                                        <% end %>
-                                    <% else %>
-                                        <td><%= mac %></td>
-                                    <% end %>
-                                    <td><%= mac2 %></td>
-                                    <td><%= "%.3f" %( data2.freq / 1000 ) %> GHz<br />(Channel: <%= "%d" %( status.frequency_to_channel(data2.freq) ) %>)</td>
-                                    <td><%= (data2.ht_capabilities == true and data2.ht_support == true) and "True" or "False" %></td>
-                                    <td><%= (data2.vht_capabilities == true and data2.vht_support == true) and "True" or "False" %></td>
-                                    <td><%= "%d" %data2.signal %></td>
-                                    <td><%= "%d" %data2.rcpi %></td>
-                                    <td><%= "%d" %data2.rsni %></td>
-                                    <td><%= "%.2f" %(data2.channel_utilization / 2.55) %> %</td>
-                                    <td><%= "%d" %data2.num_sta %></td>
-                                    <td><%= "%d" %data2.score %></td>
-                                </tr>
-                            <%
-                            count_loop = count_loop + 1
-                            end
-                            %>
-                        <%
-                        end
-                        %>
-                    </tr>
-                </tbody>
-            </table>
+                    for mac2, data2 in pairs(data) do
+                %>
+                        <div class="tr">
+                            <% if (count_loop == 0) then %>
+                                <div class="td"><%= mac %></div>
+                            <% else %>
+                                <div></div>
+                            <% end %>
+                            <div class="td"><%= mac2 %></div>
+                            <div class="td"><%= "%.3f" %( data2.freq / 1000 ) %> GHz Channel: <%= "%d" %( status.frequency_to_channel(data2.freq) ) %></div>
+                            <div class="td"><%= (data2.ht_capabilities == true and data2.ht_support == true) and "True" or "False" %></div>
+                            <div class="td"><%= (data2.vht_capabilities == true and data2.vht_support == true) and "True" or "False" %></div>
+                            <div class="td"><%= "%d" %data2.signal %></div>
+                            <div class="td"><%= "%d" %data2.rcpi %></div>
+                            <div class="td"><%= "%d" %data2.rsni %></div>
+                            <div class="td"><%= "%.2f" %(data2.channel_utilization / 2.55) %> %</div>
+                            <div class="td"><%= "%d" %data2.num_sta %></div>
+                            <div class="td"><%= "%d" %data2.score %></div>
+                        </div>
+			    <%
+			            count_loop = count_loop + 1
+                    end
+                end
+                %>
+            </div>
+        </div>
         <%
         end
         %>
+    </div>
     ]])
 end