From 206dc73d0ed4278fedfc50fce749707d8c783f57 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rg=20Henke?= <joerg.henke@uni-greifswald.de>
Date: Wed, 6 Jul 2022 08:44:39 +0200
Subject: [PATCH] datatables for category table views

---
 src/main/resources/static/css/style.css       |  5 +++
 .../resources/static/js/dataTables/de.json    | 23 +++++++++++
 src/main/resources/templates/done/list.html   | 41 +++++++++++++++----
 3 files changed, 61 insertions(+), 8 deletions(-)
 create mode 100644 src/main/resources/static/js/dataTables/de.json

diff --git a/src/main/resources/static/css/style.css b/src/main/resources/static/css/style.css
index 1b6e684..dfdca4e 100644
--- a/src/main/resources/static/css/style.css
+++ b/src/main/resources/static/css/style.css
@@ -222,4 +222,9 @@ body {
 	border-radius: 8px;
 	background-image: linear-gradient(to left, #e6e6e6, white);
 	padding: 4px;
+}
+
+.tab-pane-table {
+	background-color: white; 
+	padding: 8px;
 }
\ No newline at end of file
diff --git a/src/main/resources/static/js/dataTables/de.json b/src/main/resources/static/js/dataTables/de.json
new file mode 100644
index 0000000..3335d27
--- /dev/null
+++ b/src/main/resources/static/js/dataTables/de.json
@@ -0,0 +1,23 @@
+{
+	"sEmptyTable":   	"Keine Daten in der Tabelle vorhanden",
+	"sInfo":         	"_START_ bis _END_ von _TOTAL_ Einträgen",
+	"sInfoEmpty":    	"0 bis 0 von 0 Einträgen",
+	"sInfoFiltered": 	"(gefiltert von _MAX_ Einträgen)",
+	"sInfoPostFix":  	"",
+	"sInfoThousands":  	".",
+	"sLengthMenu":   	"_MENU_ Einträge anzeigen",
+	"sLoadingRecords": 	"Wird geladen...",
+	"sProcessing":   	"Bitte warten...",
+	"sSearch":       	"Suchen",
+	"sZeroRecords":  	"Keine Einträge vorhanden.",
+	"oPaginate": {
+		"sFirst":    	"Erste",
+		"sPrevious": 	"Zurück",
+		"sNext":     	"Nächste",
+		"sLast":     	"Letzte"
+	},
+	"oAria": {
+		"sSortAscending":  ": aktivieren, um Spalte aufsteigend zu sortieren",
+		"sSortDescending": ": aktivieren, um Spalte absteigend zu sortieren"
+	}
+}
diff --git a/src/main/resources/templates/done/list.html b/src/main/resources/templates/done/list.html
index e42e5c2..f19760b 100644
--- a/src/main/resources/templates/done/list.html
+++ b/src/main/resources/templates/done/list.html
@@ -73,8 +73,8 @@
 			<div id="div_summary" class="tab-pane fade">Zusammenfassung</div>
 			<div id="div_attachment" class="tab-pane fade">Anhang</div>
 			<div id="div_calendar" class="tab-pane fade">Kalender</div>
-			<div id="div_project" class="tab-pane fade" style="background-color: white">
-				<table class="table table-striped table-condensed">
+			<div id="div_project" class="tab-pane fade tab-pane-table">
+				<table id="project_table" class="table table-striped table-condensed">
 					<thead>
 						<tr>
 							<th>Name</th>
@@ -89,8 +89,8 @@
 					</tbody>
 				</table>
 			</div>
-			<div id="div_module" class="tab-pane fade" style="background-color: white">
-				<table class="table table-striped table-condensed">
+			<div id="div_module" class="tab-pane fade tab-pane-table">
+				<table id="module_table" class="table table-striped table-condensed">
 					<thead>
 						<tr>
 							<th>Name</th>
@@ -105,8 +105,8 @@
 					</tbody>
 				</table>
 			</div>
-			<div id="div_job" class="tab-pane fade" style="background-color: white">
-				<table class="table table-striped table-condensed">
+			<div id="div_job" class="tab-pane fade tab-pane-table">
+				<table id="job_table" class="table table-striped table-condensed">
 					<thead>
 						<tr>
 							<th>Name</th>
@@ -121,8 +121,8 @@
 					</tbody>
 				</table>
 			</div>
-			<div id="div_billing" class="tab-pane fade" style="background-color: white">
-				<table class="table table-striped table-condensed">
+			<div id="div_billing" class="tab-pane fade tab-pane-table">
+				<table id="billing_table" class="table table-striped table-condensed">
 					<thead>
 						<tr>
 							<th>Name</th>
@@ -140,6 +140,31 @@
 				</table>
 			</div>
 		</div>
+		<script type="text/javascript">
+			$(document).ready(function(){
+				var localeUrl = '[[@{/js/dataTables/de.json}]]';
+				$("#project_table").DataTable({
+					"language" : {
+						"url" : localeUrl
+					}
+				});
+				$("#module_table").DataTable({
+					"language" : {
+						"url" : localeUrl
+					}
+				});
+				$("#job_table").DataTable({
+					"language" : {
+						"url" : localeUrl
+					}
+				});
+				$("#billing_table").DataTable({
+					"language" : {
+						"url" : localeUrl
+					}
+				});
+			});
+		</script>
 	</main>
 </body>
 </html>
\ No newline at end of file