danvics/watchyourlan
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Sort

Browse source
This commit is contained in:
aceberg 2025-03-17 21:38:57 +07:00
parent fb1122c03d
commit a9972ac0ce
9 changed files with 162 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
backend/internal/web/public/assets/index.js
View file

File diff suppressed because one or more lines are too long

9
frontend/src/App.tsx
View file

@ -1,8 +1,17 @@
import { onMount } from 'solid-js';
import './App.css'
import { apiGetAllHosts } from './functions/api';
import { setAllHosts } from './functions/exports';
import Body from './pages/Body'
function App() {
onMount(async () => {
const hosts = await apiGetAllHosts();
setAllHosts(hosts);
});
return (
<div class="container-lg">
<div class="row">

20
frontend/src/components/CardHead.tsx Normal file
View file

@ -0,0 +1,20 @@
import { Show } from "solid-js";
import { editNames, setEditNames } from "../functions/exports";
function CardHead() {
return (
<div class="row">
<div class="col-md mt-1 mb-1">
<Show
when={editNames()}
fallback={<button class="btn btn-outline-primary" onClick={[setEditNames, true]}>Edit names</button>}
>
<button class="btn btn-primary" onClick={[setEditNames, false]}>Edit names</button>
</Show>
</div>
</div>
)
}
export default CardHead

28
frontend/src/components/TableHead.tsx Normal file
View file

@ -0,0 +1,28 @@
import { Host } from "../functions/exports";
import { sortByAnyField } from "../functions/sort";
function TableHead() {
const handleSort = (sortBy: keyof Host) => {
sortByAnyField(sortBy);
};
return (
<thead>
<tr>
<th style="width: 3em;"></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>
<th style="width: 2em;"></th>
</tr>
</thead>
)
}
export default TableHead

31
frontend/src/components/TableRow.tsx
View file

@ -1,8 +1,11 @@
import { createSignal, Show } from "solid-js";
import { editNames } from "../functions/exports";
import { apiEditHost } from "../functions/api";
function TableRow(_props: any) {
const [name, setName] = createSignal(_props.host.Name);
const link = "http://" + _props.host.IP;
let now = <i class="bi bi-circle-fill" style="color:var(--bs-gray-500);"></i>;
@ -15,10 +18,27 @@ function TableRow(_props: any) {
known = true;
}
const handleInput = async (n: string) => {
// console.log('Edit:', n);
setName(n);
await apiEditHost(_props.host.ID, name(), '');
};
const handleToggle = async () => {
await apiEditHost(_props.host.ID, name(), 'toggle');
};
return (
<tr>
<td class="opacity-50">{_props.index}.</td>
<td>{_props.host.Name}</td>
<td>
<Show
when={editNames()}
fallback={name()}
>
<input type="text" class="form-control" value={name()}
onInput={e => handleInput(e.target.value)}></input>
</Show>
</td>
<td>{_props.host.Iface}</td>
<td><a href={link} target="_blank">{_props.host.IP}</a></td>
<td>{_props.host.Mac}</td>
@ -26,11 +46,12 @@ function TableRow(_props: any) {
<td>{_props.host.Date}</td>
<td>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" checked={known}></input>
<input class="form-check-input" type="checkbox" checked={known}
onClick={handleToggle}></input>
</div>
</td>
<td>{now}</td>
<td><i class="bi bi-three-dots-vertical my-btn"></i></td>
<td><i class="bi bi-pencil-square my-btn"></i></td>
</tr>
)
}

10
frontend/src/functions/api.ts
View file

@ -1,8 +1,16 @@
const api = 'http://0.0.0.0:8840';
export const getAllHosts = async () => {
export const apiGetAllHosts = async () => {
const url = api+'/api/all';
const hosts = await (await fetch(url)).json();
return hosts;
};
export const apiEditHost = async (id:number, name:string, known:string) => {
const url = api+'/api/edit/'+id+'/'+name+'/'+known;
const res = await (await fetch(url)).json();
return res;
};

24
frontend/src/functions/exports.ts
View file

@ -13,17 +13,17 @@ export interface Host {
Now: number;
};
export const emptyHost: Host = {
ID: 0,
Name: "",
DNS: "",
Iface: "",
IP: "",
Mac: "",
Hw: "",
Date: "",
Known: 0,
Now: 0,
export interface Conf {
Color: string;
Timeout: number;
};
export const [allHosts, setAllHosts] = createSignal<Host[]>([]);
export const [allHosts, setAllHosts] = createSignal<Host[]>([]);
export const [appConfig, setAppConfig] = createSignal<Conf>();
export const [editNames, setEditNames] = createSignal(false);
// export const [store, setStore] = createStore({ hosts: allHosts() });
// export const [updBody, setUpdBody] = createSignal(false);

51
frontend/src/functions/sort.ts Normal file
View file

@ -0,0 +1,51 @@
import { allHosts, Host, setAllHosts } from "./exports";
let down = false;
let oldField = "Name";
export function sortByAnyField(field: keyof Host) {
if (field != oldField) {
oldField = field;
down = !down;
} else {
oldField = '';
down = !down;
}
// localStorage.setItem("sortDown", down);
// localStorage.setItem("sortField", field);
// checkNotEmpty(addrsArray);
let someArray = allHosts();
if (field == 'IP') {
someArray.sort((a, b) => sortIP(a, b, down));
} else {
someArray.sort((a, b) => byField(a, b, field, down));
}
setAllHosts([]);
setAllHosts(someArray);
}
function byField(a:Host, b:Host, fieldName: keyof Host, down:boolean){
if (a[fieldName] > b[fieldName]) {
return down ? 1 : -1;
} else {
return !down ? 1 : -1;
}
}
function sortIP(a:Host, b:Host, down: boolean) {
const num1 = numIP(a);
const num2 = numIP(b);
if (down) {
return num1-num2;
} else {
return num2-num1;
}
}
function numIP(a:Host) {
return Number(a.IP.split(".").map((num) => (`000${num}`).slice(-3) ).join(""));
}

34
frontend/src/pages/Body.tsx
View file

@ -1,42 +1,20 @@
import { onMount } from "solid-js";
import { allHosts, setAllHosts } from "../functions/exports";
import { getAllHosts } from "../functions/api";
import { allHosts } from "../functions/exports";
import { For } from "solid-js";
import TableRow from "../components/TableRow";
import CardHead from "../components/CardHead";
import TableHead from "../components/TableHead";
function Body() {
const handleSort = (sortBy: string) => {
console.log("SORT BY", sortBy);
};
onMount(async () => {
setAllHosts(await getAllHosts());
});
return (
<div class="card border-primary">
<div class="card-header">
Header
<CardHead></CardHead>
</div>
<div class="card-body table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th style="width: 3em;"></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>
<th style="width: 2em;"></th>
</tr>
</thead>
<table class="table table-striped table-hover">
<TableHead></TableHead>
<tbody>
<For each={allHosts()}>{(host, index) =>
<TableRow host={host} index={index}></TableRow>