applications/luci-olsr: Update all statuspages; use json reloading on overview, neighbors and topology pages

10 files changed, 549 insertions, 230 deletions

diff --git a/applications/luci-olsr/luasrc/controller/olsr.lua b/applications/luci-olsr/luasrc/controller/olsr.lua
index 6d6dc1ace..a47496b31 100644
--- a/applications/luci-olsr/luasrc/controller/olsr.lua
+++ b/applications/luci-olsr/luasrc/controller/olsr.lua
@@ -91,30 +91,29 @@ function index()
 	)
 end
 
-function action_neigh()
-	local data = fetch_txtinfo("links")
+local function compare_links(a, b)
+	local c = tonumber(a.Cost)
+	local d = tonumber(b.Cost)
 
-	if not data or not data.Links then
-		luci.template.render("status-olsr/error_olsr")
-		return nil
+	if not c or c == 0 then
+		return false
 	end
 
-	local function compare(a, b)
-		local c = tonumber(a.Cost)
-		local d = tonumber(b.Cost)
-
-		if not c or c == 0 then
-			return false
-		end
+	if not d or d == 0 then
+		return true
+	end
+	return c < d
+end
 
-		if not d or d == 0 then
-			return true
-		end
+function action_neigh(json)
+	local data = fetch_txtinfo("links")
 
-		return c < d
+	if not data or not data.Links then
+		luci.template.render("status-olsr/error_olsr")
+		return nil
 	end
 
-	table.sort(data.Links, compare)
+	table.sort(data.Links, compare_links)
 
 	luci.template.render("status-olsr/neighbors", {links=data.Links})
 end
diff --git a/applications/luci-olsr/luasrc/tools/olsr.lua b/applications/luci-olsr/luasrc/tools/olsr.lua
new file mode 100644
index 000000000..45501020a
--- /dev/null
+++ b/applications/luci-olsr/luasrc/tools/olsr.lua
@@ -0,0 +1,28 @@
+--[[
+LuCI - Lua Configuration Interface
+
+Copyright 2011 Manuel Munz <freifunk at somakoma dot de>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+	http://www.apache.org/licenses/LICENSE-2.0
+]]--
+
+module("luci.tools.olsr", package.seeall)
+
+function etx_color(etx)
+	local color = "#bb3333"
+	if etx == 0 then
+		color = "#bb3333"
+	elseif etx < 4 then
+		color = "#00cc00"
+	elseif etx < 10 then
+		color = "#ffcb05"
+	elseif etx < 100 then
+		color = "#ff6600"
+	end
+	return color
+end
+
diff --git a/applications/luci-olsr/luasrc/view/status-olsr/hna.htm b/applications/luci-olsr/luasrc/view/status-olsr/hna.htm
index a7a14e4fa..9e29edf64 100644
--- a/applications/luci-olsr/luasrc/view/status-olsr/hna.htm
+++ b/applications/luci-olsr/luasrc/view/status-olsr/hna.htm
@@ -2,6 +2,7 @@
 LuCI - Lua Configuration Interface
 Copyright 2008 Steven Barth <steven@midlink.org>
 Copyright 2008 Jo-Philipp Wich <xm@leipzig.freifunk.net>
+Copyright 2011 Manuel Munz <freifunk at somakoma dot de>
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -12,26 +13,36 @@ You may obtain a copy of the License at
 $Id$
 
 -%>
+<%
+local i = 1
+%>
+
 <%+header%>
+
 <h2><a id="content" name="content"><%:Active host net announcements%></a></h2>
-<p><%:Overview of currently active OLSR host net announcements%></p>
-<br />
-<table class="smalltext" cellspacing="0" cellpadding="6">
-<tr>
-<th><%:Announced network%></th>
-<th><%:OLSR gateway%></th>
-</tr>
-<% for k, route in ipairs(routes) do %>
-<tr>
-<td><%=route.Destination%></td>
-<td>
-<a href="http://<%=route.Gateway%>/cgi-bin-status.html"><%=route.Gateway%></a>
-<% if route.Hostname then %>
-        / <a href="http://<%=route.Hostname%>/cgi-bin-status.html"><%=route.Hostname%></a>
-<% end %>
-</td>
-</tr>
-<% end %>
-</table>
-<br />
+
+<fieldset class="cbi-section">
+	<legend><%:Overview of currently active OLSR host net announcements%></legend>
+	<table class="cbi-section-table">
+		<tr class="cbi-section-table-titles">
+			<th class="cbi-section-table-cell"><%:Announced network%></th>
+			<th class="cbi-section-table-cell"><%:OLSR gateway%></th>
+		</tr>
+
+		<% for k, route in ipairs(routes) do %>
+
+		<tr class="cbi-section-table-row cbi-rowstyle-<%=i%>">
+			<td class="cbi-section-table-cell"><%=route.Destination%></td>
+			<td class="cbi-section-table-cell">
+				<a href="http://<%=route.Gateway%>/cgi-bin-status.html"><%=route.Gateway%></a>
+				<% if route.Hostname then %>
+				        / <a href="http://<%=route.Hostname%>/cgi-bin-status.html"><%=route.Hostname%></a>
+				<% end %>
+			</td>
+		</tr>
+
+		<% if i == 1 then i = 0 elseif i == 0 then i = 1 end
+		end %>
+	</table>
+</fieldset>
 <%+footer%>
