Skip to content
Snippets Groups Projects
Commit f623b802 authored by Robin Leber's avatar Robin Leber
Browse files

pipe binding: direct binding

parent dc57867b
No related branches found
No related tags found
No related merge requests found
import { basicSetup, EditorView } from "codemirror";
import { EditorState } from "@codemirror/state";
import { javascript } from "@codemirror/lang-javascript";
import { createCustomCode } from "./api";
import { showCheck } from "./visualValidation";
import {
createPipesElements,
getPipesForFilter,
createPipeButtons,
} from "./pipeBinding";
import { handlePipeBinding, getPipesForFilter } from "./pipeBinding";
export const codeEditor = (instance) => {
if (document.getElementById(`codeEditor${window.selectedFilter}`)) {
......@@ -14,7 +11,6 @@ export const codeEditor = (instance) => {
`codeEditor${window.selectedFilter}`
);
codeEditor.style.visibility = "visible";
createPipeButtons(getPipesForFilter());
} else {
var diagram = document.getElementById("Diagram");
......@@ -30,8 +26,6 @@ export const codeEditor = (instance) => {
diagram.appendChild(editorContainer);
createPipesElements();
const filterToCode = {
type: document
.getElementById(window.selectedFilter)
......@@ -56,22 +50,26 @@ export const codeEditor = (instance) => {
editorValues = {
doc: "// publisher.js\nconst amqp = require('amqplib/callback_api');\n\nconst rabbitmqUrl = 'amqp://mquser:mqpass@rabbit:5672';\n\namqp.connect(rabbitmqUrl, (error0, connection) => {\n if (error0) {\n throw error0;\n }\n connection.createChannel((error1, channel) => {\n if (error1) {\n throw error1;\n }\n\n // DO NOT CHANGE \n const queue = process.env.QUEUE_NAME\n\n channel.assertQueue(queue, {\n durable: false\n });\n\n const sendMessage = () => {\n const msg = 'Hello World! ' + new Date().toISOString();\n channel.sendToQueue(queue, Buffer.from(msg));\n console.log(\" [x] Sent '%s'\", msg);\n };\n\n setInterval(sendMessage, 1000);\n });\n});\n",
extensions: [basicSetup, javascript()],
parent: editorContainer,
};
else if (filterToCode.type.includes("Receiver")) {
editorValues = {
doc: "// consumer.js\nconst amqp = require('amqplib/callback_api');\n\nconst rabbitmqUrl = 'amqp://mquser:mqpass@rabbit:5672';\n\namqp.connect(rabbitmqUrl, (error0, connection) => {\n\tif (error0) {\n\t\tthrow error0;\n\t}\n\tconnection.createChannel((error1, channel) => {\n\t\tif (error1) {\n\t\t\tthrow error1;\n\t\t}\n\n\t\t// DO NOT CHANGE \n const queue = process.env.QUEUE_NAME\n\n\t\tchannel.assertQueue(queue, {\n\t\t\tdurable: false\n\t\t});\n\n\t\tconsole.log(\" [*] Waiting for messages in %s. To exit press CTRL+C\", queue);\n\n\t\t// Funktion, um eine Nachricht aus der Queue zu konsumieren\n\t\tconst consumeMessage = () => {\n\t\t\tchannel.get(queue, { noAck: false }, (error, msg) => {\n\t\t\t\tif (error) {\n\t\t\t\t\tthrow error;\n\t\t\t\t}\n\t\t\t\tif (msg) {\n\t\t\t\t\tconsole.log(\" [x] Received '%s'\", msg.content.toString());\n\t\t\t\t\t// Nachricht bestätigen (acknowledge)\n\t\t\t\t\tchannel.ack(msg);\n\t\t\t\t} else {\n\t\t\t\t\tconsole.log(\" [x] No message received at this interval.\");\n\t\t\t\t}\n\t\t\t});\n\t\t};\n\n\t\t// Setze ein Intervall von 3 Sekunden\n\t\tsetInterval(consumeMessage, 3000);\n\t});\n});\n",
extensions: [basicSetup, javascript()],
parent: editorContainer,
};
} else {
editorValues = {
doc: "const amqp = require('amqplib/callback_api');\n\nconst rabbitmqUrl = 'amqp://mquser:mqpass@rabbit:5672';\n\namqp.connect(rabbitmqUrl, (error0, connection) => {\n if (error0) {\n throw error0;\n }\n connection.createChannel((error1, channel) => {\n if (error1) {\n throw error1;\n }\n\n //TODO: Code logic here\n});\n",
doc: "const amqp = require('amqplib/callback_api');\n\nconst rabbitmqUrl = 'amqp://mquser:mqpass@rabbit:5672';\n\namqp.connect(rabbitmqUrl, (error0, connection) => {\n if (error0) {\n throw error0;\n }\n connection.createChannel((error1, channel) => {\n if (error1) {\n throw error1;\n }\n\n\n\n //TODO: Code logic here\n});\n",
extensions: [basicSetup, javascript()],
parent: editorContainer,
};
}
const editor = new EditorView(editorValues);
let editorStartState = EditorState.create(editorValues);
const editor = new EditorView({
state: editorStartState,
});
handlePipeBinding(getPipesForFilter(), editor);
// createPipesElements(editor);
editorContainer.appendChild(editor.dom);
var buttonContainer = document.createElement("div");
buttonContainer.classList.add("codeEditorButtons");
......
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);
......@@ -46,20 +18,20 @@ export const getPipesForFilter = () => {
return pipeMapping;
};
export const createPipeButtons = (pipeMapping) => {
const incomingPipesDiv = document.getElementById("IncomingPipes");
const outgoingPipesDiv = document.getElementById("OutgoingPipes");
export const handlePipeBinding = (pipeMapping, editor) => {
let lineNumber = 14;
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);
}
let line = editor.state.doc.line(lineNumber);
let position = line.from;
let transaction = editor.state.update({
changes: {
from: position,
insert: `\t\tconst ${pipe.pipeName.replace(/\s+/g, "")} = "${
pipe.pipeName
}"\n`,
},
});
editor.dispatch(transaction);
lineNumber++;
});
};
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment