feat: Implement network topology management with API integration

- Added network-api.js for handling API calls related to network devices and nodes.
- Introduced network-events.js to manage event handlers for node interactions and window resizing.
- Created network-init.js for initializing network topology on page load and fetching device data.
- Developed network-tabs.js for rendering network tabs and managing tab content.
- Implemented network-tree.js for constructing and rendering the tree hierarchy of network devices.
- Enhanced error handling and user feedback for API calls and data loading processes.
- Included caching mechanisms for user preferences regarding device visibility.

front/js/network-events.js

@@ -0,0 +1,133 @@
+// network-events.js
+// Event handlers and tree node click interactions
+
+/**
+ * Handle network node click - select correct tab and scroll to appropriate content
+ * @param {HTMLElement} el - The clicked element
+ */
+function handleNodeClick(el)
+{
+
+  isNetworkDevice = $(el).data("devisnetworknodedynamic") == 1;
+  targetTabMAC = ""
+  thisDevMac= $(el).data("mac");
+
+  if (isNetworkDevice == false)
+  {
+    targetTabMAC = $(el).data("parentmac");
+  } else
+  {
+    targetTabMAC = thisDevMac;
+  }
+
+  var targetTab = $(`a[data-mytabmac="${targetTabMAC}"]`);
+
+  if (targetTab.length) {
+    // Simulate a click event on the target tab
+    targetTab.click();
+
+
+  }
+
+  if (isNetworkDevice) {
+    // Smooth scroll to the tab content
+    $('html, body').animate({
+      scrollTop: targetTab.offset().top - 50
+    }, 500); // Adjust the duration as needed
+  }  else {
+    $("tr.selected").removeClass("selected");
+    $(`tr[data-mac="${thisDevMac}"]`).addClass("selected");
+
+    const tableId = "table_leafs_" + targetTabMAC.replace(/:/g, '_');
+    const $table = $(`#${tableId}`).DataTable();
+
+    // Find the row index (in the full data set) that matches
+    const rowIndex = $table
+      .rows()
+      .eq(0)
+      .filter(function(idx) {
+        return $table.row(idx).node().getAttribute("data-mac") === thisDevMac;
+      });
+
+    if (rowIndex.length > 0) {
+      // Change to the page where this row is
+      $table.page(Math.floor(rowIndex[0] / $table.page.len())).draw(false);
+
+      // Delay needed so the row is in the DOM after page draw
+      setTimeout(() => {
+        const rowNode = $table.row(rowIndex[0]).node();
+        $(rowNode).addClass("selected");
+
+        // Smooth scroll to the row
+        $('html, body').animate({
+          scrollTop: $(rowNode).offset().top - 50
+        }, 500);
+      }, 0);
+    }
+  }
+}
+
+/**
+ * Handle window resize events to recheck tab overflow
+ */
+let resizeTimeout;
+$(window).on('resize', function () {
+  clearTimeout(resizeTimeout);
+  resizeTimeout = setTimeout(() => {
+    checkTabsOverflow();
+  }, 100);
+});
+
+/**
+ * Initialize page on document ready
+ * Sets up toggle filters and event handlers
+ */
+$(document).ready(function () {
+  // Restore cached values on load
+  const cachedOffline = getCache('showOffline');
+  if (cachedOffline !== null) {
+    $('input[name="showOffline"]').prop('checked', cachedOffline === 'true');
+  }
+
+  const cachedArchived = getCache('showArchived');
+  if (cachedArchived !== null) {
+    $('input[name="showArchived"]').prop('checked', cachedArchived === 'true');
+  }
+
+  // Function to enable/disable showArchived based on showOffline
+  function updateArchivedToggle() {
+    const isOfflineChecked = $('input[name="showOffline"]').is(':checked');
+    const archivedToggle = $('input[name="showArchived"]');
+
+    if (!isOfflineChecked) {
+      archivedToggle.prop('checked', false);
+      archivedToggle.prop('disabled', true);
+      setCache('showArchived', false);
+    } else {
+      archivedToggle.prop('disabled', false);
+    }
+  }
+
+  // Initial state on load
+  updateArchivedToggle();
+
+  // Bind change event for both toggles
+  $('input[name="showOffline"], input[name="showArchived"]').on('change', function () {
+    const name = $(this).attr('name');
+    const value = $(this).is(':checked');
+    setCache(name, value);
+
+    // Update state of showArchived if showOffline changed
+    if (name === 'showOffline') {
+      updateArchivedToggle();
+    }
+
+    // Refresh page after a brief delay to ensure cache is written
+    setTimeout(() => {
+      location.reload();
+    }, 100);
+  });
+
+  // init pop up hover  boxes for device details
+  initHoverNodeInfo();
+});