From dc57867bb8757565078b48f69682f41569e770b5 Mon Sep 17 00:00:00 2001
From: Robin Leber <rleber98@gmail.com>
Date: Thu, 20 Jun 2024 10:40:42 +0200
Subject: [PATCH] FEAT: pipe binding, pipe buttons
---
src/functions/codeEditor.js | 32 ++++++------------
src/functions/duplication.js | 6 ++--
src/functions/feedback.js | 13 ++++++++
src/functions/pipeBinding.js | 65 ++++++++++++++++++++++++++++++++++++
src/functions/state.js | 5 ++-
src/main.js | 10 ++++--
6 files changed, 104 insertions(+), 27 deletions(-)
create mode 100644 src/functions/pipeBinding.js
diff --git a/src/functions/codeEditor.js b/src/functions/codeEditor.js
index 3c5329d..d7383fc 100644
--- a/src/functions/codeEditor.js
+++ b/src/functions/codeEditor.js
@@ -2,6 +2,11 @@ import { basicSetup, EditorView } from "codemirror";
import { javascript } from "@codemirror/lang-javascript";
import { createCustomCode } from "./api";
import { showCheck } from "./visualValidation";
+import {
+ createPipesElements,
+ getPipesForFilter,
+ createPipeButtons,
+} from "./pipeBinding";
export const codeEditor = (instance) => {
if (document.getElementById(`codeEditor${window.selectedFilter}`)) {
@@ -9,6 +14,7 @@ export const codeEditor = (instance) => {
`codeEditor${window.selectedFilter}`
);
codeEditor.style.visibility = "visible";
+ createPipeButtons(getPipesForFilter());
} else {
var diagram = document.getElementById("Diagram");
@@ -18,30 +24,13 @@ export const codeEditor = (instance) => {
const containerHeading = document.createElement("h4");
containerHeading.appendChild(document.createTextNode("CODE EDITOR"));
+ containerHeading.style.marginTop = "6px";
+ containerHeading.style.marginBottom = "0px";
editorContainer.appendChild(containerHeading);
- const pipesDiv = document.createElement("div");
- pipesDiv.classList.add("pipes");
-
- const incomingPipesDiv = document.createElement("div");
- const incomingPipesHeading = document.createElement("h5");
- incomingPipesHeading.appendChild(document.createTextNode("Incoming Pipes"));
- incomingPipesDiv.appendChild(incomingPipesHeading);
-
- // TODO: for each pipe in incomingPipes usw...
- // const pipeButton = document.createElement("button");
- // pipeButton.appendChild(document.createTextNode("[Pipe Name 123]"));
- // incomingPipesDiv.appendChild(pipeButton);
-
- const outgoingPipesDiv = document.createElement("div");
- const outgoingPipesHeading = document.createElement("h5");
- outgoingPipesHeading.appendChild(document.createTextNode("Outgoing Pipes"));
- outgoingPipesDiv.appendChild(outgoingPipesHeading);
-
- pipesDiv.appendChild(incomingPipesDiv);
- pipesDiv.appendChild(outgoingPipesDiv);
+ diagram.appendChild(editorContainer);
- editorContainer.appendChild(pipesDiv);
+ createPipesElements();
const filterToCode = {
type: document
@@ -103,7 +92,6 @@ export const codeEditor = (instance) => {
buttonContainer.appendChild(submitButton);
editorContainer.appendChild(buttonContainer);
- diagram.appendChild(editorContainer);
instance.draggable(editorContainer.id);
}
};
diff --git a/src/functions/duplication.js b/src/functions/duplication.js
index 4087ed5..8e94b44 100644
--- a/src/functions/duplication.js
+++ b/src/functions/duplication.js
@@ -6,7 +6,7 @@ export const duplicatePipe = (instance) => {
var selectedPipe = document.getElementById(window.selectedPipe);
var newPipe = document.createElement("div");
- var pipeText = document.createTextNode(selectedPipe.innerHTML);
+ var pipeText = document.createTextNode(selectedPipe.innerHTML.split("\n")[1]);
newPipe.appendChild(pipeText);
newPipe.id = uuidv4();
newPipe.classList.add("Pipe");
@@ -32,7 +32,9 @@ export const duplicateFilter = (instance) => {
var selectedFilter = document.getElementById(window.selectedFilter);
var newFilter = document.createElement("div");
- var filterText = document.createTextNode(selectedFilter.innerHTML);
+ var filterText = document.createTextNode(
+ selectedFilter.innerHTML.split("\n")[1]
+ );
newFilter.appendChild(filterText);
newFilter.id = uuidv4();
newFilter.classList.add("Filter");
diff --git a/src/functions/feedback.js b/src/functions/feedback.js
index 102c025..9a91ab7 100644
--- a/src/functions/feedback.js
+++ b/src/functions/feedback.js
@@ -16,6 +16,19 @@ export const errorFeedback = (errorMsg) => {
errorMsgElement.remove();
}, 5000);
};
+
+export const errorFeedbackSimple = (errorMsg) => {
+ const errorMsgElement = document.createElement("p");
+ errorMsgElement.appendChild(document.createTextNode(errorMsg));
+ document.getElementById("Error").appendChild(errorMsgElement);
+
+ document.getElementById("Error").style.visibility = "visible";
+ setTimeout(function () {
+ document.getElementById("Error").style.visibility = "hidden";
+ errorMsgElement.remove();
+ }, 5000);
+};
+
export const successFeedback = () => {
document.getElementById("Success").style.visibility = "visible";
setTimeout(function () {
diff --git a/src/functions/pipeBinding.js b/src/functions/pipeBinding.js
new file mode 100644
index 0000000..003184b
--- /dev/null
+++ b/src/functions/pipeBinding.js
@@ -0,0 +1,65 @@
+import { appState } from "./state";
+import { errorFeedbackSimple } from "./feedback";
+
+export const createPipesElements = () => {
+ const codeEditor = document.getElementById(
+ `codeEditor${window.selectedFilter}`
+ );
+ const pipesDiv = document.createElement("div");
+ pipesDiv.classList.add("pipes");
+
+ const incomingPipesDiv = document.createElement("div");
+ incomingPipesDiv.id = "IncomingPipes";
+ const incomingPipesHeading = document.createElement("h5");
+ incomingPipesHeading.style.margin = "6px";
+ incomingPipesHeading.appendChild(document.createTextNode("Incoming Pipes"));
+ incomingPipesDiv.appendChild(incomingPipesHeading);
+
+ const outgoingPipesDiv = document.createElement("div");
+ outgoingPipesDiv.id = "OutgoingPipes";
+ const outgoingPipesHeading = document.createElement("h5");
+ outgoingPipesHeading.style.margin = "6px";
+ outgoingPipesHeading.appendChild(document.createTextNode("Outgoing Pipes"));
+ outgoingPipesDiv.appendChild(outgoingPipesHeading);
+
+ pipesDiv.appendChild(incomingPipesDiv);
+ pipesDiv.appendChild(outgoingPipesDiv);
+
+ codeEditor.appendChild(pipesDiv);
+ createPipeButtons(getPipesForFilter());
+};
+
+export const getPipesForFilter = () => {
+ const filter = window.selectedFilter;
+ const connections = appState.getConnection(filter);
+ const pipeMapping = [];
+ connections &&
+ connections.forEach((connection) => {
+ const pipeName = appState.getPipe(connection.pipeId);
+ if (!pipeName) {
+ errorFeedbackSimple("Name Your Pipes!");
+ } else {
+ const pipe = { pipeName, ...connection };
+ pipeMapping.push(pipe);
+ }
+ });
+ return pipeMapping;
+};
+
+export const createPipeButtons = (pipeMapping) => {
+ const incomingPipesDiv = document.getElementById("IncomingPipes");
+ const outgoingPipesDiv = document.getElementById("OutgoingPipes");
+
+ pipeMapping.forEach((pipe) => {
+ if (document.getElementById(`Button${pipe.pipeId}`)) {
+ return;
+ } else {
+ const pipeButton = document.createElement("button");
+ pipeButton.id = `Button${pipe.pipeId}`;
+ pipeButton.appendChild(document.createTextNode(pipe.pipeName));
+ pipe.direction === "in"
+ ? incomingPipesDiv.appendChild(pipeButton)
+ : outgoingPipesDiv.appendChild(pipeButton);
+ }
+ });
+};
diff --git a/src/functions/state.js b/src/functions/state.js
index 404cf48..c43bc14 100644
--- a/src/functions/state.js
+++ b/src/functions/state.js
@@ -9,7 +9,10 @@ export const appState = (() => {
getState: () => state,
setBeenPaused: (beenPaused) => (state.beenPaused = beenPaused),
addConnection: (con1, con2) => {
- state.connections.set(con1, con2);
+ if (!state.connections.has(con1)) {
+ state.connections.set(con1, []);
+ }
+ state.connections.get(con1).push(con2);
},
removeConnection: (con1) => {
state.connections.delete(con1);
diff --git a/src/main.js b/src/main.js
index d521c4a..9bdf4ee 100644
--- a/src/main.js
+++ b/src/main.js
@@ -35,9 +35,15 @@ function App() {
return false;
}
if (source.getAttribute("class").includes("Filter")) {
- appState.addConnection(source.id, target.id);
+ appState.addConnection(source.id, {
+ pipeId: target.id,
+ direction: "out",
+ });
} else {
- appState.addConnection(target.id, source.id);
+ appState.addConnection(target.id, {
+ pipeId: source.id,
+ direction: "in",
+ });
}
return true;
});
--
GitLab