From: Giorgio Ravera Date: Tue, 26 May 2026 20:02:17 +0000 (+0200) Subject: Splitted fetch & update functions in js X-Git-Url: http://git.giorgioravera.it/?a=commitdiff_plain;h=e40c57f8e67debe43fb7b05de1a3e40e5f423c82;p=network-manager.git Splitted fetch & update functions in js --- diff --git a/frontend/js/aliases.js b/frontend/js/aliases.js index 4485258..a01dca6 100644 --- a/frontend/js/aliases.js +++ b/frontend/js/aliases.js @@ -6,15 +6,14 @@ import { apiMap, fetchData } from './api.js'; // ----------------------------- // State variables // ----------------------------- -let allAliases = []; -let viewAliases = []; +let aliasesList = []; let editingAliasId = null; const sortState = { sortDirection: {}, lastSort: null }; // ----------------------------- -// Load all aliases into the table +// Fetch hosts from API // ----------------------------- -async function loadAliases(refresh = true) { +async function fetchAliases () { const loader = document.getElementById("loader"); const container = document.getElementById("devices-container"); const dataTable = document.getElementById("dataTable"); @@ -22,24 +21,27 @@ async function loadAliases(refresh = true) { // hide table during loading to avoid flickering and show loader dataTable.classList.add("d-none"); - if(refresh) { - try { - // Show loader - loader.style.display = "block"; + try { + // Show loader + loader.style.display = "block"; - // Fetch devices - allAliases = await fetchData(apiMap.aliases); - viewAliases = [...allAliases]; + // Fetch aliases + aliasesList = await fetchData(apiMap.aliases); - } catch (err) { - console.error(err?.message || "Error loading aliases"); - showToast(err?.message || "Error loading aliase", false); - allAliases = []; - // hide loader and show table - loader.style.display = "none"; - dataTable.classList.remove("d-none"); - } + } catch (err) { + console.error(err?.message || "Error loading aliases"); + showToast(err?.message || "Error loading aliase", false); + aliasesList = []; + // hide loader and show table + loader.style.display = "none"; + dataTable.classList.remove("d-none"); } +} + +// ----------------------------- +// Update table with current hosts +// ----------------------------- +function updateTable () { // DOM Reference const tbody = document.querySelector("#dataTable tbody"); @@ -52,7 +54,7 @@ async function loadAliases(refresh = true) { tbody.innerHTML = ""; // if no aliases, show an empty row - if (!allAliases.length) { + if (!aliasesList.length) { const trEmpty = document.createElement("tr"); const tdEmpty = document.createElement("td"); tdEmpty.colSpan = 7; @@ -69,7 +71,7 @@ async function loadAliases(refresh = true) { // fragment per performance const frag = document.createDocumentFragment(); - allAliases.forEach(h => { + aliasesList.forEach(h => { const id = Number(h.id); const tr = document.createElement("tr"); @@ -489,7 +491,8 @@ async function handleDeleteAlias(e, el) { showToast(data?.message || 'Alias deleted successfully', true); // Reload aliases - await loadAliases(); + await fetchAliases(); + updateTable(); return true; } catch (err) { @@ -560,7 +563,8 @@ async function initApp() { // Load data (aliases) try { - await loadAliases(); + await fetchAliases(); + updateTable(); } catch (err) { console.error(err?.message || "Error loading aliases"); showToast(err?.message || "Error loading aliases:", false); @@ -599,9 +603,8 @@ function initSearch() { e.stopPropagation(); // evita che arrivi al listener globale resetSorting(sortState); clearSearch(); // svuota input e ricarica tabella (come definito nella tua funzione) - viewAliases = [...allAliases]; - loadAliases(false); - filterData(''); // ripristina tabella''); + updateTable(); // aggiorna tabella + filterData(''); // ripristina tabella } }); } @@ -708,9 +711,8 @@ function handleKeyboard(e) { e.preventDefault(); // evita side-effect (es. chiusure di modali del browser) resetSorting(sortState); clearSearch(); // svuota input e ricarica tabella (come definito nella tua funzione) - viewAliases = [...allAliases]; - loadAliases(false); - filterData(''); // ripristina tabella''); + updateTable(); // aggiorna tabella + filterData(''); // ripristina tabella } // Button event delegation (Enter, Space) diff --git a/frontend/js/api.js b/frontend/js/api.js index b231567..c12be8a 100644 --- a/frontend/js/api.js +++ b/frontend/js/api.js @@ -24,6 +24,7 @@ export const apiMap = { // Fetch Data functions // ----------------------------- export async function fetchData(api) { + let items = []; // Fetch data diff --git a/frontend/js/devices.js b/frontend/js/devices.js index 72c5a1f..fbde4ac 100644 --- a/frontend/js/devices.js +++ b/frontend/js/devices.js @@ -6,15 +6,14 @@ import { apiMap, fetchData } from './api.js'; // ----------------------------- // State variables // ----------------------------- -let allDevices = []; -let viewDevices = []; +let devicesList = []; let editingHostId = null; const sortState = { sortDirection: {}, lastSort: null }; // ----------------------------- -// Load all devices into the table +// Fetch hosts from API // ----------------------------- -async function loadDevices(refresh = true) { +async function fetchDevices () { const loader = document.getElementById("loader"); const container = document.getElementById("devices-container"); const dataTable = document.getElementById("dataTable"); @@ -22,24 +21,27 @@ async function loadDevices(refresh = true) { // hide table during loading to avoid flickering and show loader dataTable.classList.add("d-none"); - if(refresh) { - try { - // Show loader - loader.style.display = "block"; + try { + // Show loader + loader.style.display = "block"; - // Fetch devices - allDevices = await fetchData(apiMap.devices); - viewDevices = [...allDevices]; + // Fetch devices + devicesList = await fetchData(apiMap.devices); - } catch (err) { - console.error(err?.message || "Error loading devices"); - showToast(err?.message || "Error loading devices", false); - allDevices = []; - // hide loader and show table - loader.style.display = "none"; - dataTable.classList.remove("d-none"); - } + } catch (err) { + console.error(err?.message || "Error loading devices"); + showToast(err?.message || "Error loading devices", false); + devicesList = []; + // hide loader and show table + loader.style.display = "none"; + dataTable.classList.remove("d-none"); } +} + +// ----------------------------- +// Update table with current devices +// ----------------------------- +function updateTable () { // DOM Reference const tbody = document.querySelector("#dataTable tbody"); @@ -52,7 +54,7 @@ async function loadDevices(refresh = true) { tbody.innerHTML = ""; // if no devices, show an empty row - if (!allDevices.length) { + if (!devicesList.length) { const trEmpty = document.createElement("tr"); const tdEmpty = document.createElement("td"); tdEmpty.colSpan = 7; @@ -69,10 +71,8 @@ async function loadDevices(refresh = true) { // fragment per performance const frag = document.createDocumentFragment(); - allDevices.forEach(d => { + devicesList.forEach(d => { - //const mixedId = d.id; - //const id = mixedId.slice(2); const id = d.id; let type = 0; @@ -606,7 +606,8 @@ async function handleDeleteDevice(e, el) { showToast(data?.message || 'Device deleted successfully', true); // Reload devices - await loadDevices(); + await fetchDevices(); + updateTable(); return true; } catch (err) { @@ -677,7 +678,8 @@ async function initApp() { // Load data (devices) try { - await loadDevices(); + await fetchDevices(); + updateTable(); } catch (err) { console.error(err?.message || "Error loading devices"); showToast(err?.message || "Error loading devices", false); @@ -716,9 +718,8 @@ function initSearch() { e.stopPropagation(); // evita che arrivi al listener globale resetSorting(sortState); clearSearch(); // svuota input e ricarica tabella (come definito nella tua funzione) - viewDevices = [...allDevices]; - loadDevices(false); - filterData(''); // ripristina tabella''); + updateTable(); // aggiorna tabella + filterData(''); // ripristina tabella } }); } @@ -825,9 +826,8 @@ function handleKeyboard(e) { e.preventDefault(); // evita side-effect (es. chiusure di modali del browser) resetSorting(sortState); clearSearch(); // svuota input e ricarica tabella (come definito nella tua funzione) - viewDevices = [...allDevices]; - loadDevices(false); - filterData(''); // ripristina tabella''); + updateTable(); // aggiorna tabella + filterData(''); // ripristina tabella } // Button event delegation (Enter, Space) diff --git a/frontend/js/hosts.js b/frontend/js/hosts.js index 408c0d3..acb2d46 100644 --- a/frontend/js/hosts.js +++ b/frontend/js/hosts.js @@ -6,15 +6,14 @@ import { apiMap, fetchData } from './api.js'; // ----------------------------- // State variables // ----------------------------- -let allHosts = []; -let viewHosts = []; +let hostsList = []; let editingHostId = null; const sortState = { sortDirection: {}, lastSort: null }; // ----------------------------- -// Load all hosts into the table +// Fetch hosts from API // ----------------------------- -async function loadHosts(refresh = true) { +async function fetchHosts () { const loader = document.getElementById("loader"); const container = document.getElementById("devices-container"); const dataTable = document.getElementById("dataTable"); @@ -22,24 +21,27 @@ async function loadHosts(refresh = true) { // hide table during loading to avoid flickering and show loader dataTable.classList.add("d-none"); - if(refresh) { - try { - // Show loader - loader.style.display = "block"; + try { + // Show loader + loader.style.display = "block"; - // Fetch hosts - allHosts = await fetchData(apiMap.hosts); - viewHosts = [...allHosts]; + // Fetch hosts + hostsList = await fetchData(apiMap.hosts); - } catch (err) { - console.error(err?.message || "Error loading hosts"); - showToast(err?.message || "Error loading hosts", false); - allHosts = []; - // hide loader and show table - loader.style.display = "none"; - dataTable.classList.remove("d-none"); - } + } catch (err) { + console.error(err?.message || "Error loading hosts"); + showToast(err?.message || "Error loading hosts", false); + hostsList = []; + // hide loader and show table + loader.style.display = "none"; + dataTable.classList.remove("d-none"); } +} + +// ----------------------------- +// Update table with current hosts +// ----------------------------- +function updateTable () { // DOM Reference const tbody = document.querySelector("#dataTable tbody"); @@ -52,7 +54,7 @@ async function loadHosts(refresh = true) { tbody.innerHTML = ""; // if no hosts, show an empty row - if (!allHosts.length) { + if (!hostsList.length) { const trEmpty = document.createElement("tr"); const tdEmpty = document.createElement("td"); tdEmpty.colSpan = 7; @@ -69,7 +71,7 @@ async function loadHosts(refresh = true) { // fragment per performance const frag = document.createDocumentFragment(); - allHosts.forEach(h => { + hostsList.forEach(h => { const id = Number(h.id); const tr = document.createElement("tr"); @@ -449,7 +451,8 @@ async function handleAddHostSubmit(e) { if (ok !== false) { // close modal and reload hosts closeAddHostModal(); - await loadHosts(); + await fetchHosts(); + updateTable(); return true } @@ -513,7 +516,8 @@ async function handleDeleteHost(e, el) { showToast(data?.message || 'Host deleted successfully', true); // Reload hosts - await loadHosts(); + await fetchHosts(); + updateTable(); return true; } catch (err) { @@ -584,7 +588,8 @@ async function initApp() { // Load data (hosts) try { - await loadHosts(); + await fetchHosts(); + updateTable(); } catch (err) { console.error(err?.message || "Error loading hosts"); showToast(err?.message || "Error loading hosts", false); @@ -623,8 +628,7 @@ function initSearch() { e.stopPropagation(); // evita che arrivi al listener globale resetSorting(sortState); clearSearch(); // svuota input e ricarica tabella (come definito nella tua funzione) - viewHosts = [...allHosts]; - loadHosts(false); + updateTable(); // aggiorna tabella filterData(''); // ripristina tabella } }); @@ -732,8 +736,7 @@ function handleKeyboard(e) { e.preventDefault(); // evita side-effect (es. chiusure di modali del browser) resetSorting(sortState); clearSearch(); // svuota input e ricarica tabella (come definito nella tua funzione) - viewHosts = [...allHosts]; - loadHosts(false); + updateTable(); // aggiorna tabella filterData(''); // ripristina tabella } diff --git a/frontend/js/leases.js b/frontend/js/leases.js index 0056a38..c4d28e4 100644 --- a/frontend/js/leases.js +++ b/frontend/js/leases.js @@ -6,14 +6,13 @@ import { apiMap, fetchData } from './api.js'; // ----------------------------- // State variables // ----------------------------- -let allLeases = []; -let viewLeases = []; +let leasesList = []; const sortState = { sortDirection: {}, lastSort: null }; // ----------------------------- // Load all leases into the table // ----------------------------- -async function loadLeases(refresh = true) { +async function fetchLeases () { const loader = document.getElementById("loader"); const container = document.getElementById("devices-container"); const dataTable = document.getElementById("dataTable"); @@ -21,24 +20,27 @@ async function loadLeases(refresh = true) { // hide table during loading to avoid flickering and show loader dataTable.classList.add("d-none"); - if(refresh) { - try { - // Show loader - loader.style.display = "block"; + try { + // Show loader + loader.style.display = "block"; - // Fetch leases - allLeases = await fetchData(apiMap.leases); - viewLeases = [...allLeases]; + // Fetch leases + leasesList = await fetchData(apiMap.leases); - } catch (err) { - console.error(err?.message || "Error loading leases"); - showToast(err?.message || "Error loading leases", false); - allLeases = []; - // hide loader and show table - loader.style.display = "none"; - dataTable.classList.remove("d-none"); - } + } catch (err) { + console.error(err?.message || "Error loading leases"); + showToast(err?.message || "Error loading leases", false); + leasesList = []; + // hide loader and show table + loader.style.display = "none"; + dataTable.classList.remove("d-none"); } +} + +// ----------------------------- +// Update table with current hosts +// ----------------------------- +function updateTable () { // DOM Reference const tbody = document.querySelector("#dataTable tbody"); @@ -51,7 +53,7 @@ async function loadLeases(refresh = true) { tbody.innerHTML = ""; // if no leases, show an empty row - if (!allLeases.length) { + if (!leasesList.length) { const trEmpty = document.createElement("tr"); const tdEmpty = document.createElement("td"); tdEmpty.colSpan = 7; @@ -68,7 +70,7 @@ async function loadLeases(refresh = true) { // fragment per performance const frag = document.createDocumentFragment(); - allLeases.forEach(l => { + leasesList.forEach(l => { const id = Number(l.id); const tr = document.createElement("tr"); @@ -413,7 +415,8 @@ async function handleAddHostSubmit(e) { if (ok !== false) { // close modal and reload hosts closeAddHostModal(); - await loadLeases(); + await fetchLeases(); + updateTable(); return true } @@ -477,7 +480,8 @@ async function handleDeleteLease(e, el) { showToast(data?.message || 'Lease deleted successfully', true); // Reload leases - await loadLeases(); + await fetchLeases(); + updateTable(); return true; } catch (err) { @@ -548,7 +552,8 @@ async function initApp() { // Load data (leases) try { - await loadLeases(); + await fetchLeases(); + updateTable(); } catch (err) { console.error(err?.message || "Error loading dhcp leases"); showToast(err?.message || "Error loading dhcp leases", false); @@ -587,9 +592,8 @@ function initSearch() { e.stopPropagation(); // evita che arrivi al listener globale resetSorting(sortState); clearSearch(); // svuota input e ricarica tabella (come definito nella tua funzione) - viewLeases = [...allLeases]; - loadLeases(false); - filterData(''); // ripristina tabella''); + updateTable(); // aggiorna tabella + filterData(''); // ripristina tabella } }); } @@ -688,9 +692,8 @@ function handleKeyboard(e) { e.preventDefault(); // evita side-effect (es. chiusure di modali del browser) resetSorting(sortState); clearSearch(); // svuota input e ricarica tabella (come definito nella tua funzione) - viewLeases = [...allLeases]; - loadLeases(false); - filterData(''); // ripristina tabella''); + updateTable(); // aggiorna tabella + filterData(''); // ripristina tabella } // Button event delegation (Enter, Space)