From c0d3fba2f20821ddbfbbdcec67d7b79b72d22cf3 Mon Sep 17 00:00:00 2001
From: lucheng <lucheng0127@outlook.com>
Date: Mon, 6 May 2024 15:06:43 +0800
Subject: [PATCH] Add endpoint monitor index page

---
 config/config.yaml |  2 +-
 pkg/server/web.go  |  4 +++
 static/index.html  | 80 ++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 85 insertions(+), 1 deletion(-)
 create mode 100644 static/index.html
diff --git a/config/config.yaml b/config/config.yaml
index c5142aa..b05c9fb 100644
--- a/config/config.yaml
+++ b/config/config.yaml
@@ -1,7 +1,7 @@
 port: 6123
 ip: 192.168.123.254/24
 bridge: br0
-log-level: debug
+log-level: info
 web:
   enable: true
   port: 8000
\ No newline at end of file
diff --git a/pkg/server/web.go b/pkg/server/web.go
index 36f6474..4108229 100644
--- a/pkg/server/web.go
+++ b/pkg/server/web.go
@@ -45,8 +45,12 @@ func (svc *webServe) Serve() {
 	gin.DefaultWriter = io.Discard
 
 	router := gin.Default()
+	router.LoadHTMLFiles("./static/index.html")
 
 	router.GET("/endpoints", listEpEntries)
+	router.GET("/", func(c *gin.Context) {
+		c.HTML(http.StatusOK, "index.html", nil)
+	})
 
 	router.Run(fmt.Sprintf(":%d", svc.port))
 }
diff --git a/static/index.html b/static/index.html
new file mode 100644
index 0000000..14f9ca0
--- /dev/null
+++ b/static/index.html
@@ -0,0 +1,80 @@
+<html>
+<head>
+   <style>
+      table, th, td {
+         border: 1px solid black;
+         border-collapse: collapse; 
+      }
+      td, th {
+         padding: 10px;
+      }
+   </style>
+</head>
+<body onload="convert();">
+   <h3> VirtualLan Endpoints: </h3>
+   <div id="container"></div>
+   <script>
+
+      setInterval(convert, 5000)
+
+      // Function to convert JSON data to HTML table
+      function convert() {
+
+         // Sample JSON data
+         let jsonData = []
+         fetch("/endpoints")
+         .then(res => res.json())
+         .then(out =>
+           {
+            jsonData = out
+
+            // Get the container element where the table will be inserted
+            let container = document.getElementById("container");
+
+            // Create the table element
+            if (document.contains(document.getElementById("table"))) {
+               document.getElementById("table").remove();
+            }
+            let table = document.createElement("table");
+            table.setAttribute("id", "table")
+
+            // Get the keys (column names) of the first object in the JSON data
+            if (jsonData) {
+            let cols = Object.keys(jsonData[0]);
+
+            // Create the header element
+            let thead = document.createElement("thead");
+            let tr = document.createElement("tr");
+
+            // Loop through the column names and create header cells
+            cols.forEach((item) => {
+               let th = document.createElement("th");
+               th.innerText = item; // Set the column name as the text of the header cell
+               tr.appendChild(th); // Append the header cell to the header row
+            });
+            thead.appendChild(tr); // Append the header row to the header
+            table.append(tr) // Append the header to the table
+
+            // Loop through the JSON data and create table rows
+            jsonData.forEach((item) => {
+               let tr = document.createElement("tr");
+
+               // Get the values of the current object in the JSON data
+               let vals = Object.values(item);
+
+               // Loop through the values and create table cells
+               vals.forEach((elem) => {
+                  let td = document.createElement("td");
+                  td.innerText = elem; // Set the value as the text of the table cell
+                  tr.appendChild(td); // Append the table cell to the table row
+               });
+               table.appendChild(tr); // Append the table row to the table
+            });
+            container.appendChild(table) // Append the table to the container element
+            }
+         })
+         .catch(err => { throw err });
+      }
+   </script>
+</body>
+</html>
