broodjeaap/go-watch
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactored the typescript handling adding/editing filters

Browse source
This commit is contained in:
BroodjeAap 2022-09-27 18:27:21 +00:00
parent 13b7093349
commit 1a5344b967
2 changed files with 375 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

207
static/edit.js
View file

@ -29,115 +29,257 @@ var __values = (this && this.__values) || function(o) {
}; };
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined."); throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
}; };
function onTypeChange() { function onTypeChange(node) {
if (node === void 0) { node = null; }
var select = document.getElementById("typeInput"); var select = document.getElementById("typeInput");
var type = select.value; var type = select.value;
var var1Div = document.getElementById("var1Div"); var var1Div = document.getElementById("var1Div");
var var1Input = document.getElementById("var1Input"); var1Div.innerHTML = "";
var var1Label = document.getElementById("var1Label"); var var1Label = document.getElementById("var1Label");
var var2Div = document.getElementById("var2Div"); var var2Div = document.getElementById("var2Div");
var var2Input = document.getElementById("var2Input"); var2Div.innerHTML = "";
var var2Label = document.getElementById("var2Label"); var var2Label = document.getElementById("var2Label");
var var3Div = document.getElementById("var3Div"); var var3Div = document.getElementById("var3Div");
var var3Input = document.getElementById("var3Input"); var3Div.innerHTML = "";
var var3Label = document.getElementById("var3Label"); var var3Label = document.getElementById("var3Label");
var var1Value = "";
var var2Value = "";
var var3Value = "";
if (node != null) {
// @ts-ignore
var1Value = node.meta.var1;
// @ts-ignore
var2Value = node.meta.var2;
// @ts-ignore
var3Value = node.meta.var3;
}
switch (type) { switch (type) {
case "gurl": { case "gurl": {
var1Div.innerHTML = ""; var var1Input = document.createElement("input");
var1Div.appendChild(var1Input); var1Input.name = "var1";
var1Input.id = "var1Input";
var1Input.value = var1Value;
var1Input.classList.add("form-control");
var1Label.innerHTML = "URL"; var1Label.innerHTML = "URL";
var1Input.placeholder = "https://shopping.website.com"; var1Input.placeholder = "https://shopping.website.com";
var1Div.appendChild(var1Input);
var var2Input = document.createElement("input");
var2Input.name = "var2";
var2Input.id = "var2Input";
var2Input.value = var2Value;
var2Input.classList.add("form-control");
var2Input.disabled = true; var2Input.disabled = true;
var2Input.placeholder = ""; var2Input.placeholder = "";
var2Label.innerHTML = "-"; var2Label.innerHTML = "-";
var2Div.appendChild(var2Input);
var var3Input = document.createElement("input");
var3Input.name = "var3";
var3Input.id = "var3Input";
var3Input.value = var3Value;
var3Input.classList.add("form-control");
var3Input.disabled = true; var3Input.disabled = true;
var3Input.placeholder = ""; var3Input.placeholder = "";
var3Label.innerHTML = "-"; var3Label.innerHTML = "-";
var3Div.appendChild(var3Input);
break; break;
} }
case "gurls": { case "gurls": {
var1Div.innerHTML = ""; var var1Input = document.createElement("input");
var1Div.appendChild(var1Input); var1Input.name = "var1";
var1Input.id = "var1Input";
var1Input.value = var1Value;
var1Input.classList.add("form-control");
var1Label.innerHTML = "-"; var1Label.innerHTML = "-";
var1Input.placeholder = "From parents"; var1Input.placeholder = "From parents";
var1Input.value = "-";
var1Input.disabled = true; var1Input.disabled = true;
var1Div.appendChild(var1Input);
var var2Input = document.createElement("input");
var2Input.name = "var2";
var2Input.id = "var2Input";
var2Input.value = var2Value;
var2Input.classList.add("form-control");
var2Input.disabled = true; var2Input.disabled = true;
var2Input.placeholder = ""; var2Input.placeholder = "";
var2Label.innerHTML = "-"; var2Label.innerHTML = "-";
var2Div.appendChild(var2Input);
var var3Input = document.createElement("input");
var3Input.name = "var3";
var3Input.id = "var3Input";
var3Input.value = var3Value;
var3Input.classList.add("form-control");
var3Input.disabled = true; var3Input.disabled = true;
var3Input.placeholder = ""; var3Input.placeholder = "";
var3Label.innerHTML = "-"; var3Label.innerHTML = "-";
var3Div.appendChild(var3Input);
break; break;
} }
case "xpath": { case "xpath": {
var1Div.innerHTML = ""; var var1Input = document.createElement("input");
var1Div.appendChild(var1Input); var1Input.name = "var1";
var1Input.id = "var1Input";
var1Input.value = var1Value;
var1Input.classList.add("form-control");
var1Label.innerHTML = "XPath"; var1Label.innerHTML = "XPath";
var1Input.placeholder = "//a[@class='price"; var1Input.placeholder = "//a[@class='price";
var1Div.appendChild(var1Input);
var var2Input = document.createElement("input");
var2Input.name = "var2";
var2Input.id = "var2Input";
var2Input.value = var2Value;
var2Input.classList.add("form-control");
var2Input.disabled = true; var2Input.disabled = true;
var2Input.placeholder = ""; var2Input.placeholder = "";
var2Label.innerHTML = "-"; var2Label.innerHTML = "-";
var2Div.appendChild(var2Input);
var var3Input = document.createElement("input");
var3Input.name = "var3";
var3Input.id = "var3Input";
var3Input.value = var3Value;
var3Input.classList.add("form-control");
var3Input.disabled = true; var3Input.disabled = true;
var3Input.placeholder = ""; var3Input.placeholder = "";
var3Label.innerHTML = "-"; var3Label.innerHTML = "-";
var3Div.appendChild(var3Input);
break; break;
} }
case "json": { case "json": {
var1Div.innerHTML = ""; var var1Input = document.createElement("input");
var1Div.appendChild(var1Input); var1Input.name = "var1";
var1Input.id = "var1Input";
var1Input.value = var1Value;
var1Input.classList.add("form-control");
var1Label.innerHTML = "JSON"; var1Label.innerHTML = "JSON";
var1Input.placeholder = "products.#.price"; var1Input.placeholder = "products.#.price";
var1Div.appendChild(var1Input);
var var2Input = document.createElement("input");
var2Input.name = "var2";
var2Input.id = "var2Input";
var2Input.value = var2Value;
var2Input.classList.add("form-control");
var2Input.disabled = true; var2Input.disabled = true;
var2Label.innerHTML = "-"; var2Label.innerHTML = "-";
var2Div.appendChild(var2Input);
var var3Input = document.createElement("input");
var3Input.name = "var3";
var3Input.id = "var3Input";
var3Input.value = var3Value;
var3Input.classList.add("form-control");
var3Input.disabled = true; var3Input.disabled = true;
var3Label.innerHTML = "-"; var3Label.innerHTML = "-";
var3Div.appendChild(var3Input);
break; break;
} }
case "css": { case "css": {
var1Div.innerHTML = ""; var var1Input = document.createElement("input");
var1Div.appendChild(var1Input); var1Input.name = "var1";
var1Input.id = "var1Input";
var1Input.value = var1Value;
var1Input.classList.add("form-control");
var1Label.innerHTML = "Selector"; var1Label.innerHTML = "Selector";
var1Input.placeholder = ".price"; var1Input.placeholder = ".price";
var1Div.appendChild(var1Input);
var var2Input = document.createElement("input");
var2Input.name = "var2";
var2Input.id = "var2Input";
var2Input.value = var2Value;
var2Input.classList.add("form-control");
var2Input.disabled = true; var2Input.disabled = true;
var2Label.innerHTML = "-"; var2Label.innerHTML = "-";
var2Div.appendChild(var2Input);
var var3Input = document.createElement("input");
var3Input.name = "var3";
var3Input.id = "var3Input";
var3Input.value = var3Value;
var3Input.classList.add("form-control");
var3Input.disabled = true; var3Input.disabled = true;
var3Label.innerHTML = "-"; var3Label.innerHTML = "-";
var3Div.appendChild(var3Input);
break; break;
} }
case "replace": { case "replace": {
var1Div.innerHTML = ""; var var1Input = document.createElement("input");
var1Div.appendChild(var1Input); var1Input.name = "var1";
var1Input.id = "var1Input";
var1Input.value = var1Value;
var1Input.classList.add("form-control");
var1Label.innerHTML = "Regex"; var1Label.innerHTML = "Regex";
var1Input.placeholder = "So[mM]e(thing|where)"; var1Input.placeholder = "So[mM]e(thing|where)";
var1Div.appendChild(var1Input);
var var2Input = document.createElement("input");
var2Input.name = "var2";
var2Input.id = "var2Input";
var2Input.value = var2Value;
var2Input.classList.add("form-control");
var2Input.disabled = false; var2Input.disabled = false;
var2Label.innerHTML = "With"; var2Label.innerHTML = "With";
var2Div.appendChild(var2Input);
var var3Input = document.createElement("input");
var3Input.name = "var3";
var3Input.id = "var3Input";
var3Input.value = var3Value;
var3Input.classList.add("form-control");
var3Input.disabled = true; var3Input.disabled = true;
var3Label.innerHTML = "-"; var3Label.innerHTML = "-";
var3Div.appendChild(var3Input);
break; break;
} }
case "match": { case "match": {
var1Div.innerHTML = ""; var var1Input = document.createElement("input");
var1Div.appendChild(var1Input); var1Input.name = "var1";
var1Input.id = "var1Input";
var1Input.value = var1Value;
var1Input.classList.add("form-control");
var1Label.innerHTML = "Regex"; var1Label.innerHTML = "Regex";
var1Input.placeholder = "So[mM]e(thing|where)"; var1Input.placeholder = "So[mM]e(thing|where)";
var1Div.appendChild(var1Input);
var var2Input = document.createElement("input");
var2Input.name = "var2";
var2Input.id = "var2Input";
var2Input.value = var2Value;
var2Input.classList.add("form-control");
var2Input.disabled = true; var2Input.disabled = true;
var2Label.innerHTML = "-"; var2Label.innerHTML = "-";
var2Div.appendChild(var2Input);
var var3Input = document.createElement("input");
var3Input.name = "var3";
var3Input.id = "var3Input";
var3Input.value = var3Value;
var3Input.classList.add("form-control");
var3Input.disabled = true; var3Input.disabled = true;
var3Label.innerHTML = "-"; var3Label.innerHTML = "-";
var3Div.appendChild(var3Input);
break; break;
} }
case "substring": { case "substring": {
var var1Input = document.createElement("input");
var1Input.name = "var1";
var1Input.id = "var1Input";
var1Input.value = var1Value;
var1Input.classList.add("form-control");
var1Label.innerHTML = "Substring"; var1Label.innerHTML = "Substring";
var1Input.placeholder = ":20,25-40,45,47,49,-20:"; var1Input.placeholder = ":20,25-40,45,47,49,-20:";
var1Div.appendChild(var1Input);
var var2Input = document.createElement("input");
var2Input.name = "var2";
var2Input.id = "var2Input";
var2Input.value = var2Value;
var2Input.classList.add("form-control");
var2Input.disabled = true; var2Input.disabled = true;
var2Label.innerHTML = "-"; var2Label.innerHTML = "-";
var2Div.appendChild(var2Input);
var var3Input = document.createElement("input");
var3Input.name = "var3";
var3Input.id = "var3Input";
var3Input.value = var3Value;
var3Input.classList.add("form-control");
var3Input.disabled = true; var3Input.disabled = true;
var3Label.innerHTML = "-"; var3Label.innerHTML = "-";
var3Div.appendChild(var3Input);
break; break;
} }
case "math": { case "math": {
var mathSelect = document.createElement("select"); var mathSelect = document.createElement("select");
mathSelect.id = "var1Input";
mathSelect.classList.add("form-control"); mathSelect.classList.add("form-control");
var mathOptionMin = document.createElement("option"); var mathOptionMin = document.createElement("option");
mathOptionMin.value = "min"; mathOptionMin.value = "min";
@ -155,15 +297,27 @@ function onTypeChange() {
mathOptionCount.value = "count"; mathOptionCount.value = "count";
mathOptionCount.innerHTML = "Count"; mathOptionCount.innerHTML = "Count";
mathSelect.appendChild(mathOptionCount); mathSelect.appendChild(mathOptionCount);
var1Input.remove();
var1Div.appendChild(mathSelect);
var1Label.innerHTML = "Function"; var1Label.innerHTML = "Function";
var1Div.appendChild(mathSelect);
mathSelect.value = var1Value;
var var2Input = document.createElement("input");
var2Input.name = "var2";
var2Input.id = "var2Input";
var2Input.value = var2Value;
var2Input.classList.add("form-control");
var2Input.disabled = true; var2Input.disabled = true;
var2Input.placeholder = ""; var2Input.placeholder = "";
var2Label.innerHTML = "-"; var2Label.innerHTML = "-";
var2Div.appendChild(var2Input);
var var3Input = document.createElement("input");
var3Input.name = "var3";
var3Input.id = "var3Input";
var3Input.value = var3Value;
var3Input.classList.add("form-control");
var3Input.disabled = true; var3Input.disabled = true;
var3Input.placeholder = ""; var3Input.placeholder = "";
var3Label.innerHTML = "-"; var3Label.innerHTML = "-";
var3Div.appendChild(var3Input);
break; break;
} }
} }
@ -205,13 +359,8 @@ function editNode(node) {
nameInput.value = name; nameInput.value = name;
var selectType = document.getElementById("typeInput"); var selectType = document.getElementById("typeInput");
selectType.value = type; selectType.value = type;
var var1Input = document.getElementById("var1Input"); console.log(type);
var1Input.value = var1; onTypeChange(node);
var var2Input = document.getElementById("var2Input");
var2Input.value = var2;
var var3Input = document.getElementById("var3Input");
var3Input.value = var3;
onTypeChange();
var submitButton = document.getElementById("submitFilterButton"); var submitButton = document.getElementById("submitFilterButton");
submitButton.innerHTML = "Save"; submitButton.innerHTML = "Save";
submitButton.onclick = function () { submitEditNode(node); }; submitButton.onclick = function () { submitEditNode(node); };
@ -307,7 +456,7 @@ function addFilterButtonClicked() {
} }
function pageInit() { function pageInit() {
var select = document.getElementById("typeInput"); var select = document.getElementById("typeInput");
select.onchange = onTypeChange; select.onchange = function () { onTypeChange(); };
var addFilterButton = document.getElementById("filterButton"); var addFilterButton = document.getElementById("filterButton");
addFilterButton.onclick = addFilterButtonClicked; addFilterButton.onclick = addFilterButtonClicked;
var saveButtonModal = document.getElementById("saveButtonModal"); var saveButtonModal = document.getElementById("saveButtonModal");

232
static/edit.ts
View file

@ -1,116 +1,274 @@
function onTypeChange(){ function onTypeChange(node: DiagramNode | null = null){
let select = document.getElementById("typeInput") as HTMLSelectElement; let select = document.getElementById("typeInput") as HTMLSelectElement;
let type = select.value; let type = select.value;
let var1Div = document.getElementById("var1Div") as HTMLDivElement; let var1Div = document.getElementById("var1Div") as HTMLDivElement;
let var1Input = document.getElementById("var1Input") as HTMLInputElement; var1Div.innerHTML = "";
let var1Label = document.getElementById("var1Label") as HTMLLabelElement; let var1Label = document.getElementById("var1Label") as HTMLLabelElement;
let var2Div = document.getElementById("var2Div") as HTMLDivElement; let var2Div = document.getElementById("var2Div") as HTMLDivElement;
let var2Input = document.getElementById("var2Input") as HTMLInputElement; var2Div.innerHTML = "";
let var2Label = document.getElementById("var2Label") as HTMLLabelElement; let var2Label = document.getElementById("var2Label") as HTMLLabelElement;
let var3Div = document.getElementById("var3Div") as HTMLDivElement; let var3Div = document.getElementById("var3Div") as HTMLDivElement;
let var3Input = document.getElementById("var3Input") as HTMLInputElement; var3Div.innerHTML = "";
let var3Label = document.getElementById("var3Label") as HTMLLabelElement; let var3Label = document.getElementById("var3Label") as HTMLLabelElement;
let var1Value = "";
let var2Value = "";
let var3Value = "";
if (node != null){
// @ts-ignore
var1Value = node.meta.var1;
// @ts-ignore
var2Value = node.meta.var2;
// @ts-ignore
var3Value = node.meta.var3;
}
switch(type){ switch(type){
case "gurl": { case "gurl": {
var1Div.innerHTML = ""; let var1Input = document.createElement("input");
var1Div.appendChild(var1Input); var1Input.name = "var1";
var1Input.id = "var1Input";
var1Input.value = var1Value;
var1Input.classList.add("form-control");
var1Label.innerHTML = "URL"; var1Label.innerHTML = "URL";
var1Input.placeholder = "https://shopping.website.com"; var1Input.placeholder = "https://shopping.website.com";
var1Div.appendChild(var1Input);
let var2Input = document.createElement("input");
var2Input.name = "var2";
var2Input.id = "var2Input";
var2Input.value = var2Value;
var2Input.classList.add("form-control");
var2Input.disabled = true; var2Input.disabled = true;
var2Input.placeholder = "" var2Input.placeholder = ""
var2Label.innerHTML = "-"; var2Label.innerHTML = "-";
var2Div.appendChild(var2Input);
let var3Input = document.createElement("input");
var3Input.name = "var3";
var3Input.id = "var3Input";
var3Input.value = var3Value;
var3Input.classList.add("form-control");
var3Input.disabled = true; var3Input.disabled = true;
var3Input.placeholder = "" var3Input.placeholder = ""
var3Label.innerHTML = "-"; var3Label.innerHTML = "-";
var3Div.appendChild(var3Input);
break; break;
} }
case "gurls": { case "gurls": {
var1Div.innerHTML = ""; let var1Input = document.createElement("input");
var1Div.appendChild(var1Input); var1Input.name = "var1";
var1Input.id = "var1Input";
var1Input.value = var1Value;
var1Input.classList.add("form-control")
var1Label.innerHTML = "-"; var1Label.innerHTML = "-";
var1Input.placeholder = "From parents"; var1Input.placeholder = "From parents";
var1Input.value = "-";
var1Input.disabled = true; var1Input.disabled = true;
var1Div.appendChild(var1Input);
let var2Input = document.createElement("input");
var2Input.name = "var2";
var2Input.id = "var2Input";
var2Input.value = var2Value;
var2Input.classList.add("form-control")
var2Input.disabled = true; var2Input.disabled = true;
var2Input.placeholder = "" var2Input.placeholder = ""
var2Label.innerHTML = "-"; var2Label.innerHTML = "-";
var2Div.appendChild(var2Input);
let var3Input = document.createElement("input");
var3Input.name = "var3";
var3Input.id = "var3Input";
var3Input.value = var3Value;
var3Input.classList.add("form-control");
var3Input.disabled = true; var3Input.disabled = true;
var3Input.placeholder = "" var3Input.placeholder = ""
var3Label.innerHTML = "-"; var3Label.innerHTML = "-";
var3Div.appendChild(var3Input);
break; break;
} }
case "xpath": { case "xpath": {
var1Div.innerHTML = ""; let var1Input = document.createElement("input");
var1Div.appendChild(var1Input); var1Input.name = "var1";
var1Input.id = "var1Input";
var1Input.value = var1Value;
var1Input.classList.add("form-control")
var1Label.innerHTML = "XPath"; var1Label.innerHTML = "XPath";
var1Input.placeholder = "//a[@class='price"; var1Input.placeholder = "//a[@class='price";
var1Div.appendChild(var1Input);
let var2Input = document.createElement("input");
var2Input.name = "var2";
var2Input.id = "var2Input";
var2Input.value = var2Value;
var2Input.classList.add("form-control")
var2Input.disabled = true; var2Input.disabled = true;
var2Input.placeholder = "" var2Input.placeholder = "";
var2Label.innerHTML = "-"; var2Label.innerHTML = "-";
var2Div.appendChild(var2Input);
let var3Input = document.createElement("input");
var3Input.name = "var3";
var3Input.id = "var3Input";
var3Input.value = var3Value;
var3Input.classList.add("form-control");
var3Input.disabled = true; var3Input.disabled = true;
var3Input.placeholder = "" var3Input.placeholder = ""
var3Label.innerHTML = "-"; var3Label.innerHTML = "-";
var3Div.appendChild(var3Input);
break; break;
} }
case "json": { case "json": {
var1Div.innerHTML = ""; let var1Input = document.createElement("input");
var1Div.appendChild(var1Input); var1Input.name = "var1";
var1Input.id = "var1Input";
var1Input.value = var1Value;
var1Input.classList.add("form-control")
var1Label.innerHTML = "JSON"; var1Label.innerHTML = "JSON";
var1Input.placeholder = "products.#.price"; var1Input.placeholder = "products.#.price";
var1Div.appendChild(var1Input);
let var2Input = document.createElement("input");
var2Input.name = "var2";
var2Input.id = "var2Input";
var2Input.value = var2Value;
var2Input.classList.add("form-control")
var2Input.disabled = true; var2Input.disabled = true;
var2Label.innerHTML = "-"; var2Label.innerHTML = "-";
var2Div.appendChild(var2Input);
let var3Input = document.createElement("input");
var3Input.name = "var3";
var3Input.id = "var3Input";
var3Input.value = var3Value;
var3Input.classList.add("form-control");
var3Input.disabled = true; var3Input.disabled = true;
var3Label.innerHTML = "-"; var3Label.innerHTML = "-";
var3Div.appendChild(var3Input);
break; break;
} }
case "css": { case "css": {
var1Div.innerHTML = ""; let var1Input = document.createElement("input");
var1Div.appendChild(var1Input); var1Input.name = "var1";
var1Input.id = "var1Input";
var1Input.value = var1Value;
var1Input.classList.add("form-control")
var1Label.innerHTML = "Selector"; var1Label.innerHTML = "Selector";
var1Input.placeholder = ".price"; var1Input.placeholder = ".price";
var1Div.appendChild(var1Input);
let var2Input = document.createElement("input");
var2Input.name = "var2";
var2Input.id = "var2Input";
var2Input.value = var2Value;
var2Input.classList.add("form-control")
var2Input.disabled = true; var2Input.disabled = true;
var2Label.innerHTML = "-"; var2Label.innerHTML = "-";
var2Div.appendChild(var2Input);
let var3Input = document.createElement("input");
var3Input.name = "var3";
var3Input.id = "var3Input";
var3Input.value = var3Value;
var3Input.classList.add("form-control");
var3Input.disabled = true; var3Input.disabled = true;
var3Label.innerHTML = "-"; var3Label.innerHTML = "-";
var3Div.appendChild(var3Input);
break; break;
} }
case "replace": { case "replace": {
var1Div.innerHTML = ""; let var1Input = document.createElement("input");
var1Div.appendChild(var1Input); var1Input.name = "var1";
var1Input.id = "var1Input";
var1Input.value = var1Value;
var1Input.classList.add("form-control")
var1Label.innerHTML = "Regex"; var1Label.innerHTML = "Regex";
var1Input.placeholder = "So[mM]e(thing|where)"; var1Input.placeholder = "So[mM]e(thing|where)";
var1Div.appendChild(var1Input);
let var2Input = document.createElement("input");
var2Input.name = "var2";
var2Input.id = "var2Input";
var2Input.value = var2Value;
var2Input.classList.add("form-control")
var2Input.disabled = false; var2Input.disabled = false;
var2Label.innerHTML = "With"; var2Label.innerHTML = "With";
var2Div.appendChild(var2Input);
let var3Input = document.createElement("input");
var3Input.name = "var3";
var3Input.id = "var3Input";
var3Input.value = var3Value;
var3Input.classList.add("form-control");
var3Input.disabled = true; var3Input.disabled = true;
var3Label.innerHTML = "-"; var3Label.innerHTML = "-";
var3Div.appendChild(var3Input);
break; break;
} }
case "match": { case "match": {
var1Div.innerHTML = ""; let var1Input = document.createElement("input");
var1Div.appendChild(var1Input); var1Input.name = "var1";
var1Input.id = "var1Input";
var1Input.value = var1Value;
var1Input.classList.add("form-control")
var1Label.innerHTML = "Regex"; var1Label.innerHTML = "Regex";
var1Input.placeholder = "So[mM]e(thing|where)"; var1Input.placeholder = "So[mM]e(thing|where)";
var1Div.appendChild(var1Input);
let var2Input = document.createElement("input");
var2Input.name = "var2";
var2Input.id = "var2Input";
var2Input.value = var2Value;
var2Input.classList.add("form-control")
var2Input.disabled = true; var2Input.disabled = true;
var2Label.innerHTML = "-"; var2Label.innerHTML = "-";
var2Div.appendChild(var2Input);
let var3Input = document.createElement("input");
var3Input.name = "var3";
var3Input.id = "var3Input";
var3Input.value = var3Value;
var3Input.classList.add("form-control");
var3Input.disabled = true; var3Input.disabled = true;
var3Label.innerHTML = "-"; var3Label.innerHTML = "-";
var3Div.appendChild(var3Input);
break; break;
} }
case "substring": { case "substring": {
let var1Input = document.createElement("input");
var1Input.name = "var1";
var1Input.id = "var1Input";
var1Input.value = var1Value;
var1Input.classList.add("form-control")
var1Label.innerHTML = "Substring"; var1Label.innerHTML = "Substring";
var1Input.placeholder = ":20,25-40,45,47,49,-20:"; var1Input.placeholder = ":20,25-40,45,47,49,-20:";
var1Div.appendChild(var1Input);
let var2Input = document.createElement("input");
var2Input.name = "var2";
var2Input.id = "var2Input";
var2Input.value = var2Value;
var2Input.classList.add("form-control")
var2Input.disabled = true; var2Input.disabled = true;
var2Label.innerHTML = "-"; var2Label.innerHTML = "-";
var2Div.appendChild(var2Input);
let var3Input = document.createElement("input");
var3Input.name = "var3";
var3Input.id = "var3Input";
var3Input.value = var3Value;
var3Input.classList.add("form-control");
var3Input.disabled = true; var3Input.disabled = true;
var3Label.innerHTML = "-"; var3Label.innerHTML = "-";
var3Div.appendChild(var3Input);
break; break;
} }
case "math": { case "math": {
let mathSelect = document.createElement("select"); let mathSelect = document.createElement("select");
mathSelect.id = "var1Input";
mathSelect.classList.add("form-control"); mathSelect.classList.add("form-control");
let mathOptionMin = document.createElement("option"); let mathOptionMin = document.createElement("option");
mathOptionMin.value = "min" mathOptionMin.value = "min"
@ -128,17 +286,29 @@ function onTypeChange(){
mathOptionCount.value = "count"; mathOptionCount.value = "count";
mathOptionCount.innerHTML = "Count"; mathOptionCount.innerHTML = "Count";
mathSelect.appendChild(mathOptionCount); mathSelect.appendChild(mathOptionCount);
var1Input.remove();
var1Div.appendChild(mathSelect);
var1Label.innerHTML = "Function"; var1Label.innerHTML = "Function";
var1Div.appendChild(mathSelect);
mathSelect.value = var1Value;
let var2Input = document.createElement("input");
var2Input.name = "var2";
var2Input.id = "var2Input";
var2Input.value = var2Value;
var2Input.classList.add("form-control")
var2Input.disabled = true; var2Input.disabled = true;
var2Input.placeholder = "" var2Input.placeholder = ""
var2Label.innerHTML = "-"; var2Label.innerHTML = "-";
var2Div.appendChild(var2Input);
let var3Input = document.createElement("input");
var3Input.name = "var3";
var3Input.id = "var3Input";
var3Input.value = var3Value;
var3Input.classList.add("form-control");
var3Input.disabled = true; var3Input.disabled = true;
var3Input.placeholder = "" var3Input.placeholder = ""
var3Label.innerHTML = "-"; var3Label.innerHTML = "-";
var3Div.appendChild(var3Input);
break; break;
} }
} }
@ -193,17 +363,9 @@ function editNode(node: DiagramNode){
let selectType = document.getElementById("typeInput") as HTMLSelectElement; let selectType = document.getElementById("typeInput") as HTMLSelectElement;
selectType.value = type; selectType.value = type;
console.log(type);
let var1Input = document.getElementById("var1Input") as HTMLInputElement;
var1Input.value = var1;
let var2Input = document.getElementById("var2Input") as HTMLInputElement;
var2Input.value = var2;
let var3Input = document.getElementById("var3Input") as HTMLInputElement; onTypeChange(node);
var3Input.value = var3;
onTypeChange();
let submitButton = document.getElementById("submitFilterButton") as HTMLButtonElement; let submitButton = document.getElementById("submitFilterButton") as HTMLButtonElement;
submitButton.innerHTML = "Save"; submitButton.innerHTML = "Save";
submitButton.onclick = function() {submitEditNode(node);} submitButton.onclick = function() {submitEditNode(node);}
@ -290,7 +452,7 @@ function addFilterButtonClicked(){
function pageInit(){ function pageInit(){
let select = document.getElementById("typeInput") as HTMLSelectElement; let select = document.getElementById("typeInput") as HTMLSelectElement;
select.onchange = onTypeChange; select.onchange = function () {onTypeChange()};
let addFilterButton = document.getElementById("filterButton") as HTMLButtonElement; let addFilterButton = document.getElementById("filterButton") as HTMLButtonElement;
addFilterButton.onclick = addFilterButtonClicked addFilterButton.onclick = addFilterButtonClicked