move api route, add visual feedback to reload button

web/api.go

 package web
 
 import (
-	"fmt"
 	"git.sch.bme.hu/mikewashere/power-distribution/models"
 	"github.com/gin-gonic/gin"
 	"net/http"
 )
 
-type visJS struct {
-	Nodes []Node `json:"nodes"`
-	Edges []Edge `json:"edges"`
-}
-
-type Node struct {
-	Id    string  `json:"id"`
-	Value float64 `json:"value"`
-	Label string  `json:"label"`
-	Shape string  `json:"shape"`
-	Color string  `json:"color"`
-}
-
-type Edge struct {
-	Id     string  `json:"id"`
-	From   string  `json:"from"`
-	To     string  `json:"to"`
-	Value  float64 `json:"value"`
-	Label  string  `json:"label"`
-	Arrows string  `json:"arrows"`
-	Color  string  `json:"color"`
-}
-
-func visJSFromGraph(g *models.GraphNode) *visJS {
-	if _, ok := g.ExtraData["power"]; !ok {
-		models.CalcPowerUsageForGraphNodes(g)
-	}
-
-	devicesMap := make(map[*models.Device]bool)
-	edges := make([]Edge, 0)
-
-	processNode(g, devicesMap, &edges)
-
-	nodes := make([]Node, len(devicesMap))
-
-	i := 0
-	for d := range devicesMap {
-		shape := "diamond"
-		color := "#97C2FC"
-		switch d.Type {
-		case "ups":
-			shape = "ellipse"
-		case "powerstrip":
-			shape = "circle"
-		case "uplink":
-			shape = "circle"
-		case "powersource":
-			shape = "circle"
-		}
-
-		nodes[i].Label = d.Name
-		nodes[i].Value = d.PowerConsumption
-		nodes[i].Id = d.Id
-		nodes[i].Shape = shape
-		nodes[i].Color = color
-		i++
-	}
-
-	return &visJS{
-		Edges: edges,
-		Nodes: nodes,
-	}
-}
-
-func api(c *gin.Context) {
+func visJSApi(c *gin.Context) {
 	g, e := models.GetAllDevicesAsTree(c)
 	if e != nil {
 		c.Error(e)
 	}
 	c.JSON(http.StatusOK, visJSFromGraph(g))
 }
-
-func processNode(g *models.GraphNode, devices map[*models.Device]bool, edges *[]Edge) {
-	devices[g.Device] = true
-	for _, e := range g.Edges {
-		power := e.Node.Device.PowerConsumption
-		if p, ok := e.Node.ExtraData["power"]; ok {
-			if p, ok := p.(float64); ok {
-				power += p
-			}
-		}
-
-		label := ""
-		if power != 0 {
-			label = fmt.Sprintf("%gW", power)
-		}
-
-		*edges = append(*edges, Edge{
-			Id:     e.Id,
-			From:   g.Device.Id,
-			To:     e.Node.Device.Id,
-			Value:  power,
-			Label:  label,
-			Arrows: "from",
-			Color:  "#4449c9",
-		})
-
-		processNode(e.Node, devices, edges)
-	}
-}

web/router.go

@@ -18,5 +18,5 @@ func init() {
 
 	Router.GET("/", renderTemplate)
 	Router.StaticFS("/static", http.FS(staticfs))
-	Router.GET("/api", api)
+	Router.GET("/api/visjs", visJSApi)
 }

web/templates/index.html

@@ -33,8 +33,12 @@
     let data = {{ .visjs }};
     let nodes = new vis.DataSet(data.nodes);
     let edges = new vis.DataSet(data.edges);
+
+    const reloadBtn = document.getElementById("reload");
     const reload = async () => {
-        const response = await fetch('/api')
+        reloadBtn.innerText = "reloading...";
+        reloadBtn.disabled = true;
+        const response = await fetch('/api/visjs')
         data = await response.json()
 
         data.nodes.forEach(e => {
@@ -59,6 +63,8 @@
         toRemoveEdges.forEach(edge => {
             edges.remove(edge)
         })
+        reloadBtn.innerText = "reload";
+        reloadBtn.disabled = false;
     }
     const container = document.getElementById("canvas");
     const options = {

web/visjs.go

+package web
+
+import (
+	"fmt"
+	"git.sch.bme.hu/mikewashere/power-distribution/models"
+)
+
+type visJS struct {
+	Nodes []Node `json:"nodes"`
+	Edges []Edge `json:"edges"`
+}
+
+type Node struct {
+	Id    string  `json:"id"`
+	Value float64 `json:"value"`
+	Label string  `json:"label"`
+	Shape string  `json:"shape"`
+	Color string  `json:"color"`
+}
+
+type Edge struct {
+	Id     string  `json:"id"`
+	From   string  `json:"from"`
+	To     string  `json:"to"`
+	Value  float64 `json:"value"`
+	Label  string  `json:"label"`
+	Arrows string  `json:"arrows"`
+	Color  string  `json:"color"`
+}
+
+func visJSFromGraph(g *models.GraphNode) *visJS {
+	if _, ok := g.ExtraData["power"]; !ok {
+		models.CalcPowerUsageForGraphNodes(g)
+	}
+
+	devicesMap := make(map[*models.Device]bool)
+	edges := make([]Edge, 0)
+
+	processNode(g, devicesMap, &edges)
+
+	nodes := make([]Node, len(devicesMap))
+
+	i := 0
+	for d := range devicesMap {
+		shape := "diamond"
+		color := "#97C2FC"
+		switch d.Type {
+		case "ups":
+			shape = "ellipse"
+		case "powerstrip":
+			shape = "circle"
+		case "uplink":
+			shape = "circle"
+		case "powersource":
+			shape = "circle"
+		}
+
+		nodes[i].Label = d.Name
+		nodes[i].Value = d.PowerConsumption
+		nodes[i].Id = d.Id
+		nodes[i].Shape = shape
+		nodes[i].Color = color
+		i++
+	}
+
+	return &visJS{
+		Edges: edges,
+		Nodes: nodes,
+	}
+}
+
+func processNode(g *models.GraphNode, devices map[*models.Device]bool, edges *[]Edge) {
+	devices[g.Device] = true
+	for _, e := range g.Edges {
+		power := e.Node.Device.PowerConsumption
+		if p, ok := e.Node.ExtraData["power"]; ok {
+			if p, ok := p.(float64); ok {
+				power += p
+			}
+		}
+
+		label := ""
+		if power != 0 {
+			label = fmt.Sprintf("%gW", power)
+		}
+
+		*edges = append(*edges, Edge{
+			Id:     e.Id,
+			From:   g.Device.Id,
+			To:     e.Node.Device.Id,
+			Value:  power,
+			Label:  label,
+			Arrows: "from",
+			Color:  "#4449c9",
+		})
+
+		processNode(e.Node, devices, edges)
+	}
+}