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

can add filter node to diagram

Browse source
This commit is contained in:
BroodjeAap 2022-09-18 12:34:20 +00:00
parent bbe3500928
commit 6c32004b37
5 changed files with 265 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
static/diagram.js
View file

@ -1,14 +1,17 @@
var DiagramNode = /** @class */ (function () {
function DiagramNode(id, x, y, width, height, label) {
function DiagramNode(id, x, y, width, height, label, meta) {
if (meta === void 0) { meta = {}; }
this.hover = false;
this.inputHover = false;
this.outputHover = false;
this.meta = {};
this.id = id;
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.label = label;
this.meta = meta;
}
DiagramNode.prototype.pointInNode = function (x, y) {
if (x < this.x) {
@ -320,10 +323,11 @@ var Diagrams = /** @class */ (function () {
this.ctx.fill();
}
};
Diagrams.prototype.addNode = function (id, x, y, label) {
Diagrams.prototype.addNode = function (id, x, y, label, meta) {
if (meta === void 0) { meta = {}; }
var textSize = this.ctx.measureText(label);
var textHeight = 2 * (textSize.actualBoundingBoxAscent + textSize.actualBoundingBoxDescent);
this.nodes.push(new DiagramNode(id, x, y, textSize.width + textHeight, textHeight, label));
this.nodes.push(new DiagramNode(id, x, y, textSize.width + textHeight, textHeight, label, meta));
};
Diagrams.prototype.addConnection = function (A, B) {
this.connections.push([A, B]);

8
static/diagram.ts
View file

@ -13,6 +13,8 @@ class DiagramNode {
parents: Array<DiagramNode>;
children: Array<DiagramNode>;
meta: Object = {};
constructor(
id: number,
x: number,
@ -20,6 +22,7 @@ class DiagramNode {
width: number,
height: number,
label: string,
meta: Object = {}
){
this.id = id;
this.x = x;
@ -27,6 +30,7 @@ class DiagramNode {
this.width = width;
this.height = height;
this.label = label;
this.meta = meta;
}
pointInNode(x: number, y: number){
@ -384,10 +388,10 @@ class Diagrams {
}
}
addNode(id: number, x: number, y: number, label: string){
addNode(id: number, x: number, y: number, label: string, meta: Object = {}){
let textSize = this.ctx.measureText(label);
let textHeight = 2 * (textSize.actualBoundingBoxAscent + textSize.actualBoundingBoxDescent);
this.nodes.push(new DiagramNode(id, x, y, textSize.width + textHeight, textHeight, label));
this.nodes.push(new DiagramNode(id, x, y, textSize.width + textHeight, textHeight, label, meta));
}
addConnection(A: DiagramNode, B: DiagramNode){

90
static/edit.js Normal file
View file

@ -0,0 +1,90 @@
function onTypeChange() {
var select = document.getElementById("typeInput");
var type = select.value;
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");
switch (type) {
case "xpath": {
var1Label.innerHTML = "XPath";
var1Input.placeholder = "//a[@class='price";
var2Input.disabled = true;
var2Input.placeholder = "";
var2Label.innerHTML = "-";
var3Input.disabled = true;
var3Input.placeholder = "";
var3Label.innerHTML = "-";
break;
}
case "json": {
var1Label.innerHTML = "JSON";
var1Input.placeholder = "products.#.price";
var2Input.disabled = true;
var2Label.innerHTML = "-";
var3Input.disabled = true;
var3Label.innerHTML = "-";
break;
}
case "css": {
var1Label.innerHTML = "Selector";
var1Input.placeholder = ".price";
var2Input.disabled = true;
var2Label.innerHTML = "-";
var3Input.disabled = true;
var3Label.innerHTML = "-";
break;
}
case "replace": {
var1Label.innerHTML = "Regex";
var1Input.placeholder = "So[mM]e(thing|where)";
var2Input.disabled = false;
var2Label.innerHTML = "With";
var3Input.disabled = true;
var3Label.innerHTML = "-";
break;
}
case "match": {
var1Label.innerHTML = "Regex";
var1Input.placeholder = "So[mM]e(thing|where)";
var2Input.disabled = true;
var2Label.innerHTML = "-";
var3Input.disabled = true;
var3Label.innerHTML = "-";
break;
}
case "substring": {
var1Label.innerHTML = "Substring";
var1Input.placeholder = ":20,25-40,45,47,49,-20:";
var2Input.disabled = true;
var2Label.innerHTML = "-";
var3Input.disabled = true;
var3Label.innerHTML = "-";
break;
}
}
}
function onSubmitNewFilter() {
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, _diagram.nodes.map(function (n) { return n.id; })) + 1, _diagram.canvas.width / 2, _diagram.canvas.height / 2, name, {
type: type,
var1: var1Input.value,
var2: var2Input.value,
var3: var3Input.value
});
}
function newFilterInit() {
var select = document.getElementById("typeInput");
select.onchange = onTypeChange;
var button = document.getElementById("newFilterButton");
button.onclick = onSubmitNewFilter;
}
document.addEventListener('DOMContentLoaded', newFilterInit, false);

105
static/edit.ts Normal file
View file

@ -0,0 +1,105 @@
function onTypeChange(){
let select = document.getElementById("typeInput") as HTMLSelectElement;
let type = select.value;
let var1Input = document.getElementById("var1Input") as HTMLInputElement;
let var1Label = document.getElementById("var1Label") as HTMLLabelElement;
let var2Input = document.getElementById("var2Input") as HTMLInputElement;
let var2Label = document.getElementById("var2Label") as HTMLLabelElement;
let var3Input = document.getElementById("var3Input") as HTMLInputElement;
let var3Label = document.getElementById("var3Label") as HTMLLabelElement;
switch(type){
case "xpath": {
var1Label.innerHTML = "XPath";
var1Input.placeholder = "//a[@class='price";
var2Input.disabled = true;
var2Input.placeholder = ""
var2Label.innerHTML = "-";
var3Input.disabled = true;
var3Input.placeholder = ""
var3Label.innerHTML = "-";
break;
}
case "json": {
var1Label.innerHTML = "JSON";
var1Input.placeholder = "products.#.price";
var2Input.disabled = true;
var2Label.innerHTML = "-";
var3Input.disabled = true;
var3Label.innerHTML = "-";
break;
}
case "css": {
var1Label.innerHTML = "Selector";
var1Input.placeholder = ".price";
var2Input.disabled = true;
var2Label.innerHTML = "-";
var3Input.disabled = true;
var3Label.innerHTML = "-";
break;
}
case "replace": {
var1Label.innerHTML = "Regex";
var1Input.placeholder = "So[mM]e(thing|where)";
var2Input.disabled = false;
var2Label.innerHTML = "With";
var3Input.disabled = true;
var3Label.innerHTML = "-";
break;
}
case "match": {
var1Label.innerHTML = "Regex";
var1Input.placeholder = "So[mM]e(thing|where)";
var2Input.disabled = true;
var2Label.innerHTML = "-";
var3Input.disabled = true;
var3Label.innerHTML = "-";
break;
}
case "substring": {
var1Label.innerHTML = "Substring";
var1Input.placeholder = ":20,25-40,45,47,49,-20:";
var2Input.disabled = true;
var2Label.innerHTML = "-";
var3Input.disabled = true;
var3Label.innerHTML = "-";
break;
}
}
}
function onSubmitNewFilter(){
let nameInput = document.getElementById("nameInput") as HTMLInputElement;
let name = nameInput.value;
let selectType = document.getElementById("typeInput") as HTMLSelectElement;
let type = selectType.value;
let var1Input = document.getElementById("var1Input") as HTMLInputElement;
let var2Input = document.getElementById("var2Input") as HTMLInputElement;
let var3Input = document.getElementById("var3Input") as HTMLInputElement;
_diagram.addNode(
Math.max(..._diagram.nodes.map(n => n.id)) + 1,
_diagram.canvas.width / 2,
_diagram.canvas.height / 2,
name, {
type: type,
var1: var1Input.value,
var2: var2Input.value,
var3: var3Input.value,
})
}
function newFilterInit(){
let select = document.getElementById("typeInput") as HTMLSelectElement;
select.onchange = onTypeChange;
let button = document.getElementById("newFilterButton") as HTMLButtonElement;
button.onclick = onSubmitNewFilter
}
document.addEventListener('DOMContentLoaded', newFilterInit, false);

57
templates/diagrams.html
View file

@ -1,5 +1,6 @@
{{define "head"}}
<script src="/static/diagram.js"></script>
<script src="/static/edit.js"></script>
{{ end }}
{{define "content"}}
<div class="canvas_parent">
@ -9,6 +10,62 @@
</div>
{{ end }}
{{ define "left" }}
<div>
<button type="button" class="btn btn-primary btn-block btn-sm" data-bs-toggle="modal" data-bs-target="#newFilterModal">
Add Filter
</button>
</div>
<div class="modal fade" id="newFilterModal" tabindex="-1" aria-labelledby="newFilterModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="newFilterModalLabel">Add Filter</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div>
<form action="/filter/create" method="post">
<div class="mb-3 m-3 row">
<label for="nameInput" class="col-sm-2 col-form-label">Name:</label>
<div class="col-sm-10 p-2">
<input type="text" class="form-control" name="filter_name" id="nameInput" placeholder="Name">
</div>
<label for="typeInput" class="col-sm-2 col-form-label">Type:</label>
<div class="col-sm-10 p-2">
<select id="typeInput" class="form-control" name="type">
<option value="xpath" selected="true">XPath</option>
<option value="json">JSON</option>
<option value="css">CSS</option>
<option value="replace">Replace</option>
<option value="match">Match</option>
<option value="substring">Substring</option>
</select>
</div>
<label for="var1" id="var1Label" class="col-sm-2 col-form-label">XPath:</label>
<div class="col-sm-10 p-2">
<input type="text" class="form-control" name="var1" id="var1Input" placeholder="//a[@class='price']">
</div>
<label for="var2" id="var2Label" class="col-sm-2 col-form-label">-</label>
<div class="col-sm-10 p-2">
<input type="text" class="form-control" name="var2" id="var2Input" placeholder="" disabled>
</div>
<label for="var3" id="var3Label" class="col-sm-2 col-form-label">-</label>
<div class="col-sm-10 p-2">
<input type="text" class="form-control" name="var3" id="var3Input" placeholder="" disabled>
</div>
</div>
</form>
<button class="btn btn-primary mt-4" data-bs-dismiss="modal" id="newFilterButton">Add Filter</button>
</div>
</div>
</div>
</div>
</div>
{{ end }}
{{define "scripts"}}
<script>
var diagrams;