Edit, Filter

internal/web/api.go

@@ -1,14 +1,19 @@
 package web
 
 import (
+	// "log"
 	"net/http"
+	"strconv"
 
 	"github.com/gin-gonic/gin"
-	// "github.com/aceberg/WatchYourLAN/internal/models"
+
+	"github.com/aceberg/WatchYourLAN/internal/db"
 )
 
 func apiAll(c *gin.Context) {
 
+	allHosts = db.Select(appConfig.DBPath, "now")
+
 	c.IndentedJSON(http.StatusOK, allHosts)
 }
 
@@ -16,3 +21,27 @@ func apiHistory(c *gin.Context) {
 
 	c.IndentedJSON(http.StatusOK, histHosts)
 }
+
+func apiEdit(c *gin.Context) {
+
+	idStr := c.Param("id")
+	name := c.Param("name")
+	toggleKnown := c.Param("known")
+
+	id, _ := strconv.Atoi(idStr)
+
+	host := getHostByID(id, allHosts)
+	if host.Date != "" {
+		host.Name = name
+
+		if toggleKnown == "/toggle" {
+			host.Known = 1 - host.Known
+		}
+		// log.Println("EDIT: ", host)
+
+		db.Update(appConfig.DBPath, "now", host)
+		allHosts = db.Select(appConfig.DBPath, "now")
+	}
+
+	c.IndentedJSON(http.StatusOK, "OK")
+}

internal/web/helpers.go

@@ -0,0 +1,17 @@
+package web
+
+import (
+	"github.com/aceberg/WatchYourLAN/internal/models"
+)
+
+func getHostByID(id int, hosts []models.Host) (oneHost models.Host) {
+
+	for _, host := range hosts {
+		if host.ID == id {
+			oneHost = host
+			break
+		}
+	}
+
+	return oneHost
+}

internal/web/index.go

