From 5d2e77dd423d6f7923e6279d0cb092de2b323518 Mon Sep 17 00:00:00 2001 From: aceberg <1502200+aceberg@users.noreply.github.com> Date: Mon, 24 Mar 2025 00:06:04 +0700 Subject: [PATCH] Small UI updates --- frontend/src/components/Body/CardHead.tsx | 4 +- frontend/src/components/Body/TableHead.tsx | 22 ++++---- frontend/src/components/Body/TableRow.tsx | 19 ++++--- frontend/src/components/Config/Prometheus.tsx | 2 +- frontend/src/components/Filter.tsx | 8 +-- frontend/src/components/Header.tsx | 51 ++++++++----------- frontend/src/components/HistShow.tsx | 17 +++++++ frontend/src/components/HostPage/HistCard.tsx | 11 +++- frontend/src/components/MacHistory.tsx | 17 ++++--- frontend/src/components/Search.tsx | 2 +- frontend/src/functions/atstart.ts | 16 +++--- frontend/src/functions/exports.ts | 4 +- frontend/src/pages/History.tsx | 12 +++-- internal/web/public/assets/Config.js | 2 +- internal/web/public/assets/HistShow.js | 4 ++ internal/web/public/assets/History.js | 2 +- internal/web/public/assets/HostPage.js | 2 +- internal/web/public/assets/MacHistory.js | 4 -- internal/web/public/assets/index.js | 4 +- 19 files changed, 117 insertions(+), 86 deletions(-) create mode 100644 frontend/src/components/HistShow.tsx create mode 100644 internal/web/public/assets/HistShow.js delete mode 100644 internal/web/public/assets/MacHistory.js diff --git a/frontend/src/components/Body/CardHead.tsx b/frontend/src/components/Body/CardHead.tsx index ebf8c02..bd257e6 100644 --- a/frontend/src/components/Body/CardHead.tsx +++ b/frontend/src/components/Body/CardHead.tsx @@ -8,14 +8,16 @@ function CardHead() { return (
+
+
Edit names} + fallback={} > diff --git a/frontend/src/components/Body/TableHead.tsx b/frontend/src/components/Body/TableHead.tsx index 384a66e..7b4955f 100644 --- a/frontend/src/components/Body/TableHead.tsx +++ b/frontend/src/components/Body/TableHead.tsx @@ -1,24 +1,26 @@ +import { For } from "solid-js"; import { Host } from "../../functions/exports"; import { sortByAnyField } from "../../functions/sort"; function TableHead() { - const handleSort = (sortBy: keyof Host) => { - sortByAnyField(sortBy); + const handleSort = (sortBy: string) => { + sortBy === "MAC" ? sortBy = "Mac" : ''; + sortBy === "Hardware" ? sortBy = "Hw" : ''; + sortBy === "Online" ? sortBy = "Now" : ''; + sortByAnyField(sortBy as keyof Host); }; return ( - Name - Iface - IP - MAC - Hardware - Date - Known - Online + {(key) => + {key} + } diff --git a/frontend/src/components/Body/TableRow.tsx b/frontend/src/components/Body/TableRow.tsx index 64aba53..8da5d40 100644 --- a/frontend/src/components/Body/TableRow.tsx +++ b/frontend/src/components/Body/TableRow.tsx @@ -1,31 +1,28 @@ import { createSignal, Show } from "solid-js"; import { editNames } from "../../functions/exports"; import { apiEditHost } from "../../functions/api"; +import { getHosts } from "../../functions/atstart"; function TableRow(_props: any) { const [name, setName] = createSignal(_props.host.Name); - - const link = "http://" + _props.host.IP; - const edit = "/host/" + _props.host.ID; let now = ; if (_props.host.Now == 1) { now = ; }; - let known = false; - if (_props.host.Known == 1) { - known = true; - } + let known:boolean; + _props.host.Known === 1 ? known = true : known = false; const handleInput = async (n: string) => { - // console.log('Edit:', n); setName(n); await apiEditHost(_props.host.ID, name(), ''); + getHosts(); }; const handleToggle = async () => { await apiEditHost(_props.host.ID, name(), 'toggle'); + getHosts(); }; return ( @@ -41,7 +38,7 @@ function TableRow(_props: any) { {_props.host.Iface} - {_props.host.IP} + {_props.host.IP} {_props.host.Mac} {_props.host.Hw} {_props.host.Date} @@ -53,7 +50,9 @@ function TableRow(_props: any) { {now} - + + + ) diff --git a/frontend/src/components/Config/Prometheus.tsx b/frontend/src/components/Config/Prometheus.tsx index dfb4102..a7000cf 100644 --- a/frontend/src/components/Config/Prometheus.tsx +++ b/frontend/src/components/Config/Prometheus.tsx @@ -23,7 +23,7 @@ function Prometheus() { - /metrics + /metrics diff --git a/frontend/src/components/Filter.tsx b/frontend/src/components/Filter.tsx index 6039d8c..55a7a26 100644 --- a/frontend/src/components/Filter.tsx +++ b/frontend/src/components/Filter.tsx @@ -12,23 +12,23 @@ function Filter() { return (
- {(iface) => } - - - +
) diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx index a2a71a9..4560ccb 100644 --- a/frontend/src/components/Header.tsx +++ b/frontend/src/components/Header.tsx @@ -33,36 +33,27 @@ function Header() { {/* icons */} {/* theme */} ) diff --git a/frontend/src/components/HistShow.tsx b/frontend/src/components/HistShow.tsx new file mode 100644 index 0000000..4a25e71 --- /dev/null +++ b/frontend/src/components/HistShow.tsx @@ -0,0 +1,17 @@ +import { setShow, show } from "../functions/exports"; + +function HistShow(_props: any) { + + const handleSaveShow = (showStr: string) => { + localStorage.setItem(_props.name, showStr); + + setShow(+showStr); + show() == 0 ? setShow(198) : ''; + }; + + return ( + handleSaveShow(e.target.value)} placeholder="Show elements" title="Nomber of elements to show" style="max-width: 10em;"> + ) +} + +export default HistShow diff --git a/frontend/src/components/HostPage/HistCard.tsx b/frontend/src/components/HostPage/HistCard.tsx index 3f0553f..6ef9c7c 100644 --- a/frontend/src/components/HostPage/HistCard.tsx +++ b/frontend/src/components/HostPage/HistCard.tsx @@ -1,10 +1,19 @@ +import { setShow, show } from "../../functions/exports"; +import HistShow from "../HistShow" import MacHistory from "../MacHistory" function HistCard(_props: any) { + const showStr = localStorage.getItem("hostShow") as string; + setShow(+showStr); + (show() === 0 || isNaN(show())) ? setShow(570) : ''; + return (
-
History
+
+
Host History
+ +
{_props.mac !== "" ? diff --git a/frontend/src/components/MacHistory.tsx b/frontend/src/components/MacHistory.tsx index 206a3cb..451aef2 100644 --- a/frontend/src/components/MacHistory.tsx +++ b/frontend/src/components/MacHistory.tsx @@ -1,6 +1,6 @@ -import { createSignal, For, onMount } from "solid-js"; +import { createSignal, For, onMount, Show } from "solid-js"; import { apiGetHistory } from "../functions/api"; -import { Host } from "../functions/exports"; +import { Host, show } from "../functions/exports"; function MacHistory(_props: any) { @@ -11,17 +11,18 @@ function MacHistory(_props: any) { h = await apiGetHistory(_props.mac); if (h != null) { h.sort((a:Host, b:Host) => (a.Date < b.Date ? 1 : -1)); - if (_props.show > 0) { - h = h.slice(0, _props.show); - } setHist(h); } }); return ( - {h => - + {(h, index) => + + + } ) } diff --git a/frontend/src/components/Search.tsx b/frontend/src/components/Search.tsx index 8b462e0..dbe55bb 100644 --- a/frontend/src/components/Search.tsx +++ b/frontend/src/components/Search.tsx @@ -7,7 +7,7 @@ function Search() { }; return ( - handleSearch(e.target.value)} class="form-control" placeholder="Search" style="max-width: 10em;"> + handleSearch(e.target.value)} class="form-control" placeholder="Search" style="max-width: 10em;" title="Search"> ) } diff --git a/frontend/src/functions/atstart.ts b/frontend/src/functions/atstart.ts index 2e9eefa..7d5b6ee 100644 --- a/frontend/src/functions/atstart.ts +++ b/frontend/src/functions/atstart.ts @@ -12,15 +12,17 @@ export function runAtStart() { }, 60000); // 60000 ms = 1 minute } -async function getHosts() { +export async function getHosts() { const hosts = await apiGetAllHosts(); - setAllHosts(hosts); - setBkpHosts(hosts); - sortAtStart(); - filterAtStart(); - listIfaces(); - // console.log("UPD"); + if (hosts !== null && hosts.length > 0) { + setAllHosts(hosts); + setBkpHosts(hosts); + + listIfaces(); + sortAtStart(); + filterAtStart(); + } } function listIfaces() { diff --git a/frontend/src/functions/exports.ts b/frontend/src/functions/exports.ts index 4d105db..fcef127 100644 --- a/frontend/src/functions/exports.ts +++ b/frontend/src/functions/exports.ts @@ -88,4 +88,6 @@ export const [ifaces, setIfaces] = createSignal([]); export const [appConfig, setAppConfig] = createSignal(emptyConf); -export const [editNames, setEditNames] = createSignal(false); \ No newline at end of file +export const [editNames, setEditNames] = createSignal(false); + +export const [show, setShow] = createSignal(198); \ No newline at end of file diff --git a/frontend/src/pages/History.tsx b/frontend/src/pages/History.tsx index b494630..2d6390a 100644 --- a/frontend/src/pages/History.tsx +++ b/frontend/src/pages/History.tsx @@ -1,14 +1,20 @@ import { For } from "solid-js" import Filter from "../components/Filter" -import { allHosts } from "../functions/exports" +import { allHosts, setShow, show } from "../functions/exports" import MacHistory from "../components/MacHistory" +import HistShow from "../components/HistShow" function History() { + const showStr = localStorage.getItem("histShow") as string; + setShow(+showStr); + (show() === 0 || isNaN(show())) ? setShow(198) : ''; + return (
-
+
+
@@ -21,7 +27,7 @@ function History() { {host.IP} } diff --git a/internal/web/public/assets/Config.js b/internal/web/public/assets/Config.js index 7a4065d..faace6e 100644 --- a/internal/web/public/assets/Config.js +++ b/internal/web/public/assets/Config.js @@ -1 +1 @@ -import{c as Q,o as et,a as lt,t,i as l,b as c,s as G,d as W,e as d,S as V,f as e,F as J,g as rt,h as it,j as M}from"./index.js";var st=t('
About ()

● After changing Host or Port the app must be restarted

● Shoutrrr URL provides notifications to Discord, Email, Gotify, Telegram and other services. Link to documentation

● Interfaces - one or more, space separated

● Timeout (seconds) - time between scans

● Args for arp-scan - pass your own arguments to arp-scan. Enable debug log level to see resulting command. (Example: -r 1). See docs for more.

● Arp Strings - can setup scans for vlans, docker0 and etcetera. See docs for more.

● Trim History - remove history after (hours)

● Store History in DB - if off, the History will be stored only in memory and will be lost on app restart. Though, it will keep the app DB smaller and InfluxDB is recommended for long term History storage

● PG Connect URL - address to connect to PostgreSQL DB. (Example: postgres://username:password@192.168.0.1:5432/dbname?sslmode=disable). Full list of URL parameters here

● If you find this app useful, please, donate

● Commission you own app (Golang, HTML/JS, Flutter). Contact here');function nt(){const[i,n]=Q(""),[a,s]=Q("");return et(async()=>{const r=await lt();n(r),s("https://github.com/aceberg/WatchYourLAN/releases/tag/"+r)}),(()=>{var r=st(),o=r.firstChild,p=o.firstChild,b=p.nextSibling;return l(b,i),c(()=>G(b,"href",a())),r})()}var at=t("

Basic config
- +
Host
Port
Theme
Color mode
Local node-bootstrap URL
Shoutrrr URL
'),ct=t("