network topology refactor

2025-12-07 09:36:05 -08:00 · 2025-07-19 22:00:57 +10:00
parent 26f0d0ac2f
commit c90c6b5c90
17 changed files with 134 additions and 21 deletions
--- a/front/css/app.css
+++ b/front/css/app.css
@@ -1656,6 +1656,17 @@ input[readonly] {
 /* NETWORK page */
 /* ----------------------------------------------------------------- */

+#toggleFilters
+{
+    display: block;
+    position: absolute;
+    padding-left: 32px;
+    padding-top: 10px;
+    background-color: inherit;
+    z-index: 3;
+    width: 190px;
+}
+
 /* AdminLTE overrides */
 #networkTree .box
 {
--- a/front/network.php
+++ b/front/network.php
@@ -5,15 +5,6 @@
  
 ?>
    
-  <!-- // Create Top level tabs   (List of network devices), explanation of the terminology below:
-  //
-  //             Switch 1 (node) 
-  //              /(p1)    \ (p2)     <----- port numbers
-  //             /          \
-  //   Smart TV (leaf)      Switch 2 (node (for the PC) and leaf (for Switch 1))
-  //                          \
-  //                          PC (leaf) <------- leafs are not included in this SQL query -->
-
 <script>
  // show spinning icon
  showSpinner()
@@ -27,6 +18,25 @@
    </a>
  </span>

+  <div id="toggleFilters" class="">    
+      <div class="checkbox icheck col-xs-12">
+        <label>
+          <input type="checkbox" name="showOffline" checked>
+            <div style="margin-left: 10px; display: inline-block; vertical-align: top;"> 
+              <?= lang('Network_ShowOffline');?>
+            </div>
+        </label>
+      </div>
+      <div class="checkbox icheck col-xs-12">
+        <label>
+          <input type="checkbox" name="showArchived">
+            <div style="margin-left: 10px; display: inline-block; vertical-align: top;"> 
+              <?= lang('Network_ShowArchived');?>
+            </div>
+        </label>      
+      </div>    
+  </div>
+
  <div id="networkTree" class="drag">
    <!-- Tree topology Placeholder -->
  </div>
@@ -62,15 +72,24 @@
  // -----------------------------------------------------------------------
  function loadNetworkNodes() {

-    // console.log(getSetting("NETWORK_DEVICE_TYPES").replace("[","").replace("]",""));
+    // Create Top level tabs   (List of network devices), explanation of the terminology below:
+    //
+    //             Switch 1 (node) 
+    //              /(p1)    \ (p2)     <----- port numbers
+    //             /          \
+    //   Smart TV (leaf)      Switch 2 (node (for the PC) and leaf (for Switch 1))
+    //                          \
+    //                          PC (leaf) <------- leafs are not included in this SQL query 

+
+    const networkDeviceTypes = getSetting("NETWORK_DEVICE_TYPES").replace("[", "").replace("]", "");
    const rawSql = `
      SELECT node_name, node_mac, online, node_type, node_ports_count, parent_mac, node_icon, node_alert
      FROM (
        SELECT a.devName as node_name, a.devMac as node_mac, a.devPresentLastScan as online,
              a.devType as node_type, a.devParentMAC as parent_mac, a.devIcon as node_icon, a.devAlertDown as node_alert
        FROM Devices a
-        WHERE a.devType in (${getSetting("NETWORK_DEVICE_TYPES").replace("[","").replace("]","")}) AND devIsArchived = 0
+        WHERE a.devType IN (${networkDeviceTypes}) and a.devIsArchived = 0
      ) t1
      LEFT JOIN (
        SELECT b.devParentMAC as node_mac_2, count() as node_ports_count
@@ -101,8 +120,6 @@
      const icon = atob(node.node_icon);
      const id = node.node_mac.replace(/:/g, '_');      

-      
-
      html += `
        <li class="networkNodeTabHeaders ${i === 0 ? 'active' : ''}">
          <a href="#${id}" data-mytabmac="${node.node_mac}" id="${id}_id" data-toggle="tab" title="${node.node_name}">
@@ -331,13 +348,42 @@
    });
  }

-  
  // INIT
