Cleanup HTML including removing DL/DT/DD, use tablesorter where possible, and use lowercase tags

7 files changed, 114 insertions, 84 deletions

diff --git a/rrdtool-config-html.lsp b/rrdtool-config-html.lsp
index 2c24500..fa879a1 100644
--- a/rrdtool-config-html.lsp
+++ b/rrdtool-config-html.lsp
@@ -5,7 +5,7 @@ htmlviewfunctions = require("htmlviewfunctions")
 <% htmlviewfunctions.displaycommandresults({"install","editgraphcfg"}, session) %>
 <% htmlviewfunctions.displaycommandresults({"delete", "rrdinfo"}, session) %>
 
-<H1>Configure</H1>
+<h1>Configure</h1>
 
 <% if viewlibrary and viewlibrary.dispatch_component then
 	viewlibrary.dispatch_component("listrrd")
diff --git a/rrdtool-editgraphcfg-html.lsp b/rrdtool-editgraphcfg-html.lsp
index 1d5f446..6f29307 100644
--- a/rrdtool-editgraphcfg-html.lsp
+++ b/rrdtool-editgraphcfg-html.lsp
@@ -3,36 +3,31 @@
 <% html = require("acf.html") %>
 
 <% if form.type == "form" then %>
-<H1>Configuration</H1>
-<H2>Expert Configuration</H2>
+<h1>Configuration</h1>
+<h2>Expert Configuration</h2>
 <% else %>
-<H1>View File</H1>
+<h1>View File</h1>
 <% end %>
-<H3>File Details</H3>
-<DL>
+<h3>File Details</h3>
 <% 
 htmlviewfunctions.displayitem(form.value.filename)
 htmlviewfunctions.displayitem(form.value.filesize)
 htmlviewfunctions.displayitem(form.value.mtime)
 %>
-</DL>
 
-<H3>File Content</H3>
+<h3>File Content</h3>
 <% if form.type == "form" then %>
 <% form.action = page_info.script .. page_info.prefix .. page_info.controller .. "/" .. page_info.action %>
 <% htmlviewfunctions.displayformstart(form) %>
 <input type="hidden" name="filename" value="<%= html.html_escape(form.value.filename.value) %>">
 <% else %>
-<DL>
 <% end %>
 <textarea name="filecontent">
 <%= html.html_escape(form.value.filecontent.value) %>
 </textarea>
-<% if form.value.filecontent.errtxt then %><P CLASS='error'><%= string.gsub(html.html_escape(form.value.filecontent.errtxt), "\n", "<BR>") %></P><% end %>
-<% if form.value.filecontent.descr then %><P CLASS='descr'><%= string.gsub(html.html_escape(form.value.filecontent.descr), "\n", "<BR>") %></P><% end %>
+<% if form.value.filecontent.errtxt then %><p class='error'><%= string.gsub(html.html_escape(form.value.filecontent.errtxt), "\n", "<br/>") %></p><% end %>
+<% if form.value.filecontent.descr then %><p class='descr'><%= string.gsub(html.html_escape(form.value.filecontent.descr), "\n", "<br/>") %></p><% end %>
 
 <% if form.type == "form" then %>
 <% htmlviewfunctions.displayformend(form) %>
-<% else %>
-</DL>
 <% end %>
diff --git a/rrdtool-listgraphcfg-html.lsp b/rrdtool-listgraphcfg-html.lsp
index a8657da..0beebc4 100644
--- a/rrdtool-listgraphcfg-html.lsp
+++ b/rrdtool-listgraphcfg-html.lsp
@@ -3,6 +3,24 @@ htmlviewfunctions = require("htmlviewfunctions")
 html = require("acf.html")
 %>
 
+<script type="text/javascript">
+	if (typeof jQuery == 'undefined') {
+		document.write('<script type="text/javascript" src="<%= html.html_escape(page_info.wwwprefix) %>/js/jquery-latest.js"><\/script>');
+	}
+</script>
+
+<script type="text/javascript">
+	if (typeof $.tablesorter == 'undefined') {
+		document.write('<script type="text/javascript" src="<%= html.html_escape(page_info.wwwprefix) %>/js/jquery.tablesorter.js"><\/script>');
+	}
+</script>
+
+<script type="text/javascript">
+	$(document).ready(function() {
+		$("#listconfig").tablesorter({headers: {0:{sorter: false}}, widgets: ['zebra']});
+	});
+</script>
+
 <% htmlviewfunctions.displaycommandresults({"delete"}, session) %>
 
 <script type="text/javascript">