@@ -2,6 +2,7 @@ package web
 
 import (
 	"net/http"
+	"strings"
 
 	"github.com/gin-gonic/gin"
 
@@ -11,6 +12,7 @@ import (
 func indexHandler(c *gin.Context) {
 	var guiData models.GuiData
 	guiData.Config = appConfig
+	guiData.Themes = strings.Split(appConfig.Ifaces, " ")
 
 	c.HTML(http.StatusOK, "header.html", guiData)
 	c.HTML(http.StatusOK, "index.html", guiData)

internal/web/public/css/index.css

@@ -6,4 +6,8 @@
 }
 .my-btn:hover {
     background-color: #0000001a;
+}
+
+.hidden {
+    display: none;
 }

internal/web/public/js/filter.js

@@ -0,0 +1,27 @@
+let oldFilter = '';
+let bkpArray;
+
+function filterFunc(field, value) {
+
+    if (oldFilter == field) {
+        addrsArray = bkpArray;
+    }
+
+    switch (field) {
+        case 'iface':
+            addrsArray = addrsArray.filter((item) => item.Iface == value);
+            break;
+        case 'known':
+            addrsArray = addrsArray.filter((item) => item.Known == value);
+            break;
+        case 'line':
+            addrsArray = addrsArray.filter((item) => item.Now == value);
+            break;
+        default:
+            console.log("Filter error");
+    }
+    
+    oldFilter = field;
+
+    displayArrayData(addrsArray);
+}

internal/web/public/js/index.js

@@ -1,28 +1,29 @@
-var addrsArray = {};
+let addrsArray = {};
+let edit = "0";
 
 loadAddrs();
 
 function createHTML(addr, i) {
-    let now = '';
-
-    if (addr.Now == 0) {
-        now = `<i class="bi bi-circle-fill" style="color:var(--bs-gray-500);"></i>`;
-    } else {
+    let now = `<i class="bi bi-circle-fill" style="color:var(--bs-gray-500);"></i>`;
+    if (addr.Now == 1) {
         now = `<i class="bi bi-check-circle-fill" style="color:var(--bs-success);"></i>`;
     }
     
     let known = '';
-
     if (addr.Known == 1) {
-        known = `<button type="button" class="btn btn-success">Yes</button>`;
-    } else {
-        known = `<button type="button" class="btn btn-warning" disabled>No</button>`;
+        known = `checked`;
+    }
+
+    // Needs option to use value in js
+    let name = `<option id="name${addr.ID}" value="${addr.Name}">${addr.Name}</option>`;
+    if (edit == 1) {
+        name = `<input id="name${addr.ID}" onchange="editForm(${addr.ID},'')" type="text" class="form-control" value="${addr.Name}">`;
     }
 
     let html = `
     <tr>
         <td style="opacity: 45%;">${i}.</td>
-        <td><input name="name" type="text" class="form-control" value="${addr.Name}"></td>
+        <td>${name}</td>
         <td>${addr.Iface}</td>
         <td>
             <a href="http://${addr.IP}">${addr.IP}</a>
@@ -30,7 +31,11 @@ function createHTML(addr, i) {
         <td>${addr.Mac}</td>
         <td>${addr.Hw}</td>
         <td>${addr.Date}</td>
-        <td>${known}</td>
+        <td>
+            <div class="form-check form-switch">
+                <input onclick="editForm(${addr.ID}, 'toggle')" class="form-check-input" type="checkbox" ${known}>
+            </div>
+        </td>
         <td>${now}</td>
     </tr>
     `;
@@ -40,15 +45,29 @@ function createHTML(addr, i) {
 
 async function loadAddrs() {
     
-    let url = '/api/all';
-    let addrsMap = await (await fetch(url)).json();
-    if (addrsMap != null) {
-        addrsArray = Object.values(addrsMap);
-    }
+    const url = '/api/all';
+    addrsArray = await (await fetch(url)).json();
+    bkpArray = addrsArray;
 
     displayArrayData(addrsArray);
 }
 
 function sortBy(field) {
     sortByAny(addrsArray, field);
+}
+
+function editClick() {
+
+    edit = 1 - edit;
+    loadAddrs();
+}
+
+async function editForm(id, known) {
+    
+    const name = document.getElementById("name"+id).value;
+    const url = '/api/edit/'+id+'/'+name+'/'+known;
+
+    // console.log(url);
+
+    await fetch(url);
 }

internal/web/templates/index.html

@@ -2,11 +2,36 @@
 </head>
 <script src="/fs/public/js/index.js"></script>
 <script src="/fs/public/js/sort.js"></script>
+<script src="/fs/public/js/filter.js"></script>
 <body>
 <div class="container-lg">
   <div class="row">
     <div class="col-md mt-4 mb-4">
       <div class="card border-primary">
+        <div class="card-header">
+          <div class="d-flex justify-content-between">
+            <div class="d-flex justify-content-left gap-3">
+              <button class="btn btn-outline-primary" disabled>Filter by</button>
+              <button class="btn btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Iface</button>
+              <ul class="dropdown-menu">
+                {{ range .Themes }}
+                <li><a class="dropdown-item" onclick="filterFunc('iface', '{{ . }}')">{{ . }}</a></li>
+                {{ end }}
+              </ul>
+              <button class="btn btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Known</button>
+              <ul class="dropdown-menu">
+                <li><a class="dropdown-item" onclick="filterFunc('known', 1)">Known</a></li>
+                <li><a class="dropdown-item" onclick="filterFunc('known', 0)">Unknown</a></li>
+              </ul>
+              <button class="btn btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Online</button>
+              <ul class="dropdown-menu">
+                <li><a class="dropdown-item" onclick="filterFunc('line', 1)">Online</a></li>
+                <li><a class="dropdown-item" onclick="filterFunc('line', 0)">Offline</a></li>
+              </ul>
+            </div>
+            <button class="btn btn-outline-primary" id="edit" onclick="editClick()">Edit names</button>
+          </div>
+        </div>
         <div class="card-body table-responsive">
           <table class="table table-striped">
             <thead>

internal/web/webgui.go

@@ -42,8 +42,9 @@ func Gui(dirPath, nodePath string) {
 
 	router.StaticFS("/fs/", http.FS(pubFS)) // public
 
-	router.GET("/api/all", apiAll)         // api.go
-	router.GET("/api/history", apiHistory) // api.go
+	router.GET("/api/all", apiAll)                    // api.go
+	router.GET("/api/history", apiHistory)            // api.go
+	router.GET("/api/edit/:id/:name/*known", apiEdit) // api.go
 
 	router.GET("/", indexHandler)           // index.go
 	router.GET("/history/", historyHandler) // index.go