From 95086007b626465e8706fea9461dfa170096e5cf Mon Sep 17 00:00:00 2001
From: Robin Leber <rleber98@gmail.com>
Date: Wed, 19 Jun 2024 14:57:03 +0200
Subject: [PATCH] =?UTF-8?q?Vorbereitung=20f=C3=BCr=20pipe=20binding?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/functions/codeEditor.js | 23 +++++++++++++++++++++++
 src/style.css               |  5 +++++
 2 files changed, 28 insertions(+)

diff --git a/src/functions/codeEditor.js b/src/functions/codeEditor.js
index 64f5bf9..3c5329d 100644
--- a/src/functions/codeEditor.js
+++ b/src/functions/codeEditor.js
@@ -20,6 +20,29 @@ export const codeEditor = (instance) => {
     containerHeading.appendChild(document.createTextNode("CODE EDITOR"));
     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);
+
+    editorContainer.appendChild(pipesDiv);
+
     const filterToCode = {
       type: document
         .getElementById(window.selectedFilter)
diff --git a/src/style.css b/src/style.css
index b9bb7a4..a190381 100644
--- a/src/style.css
+++ b/src/style.css
@@ -317,3 +317,8 @@
 .fa-docker:before {
   background-color: ghostwhite;
 }
+
+.pipes {
+  display: flex;
+  justify-content: space-between;
+}
-- 
GitLab