Header
This commit is contained in:
aceberg
parent
a5663ec7d4
commit
545eac368e
17 changed files with 124 additions and 61 deletions
|
|
@ -5,9 +5,6 @@
|
|||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>WatchYourLAN</title>
|
||||
<link rel="stylesheet" href="http://192.168.2.3:8850/node_modules/bootstrap-icons/font/bootstrap-icons.css">
|
||||
<link href="http://192.168.2.3:8850/node_modules/bootswatch/dist/sand/bootstrap.min.css" rel="stylesheet">
|
||||
<script src="http://192.168.2.3:8850/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import './App.css';
|
|||
import { runAtStart } from './functions/atstart';
|
||||
|
||||
import Body from './pages/Body';
|
||||
import Header from './components/Header';
|
||||
|
||||
function App() {
|
||||
|
||||
|
|
@ -14,6 +15,8 @@ function App() {
|
|||
const HostPage = lazy(() => import("./pages/HostPage"));
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header></Header>
|
||||
<div class="container-lg">
|
||||
<div class="row">
|
||||
<div class="col-md mt-4 mb-4">
|
||||
|
|
@ -24,6 +27,7 @@ function App() {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import { Show } from "solid-js";
|
||||
import { editNames, setEditNames } from "../functions/exports";
|
||||
import Filter from "./Filter";
|
||||
import Search from "./Search";
|
||||
import { editNames, setEditNames } from "../../functions/exports";
|
||||
import Filter from "../Filter";
|
||||
import Search from "../Search";
|
||||
|
||||
function BodyCardHead() {
|
||||
function CardHead() {
|
||||
|
||||
return (
|
||||
<div class="row">
|
||||
|
|
@ -25,4 +25,4 @@ function BodyCardHead() {
|
|||
)
|
||||
}
|
||||
|
||||
export default BodyCardHead
|
||||
export default CardHead
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import { Host } from "../functions/exports";
|
||||
import { sortByAnyField } from "../functions/sort";
|
||||
import { Host } from "../../functions/exports";
|
||||
import { sortByAnyField } from "../../functions/sort";
|
||||
|
||||
function TableHead() {
|
||||
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import { createSignal, Show } from "solid-js";
|
||||
import { editNames } from "../functions/exports";
|
||||
import { apiEditHost } from "../functions/api";
|
||||
import { editNames } from "../../functions/exports";
|
||||
import { apiEditHost } from "../../functions/api";
|
||||
|
||||
function TableRow(_props: any) {
|
||||
|
||||
73
frontend/src/components/Header.tsx
Normal file
73
frontend/src/components/Header.tsx
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
import { createSignal } from "solid-js";
|
||||
import { Conf } from "../functions/exports";
|
||||
|
||||
function Header() {
|
||||
|
||||
const [themePath, setThemePath] = createSignal('');
|
||||
const [iconsPath, setIconsPath] = createSignal('');
|
||||
|
||||
const setCurrentTheme = (appConfig:Conf) => {
|
||||
const theme = appConfig.Theme?appConfig.Theme:"sand";
|
||||
const color = appConfig.Color?appConfig.Color:"dark";
|
||||
|
||||
if (appConfig.NodePath == '') {
|
||||
setThemePath("https://cdn.jsdelivr.net/npm/aceberg-bootswatch-fork@v5.3.3-2/dist/"+theme+"/bootstrap.min.css");
|
||||
setIconsPath("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css");
|
||||
} else {
|
||||
setThemePath(appConfig.NodePath+"/node_modules/bootswatch/dist/"+theme+"/bootstrap.min.css");
|
||||
setIconsPath(appConfig.NodePath+"/node_modules/bootstrap-icons/font/bootstrap-icons.css");
|
||||
}
|
||||
|
||||
document.documentElement.setAttribute("data-bs-theme", color);
|
||||
color === "dark"
|
||||
? document.documentElement.style.setProperty('--transparent-light', '#ffffff15')
|
||||
: document.documentElement.style.setProperty('--transparent-light', '#00000015');
|
||||
}
|
||||
setCurrentTheme({
|
||||
Theme: "sand",
|
||||
Color: "dark",
|
||||
Timeout: 120,
|
||||
NodePath: "",
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<link rel="stylesheet" href={iconsPath()}></link> {/* icons */}
|
||||
<link rel="stylesheet" href={themePath()}></link> {/* theme */}
|
||||
<nav class="navbar navbar-expand-md navbar-dark bg-primary">
|
||||
<div class="container-lg">
|
||||
<a class="navbar-brand" href="/">
|
||||
<img src="/fs/public/favicon.png" style="width: 2em"/>
|
||||
</a>
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<button class="btn navbar-toggler nav-link active fs-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<i class="bi bi-list"></i>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="collapse navbar-collapse" id="navbarContent">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-md-0">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" target="_self" href="/config/">Config</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/history/">History</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active fs-3 ms-md-2" target="_blank" href="https://github.com/aceberg/WatchYourLAN"><i class="bi bi-github"></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</>
|
||||
)
|
||||
};
|
||||
|
||||
export default Header
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import { apiDelHost, apiEditHost } from "../functions/api";
|
||||
import { currentHost } from "../functions/exports";
|
||||
import { apiDelHost, apiEditHost } from "../../functions/api";
|
||||
import { currentHost } from "../../functions/exports";
|
||||
|
||||
function HostPageHost() {
|
||||
function HostCard() {
|
||||
|
||||
let name:string = "";
|
||||
|
||||
|
|
@ -98,4 +98,4 @@ function HostPageHost() {
|
|||
)
|
||||
}
|
||||
|
||||
export default HostPageHost
|
||||
export default HostCard
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
import { createSignal, For } from "solid-js";
|
||||
import { apiPortScan } from "../functions/api";
|
||||
import { currentHost } from "../functions/exports";
|
||||
import { apiPortScan } from "../../functions/api";
|
||||
import { currentHost } from "../../functions/exports";
|
||||
|
||||
|
||||
function HostPagePing() {
|
||||
function Ping() {
|
||||
|
||||
let stop = false;
|
||||
|
||||
|
|
@ -75,4 +75,4 @@ function HostPagePing() {
|
|||
)
|
||||
}
|
||||
|
||||
export default HostPagePing
|
||||
export default Ping
|
||||
|
|
@ -27,8 +27,10 @@ export const emptyHost:Host = {
|
|||
};
|
||||
|
||||
export interface Conf {
|
||||
Theme: string;
|
||||
Color: string;
|
||||
Timeout: number;
|
||||
NodePath: string;
|
||||
};
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -2,16 +2,16 @@ import { For } from "solid-js";
|
|||
|
||||
import { allHosts } from "../functions/exports";
|
||||
|
||||
import TableRow from "../components/TableRow";
|
||||
import TableHead from "../components/TableHead";
|
||||
import BodyCardHead from "../components/BodyCardHead";
|
||||
import TableRow from "../components/Body/TableRow";
|
||||
import TableHead from "../components/Body/TableHead";
|
||||
import CardHead from "../components/Body/CardHead";
|
||||
|
||||
function Body() {
|
||||
|
||||
return (
|
||||
<div class="card border-primary">
|
||||
<div class="card-header">
|
||||
<BodyCardHead></BodyCardHead>
|
||||
<CardHead></CardHead>
|
||||
</div>
|
||||
<div class="card-body table-responsive">
|
||||
<table class="table table-striped table-hover">
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
import { useParams } from "@solidjs/router";
|
||||
import { apiGetHost } from "../functions/api";
|
||||
|
||||
import HostPageHost from "../components/HostPageHost";
|
||||
import { setCurrentHost } from "../functions/exports";
|
||||
import { onMount } from "solid-js";
|
||||
import HostPagePing from "../components/HostPagePing";
|
||||
|
||||
import { apiGetHost } from "../functions/api";
|
||||
import { setCurrentHost } from "../functions/exports";
|
||||
|
||||
import HostCard from "../components/HostPage/HostCard";
|
||||
import Ping from "../components/HostPage/Ping";
|
||||
|
||||
function HostPage() {
|
||||
|
||||
|
|
@ -18,10 +19,10 @@ function HostPage() {
|
|||
return (
|
||||
<div class="row">
|
||||
<div class="col-md">
|
||||
<HostPageHost></HostPageHost>
|
||||
<HostCard></HostCard>
|
||||
</div>
|
||||
<div class="col-md">
|
||||
<HostPagePing></HostPagePing>
|
||||
<Ping></Ping>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -43,6 +43,7 @@ func apiHost(c *gin.Context) {
|
|||
idStr := c.Param("id")
|
||||
|
||||
host := getHostByID(idStr, allHosts) // functions.go
|
||||
_, host.DNS = updateDNS(host)
|
||||
|
||||
c.IndentedJSON(http.StatusOK, host)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,22 +0,0 @@
|
|||
package web
|
||||
|
||||
import (
|
||||
"net/http"
|
||||
|
||||
"github.com/gin-gonic/gin"
|
||||
|
||||
"github.com/aceberg/WatchYourLAN/internal/models"
|
||||
)
|
||||
|
||||
func hostHandler(c *gin.Context) {
|
||||
var guiData models.GuiData
|
||||
guiData.Config = appConfig
|
||||
|
||||
idStr := c.Param("id")
|
||||
host := getHostByID(idStr, allHosts)
|
||||
_, host.DNS = updateDNS(host)
|
||||
guiData.Host = host
|
||||
|
||||
c.HTML(http.StatusOK, "header.html", guiData)
|
||||
c.HTML(http.StatusOK, "host.html", guiData)
|
||||
}
|
||||
|
|
@ -13,7 +13,6 @@ func indexHandler(c *gin.Context) {
|
|||
guiData.Config = appConfig
|
||||
guiData.Themes = getAllIfaces(allHosts)
|
||||
|
||||
c.HTML(http.StatusOK, "header.html", guiData)
|
||||
c.HTML(http.StatusOK, "index.html", guiData)
|
||||
}
|
||||
|
||||
|
|
@ -21,6 +20,5 @@ func historyHandler(c *gin.Context) {
|
|||
var guiData models.GuiData
|
||||
guiData.Config = appConfig
|
||||
|
||||
c.HTML(http.StatusOK, "header.html", guiData)
|
||||
c.HTML(http.StatusOK, "history.html", guiData)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
import{t as o,i as l,c as t,a as K,b as x,s as O,d as A,e as et,f as B,g as v,h as I,F as lt,j as it,o as nt,u as rt,k as at,l as st}from"./index.js";var dt=o('<div class="card border-primary"><div class=card-header>Host</div><div class="card-body table-responsive"><table class="table table-striped table-hover"><tbody><tr><td>ID</td><td></td></tr><tr><td>Name</td><td><input type=text class=form-control></td></tr><tr><td>DNS name</td><td></td></tr><tr><td>Iface</td><td></td></tr><tr><td>IP</td><td><a target=_blank></a></td></tr><tr><td>MAC</td><td></td></tr><tr><td>Hardware</td><td></td></tr><tr><td>Date</td><td></td></tr><tr><td>Known</td><td><div class="form-check form-switch"><input class=form-check-input type=checkbox></div></td></tr><tr><td>Online</td><td></td></tr></tbody></table><button type=button class="btn btn-outline-danger">Delete host'),ct=o('<i class="bi bi-check-circle-fill"style=color:var(--bs-success);>'),ot=o('<i class="bi bi-circle-fill"style=color:var(--bs-gray-500);>');function $t(){let e="";const s=async b=>{e=b,await A(t().ID,e,"")},$=async()=>{e==""&&(e=t().Name),await A(t().ID,e,"toggle")},C=async()=>{await et(t().ID),window.location.href="/"};return(()=>{var b=dt(),_=b.firstChild,y=_.nextSibling,u=y.firstChild,w=u.firstChild,f=w.firstChild,P=f.firstChild,n=P.nextSibling,r=f.nextSibling,c=r.firstChild,a=c.nextSibling,g=a.firstChild,h=r.nextSibling,k=h.firstChild,S=k.nextSibling,i=h.nextSibling,d=i.firstChild,m=d.nextSibling,p=i.nextSibling,G=p.firstChild,R=G.nextSibling,D=R.firstChild,H=p.nextSibling,T=H.firstChild,q=T.nextSibling,E=H.nextSibling,z=E.firstChild,J=z.nextSibling,M=E.nextSibling,L=M.firstChild,Q=L.nextSibling,F=M.nextSibling,U=F.firstChild,V=U.nextSibling,W=V.firstChild,j=W.firstChild,X=F.nextSibling,Y=X.firstChild,Z=Y.nextSibling,tt=u.nextSibling;return l(n,()=>t().ID),g.$$input=N=>s(N.target.value),l(S,()=>t().DNS),l(m,()=>t().Iface),l(D,()=>t().IP),l(q,()=>t().Mac),l(J,()=>t().Hw),l(Q,()=>t().Date),j.$$click=$,l(Z,(()=>{var N=K(()=>t().Now==1);return()=>N()?ct():ot()})()),tt.$$click=C,x(()=>O(D,"href","http://"+t().IP)),x(()=>g.value=t().Name),x(()=>j.checked=t().Known==1),b})()}B(["input","click"]);var bt=o('<div class="card border-primary"><div class=card-header>Port Scan</div><div class=card-body><form class=input-group><input type=text class=form-control placeholder=1><input type=text class=form-control placeholder=65535><button type=button class="btn btn-primary">Scan</button></form><div class=mt-2>'),_t=o('<div class="d-flex justify-content-between mt-2"><button type=button class="btn btn-warning">Stop/Continue</button><div>Scanning port: '),ut=o("<a class=me-4 target=_blank>");function ft(){let e=!1;const[s,$]=v(""),[C,b]=v(""),[_,y]=v(""),[u,w]=v([]),f=async()=>{e=!1;let n=Number(s());(Number.isNaN(n)||n<1||n>65535)&&(n=1);let r=Number(C());(Number.isNaN(r)||r<1||r>65535)&&(r=65535);let c;for(let a=n;a<=r&&!e;a++)y(a.toString()),c=await it(t().IP,a),c&&w([...u(),a])},P=()=>{e?($(_()),f()):e=!0};return(()=>{var n=bt(),r=n.firstChild,c=r.nextSibling,a=c.firstChild,g=a.firstChild,h=g.nextSibling,k=h.nextSibling,S=a.nextSibling;return g.$$input=i=>$(i.target.value),h.$$input=i=>b(i.target.value),k.$$click=f,l(c,(()=>{var i=K(()=>_()!="");return()=>i()?(()=>{var d=_t(),m=d.firstChild,p=m.nextSibling;return p.firstChild,m.$$click=P,l(p,_,null),d})():[]})(),S),l(S,I(lt,{get each(){return u()},children:i=>(()=>{var d=ut();return l(d,i),x(()=>O(d,"href","http://"+t().IP+":"+i)),d})()})),n})()}B(["input","click"]);var gt=o("<div class=row><div class=col-md></div><div class=col-md>");function pt(){return nt(async()=>{const e=rt(),s=await at(e.id);st(s)}),(()=>{var e=gt(),s=e.firstChild,$=s.nextSibling;return l(s,I($t,{})),l($,I(ft,{})),e})()}export{pt as default};
|
||||
import{t as o,i as l,c as t,a as K,b as x,s as O,d as A,e as et,f as B,g as v,h as I,F as lt,j as it,o as nt,u as rt,k as at,l as st}from"./index.js";var dt=o('<div class="card border-primary"><div class=card-header>Host</div><div class="card-body table-responsive"><table class="table table-striped table-hover"><tbody><tr><td>ID</td><td></td></tr><tr><td>Name</td><td><input type=text class=form-control></td></tr><tr><td>DNS name</td><td></td></tr><tr><td>Iface</td><td></td></tr><tr><td>IP</td><td><a target=_blank></a></td></tr><tr><td>MAC</td><td></td></tr><tr><td>Hardware</td><td></td></tr><tr><td>Date</td><td></td></tr><tr><td>Known</td><td><div class="form-check form-switch"><input class=form-check-input type=checkbox></div></td></tr><tr><td>Online</td><td></td></tr></tbody></table><button type=button class="btn btn-outline-danger">Delete host'),ct=o('<i class="bi bi-check-circle-fill"style=color:var(--bs-success);>'),ot=o('<i class="bi bi-circle-fill"style=color:var(--bs-gray-500);>');function $t(){let e="";const s=async b=>{e=b,await A(t().ID,e,"")},$=async()=>{e==""&&(e=t().Name),await A(t().ID,e,"toggle")},C=async()=>{await et(t().ID),window.location.href="/"};return(()=>{var b=dt(),_=b.firstChild,y=_.nextSibling,u=y.firstChild,w=u.firstChild,f=w.firstChild,k=f.firstChild,n=k.nextSibling,r=f.nextSibling,c=r.firstChild,a=c.nextSibling,g=a.firstChild,h=r.nextSibling,N=h.firstChild,S=N.nextSibling,i=h.nextSibling,d=i.firstChild,m=d.nextSibling,p=i.nextSibling,G=p.firstChild,R=G.nextSibling,D=R.firstChild,H=p.nextSibling,T=H.firstChild,q=T.nextSibling,E=H.nextSibling,z=E.firstChild,J=z.nextSibling,M=E.nextSibling,L=M.firstChild,Q=L.nextSibling,F=M.nextSibling,U=F.firstChild,V=U.nextSibling,W=V.firstChild,j=W.firstChild,X=F.nextSibling,Y=X.firstChild,Z=Y.nextSibling,tt=u.nextSibling;return l(n,()=>t().ID),g.$$input=P=>s(P.target.value),l(S,()=>t().DNS),l(m,()=>t().Iface),l(D,()=>t().IP),l(q,()=>t().Mac),l(J,()=>t().Hw),l(Q,()=>t().Date),j.$$click=$,l(Z,(()=>{var P=K(()=>t().Now==1);return()=>P()?ct():ot()})()),tt.$$click=C,x(()=>O(D,"href","http://"+t().IP)),x(()=>g.value=t().Name),x(()=>j.checked=t().Known==1),b})()}B(["input","click"]);var bt=o('<div class="card border-primary"><div class=card-header>Port Scan</div><div class=card-body><form class=input-group><input type=text class=form-control placeholder=1><input type=text class=form-control placeholder=65535><button type=button class="btn btn-primary">Scan</button></form><div class=mt-2>'),_t=o('<div class="d-flex justify-content-between mt-2"><button type=button class="btn btn-warning">Stop/Continue</button><div>Scanning port: '),ut=o("<a class=me-4 target=_blank>");function ft(){let e=!1;const[s,$]=v(""),[C,b]=v(""),[_,y]=v(""),[u,w]=v([]),f=async()=>{e=!1;let n=Number(s());(Number.isNaN(n)||n<1||n>65535)&&(n=1);let r=Number(C());(Number.isNaN(r)||r<1||r>65535)&&(r=65535);let c;for(let a=n;a<=r&&!e;a++)y(a.toString()),c=await it(t().IP,a),c&&w([...u(),a])},k=()=>{e?($(_()),f()):e=!0};return(()=>{var n=bt(),r=n.firstChild,c=r.nextSibling,a=c.firstChild,g=a.firstChild,h=g.nextSibling,N=h.nextSibling,S=a.nextSibling;return g.$$input=i=>$(i.target.value),h.$$input=i=>b(i.target.value),N.$$click=f,l(c,(()=>{var i=K(()=>_()!="");return()=>i()?(()=>{var d=_t(),m=d.firstChild,p=m.nextSibling;return p.firstChild,m.$$click=k,l(p,_,null),d})():[]})(),S),l(S,I(lt,{get each(){return u()},children:i=>(()=>{var d=ut();return l(d,i),x(()=>O(d,"href","http://"+t().IP+":"+i)),d})()})),n})()}B(["input","click"]);var gt=o("<div class=row><div class=col-md></div><div class=col-md>");function pt(){return nt(async()=>{const e=rt(),s=await at(e.id);st(s)}),(()=>{var e=gt(),s=e.firstChild,$=s.nextSibling;return l(s,I($t,{})),l($,I(ft,{})),e})()}export{pt as default};
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,10 +1,19 @@
|
|||
{{ define "index.html" }}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" data-bs-theme="dark">
|
||||
<head>
|
||||
<title>WatchYourLAN</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<!--Favicon-->
|
||||
<link rel="icon" type="image/x-icon" href="/fs/public/favicon.png">
|
||||
<!-- JS & CSS -->
|
||||
<script type="module" crossorigin src="/fs/public/assets/index.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/fs/public/assets/index.css">
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
|
||||
{{ template "footer.html" }}
|
||||
</body>
|
||||
</html>
|
||||
{{ end }}
|
||||
Loading…
Reference in a new issue