From 46684cb7e652d1e2639af434047dab7e110c21c8 Mon Sep 17 00:00:00 2001
From: Sam Wachspress <samuel.wachspress@northwestern.edu>
Date: Mon, 3 May 2021 21:54:31 -0500
Subject: [PATCH 1/2] improve indel primer list page

---
 base/static/css/styles.css               | 10 +++
 base/templates/tools/indel_primer.html   | 18 +++---
 base/templates/tools/ip_result_list.html | 79 ++++++++++++++++++------
 3 files changed, 80 insertions(+), 27 deletions(-)

diff --git a/base/static/css/styles.css b/base/static/css/styles.css
index c52382dc..6ed1cfeb 100644
--- a/base/static/css/styles.css
+++ b/base/static/css/styles.css
@@ -638,3 +638,13 @@ article {
   padding-left: 0px;
   padding-right: 0px;
 }
+
+.dataTables_filter {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.dataTables_length {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
\ No newline at end of file
diff --git a/base/templates/tools/indel_primer.html b/base/templates/tools/indel_primer.html
index 8f80ca4d..a2b447c7 100644
--- a/base/templates/tools/indel_primer.html
+++ b/base/templates/tools/indel_primer.html
@@ -31,6 +31,15 @@
             These regions should be avoided because indel calls are less reliable and high levels of variation will make primer searches more error-prone.
         </p>
 	</div>
+  <div class='row'>
+    <div class='col-md-4'></div>
+    <div class='col-md-4 btn-top-row'>
+      <a role="button" class="btn btn-primary btn-block" href='{{ url_for("indel_primer.indel_primer_result_list") }}' >
+        <span class="glyphicon glyphicon-list" aria-hidden="true"></span>
+        My Indel Primer Results
+      </a>
+    </div>
+  </div>
 	<div class='row'>
 		<form id='form-submit' method="POST">
 			{{ form.csrf_token }}
@@ -47,15 +56,6 @@
 	</div>
 	<div class="row">
 		<div id="browser"></div>
-    <div class='row'>
-      <div class='col-md-4'></div>
-      <div class='col-md-4 btn-mid-row'>
-        <a role="button" class="btn btn-primary btn-block" href='{{ url_for("indel_primer.indel_primer_result_list") }}' >
-          <span class="glyphicon glyphicon-list" aria-hidden="true"></span>
-          My Indel Primer Results
-        </a>
-      </div>
-    </div>
 		<table id="results" class='table table-striped table-hover table-compact'></table>
 	</div>
 
diff --git a/base/templates/tools/ip_result_list.html b/base/templates/tools/ip_result_list.html
index ccb47d34..b4fce769 100644
--- a/base/templates/tools/ip_result_list.html
+++ b/base/templates/tools/ip_result_list.html
@@ -1,22 +1,39 @@
 {% extends "_layouts/default.html" %}
 
+{% block custom_head %}
+    <link rel="stylesheet" href="//cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" />
+    <script type="text/javascript" src="//cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
+{% endblock %}
+
+{% block style %}
+<style>
+
+table.dataTable thead .sorting_asc {
+  background: url("http://cdn.datatables.net/1.10.0/images/sort_asc.png") no-repeat center left;
+}
+table.dataTable thead .sorting_desc {
+  background: url("http://cdn.datatables.net/1.10.0/images/sort_desc.png") no-repeat center left;
+}
+table.dataTable thead .sorting {
+  background: url("http://cdn.datatables.net/1.10.0/images/sort_both.png") no-repeat center left;
+}
+
+</style>
+{% endblock %}
+
 {% block content %}
 
 <div class="row">
   <div class="col-md-12">
-
-    <table class='table strain-table table-striped table-hover table-compact' style='width:100%;table-layout:fixed;'>
-      
+    <table id='ip-table' class='strain-table table-striped table-hover table-compact' style='width:100%;table-layout:fixed;'>
       <thead>
         <tr class="header">
-          <th><strong> Site </strong></th>
-          <th></th>
-          <th><strong> Strain 1 </strong></th>
-          <th><strong> Strain 2 </strong></th>
-          <th><strong> Empty </strong></th>
-          <th><strong> Status </strong></th>
-          <th><strong> Date </strong></th>
-          <th></th>
+          <th style='width:25%' class='data-site sorting'><strong> Site </strong></th>
+          <th style='width:13%' class='data-s1 sorting'><strong> Strain 1 </strong></th>
+          <th style='width:13%' class='data-s2 sorting'><strong> Strain 2 </strong></th>
+          <th style='width:9%'  class='data-empty ordering'><strong> Empty </strong></th>
+          <th style='width:15%' class='data-status ordering'><strong> Status </strong></th>
+          <th style='width:25%' class='data-date ordering'><strong> Date </strong></th>
         </tr>
       </thead>
 
@@ -24,15 +41,15 @@
         {% for item in items %}
           <tr>
             {% if item %}
-              <td colspan="2"> {{ item.site }} </td>
-              <td> {{ item.strain1 }} </td>
-              <td> {{ item.strain2 }} </td>
+              <td class="data-site"> {{ item.site }} </td>
+              <td class="data-s1"> {{ item.strain1 }} </td>
+              <td class="data-s2"> {{ item.strain2 }} </td>
             {% if item.empty %}
-              <td><i class="glyphicon glyphicon-ok"></i></td>
+              <td class="data-empty" data-order='1'><i class="glyphicon glyphicon-ok" data-order='1'></i></td>
             {% else %}
-              <td></td>
+              <td class="data-empty" data-order='0'></td>
             {% endif %}
-              <td>
+              <td class="data-status">
                 {% if item.status == 'COMPLETE' %}
                 <a href="{{ url_for('indel_primer.pairwise_indel_query_results', id=item.key.name) }}">
                   {{ item.status }}
@@ -42,7 +59,7 @@
                 {% endif %}
               </td>
             {% endif %}
-            <td colspan="2"> {{ item.created_on|date_format }} </td>
+            <td class="data-date" data-order="{{ item.created_on }}""> {{ item.created_on|date_format }} </td>
           </tr>
         {% endfor %}
       </tbody>
@@ -54,3 +71,29 @@
 
 
 {% endblock %}
+
+{% block script %}
+
+<script>
+      
+  $(document).ready(function(){
+
+    $('#ip-table').DataTable( {
+      paging: true,
+      pageLength: 25,
+      aaSorting: [ [5,'desc'] ],
+      aoColumns: [
+        null,
+        null,
+        null,
+        null,
+        null,
+        null
+      ]
+    } );
+  });
+
+</script>
+
+
+{% endblock %}
\ No newline at end of file

From e5d195ed9d7f3ac1296ccee140e5e603ae7c1a83 Mon Sep 17 00:00:00 2001
From: Sam Wachspress <samuel.wachspress@northwestern.edu>
Date: Mon, 3 May 2021 21:56:39 -0500
Subject: [PATCH 2/2] newline at eof

---
 base/static/css/styles.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/base/static/css/styles.css b/base/static/css/styles.css
index 6ed1cfeb..ff25e5ec 100644
--- a/base/static/css/styles.css
+++ b/base/static/css/styles.css
@@ -647,4 +647,4 @@ article {
 .dataTables_length {
   padding-top: 10px;
   padding-bottom: 10px;
-}
\ No newline at end of file
+}