From af8c053ded603a24f7677ed47a015e422dbdca05 Mon Sep 17 00:00:00 2001
From: Jokob-sk <jokob.sk@gmail.com>
Date: Mon, 1 Apr 2024 12:26:28 +1100
Subject: [PATCH] UI hide Devices sections work #612

---
 front/devices.php                       | 24 ++++++++++++--------
 front/js/pialert_common.js              |  2 +-
 front/js/ui_components.js               | 30 +++++++++++++++++++++++++
 front/php/templates/language/en_us.json |  4 ++--
 pialert/initialise.py                   |  2 +-
 5 files changed, 49 insertions(+), 13 deletions(-)

diff --git a/front/devices.php b/front/devices.php
index 7d05ab8a..bec3aac1 100755
--- a/front/devices.php
+++ b/front/devices.php
@@ -25,6 +25,8 @@
   checkPermissions([$dbPath, $confPath]);
 ?>
 
+<script src="js/ui_components.js"></script>
+
 <!-- Page ------------------------------------------------------------------ -->
   <div class="content-wrapper">
 
@@ -39,8 +41,9 @@
 <!-- Main content ---------------------------------------------------------- -->
     <section class="content">
 
-<!-- top small box 1 ------------------------------------------------------- -->
-      <div class="row">
+      <!-- Tile toggle cards ------------------------------------------------------- -->
+      <div class="row" id="TileCards">
+        <!-- top small box 1 ------------------------------------------------------- -->
         <div class="col-lg-2 col-sm-4 col-xs-6">
           <a href="#" onclick="javascript: initializeDatatable('my');">
           <div class="small-box bg-aqua">
@@ -52,7 +55,7 @@
           </a>
         </div>
         
-<!-- top small box 2 ------------------------------------------------------- -->
+        <!-- top small box 2 ------------------------------------------------------- -->
         <div class="col-lg-2 col-sm-4 col-xs-6">
           <a href="#" onclick="javascript: initializeDatatable('connected');">
           <div class="small-box bg-green">
@@ -64,7 +67,7 @@
           </a>
         </div>
 
-<!-- top small box 3 ------------------------------------------------------- -->
+        <!-- top small box 3 ------------------------------------------------------- -->
         <div class="col-lg-2 col-sm-4 col-xs-6">
           <a href="#" onclick="javascript: initializeDatatable('favorites');">
           <div class="small-box bg-yellow">
@@ -76,7 +79,7 @@
           </a>
         </div>
 
-<!-- top small box 4 ------------------------------------------------------- -->
+        <!-- top small box 4 ------------------------------------------------------- -->
         <div class="col-lg-2 col-sm-4 col-xs-6">
           <a href="#" onclick="javascript: initializeDatatable('new');">
           <div class="small-box bg-yellow">
@@ -88,7 +91,7 @@
           </a>
         </div>
 
-<!-- top small box 5 ------------------------------------------------------- -->
+        <!-- top small box 5 ------------------------------------------------------- -->
         <div class="col-lg-2 col-sm-4 col-xs-6">
           <a href="#" onclick="javascript: initializeDatatable('down');">
           <div class="small-box bg-red">
@@ -100,7 +103,7 @@
           </a>
         </div>
 
-<!-- top small box 6 ------------------------------------------------------- -->
+        <!-- top small box 6 ------------------------------------------------------- -->
         <div class="col-lg-2 col-sm-4 col-xs-6">
           <a href="#" onclick="javascript: initializeDatatable('archived');">
           <div class="small-box bg-gray top_small_box_gray_text">
@@ -114,9 +117,9 @@
 
       </div>
 
-<!-- Activity Chart ------------------------------------------------------- -->
+<!-- Device presence / Activity Chart ------------------------------------------------------- -->
 
-      <div class="row">
+      <div class="row" id="DevicePresence">
           <div class="col-md-12">
           <div class="box" id="clients">
               <div class="box-header with-border">