diff --git a/applications/luci-olsr/luasrc/view/status-olsr/interfaces.htm b/applications/luci-olsr/luasrc/view/status-olsr/interfaces.htm
index b409fede9..2d3ff876a 100644
--- a/applications/luci-olsr/luasrc/view/status-olsr/interfaces.htm
+++ b/applications/luci-olsr/luasrc/view/status-olsr/interfaces.htm
@@ -2,7 +2,7 @@
 LuCI - Lua Configuration Interface
 Copyright 2008 Steven Barth <steven@midlink.org>
 Copyright 2008 Jo-Philipp Wich <xm@leipzig.freifunk.net>
-Copyright 2010 Manuel Munz <freifunk at somakoma dot de>
+Copyright 2011 Manuel Munz <freifunk at somakoma dot de>
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -13,33 +13,42 @@ You may obtain a copy of the License at
 $Id: mid.htm 5448 2009-10-31 15:54:11Z jow $
 
 -%>
+
+<%
+local i = 1
+%>
+
 <%+header%>
+
 <h2><a id="content" name="content"><%:Interfaces%></a></h2>
-<p><%:Overview of interfaces where OLSR is running%></p>
-<br />
-<table class="smalltext" cellspacing="0" cellpadding="6">
-<tr>
-<th><%:Interface%></th>
-<th><%:State%></th>
-<th><%:MTU%></th>
-<th><%:WLAN%></th>
-<th><%:Source address%></th>
-<th><%:Netmask%></th>
-<th><%:Broadcast address%></th>
-</tr>
-
-<% for k, i in ipairs(iface) do %>
-<tr>
-<td><%=i.Name%></td>
-<td><%=i.State%></td>
-<td><%=i.MTU%></td>
-<td><%=i.WLAN%></td>
-<td><%=i["Src-Adress"]%></td>
-<td><%=i.Mask%></td>
-<td><%=i["Dst-Adress"]%></td>
-</tr>
-<% end %>
-
-</table>
-<br />
+
+<fieldset class="cbi-section">
+	<legend><%:Overview of interfaces where OLSR is running%></legend>
+
+	<table class="cbi-section-table">
+		<tr>
+			<th class="cbi-section-table-cell"><%:Interface%></th>
+			<th class="cbi-section-table-cell"><%:State%></th>
+			<th class="cbi-section-table-cell"><%:MTU%></th>
+			<th class="cbi-section-table-cell"><%:WLAN%></th>
+			<th class="cbi-section-table-cell"><%:Source address%></th>
+			<th class="cbi-section-table-cell"><%:Netmask%></th>
+			<th class="cbi-section-table-cell"><%:Broadcast address%></th>
+		</tr>
+
+		<% for k, iface in ipairs(iface) do %>
+
+		<tr class="cbi-section-table-row cbi-rowstyle-<%=i%>">
+			<td class="cbi-section-table-cell"><%=iface.Name%></td>
+			<td class="cbi-section-table-cell"><%=iface.State%></td>
+			<td class="cbi-section-table-cell"><%=iface.MTU%></td>
+			<td class="cbi-section-table-cell"><%=iface.WLAN%></td>
+			<td class="cbi-section-table-cell"><%=iface["Src-Adress"]%></td>
+			<td class="cbi-section-table-cell"><%=iface.Mask%></td>
+			<td class="cbi-section-table-cell"><%=iface["Dst-Adress"]%></td>
+		</tr>
+		<% if i == 1 then i = 0 elseif i == 0 then i = 1 end
+		end %>
+	</table>
+</fieldset>
 <%+footer%>
diff --git a/applications/luci-olsr/luasrc/view/status-olsr/mid.htm b/applications/luci-olsr/luasrc/view/status-olsr/mid.htm
index c934fc9d7..1af864d85 100644
--- a/applications/luci-olsr/luasrc/view/status-olsr/mid.htm
+++ b/applications/luci-olsr/luasrc/view/status-olsr/mid.htm
@@ -2,6 +2,7 @@
 LuCI - Lua Configuration Interface
 Copyright 2008 Steven Barth <steven@midlink.org>
 Copyright 2008 Jo-Philipp Wich <xm@leipzig.freifunk.net>
+Copyright 2011 Manuel Munz <freifunk at somakoma dot de>
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -12,21 +13,30 @@ You may obtain a copy of the License at
 $Id$
 
 -%>
+<%
+local i = 1
+%>
+
 <%+header%>
 <h2><a id="content" name="content"><%:Active MID announcements%></a></h2>
