From 81ecf0ce1c2de0145639b05d251ffc656dc9f039 Mon Sep 17 00:00:00 2001
From: Robin Leber <rleber98@gmail.com>
Date: Wed, 26 Jun 2024 19:47:47 +0200
Subject: [PATCH] better fiter state management (ABER FRAGLICH)

---
 src/functions/api.js              |  3 --
 src/functions/scaling.js          |  2 +
 src/functions/visualValidation.js | 65 ++++++++++++++++++++++---------
 3 files changed, 49 insertions(+), 21 deletions(-)

diff --git a/src/functions/api.js b/src/functions/api.js
index a4bca39..a65935b 100644
--- a/src/functions/api.js
+++ b/src/functions/api.js
@@ -2,7 +2,6 @@ import axios from "axios";
 import { SERVER_URL } from "../config";
 import { loader, errorFeedback, successFeedback } from "./feedback";
 import { getScaleValues } from "./scaling";
-import { showDeployIcon } from "./visualValidation";
 
 export const runCustomCode = () => {
   loader(true);
@@ -12,7 +11,6 @@ export const runCustomCode = () => {
       loader(false);
       if (response.status === 200) {
         successFeedback();
-        showDeployIcon();
       } else {
         errorFeedback(response);
       }
@@ -50,7 +48,6 @@ export const restartCustomCode = () => {
       loader(false);
       if (response.status === 200) {
         successFeedback();
-        showDeployIcon();
       } else {
         errorFeedback(response);
       }
diff --git a/src/functions/scaling.js b/src/functions/scaling.js
index 7eef173..e934576 100644
--- a/src/functions/scaling.js
+++ b/src/functions/scaling.js
@@ -1,4 +1,5 @@
 import { scaleValues } from "./api";
+import { showDeployIcon } from "./visualValidation";
 
 export const getScaleValues = async () => {
   const values = await scaleValues();
@@ -7,6 +8,7 @@ export const getScaleValues = async () => {
       const filter = document.getElementById(value.id);
       const scale = filter.querySelector(".Scale");
       scale.textContent = value.count;
+      value.count > 0 ? showDeployIcon(value.id) : null;
     });
   } else {
     // kill Deployment was triggerd
diff --git a/src/functions/visualValidation.js b/src/functions/visualValidation.js
index 0674166..cad57d6 100644
--- a/src/functions/visualValidation.js
+++ b/src/functions/visualValidation.js
@@ -10,6 +10,7 @@ export const showWarning = (id) => {
   var pauseEl = selectedElement.querySelector("#PauseIcon");
   pauseEl && (pauseEl.style.visibility = "hidden");
 };
+
 export const showCheck = (id) => {
   var selectedElement = document.getElementById(id);
   selectedElement.style.borderColor = "green";
@@ -22,30 +23,58 @@ export const showCheck = (id) => {
   var pauseEl = selectedElement.querySelector("#PauseIcon");
   pauseEl && (pauseEl.style.visibility = "hidden");
 };
-export const showDeployIcon = () => {
-  let elementsToHide = document.querySelectorAll(
-    "#Diagram .Filter #Warning, #Diagram .Filter #Check, #Diagram .Filter #PauseIcon"
-  );
-  elementsToHide.forEach((element) => (element.style.visibility = "hidden"));
 
-  let iconsToShow = document.querySelectorAll("#Diagram .Filter #DeployIcon");
-  iconsToShow.forEach((element) => (element.style.visibility = "visible"));
+// before Change - not sure what to take
+// export const showDeployIcons = () => {
+//   let elementsToHide = document.querySelectorAll(
+//     "#Diagram .Filter #Warning, #Diagram .Filter #Check, #Diagram .Filter #PauseIcon"
+//   );
+//   elementsToHide.forEach((element) => (element.style.visibility = "hidden"));
 
-  let filterToChange = document.querySelectorAll("#Diagram .Filter");
-  filterToChange.forEach((element) => (element.style.borderColor = "blue"));
+//   let iconsToShow = document.querySelectorAll("#Diagram .Filter #DeployIcon");
+//   iconsToShow.forEach((element) => (element.style.visibility = "visible"));
+
+//   let filterToChange = document.querySelectorAll("#Diagram .Filter");
+//   filterToChange.forEach((element) => (element.style.borderColor = "blue"));
+// };
+
+export const showDeployIcon = (id) => {
+  var selectedElement = document.getElementById(id);
+  selectedElement.style.borderColor = "blue";
+  var warningEl = selectedElement.querySelector("#Warning");
+  warningEl && (warningEl.style.visibility = "hidden");
+  var checkEl = selectedElement.querySelector("#Check");
+  checkEl && (checkEl.style.visibility = "hidden");
+  var deployEl = selectedElement.querySelector("#DeployIcon");
+  deployEl && (deployEl.style.visibility = "visible");
+  var pauseEl = selectedElement.querySelector("#PauseIcon");
+  pauseEl && (pauseEl.style.visibility = "hidden");
 };
 
-export const showPause = () => {
-  let elementsToHide = document.querySelectorAll(
-    "#Diagram .Filter #Warning, #Diagram .Filter #Check, #Diagram .Filter #DeployIcon"
-  );
-  elementsToHide.forEach((element) => (element.style.visibility = "hidden"));
+// before Change - not sure what to take
+// export const showPause = () => {
+//   let elementsToHide = document.querySelectorAll(
+//     "#Diagram .Filter #Warning, #Diagram .Filter #Check, #Diagram .Filter #DeployIcon"
+//   );
+//   elementsToHide.forEach((element) => (element.style.visibility = "hidden"));
 
-  let iconsToShow = document.querySelectorAll("#Diagram .Filter #PauseIcon");
-  iconsToShow.forEach((element) => (element.style.visibility = "visible"));
+//   let iconsToShow = document.querySelectorAll("#Diagram .Filter #PauseIcon");
+//   iconsToShow.forEach((element) => (element.style.visibility = "visible"));
 
-  let filterToChange = document.querySelectorAll("#Diagram .Filter");
-  filterToChange.forEach((element) => (element.style.borderColor = "orange"));
+//   let filterToChange = document.querySelectorAll("#Diagram .Filter");
+//   filterToChange.forEach((element) => (element.style.borderColor = "orange"));
+// };
+
+export const showPause = () => {
+  let elementsToHide = document.querySelectorAll("#Diagram .Filter");
+  elementsToHide.forEach((el) => {
+    const isVisible = el.childNodes[7].style.visibility === "visible";
+    if (isVisible) {
+      el.childNodes[7].style.visibility = "hidden";
+      el.childNodes[9].style.visibility = "visible";
+      el.style.borderColor = "orange";
+    }
+  });
 };
 
 export const showAllWarning = () => {
-- 
GitLab