Body Table
This commit is contained in:
aceberg
parent
eda622b6e3
commit
4fe2e36c77
6 changed files with 122 additions and 5 deletions
15
frontend/Makefile
Normal file
15
frontend/Makefile
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
PKG_NAME=WatchYourLAN
|
||||||
|
USR_NAME=aceberg
|
||||||
|
|
||||||
|
build:
|
||||||
|
npm run build && \
|
||||||
|
rm ../backend/internal/web/public/assets/* && \
|
||||||
|
cp -r dist/assets ../backend/internal/web/public
|
||||||
|
|
||||||
|
replace:
|
||||||
|
cd ../backend/internal/web/public/assets/ && \
|
||||||
|
cat index-*.js | sed 's/assets/fs\/public\/assets/g;s/http:\/\/0.0.0.0:8840//' > index.js && \
|
||||||
|
cat index-*.css | sed 's/assets/fs\/public\/assets/g' > index.css && \
|
||||||
|
rm index-*
|
||||||
|
|
||||||
|
all: build replace
|
||||||
|
|
@ -1,10 +1,13 @@
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en" data-bs-theme="dark">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>WatchYourLAN</title>
|
<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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,16 @@
|
||||||
import './App.css'
|
import './App.css'
|
||||||
|
import Body from './pages/Body'
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<div class="container-lg">
|
||||||
<div>
|
<div class="row">
|
||||||
<h1>Hello!</h1>
|
<div class="col-md mt-4 mb-4">
|
||||||
|
<Body></Body>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
8
frontend/src/functions/api.ts
Normal file
8
frontend/src/functions/api.ts
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
const api = 'http://0.0.0.0:8840';
|
||||||
|
|
||||||
|
export const getAllHosts = async () => {
|
||||||
|
const url = api+'/api/all';
|
||||||
|
const hosts = await (await fetch(url)).json();
|
||||||
|
|
||||||
|
return hosts;
|
||||||
|
};
|
||||||
29
frontend/src/functions/exports.ts
Normal file
29
frontend/src/functions/exports.ts
Normal file
|
|
@ -0,0 +1,29 @@
|
||||||
|
import { createSignal } from "solid-js";
|
||||||
|
|
||||||
|
export interface Host {
|
||||||
|
ID: number;
|
||||||
|
Name: string;
|
||||||
|
DNS: string;
|
||||||
|
Iface: string;
|
||||||
|
IP: string;
|
||||||
|
Mac: string;
|
||||||
|
Hw: string;
|
||||||
|
Date: string;
|
||||||
|
Known: number;
|
||||||
|
Now: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const emptyHost: Host = {
|
||||||
|
ID: 0,
|
||||||
|
Name: "",
|
||||||
|
DNS: "",
|
||||||
|
Iface: "",
|
||||||
|
IP: "",
|
||||||
|
Mac: "",
|
||||||
|
Hw: "",
|
||||||
|
Date: "",
|
||||||
|
Known: 0,
|
||||||
|
Now: 0,
|
||||||
|
};
|
||||||
|
|
||||||
|
export const [allHosts, setAllHosts] = createSignal<Host[]>([]);
|
||||||
59
frontend/src/pages/Body.tsx
Normal file
59
frontend/src/pages/Body.tsx
Normal file
|
|
@ -0,0 +1,59 @@
|
||||||
|
import { onMount } from "solid-js";
|
||||||
|
import { allHosts, setAllHosts } from "../functions/exports";
|
||||||
|
import { getAllHosts } from "../functions/api";
|
||||||
|
import { For } from "solid-js";
|
||||||
|
|
||||||
|
|
||||||
|
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
|
||||||
|
</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>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<For each={allHosts()}>{(host, index) =>
|
||||||
|
<tr>
|
||||||
|
<td class="opacity-50">{index()+1}.</td>
|
||||||
|
<td>{host.Name}</td>
|
||||||
|
<td>{host.Iface}</td>
|
||||||
|
<td><a href="http://{host.IP}" target="_blank">{host.IP}</a></td>
|
||||||
|
<td>{host.Mac}</td>
|
||||||
|
<td>{host.Hw}</td>
|
||||||
|
<td>{host.Date}</td>
|
||||||
|
<td>{host.Known}</td>
|
||||||
|
<td>{host.Now}</td>
|
||||||
|
</tr>
|
||||||
|
}</For>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Body
|
||||||
Loading…
Reference in a new issue