chg: Make the lists of other captures a table

website/web/templates/hostname_popup.html

@@ -4,11 +4,39 @@
 {% from "macros.html" import indexed_cookies %}
 {% from "macros.html" import popup_icons %}
 {% from "macros.html" import shorten_string %}
+{% from "macros.html" import other_captures_table %}
 
 {% block title %}Details for {{ hostname }} {% endblock %}
 
+{% block styles %}
+{{ super() }}
+<link rel="stylesheet" href="{{ url_for('static', filename='datatables.min.css') }}">
+{% endblock %}
+
 {% block scripts %}
   {{ super() }}
+  <script src='{{ url_for('static', filename='datatables.min.js') }}'></script>
+  <script type="text/javascript">
+  $(document).ready(function () {
+    $('#table_other_captures').DataTable( {
+    "order": [[ 1, "desc" ]],
+    "paging": false,
+    "info": false,
+    "columns": [
+        { "orderable": false},
+        { "orderable": false},
+        { "orderable": false}
+    ],
+    "columnDefs": [{
+        "targets": 1,
+        "render": function ( data, type, row, meta ) {
+            let date = new Date(data);
+            return date.getFullYear() + '-' + (date.getMonth() + 1).toString().padStart(2, "0") + '-' + date.getDate().toString().padStart(2, "0") + ' ' + date.toTimeString();
+        }
+    }]
+    } );
+  });
+  </script>
   <script>
       function whereAmI(hostname_uuid) {
           window.opener.LocateNode(hostname_uuid);

website/web/templates/macros.html

@@ -30,13 +30,7 @@
     {# ... on other URLs #}
     <div>
       <p>The following captures get the same file from a <b>different URL</b></p>
-      <ul>
-      {% for capture_uuid, urlnode_uuid, title, hostname in details['different_url'] %}
-      <li>
-        <a href="#/" onclick="openTreeInNewTab('{{ capture_uuid }}', '{{ urlnode_uuid }}')">{{ title }}</a> - {{ hostname }}
-      </li>
-      {% endfor %}
-      </ul>
+      {{ other_captures_table(details['different_url']) }}
     </div>
     {% endif %}
     </br>
@@ -44,13 +38,7 @@
     {# ... on the same URL #}
     <div>
       <p>The following captures get the same file from the <b>same URL</b></p>
-      <ul>
-      {% for capture_uuid, urlnode_uuid, title, hostname in details['same_url'] %}
-      <li>
-        <a href="#/" onclick="openTreeInNewTab('{{ capture_uuid }}', '{{ urlnode_uuid }}')">{{ title }}</a> - {{ hostname }}
-      </li>
-      {% endfor %}
-      </ul>
+      {{ other_captures_table(details['same_url']) }}
     </div>
     {% endif %}
   </div>
@@ -60,6 +48,31 @@
 {% endif %}
 {% endmacro %}
 
+{% macro other_captures_table(entries) %}
+<div class="table-responsive">
+  <table id="table_other_captures" class="table">
+  <thead>
+    <tr>
+      <th>Title</th>
+      <th>Timestamp</th>
+      <th>Domain</th>
+    </tr>
+  </thead>
+  <tbody>
+  {% for capture_uuid, urlnode_uuid, title, timestamp, hostname in entries %}
+  <tr>
+    <td>
+      <a href="#/" onclick="openTreeInNewTab('{{ capture_uuid }}', '{{ urlnode_uuid }}')">{{ title }}</a>
+    </td>
+    <td>{{ timestamp }}</td>
+    <td>{{ hostname }}</td>
+  </tr>
+  {% endfor %}
+  </tbody>
+  </table>
+</div>
+{% endmacro %}
+
 {% macro indexed_cookies(header_text, button_text, cookies) %}
 {% if cookies %}
 <div>{{ header_text }}</div>