From 38136c8befa258bd15135d007c9eb02c65a7fbc9 Mon Sep 17 00:00:00 2001
From: Robin Leber <rleber98@gmail.com>
Date: Fri, 21 Jun 2024 09:45:46 +0200
Subject: [PATCH] FIX: pipe name uniqueness and editable
---
src/functions/duplication.js | 45 +++++++++++++++++++++---------------
src/functions/id.js | 8 +++++++
src/index.html | 2 ++
src/main.js | 3 ++-
4 files changed, 38 insertions(+), 20 deletions(-)
create mode 100644 src/functions/id.js
diff --git a/src/functions/duplication.js b/src/functions/duplication.js
index 9c0e8f3..7b30412 100644
--- a/src/functions/duplication.js
+++ b/src/functions/duplication.js
@@ -2,12 +2,13 @@ import { v4 as uuidv4 } from "uuid";
import { createEndpoints } from "./endpoints";
import { appState } from "./state";
import { showWarning } from "./visualValidation";
+import { shortenId } from "./id";
export const duplicatePipe = (instance) => {
const selectedPipe = document.getElementById(window.selectedPipe);
const newPipe = selectedPipe.cloneNode(true);
- newPipe.id = uuidv4();
+ newPipe.id = shortenId(uuidv4());
const top = selectedPipe.offsetTop + 36;
const topStr = top.toString() + "px";
@@ -30,7 +31,7 @@ export const duplicateFilter = (instance) => {
const selectedFilter = document.getElementById(window.selectedFilter);
const newFilter = selectedFilter.cloneNode(true);
- newFilter.id = uuidv4();
+ newFilter.id = shortenId(uuidv4());
const top = selectedFilter.offsetTop + 48;
const topStr = top.toString() + "px";
@@ -50,25 +51,31 @@ export const duplicateFilter = (instance) => {
};
export const extendPipe = () => {
- let newPipeName = 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);
+ let newPipeName;
+
+ while (true) {
+ newPipeName = prompt("Bitte geben Sie einen Pipe Namen ein:");
- var newContent = beforeQueue + `<br> "${newPipeName}"` + afterQueue;
+ let nameExists = Array.from(appState.getState().pipes.values()).includes(
+ newPipeName
+ );
- pipeToName.innerHTML = newContent;
+ if (nameExists) {
+ alert(
+ "Dieser Name ist bereits vergeben. Bitte geben Sie einen anderen Namen ein."
+ );
+ } else {
+ break;
}
- appState.addPipe(pipeToName.id, newPipeName);
+ }
+
+ if (window.selectedPipe && newPipeName) {
+ appState.addPipe(window.selectedPipe, newPipeName);
+
+ const spanToChange = document.querySelector(
+ `#${window.selectedPipe} #PipeName`
+ );
+ spanToChange.innerHTML = `"${newPipeName}"`;
+ console.log(appState.getState().pipes);
}
};
diff --git a/src/functions/id.js b/src/functions/id.js
new file mode 100644
index 0000000..c7caf57
--- /dev/null
+++ b/src/functions/id.js
@@ -0,0 +1,8 @@
+export const shortenId = (uuid) => {
+ const startsWithNumber = /^\d/.test(uuid);
+
+ if (startsWithNumber) {
+ uuid = uuid.replace(/^\d+/, "");
+ }
+ return uuid;
+};
diff --git a/src/index.html b/src/index.html
index fb357c9..e06fe32 100644
--- a/src/index.html
+++ b/src/index.html
@@ -27,6 +27,8 @@
<h5>PIPES</h5>
<div class="Pipe" data-type="Default">
Queue
+ <br />
+ <span id="PipeName"></span>
<i
id="Warning"
class="fa-sharp fa-solid fa-xl fa-circle-exclamation"
diff --git a/src/main.js b/src/main.js
index 40337b4..ae852f9 100644
--- a/src/main.js
+++ b/src/main.js
@@ -14,6 +14,7 @@ import {
} from "./functions/api";
import { getScaleValues } from "./functions/scaling";
import { showAllWarning } from "./functions/visualValidation";
+import { shortenId } from "./functions/id";
function App() {
const instance = jsPlumb.getInstance({});
@@ -61,7 +62,7 @@ function App() {
// Diagramm DIV droppable machen
$("#Diagram").droppable({
drop: function (event, ui) {
- var id = uuidv4();
+ var id = shortenId(uuidv4());
var clone = $(ui.helper).clone(true);
clone.attr("id", id);
clone.appendTo(this);
--
GitLab