Splitted fetch & update functions in js

diff --git a/frontend/js/aliases.js b/frontend/js/aliases.js
index 44852582c3103c94b4ad5b0f615d8d827ff618dd..a01dca6fd4f3f1c9086d4d411c4771e7fc355202 100644 (file)
--- 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 b23156766935627028a33b2d78328f4dd2e45bed..c12be8a8ef30a250960d8a48d9f4aaebd51466bc 100644 (file)
--- 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 72c5a1f7fac610cbafd579a87e8fbad37413f116..fbde4ac6c57a43d2ec6995504a1aa40051103e0c 100644 (file)
--- 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 408c0d3de195131cad769aa0e05e8f61395d15c0..acb2d46c4a05512155d128a7fc971867c0361734 100644 (file)
--- 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 0056a38e304b1a0948f9a1261000aa19f0ab3c09..c4d28e4817f3b59865b30fdaad675959beda74f3 100644 (file)
--- 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)