Small UI updates
This commit is contained in:
aceberg
parent
022f266038
commit
5d2e77dd42
19 changed files with 117 additions and 86 deletions
|
|
@ -8,14 +8,16 @@ function CardHead() {
|
|||
return (
|
||||
<div class="row">
|
||||
<div class="col-md mt-1 mb-1">
|
||||
<div class="d-flex justify-left">
|
||||
<Filter></Filter>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md mt-1 mb-1">
|
||||
<div class="d-flex justify-content-between">
|
||||
<Search></Search>
|
||||
<Show
|
||||
when={editNames()}
|
||||
fallback={<button class="btn btn-outline-primary" onClick={[setEditNames, true]}>Edit names</button>}
|
||||
fallback={<button class="btn btn-outline-primary" title="Click to edit names" onClick={[setEditNames, true]}>Edit names</button>}
|
||||
>
|
||||
<button class="btn btn-primary" onClick={[setEditNames, false]}>Edit names</button>
|
||||
</Show>
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 2em;"></th>
|
||||
<th>Name <i class="bi bi-sort-down-alt my-btn" onclick={[handleSort, "Name"]}></i></th>
|
||||
<th>Iface <i class="bi bi-sort-down-alt my-btn" onclick={[handleSort, "Iface"]}></i></th>
|
||||
<th>IP <i class="bi bi-sort-down-alt my-btn" onclick={[handleSort, "IP"]}></i></th>
|
||||
<th>MAC <i class="bi bi-sort-down-alt my-btn" onclick={[handleSort, "Mac"]}></i></th>
|
||||
<th>Hardware <i class="bi bi-sort-down-alt my-btn" onclick={[handleSort, "Hw"]}></i></th>
|
||||
<th>Date <i class="bi bi-sort-down-alt my-btn" onclick={[handleSort, "Date"]}></i></th>
|
||||
<th>Known <i class="bi bi-sort-down-alt my-btn" onclick={[handleSort, "Known"]}></i></th>
|
||||
<th>Online <i class="bi bi-sort-down-alt my-btn" onclick={[handleSort, "Now"]}></i></th>
|
||||
<For each={["Name", "Iface", "IP", "MAC", "Hardware", "Date", "Known", "Online"]}>{(key) =>
|
||||
<th>{key} <i class="bi bi-sort-down-alt my-btn"
|
||||
onClick={[handleSort, key]}
|
||||
title={"Sort by " + key}
|
||||
></i></th>
|
||||
}</For>
|
||||
<th style="width: 2em;"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
|
|
|||
|
|
@ -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 = <i class="bi bi-circle-fill" style="color:var(--bs-gray-500);"></i>;
|
||||
if (_props.host.Now == 1) {
|
||||
now = <i class="bi bi-check-circle-fill" style="color:var(--bs-success);"></i>;
|
||||
};
|
||||
|
||||
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) {
|
|||
</Show>
|
||||
</td>
|
||||
<td>{_props.host.Iface}</td>
|
||||
<td><a href={link} target="_blank">{_props.host.IP}</a></td>
|
||||
<td><a href={"http://" + _props.host.IP} target="_blank">{_props.host.IP}</a></td>
|
||||
<td>{_props.host.Mac}</td>
|
||||
<td>{_props.host.Hw}</td>
|
||||
<td>{_props.host.Date}</td>
|
||||
|
|
@ -53,7 +50,9 @@ function TableRow(_props: any) {
|
|||
</td>
|
||||
<td>{now}</td>
|
||||
<td>
|
||||
<a href={edit}><i class="bi bi-three-dots-vertical my-btn p-2"></i></a>
|
||||
<a href={"/host/" + _props.host.ID}>
|
||||
<i class="bi bi-three-dots-vertical my-btn p-2" title="More"></i>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ function Prometheus() {
|
|||
<tr>
|
||||
<td><button type="submit" class="btn btn-primary">Save</button></td>
|
||||
<td>
|
||||
<a href="/metrics" target="_self">/metrics</a>
|
||||
<a href="/metrics" target="_blank">/metrics</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody></table>
|
||||
|
|
|
|||
|
|
@ -12,23 +12,23 @@ function Filter() {
|
|||
return (
|
||||
<div class="row">
|
||||
<div class="col input-group">
|
||||
<select class="form-select">
|
||||
<select class="form-select" title="Filter by Iface">
|
||||
<option selected disabled>Iface</option>
|
||||
<For each={ifaces()}>{(iface) =>
|
||||
<option onClick={()=>{handleFilter("Iface", iface)}}>{iface}</option>
|
||||
}</For>
|
||||
</select>
|
||||
<select class="form-select">
|
||||
<select class="form-select" title="Filter by Known">
|
||||
<option selected disabled>Known</option>
|
||||
<option onClick={()=>{handleFilter("Known", 1)}}>Known</option>
|
||||
<option onClick={()=>{handleFilter("Known", 0)}}>Unknown</option>
|
||||
</select>
|
||||
<select class="form-select">
|
||||
<select class="form-select" title="Filter by Online">
|
||||
<option selected disabled>Online</option>
|
||||
<option onClick={()=>{handleFilter("Now", 1)}}>Online</option>
|
||||
<option onClick={()=>{handleFilter("Now", 0)}}>Offline</option>
|
||||
</select>
|
||||
<button onClick={()=>{handleFilter("ID", 0)}} class="btn btn-outline-primary">Reset filter</button>
|
||||
<button onClick={()=>{handleFilter("ID", 0)}} class="btn btn-outline-primary" title="Reset filter">Reset filter</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -33,36 +33,27 @@ function Header() {
|
|||
<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" 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>
|
||||
<div class="container-lg">
|
||||
<a class="navbar-brand" href="/">
|
||||
<img src="/fs/public/favicon.png" style="width: 2em"/>
|
||||
</a>
|
||||
<ul class="navbar-nav me-auto mb-2 mb-md-0">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/" title="Home">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/config/" title="Config">Config</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/history/" title="History">History</a>
|
||||
</li>
|
||||
</ul>
|
||||
<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" title="Github"><i class="bi bi-github"></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</>
|
||||
)
|
||||
|
|
|
|||
17
frontend/src/components/HistShow.tsx
Normal file
17
frontend/src/components/HistShow.tsx
Normal file
|
|
@ -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 (
|
||||
<input class="form-control" onInput={e => handleSaveShow(e.target.value)} placeholder="Show elements" title="Nomber of elements to show" style="max-width: 10em;"></input>
|
||||
)
|
||||
}
|
||||
|
||||
export default HistShow
|
||||
|
|
@ -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 (
|
||||
<div class="card border-primary">
|
||||
<div class="card-header">History</div>
|
||||
<div class="card-header d-flex justify-content-between">
|
||||
<div>Host History</div>
|
||||
<HistShow name="hostShow"></HistShow>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{_props.mac !== ""
|
||||
? <MacHistory mac={_props.mac}></MacHistory>
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<For each={hist()}>{h =>
|
||||
<i title={"Date:"+h.Date+"\nIface:"+h.Iface+"\nIP:"+h.IP+"\nKnown:"+h.Known}
|
||||
class={h.Now === 0?"my-box-off":"my-box-on"}></i>
|
||||
<For each={hist()}>{(h, index) =>
|
||||
<Show
|
||||
when={index() < show()}
|
||||
>
|
||||
<i title={"Date:"+h.Date+"\nIface:"+h.Iface+"\nIP:"+h.IP+"\nKnown:"+h.Known}
|
||||
class={h.Now === 0?"my-box-off":"my-box-on"}></i>
|
||||
</Show>
|
||||
}</For>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ function Search() {
|
|||
};
|
||||
|
||||
return (
|
||||
<input onInput={e => handleSearch(e.target.value)} class="form-control" placeholder="Search" style="max-width: 10em;"></input>
|
||||
<input onInput={e => handleSearch(e.target.value)} class="form-control" placeholder="Search" style="max-width: 10em;" title="Search"></input>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -88,4 +88,6 @@ export const [ifaces, setIfaces] = createSignal<string[]>([]);
|
|||
|
||||
export const [appConfig, setAppConfig] = createSignal<Conf>(emptyConf);
|
||||
|
||||
export const [editNames, setEditNames] = createSignal(false);
|
||||
export const [editNames, setEditNames] = createSignal(false);
|
||||
|
||||
export const [show, setShow] = createSignal<number>(198);
|
||||
|
|
@ -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 (
|
||||
<div class="card border-primary">
|
||||
<div class="card-header d-flex justify-left">
|
||||
<div class="card-header d-flex justify-content-between">
|
||||
<Filter></Filter>
|
||||
<HistShow name="histShow"></HistShow>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<table class="table table-striped table-hover">
|
||||
|
|
@ -21,7 +27,7 @@ function History() {
|
|||
<a href={"http://"+host.IP}>{host.IP}</a>
|
||||
</td>
|
||||
<td>
|
||||
<MacHistory mac={host.Mac} show={200}></MacHistory>
|
||||
<MacHistory mac={host.Mac}></MacHistory>
|
||||
</td>
|
||||
</tr>
|
||||
}</For>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
4
internal/web/public/assets/HistShow.js
Normal file
4
internal/web/public/assets/HistShow.js
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
import{c as h,o as v,e as c,S as w,t as u,b as d,s as S,x as g,l as f,F as p,y,k as m,h as b}from"./index.js";var x=u("<i>");function $(o){const[r,t]=h([]);return v(async()=>{let e=[];e=await y(o.mac),e!=null&&(e.sort((s,a)=>s.Date<a.Date?1:-1),t(e))}),c(p,{get each(){return r()},children:(e,s)=>c(w,{get when(){return s()<f()},get children(){var a=x();return d(n=>{var l="Date:"+e.Date+`
|
||||
Iface:`+e.Iface+`
|
||||
IP:`+e.IP+`
|
||||
Known:`+e.Known,i=e.Now===0?"my-box-off":"my-box-on";return l!==n.e&&S(a,"title",n.e=l),i!==n.t&&g(a,n.t=i),n},{e:void 0,t:void 0}),a}})})}var H=u('<input class=form-control placeholder="Show elements"title="Nomber of elements to show"style=max-width:10em;>');function D(o){const r=t=>{localStorage.setItem(o.name,t),m(+t),f()==0&&m(198)};return(()=>{var t=H();return t.$$input=e=>r(e.target.value),t})()}b(["input"]);export{D as H,$ as M};
|
||||
|
|
@ -1 +1 @@
|
|||
import{t as _,i as e,e as i,k as x,b as C,s as v,l as S,F}from"./index.js";import{M as H}from"./MacHistory.js";var I=_('<div class="card border-primary"><div class="card-header d-flex justify-left"></div><div class=card-body><table class="table table-striped table-hover"><tbody></tbody>'),M=_("<tr><td class=opacity-50 style=width:2em;>.</td><td><a></a><br><a></a></td><td>");function j(){return(()=>{var s=I(),d=s.firstChild,$=d.nextSibling,h=$.firstChild,m=h.firstChild;return e(d,i(x,{})),e(m,i(F,{get each(){return S()},children:(t,u)=>(()=>{var n=M(),l=n.firstChild,y=l.firstChild,c=l.nextSibling,a=c.firstChild,g=a.nextSibling,o=g.nextSibling,p=c.nextSibling;return e(l,u,y),e(a,()=>t.Name),e(o,()=>t.IP),e(p,i(H,{get mac(){return t.Mac},show:200})),C(r=>{var f="/host/"+t.ID,b="http://"+t.IP;return f!==r.e&&v(a,"href",r.e=f),b!==r.t&&v(o,"href",r.t=b),r},{e:void 0,t:void 0}),n})()})),s})()}export{j as default};
|
||||
import{k as f,l as m,t as _,i as t,e as a,m as C,b as H,s as v,n as I,F}from"./index.js";import{H as M,M as N}from"./HistShow.js";var P=_('<div class="card border-primary"><div class="card-header d-flex justify-content-between"></div><div class=card-body><table class="table table-striped table-hover"><tbody></tbody>'),j=_("<tr><td class=opacity-50 style=width:2em;>.</td><td><a></a><br><a></a></td><td>");function D(){const $=localStorage.getItem("histShow");return f(+$),(m()===0||isNaN(m()))&&f(198),(()=>{var d=P(),l=d.firstChild,u=l.nextSibling,S=u.firstChild,g=S.firstChild;return t(l,a(C,{}),null),t(l,a(M,{name:"histShow"}),null),t(g,a(F,{get each(){return I()},children:(e,y)=>(()=>{var n=j(),i=n.firstChild,w=i.firstChild,o=i.nextSibling,s=o.firstChild,p=s.nextSibling,c=p.nextSibling,x=o.nextSibling;return t(i,y,w),t(s,()=>e.Name),t(c,()=>e.IP),t(x,a(N,{get mac(){return e.Mac}})),H(r=>{var h="/host/"+e.ID,b="http://"+e.IP;return h!==r.e&&v(s,"href",r.e=h),b!==r.t&&v(c,"href",r.t=b),r},{e:void 0,t:void 0}),n})()})),d})()}export{D as default};
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
import{t as c,i as e,j as N,b as p,s as O,m as K,n as et,h as q,c as S,e as x,F as lt,p as it,q as rt,o as nt,u as at,r as st}from"./index.js";import{M as dt}from"./MacHistory.js";var ct=c('<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'),ot=c('<i class="bi bi-check-circle-fill"style=color:var(--bs-success);>'),$t=c('<i class="bi bi-circle-fill"style=color:var(--bs-gray-500);>');function bt(t){let l="";const i=async u=>{l=u,await K(t.host.ID,l,"")},r=async()=>{l==""&&(l=t.host.Name),await K(t.host.ID,l,"toggle")},$=async()=>{await et(t.host.ID),window.location.href="/"};return(()=>{var u=ct(),h=u.firstChild,w=h.nextSibling,f=w.firstChild,P=f.firstChild,_=P.firstChild,I=_.firstChild,a=I.nextSibling,s=_.nextSibling,b=s.firstChild,d=b.nextSibling,g=d.firstChild,m=s.nextSibling,k=m.firstChild,C=k.nextSibling,n=m.nextSibling,o=n.firstChild,y=o.nextSibling,v=n.nextSibling,B=v.firstChild,G=B.nextSibling,D=G.firstChild,M=v.nextSibling,L=M.firstChild,R=L.nextSibling,E=M.nextSibling,T=E.firstChild,z=T.nextSibling,F=E.nextSibling,J=F.firstChild,Q=J.nextSibling,j=F.nextSibling,U=j.firstChild,V=U.nextSibling,W=V.firstChild,A=W.firstChild,X=j.nextSibling,Y=X.firstChild,Z=Y.nextSibling,tt=f.nextSibling;return e(a,()=>t.host.ID),g.$$input=H=>i(H.target.value),e(C,()=>t.host.DNS),e(y,()=>t.host.Iface),e(D,()=>t.host.IP),e(R,()=>t.host.Mac),e(z,()=>t.host.Hw),e(Q,()=>t.host.Date),A.$$click=r,e(Z,(()=>{var H=N(()=>t.host.Now==1);return()=>H()?ot():$t()})()),tt.$$click=$,p(()=>O(D,"href","http://"+t.host.IP)),p(()=>g.value=t.host.Name),p(()=>A.checked=t.host.Known==1),u})()}q(["input","click"]);var ut=c('<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>'),ht=c('<div class="d-flex justify-content-between mt-2"><button type=button class="btn btn-warning">Stop/Continue</button><div>Scanning port: '),ft=c("<a class=me-4 target=_blank>");function _t(t){let l=!1;const[i,r]=S(""),[$,u]=S(""),[h,w]=S(""),[f,P]=S([]),_=async()=>{l=!1;let a=Number(i());(Number.isNaN(a)||a<1||a>65535)&&(a=1);let s=Number($());(Number.isNaN(s)||s<1||s>65535)&&(s=65535);let b;for(let d=a;d<=s&&!l;d++)w(d.toString()),b=await it(t.IP,d),b&&P([...f(),d])},I=()=>{l?(r(h()),_()):l=!0};return(()=>{var a=ut(),s=a.firstChild,b=s.nextSibling,d=b.firstChild,g=d.firstChild,m=g.nextSibling,k=m.nextSibling,C=d.nextSibling;return g.$$input=n=>r(n.target.value),m.$$input=n=>u(n.target.value),k.$$click=_,e(b,(()=>{var n=N(()=>h()!="");return()=>n()?(()=>{var o=ht(),y=o.firstChild,v=y.nextSibling;return v.firstChild,y.$$click=I,e(v,h,null),o})():[]})(),C),e(C,x(lt,{get each(){return f()},children:n=>(()=>{var o=ft();return e(o,n),p(()=>O(o,"href","http://"+t.IP+":"+n)),o})()})),a})()}q(["input","click"]);var gt=c('<div class="card border-primary"><div class=card-header>History</div><div class=card-body>');function mt(t){return(()=>{var l=gt(),i=l.firstChild,r=i.nextSibling;return e(r,(()=>{var $=N(()=>t.mac!=="");return()=>$()?x(dt,{get mac(){return t.mac}}):"Loading..."})()),l})()}var vt=c("<div class=row><div class=col-md></div><div class=col-md>"),St=c('<div class="row mt-4"><div class=col-md>');function yt(){const[t,l]=S(rt);return nt(async()=>{const i=at(),r=await st(i.id);l(r)}),[(()=>{var i=vt(),r=i.firstChild,$=r.nextSibling;return e(r,x(bt,{get host(){return t()}})),e($,x(_t,{get IP(){return t().IP}})),i})(),(()=>{var i=St(),r=i.firstChild;return e(r,x(mt,{get mac(){return t().Mac}})),i})()]}export{yt as default};
|
||||
import{t as c,i as e,j as k,b as w,s as B,p as K,q as it,h as G,c as x,e as u,F as rt,r as nt,k as O,l as q,u as at,o as st,v as dt,w as ct}from"./index.js";import{H as ot,M as $t}from"./HistShow.js";var ht=c('<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'),bt=c('<i class="bi bi-check-circle-fill"style=color:var(--bs-success);>'),ut=c('<i class="bi bi-circle-fill"style=color:var(--bs-gray-500);>');function ft(t){let i="";const r=async o=>{i=o,await K(t.host.ID,i,"")},l=async()=>{i==""&&(i=t.host.Name),await K(t.host.ID,i,"toggle")},h=async()=>{await it(t.host.ID),window.location.href="/"};return(()=>{var o=ht(),f=o.firstChild,p=f.nextSibling,g=p.firstChild,H=g.firstChild,_=H.firstChild,I=_.firstChild,a=I.nextSibling,s=_.nextSibling,b=s.firstChild,d=b.nextSibling,m=d.firstChild,v=s.nextSibling,N=v.firstChild,C=N.nextSibling,n=v.nextSibling,$=n.firstChild,y=$.nextSibling,S=n.nextSibling,L=S.firstChild,R=L.nextSibling,D=R.firstChild,M=S.nextSibling,T=M.firstChild,z=T.nextSibling,E=M.nextSibling,J=E.firstChild,Q=J.nextSibling,j=E.nextSibling,U=j.firstChild,V=U.nextSibling,F=j.nextSibling,W=F.firstChild,X=W.nextSibling,Y=X.firstChild,A=Y.firstChild,Z=F.nextSibling,tt=Z.firstChild,et=tt.nextSibling,lt=g.nextSibling;return e(a,()=>t.host.ID),m.$$input=P=>r(P.target.value),e(C,()=>t.host.DNS),e(y,()=>t.host.Iface),e(D,()=>t.host.IP),e(z,()=>t.host.Mac),e(Q,()=>t.host.Hw),e(V,()=>t.host.Date),A.$$click=l,e(et,(()=>{var P=k(()=>t.host.Now==1);return()=>P()?bt():ut()})()),lt.$$click=h,w(()=>B(D,"href","http://"+t.host.IP)),w(()=>m.value=t.host.Name),w(()=>A.checked=t.host.Known==1),o})()}G(["input","click"]);var gt=c('<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=c('<div class="d-flex justify-content-between mt-2"><button type=button class="btn btn-warning">Stop/Continue</button><div>Scanning port: '),mt=c("<a class=me-4 target=_blank>");function vt(t){let i=!1;const[r,l]=x(""),[h,o]=x(""),[f,p]=x(""),[g,H]=x([]),_=async()=>{i=!1;let a=Number(r());(Number.isNaN(a)||a<1||a>65535)&&(a=1);let s=Number(h());(Number.isNaN(s)||s<1||s>65535)&&(s=65535);let b;for(let d=a;d<=s&&!i;d++)p(d.toString()),b=await nt(t.IP,d),b&&H([...g(),d])},I=()=>{i?(l(f()),_()):i=!0};return(()=>{var a=gt(),s=a.firstChild,b=s.nextSibling,d=b.firstChild,m=d.firstChild,v=m.nextSibling,N=v.nextSibling,C=d.nextSibling;return m.$$input=n=>l(n.target.value),v.$$input=n=>o(n.target.value),N.$$click=_,e(b,(()=>{var n=k(()=>f()!="");return()=>n()?(()=>{var $=_t(),y=$.firstChild,S=y.nextSibling;return S.firstChild,y.$$click=I,e(S,f,null),$})():[]})(),C),e(C,u(rt,{get each(){return g()},children:n=>(()=>{var $=mt();return e($,n),w(()=>B($,"href","http://"+t.IP+":"+n)),$})()})),a})()}G(["input","click"]);var St=c('<div class="card border-primary"><div class="card-header d-flex justify-content-between"><div>Host History</div></div><div class=card-body>');function xt(t){const i=localStorage.getItem("hostShow");return O(+i),(q()===0||isNaN(q()))&&O(570),(()=>{var r=St(),l=r.firstChild;l.firstChild;var h=l.nextSibling;return e(l,u(ot,{name:"hostShow"}),null),e(h,(()=>{var o=k(()=>t.mac!=="");return()=>o()?u($t,{get mac(){return t.mac}}):"Loading..."})()),r})()}var Ct=c("<div class=row><div class=col-md></div><div class=col-md>"),yt=c('<div class="row mt-4"><div class=col-md>');function Ht(){const[t,i]=x(at);return st(async()=>{const r=dt(),l=await ct(r.id);i(l)}),[(()=>{var r=Ct(),l=r.firstChild,h=l.nextSibling;return e(l,u(ft,{get host(){return t()}})),e(h,u(vt,{get IP(){return t().IP}})),r})(),(()=>{var r=yt(),l=r.firstChild;return e(l,u(xt,{get mac(){return t().Mac}})),r})()]}export{Ht as default};
|
||||
|
|
|
|||
|
|
@ -1,4 +0,0 @@
|
|||
import{c,o as l,e as f,t as m,b as u,s as v,v as w,F as y,w as b}from"./index.js";var d=m("<i>");function I(n){const[r,i]=c([]);return l(async()=>{let t=[];t=await b(n.mac),t!=null&&(t.sort((a,e)=>a.Date<e.Date?1:-1),n.show>0&&(t=t.slice(0,n.show)),i(t))}),f(y,{get each(){return r()},children:t=>(()=>{var a=d();return u(e=>{var o="Date:"+t.Date+`
|
||||
Iface:`+t.Iface+`
|
||||
IP:`+t.IP+`
|
||||
Known:`+t.Known,s=t.Now===0?"my-box-off":"my-box-on";return o!==e.e&&v(a,"title",e.e=o),s!==e.t&&w(a,e.t=s),e},{e:void 0,t:void 0}),a})()})}export{I as M};
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue