diff --git a/main.go b/main.go index 6b976ff..008292d 100644 --- a/main.go +++ b/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") } diff --git a/static/graph.js b/static/graph.js new file mode 100644 index 0000000..90b49f6 --- /dev/null +++ b/static/graph.js @@ -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(); +}); diff --git a/static/graph.ts b/static/graph.ts new file mode 100644 index 0000000..29c02fb --- /dev/null +++ b/static/graph.ts @@ -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(); +}); \ No newline at end of file diff --git a/static/style.css b/static/style.css index 7d99361..e9d4a86 100644 --- a/static/style.css +++ b/static/style.css @@ -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; } \ No newline at end of file diff --git a/templates/watchTree.html b/templates/watchTree.html new file mode 100644 index 0000000..55dda42 --- /dev/null +++ b/templates/watchTree.html @@ -0,0 +1,60 @@ +{{define "content"}} + + + + + +
+
+
Tweakers LG C2 42"
+
+
+ https://tweakers.net/pricewatch/1799060/lg-c2-42-inch-donkerzilveren-voet-zwart.html +
+
+
+
+
+
+
+
+
+
+ +
+
+
XPath
+
+
+ //td[@class='shop-price']//a +
+
+
+
+ Input +
+
+
+
+ Output +
+
+ Output +
+
+ Output +
+
+
+
+ + + + + + +{{end}} + +{{define "scripts"}} + +{{end}} \ No newline at end of file