From c90c6b5c9061bb89b80829f32545a5ae01aa4616 Mon Sep 17 00:00:00 2001
From: jokob-sk <jokob-sk@gmail.com>
Date: Sat, 19 Jul 2025 22:00:57 +1000
Subject: [PATCH] network topology refactor

---
 front/css/app.css                       |  11 +++
 front/network.php                       | 114 +++++++++++++++++++-----
 front/php/templates/language/ar_ar.json |   2 +
 front/php/templates/language/ca_ca.json |   2 +
 front/php/templates/language/cs_cz.json |   2 +
 front/php/templates/language/de_de.json |   2 +
 front/php/templates/language/en_us.json |   2 +
 front/php/templates/language/es_es.json |   2 +
 front/php/templates/language/fr_fr.json |   2 +
 front/php/templates/language/it_it.json |   2 +
 front/php/templates/language/nb_no.json |   2 +
 front/php/templates/language/pl_pl.json |   2 +
 front/php/templates/language/pt_br.json |   2 +
 front/php/templates/language/ru_ru.json |   2 +
 front/php/templates/language/tr_tr.json |   2 +
 front/php/templates/language/uk_ua.json |   2 +
 front/php/templates/language/zh_cn.json |   2 +
 17 files changed, 134 insertions(+), 21 deletions(-)

diff --git a/front/css/app.css b/front/css/app.css
index ef7feb7c..97d5df3b 100755
--- 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
 {
diff --git a/front/network.php b/front/network.php
index a7a0bdeb..9ba65479 100755
--- 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
@@ -99,9 +118,7 @@
 
       const portLabel = node.node_ports_count ? ` (${node.node_ports_count})` : '';
       const icon = atob(node.node_icon);
-      const id = node.node_mac.replace(/:/g, '_');
-
-      
+      const id = node.node_mac.replace(/:/g, '_');      
 
       html += `
         <li class="networkNodeTabHeaders ${i === 0 ? 'active' : ''}">
@@ -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>
 
 
diff --git a/front/php/templates/language/ar_ar.json b/front/php/templates/language/ar_ar.json
index 5edc4541..0fcf202e 100755
--- 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": "الحالة",
diff --git a/front/php/templates/language/ca_ca.json b/front/php/templates/language/ca_ca.json
index 69355fb5..27a4ebf0 100755
--- 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",
diff --git a/front/php/templates/language/cs_cz.json b/front/php/templates/language/cs_cz.json
index b586eb26..34a5a9c6 100755
--- 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": "",
diff --git a/front/php/templates/language/de_de.json b/front/php/templates/language/de_de.json
index c18ca9b0..0a7ab0ad 100755
--- 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",
diff --git a/front/php/templates/language/en_us.json b/front/php/templates/language/en_us.json
index f573b069..5c679c9c 100755
--- 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",
diff --git a/front/php/templates/language/es_es.json b/front/php/templates/language/es_es.json
index 39471333..48ae02c4 100755
--- 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",
diff --git a/front/php/templates/language/fr_fr.json b/front/php/templates/language/fr_fr.json
index 0b79605f..95d36f91 100755
--- 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",
diff --git a/front/php/templates/language/it_it.json b/front/php/templates/language/it_it.json
index fff9ff42..b8336552 100755
--- 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",
diff --git a/front/php/templates/language/nb_no.json b/front/php/templates/language/nb_no.json
index 5384030e..cc561acb 100755
--- 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",
diff --git a/front/php/templates/language/pl_pl.json b/front/php/templates/language/pl_pl.json
index da5f6b05..8a6d931b 100755
--- 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",
diff --git a/front/php/templates/language/pt_br.json b/front/php/templates/language/pt_br.json
index 4f6c91c2..92aa3cb4 100755
--- 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": "",
diff --git a/front/php/templates/language/ru_ru.json b/front/php/templates/language/ru_ru.json
index eede267a..bf48023f 100755
--- 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": "Состояние",
diff --git a/front/php/templates/language/tr_tr.json b/front/php/templates/language/tr_tr.json
index 6c133306..f28323c1 100755
--- 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": "",
diff --git a/front/php/templates/language/uk_ua.json b/front/php/templates/language/uk_ua.json
index 405a856a..c4d3c06d 100755
--- 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": "Держава",
diff --git a/front/php/templates/language/zh_cn.json b/front/php/templates/language/zh_cn.json
index d31600cf..997b62a3 100755
--- 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": "状态",