-  const apiUrl = `php/server/dbHelper.php?action=read&rawSql=${btoa(encodeURIComponent(
-                    `select *, CASE WHEN devAlertDown !=0 AND devPresentLastScan=0 THEN "Down"
-                                    WHEN devPresentLastScan=1 THEN "On-line"
-                                    ELSE "Off-line" END as devStatus 
-                      from Devices where devIsArchived = 0	`))}`;
+
+  const showArchived = getCache('showArchived') == "true";
+  const showOffline = getCache('showOffline') == "true";
+
+  console.log('showArchived:', showArchived);
+  console.log('showOffline:', showOffline);
+
+  // Build WHERE conditions dynamically
+  let filters = [];
+
+  if (!showArchived) {
+    filters.push(`a.devIsArchived = 0`);
+  }
+
+  if (!showOffline) {
+    filters.push(`a.devPresentLastScan != 0`);
+  }
+
+  // Assemble WHERE clause only if filters exist
+  const whereClause = filters.length > 0 ? `WHERE ${filters.join(' AND ')}` : '';
+
+  console.log(whereClause);
+
+  const rawSql = `
+    SELECT *,
+      CASE
+        WHEN devAlertDown != 0 AND devPresentLastScan = 0 THEN "Down"
+        WHEN devPresentLastScan = 1 THEN "On-line"
+        ELSE "Off-line"
+      END as devStatus
+    FROM Devices a
+    ${whereClause}
+  `;
+
+  const apiUrl = `php/server/dbHelper.php?action=read&rawSql=${btoa(encodeURIComponent(rawSql))}`;

  $.get(apiUrl, function (data) {
  
@@ -795,6 +841,32 @@ initDeviceNamesFromMACs();
 // init pop up hover  boxes for device details
 initHoverNodeInfo();

+// display toggles
+$(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');
+  }
+
+  // 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);
+
+    // Refresh page after a brief delay to ensure cache is written
+    setTimeout(() => {
+      location.reload();
+    }, 100);
+  });
+});
+
 </script>


--- a/front/php/templates/language/ar_ar.json
+++ b/front/php/templates/language/ar_ar.json
@@ -528,6 +528,8 @@
    "Network_Root": "الجذر",
    "Network_Root_Not_Configured": "الجذر غير مكون",
    "Network_Root_Unconfigurable": "الجذر غير قابل للتكوين",
+    "Network_ShowArchived": "",
+    "Network_ShowOffline": "",
    "Network_Table_Hostname": "اسم المضيف",
    "Network_Table_IP": "عنوان IP",
    "Network_Table_State": "الحالة",
--- a/front/php/templates/language/ca_ca.json
+++ b/front/php/templates/language/ca_ca.json
@@ -528,6 +528,8 @@
    "Network_Root": "Node arrel",
    "Network_Root_Not_Configured": "Seleccioneu un tipus de dispositiu de xarxa, per exemple un tipus <b>Gateway</b>, al camp <b>Tipus</b>del <a href=\"deviceDetails.php?mac=Internet\">dispositiu arrel d'Internet</a> per començar a configurar aquesta pantalla. <br/><br/>. Podeu trobar més documentació a la <a href=\"https://github.com/jokob-sk/NetAlertX/blob/main/docs/NETWORK_TREE.md\" target=\"_blank\">Guia de com configurar la vostra pàgina de xarxa</a>",
    "Network_Root_Unconfigurable": "Arrel no configurable",
+    "Network_ShowArchived": "",
+    "Network_ShowOffline": "",
    "Network_Table_Hostname": "Hostname",
    "Network_Table_IP": "IP",
    "Network_Table_State": "Estat",
--- a/front/php/templates/language/cs_cz.json
+++ b/front/php/templates/language/cs_cz.json
@@ -528,6 +528,8 @@
    "Network_Root": "",
    "Network_Root_Not_Configured": "",
    "Network_Root_Unconfigurable": "",
+    "Network_ShowArchived": "",
+    "Network_ShowOffline": "",
    "Network_Table_Hostname": "",
    "Network_Table_IP": "",
    "Network_Table_State": "",
--- a/front/php/templates/language/de_de.json
+++ b/front/php/templates/language/de_de.json
@@ -565,6 +565,8 @@
    "Network_Root": "Wurzelknoten",
    "Network_Root_Not_Configured": "",
    "Network_Root_Unconfigurable": "Nicht konfigurierbare Wurzel",
+    "Network_ShowArchived": "",
+    "Network_ShowOffline": "",
    "Network_Table_Hostname": "Gerätename",
    "Network_Table_IP": "IP",
    "Network_Table_State": "Status",
--- a/front/php/templates/language/en_us.json
+++ b/front/php/templates/language/en_us.json
@@ -528,6 +528,8 @@
    "Network_Root": "Root node",
    "Network_Root_Not_Configured": "Select a network device type, for example a <b>Gateway</b>, in the <b>Type</b> field of the <a href=\"deviceDetails.php?mac=Internet\">the Internet root device</a> to start configuring this screen. <br/><br/> More documentation can be found in the <a href=\"https://github.com/jokob-sk/NetAlertX/blob/main/docs/NETWORK_TREE.md\" target=\"_blank\">How to setup your Network page</a> guide",
    "Network_Root_Unconfigurable": "Unconfigurable root",
