got watch/filter data to go code

main.go

@@ -1,6 +1,7 @@
 package main
 
 import (
+	"encoding/json"
 	"fmt"
 	"log"
 	"net/http"
@@ -82,6 +83,29 @@ func (web Web) watchView(c *gin.Context) {
 	})
 }
 
+func (web Web) watchSave(c *gin.Context) {
+	var watchId = c.PostForm("watch_id")
+
+	var watch Watch
+	web.db.Model(&Watch{}).First(&watch, watchId)
+
+	var filters []Filter
+	var filtersJson = c.PostForm("filters")
+	if err := json.Unmarshal([]byte(filtersJson), &filters); err != nil {
+		c.AbortWithError(http.StatusBadRequest, err)
+		return
+	}
+
+	var connections []FilterConnection
+	var connectionsJson = c.PostForm("connections")
+	if err := json.Unmarshal([]byte(connectionsJson), &connections); err != nil {
+		c.AbortWithError(http.StatusBadRequest, err)
+		return
+	}
+
+	c.Redirect(http.StatusSeeOther, fmt.Sprintf("/watch/view/%d", watch.ID))
+}
+
 /*
 func (web Web) viewWatch(c *gin.Context) {
 	id := c.Param("id")
@@ -299,6 +323,7 @@ func main() {
 	router.POST("/filter/delete/", web.deleteFilter)
 
 	router.GET("/watch/:id", web.watchView)
+	router.POST("/watch/save", web.watchSave)
 
 	router.Run("0.0.0.0:8080")
 }

models.go

@@ -12,20 +12,20 @@ type Watch struct {
 
 type Filter struct {
 	gorm.Model
-	WatchID uint     `form:"filter_watch_id" yaml:"filter_watch_id" binding:"required"`
+	WatchID uint     `form:"filter_watch_id" yaml:"filter_watch_id" json:"filter_watch_id" binding:"required"`
-	Name    string   `form:"filter_name" yaml:"filter_name" binding:"required" validate:"min=1"`
+	Name    string   `form:"filter_name" yaml:"filter_name" json:"filter_name" binding:"required" validate:"min=1"`
-	X       int      `form:"x" yaml:"x" validate:"default=0"`
+	X       int      `form:"x" yaml:"x" json:"x" validate:"default=0"`
-	Y       int      `form:"y" yaml:"y" validate:"default=0"`
+	Y       int      `form:"y" yaml:"y" json:"y" validate:"default=0"`
-	Type    string   `form:"filter_type" yaml:"filter_type" binding:"required" validate:"oneof=url xpath json css replace match substring"`
+	Type    string   `form:"filter_type" yaml:"filter_type" json:"filter_type" binding:"required" validate:"oneof=url xpath json css replace match substring"`
-	Var1    string   `form:"var1" yaml:"var1" binding:"required"`
+	Var1    string   `form:"var1" yaml:"var1" json:"var1" binding:"required"`
-	Var2    string   `form:"var2" yaml:"var2"`
+	Var2    string   `form:"var2" yaml:"var2" json:"var2"`
-	Var3    string   `form:"var3" yaml:"var3"`
+	Var3    string   `form:"var3" yaml:"var3" json:"var3"`
 	Results []string `gorm:"-:all"`
 }
 
 type FilterConnection struct {
 	gorm.Model
 	WatchID  uint `form:"connection_watch_id" yaml:"connection_watch_id" binding:"required"`
-	OutputID uint `form:"filter_output_id" yaml:"filter_output_id" binding:"required"`
+	OutputID uint `form:"filter_output_id" yaml:"filter_output_id" json:"filter_output_id" binding:"required"`
-	InputID  uint `form:"filter_output_id" yaml:"filter_output_id" binding:"required"`
+	InputID  uint `form:"filter_input_id" yaml:"filter_input_id" json:"filter_input_id" binding:"required"`
 }

static/edit.js

@@ -18,6 +18,17 @@ 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() {
     var select = document.getElementById("typeInput");
     var type = select.value;
@@ -161,15 +172,74 @@ function submitEditNode(node) {
     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({
+                WatchID: watchId,
+                id: filter.id,
+                filter_name: filter.label,
+                x: filter.x,
+                y: 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({
+                WatchID: 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 newFilterInit() {
+function pageInit() {
     var select = document.getElementById("typeInput");
     select.onchange = onTypeChange;
     var addFilterButton = document.getElementById("filterButton");
     addFilterButton.onclick = addFilterButtonClicked;
+    var saveButton = document.getElementById("saveButton");
+    saveButton.onclick = saveWatch;
 }
-document.addEventListener('DOMContentLoaded', newFilterInit, false);
+document.addEventListener('DOMContentLoaded', pageInit, false);

static/edit.ts

@@ -170,17 +170,60 @@ function submitEditNode(node: DiagramNode){
     node.resize();
 }
 
+function saveWatch(){
+    let watchIdInput = document.getElementById("watch_id") as HTMLInputElement;
+    let watchId = Number(watchIdInput.value);
+    let filters = new Array<Object>();
+    for (let filter of _diagram.nodes.values()){
+        filters.push({
+            WatchID: watchId,
+            id: filter.id,
+            filter_name: filter.label,
+            x: filter.x,
+            y: 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,
+        })
+    }
+    let filtersInput = document.getElementById("filtersInput") as HTMLInputElement;
+    filtersInput.value = JSON.stringify(filters);
+
+    let connections = new Array<Object>();
+    for (let [output, input] of _diagram.connections){
+        connections.push({
+            WatchID: watchId,
+            filter_output_id: output.id,
+            filter_input_id: input.id,
+        })
+    }
+    let connectionsInput = document.getElementById("connectionsInput") as HTMLInputElement;
+    connectionsInput.value = JSON.stringify(connections);
+
+    let saveWatchForm = document.getElementById("saveWatchForm") as HTMLFormElement;
+    saveWatchForm.submit();
+}
+
 function addFilterButtonClicked(){
     let submitButton = document.getElementById("submitFilterButton") as HTMLButtonElement;
     submitButton.onclick = onSubmitNewFilter
     submitButton.innerHTML = "Add Filter"
 }
 
-function newFilterInit(){
+function pageInit(){
     let select = document.getElementById("typeInput") as HTMLSelectElement;
     select.onchange = onTypeChange;
 
     let addFilterButton = document.getElementById("filterButton") as HTMLButtonElement;
     addFilterButton.onclick = addFilterButtonClicked
+
+    let saveButton = document.getElementById("saveButton") as HTMLButtonElement;
+    saveButton.onclick = saveWatch;
 }
-document.addEventListener('DOMContentLoaded', newFilterInit, false);
+
+document.addEventListener('DOMContentLoaded', pageInit, false);

templates/diagrams.html

@@ -82,8 +82,9 @@
             </div>
             <div class="modal-body">
                 <div>
-                    <form action="/watch/save" method="post">
+                    <form action="/watch/save" id="saveWatchForm" method="post">
                         <div class="mb-3 m-3 row">
+                            <input type="hidden" id="watch_id" name="watch_id" value="{{ .Watch.ID }}">
                             <label for="watchNameInput" class="col-sm-2 col-form-label">Name:</label>
                             <div class="col-sm-10 p-2">
                                 <input type="text" class="form-control" id="watchNameInput" name="watch_name" value="{{ .Watch.Name }}" placeholder="Name">
@@ -105,11 +106,11 @@
                             <div class="col-sm-10 p-2">
                                 <input type="number" class="form-control" name="interval" id="intervalInput" placeholder="">
                             </div>
-                            <input type="hidden" name="filters" value="">
+                            <input type="hidden" id="filtersInput" name="filters" value="">
-                            <input type="hidden" name="connections" value="">
+                            <input type="hidden" id="connectionsInput" name="connections" value="">
                         </div>
                     </form>
-                    <button class="btn btn-primary mt-4"  data-bs-dismiss="modal" id="submitFilterButton">Save</button>
+                    <button class="btn btn-primary mt-4" id="saveButton" data-bs-dismiss="modal" id="submitWatchButton">Save</button>
                 </div>
             </div>
         </div>
@@ -117,6 +118,7 @@
 </div>
 
 
+
 {{ end }}
 
 {{define "scripts"}}