From f53d289a0577eb3ce751503e03a1a6c54ec79471 Mon Sep 17 00:00:00 2001
From: alex <alex@roese.dev>
Date: Tue, 17 Oct 2023 22:53:17 +0200
Subject: [PATCH] integrated filter for logs

---
 public/locales/de/translation.json |  2 +-
 public/locales/en/translation.json |  2 +-
 src/Components/LogCard/index.js    | 43 +++++++++++++++++++++++++++---
 3 files changed, 41 insertions(+), 6 deletions(-)

diff --git a/public/locales/de/translation.json b/public/locales/de/translation.json
index 0bb5694..5aa1389 100644
--- a/public/locales/de/translation.json
+++ b/public/locales/de/translation.json
@@ -228,8 +228,8 @@
     },
     "card": {
       "checkbox": {
-        "autoScroll": "Auto scroll",
         "info": "INFO",
+        "warning": "WARNUNG",
         "error": "FEHLER"
       }
     },
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
index 3a30d08..c355319 100644
--- a/public/locales/en/translation.json
+++ b/public/locales/en/translation.json
@@ -228,8 +228,8 @@
     },
     "card": {
       "checkbox": {
-        "autoScroll": "Auto scroll",
         "info": "INFO",
+        "warning": "WARNING",
         "error": "ERROR"
       }
     },
diff --git a/src/Components/LogCard/index.js b/src/Components/LogCard/index.js
index 8d70626..1422d40 100644
--- a/src/Components/LogCard/index.js
+++ b/src/Components/LogCard/index.js
@@ -14,6 +14,7 @@ export default function LogCard({
   // const [checkboxAutoScrollChecked, setCheckboxAutoScrollChecked] =
   // useState(true);
   const [checkboxInfoChecked, setCheckboxInfoChecked] = useState(true);
+  const [checkboxWarningChecked, setCheckboxWarningChecked] = useState(true);
   const [checkboxErrorChecked, setCheckboxErrorChecked] = useState(true);
   const virtuosoRef = useRef();
 
@@ -146,6 +147,16 @@ export default function LogCard({
   </Col> 
   */
 
+  const filteredLogs = logs.filter((log) => {
+    const logType = log.charAt(0);
+
+    return (
+      (checkboxInfoChecked && logType === "I") ||
+      (checkboxWarningChecked && logType === "W") ||
+      (checkboxErrorChecked && logType === "E")
+    );
+  });
+
   return (
     <Card
       title={
@@ -165,6 +176,14 @@ export default function LogCard({
                   {t("logCard.card.checkbox.info")}
                 </Checkbox>
               </Col>
+              <Col>
+                <Checkbox
+                  checked={checkboxWarningChecked}
+                  onChange={(e) => setCheckboxWarningChecked(e.target.checked)}
+                >
+                  {t("logCard.card.checkbox.warning")}
+                </Checkbox>
+              </Col>
               <Col>
                 <Checkbox
                   disabled={customResult !== undefined}
@@ -202,10 +221,26 @@ export default function LogCard({
               <Virtuoso
                 ref={virtuosoRef}
                 initialTopMostItemIndex={logs.length - 1}
-                data={logs}
-                itemContent={(_, log) => (
-                  <div style={{ padding: "1px" }}>{log}</div>
-                )}
+                data={filteredLogs}
+                itemContent={(_, log) => {
+                  const logType = log.charAt(0);
+                  let style = {};
+                  let color = "";
+
+                  if (checkboxInfoChecked && logType === "I") {
+                    color = "#44bd32";
+                  } else if (checkboxWarningChecked && logType === "W") {
+                    color = "#e67e22";
+                  } else if (checkboxErrorChecked && logType === "E") {
+                    color = "#e74c3c";
+                  } else {
+                    color = "#2980b9"; // no match
+                  }
+
+                  style = { padding: "1px", color };
+
+                  return <span style={style}>{log}</span>;
+                }}
                 followOutput={true}
               />
             </div>