@@ -247,6 +250,9 @@ function main () {
 
   handleLoadingDialog()
 
+  // Hide UI elements as per settings
+  hideUIelements("UI_DEV_SECTIONS")
+
   // get from cookie if available (need to use decodeURI as saved as part of URI in PHP)
   cookieColumnsVisibleStr = decodeURI(getCookie("Front_Devices_Columns_Visible")).replaceAll('%2C',',')  
 
diff --git a/front/js/pialert_common.js b/front/js/pialert_common.js
index f361ad63..937dd5a2 100755
--- a/front/js/pialert_common.js
+++ b/front/js/pialert_common.js
@@ -1008,7 +1008,7 @@ function setupSmoothScrolling() {
   var url = window.location.href;
   if (url.includes("#")) {
       var idFromURL = url.substring(url.indexOf("#") + 1);
-      if ($("#" + idFromURL).length > 0) {
+      if (idFromURL != "" && $("#" + idFromURL).length > 0) {
           scrollToElement(idFromURL);
       }
   }
diff --git a/front/js/ui_components.js b/front/js/ui_components.js
index ce48f409..1273b3fb 100755
--- a/front/js/ui_components.js
+++ b/front/js/ui_components.js
@@ -147,6 +147,36 @@ function initSettingDropdown(settingKey,       // Identifier for the setting
 }
 
 
+// -----------------------------------------------------------------------------
+// Hide elements on the page based on the supplied setting
+function hideUIelements(settingKey) {
+
+  hiddenSectionsSetting = getSetting(settingKey)
+  
+  if(hiddenSectionsSetting != "") // handle if settings not yet initialized
+  {
+
+    sectionsArray = createArray(hiddenSectionsSetting)
+
+    // remove spaces to get IDs
+    var newArray = $.map(sectionsArray, function(value) {
+        return value.replace(/\s/g, '');
+    });
+
+    $.each(newArray, function(index, hiddenSection) {
+
+      if($('#' + hiddenSection))
+      {
+        $('#' + hiddenSection).hide()      
+      }    
+      
+    });
+  }
+
+}
+
+
+
 
 // -----------------------------------------------------------------------------
 // Data processors
diff --git a/front/php/templates/language/en_us.json b/front/php/templates/language/en_us.json
index 49a05903..6ccd49d6 100755
--- a/front/php/templates/language/en_us.json
+++ b/front/php/templates/language/en_us.json
@@ -606,8 +606,8 @@
     "Systeminfo_USB_Devices": "USB Devices",
     "TIMEZONE_description": "Time zone to display stats correctly. Find your time zone <a target=\"_blank\" href=\"https://en.wikipedia.org/wiki/List_of_tz_database_time_zones\" rel=\"nofollow\">here</a>.",
     "TIMEZONE_name": "Time zone",
-    "UI_DEV_SECTIONS_description": "Select which UI elements to show in the Devices pages.",
-    "UI_DEV_SECTIONS_name": "Show Devices Sections",
+    "UI_DEV_SECTIONS_description": "Select which UI elements to hide in the Devices pages.",
+    "UI_DEV_SECTIONS_name": "Hide Devices Sections",
     "UI_LANG_description": "Select the preferred UI language. Help translating or suggest languages in the online portal of <a href=\"https://hosted.weblate.org/projects/pialert/core/\" target=\"_blank\">Weblate</a>.",
     "UI_LANG_name": "UI Language",
     "UI_MY_DEVICES_description": "Devices of which statuses should be shown in the default <b>My Devices</b> view. (<code>CTRL + Click</code> to select/deselect)",
diff --git a/pialert/initialise.py b/pialert/initialise.py
index 9f8e53ea..dffed1a1 100755
--- a/pialert/initialise.py
+++ b/pialert/initialise.py
@@ -107,7 +107,7 @@ def importConfigs (db):
     conf.REPORT_DASHBOARD_URL = ccd('REPORT_DASHBOARD_URL', 'http://pi.alert/' , c_d, 'PiAlert URL', 'text', '', 'General')
     conf.UI_LANG = ccd('UI_LANG', 'English' , c_d, 'Language Interface', 'text.select', "['English', 'French', 'German', 'Norwegian', 'Russian', 'Spanish' ]", 'General')
     conf.UI_PRESENCE = ccd('UI_PRESENCE', ['online', 'offline', 'archived']   , c_d, 'Include in presence', 'text.multiselect', "['online', 'offline', 'archived']", 'General')    
-    conf.UI_DEV_SECTIONS = ccd('UI_DEV_SECTIONS', ['Tile cards', 'Device presence']   , c_d, 'Show sections', 'text.multiselect', "['Tile cards', 'Device presence']", 'General')    
+    conf.UI_DEV_SECTIONS = ccd('UI_DEV_SECTIONS', []   , c_d, 'Show sections', 'text.multiselect', "['Tile Cards', 'Device Presence']", 'General')    
     conf.UI_MY_DEVICES = ccd('UI_MY_DEVICES', ['online', 'offline', 'archived', 'new', 'down']   , c_d, 'Include in My Devices', 'text.multiselect', "['online', 'offline', 'archived', 'new', 'down']", 'General')    
     conf.UI_NOT_RANDOM_MAC = ccd('UI_NOT_RANDOM_MAC', []   , c_d, 'Exlude from Random Prefix', 'list', "", 'General')    
     conf.DAYS_TO_KEEP_EVENTS = ccd('DAYS_TO_KEEP_EVENTS', 90 , c_d, 'Delete events days', 'integer', '', 'General')