-<p><%:Overview of known multiple interface announcements%></p>
-<br />
-<table class="smalltext" cellspacing="0" cellpadding="6">
-<tr>
-<th><%:OLSR node%></th>
-<th><%:Secondary OLSR interfaces%></th>
-</tr>
-<% for k, mid in ipairs(mids) do %>
-<tr>
-<td><a href="http://<%=mid["IP address"]%>"><%=mid["IP address"]%></a></td>
-<td><%=mid.Aliases%></td>
-</tr>
-<% end %>
-</table>
-<br />
+
+<fieldset class="cbi-section">
+	<legend><%:Overview of known multiple interface announcements%></legend>
+	<table class="cbi-section-table">
+		<tr class="cbi-section-table-titles">
+			<th class="cbi-section-table-cell"><%:OLSR node%></th>
+			<th class="cbi-section-table-cell" ><%:Secondary OLSR interfaces%></th>
+		</tr>
+
+		<% for k, mid in ipairs(mids) do %>
+
+		<tr class="cbi-section-table-row cbi-rowstyle-<%=i%>">
+			<td class="cbi-section-table-cell"><a href="http://<%=mid["IP address"]%>/cgi-bin-status.html"><%=mid["IP address"]%></a></td>
+			<td class="cbi-section-table-cell"><%=mid.Aliases%></td>
+		</tr>
+
+		<% if i == 1 then i = 0 elseif i == 0 then i = 1 end
+		end %>
+	</table>
+</fieldset>
 <%+footer%>
diff --git a/applications/luci-olsr/luasrc/view/status-olsr/neighbors.htm b/applications/luci-olsr/luasrc/view/status-olsr/neighbors.htm
index 46ebebf86..4eff933c9 100644
--- a/applications/luci-olsr/luasrc/view/status-olsr/neighbors.htm
+++ b/applications/luci-olsr/luasrc/view/status-olsr/neighbors.htm
@@ -2,65 +2,153 @@
 LuCI - Lua Configuration Interface
 Copyright 2008 Steven Barth <steven@midlink.org>
 Copyright 2008 Jo-Philipp Wich <xm@leipzig.freifunk.net>
-
+Copyright 2011 Manuel Munz <freifunk at somakoma dot de>
+   
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
 
 	http://www.apache.org/licenses/LICENSE-2.0
 
-$Id: index.htm 6619 2010-12-05 15:02:44Z soma $
-
 -%>
-<%+header%>
-<h2><a id="content" name="content"><%:OLSR connections%></a></h2>
-<p><%:Overview of currently established OLSR connections%></p>
-<br />
-<table class="smalltext" cellspacing="0" cellpadding="6">
-<tr>
-<th><%:Neighbour IP%></th>
-<th><%:Hostname%></th>
-<th><%:Local interface IP%></th>
-<th><%:Device%></th>
-<th>LQ</th>
-<th>NLQ</th>
-<th>ETX</th>
-</tr>
-<% for k, link in ipairs(links) do
-	local color = "#bb3333"
-
-	link.Cost = tonumber(link.Cost) or 0
-	if link.Cost == 0 then
-		color = "#bb3333"
-	elseif link.Cost < 4 then
-		color = "#00cc00"
-	elseif link.Cost < 10 then
-		color = "#ffcb05"
-	elseif link.Cost < 100 then
-		color = "#ff6600"
-	end
 
-	defaultgw_color = ""
-	if link.defaultgw == 1 then
-		defaultgw_color = "#ffff99"
+<%
+local olsrtools = require "luci.tools.olsr"
+
+if luci.http.formvalue("status") == "1" then
+	local rv = {}
+	local i = 1
+
+	for k, link in ipairs(links) do
+		link.Cost = tonumber(link.Cost) or 0
+		local color = olsrtools.etx_color(link.Cost)
+		defaultgw_color = ""
+		if link.defaultgw == 1 then
+			defaultgw_color = "#ffff99"
+		end
+
+		rv[#rv+1] = {
+			rip = link["Remote IP"],
+			hn = link["Hostname"],
+			lip = link["Local IP"],
+			dev = link["Local Device"],
+			lq = link.LQ,
+			nlq = link.NLQ,
+			cost = string.format("%.3f", link.Cost),
+			color = color,
+			rs = i,
+			dfgcolor = defaultgw_color
+			}
+			if i == 1 then i = 0 elseif i == 0 then i = 1 end
 	end
+	luci.http.prepare_content("application/json")
+	luci.http.write_json(rv)
+	return
+end
 %>