@@ -19,39 +37,39 @@ function javascript_confirm_graph(formID,filename) {
 
 <form id="confirmDisplay" action="#" onsubmit="return false"></form>
 
-<TABLE>
-	<TR style="background:#eee;font-weight:bold;">
-		<TD style="padding-right:20px;white-space:nowrap;text-align:left;" class="header">Action</TD>
-		<TD style="padding-right:20px;white-space:nowrap;text-align:right;" class="header">Size</TD>
-		<TD style="padding-right:20px;white-space:nowrap;text-align:left;" class="header">Last Modified</TD>
-		<TD style="white-space:nowrap;text-align:left;" class="header">File</TD>
-	</TR>		
+<table id="listconfig" class="tablesorter"><thead>
+	<tr>
+		<th>Action</th>
+		<th>Size</th>
+		<th>Last Modified</th>
+		<th>File</th>
+	</tr>
+</thead><tbody>
 <% for i,file in ipairs(form.value) do %>
-	<TR>
-		<TD style="padding-right:20px;white-space:nowrap;">
+	<tr>
+		<td>
 			<% if viewlibrary.check_permission("delete") then %>
-				<A STYLE="cursor: pointer;" onclick="javascript_confirm_graph('confirmDisplay','<% io.write(file.value.filename.value) %>')">Delete</A>
+				<A style="cursor: pointer;" onclick="javascript_confirm_graph('confirmDisplay','<% io.write(file.value.filename.value) %>')">Delete</A>
 			<% end %>
 			<%
 			if viewlibrary.check_permission("editgraphcfg") then io.write(html.link{value = "editgraphcfg?filename=" .. file.value.filename.value.."&redir="..page_info.orig_action, label="Edit " }) end
 			%>
-		</TD>
-		<TD style="padding-right:20px;white-space:nowrap;text-align:right;"><%= html.html_escape(file.value.filesize.value) %></TD>
-		<TD style="padding-right:20px;white-space:nowrap;"><%= html.html_escape(file.value.mtime.value) %></TD>
-		<TD style="white-space:nowrap;" width="90%"><%= html.html_escape(string.gsub(file.value.filename.value, "^.*/", "")) %></TD>
-	</TR>
+		</td>
+		<td><%= html.html_escape(file.value.filesize.value) %></td>
+		<td><%= html.html_escape(file.value.mtime.value) %></td>
+		<td><%= html.html_escape(string.gsub(file.value.filename.value, "^.*/", "")) %></td>
+	</tr>
 <% end %>
 
 	<% if viewlibrary.check_permission("createrrd") then %>
-	<TR>
-		<TD style="padding-right:20px;white-space:nowrap;">
+	<tr>
+		<td>
 			<% io.write(html.link{value = "newgraphcfg", label="Create new graph " }) %>
-		</TD>
-		<TD>&nbsp;</TD><TD>&nbsp;</TD><TD>&nbsp;</TD>
-	</TR>
+		</td>
+		<td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
+	</tr>
 	<% end %>
-
-</TABLE>
+</tbody></table>
 
 <% if viewlibrary and viewlibrary.dispatch_component and viewlibrary.check_permission("newfile") then
 	local newfileform = viewlibrary.dispatch_component("newfile", nil, true) %>
diff --git a/rrdtool-listgraphs-html.lsp b/rrdtool-listgraphs-html.lsp
index f45c2d1..a66192b 100644
--- a/rrdtool-listgraphs-html.lsp
+++ b/rrdtool-listgraphs-html.lsp
@@ -2,7 +2,7 @@
 html = require("acf.html")
 %>
 
-<SCRIPT TYPE="text/javascript">
+<script type="text/javascript">
 <!--
 function popup(mylink, windowname)
 {
@@ -16,7 +16,7 @@ window.open(href, windowname, 'width=800,height=600,scrollbars=no,resizable=yes'
 return false;
 }
 //-->
-</SCRIPT>
+</script>
 
 
 <% if viewlibrary and viewlibrary.dispatch_component then
@@ -25,16 +25,17 @@ end %>
 
 <% icon=html.html_escape(page_info.wwwprefix..page_info.staticdir) .. "/tango/16x16/apps/utilities-system-monitor.png" %>
 
-<H1>Graphs</H1>
+<h1>Graphs</h1>
 <% 
 for grp,v in pairs(data) do
 %>
-<H2><% io.write(grp) %></H2>
+<h2><% io.write(grp) %></h2>
 	<% for k,graph in pairs(v) do %>
-		<DL><DT>
-		<A HREF="viewgraph?skinned=false&group=<%= grp %>&id=<%= k %>" onClick="return popup(this,'notes')"><IMG SRC='<%= icon %>' width='16' height='16'> <% io.write(graph.label or "Unknown") %></A></DT>
-		<DD><% io.write(graph.descr or "") %></DD>
-		</DL>
+		<div class='item'><div class='left'>
+		<a href="viewgraph?skinned=false&group=<%= grp %>&id=<%= k %>" onClick="return popup(this,'notes')"><img src='<%= icon %>' width='16' height='16'> <% io.write(graph.label or "Unknown") %></a></div>
+		<div class='right'>
+		<% io.write(graph.descr or "") %>
+		</div></div><!-- end .item -->
 	<% end %>
 <% end %>
 
diff --git a/rrdtool-listrrd-html.lsp b/rrdtool-listrrd-html.lsp
index 65a5ae5..c98f4a0 100644
--- a/rrdtool-listrrd-html.lsp
+++ b/rrdtool-listrrd-html.lsp
@@ -4,6 +4,24 @@ html = require("acf.html")
 %>
 
 <script type="text/javascript">
+	if (typeof jQuery == 'undefined') {
+		document.write('<script type="text/javascript" src="<%= html.html_escape(page_info.wwwprefix) %>/js/jquery-latest.js"><\/script>');
+	}
+</script>
+
+<script type="text/javascript">
+	if (typeof $.tablesorter == 'undefined') {
+		document.write('<script type="text/javascript" src="<%= html.html_escape(page_info.wwwprefix) %>/js/jquery.tablesorter.js"><\/script>');
+	}
+</script>
+
+<script type="text/javascript">
+	$(document).ready(function() {
+		$("#listrrd").tablesorter({headers: {0:{sorter: false}}, widgets: ['zebra']});
+	});
+</script>
+
+<script type="text/javascript">
 function javascript_confirm_demo(formID,filename) {
 	var message = "Are you sure you want to remove '" + filename + "'?";
 	var return_value = confirm(message);
@@ -17,41 +35,41 @@ function javascript_confirm_demo(formID,filename) {
 
 <form id="confirmDisplay" action="#" onsubmit="return false"></form>
 
-<TABLE>
-	<TR style="background:#eee;font-weight:bold;">
-		<TD style="padding-right:20px;white-space:nowrap;text-align:left;" class="header">Action</TD>
-		<TD style="padding-right:20px;white-space:nowrap;text-align:right;" class="header">Size</TD>
-		<TD style="padding-right:20px;white-space:nowrap;text-align:left;" class="header">Last Modified</TD>
-		<TD style="white-space:nowrap;text-align:left;" class="header">File</TD>
-	</TR>		
+<table id="listrrd" class="tablesorter"><thead>
+	<tr>
+		<th>Action</th>
+		<th>Size</th>
+		<th>Last Modified</th>
+		<th>File</th>
+	</tr>
+</thead><tbody>
 <% for i,file in ipairs(form.value) do %>
-	<TR>
-		<TD style="padding-right:20px;white-space:nowrap;">
+	<tr>
+		<td>
 			<% if viewlibrary.check_permission("delete") then %>
-				<A STYLE="cursor: pointer;" onclick="javascript_confirm_demo('confirmDisplay','<% io.write(file.value.filename.value) %>')">Delete</A>
+				<a style="cursor: pointer;" onclick="javascript_confirm_demo('confirmDisplay','<% io.write(file.value.filename.value) %>')">Delete</a>
 			<% end %>
 			<%
 			io.write(html.link{value = "rrdinfo?filename=" .. file.value.filename.value, label="Info " })
 --			if viewlibrary.check_permission("edit") then io.write(html.link{value = "edit?filename=" .. file.value.filename.value.."&redir="..page_info.orig_action, label="Edit " }) end
 --			if viewlibrary.check_permission("editfile") then io.write(html.link{value = "editfile?filename=" .. file.value.filename.value.."&redir="..page_info.orig_action, label="Expert " }) end
 			%>
-		</TD>
-		<TD style="padding-right:20px;white-space:nowrap;text-align:right;"><%= html.html_escape(file.value.filesize.value) %></TD>
-		<TD style="padding-right:20px;white-space:nowrap;"><%= html.html_escape(file.value.mtime.value) %></TD>
-		<TD style="white-space:nowrap;" width="90%"><%= html.html_escape(file.value.filename.value) %></TD>
-	</TR>
+		</td>
+		<td><%= html.html_escape(file.value.filesize.value) %></td>
+		<td><%= html.html_escape(file.value.mtime.value) %></td>
+		<td><%= html.html_escape(file.value.filename.value) %></td>
+	</tr>
 <% end %>
 
 	<% if viewlibrary.check_permission("createrrd") then %>
-	<TR>
-		<TD style="padding-right:20px;white-space:nowrap;">
+	<tr>
+		<td>
 			<% io.write(html.link{value = "createrrd", label="Create new DB " }) %>
-		</TD>
-		<TD>&nbsp;</TD><TD>&nbsp;</TD><TD>&nbsp;</TD>
-	</TR>
+		</td>
+		<td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
+	</tr>
 	<% end %>
-
-</TABLE>
+</tbody></table>
 
 <% if viewlibrary and viewlibrary.dispatch_component and viewlibrary.check_permission("newfile") then
 	local newfileform = viewlibrary.dispatch_component("newfile", nil, true) %>
diff --git a/rrdtool-newgraphcfg-html.lsp b/rrdtool-newgraphcfg-html.lsp
index 5371cf8..9da49b3 100755
--- a/rrdtool-newgraphcfg-html.lsp
+++ b/rrdtool-newgraphcfg-html.lsp
@@ -2,30 +2,28 @@
 <% htmlviewfunctions = require("htmlviewfunctions") %>
 <% html = require("acf.html") %>
 
-<H1>Create new rrdtool-graph file</H1>
+<h1>Create new rrdtool-graph file</h1>
 
 <% if form.type == "form" then %>
 <% form.action = page_info.script .. page_info.prefix .. page_info.controller .. "/" .. page_info.action %>
 <% htmlviewfunctions.displayformstart(form) %>
-<H3>File Details</H3>
-<DL>
-<DT><% io.write(form.value.filename.label) %></DT>
-<DD>
+<h3>File Details</h3>
+<div class='item'><p class='left'><% io.write(form.value.filename.label) %></p>
+<div class='right'>
 <input class="text" type="text" name="filename" value="<%= html.html_escape(form.value.filename.value) %>">
-<% if form.value.filename.errtxt then %><P CLASS='error'><%= string.gsub(html.html_escape(form.value.filename.errtxt), "\n", "<BR>") %></P><% end %>
-<% if form.value.filename.descr then %><P CLASS='descr'><%= string.gsub(html.html_escape(form.value.filename.descr), "\n", "<BR>") %></P><% end %>
-</DD>
-</DL>
+<% if form.value.filename.errtxt then %><p class='error'><%= string.gsub(html.html_escape(form.value.filename.errtxt), "\n", "<br/>") %></p><% end %>
+<% if form.value.filename.descr then %><p class='descr'><%= string.gsub(html.html_escape(form.value.filename.descr), "\n", "<br/>") %></p><% end %>
+</div></div><!-- end .item -->
 <% end %>
-<H3>File Content</H3>
+<h3>File Content</h3>
 <textarea name="filecontent">
 <%= html.html_escape(form.value.filecontent.value) %>
 </textarea>
-<% if form.value.filecontent.errtxt then %><P CLASS='error'><%= string.gsub(html.html_escape(form.value.filecontent.errtxt), "\n", "<BR>") %></P><% end %>
-<% if form.value.filecontent.descr then %><P CLASS='descr'><%= string.gsub(html.html_escape(form.value.filecontent.descr), "\n", "<BR>") %></P><% end %>
+<% if form.value.filecontent.errtxt then %><p class='error'><%= string.gsub(html.html_escape(form.value.filecontent.errtxt), "\n", "<br/>") %></p><% end %>
+<% if form.value.filecontent.descr then %><p class='descr'><%= string.gsub(html.html_escape(form.value.filecontent.descr), "\n", "<br/>") %></p><% end %>
 
 <% if form.type == "form" then %>
-<H3>Save</H3>
+<h3>Save</h3>
 <% htmlviewfunctions.displayformend(form) %>
 <% end %>
 </form>
diff --git a/rrdtool-viewgraph-html.lsp b/rrdtool-viewgraph-html.lsp
index ac47a6d..2a7e31b 100644
--- a/rrdtool-viewgraph-html.lsp
+++ b/rrdtool-viewgraph-html.lsp
@@ -2,11 +2,11 @@
 %>
 
 <% if (data.graph.width) then %>
-<IMG SRC='<%= data.output %>' width='<%= data.graph.width or data.option.width %>' height='<%= data.graph.height or data.option.height %>'>
+<img src='<%= data.output %>' width='<%= data.graph.width or data.option.width %>' height='<%= data.graph.height or data.option.height %>'>
 <% else %>
-<H1>No valid output available!</H1>
-<P>Please check if your syntax is right.<BR>
-Read http://oss.oetiker.ch/rrdtool/doc/rrdgraph.en.html for help.</P>
-<HR>
-<P><% io.write(tostring(data.value)) %></P>
+<h1>No valid output available!</h1>
+<p>Please check if your syntax is right.<br/>
+Read http://oss.oetiker.ch/rrdtool/doc/rrdgraph.en.html for help.</p>
+<hr>
+<p><% io.write(tostring(data.value)) %></p>
 <% end %>