From 19ec6667fa92d7bdedc9bf2463c8f7d5dc2d2c13 Mon Sep 17 00:00:00 2001
From: Robin Leber <rleber98@gmail.com>
Date: Tue, 18 Jun 2024 12:06:37 +0200
Subject: [PATCH] validation for pipes
---
src/functions/api.js | 4 ++--
src/functions/contextmenu.js | 18 ++++++++----------
src/functions/duplication.js | 23 +++++++++++++++++++++++
src/functions/visualValidation.js | 15 ++++++---------
src/index.html | 20 ++++++++++++++++++--
src/main.js | 1 -
6 files changed, 57 insertions(+), 24 deletions(-)
diff --git a/src/functions/api.js b/src/functions/api.js
index b054d1c..c0da7ce 100644
--- a/src/functions/api.js
+++ b/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);
}
diff --git a/src/functions/contextmenu.js b/src/functions/contextmenu.js
index 47affbd..b69cb30 100644
--- a/src/functions/contextmenu.js
+++ b/src/functions/contextmenu.js
@@ -1,6 +1,7 @@
-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);
});
};
diff --git a/src/functions/duplication.js b/src/functions/duplication.js
index fe7abaf..e127412 100644
--- a/src/functions/duplication.js
+++ b/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;
+ }
+ }
+};
diff --git a/src/functions/visualValidation.js b/src/functions/visualValidation.js
index 2e8df6c..95f918d 100644
--- a/src/functions/visualValidation.js
+++ b/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"));
};
diff --git a/src/index.html b/src/index.html
index aa701b2..62fef17 100644
--- a/src/index.html
+++ b/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>
diff --git a/src/main.js b/src/main.js
index bfed88a..db85e68 100644
--- a/src/main.js
+++ b/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 = (() => {
--
GitLab