-<tr>
-<td style="background-color:<%=defaultgw_color%>"><a href="http://<%=link["Remote IP"]%>/cgi-bin-status.html"><%=link["Remote IP"]%></a></td>
-<td style="background-color:<%=defaultgw_color%>"><a href="http://<%=link["Hostname"]%>/cgi-bin-status.html"><%=link["Hostname"]%></a></td>
-<td style="background-color:<%=defaultgw_color%>"><%=link["Local IP"]%></td>
-<td style="background-color:<%=defaultgw_color%>"><%=link["Local Device"]%></td>
-<td style="background-color:<%=defaultgw_color%>"><%=link.LQ%></td>
-<td style="background-color:<%=defaultgw_color%>"><%=link.NLQ%></td>
-<td style="background-color:<%=color%>"><%=string.format("%.3f", link.Cost)%></td>
-</tr>
-<% end %>
-</table>
+
+<%+header%>
+
+<script type="text/javascript" src="<%=resource%>/cbi.js"></script>
+<script type="text/javascript">//<![CDATA[
+
+	XHR.poll(10 , '<%=REQUEST_URI%>', { status: 1 }, 
+		function(x, info)
+		{
+		var nt = document.getElementById('olsr_neigh_table');
+			if (nt)
+			{
+				var s = '';
+				for (var idx = 0; idx < info.length; idx++)
+				{
+					var neigh = info[idx];
+
+					s += String.format(
+						'<tr class="cbi-section-table-row cbi-rowstyle-%s">' +
+							'<td class="cbi-section-table-cell" style="background-color:%s"><a href="http://%s/cgi-bin-status.html">%s</a></td>',
+						neigh.rs, neigh.dfgcolor, neigh.rip, neigh.rip
+						);
+					if (neigh.hn) {
+						s += String.format(					
+							'<td class="cbi-section-table-cell" style="background-color:%s"><a href="http://%s/cgi-bin-status.html">%s</a></td>',
+							neigh.dfgcolor, neigh.hn, neigh.hn
+							);
+						}
+					else	{
+						s += String.format(
+							'<td class="cbi-section-table-cell" style="background-color:%s">?</td>',
+							neigh.dfgcolor
+							);
+						}
+					s += String.format(
+							'<td class="cbi-section-table-cell" style="background-color:%s">%s</td>' +
+							'<td class="cbi-section-table-cell" style="background-color:%s">%s</td>' +
+							'<td class="cbi-section-table-cell" style="background-color:%s">%s</td>' +
+							'<td class="cbi-section-table-cell" style="background-color:%s">%s</td>' +
+							'<td class="cbi-section-table-cell" style="background-color:%s">%s</td>' +
+						'</tr>',
+							
+							neigh.dfgcolor, neigh.lip, neigh.dfgcolor, neigh.dev, neigh.dfgcolor, neigh.lq, neigh.dfgcolor, neigh.nlq, neigh.color, neigh.cost || '?'
+						);
+				}
+
+				nt.innerHTML = s;
+			}
+		}
+	);
+//]]></script>
+
+
+<h2><a id="content" name="content"><%:OLSR connections%></a></h2>
+
+<fieldset class="cbi-section">
+	<legend><%:Overview of currently established OLSR connections%></legend>
+
+	<table class="cbi-section-table">
+		<tr class="cbi-section-table-titles">
+			<th class="cbi-section-table-cell"><%:Neighbour IP%></th>
+			<th class="cbi-section-table-cell"><%:Hostname%></th>
+			<th class="cbi-section-table-cell"><%:Local interface IP%></th>
+			<th class="cbi-section-table-cell"><%:Device%></th>
+			<th class="cbi-section-table-cell">LQ</th>
+			<th class="cbi-section-table-cell">NLQ</th>
+			<th class="cbi-section-table-cell">ETX</th>
+		</tr>
+
+	
+		<tbody id="olsr_neigh_table">
+		<% 	local i = 1
+			for k, link in ipairs(links) do
+			link.Cost = tonumber(link.Cost) or 0
+			color = olsrtools.etx_color(link.Cost)
+
+			defaultgw_color = ""
+			if link.defaultgw == 1 then
+				defaultgw_color = "#ffff99"
+			end
+		%>
+
+		<tr class="cbi-section-table-row cbi-rowstyle-<%=i%>">
+			<td class="cbi-section-table-cell" style="background-color:<%=defaultgw_color%>"><a href="http://<%=link["Remote IP"]%>/cgi-bin-status.html"><%=link["Remote IP"]%></a></td>
+			<td class="cbi-section-table-cell" style="background-color:<%=defaultgw_color%>"><a href="http://<%=link["Hostname"]%>/cgi-bin-status.html"><%=link["Hostname"]%></a></td>
+			<td class="cbi-section-table-cell" style="background-color:<%=defaultgw_color%>"><%=link["Local IP"]%></td>
+			<td class="cbi-section-table-cell" style="background-color:<%=defaultgw_color%>"><%=link["Local Device"]%></td>
+			<td class="cbi-section-table-cell" style="background-color:<%=defaultgw_color%>"><%=link.LQ%></td>
+			<td class="cbi-section-table-cell" style="background-color:<%=defaultgw_color%>"><%=link.NLQ%></td>
+			<td class="cbi-section-table-cell" style="background-color:<%=color%>"><%=string.format("%.3f", link.Cost)%></td>
+		</tr>
+		<% 
+			if i == 1 then i = 0 elseif i == 0 then i = 1 end
+		end %>
+		</tbody>
+	</table>
 <br />
+
 <h3><%:Legend%>:</h3>
 <ul>
-<li><strong>LQ: </strong><%:Success rate of packages received from the neighbour%></li>
-<li><strong>NLQ: </strong><%:Success rate of packages sent to the neighbour%></li>
-<li><strong>ETX: </strong><%:Expected retransmission count%></li>
+	<li><strong>LQ: </strong><%:Success rate of packages received from the neighbour%></li>
+	<li><strong>NLQ: </strong><%:Success rate of packages sent to the neighbour%></li>
+	<li><strong>ETX: </strong><%:Expected retransmission count%></li>
 </ul>
+</fieldset>
 <%+footer%>
