From 568c2be3c328a272f7a872c3fc67b61af3c4e797 Mon Sep 17 00:00:00 2001
From: Sebastian Reichel <sre@ring0.de>
Date: Wed, 18 Jul 2018 00:56:23 +0200
Subject: web: use datatables instead of sortable

---
 data/templates/users/index.html   |  8 ++++++-
 data/templates/users/invoice.html | 44 +++++++++++++++++++--------------------
 2 files changed, 28 insertions(+), 24 deletions(-)

(limited to 'data/templates/users')

diff --git a/data/templates/users/index.html b/data/templates/users/index.html
index 246e523..71eccf9 100644
--- a/data/templates/users/index.html
+++ b/data/templates/users/index.html
@@ -1,4 +1,4 @@
-<table class="sortable table table-bordered table-striped table-condensed">
+<table id="usertable" class="table table-bordered table-striped table-condensed">
 	<thead>
 		<tr><th>ID</th></th><th>Name</th></tr>
 	</thead>
@@ -6,3 +6,9 @@
 		{{{DATA}}}
 	</tbody>
 </table>
+
+<script type="text/javascript">
+$(document).ready(function() {
+    $('#usertable').DataTable();
+} );
+</script>
diff --git a/data/templates/users/invoice.html b/data/templates/users/invoice.html
index 1265448..36ea627 100644
--- a/data/templates/users/invoice.html
+++ b/data/templates/users/invoice.html
@@ -1,29 +1,27 @@
 <h2>Invoice</h2>
 
 <div class="navbar navbar-default">
-	<div class="container">
-		<ul class="navbar-nav nav" role="navigation">
-			<a class="brand" href="#">Choose Invoice Period:</a>
-			<li class="dropdown">
-				<a id="year" class="dropdown-toggle" data-toggle="dropdown" href="#">{{{SELECTEDYEAR}}} <span class="caret"></span></a>
-				<ul class="dropdown-menu" role="menu" aria-labelledby="year" >
-					{{{YEARS}}}
-				</ul>
-			</li>
-			<li class="dropdown">
-				<a id="month" class="dropdown-toggle" data-toggle="dropdown" href="#">{{{SELECTEDMONTH}}} <span class="caret"></span></a>
-				<ul class="dropdown-menu" role="menu" aria-labelledby="month" >
-					{{{MONTHS}}}
-				</ul>
-			</li>
-			<li class="dropdown">
-				<a id="day" class="dropdown-toggle" data-toggle="dropdown" href="#">{{{SELECTEDDAY}}} <span class="caret"></span></a>
-				<ul class="dropdown-menu two-columns" role="menu" aria-labelledby="day" >
-					{{{DAYS}}}
-				</ul>
-			</li>
-		</ul>
-	</div>
+	<ul class="navbar-nav nav" role="navigation">
+		<a class="navbar-brand" href="#">Choose Invoice Period:</a>
+		<li class="dropdown">
+			<a id="year" class="dropdown-toggle" data-toggle="dropdown" href="#">{{{SELECTEDYEAR}}} <span class="caret"></span></a>
+			<ul class="dropdown-menu" role="menu" aria-labelledby="year" >
+				{{{YEARS}}}
+			</ul>
+		</li>
+		<li class="dropdown">
+			<a id="month" class="dropdown-toggle" data-toggle="dropdown" href="#">{{{SELECTEDMONTH}}} <span class="caret"></span></a>
+			<ul class="dropdown-menu" role="menu" aria-labelledby="month" >
+				{{{MONTHS}}}
+			</ul>
+		</li>
+		<li class="dropdown">
+			<a id="day" class="dropdown-toggle" data-toggle="dropdown" href="#">{{{SELECTEDDAY}}} <span class="caret"></span></a>
+			<ul class="dropdown-menu two-columns" role="menu" aria-labelledby="day" >
+				{{{DAYS}}}
+			</ul>
+		</li>
+	</ul>
 </div>
 
 <table class="table table-bordered table-striped">
-- 
cgit v1.2.3