From 430a91f64600f346fe88a722d1889a7a3f8e44e7 Mon Sep 17 00:00:00 2001
From: wseis <wolfgang.seis@kompetenz-wasser.de>
Date: Mon, 29 Apr 2024 13:04:13 +0200
Subject: [PATCH] add lrv table

---
 tools/qmratool/static/qmratool/css/styles.css | 11 +++++++
 tools/qmratool/static/qmratool/option.js      | 32 ++++++++++++++++---
 2 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/tools/qmratool/static/qmratool/css/styles.css b/tools/qmratool/static/qmratool/css/styles.css
index de1f8fe..951eebb 100644
--- 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 */
+    }
\ No newline at end of file
diff --git a/tools/qmratool/static/qmratool/option.js b/tools/qmratool/static/qmratool/option.js
index abdc173..3515a9d 100644
--- 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}`;