From f88592fcb55b1c18f452ef1aead0ee6a5e21e714 Mon Sep 17 00:00:00 2001
From: Robin Leber <rleber98@gmail.com>
Date: Thu, 27 Jun 2024 12:40:44 +0200
Subject: [PATCH] FEAT: Filter naming
---
src/functions/codeEditor.js | 46 ++++++++++++++++++---------
src/functions/contextmenu.js | 28 ++++++++++-------
src/functions/duplication.js | 31 ------------------
src/functions/naming.js | 61 ++++++++++++++++++++++++++++++++++++
src/index.html | 14 +++++++--
src/style.css | 8 +++--
6 files changed, 128 insertions(+), 60 deletions(-)
create mode 100644 src/functions/naming.js
diff --git a/src/functions/codeEditor.js b/src/functions/codeEditor.js
index cae386d..ec84150 100644
--- a/src/functions/codeEditor.js
+++ b/src/functions/codeEditor.js
@@ -16,6 +16,16 @@ export const codeEditorElement = (instance) => {
`codeEditor${window.selectedFilter}`
);
codeEditor.style.visibility = "visible";
+ const filterName = document.querySelector(
+ `#${window.selectedFilter} #FilterName`
+ ).innerText;
+ filterName
+ ? (codeEditor.childNodes[1].innerText = `${
+ document
+ .getElementById(window.selectedFilter)
+ .innerHTML.split("\n")[1]
+ }: ${filterName}`)
+ : null;
handlePipeBinding(getPipesForFilter(instance), codeEditor.editor);
} else {
var diagram = document.getElementById("Diagram");
@@ -24,12 +34,33 @@ export const codeEditorElement = (instance) => {
editorContainer.classList.add("editorContainer");
editorContainer.id = `codeEditor${window.selectedFilter}`;
- const containerHeading = document.createElement("h4");
+ const filterToCode = {
+ type: document
+ .getElementById(window.selectedFilter)
+ .innerHTML.split("\n")[1],
+ id: window.selectedFilter,
+ name: document.querySelector(`#${window.selectedFilter} #FilterName`)
+ .innerText,
+ };
+
+ const containerHeading = document.createElement("h3");
containerHeading.appendChild(document.createTextNode("CODE EDITOR"));
containerHeading.style.marginTop = "6px";
containerHeading.style.marginBottom = "0px";
editorContainer.appendChild(containerHeading);
+ const editorNameElement = document.createElement("h4");
+ editorNameElement.style.marginTop = "6px";
+ editorNameElement.style.marginBottom = "6px";
+ editorNameElement.appendChild(
+ document.createTextNode(
+ `${filterToCode.type}: ${
+ filterToCode.name ? filterToCode.name : filterToCode.id
+ }`
+ )
+ );
+ editorContainer.appendChild(editorNameElement);
+
const pipesElement = document.createElement("div");
pipesElement.style.display = "flex";
pipesElement.style.justifyContent = "space-between";
@@ -69,19 +100,6 @@ export const codeEditorElement = (instance) => {
diagram.appendChild(editorContainer);
- const filterToCode = {
- type: document
- .getElementById(window.selectedFilter)
- .innerHTML.split("\n")[1],
- id: window.selectedFilter,
- };
-
- const filterToCodeElement = document.createElement("p");
- filterToCodeElement.appendChild(
- document.createTextNode(`${filterToCode.type}: ${filterToCode.id}`)
- );
- editorContainer.appendChild(filterToCodeElement);
-
const closingX = document.createElement("div");
closingX.classList.add("closingX");
closingX.appendChild(document.createTextNode("X"));
diff --git a/src/functions/contextmenu.js b/src/functions/contextmenu.js
index 50b3104..616fa5f 100644
--- a/src/functions/contextmenu.js
+++ b/src/functions/contextmenu.js
@@ -1,7 +1,7 @@
-import { duplicatePipe, duplicateFilter, extendPipe } from "./duplication";
+import { duplicatePipe, duplicateFilter } from "./duplication";
+import { nameFilter, namePipe } from "./naming";
import { codeEditorElement } from "./codeEditor";
import { scaleOut } from "./api";
-import { showCheck } from "./visualValidation";
import { appState } from "./state";
export const initContextmenu = (instance) => {
@@ -36,13 +36,16 @@ export const initContextmenu = (instance) => {
$(
`<div style='display: flex; flex-direction: column;' class='custom-menu'>
<button style='border: none; padding: 6px 12px; cursor: pointer;' class='code-filter'>
- Add Implementation
+ Add Implementation
+ </button>
+ <button style='border: none; padding: 6px 12px; cursor: pointer;' class='name-filter'>
+ Name Filter
</button>
<button style='border: none; padding: 6px 12px; cursor: pointer;' class='duplicate-filter'>
Duplicate Filter
</button>
<button style='background-color: blue; color: white; border: none; padding: 6px 12px; cursor: pointer;' class='scale-out'>
- SCALE OUT
+ Scale Out
</button>
<button style='background-color: red; color: white; border: none; padding: 6px 12px; cursor: pointer;' class='delete-filter'>
Delete Filter
@@ -53,21 +56,24 @@ export const initContextmenu = (instance) => {
.css({ top: event.pageY + "px", left: event.pageX + "px" });
});
- $("body").on("click", ".delete-filter", (event) => {
- instance.remove(window.selectedFilter);
- appState.removeConnection(window.selectedFilter);
+ $("body").on("click", ".code-filter", (event) => {
+ codeEditorElement(instance);
+ });
+ $("body").on("click", ".name-filter", (event) => {
+ nameFilter(instance);
});
$("body").on("click", ".duplicate-filter", (event) => {
duplicateFilter(instance);
});
- $("body").on("click", ".code-filter", (event) => {
- codeEditorElement(instance);
- });
$("body").on("click", ".scale-out", (event) => {
scaleOut(window.selectedFilter);
document.getElementById("Pause").removeAttribute("disabled");
document.getElementById("Deploy").setAttribute("disabled", "disabled");
});
+ $("body").on("click", ".delete-filter", (event) => {
+ instance.remove(window.selectedFilter);
+ appState.removeConnection(window.selectedFilter);
+ });
// Kontext Menü für Pipes
$("body").on("contextmenu", "#Diagram .Pipe", (event) => {
@@ -99,6 +105,6 @@ export const initContextmenu = (instance) => {
duplicatePipe(instance);
});
$("body").on("click", ".name-pipe", (event) => {
- extendPipe(instance);
+ namePipe(instance);
});
};
diff --git a/src/functions/duplication.js b/src/functions/duplication.js
index c6eed57..04d5dd9 100644
--- a/src/functions/duplication.js
+++ b/src/functions/duplication.js
@@ -49,34 +49,3 @@ export const duplicateFilter = (instance) => {
instance.draggable(newFilter.id, { containment: true });
createEndpoints(instance, newFilter.id, newFilter.dataset.type);
};
-
-export const extendPipe = (instance) => {
- let newPipeName;
-
- while (true) {
- newPipeName = prompt("Bitte geben Sie einen Pipe Namen ein:");
-
- let nameExists = Array.from(appState.getState().pipes.values()).includes(
- newPipeName
- );
-
- if (nameExists) {
- alert(
- "Dieser Name ist bereits vergeben. Bitte geben Sie einen anderen Namen ein."
- );
- } else {
- break;
- }
- }
-
- if (window.selectedPipe && newPipeName) {
- appState.addPipe(window.selectedPipe, newPipeName);
-
- const spanToChange = document.querySelector(
- `#${window.selectedPipe} #PipeName`
- );
- spanToChange.innerHTML = `"${newPipeName}"`;
- showCheck(window.selectedPipe);
- instance.repaintEverything();
- }
-};
diff --git a/src/functions/naming.js b/src/functions/naming.js
new file mode 100644
index 0000000..5ab4984
--- /dev/null
+++ b/src/functions/naming.js
@@ -0,0 +1,61 @@
+import { showCheck } from "./visualValidation";
+import { appState } from "./state";
+
+export const namePipe = (instance) => {
+ let newPipeName;
+
+ while (true) {
+ newPipeName = prompt("Bitte geben Sie einen Pipe Namen ein:");
+
+ let nameExists = Array.from(appState.getState().pipes.values()).includes(
+ newPipeName
+ );
+
+ if (nameExists) {
+ alert(
+ "Dieser Name ist bereits vergeben. Bitte geben Sie einen anderen Namen ein."
+ );
+ } else {
+ break;
+ }
+ }
+
+ if (window.selectedPipe && newPipeName) {
+ appState.addPipe(window.selectedPipe, newPipeName);
+
+ const spanToChange = document.querySelector(
+ `#${window.selectedPipe} #PipeName`
+ );
+ spanToChange.innerHTML = `${newPipeName}`;
+ showCheck(window.selectedPipe);
+ instance.repaintEverything();
+ }
+};
+
+export const nameFilter = (instance) => {
+ let newFilterName;
+
+ newFilterName = prompt("Bitte geben Sie einen Filter Namen ein:");
+ // while (true) {
+
+ // let nameExists = Array.from(appState.getState().pipes.values()).includes(
+ // newFilterName
+ // );
+
+ // if (nameExists) {
+ // alert(
+ // "Dieser Name ist bereits vergeben. Bitte geben Sie einen anderen Namen ein."
+ // );
+ // } else {
+ // break;
+ // }
+ // }
+
+ if (window.selectedFilter && newFilterName) {
+ const spanToChange = document.querySelector(
+ `#${window.selectedFilter} #FilterName`
+ );
+ spanToChange.innerHTML = `${newFilterName}`;
+ instance.repaintEverything();
+ }
+};
diff --git a/src/index.html b/src/index.html
index a6e061a..c99bda2 100644
--- a/src/index.html
+++ b/src/index.html
@@ -28,7 +28,7 @@
<div class="Pipe" data-type="Distributor" data-pipetype="Queue">
Queue
<br />
- <span id="PipeName"></span>
+ <span style="font-weight: bold" id="PipeName"></span>
<i
id="Warning"
class="fa-sharp fa-solid fa-xl fa-exclamation"
@@ -38,7 +38,7 @@
<div class="Pipe" data-type="Distributor" data-pipetype="Topic">
Topic
<br />
- <span id="PipeName"></span>
+ <span style="font-weight: bold" id="PipeName"></span>
<i
id="Warning"
class="fa-sharp fa-solid fa-xl fa-exclamation"
@@ -51,6 +51,8 @@
<h5>FILTER</h5>
<div class="Filter" data-type="Start">
Sender
+ <br />
+ <span style="font-weight: bold" id="FilterName"></span>
<p class="Scale">0</p>
<i
id="Warning"
@@ -62,6 +64,8 @@
</div>
<div class="Filter" data-type="End">
Receiver
+ <br />
+ <span style="font-weight: bold" id="FilterName"></span>
<p class="Scale">0</p>
<i
id="Warning"
@@ -73,6 +77,8 @@
</div>
<div class="Filter" data-type="Default">
BL
+ <br />
+ <span style="font-weight: bold" id="FilterName"></span>
<p class="Scale">0</p>
<i
id="Warning"
@@ -84,6 +90,8 @@
</div>
<div class="Filter" data-type="Distributor">
Router
+ <br />
+ <span style="font-weight: bold" id="FilterName"></span>
<p class="Scale">0</p>
<i
id="Warning"
@@ -95,6 +103,8 @@
</div>
<div class="Filter" data-type="Collector">
Aggregator
+ <br />
+ <span style="font-weight: bold" id="FilterName"></span>
<p class="Scale">0</p>
<i
id="Warning"
diff --git a/src/style.css b/src/style.css
index 112d749..0ac592e 100644
--- a/src/style.css
+++ b/src/style.css
@@ -26,8 +26,12 @@
position: absolute;
border: 2px solid black;
border-radius: 4px;
- width: 84px;
+ min-width: 84px;
+ width: fit-content;
height: 66px;
+ padding: 6px;
+ padding-bottom: 3px;
+ padding-top: 3px;
cursor: grab;
background-color: ghostwhite;
}
@@ -45,7 +49,7 @@
text-align: center;
align-content: center;
position: absolute;
- padding: 16px;
+ padding: 12px;
padding-top: 3px;
padding-bottom: 3px;
width: fit-content;
--
GitLab