+    "Network_ShowArchived": "Show Archived",
+    "Network_ShowOffline": "Show Offline",
    "Network_Table_Hostname": "Hostname",
    "Network_Table_IP": "IP",
    "Network_Table_State": "State",
--- a/front/php/templates/language/es_es.json
+++ b/front/php/templates/language/es_es.json
@@ -563,6 +563,8 @@
    "Network_Root": "Nodo principal",
    "Network_Root_Not_Configured": "Seleccione un tipo de dispositivo de red, por ejemplo un <b>Gateway</b>, en el campo <b>Tipo</b> del <a href=\"deviceDetails.php?mac=Internet\">dispositivo principal de Internet</a> para empezar a configurar esta pantalla. <br/><br/>Puede encontrar más documentación en la guía <a href=\"https://github.com/jokob-sk/NetAlertX/blob/main/docs/NETWORK_TREE.md\" target=\"_blank\">¿Cómo configurar su página de Red?</a>",
    "Network_Root_Unconfigurable": "Root no configurable",
+    "Network_ShowArchived": "",
+    "Network_ShowOffline": "",
    "Network_Table_Hostname": "Nombre de host",
    "Network_Table_IP": "Dirección IP",
    "Network_Table_State": "Estado",
--- a/front/php/templates/language/fr_fr.json
+++ b/front/php/templates/language/fr_fr.json
@@ -528,6 +528,8 @@
    "Network_Root": "Noeud racine",
    "Network_Root_Not_Configured": "Pour commencer la configuration de cet écran, sélectionner un type d'appareil réseau, par exemple une <b>Gateway</b>, dans le champ <b>Type</b> de <a href=\"deviceDetails.php?mac=Internet\">l'appareil racine pour Internet</a> <br/><br/> Plus d'informations dans le guide <a href=\"https://github.com/jokob-sk/NetAlertX/blob/main/docs/NETWORK_TREE.md\" target=\"_blank\">Comment configurer votre page Réseau</a>",
    "Network_Root_Unconfigurable": "Racine non configurable",
+    "Network_ShowArchived": "",
+    "Network_ShowOffline": "",
    "Network_Table_Hostname": "Nom de hôte",
    "Network_Table_IP": "IP",
    "Network_Table_State": "État",
--- a/front/php/templates/language/it_it.json
+++ b/front/php/templates/language/it_it.json
@@ -528,6 +528,8 @@
    "Network_Root": "Nodo radice",
    "Network_Root_Not_Configured": "Seleziona un tipo di dispositivo di rete, ad esempio un <b>Gateway</b>, nel campo <b>Tipo</b> del <a href=\"deviceDetails.php?mac=Internet\">dispositivo root Internet</a> per iniziare a configurare questa schermata. <br/><br/> Ulteriore documentazione è disponibile nella guida <a href=\"https://github.com/jokob-sk/NetAlertX/blob/main/docs/NETWORK_TREE.md\" target=\"_blank\"> Come impostare la tua pagina di rete</a>",
    "Network_Root_Unconfigurable": "Radice non configurabile",
+    "Network_ShowArchived": "",
+    "Network_ShowOffline": "",
    "Network_Table_Hostname": "Nome host",
    "Network_Table_IP": "IP",
    "Network_Table_State": "Stato",
--- a/front/php/templates/language/nb_no.json
+++ b/front/php/templates/language/nb_no.json
@@ -528,6 +528,8 @@
    "Network_Root": "Rotnode",
    "Network_Root_Not_Configured": "Velg en nettverksenhetstype, for eksempel <b>Gateway</b>, i <b>Type</b> -feltet til <a href=\"deviceDetails.php?mac=Internet\">Internet Root -enheten</a> for å begynne å konfigurere på denne siden. <br/><br/> Mer dokumentasjon finner du i <a href=\"https://github.com/jokob-sk/NetAlertX/blob/main/docs/NETWORK_TREE.md\" target=\"_blank\">Hvordan konfigurere nettverkssiden din</a> guide",
    "Network_Root_Unconfigurable": "Ukonfigurerbar rot",
+    "Network_ShowArchived": "",
+    "Network_ShowOffline": "",
    "Network_Table_Hostname": "Vertsnavn",
    "Network_Table_IP": "IP",
    "Network_Table_State": "Tilstand",
