whole bunch of messing around to get something tree/graph like
This commit is contained in:
parent
202d43ef58
commit
6591a0fb79
5 changed files with 242 additions and 0 deletions
8
main.go
8
main.go
|
|
@ -140,6 +140,10 @@ func (web Web) updateQuery(c *gin.Context) {
|
|||
c.Redirect(http.StatusSeeOther, fmt.Sprintf("/query/edit/%d", +query.ID))
|
||||
}
|
||||
|
||||
func (web Web) watchTree(c *gin.Context) {
|
||||
c.HTML(http.StatusOK, "tree", gin.H{})
|
||||
}
|
||||
|
||||
func passiveBot(bot *tgbotapi.BotAPI) {
|
||||
u := tgbotapi.NewUpdate(0)
|
||||
u.Timeout = 60
|
||||
|
|
@ -207,6 +211,8 @@ func main() {
|
|||
templates.AddFromFiles("viewWatch", "templates/base.html", "templates/viewWatch.html")
|
||||
templates.AddFromFiles("editQuery", "templates/base.html", "templates/editQuery.html")
|
||||
|
||||
templates.AddFromFiles("tree", "templates/base.html", "templates/watchTree.html")
|
||||
|
||||
templates.AddFromFiles("500", "templates/base.html", "templates/500.html")
|
||||
router.HTMLRender = templates
|
||||
|
||||
|
|
@ -221,5 +227,7 @@ func main() {
|
|||
router.POST("/query/update", web.updateQuery)
|
||||
router.POST("/filter/create/", web.createFilter)
|
||||
|
||||
router.GET("/watch/tree/", web.watchTree)
|
||||
|
||||
router.Run("0.0.0.0:8080")
|
||||
}
|
||||
|
|
|
|||
67
static/graph.js
Normal file
67
static/graph.js
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
var DragPosition = /** @class */ (function () {
|
||||
function DragPosition(e) {
|
||||
this.x = 0;
|
||||
this.y = 0;
|
||||
this.oldX = 0;
|
||||
this.oldY = 0;
|
||||
this.elem = e;
|
||||
}
|
||||
return DragPosition;
|
||||
}());
|
||||
var position;
|
||||
function startDrag(e) {
|
||||
e = e || window.Event;
|
||||
e.preventDefault();
|
||||
var elem = e.target;
|
||||
while (!elem.classList.contains("node-card")) {
|
||||
if (elem.parentElement === null) {
|
||||
return;
|
||||
}
|
||||
elem = elem.parentElement;
|
||||
}
|
||||
position = new DragPosition(elem);
|
||||
position.oldX = e.clientX;
|
||||
position.oldY = e.clientY;
|
||||
document.onmouseup = stopDrag;
|
||||
document.onmousemove = dragging;
|
||||
}
|
||||
function dragging(e) {
|
||||
e = e || window.Event;
|
||||
e.preventDefault();
|
||||
position.x = position.oldX - e.clientX;
|
||||
position.y = position.oldY - e.clientY;
|
||||
position.oldX = e.clientX;
|
||||
position.oldY = e.clientY;
|
||||
position.elem.style.top = (position.elem.offsetTop - position.y) + "px";
|
||||
position.elem.style.left = (position.elem.offsetLeft - position.x) + "px";
|
||||
}
|
||||
function stopDrag(e) {
|
||||
document.onmouseup = null;
|
||||
document.onmousemove = null;
|
||||
}
|
||||
function log(e) {
|
||||
e.stopPropagation();
|
||||
console.log(e.target);
|
||||
}
|
||||
document.addEventListener("DOMContentLoaded", function (event) {
|
||||
var node_cards = document.getElementsByClassName("node-card");
|
||||
[].forEach.call(node_cards, function (node_card) {
|
||||
node_card.onmousedown = startDrag;
|
||||
});
|
||||
var inputs = document.getElementsByClassName("node-input");
|
||||
[].forEach.call(inputs, function (input) {
|
||||
input.onmousedown = log;
|
||||
});
|
||||
var c = document.getElementById("node-canvas");
|
||||
var ctx = c.getContext("2d");
|
||||
if (ctx === null) {
|
||||
return;
|
||||
}
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(50, 50);
|
||||
ctx.lineTo(1000, 1000);
|
||||
ctx.lineWidth = 10;
|
||||
// set line color
|
||||
ctx.strokeStyle = '#ff0000';
|
||||
ctx.stroke();
|
||||
});
|
||||
81
static/graph.ts
Normal file
81
static/graph.ts
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
class DragPosition {
|
||||
x: number;
|
||||
y: number;
|
||||
oldX: number;
|
||||
oldY: number;
|
||||
elem: HTMLElement;
|
||||
|
||||
constructor(e: HTMLElement){
|
||||
this.x = 0;
|
||||
this.y = 0;
|
||||
this.oldX = 0;
|
||||
this.oldY = 0;
|
||||
this.elem = e;
|
||||
}
|
||||
}
|
||||
var position: DragPosition;
|
||||
|
||||
function startDrag(e: MouseEvent){
|
||||
e = e || window.Event
|
||||
e.preventDefault()
|
||||
var elem = e.target as HTMLElement;
|
||||
while (!elem.classList.contains("node-card")){
|
||||
if (elem.parentElement === null){
|
||||
return
|
||||
}
|
||||
elem = elem.parentElement;
|
||||
}
|
||||
position = new DragPosition(elem);
|
||||
position.oldX = e.clientX;
|
||||
position.oldY = e.clientY;
|
||||
document.onmouseup = stopDrag;
|
||||
document.onmousemove = dragging;
|
||||
}
|
||||
|
||||
function dragging(e: MouseEvent){
|
||||
e = e || window.Event
|
||||
e.preventDefault();
|
||||
|
||||
position.x = position.oldX - e.clientX;
|
||||
position.y = position.oldY - e.clientY;
|
||||
position.oldX = e.clientX;
|
||||
position.oldY = e.clientY;
|
||||
position.elem.style.top = `${(position.elem.offsetTop - position.y)}px`;
|
||||
position.elem.style.left = `${(position.elem.offsetLeft - position.x)}px`;
|
||||
}
|
||||
|
||||
function stopDrag(e: MouseEvent){
|
||||
document.onmouseup = null;
|
||||
document.onmousemove = null;
|
||||
}
|
||||
|
||||
function log(e: MouseEvent){
|
||||
e.stopPropagation();
|
||||
console.log(e.target);
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function(event) {
|
||||
let node_cards = document.getElementsByClassName("node-card");
|
||||
[].forEach.call(node_cards, function(node_card: HTMLElement) {
|
||||
node_card.onmousedown = startDrag;
|
||||
});
|
||||
|
||||
let inputs = document.getElementsByClassName("node-input");
|
||||
[].forEach.call(inputs, function(input: HTMLElement){
|
||||
input.onmousedown = log;
|
||||
});
|
||||
|
||||
let c = document.getElementById("node-canvas") as HTMLCanvasElement;
|
||||
let ctx = c.getContext("2d");
|
||||
if (ctx === null){
|
||||
return
|
||||
}
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(50, 50);
|
||||
ctx.lineTo(1000, 1000);
|
||||
ctx.lineWidth = 10;
|
||||
|
||||
// set line color
|
||||
ctx.strokeStyle = '#ff0000';
|
||||
ctx.stroke();
|
||||
});
|
||||
|
|
@ -19,4 +19,30 @@
|
|||
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.node-card {
|
||||
width: 18rem;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.node-inputs {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.node-input {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.node-outputs {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.node-output {
|
||||
margin-bottom: 1rem;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
#node-canvas {
|
||||
position: absolute;
|
||||
}
|
||||
60
templates/watchTree.html
Normal file
60
templates/watchTree.html
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
{{define "content"}}
|
||||
|
||||
<canvas id="node-canvas" width="1000px" height="1000px">
|
||||
|
||||
</canvas>
|
||||
|
||||
<div class="card node-card">
|
||||
<div class="card-header text-center">
|
||||
<div class="h5">Tweakers LG C2 42"</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
https://tweakers.net/pricewatch/1799060/lg-c2-42-inch-donkerzilveren-voet-zwart.html
|
||||
</div>
|
||||
<div class="node-inputs">
|
||||
<div class="node-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="node-outputs">
|
||||
<div class="node-output">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card node-card">
|
||||
<div class="card-header text-center">
|
||||
<div class="h5">XPath</div>
|
||||
</div>
|
||||
<div class="card-header text-center">
|
||||
<code>//td[@class='shop-price']//a </code>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="node-inputs">
|
||||
<div class="node-input">
|
||||
Input
|
||||
</div>
|
||||
</div>
|
||||
<div class="node-outputs">
|
||||
<div class="node-output">
|
||||
Output
|
||||
</div>
|
||||
<div class="node-output">
|
||||
Output
|
||||
</div>
|
||||
<div class="node-output">
|
||||
Output
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
|
||||
|
||||
<path d="M 10 10 C 100 10, 100 10, 100 100" stroke="black" fill="transparent"/>
|
||||
</svg>
|
||||
|
||||
{{end}}
|
||||
|
||||
{{define "scripts"}}
|
||||
<script src="/static/graph.js"></script>
|
||||
{{end}}
|
||||
Loading…
Add table
Reference in a new issue