added filters for the table columns

cf12f920 · Jesper Zedlitz · 6d76fca2 · cf12f920
Verified Commit cf12f920 authored 4 months ago by Jesper Zedlitz
--- a/tools/generate_report.py
+++ b/tools/generate_report.py
@@ -11,14 +11,14 @@ def write_diagram(id, title, counter, counter_publisher):
    print(f"<h2>{title}</h2>")
    print(f"<div id='vis{id}' style='max-width: 400px;'></div>")
    print('<script type="text/javascript">')
-    
+
    print(f"new ApexCharts(document.querySelector('#vis{id}'),")
    print("{ chart: { type: 'donut' },")
    print(f"series: [{counter[True]}, {counter[False]}, {counter[None]}],")
    print("labels: ['korrekt', 'fehlerhaft', 'nicht geprüft'],")
    print('colors: ["#1eae9c", "#d4004b", "#a4adb6"]')
    print("}).render();")
-    
+
    print("</script>")

    print("<h3>Publishers affected</h3>")
@@ -88,7 +88,9 @@ print("<html>")
 print("  <head>")
 print("    <title>DCAT Catalog Check</title>")
 print('    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>')
-print('    <link rel="stylesheet" href="https://cdn.datatables.net/2.1.8/css/dataTables.dataTables.css" />')
+print(
+    '    <link rel="stylesheet" href="https://cdn.datatables.net/2.1.8/css/dataTables.dataTables.css" />'
+)
 print('    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>')
 print('    <script src="https://cdn.datatables.net/2.1.8/js/dataTables.js"></script>')
 print("  </head>")
@@ -113,17 +115,52 @@ print("<div>")
 print("<h2>Distributionen with errors</h2>")

 print('<table class="table" id="distributions">')
-print("<thead><tr><th>Publisher</th><th>Format</th><th>available</th><th>content correct</th><th>MIME type wrong</th><th>MIME type</th><th>checksum correct</th><th>schema valid</th><th>URL</th></tr></thead>")
+print(
+    "<thead><tr><th>Publisher</th><th>Format</th><th>available</th><th>content correct</th><th>MIME type wrong</th><th>MIME type</th><th>checksum correct</th><th>schema valid</th><th>URL</th></tr>"
+)
+print("<tr>")
+print('<th><input type="text" placeholder="Filter by publisher" /></th>')
+print('<th><input type="text" placeholder="Filter by format" /></th>')
+print('<th><input type="text" placeholder="Filter by availability" /></th>')
+print('<th><input type="text" placeholder="Filter by correct content" /></th>')
+print('<th><input type="text" placeholder="Filter by MIME type error" /></th>')
+print('<th><input type="text" placeholder="Filter by MIME type" /></th>')
+print('<th><input type="text" placeholder="Filter by checksum" /></th>')
+print('<th><input type="text" placeholder="Filter by schema valid" /></th>')
+print('<th><input type="text" placeholder="Filter by url" /></th>')
+print("</tr>")
+print("</thead>")
 print("<tbody>")

 for dist in distributions_with_problems:
    entry = distributions_with_problems[dist]
-    print(f"<tr><td>{entry.get('publisher')}</td><td>{entry.get('format')}</td><td>{entry.get('http_status','')}</td><td>{entry.get('valid','')}</td><td>{entry.get('mimetype_mismatch','')}</td><td>{entry.get('mimetype','')}</td><td>{entry.get('checksum_ok','')}</td><td>{entry.get('schema_valid','')}</td><td>{entry.get('url')}</td></tr>")
+    print(
+        f"<tr><td>{entry.get('publisher')}</td><td>{entry.get('format')}</td><td>{entry.get('http_status','')}</td><td>{entry.get('valid','')}</td><td>{entry.get('mimetype_mismatch','')}</td><td>{entry.get('mimetype','')}</td><td>{entry.get('checksum_ok','')}</td><td>{entry.get('schema_valid','')}</td><td>{entry.get('url')}</td></tr>"
+    )

 print("</tbody></table>")

 print("</div>")

-print("<script>let table = new DataTable('#distributions');</script>")
+print("""
+<script>
+ $(document).ready(function() {
+    var table = $('#distributions').DataTable();
+
+    table.columns().every(function() {
+      var that = this;
+      
+      $('input', this.header()).on('keyup change', function() {
+        if (that.search() !== this.value) {
+          that
+            .search(this.value)
+            .draw();
+        }
+      });
+    });
+  });
+
+</script>
+""")

 print("</body></html>")