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

FEAT: added visual validation for filter

parent bd265b40
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
src/functions/api.js
+ 3
− 0
View file @ d70a049d
......@@ -2,6 +2,7 @@ import axios from "axios";
import { SERVER_URL } from "../config";
import { loader, errorFeedback, successFeedback } from "./feedback";
import { getScaleValues } from "./scaling";
import { showDocker } from "./visualValidation";
export const runCustomCode = () => {
loader(true);
......@@ -11,6 +12,7 @@ export const runCustomCode = () => {
loader(false);
if (response.status === 200) {
successFeedback();
showDocker(window.selectedFilter);
} else {
errorFeedback(response);
}
......@@ -48,6 +50,7 @@ export const restartCustomCode = () => {
loader(false);
if (response.status === 200) {
successFeedback();
showDocker(window.selectedFilter);
} else {
errorFeedback(response);
}
......
......
src/functions/codeEditor.js
+ 8
− 2
View file @ d70a049d
import { basicSetup, EditorView } from "codemirror";
import { javascript } from "@codemirror/lang-javascript";
import { createCustomCode } from "./api";
import { showCheck } from "./visualValidation";
export const codeEditor = (instance) => {
if (document.getElementById(`codeEditor${window.selectedFilter}`)) {
......@@ -20,7 +21,9 @@ export const codeEditor = (instance) => {
editorContainer.appendChild(containerHeading);
const filterToCode = {
type: document.getElementById(window.selectedFilter).innerHTML,
type: document
.getElementById(window.selectedFilter)
.innerHTML.split("\n")[1],
id: window.selectedFilter,
};
......@@ -87,7 +90,9 @@ const handleCancel = (node) => {
};
const handleSubmit = (node, code) => {
const requestBody = {
type: document.getElementById(window.selectedFilter).innerHTML,
type: document
.getElementById(window.selectedFilter)
.innerHTML.split("\n")[1],
id: window.selectedFilter,
code: code,
isDeployed: false,
......@@ -96,5 +101,6 @@ const handleSubmit = (node, code) => {
};
createCustomCode(requestBody);
node.style.visibility = "hidden";
showCheck(window.selectedFilter);
document.getElementById("Run").removeAttribute("disabled");
};
src/functions/visualValidation.js 0 → 100644
+ 28
− 0
View file @ d70a049d
export const showWarning = (id) => {
const selectedElement = document.getElementById(id);
var checkDomElement = selectedElement.querySelector("#Warning");
checkDomElement.style.visibility = "visible";
var dockerDomElement = selectedElement.querySelector("#Check");
dockerDomElement.style.visibility = "hidden";
var dockerDomElement = selectedElement.querySelector("#Docker");
dockerDomElement.style.visibility = "hidden";
};
export const showCheck = (id) => {
var selectedElement = document.getElementById(id);
var checkDomElement = selectedElement.querySelector("#Warning");
checkDomElement.style.visibility = "hidden";
var dockerDomElement = selectedElement.querySelector("#Check");
dockerDomElement.style.visibility = "visible";
var dockerDomElement = selectedElement.querySelector("#Docker");
dockerDomElement.style.visibility = "hidden";
};
export const showDocker = (id) => {
console.log("### hi:", id);
const selectedElement = document.getElementById(id);
var checkDomElement = selectedElement.querySelector("#Warning");
checkDomElement.style.visibility = "hidden";
var dockerDomElement = selectedElement.querySelector("#Check");
dockerDomElement.style.visibility = "hidden";
var dockerDomElement = selectedElement.querySelector("#Docker");
dockerDomElement.style.visibility = "visible";
};
src/index.html
+ 34
− 0
View file @ d70a049d
......@@ -9,6 +9,10 @@
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
......@@ -30,22 +34,52 @@
<div class="Filter" data-type="Start">
Sender
<p class="Scale">0</p>
<i
id="Warning"
class="fa-sharp fa-solid fa-xl fa-circle-exclamation"
></i>
<i id="Check" class="fa-sharp fa-xl fa-solid fa-circle-check"></i>
<i id="Docker" class="fa-brands fa-xl fa-docker"></i>
</div>
<div class="Filter" data-type="End">
Receiver
<p class="Scale">0</p>
<i
id="Warning"
class="fa-sharp fa-solid fa-xl fa-circle-exclamation"
></i>
<i id="Check" class="fa-sharp fa-xl fa-solid fa-circle-check"></i>
<i id="Docker" class="fa-brands fa-xl fa-docker"></i>
</div>
<div class="Filter" data-type="Default">
BL
<p class="Scale">0</p>
<i
id="Warning"
class="fa-sharp fa-solid fa-xl fa-circle-exclamation"
></i>
<i id="Check" class="fa-sharp fa-xl fa-solid fa-circle-check"></i>
<i id="Docker" class="fa-brands fa-xl fa-docker"></i>
</div>
<div class="Filter" data-type="Distributor">
Router
<p class="Scale">0</p>
<i
id="Warning"
class="fa-sharp fa-solid fa-xl fa-circle-exclamation"
></i>
<i id="Check" class="fa-sharp fa-xl fa-solid fa-circle-check"></i>
<i id="Docker" class="fa-brands fa-xl fa-docker"></i>
</div>
<div class="Filter" data-type="Collector">
Aggregator
<p class="Scale">0</p>
<i
id="Warning"
class="fa-sharp fa-solid fa-xl fa-circle-exclamation"
></i>
<i id="Check" class="fa-sharp fa-xl fa-solid fa-circle-check"></i>
<i id="Docker" class="fa-brands fa-xl fa-docker"></i>
</div>
</div>
</div>
......
......
src/main.js
+ 2
− 0
View file @ d70a049d
......@@ -12,6 +12,7 @@ import {
clearArchitecture,
} from "./functions/api";
import { getScaleValues } from "./functions/scaling";
import { showDocker } from "./functions/visualValidation";
function App() {
const appState = (() => {
......@@ -78,6 +79,7 @@ function App() {
document.getElementById("Run").addEventListener("click", () => {
if (!appState.getState().beenPaused) {
runCustomCode();
document.getElementById("Run").removeAttribute("disabled");
appState.setBeenPaused(true);
} else {
restartCustomCode();
......
......
src/style.css
+ 51
− 0
View file @ d70a049d
......@@ -251,3 +251,54 @@
position: absolute;
visibility: hidden;
}
#Diagram #Warning {
position: absolute;
left: -12px;
top: 0;
color: orange;
background-color: ghostwhite;
}
#Toolbox #Warning {
position: absolute;
visibility: hidden;
}
#Diagram #Check {
position: absolute;
left: -12px;
top: 0;
color: green;
background-color: ghostwhite;
visibility: hidden;
}
#Toolbox #Check {
position: absolute;
visibility: hidden;
}
#Diagram #Docker {
position: absolute;
left: -12px;
top: 0;
color: blue;
background-color: ghostwhite;
visibility: hidden;
}
#Toolbox #Docker {
position: absolute;
visibility: hidden;
}
.fa-circle-exclamation:before {
background-color: ghostwhite;
}
.fa-circle-check:before {
background-color: ghostwhite;
}
.fa-docker:before {
background-color: ghostwhite;
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please to comment