diff --git a/applications/luci-olsr/luasrc/view/status-olsr/overview.htm b/applications/luci-olsr/luasrc/view/status-olsr/overview.htm
index 952dd28cc..753e3b912 100644
--- a/applications/luci-olsr/luasrc/view/status-olsr/overview.htm
+++ b/applications/luci-olsr/luasrc/view/status-olsr/overview.htm
@@ -2,7 +2,7 @@
 LuCI - Lua Configuration Interface
 Copyright 2008 Steven Barth <steven@midlink.org>
 Copyright 2008 Jo-Philipp Wich <xm@leipzig.freifunk.net>
-Copyright 2010 Manuel Munz <freifunk at somakoma dot de>
+Copyright 2011 Manuel Munz <freifunk at somakoma dot de>
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -69,6 +69,23 @@ local nr_hna = #data.HNA
 
 local meshfactor = string.format("%.2f", nr_topo / nr_nodes)
 
+if luci.http.formvalue("status") == "1" then
+	rv = {
+		nr_neighbors = nr_neigbors,
+		neighbors = neighbors,
+		interfaces = interfaces,
+		nr_ifaces = nr_ifaces,
+		nr_links = nr_links,
+		nr_topo = nr_topo,
+		nr_nodes = nr_nodes,
+		meshfactor = meshfactor
+	}
+	luci.http.prepare_content("application/json")
+	luci.http.write_json(rv)
+	return
+end
+	
+
 local ipv = luci.model.uci.cursor():get_first("olsrd", "olsrd", "IpVersion", "4")
 
 function write_conf(conf, file)
@@ -104,6 +121,43 @@ end
 %>
 
 <%+header%>
+
+<script type="text/javascript" src="<%=resource%>/cbi.js"></script>
+<script type="text/javascript">//<![CDATA[
+
+XHR.poll(30, '<%=REQUEST_URI%>', { status: 1 },
+                function(x, info)
+                {
+		var e;
+
+		if (e = document.getElementById('nr_neighbors'))
+			e.innerHTML = info.nr_neighbors;
+
+		if (e = document.getElementById('neighbors'))
+			e.innerHTML = info.neighbors;
+
+		if (e = document.getElementById('nr_ifaces'))
+			e.innerHTML = info.nr_ifaces;
+
+		if (e = document.getElementById('interfaces'))
+			e.innerHTML = info.interfaces;
+
+		if (e = document.getElementById('nr_links'))
+			e.innerHTML = info.nr_links;
+
+		if (e = document.getElementById('nr_topo'))
+			e.innerHTML = info.nr_topo;
+
+		if (e = document.getElementById('nr_nodes'))
+			e.innerHTML = info.nr_nodes;
+
+		if (e = document.getElementById('meshfactor'))
+			e.innerHTML = info.meshfactor;
+		}
+	);
+//]]></script>
+
+
 <h2><a id="content" name="content">OLSR <%:Overview%></a></h2>
 
 <div class="cbi-map">
@@ -111,10 +165,15 @@ end
 		<div class="cbi-value"><label class="cbi-value-title"><%:Interfaces%></label>
 			<div class="cbi-value-field">
 				<div style="width: 6em; float:left;">
-					<a href="<%=luci.dispatcher.build_url("freifunk", "olsr", "interfaces")%>"><%=nr_ifaces%></a>
+					<a href="<%=luci.dispatcher.build_url("freifunk", "olsr", "interfaces")%>">
+						<span id="nr_ifaces">
+							<%=nr_ifaces%></a>
+						<span>
 				</div>
 				<div style="padding-left: 6em;">
-					<%=interfaces%>
+					<span id="interfaces">
+						<%=interfaces%>
+					</span>
 				</div>
 			</div>
 		</div>
@@ -122,31 +181,48 @@ end
 		<div class="cbi-value"><label class="cbi-value-title"><%:Neighbors%></label>
 			<div class="cbi-value-field">
 				<div style="width: 6em; float:left;">
-					<a href="<%=luci.dispatcher.build_url("freifunk", "olsr", "neighbors")%>"><%=nr_neigh%></a>
+					<a href="<%=luci.dispatcher.build_url("freifunk", "olsr", "neighbors")%>">
+						<span id="nr_neigh">
+							<%=nr_neigh%></a>
+						</span>
 				</div>
 				<div style="padding-left: 6em;">
-					<%=neighbors%>
+					<span id="neighbors">
+						<%=neighbors%>
+					</span>
 				</div>
 			</div>
 		</div>
 
 		<div class="cbi-value"><label class="cbi-value-title"><%:Nodes%></label>
-			<div class="cbi-value-field"><a href="<%=luci.dispatcher.build_url("freifunk", "olsr", "topology")%>"><%=nr_nodes%></a>
+			<div class="cbi-value-field"><a href="<%=luci.dispatcher.build_url("freifunk", "olsr", "topology")%>">
+				<span id="nr_nodes">
+					<%=nr_nodes%></a>
+				</span>
 			</div>
 		</div>
 
 		<div class="cbi-value"><label class="cbi-value-title"><%:HNA%></label>
-			<div class="cbi-value-field"><a href="<%=luci.dispatcher.build_url("freifunk", "olsr", "hna")%>"><%=nr_hna%></a>
+			<div class="cbi-value-field"><a href="<%=luci.dispatcher.build_url("freifunk", "olsr", "hna")%>">
+				<span id="nr_hna">
+					<%=nr_hna%></a>
+				</span>
 			</div>
 		</div>
 
 		<div class="cbi-value"><label class="cbi-value-title"><%:Links total%></label>
