544 lines
21 KiB
JavaScript
544 lines
21 KiB
JavaScript
var __read = (this && this.__read) || function (o, n) {
|
|
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
if (!m) return o;
|
|
var i = m.call(o), r, ar = [], e;
|
|
try {
|
|
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
|
}
|
|
catch (error) { e = { error: error }; }
|
|
finally {
|
|
try {
|
|
if (r && !r.done && (m = i["return"])) m.call(i);
|
|
}
|
|
finally { if (e) throw e.error; }
|
|
}
|
|
return ar;
|
|
};
|
|
var __spread = (this && this.__spread) || function () {
|
|
for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
|
|
return ar;
|
|
};
|
|
var __values = (this && this.__values) || function(o) {
|
|
var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
|
|
if (m) return m.call(o);
|
|
if (o && typeof o.length === "number") return {
|
|
next: function () {
|
|
if (o && i >= o.length) o = void 0;
|
|
return { value: o && o[i++], done: !o };
|
|
}
|
|
};
|
|
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
|
|
};
|
|
function onTypeChange(node) {
|
|
if (node === void 0) { node = null; }
|
|
var select = document.getElementById("typeInput");
|
|
var type = select.value;
|
|
var var1Div = document.getElementById("var1Div");
|
|
var1Div.innerHTML = "";
|
|
var var1Label = document.getElementById("var1Label");
|
|
var var2Div = document.getElementById("var2Div");
|
|
var2Div.innerHTML = "";
|
|
var var2Label = document.getElementById("var2Label");
|
|
var var3Div = document.getElementById("var3Div");
|
|
var3Div.innerHTML = "";
|
|
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) {
|
|
case "gurl": {
|
|
var var1Input = document.createElement("input");
|
|
var1Input.name = "var1";
|
|
var1Input.id = "var1Input";
|
|
var1Input.value = var1Value;
|
|
var1Input.classList.add("form-control");
|
|
var1Label.innerHTML = "URL";
|
|
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.placeholder = "";
|
|
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.placeholder = "";
|
|
var3Label.innerHTML = "-";
|
|
var3Div.appendChild(var3Input);
|
|
break;
|
|
}
|
|
case "gurls": {
|
|
var var1Input = document.createElement("input");
|
|
var1Input.name = "var1";
|
|
var1Input.id = "var1Input";
|
|
var1Input.value = var1Value;
|
|
var1Input.classList.add("form-control");
|
|
var1Label.innerHTML = "-";
|
|
var1Input.placeholder = "From parents";
|
|
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.placeholder = "";
|
|
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.placeholder = "";
|
|
var3Label.innerHTML = "-";
|
|
var3Div.appendChild(var3Input);
|
|
break;
|
|
}
|
|
case "xpath": {
|
|
var var1Input = document.createElement("input");
|
|
var1Input.name = "var1";
|
|
var1Input.id = "var1Input";
|
|
var1Input.value = var1Value;
|
|
var1Input.classList.add("form-control");
|
|
var1Label.innerHTML = "XPath";
|
|
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.placeholder = "";
|
|
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.placeholder = "";
|
|
var3Label.innerHTML = "-";
|
|
var3Div.appendChild(var3Input);
|
|
break;
|
|
}
|
|
case "json": {
|
|
var var1Input = document.createElement("input");
|
|
var1Input.name = "var1";
|
|
var1Input.id = "var1Input";
|
|
var1Input.value = var1Value;
|
|
var1Input.classList.add("form-control");
|
|
var1Label.innerHTML = "JSON";
|
|
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;
|
|
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;
|
|
var3Label.innerHTML = "-";
|
|
var3Div.appendChild(var3Input);
|
|
break;
|
|
}
|
|
case "css": {
|
|
var var1Input = document.createElement("input");
|
|
var1Input.name = "var1";
|
|
var1Input.id = "var1Input";
|
|
var1Input.value = var1Value;
|
|
var1Input.classList.add("form-control");
|
|
var1Label.innerHTML = "Selector";
|
|
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;
|
|
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;
|
|
var3Label.innerHTML = "-";
|
|
var3Div.appendChild(var3Input);
|
|
break;
|
|
}
|
|
case "replace": {
|
|
var var1Input = document.createElement("input");
|
|
var1Input.name = "var1";
|
|
var1Input.id = "var1Input";
|
|
var1Input.value = var1Value;
|
|
var1Input.classList.add("form-control");
|
|
var1Label.innerHTML = "Regex";
|
|
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;
|
|
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;
|
|
var3Label.innerHTML = "-";
|
|
var3Div.appendChild(var3Input);
|
|
break;
|
|
}
|
|
case "match": {
|
|
var var1Input = document.createElement("input");
|
|
var1Input.name = "var1";
|
|
var1Input.id = "var1Input";
|
|
var1Input.value = var1Value;
|
|
var1Input.classList.add("form-control");
|
|
var1Label.innerHTML = "Regex";
|
|
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;
|
|
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;
|
|
var3Label.innerHTML = "-";
|
|
var3Div.appendChild(var3Input);
|
|
break;
|
|
}
|
|
case "substring": {
|
|
var var1Input = document.createElement("input");
|
|
var1Input.name = "var1";
|
|
var1Input.id = "var1Input";
|
|
var1Input.value = var1Value;
|
|
var1Input.classList.add("form-control");
|
|
var1Label.innerHTML = "Substring";
|
|
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;
|
|
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;
|
|
var3Label.innerHTML = "-";
|
|
var3Div.appendChild(var3Input);
|
|
break;
|
|
}
|
|
case "math": {
|
|
var mathSelect = document.createElement("select");
|
|
mathSelect.name = "var1";
|
|
mathSelect.id = "var1Input";
|
|
mathSelect.classList.add("form-control");
|
|
var mathOptionSum = document.createElement("option");
|
|
mathOptionSum.value = "sum";
|
|
mathOptionSum.innerHTML = "Sum";
|
|
mathSelect.appendChild(mathOptionSum);
|
|
var mathOptionMin = document.createElement("option");
|
|
mathOptionMin.value = "min";
|
|
mathOptionMin.innerHTML = "Min";
|
|
mathSelect.appendChild(mathOptionMin);
|
|
var mathOptionMax = document.createElement("option");
|
|
mathOptionMax.value = "max";
|
|
mathOptionMax.innerHTML = "Max";
|
|
mathSelect.appendChild(mathOptionMax);
|
|
var mathOptionAvg = document.createElement("option");
|
|
mathOptionAvg.value = "average";
|
|
mathOptionAvg.innerHTML = "Average";
|
|
mathSelect.appendChild(mathOptionAvg);
|
|
var mathOptionCount = document.createElement("option");
|
|
mathOptionCount.value = "count";
|
|
mathOptionCount.innerHTML = "Count";
|
|
mathSelect.appendChild(mathOptionCount);
|
|
var mathOptionRound = document.createElement("option");
|
|
mathOptionRound.value = "round";
|
|
mathOptionRound.innerHTML = "Round";
|
|
mathSelect.appendChild(mathOptionRound);
|
|
var1Label.innerHTML = "Function";
|
|
var1Div.appendChild(mathSelect);
|
|
if (var1Value == "") {
|
|
mathSelect.value = "min";
|
|
}
|
|
else {
|
|
mathSelect.value = var1Value;
|
|
}
|
|
mathSelect.onchange = function () { onMathChange(node); };
|
|
var var2Input = document.createElement("input");
|
|
var2Input.name = "var2";
|
|
var2Input.id = "var2Input";
|
|
var2Input.value = var2Value;
|
|
var2Input.classList.add("form-control");
|
|
if (mathSelect.value == "round") {
|
|
var2Input.disabled = false;
|
|
var2Label.innerHTML = "Decimals";
|
|
}
|
|
else {
|
|
var2Input.placeholder = "";
|
|
var2Input.disabled = true;
|
|
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.placeholder = "";
|
|
var3Label.innerHTML = "-";
|
|
var3Div.appendChild(var3Input);
|
|
break;
|
|
}
|
|
case "store": {
|
|
var var1Input = document.createElement("input");
|
|
var1Input.name = "var1";
|
|
var1Input.id = "var1Input";
|
|
var1Input.value = var1Value;
|
|
var1Input.classList.add("form-control");
|
|
var1Input.disabled = true;
|
|
var1Label.innerHTML = "-";
|
|
var1Input.placeholder = "";
|
|
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;
|
|
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;
|
|
var3Label.innerHTML = "-";
|
|
var3Div.appendChild(var3Input);
|
|
}
|
|
}
|
|
}
|
|
function onMathChange(node) {
|
|
if (node === void 0) { node = null; }
|
|
var var1Input = document.getElementById("var1Input");
|
|
var var1Label = document.getElementById("var1Label");
|
|
var var2Input = document.getElementById("var2Input");
|
|
var var2Label = document.getElementById("var2Label");
|
|
var var3Input = document.getElementById("var3Input");
|
|
var var3Label = document.getElementById("var3Label");
|
|
var var2Value = "";
|
|
var var3Value = "";
|
|
if (node != null) {
|
|
// @ts-ignore
|
|
var2Value = node.meta.var2;
|
|
// @ts-ignore
|
|
var3Value = node.meta.var3;
|
|
}
|
|
if (var1Input.value == "round") {
|
|
var2Input.disabled = false;
|
|
var2Input.type = "number";
|
|
var2Input.value = var2Value;
|
|
var2Label.innerHTML = "Decimals";
|
|
}
|
|
else {
|
|
var2Input.disabled = true;
|
|
var2Input.type = "text";
|
|
var2Input.value = "";
|
|
var2Label.innerHTML = "-";
|
|
}
|
|
}
|
|
function onSubmitNewFilter() {
|
|
console.log("TEST");
|
|
var nameInput = document.getElementById("nameInput");
|
|
var name = nameInput.value;
|
|
var selectType = document.getElementById("typeInput");
|
|
var type = selectType.value;
|
|
var var1Input = document.getElementById("var1Input");
|
|
var var2Input = document.getElementById("var2Input");
|
|
var var3Input = document.getElementById("var3Input");
|
|
_diagram.addNode(Math.max.apply(Math, __spread(Array.from(_diagram.nodes.values()).map(function (n) { return n.id; }))) + 1, _diagram.canvas.width / 2 - _diagram.cameraX, _diagram.canvas.height / 2 - _diagram.cameraY, name, {
|
|
type: type,
|
|
var1: var1Input.value,
|
|
var2: var2Input.value,
|
|
var3: var3Input.value
|
|
});
|
|
}
|
|
function editNode(node) {
|
|
var addFilterButton = document.getElementById("filterButton");
|
|
addFilterButton.click();
|
|
var name = node.label;
|
|
// @ts-ignore
|
|
var type = node.meta.type;
|
|
// @ts-ignore
|
|
var var1 = node.meta.var1;
|
|
// @ts-ignore
|
|
var var2 = node.meta.var2;
|
|
if (var2 === undefined) {
|
|
var2 = "";
|
|
}
|
|
// @ts-ignore
|
|
var var3 = node.meta.var3;
|
|
if (var3 === undefined) {
|
|
var3 = "";
|
|
}
|
|
var nameInput = document.getElementById("nameInput");
|
|
nameInput.value = name;
|
|
var selectType = document.getElementById("typeInput");
|
|
selectType.value = type;
|
|
onTypeChange(node);
|
|
var submitButton = document.getElementById("submitFilterButton");
|
|
submitButton.innerHTML = "Save";
|
|
submitButton.onclick = function () { submitEditNode(node); };
|
|
}
|
|
function deleteNode(node) {
|
|
_diagram.nodes["delete"](node.id);
|
|
for (var i = 0; i < _diagram.connections.length; i++) {
|
|
var _a = __read(_diagram.connections[i], 2), output = _a[0], input = _a[1];
|
|
if (node.id == output.id || node.id == input.id) {
|
|
_diagram.connections.splice(i, 1);
|
|
i--;
|
|
}
|
|
}
|
|
}
|
|
function submitEditNode(node) {
|
|
var nameInput = document.getElementById("nameInput");
|
|
node.label = nameInput.value;
|
|
var selectType = document.getElementById("typeInput");
|
|
// @ts-ignore
|
|
node.meta.type = selectType.value;
|
|
var var1Input = document.getElementById("var1Input");
|
|
// @ts-ignore
|
|
node.meta.var1 = var1Input.value;
|
|
var var2Input = document.getElementById("var2Input");
|
|
// @ts-ignore
|
|
node.meta.var2 = var2Input.value;
|
|
var var3Input = document.getElementById("var3Input");
|
|
// @ts-ignore
|
|
node.meta.var3 = var3Input.value;
|
|
node.resize();
|
|
}
|
|
function saveWatch() {
|
|
var e_1, _a, e_2, _b;
|
|
var watchIdInput = document.getElementById("watch_id");
|
|
var watchId = Number(watchIdInput.value);
|
|
var filters = new Array();
|
|
try {
|
|
for (var _c = __values(_diagram.nodes.values()), _d = _c.next(); !_d.done; _d = _c.next()) {
|
|
var filter = _d.value;
|
|
filters.push({
|
|
filter_watch_id: watchId,
|
|
filter_id: filter.id,
|
|
filter_name: filter.label,
|
|
x: Math.round(filter.x),
|
|
y: Math.round(filter.y),
|
|
// @ts-ignore
|
|
filter_type: filter.meta.type,
|
|
// @ts-ignore
|
|
var1: filter.meta.var1,
|
|
// @ts-ignore
|
|
var2: filter.meta.var2,
|
|
// @ts-ignore
|
|
var3: filter.meta.var3
|
|
});
|
|
}
|
|
}
|
|
catch (e_1_1) { e_1 = { error: e_1_1 }; }
|
|
finally {
|
|
try {
|
|
if (_d && !_d.done && (_a = _c["return"])) _a.call(_c);
|
|
}
|
|
finally { if (e_1) throw e_1.error; }
|
|
}
|
|
var filtersInput = document.getElementById("filtersInput");
|
|
filtersInput.value = JSON.stringify(filters);
|
|
var connections = new Array();
|
|
try {
|
|
for (var _e = __values(_diagram.connections), _f = _e.next(); !_f.done; _f = _e.next()) {
|
|
var _g = __read(_f.value, 2), output = _g[0], input = _g[1];
|
|
connections.push({
|
|
connection_watch_id: watchId,
|
|
filter_output_id: output.id,
|
|
filter_input_id: input.id
|
|
});
|
|
}
|
|
}
|
|
catch (e_2_1) { e_2 = { error: e_2_1 }; }
|
|
finally {
|
|
try {
|
|
if (_f && !_f.done && (_b = _e["return"])) _b.call(_e);
|
|
}
|
|
finally { if (e_2) throw e_2.error; }
|
|
}
|
|
var connectionsInput = document.getElementById("connectionsInput");
|
|
connectionsInput.value = JSON.stringify(connections);
|
|
var saveWatchForm = document.getElementById("saveWatchForm");
|
|
saveWatchForm.submit();
|
|
}
|
|
function addFilterButtonClicked() {
|
|
var submitButton = document.getElementById("submitFilterButton");
|
|
submitButton.onclick = onSubmitNewFilter;
|
|
submitButton.innerHTML = "Add Filter";
|
|
}
|
|
function pageInit() {
|
|
var select = document.getElementById("typeInput");
|
|
select.onchange = function () { onTypeChange(); };
|
|
var addFilterButton = document.getElementById("filterButton");
|
|
addFilterButton.onclick = addFilterButtonClicked;
|
|
var saveButtonModal = document.getElementById("saveButtonModal");
|
|
saveButtonModal.onclick = saveWatch;
|
|
var saveButtonMain = document.getElementById("saveButtonMain");
|
|
saveButtonMain.onclick = saveWatch;
|
|
}
|
|
document.addEventListener('DOMContentLoaded', pageInit, false);
|