From 4af446b51073e672e13e067f1ca7286357aaff68 Mon Sep 17 00:00:00 2001
From: Jonny Tischbein <jonny_tischbein@systemli.org>
Date: Sun, 19 Apr 2020 22:50:40 +0200
Subject: [PATCH 1/1] luci-app-dawn: network overview rewrite with div tables

Signed-off-by: Jonny Tischbein <jonny_tischbein@systemli.org>
---
 .../luasrc/model/cbi/dawn/dawn_network.lua    | 146 +++++++++---------
 1 file changed, 73 insertions(+), 73 deletions(-)

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 fb6ab298a..c626a3d0c 100644
--- 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
 
-- 
2.25.1