validation for pipes

src/functions/api.js

@@ -12,7 +12,7 @@ export const runCustomCode = () => {
       loader(false);
       if (response.status === 200) {
         successFeedback();
-        showDocker(window.selectedFilter);
+        showDocker();
       } else {
         errorFeedback(response);
       }
@@ -50,7 +50,7 @@ export const restartCustomCode = () => {
       loader(false);
       if (response.status === 200) {
         successFeedback();
-        showDocker(window.selectedFilter);
+        showDocker();
       } else {
         errorFeedback(response);
       }

src/functions/contextmenu.js

-import { duplicatePipe, duplicateFilter } from "./duplication";
+import { duplicatePipe, duplicateFilter, extendPipe } from "./duplication";
 import { codeEditor } from "./codeEditor";
 import { scaleOut } from "./api";
+import { showCheck } from "./visualValidation";
 
 export const initContextmenu = (instance) => {
   // Kontext Menü für Connections
@@ -70,6 +71,9 @@ export const initContextmenu = (instance) => {
     window.selectedPipe = $(event.currentTarget).attr("id");
     $(
       `<div style='display: flex; flex-direction: column;' class='custom-menu'>
+        <button style='border: none; padding: 6px 12px;' class='name-pipe'>
+          Name Pipe
+        </button>
         <button style='border: none; padding: 6px 12px;' class='duplicate-pipe'>
           Duplicate Pipe
         </button>
@@ -88,14 +92,8 @@ export const initContextmenu = (instance) => {
   $("body").on("click", ".duplicate-pipe", (event) => {
     duplicatePipe(instance);
   });
-
-  $("body").on("dblclick", "#Diagram .Pipe", (event) => {
-    event.preventDefault();
-    window.selectedPipe = $(event.currentTarget);
-    let pipeName = prompt("Bitte geben Sie einen Pipe Namen ein:");
-    if (pipeName !== null) {
-      let currentHTML = window.selectedPipe.html();
-      window.selectedPipe.html(`${currentHTML} <br> ${pipeName}`);
-    }
+  $("body").on("click", ".name-pipe", (event) => {
+    extendPipe();
+    showCheck(window.selectedPipe);
   });
 };

src/functions/duplication.js

@@ -52,3 +52,26 @@ export const duplicateFilter = (instance) => {
   instance.draggable(newFilter.id, { containment: true });
   createEndpoints(instance, newFilter.id, newFilter.dataset.type);
 };
+
+export const extendPipe = () => {
+  let pipeName = prompt("Bitte geben Sie einen Pipe Namen ein:");
+  const pipeToName = document.getElementById(window.selectedPipe);
+  if (pipeToName) {
+    var textIndex = pipeToName.innerHTML.indexOf("Queue");
+    textIndex === -1
+      ? (textIndex = pipeToName.innerHTML.indexOf("Topic"))
+      : null;
+
+    if (textIndex !== -1) {
+      var beforeQueue = pipeToName.innerHTML.slice(
+        0,
+        textIndex + "Queue".length
+      );
+      var afterQueue = pipeToName.innerHTML.slice(textIndex + "Queue".length);
+
+      var newContent = beforeQueue + `<br> "${pipeName}"` + afterQueue;
+
+      pipeToName.innerHTML = newContent;
+    }
+  }
+};

src/functions/visualValidation.js

@@ -16,13 +16,10 @@ export const showCheck = (id) => {
   var dockerDomElement = selectedElement.querySelector("#Docker");
   dockerDomElement.style.visibility = "hidden";
 };
-export const showDocker = (id) => {
-  console.log("### hi:", id);
-  const selectedElement = document.getElementById(id);
-  var checkDomElement = selectedElement.querySelector("#Warning");
-  checkDomElement.style.visibility = "hidden";
-  var dockerDomElement = selectedElement.querySelector("#Check");
-  dockerDomElement.style.visibility = "hidden";
-  var dockerDomElement = selectedElement.querySelector("#Docker");
-  dockerDomElement.style.visibility = "visible";
+export const showDocker = () => {
+  let elementsToHide = document.querySelectorAll("#Warning, #Check");
+  elementsToHide.forEach((element) => (element.style.visibility = "hidden"));
+
+  let elementsToShow = document.querySelectorAll("#Diagram #Docker");
+  elementsToShow.forEach((element) => (element.style.visibility = "visible"));
 };

src/index.html

@@ -25,8 +25,24 @@
           <h4>TOOLBOX</h4>
           <div>
             <h5>PIPES</h5>
-            <div class="Pipe" data-type="Default">Queue</div>
-            <div class="Pipe" data-type="Distributor">Topic</div>
+            <div class="Pipe" data-type="Default">
+              Queue
+              <i
+                id="Warning"
+                class="fa-sharp fa-solid fa-xl fa-circle-exclamation"
+              ></i>
+              <i id="Check" class="fa-sharp fa-xl fa-solid fa-circle-check"></i>
+              <i id="Docker" class="fa-brands fa-xl fa-docker"></i>
+            </div>
+            <div class="Pipe" data-type="Distributor">
+              Topic
+              <i
+                id="Warning"
+                class="fa-sharp fa-solid fa-xl fa-circle-exclamation"
+              ></i>
+              <i id="Check" class="fa-sharp fa-xl fa-solid fa-circle-check"></i>
+              <i id="Docker" class="fa-brands fa-xl fa-docker"></i>
+            </div>
           </div>
           <hr />
           <div>

src/main.js

@@ -12,7 +12,6 @@ import {
   clearArchitecture,
 } from "./functions/api";
 import { getScaleValues } from "./functions/scaling";
-import { showDocker } from "./functions/visualValidation";
 
 function App() {
   const appState = (() => {