-			<div class="cbi-value-field"><a href="<%=luci.dispatcher.build_url("freifunk", "olsr", "topology")%>"><%=nr_topo%></a>
+			<div class="cbi-value-field"><a href="<%=luci.dispatcher.build_url("freifunk", "olsr", "topology")%>">
+				<span id="nr_topo">
+					<%=nr_topo%></a>
+				</span>
 			</div>
 		</div>
 
 		<div class="cbi-value"><label class="cbi-value-title"><%:Links per node (average)%></label>
-			<div class="cbi-value-field"><%=meshfactor%>
+			<div class="cbi-value-field">
+				<span id="meshfactor">
+					<%=meshfactor%>
+				</span>
 			</div>
 		</div>
 	</div>
diff --git a/applications/luci-olsr/luasrc/view/status-olsr/routes.htm b/applications/luci-olsr/luasrc/view/status-olsr/routes.htm
index cad9c3588..5281f7083 100644
--- a/applications/luci-olsr/luasrc/view/status-olsr/routes.htm
+++ b/applications/luci-olsr/luasrc/view/status-olsr/routes.htm
@@ -2,55 +2,129 @@
 LuCI - Lua Configuration Interface
 Copyright 2008 Steven Barth <steven@midlink.org>
 Copyright 2008 Jo-Philipp Wich <xm@leipzig.freifunk.net>
+Copyright 2011 Manuel Munz <freifunk at somakoma dot de>
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
 
 	http://www.apache.org/licenses/LICENSE-2.0
+-%>
 
-$Id$
+<%
 
--%>
-<%+header%>
-<h2><a id="content" name="content"><%:Known OLSR routes%></a></h2>
-<p><%:Overview of currently known routes to other OLSR nodes%></p>
-<br />
-<table class="smalltext" cellspacing="0" cellpadding="6">
-<tr>
-<th><%:Announced network%></th>
-<th><%:OLSR gateway%></th>
-<th><%:Interface%></th>
-<th><%:Metric%></th>
-<th>ETX</th>
-</tr>
-<% for k, route in ipairs(routes) do
-	local color = "#bb3333"
-
-	route.ETX = tonumber(route.ETX)
-	if route.ETX == 0 then
-		color = "#bb3333"
-	elseif route.ETX < 4 then
-		color = "#00cc00"
-	elseif route.ETX < 10 then
-		color = "#ffcb05"
-	elseif route.ETX < 100 then
-		color = "#ff6600"
+local olsrtools = require "luci.tools.olsr"
+local i = 1
+
+if luci.http.formvalue("status") == "1" then
+	local rv = {}
+	for k, route in ipairs(routes) do
+		rv[#rv+1] = {
+			hostname = route.Hostname,
+	                dest = route.Destination,
+			gw = route["Gateway IP"],
+			interface = route.Interface,
+			metric = route.Metric,
+			etx = tonumber(route.ETX),
+			color = olsrtools.etx_color(tonumber(route.ETX)),
+			rs = i
+		}
+		if i == 1 then i = 0 elseif i == 0 then i = 1 end	
 	end
+	luci.http.prepare_content("application/json")
+	luci.http.write_json(rv)
+	return
+end
+
 %>
