Merge pull request #49 from wseis/main

add lrv table
wseis · Apr 29, 2024 · a923f51 · a923f51
2 parents 3d9ecbb + 9b2d3a5
commit a923f51
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 4 deletions.
diff --git a/tools/qmratool/static/qmratool/css/styles.css b/tools/qmratool/static/qmratool/css/styles.css
@@ -171,3 +171,14 @@ footer {
   border-color: #8081F1;
 
 }
+
+      /* Custom CSS for table cell content centering */
+.table th, .table td {
+        text-align: center; /* Center align table cell content */
+        vertical-align: middle; /* Center vertically */
+    }
+    /* Custom background color for the table header */
+ .custom-header {
+        background-color: transparent !important; /* Green background, change as needed */
+        color: black; /* White text color */
+    }
diff --git a/tools/qmratool/static/qmratool/option.js b/tools/qmratool/static/qmratool/option.js
@@ -78,10 +78,34 @@ document.addEventListener('DOMContentLoaded', function() {
           return `<strong>${titleCaseDataName}</strong><br>${data.description}<br>Events per year [N]: <strong>${data.events_per_year}</strong><br>Volume per event [L]: <strong>${data.volume_per_event}</strong>`;
       } else if (fieldName === 'treatment') { 
         return `<strong>${titleCaseDataName}</strong><br>${data.description}<br>
-        Virus removal: <strong>${data.virus_min}-${data.virus_max}</strong><br>
-        Bacteria removal:: <strong>${data.bacteria_min}-${data.bacteria_max}</strong> <br>
-        Protozoa removal:: <strong>${data.protozoa_min}-${data.protozoa_max}</strong>`;
-
+        <table class="table table-bordered mt-3">
+        <thead class="custom-header">
+            <tr>
+                <th>Pathogen Group</th>
+                <th>Minimum LRV</th>
+                <th>Maximum LRV</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td>Viruses</td>
+                <td>${data.virus_min}</td>
+                <td>${data.virus_max}</td>
+            </tr>
+            <tr>
+                <td>Bacteria</td>
+                <td>${data.bacteria_min}</td>
+                <td>${data.bacteria_max}</td>
+            </tr>
+            <tr>
+                <td>Protozoa</td>
+                <td>${data.protozoa_min}</td>
+                <td>${data.protozoa_min}</td>
+            </tr>
+         
+        </tbody>
+    </table>`
+
         }
       else {
           return `<strong>${titleCaseDataName}</strong><br>${data.description}`;