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>
|
||||
<html lang="en">
|
||||
<html lang="en" data-bs-theme="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,16 @@
|
|||
import './App.css'
|
||||
import Body from './pages/Body'
|
||||
|
||||
function App() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
<h1>Hello!</h1>
|
||||
<div class="container-lg">
|
||||
<div class="row">
|
||||
<div class="col-md mt-4 mb-4">
|
||||
<Body></Body>
|
||||
</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