History js

internal/conf/getconfig.go

@@ -16,10 +16,10 @@ func Get(path string) (config models.Conf) {
 	viper.SetDefault("COLOR", "dark")
 	viper.SetDefault("NODEPATH", "")
 	// viper.SetDefault("SCANER", "arpscan")
-	viper.SetDefault("ARPARGS", "")
+	viper.SetDefault("ARP_ARGS", "")
 	viper.SetDefault("IFACES", "")
 	viper.SetDefault("TIMEOUT", 60)
-	viper.SetDefault("IGNOREIP", "no")
+	viper.SetDefault("TRIM_HIST", 48)
 
 	viper.SetConfigFile(path)
 	viper.SetConfigType("yaml")
@@ -34,10 +34,10 @@ func Get(path string) (config models.Conf) {
 	config.Color = viper.Get("COLOR").(string)
 	config.NodePath = viper.Get("NODEPATH").(string)
 	// config.Scaner = viper.Get("SCANER").(string)
-	config.ArpArgs = viper.Get("ARPARGS").(string)
+	config.ArpArgs = viper.Get("ARP_ARGS").(string)
 	config.Ifaces = viper.Get("IFACES").(string)
 	config.Timeout = viper.GetInt("TIMEOUT")
-	config.IgnoreIP = viper.Get("IGNOREIP").(string)
+	config.TrimHist = viper.GetInt("TRIM_HIST")
 
 	return config
 }
@@ -54,10 +54,10 @@ func Write(config models.Conf) {
 	viper.Set("COLOR", config.Color)
 	viper.Set("NODEPATH", config.NodePath)
 	// viper.Set("SCANER", config.Scaner)
-	viper.Set("ARPARGS", config.ArpArgs)
+	viper.Set("ARP_ARGS", config.ArpArgs)
 	viper.Set("IFACES", config.Ifaces)
 	viper.Set("TIMEOUT", config.Timeout)
-	viper.Set("IGNOREIP", config.IgnoreIP)
+	viper.Set("TRIM_HIST", config.TrimHist)
 
 	err := viper.WriteConfig()
 	check.IfError(err)

internal/models/models.go

@@ -14,7 +14,7 @@ type Conf struct {
 	// Scaner   string
 	ArpArgs  string
 	Timeout  int
-	IgnoreIP string
+	TrimHist int
 }
 
 // Host - one host

internal/web/config.go

@@ -3,6 +3,7 @@ package web
 import (
 	"log/slog"
 	"net/http"
+	"strconv"
 
 	"github.com/gin-gonic/gin"
 
@@ -34,10 +35,14 @@ func saveConfigHandler(c *gin.Context) {
 	appConfig.Theme = c.PostForm("theme")
 	appConfig.Color = c.PostForm("color")
 	appConfig.NodePath = c.PostForm("node")
-	appConfig.IgnoreIP = c.PostForm("ignore")
 	appConfig.ArpArgs = c.PostForm("arpargs")
 	appConfig.Ifaces = c.PostForm("ifaces")
 
+	timeout := c.PostForm("timeout")
+	trimHist := c.PostForm("trim")
+	appConfig.Timeout, _ = strconv.Atoi(timeout)
+	appConfig.TrimHist, _ = strconv.Atoi(trimHist)
+
 	conf.Write(appConfig)
 
 	slog.Info("writing new config to " + appConfig.ConfPath)

internal/web/public/js/hist-html.js

@@ -0,0 +1,20 @@
+
+function getHistHTML(hist) {
+
+    let html = '', col, title;
+
+    for (let h of hist) {
+        if (h.Now != 0) {
+            col = `fill:var(--bs-success);stroke:var(--bs-primary);`;
+        } else {
+            col = `fill:var(--bs-gray-500);stroke:var(--bs-primary);`;
+        }
+        title = `title="Date: ${h.Date}\nIface: ${h.Iface}\nIP: ${h.IP}\nKnown: ${h.Known}"`;
+
+        html = html + `<i ${title}><svg width="10" height="20">
+            <rect width="10" height="20" style="${col}"/>
+            Sorry, your browser does not support inline SVG.  
+        </svg></i>`;
+    }
+    return html;
+}

internal/web/public/js/history.js

@@ -1,46 +1,60 @@
-var addrsArray = {};
+let show = 500;
+let addrsArray;
 
 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 {
-        now = `<i class="bi bi-check-circle-fill" style="color:var(--bs-success);"></i>`;
-    }
-    
-    let html = `
-    <tr>
-        <td style="opacity: 45%;">${i}.</td>
-        <td>${addr.Name}</td>
-        <td>${addr.Iface}</td>
-        <td>
-            <a href="http://${addr.IP}">${addr.IP}</a>
-        </td>
-        <td>${addr.Mac}</td>
-        <td>${addr.Hw}</td>
-        <td>${addr.Date}</td>
-        <td>${addr.Known}</td>
-        <td>${now}</td>
-    </tr>
-    `;
-    
-    return html;
-}
-
 async function loadAddrs() {
     
-    let url = '/api/history';
+    const n = localStorage.getItem("histShow");
-    let addrsMap = await (await fetch(url)).json();
+    if (n != null) {
-    if (addrsMap != null) {
+        show = n;
-        addrsArray = Object.values(addrsMap);
     }
 
-    displayArrayData(addrsArray);
+    const url = '/api/all';
+    addrsArray = await (await fetch(url)).json();
+
+    loadHistory();
 }
 
-function sortBy(field) {
+async function loadHistory() {
-    sortByAny(addrsArray, field);
+    
+    let tr, td, url, hist;
+    let i = 0;
+
+    document.getElementById('showHist').innerHTML = '';
+
+    for (let a of addrsArray) {
+        url = '/api/history/'+a.Mac;
+        hist = await (await fetch(url)).json();
+        if (show > 0) {
+            hist = hist.slice(0, show);
+        }
+
+        td = getHistHTML(hist); // hist-html.js
+        i = i + 1;
+
+        tr = `
+        <tr>
+            <td style="opacity: 45%;">${i}.</td>
+            <td>
+                <p>${a.Name}</p>
+                <p><a href="http://${a.IP}" target="blank">${a.IP}</a></p>
+                <p><a href="/host/${a.ID}">${a.Mac}</a></p>
+            </td>
+            <td>${td}</td>
+        </tr>`;
+
+        document.getElementById('showHist').insertAdjacentHTML('beforeend', tr);
+    }
+}
+
+function showHist(n) {
+    show = n;
+    localStorage.setItem("histShow", show);
+    loadHistory();
+}
+
+function manualShow() {
+    const n = document.getElementById('man-show').value;
+    showHist(n);
 }

internal/web/public/js/host.js

@@ -1,3 +1,5 @@
+let show = 500;
+let mac;
 
 async function delHost(id) {
     
@@ -8,11 +10,20 @@ async function delHost(id) {
     window.location.href = '/';
 }
 
-async function loadHistory(mac) {
+async function loadHistory(m) {
 
+    const n = localStorage.getItem("hostShow");
+    if (n != null) {
+        show = n;
+    }
+    
+    mac = m;
     const url = '/api/history/'+mac;
 
     let hist = await (await fetch(url)).json();
+    if (show > 0) {
+        hist = hist.slice(0, show);
+    }
 
     // console.log("HIST", hist);
     displayHistory(hist);
@@ -20,22 +31,16 @@ async function loadHistory(mac) {
 
 function displayHistory(hist) {
 
-    let html, col, title;
+    document.getElementById('showHist').innerHTML = getHistHTML(hist); // hist-html.js
-
+}
-    for (let h of hist) {
+
-        if (h.Now != 0) {
+function showHist(n) {
-            col = `fill:var(--bs-success);stroke:var(--bs-primary);`;
+    show = n;
-        } else {
+    localStorage.setItem("hostShow", show);
-            col = `fill:var(--bs-gray-500);stroke:var(--bs-primary);`;
+    loadHistory(mac);
-        }
+}
-        title = `title="Date: ${h.Date}\nIface: ${h.Iface}\nIP: ${h.IP}\nKnown: ${h.Known}"`;
+
-
+function manualShow() {
-        html = `<i ${title}><svg width="10" height="20">
+    const n = document.getElementById('man-show').value;
-            <rect width="10" height="20" style="${col}"/>
+    showHist(n);
-            Sorry, your browser does not support inline SVG.  
-        </svg></i>`;
-
-        // html = `<i class="bi bi-file-fill" style="${col}" ${title}></i>`;
-        document.getElementById('showHist').insertAdjacentHTML('beforeend', html);
-    }
 }

internal/web/public/js/index.js

@@ -26,7 +26,7 @@ function createHTML(addr, i) {
         <td>${name}</td>
         <td>${addr.Iface}</td>
         <td>
-            <a href="http://${addr.IP}">${addr.IP}</a>
+            <a href="http://${addr.IP}" target="blank">${addr.IP}</a>
         </td>
         <td><a href="/host/${addr.ID}">${addr.Mac}</a></td>
         <td>${addr.Hw}</td>

internal/web/public/js/old_history.js

@@ -1,45 +0,0 @@
-var histArray = {};
-
-loadHistory();
-
-function createHTML(hist, i) {
-    
-    let allState = "";
-    let color = "";
-
-    for (let state of hist.State){
-        if (state.State) {
-            color = `bi-check-circle-fill" style="color:var(--bs-success);"`;
-        } else {
-            color = `bi-dash-circle-fill" style="color:var(--bs-danger);"`;
-        }
-        allState = allState + `<i class="bi ${color} title="${state.Date}"></i>`;
-    }
-
-    let html = `
-    <tr>
-        <td style="opacity: 45%;">${i}.</td>
-        <td><a href="/scan/?addr=${hist.Addr}">${hist.Name}</a></td>
-        <td><a href="/scan/?addr=${hist.Addr}">${hist.Addr}</a></td>
-        <td><a href="http://${hist.Addr}:${hist.Port}">${hist.Port}</a></td>
-        <td><a href="http://${hist.Addr}:${hist.Port}">${hist.PortName}</a></td>
-        <td>${allState}</td>
-    </tr>`;
-    
-    return html;
-}
-
-async function loadHistory() {
-    
-    let url = '/api/history';
-    let histMap = await (await fetch(url)).json();
-    if (histMap != null) {
-        histArray = Object.values(histMap);
-    }
-
-    displayArrayData(histArray);
-}
-
-function sortBy(field) {
-    sortByAny(histArray, field);
-}

internal/web/templates/config.html

@@ -43,17 +43,17 @@
                   <td><input name="ifaces" type="text" class="form-control" value="{{ .Config.Ifaces }}"></td>
                 </tr>
                 <tr>
-                  <td>Ignore IP</td>
+                  <td>Timeout</td>
-                  <td><select name="ignore" class="form-select">
+                  <td><input name="timeout" type="number" class="form-control" value="{{ .Config.Timeout }}"></td>
-                    <option selected>{{ .Config.IgnoreIP }}</option>
-                    <option value="yes">yes</option>
-                    <option value="no">no</option>
-                  </select></td>
                 </tr>
                 <tr>
                   <td>Args for arpscan</td>
                   <td><input name="arpargs" type="text" class="form-control" value="{{ .Config.ArpArgs }}"></td>
                 </tr>
+                <tr>
+                  <td>Trim History (hours)</td>
+                  <td><input name="trim" type="number" class="form-control" value="{{ .Config.TrimHist }}"></td>
+                </tr>
                 <tr>
                   <td><button type="submit" class="btn btn-primary">Save</button></td>
                   <td></td>

internal/web/templates/history.html

@@ -1,27 +1,35 @@
 {{ define "history.html" }}
 </head>
 <script src="/fs/public/js/history.js"></script>
-<script src="/fs/public/js/sort.js"></script>
+<script src="/fs/public/js/hist-html.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="input-group">
+            <button class="btn btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Show</button>
+              <ul class="dropdown-menu">
+                <li><a class="dropdown-item" onclick="showHist(500)">500</a></li>
+                <li><a class="dropdown-item" onclick="showHist(1000)">1000</a></li>
+                <li><a class="dropdown-item" onclick="showHist(2000)">2000</a></li>
+                <li><a class="dropdown-item" onclick="showHist(5000)">5000</a></li>
+                <li><a class="dropdown-item" onclick="showHist(0)">All</a></li>
+              </ul>
+            <input class="form-control" id="man-show" onchange="manualShow()" placeholder="Show elements" style="max-width: 10em;">
+          </div>
+        </div>
         <div class="card-body table-responsive">
           <table class="table table-striped">
             <thead>
               <th style="width: 3em;"></th>
-              <th>Name <i class="bi bi-sort-down-alt my-btn" onclick="sortBy('Name')"></i></th>
+              <th>Host</th>
-              <th>Iface <i class="bi bi-sort-down-alt my-btn" onclick="sortBy('Iface')"></i></th>
+              <th>History</th>
-              <th>IP <i class="bi bi-sort-down-alt my-btn" onclick="sortBy('IP')"></i></th>
-              <th>MAC <i class="bi bi-sort-down-alt my-btn" onclick="sortBy('Mac')"></i></th>
-              <th>Hardware <i class="bi bi-sort-down-alt my-btn" onclick="sortBy('Hw')"></i></th>
-              <th>Date <i class="bi bi-sort-down-alt my-btn" onclick="sortBy('Date')"></i></th>
-              <th>Known <i class="bi bi-sort-down-alt my-btn" onclick="sortBy('Known')"></i></th>
-              <th>Online <i class="bi bi-sort-down-alt my-btn" onclick="sortBy('Now')"></i></th>
             </thead>
-            <tbody id="tBody"></tbody> 
+            <tbody id="showHist"></tbody>
-            <!-- index.js -->
+            <!-- history.js -->
           </table>
         </div>
       </div>

internal/web/templates/host.html

@@ -2,6 +2,7 @@
 
 <script src="/fs/public/js/host-scan.js"></script>
 <script src="/fs/public/js/host.js"></script>
+<script src="/fs/public/js/hist-html.js"></script>
 <body>
   <div class="container-lg">
     <div class="row">
@@ -91,7 +92,19 @@
     <div class="row">
       <div class="col-md mb-4">
         <div class="card border-primary">
-          <div class="card-header">History</div>
+          <div class="card-header">
+            <div class="input-group">
+              <button class="btn btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Show</button>
+                <ul class="dropdown-menu">
+                  <li><a class="dropdown-item" onclick="showHist(500)">500</a></li>
+                  <li><a class="dropdown-item" onclick="showHist(1000)">1000</a></li>
+                  <li><a class="dropdown-item" onclick="showHist(2000)">2000</a></li>
+                  <li><a class="dropdown-item" onclick="showHist(5000)">5000</a></li>
+                  <li><a class="dropdown-item" onclick="showHist(0)">All</a></li>
+                </ul>
+              <input class="form-control" id="man-show" onchange="manualShow()" placeholder="Show elements" style="max-width: 10em;">
+            </div>
+          </div>
           <div class="card-body">
             <div id="showHist"></div>
           </div>