diff --git a/frontend/Makefile b/frontend/Makefile new file mode 100644 index 0000000..f7abe33 --- /dev/null +++ b/frontend/Makefile @@ -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 \ No newline at end of file diff --git a/frontend/index.html b/frontend/index.html index 7b0e298..a6b893d 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -1,10 +1,13 @@ - + WatchYourLAN + + +
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index e4404e6..fec3b0d 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,13 +1,16 @@ import './App.css' +import Body from './pages/Body' function App() { return ( - <> -
-

Hello!

+
+
+
+ +
- +
) } diff --git a/frontend/src/functions/api.ts b/frontend/src/functions/api.ts new file mode 100644 index 0000000..2b4968b --- /dev/null +++ b/frontend/src/functions/api.ts @@ -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; +}; \ No newline at end of file diff --git a/frontend/src/functions/exports.ts b/frontend/src/functions/exports.ts new file mode 100644 index 0000000..dc80b58 --- /dev/null +++ b/frontend/src/functions/exports.ts @@ -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([]); \ No newline at end of file diff --git a/frontend/src/pages/Body.tsx b/frontend/src/pages/Body.tsx new file mode 100644 index 0000000..7b8e2e1 --- /dev/null +++ b/frontend/src/pages/Body.tsx @@ -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 ( +
+
+ Header +
+
+ + + + + + + + + + + + + + + + {(host, index) => + + + + + + + + + + + + } + +
Name Iface IP MAC Hardware Date Known Online
{index()+1}.{host.Name}{host.Iface}{host.IP}{host.Mac}{host.Hw}{host.Date}{host.Known}{host.Now}
+
+
+ ) +} + +export default Body