-<tr>
-<td><%=route.Destination%></td>
-<td>
-<a href="http://<%=route["Gateway IP"]%>/cgi-bin-status.html"><%=route["Gateway IP"]%></a>
-<% if route.Hostname then %>
-	/ <a href="http://<%=route.Hostname%>/cgi-bin-status.html"><%=route.Hostname%></a>  
-<% end %>
-</td>
-<td><%=route.Interface%></td>
-<td><%=route.Metric%></td>
-<td style="background-color:<%=color%>"><%=string.format("%.3f", tonumber(route.ETX) or 0)%></td>
-</tr>
-<% end %>
+
+<%+header%>
+
+<script type="text/javascript" src="<%=resource%>/cbi.js"></script>
+<script type="text/javascript">//<![CDATA[  
+
+XHR.poll(20, '<%=REQUEST_URI%>', { status: 1 },
+		function(x, info)
+		{
+
+		var rt = document.getElementById('olsrd_routes');
+			if (rt)
+			{
+				var s = '';
+				for (var idx = 0; idx < info.length; idx++)
+				{
+					var route = info[idx];
+
+					s += String.format(
+						'<tr class="cbi-section-table-row cbi-rowstyle-%s">' +
+							'<td class="cbi-section-table-cell">%s</td>' +
+							'<td class="cbi-section-table-cell">' +
+			                	                '<a href="http://%s/cgi-bin-status.html">%s</a>',
+								route.rs, route.dest, route.gw, route.gw
+						)
+
+					if (route.hostname)
+						{
+						s += String.format(
+			                                        ' / <a href="http://%s/cgi-bin-status.html">%s</a>',
+								route.hostname, route.hostname || '?'
+								);
+						}
+					s += String.format(
+				                        '</td>' +
+							'<td class="cbi-section-table-cell">%s</td>' +
+							'<td class="cbi-section-table-cell">%s</td>' +
+							'<td class="cbi-section-table-cell" style="background-color:%s">%s</td>' +
+						'</tr>',
+						route.interface, route.metric, route.color, route.etx || '?'
+					);
+				}
+                        }
+			 rt.innerHTML = s;
+
+		}
+	);
+//]]></script>
+
+
+
+<h2><a id="content" name="content"><%:Known OLSR routes%></a></h2>
+
+<fieldset class="cbi-section">
+<legend><%:Overview of currently known routes to other OLSR nodes%></legend>
+
+<table class="cbi-section-table">
+	<tr class="cbi-section-table-titles">
+		<th class="cbi-section-table-cell"><%:Announced network%></th>
+		<th class="cbi-section-table-cell"><%:OLSR gateway%></th>
+		<th class="cbi-section-table-cell"><%:Interface%></th>
+		<th class="cbi-section-table-cell"><%:Metric%></th>
+		<th class="cbi-section-table-cell">ETX</th>
+	</tr>
+
+	<tbody id="olsrd_routes">
+
+	<% for k, route in ipairs(routes) do
+		color = olsrtools.etx_color(tonumber(route.ETX))
+	%>
+
+		<tr class="cbi-section-table-row cbi-rowstyle-<%=i%>">
+			<td class="cbi-section-table-cell"><%=route.Destination%></td>
+			<td class="cbi-section-table-cell">
+				<a href="http://<%=route["Gateway IP"]%>/cgi-bin-status.html"><%=route["Gateway IP"]%></a>
+				<% if route.Hostname then %>
+					/ <a href="http://<%=route.Hostname%>/cgi-bin-status.html"><%=route.Hostname%></a>  
+				<% end %>
+			</td>
+			<td class="cbi-section-table-cell"><%=route.Interface%></td>
+			<td class="cbi-section-table-cell"><%=route.Metric%></td>
+			<td class="cbi-section-table-cell" style="background-color:<%=color%>"><%=string.format("%.3f", tonumber(route.ETX) or 0)%></td>
+		</tr>
+	<% 
+	if i == 1 then i = 0 elseif i == 0 then i = 1 end
+	end %>
+	</tbody>
 </table>
-<br />
+
+</fieldset>
 <%+footer%>
diff --git a/applications/luci-olsr/luasrc/view/status-olsr/smartgw.htm b/applications/luci-olsr/luasrc/view/status-olsr/smartgw.htm
index ecf7b4150..60f43b7f8 100644
--- a/applications/luci-olsr/luasrc/view/status-olsr/smartgw.htm
+++ b/applications/luci-olsr/luasrc/view/status-olsr/smartgw.htm
@@ -2,7 +2,7 @@
 LuCI - Lua Configuration Interface
 Copyright 2008 Steven Barth <steven@midlink.org>
 Copyright 2008 Jo-Philipp Wich <xm@leipzig.freifunk.net>
-Copyright 2010 Manuel Munz <freifunk at somakoma dot de>
+Copyright 2011 Manuel Munz <freifunk at somakoma dot de>
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -12,6 +12,7 @@ You may obtain a copy of the License at
 -%>
 
 <%
+local i = 1
 require("luci.model.uci")
 local uci = luci.model.uci.cursor_state()
 
@@ -23,39 +24,48 @@ end)
 <%+header%>
 
 <h2><a id="content" name="content"><%:SmartGW announcements%></a></h2>
+
 <% if has_smartgw then %>
-<p><%:Overview of smart gateways in this network%></p>
-<br />
-<table class="smalltext" cellspacing="0" cellpadding="6">
-<tr>
-<th><%:Gateway%></th>
-<th><%:Status%></th>
-<th><%:ETX%></th>
-<th><%:Hops%></th>
-<th><%:Uplink%></th>
-<th><%:Downlink%></th>
-<th><%:IPv4%></th>
-<th><%:IPv6%></th>
-<th><%:Prefix%></th>
-
-</tr>
-<% for k, gw in ipairs(gws) do %>
-<tr>
-<td><a href="http://<%=gw["Gateway IP"]%>/cgi-bin-status.html"><%=gw["Gateway IP"]%></a></td>
-<td><%=gw.Status%></td>
-<td><%=gw.ETX%></td>
-<td><%=gw.Hopcnt%></td>
-<td><%=gw.Uplink%></td>
-<td><%=gw.Downlnk%></td>
-<td><%=gw.IPv4%></td>
-<td><%=gw.IPv6%></td>
-<td><%=gw.Prefix%></td>
-</tr>
-<% end %>
-</table>
-<br />
+
+	<fieldset class="cbi-section">
+		<legend><%:Overview of smart gateways in this network%></legend>
+		<table class="cbi-section-table">
+			<tr class="cbi-section-table-titles">
+				<th class="cbi-section-table-cell"><%:Gateway%></th>
+				<th class="cbi-section-table-cell"><%:Status%></th>
+				<th class="cbi-section-table-cell"><%:ETX%></th>
+				<th class="cbi-section-table-cell"><%:Hops%></th>
+				<th class="cbi-section-table-cell"><%:Uplink%></th>
+				<th class="cbi-section-table-cell"><%:Downlink%></th>
+				<th class="cbi-section-table-cell"><%:IPv4%></th>
+				<th class="cbi-section-table-cell"><%:IPv6%></th>
+				<th class="cbi-section-table-cell"><%:Prefix%></th>
+
+			</tr>
+
+			<% for k, gw in ipairs(gws) do %>
+
+			<tr class="cbi-section-table-row cbi-rowstyle-<%=i%>">
+				<td class="cbi-section-table-cell"><a href="http://<%=gw["Gateway IP"]%>/cgi-bin-status.html"><%=gw["Gateway IP"]%></a></td>
+				<td class="cbi-section-table-cell"><%=gw.Status%></td>
+				<td class="cbi-section-table-cell"><%=gw.ETX%></td>
+				<td class="cbi-section-table-cell"><%=gw.Hopcnt%></td>
+				<td class="cbi-section-table-cell"><%=gw.Uplink%></td>
+				<td class="cbi-section-table-cell"><%=gw.Downlnk%></td>
+				<td class="cbi-section-table-cell"><%=gw.IPv4%></td>
+				<td class="cbi-section-table-cell"><%=gw.IPv6%></td>
+				<td class="cbi-section-table-cell"><%=gw.Prefix%></td>
+			</tr>
+
+			<% if i == 1 then i = 0 elseif i == 0 then i = 1 end
+			end %>
+		</table>
+	</fieldset>
 
 <% else %>
