FEAT: pipe binding, pipe buttons

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);
   }
 };

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");

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 () {

src/functions/pipeBinding.js

+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);
+    }
+  });
+};

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);

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;
     });