--- a/front/php/templates/language/pl_pl.json
+++ b/front/php/templates/language/pl_pl.json
@@ -528,6 +528,8 @@
    "Network_Root": "Węzeł główny",
    "Network_Root_Not_Configured": "Wybierz typ urządzenia sieciowego, na przykład <b>Brama</b>, w polu <b>Typ</b> pole formularza <a href=\"deviceDetails.php?mac=Internet\">urządzenia głównego Internetu</a> aby rozpocząć konfigurację tego widoku. <br/><br/> Więcej informacji znajdziesz w przewodniku <a href=\"https://github.com/jokob-sk/NetAlertX/blob/main/docs/NETWORK_TREE.md\" target=\"_blank\">Jak skonfigurować stronę Sieć </a>",
    "Network_Root_Unconfigurable": "Niekonfigurowalny węzeł główny",
+    "Network_ShowArchived": "",
+    "Network_ShowOffline": "",
    "Network_Table_Hostname": "Nazwa hosta",
    "Network_Table_IP": "Adres IP",
    "Network_Table_State": "Stan",
--- a/front/php/templates/language/pt_br.json
+++ b/front/php/templates/language/pt_br.json
@@ -528,6 +528,8 @@
    "Network_Root": "",
    "Network_Root_Not_Configured": "",
    "Network_Root_Unconfigurable": "",
+    "Network_ShowArchived": "",
+    "Network_ShowOffline": "",
    "Network_Table_Hostname": "",
    "Network_Table_IP": "",
    "Network_Table_State": "",
--- a/front/php/templates/language/ru_ru.json
+++ b/front/php/templates/language/ru_ru.json
@@ -528,6 +528,8 @@
    "Network_Root": "Корневой узел",
    "Network_Root_Not_Configured": "Выберите тип сетевого устройства, например <b>Шлюз</b>, в поле <b>Тип</b> <a href=\"deviceDetails.php?mac=Internet\">корневого Интернет-устройства</a>, чтобы начать настройку этого экрана. <br/><br/> Дополнительную документацию можно найти в руководстве <a href=\"https://github.com/jokob-sk/NetAlertX/blob/main/docs/NETWORK_TREE.md\" target=\"_blank \">Как настроить свою сетевую страницу</a>",
    "Network_Root_Unconfigurable": "Ненастраиваемый ROOT",
+    "Network_ShowArchived": "",
+    "Network_ShowOffline": "",
    "Network_Table_Hostname": "Имя хоста",
    "Network_Table_IP": "IP",
    "Network_Table_State": "Состояние",
--- a/front/php/templates/language/tr_tr.json
+++ b/front/php/templates/language/tr_tr.json
@@ -528,6 +528,8 @@
    "Network_Root": "",
    "Network_Root_Not_Configured": "",
    "Network_Root_Unconfigurable": "",
+    "Network_ShowArchived": "",
+    "Network_ShowOffline": "",
    "Network_Table_Hostname": "",
    "Network_Table_IP": "",
    "Network_Table_State": "",
--- a/front/php/templates/language/uk_ua.json
+++ b/front/php/templates/language/uk_ua.json
@@ -528,6 +528,8 @@
    "Network_Root": "Кореневий вузол",
    "Network_Root_Not_Configured": "Виберіть тип мережевого пристрою, наприклад <b>Шлюз</b>, у полі <b>Тип</b> <a href=\"deviceDetails.php?mac=Internet\">кореневого Інтернет-пристрою</a>, щоб розпочати налаштування цього екрана. <br/><br/> Додаткову документацію можна знайти в <a href=\"https://github.com/jokob-sk/NetAlertX/blob/main/docs/NETWORK_TREE.md\" target=\"_blank\"> Посібник із налаштування сторінки мережі</a>",
    "Network_Root_Unconfigurable": "Ненастроюваний root",
+    "Network_ShowArchived": "",
+    "Network_ShowOffline": "",
    "Network_Table_Hostname": "Ім'я хоста",
    "Network_Table_IP": "IP",
    "Network_Table_State": "Держава",
--- a/front/php/templates/language/zh_cn.json
+++ b/front/php/templates/language/zh_cn.json
@@ -528,6 +528,8 @@
    "Network_Root": "根节点",
    "Network_Root_Not_Configured": "在<a href=\"deviceDetails.php?mac=Internet\">Internet 根设备</a>的<b>类型</b>字段中选择一个网络设备类型，例如<b>网关</b>，以开始配置此屏幕。<br/><br/>更多文档可在<a href=\"https://github.com/jokob-sk/NetAlertX/blob/main/docs/NETWORK_TREE.md\" target=\"_blank\">如何设置您的网络页面</a>指南中找到",
    "Network_Root_Unconfigurable": "无法配置根",
+    "Network_ShowArchived": "",
+    "Network_ShowOffline": "",
    "Network_Table_Hostname": "主机名",
    "Network_Table_IP": "IP",
    "Network_Table_State": "状态",