Add support for DataTables in admin view

5 files changed, 73 insertions, 22 deletions

diff --git a/app/__init__.py b/app/__init__.py
index c26e1c2..2fc47e3 100644
--- a/app/__init__.py
+++ b/app/__init__.py
@@ -8,7 +8,7 @@ import os
 from logging.handlers import SMTPHandler, RotatingFileHandler
 
 from flask import Flask
-from flask_bootstrap import Bootstrap
+from flask_bootstrap import Bootstrap, WebCDN, bootstrap_find_resource
 from flask_login import LoginManager
 from flask_mail import Mail
 from flask_migrate import Migrate
@@ -38,6 +38,14 @@ def create_app(config_class=Config):
     mail.init_app(app)
     bootstrap.init_app(app)
 
+    # Set the boostrap jquery CDN
+    app.extensions["bootstrap"]["cdns"]["jquery"] = WebCDN(
+        "//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/"
+    )
+    app.extensions["bootstrap"]["cdns"]["datatables"] = WebCDN(
+        "//cdn.datatables.net/1.10.19/"
+    )
+
     # Initialize the instance directory and necessary subdirectories
     os.makedirs(app.instance_path, exist_ok=True)
     os.makedirs(
diff --git a/app/templates/admin/annotations.html b/app/templates/admin/annotations.html
index 089de3b..bedf425 100644
--- a/app/templates/admin/annotations.html
+++ b/app/templates/admin/annotations.html
@@ -1,6 +1,11 @@
 {% extends "base.html" %}
 {% import 'bootstrap/wtf.html' as wtf %}
 
+{% block styles %}
+{{ super() }}
+<link rel="stylesheet" href="{{ bootstrap_find_resource('css/jquery.dataTables.css', cdn='datatables', use_minified=True) }}">
+{% endblock %}
+
 {% block app_content %}
 <h1>View Annotations</h1>
 <div class="row">
@@ -8,8 +13,9 @@
 		{{ wtf.quick_form(form) }}
 	</div>
 </div>
+<br>
 <article class="overview">
-	<table class="table table-striped">
+	<table id="annotations-table" class="table table-striped">
 		<thead class="thead-dark">
       <th scope="col">Dataset</th>
 			<th scope="col">Username</th>
@@ -26,3 +32,13 @@
 	</table>
 </article>
 {% endblock %}
+
+{% block scripts %}
+{{ super() }}
+<script src="{{ bootstrap_find_resource('js/jquery.dataTables.js', cdn='datatables', use_minified=True) }}"></script>
+<script>
+	$(document).ready(function() {
+		$('#annotations-table').DataTable();
+	});
+</script>
+{% endblock scripts %}
diff --git a/app/templates/admin/manage_datasets.html b/app/templates/admin/manage_datasets.html
index f68259f..c7df06e 100644
--- a/app/templates/admin/manage_datasets.html
+++ b/app/templates/admin/manage_datasets.html
@@ -1,4 +1,8 @@
 {% extends "base.html" %}
+{% block styles %}
+{{ super() }}
+<link rel="stylesheet" href="{{ bootstrap_find_resource('css/jquery.dataTables.css', cdn='datatables', use_minified=True) }}">
+{% endblock %}
 
 {% block app_content %}
 <h1>Manage Datasets</h1>
@@ -38,7 +42,7 @@
 <br>
 <h1>Task Completion Overview</h1>
 <article class="overview">
-	<table class="table table-striped">
+	<table id="datasets-table" class="table table-striped">
 		<thead class="thead-dark">
 			<th scope="col">ID</th>
 			<th scope="col">Name</th>
@@ -60,11 +64,21 @@
 		</tr>
 	</table>
 </article>
+{% endblock %}
 
+{% block scripts %}
+{{ super() }}
+<script src="{{ bootstrap_find_resource('js/jquery.dataTables.js', cdn='datatables', use_minified=True) }}"></script>
 <script>
-var conf = document.getElementById("modal-confirm");
-conf.onclick = function() {
-	document.getElementById("form-submit").click();
-};
+	$(document).ready(function() {
+		$('#datasets-table').DataTable();
+	});
 </script>
-{% endblock %}
+<script>
+	var conf = document.getElementById("modal-confirm");
+	conf.onclick = function() {
+		document.getElementById("form-submit").click();
+	};
+</script>
+
+{% endblock scripts %}
diff --git a/app/templates/admin/manage_tasks.html b/app/templates/admin/manage_tasks.html
index eb83b6c..7cf5ddc 100644
--- a/app/templates/admin/manage_tasks.html
+++ b/app/templates/admin/manage_tasks.html
@@ -3,11 +3,7 @@
 
 {% block styles %}
 {{ super() }}
-<script src="//code.jquery.com/jquery-3.4.1.min.js"
-			  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
-			  crossorigin="anonymous"></script>
-<link rel="stylesheet" href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
-<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
+<link rel="stylesheet" href="{{ bootstrap_find_resource('css/jquery.dataTables.css', cdn='datatables', use_minified=True) }}">
 {% endblock %}
 
 {% block app_content %}
@@ -40,6 +36,10 @@
 		</tr>
 	</table>
 </article>
+{% endblock %}
 
+{% block scripts %}
+{{ super() }}
+<script src="{{ bootstrap_find_resource('js/jquery.dataTables.js', cdn='datatables', use_minified=True) }}"></script>
 <script>$(document).ready(function() { $('#tasks').DataTable(); });</script>
-{% endblock %}
+{% endblock scripts %}
diff --git a/app/templates/admin/manage_users.html b/app/templates/admin/manage_users.html
index 8788958..0e365d4 100644
--- a/app/templates/admin/manage_users.html
+++ b/app/templates/admin/manage_users.html
@@ -1,4 +1,8 @@
 {% extends "base.html" %}
+{% block styles %}
+{{ super() }}
+<link rel="stylesheet" href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
+{% endblock %}
 
 {% block app_content %}
   <h1>Manage Users</h1>
@@ -38,7 +42,7 @@
   <br>
   <h1>User Overview</h1>
   <article class="overview">
-    <table class="table table-striped">
+    <table id="user-table" class="table table-striped">
       <thead class="thead-dark">
         <th scope="col">ID</th>
         <th scope="col">Username</th>
@@ -62,11 +66,20 @@
       </tr>
     </table>
   </article>
-
-  <script>
-    var conf = document.getElementById("modal-confirm");
-    conf.onclick = function() {
-      document.getElementById("form-submit").click();
-    };
-  </script>
 {% endblock %}
+
+{% block scripts %}
+{{ super() }}
+<script src="{{ bootstrap_find_resource('js/jquery.dataTables.js', cdn='datatables', use_minified=True) }}"></script>
+<script>
+	$(document).ready(function() {
+		$('#user-table').DataTable();
+	});
+</script>
+<script>
+	var conf = document.getElementById("modal-confirm");
+	conf.onclick = function() {
+		document.getElementById("form-submit").click();
+	};
+</script>
+{% endblock scripts %}