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

Table Row

Browse source
This commit is contained in:
aceberg 2025-03-17 09:31:51 +07:00
parent 4fe2e36c77
commit fb1122c03d
8 changed files with 132 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
backend/internal/web/public/assets/index.css Normal file
View file

@ -0,0 +1 @@
.my-btn{height:100%;background-color:#0000;color:var(--bs-primary);text-align:center}.my-btn:hover{background-color:#0000001a}

1
backend/internal/web/public/assets/index.js Normal file
View file

File diff suppressed because one or more lines are too long

2
backend/internal/web/templates/header.html
View file

@ -20,8 +20,6 @@
<link href="{{ .Config.NodePath }}/node_modules/bootswatch/dist/{{ .Config.Theme }}/bootstrap.min.css" rel="stylesheet">
<script src="{{ .Config.NodePath }}/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
{{ end }}
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="/fs/public/css/index.css" />
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-primary">

75
backend/internal/web/templates/index.html
View file

@ -1,73 +1,10 @@
{{ define "index.html" }}
</head>
<body>
<div class="container-lg">
<div class="row">
<div class="col-md mt-2">
<div class="form-check form-switch">
<input type="hidden" id="ref-timeout" value="{{ .Config.Timeout }}">
<input class="form-check-input" type="checkbox" id="ref" onclick="toggleRefresh()" title="Auto refresh">
</div>
</div>
</div>
<div class="row">
<div class="col-md mt-2 mb-4">
<div class="card border-primary">
<div class="card-header">
<div class="row">
<div class="col-md mt-1 mb-1">
<button class="btn btn-outline-primary" disabled>Filter by</button>
<button class="btn btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Iface</button>
<ul class="dropdown-menu">
{{ range .Themes }}
<li><a class="dropdown-item" onclick="filterFunc('iface', '{{ . }}')">{{ . }}</a></li>
{{ end }}
</ul>
<button class="btn btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Known</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" onclick="filterFunc('known', 1)">Known</a></li>
<li><a class="dropdown-item" onclick="filterFunc('known', 0)">Unknown</a></li>
</ul>
<button class="btn btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Online</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" onclick="filterFunc('line', 1)">Online</a></li>
<li><a class="dropdown-item" onclick="filterFunc('line', 0)">Offline</a></li>
</ul>
<button class="btn btn-outline-primary" onclick="resetFilter()">Reset filter</button>
</div>
<div class="col-md mt-1 mb-1">
<div class="d-flex justify-content-between">
<input class="form-control" id="search" oninput="searchFunc()" placeholder="Search" style="max-width: 10em;">
<button class="btn btn-outline-primary" id="edit" onclick="editClick()">Edit names</button>
</div>
</div>
</div>
</div>
<div class="card-body table-responsive">
<table class="table table-striped">
<thead>
<th style="width: 3em;"></th>
<th>Name <i class="bi bi-sort-down-alt my-btn" onclick="sortBy('Name')"></i></th>
<th>Iface <i class="bi bi-sort-down-alt my-btn" onclick="sortBy('Iface')"></i></th>
<th>IP <i class="bi bi-sort-down-alt my-btn" onclick="sortBy('IP')"></i></th>
<th>MAC <i class="bi bi-sort-down-alt my-btn" onclick="sortBy('Mac')"></i></th>
<th>Hardware <i class="bi bi-sort-down-alt my-btn" onclick="sortBy('Hw')"></i></th>
<th>Date <i class="bi bi-sort-down-alt my-btn" onclick="sortBy('Date')"></i></th>
<th>Known <i class="bi bi-sort-down-alt my-btn" onclick="sortBy('Known')"></i></th>
<th>Online <i class="bi bi-sort-down-alt my-btn" onclick="sortBy('Now')"></i></th>
</thead>
<tbody id="tBody"></tbody>
<!-- index.js -->
</table>
</div>
</div>
</div>
</div>
</div>
<script src="/fs/public/js/index.js"></script>
<script src="/fs/public/js/sort.js"></script>
<script src="/fs/public/js/filter-search.js"></script>
<script src="/fs/public/js/refresh.js"></script>
<script type="module" crossorigin src="/fs/public/assets/index.js"></script>
<link rel="stylesheet" crossorigin href="/fs/public/assets/index.css">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
{{ template "footer.html" }}
{{ end }}

73
backend/internal/web/templates/old_index.html Normal file
View file

@ -0,0 +1,73 @@
{{ define "oldindex.html" }}
</head>
<body>
<div class="container-lg">
<div class="row">
<div class="col-md mt-2">
<div class="form-check form-switch">
<input type="hidden" id="ref-timeout" value="{{ .Config.Timeout }}">
<input class="form-check-input" type="checkbox" id="ref" onclick="toggleRefresh()" title="Auto refresh">
</div>
</div>
</div>
<div class="row">
<div class="col-md mt-2 mb-4">
<div class="card border-primary">
<div class="card-header">
<div class="row">
<div class="col-md mt-1 mb-1">
<button class="btn btn-outline-primary" disabled>Filter by</button>
<button class="btn btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Iface</button>
<ul class="dropdown-menu">
{{ range .Themes }}
<li><a class="dropdown-item" onclick="filterFunc('iface', '{{ . }}')">{{ . }}</a></li>
{{ end }}
</ul>
<button class="btn btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Known</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" onclick="filterFunc('known', 1)">Known</a></li>
<li><a class="dropdown-item" onclick="filterFunc('known', 0)">Unknown</a></li>
</ul>
<button class="btn btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Online</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" onclick="filterFunc('line', 1)">Online</a></li>
<li><a class="dropdown-item" onclick="filterFunc('line', 0)">Offline</a></li>
</ul>
<button class="btn btn-outline-primary" onclick="resetFilter()">Reset filter</button>
</div>
<div class="col-md mt-1 mb-1">
<div class="d-flex justify-content-between">
<input class="form-control" id="search" oninput="searchFunc()" placeholder="Search" style="max-width: 10em;">
<button class="btn btn-outline-primary" id="edit" onclick="editClick()">Edit names</button>
</div>
</div>
</div>
</div>
<div class="card-body table-responsive">
<table class="table table-striped">
<thead>
<th style="width: 3em;"></th>
<th>Name <i class="bi bi-sort-down-alt my-btn" onclick="sortBy('Name')"></i></th>
<th>Iface <i class="bi bi-sort-down-alt my-btn" onclick="sortBy('Iface')"></i></th>
<th>IP <i class="bi bi-sort-down-alt my-btn" onclick="sortBy('IP')"></i></th>
<th>MAC <i class="bi bi-sort-down-alt my-btn" onclick="sortBy('Mac')"></i></th>
<th>Hardware <i class="bi bi-sort-down-alt my-btn" onclick="sortBy('Hw')"></i></th>
<th>Date <i class="bi bi-sort-down-alt my-btn" onclick="sortBy('Date')"></i></th>
<th>Known <i class="bi bi-sort-down-alt my-btn" onclick="sortBy('Known')"></i></th>
<th>Online <i class="bi bi-sort-down-alt my-btn" onclick="sortBy('Now')"></i></th>
</thead>
<tbody id="tBody"></tbody>
<!-- index.js -->
</table>
</div>
</div>
</div>
</div>
</div>
<script src="/fs/public/js/index.js"></script>
<script src="/fs/public/js/sort.js"></script>
<script src="/fs/public/js/filter-search.js"></script>
<script src="/fs/public/js/refresh.js"></script>
{{ template "footer.html" }}
{{ end }}

10
frontend/src/App.css
View file

@ -0,0 +1,10 @@
/* Sort button */
.my-btn {
height: 100%;
background-color: #00000000;
color: var(--bs-primary);
text-align: center;
}
.my-btn:hover {
background-color: #0000001a;
}

38
frontend/src/components/TableRow.tsx Normal file
View file

@ -0,0 +1,38 @@
function TableRow(_props: any) {
const link = "http://" + _props.host.IP;
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;
}
return (
<tr>
<td class="opacity-50">{_props.index}.</td>
<td>{_props.host.Name}</td>
<td>{_props.host.Iface}</td>
<td><a href={link} target="_blank">{_props.host.IP}</a></td>
<td>{_props.host.Mac}</td>
<td>{_props.host.Hw}</td>
<td>{_props.host.Date}</td>
<td>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" checked={known}></input>
</div>
</td>
<td>{now}</td>
<td><i class="bi bi-three-dots-vertical my-btn"></i></td>
</tr>
)
}
export default TableRow

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

@ -2,6 +2,7 @@ import { onMount } from "solid-js";
import { allHosts, setAllHosts } from "../functions/exports";
import { getAllHosts } from "../functions/api";
import { For } from "solid-js";
import TableRow from "../components/TableRow";
function Body() {
@ -33,21 +34,12 @@ function Body() {
<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>
<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>
<TableRow host={host} index={index}></TableRow>
}</For>
</tbody>
</table>