-<%:SmartGateway is not configured on this system.%>
+
+	<%:SmartGateway is not configured on this system.%>
+
 <% end %>
+
 <%+footer%>
diff --git a/applications/luci-olsr/luasrc/view/status-olsr/topology.htm b/applications/luci-olsr/luasrc/view/status-olsr/topology.htm
index 110faeafc..b4221bb80 100644
--- a/applications/luci-olsr/luasrc/view/status-olsr/topology.htm
+++ b/applications/luci-olsr/luasrc/view/status-olsr/topology.htm
@@ -2,6 +2,7 @@
 LuCI - Lua Configuration Interface
 Copyright 2008 Steven Barth <steven@midlink.org>
 Copyright 2008 Jo-Philipp Wich <xm@leipzig.freifunk.net>
+Copyright 2011 Manuel Munz <freifunk at somakoma dot de>
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -12,28 +13,41 @@ You may obtain a copy of the License at
 $Id$
 
 -%>
+<%
+local i = 1
+local olsrtools = require "luci.tools.olsr"
+%>
+
 <%+header%>
 <h2><a id="content" name="content"><%:Active OLSR nodes%></a></h2>
-<p><%:Overview of currently known OLSR nodes%></p>
-<br />
-<table class="smalltext" cellspacing="0" cellpadding="6">
-<tr>
-<th><%:OLSR node%></th>
-<th><%:Last hop%></th>
-<th>LQ</th>
-<th>ILQ</th>
-<th>ETX</th>
-</tr>
-<% for k, route in ipairs(routes) do
-%>
-<tr>
-<td><a href="http://<%=route["Dest. IP"]%>"><%=route["Dest. IP"]%></a></td>
-<td><a href="http://<%=route["Last hop IP"]%>"><%=route["Last hop IP"]%></a></td>
-<td><%=route.LQ%></td>
-<td><%=route.NLQ%></td>
-<td><%=string.format("%.3f", tonumber(route.Cost) or 0)%></td>
-</tr>
-<% end %>
-</table>
-<br />
+
+<fieldset class="cbi-section">
+	<legend><%:Overview of currently known OLSR nodes%></legend>
+	<table class="cbi-section-table">
+		<tr class="cbi-section-table-titles">
+			<th class="cbi-section-table-cell"><%:OLSR node%></th>
+			<th class="cbi-section-table-cell"><%:Last hop%></th>
+			<th class="cbi-section-table-cell"><%:LQ%></th>
+			<th class="cbi-section-table-cell"><%:NLQ%></th>
+			<th class="cbi-section-table-cell"><%:ETX%></th>
+		</tr>
+
+		<% for k, route in ipairs(routes) do 
+			local cost = string.format("%.3f", tonumber(route.Cost) or 0)
+			local color = olsrtools.etx_color(tonumber(cost))
+		%>
+
+		<tr class="cbi-section-table-row cbi-rowstyle-<%=i%>">
+			<td class="cbi-section-table-cell"><a href="http://<%=route["Dest. IP"]%>/cgi-bin-status.html"><%=route["Dest. IP"]%></a></td>
+			<td class="cbi-section-table-cell"><a href="http://<%=route["Last hop IP"]%>/cgi-bin-status.html"><%=route["Last hop IP"]%></a></td>
+			<td class="cbi-section-table-cell"><%=route.LQ%></td>
+			<td class="cbi-section-table-cell"><%=route.NLQ%></td>
+			<td class="cbi-section-table-cell" style="background-color:<%=color%>"><%=cost%></td>
+		</tr>
+
+		<% 	if i == 1 then i = 0 elseif i == 0 then i = 1 end 
+		end %>
+	</table>
+</fieldset>
+
 <%+footer%>