watchyourlan/internal/web/public/js/index.js
2025-03-18 22:04:12 +07:00

98 lines
2.3 KiB
JavaScript

let addrsArray = {};
let edit = "0";
loadAddrs();
function createHTML(addr, i) {
let now = `<i class="bi bi-circle-fill" style="color:var(--bs-gray-500);"></i>`;
if (addr.Now == 1) {
now = `<i class="bi bi-check-circle-fill" style="color:var(--bs-success);"></i>`;
}
let known = '';
if (addr.Known == 1) {
known = `checked`;
}
// Needs option to use value in js
let name = `<data id="name${addr.ID}" value="${addr.Name}">${addr.Name}</data>`;
if (edit == 1) {
name = `<input id="name${addr.ID}" onchange="editForm(${addr.ID},'')" type="text" class="form-control" value="${addr.Name}">`;
}
let html = `
<tr>
<td style="opacity: 45%;">${i}.</td>
<td>${name}</td>
<td>${addr.Iface}</td>
<td>
<a href="http://${addr.IP}" target="_blank">${addr.IP}</a>
</td>
<td><a href="/host/${addr.ID}">${addr.Mac}</a></td>
<td>${addr.Hw}</td>
<td>${addr.Date}</td>
<td>
<div class="form-check form-switch">
<input onclick="editForm(${addr.ID}, 'toggle')" class="form-check-input" type="checkbox" ${known}>
</div>
</td>
<td>${now}</td>
</tr>
`;
return html;
}
async function loadAddrs() {
const url = '/api/all';
addrsArray = await (await fetch(url)).json();
bkpArray = addrsArray;
field = localStorage.getItem("sortField");
down = JSON.parse(localStorage.getItem("sortDown"));
checkNotEmpty(addrsArray);
}
function sortBy(f) {
field = f;
if (field != oldField) {
oldField = field;
down = !down;
} else {
oldField = '';
down = !down;
}
localStorage.setItem("sortDown", down);
localStorage.setItem("sortField", field);
checkNotEmpty(addrsArray);
}
function editClick() {
edit = 1 - edit;
loadAddrs();
}
function checkNotEmpty(someArray) {
if (someArray.length > 0) {
if ((field != null) && (down != null)) {
sortByAny(someArray);
} else {
displayArrayData(someArray);
}
}
}
async function editForm(id, known) {
const name = document.getElementById("name"+id).value;
const url = '/api/edit/'+id+'/'+name+'/'+known;
// console.log(url);
await fetch(url);
}