From 09baedab62b2aafddb3846ae55967b05ca99cf6a Mon Sep 17 00:00:00 2001
From: Mark Friedrich <exodus4d@users.noreply.github.com>
Date: Sun, 12 Apr 2020 14:58:43 +0200
Subject: [PATCH] - fixed warning/error badges on `/setup` page for WebSocket
 section, closed #941

---
 js/app/setup.js               | 18 +++++++++++-------
 public/js/v2.0.1/app/setup.js | 18 +++++++++++-------
 2 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/js/app/setup.js b/js/app/setup.js
index 8cbef7ef..6b90f56f 100644
--- a/js/app/setup.js
+++ b/js/app/setup.js
@@ -24,6 +24,7 @@ define([
         hiddenByAttributeClass: 'pf-hidden-by-attr',                    // class for elements that are hidden/shown by [data-attr] value
         shownByAttributeClass: 'pf-shown-by-attr',                      // class for elements that are hidden/shown by [data-attr] value
 
+        webSocketSectionId: 'pf-setup-socket',                          // id for webSocket section
         webSocketStatsId: 'pf-setup-webSocket-stats',                   // id for webSocket "stats" panel
         webSocketRefreshStatsId: 'pf-setup-webSocket-stats-refresh',    // class for "reload stats" button
 
@@ -399,8 +400,8 @@ define([
 
         webSocketPanel.showLoadingAnimation();
 
-        let removeColorClasses = (el) => {
-            el.removeClass (function(index, css){
+        let removeColorClasses = el => {
+            el.removeClass(function(index, css){
                 return (css.match (/\btxt-color-\S+/g) || []).join(' ');
             });
         };
@@ -424,7 +425,7 @@ define([
                     statusIcon.toggleClass('fa-exclamation-triangle', false).toggleClass('fa-check', true).addClass('txt-color-success');
 
                     // update head badge. "Decrease" warning count, default for "URI" connection is "warn + 1"
-                    socketWarningCount--;
+                    socketWarningCount = Math.max(0, --socketWarningCount);
                 }
             }
 
@@ -436,8 +437,8 @@ define([
                 // update head badge
                 switch(data.status.type){
                     case 'success':
-                        socketWarningCount = '';
-                        socketDangerCount = '';
+                        socketWarningCount = 0;
+                        socketDangerCount = 0;
                         break;
                     case 'warning':
                         break;
@@ -447,8 +448,11 @@ define([
                 }
             }
 
-            badgeSocketWarning.text(socketWarningCount ? socketWarningCount : '');
-            badgeSocketDanger.text(socketDangerCount ? socketDangerCount : '');
+            badgeSocketWarning.text(socketWarningCount || '');
+            badgeSocketDanger.text(socketDangerCount || '');
+            // update section headline badges
+            document.querySelector(`#${config.webSocketSectionId} h4 .badge-warning`).textContent = socketWarningCount || '';
+            document.querySelector(`#${config.webSocketSectionId} h4 .badge-danger`).textContent = socketDangerCount || '';
         };
 
         // update initial
diff --git a/public/js/v2.0.1/app/setup.js b/public/js/v2.0.1/app/setup.js
index 8cbef7ef..6b90f56f 100644
--- a/public/js/v2.0.1/app/setup.js
+++ b/public/js/v2.0.1/app/setup.js
@@ -24,6 +24,7 @@ define([
         hiddenByAttributeClass: 'pf-hidden-by-attr',                    // class for elements that are hidden/shown by [data-attr] value
         shownByAttributeClass: 'pf-shown-by-attr',                      // class for elements that are hidden/shown by [data-attr] value
 
+        webSocketSectionId: 'pf-setup-socket',                          // id for webSocket section
         webSocketStatsId: 'pf-setup-webSocket-stats',                   // id for webSocket "stats" panel
         webSocketRefreshStatsId: 'pf-setup-webSocket-stats-refresh',    // class for "reload stats" button
 
@@ -399,8 +400,8 @@ define([
 
         webSocketPanel.showLoadingAnimation();
 
-        let removeColorClasses = (el) => {
-            el.removeClass (function(index, css){
+        let removeColorClasses = el => {
+            el.removeClass(function(index, css){
                 return (css.match (/\btxt-color-\S+/g) || []).join(' ');
             });
         };
@@ -424,7 +425,7 @@ define([
                     statusIcon.toggleClass('fa-exclamation-triangle', false).toggleClass('fa-check', true).addClass('txt-color-success');
 
                     // update head badge. "Decrease" warning count, default for "URI" connection is "warn + 1"
-                    socketWarningCount--;
+                    socketWarningCount = Math.max(0, --socketWarningCount);
                 }
             }
 
@@ -436,8 +437,8 @@ define([
                 // update head badge
                 switch(data.status.type){
                     case 'success':
-                        socketWarningCount = '';
-                        socketDangerCount = '';
+                        socketWarningCount = 0;
+                        socketDangerCount = 0;
                         break;
                     case 'warning':
                         break;
@@ -447,8 +448,11 @@ define([
                 }
             }
 
-            badgeSocketWarning.text(socketWarningCount ? socketWarningCount : '');
-            badgeSocketDanger.text(socketDangerCount ? socketDangerCount : '');
+            badgeSocketWarning.text(socketWarningCount || '');
+            badgeSocketDanger.text(socketDangerCount || '');
+            // update section headline badges
+            document.querySelector(`#${config.webSocketSectionId} h4 .badge-warning`).textContent = socketWarningCount || '';
+            document.querySelector(`#${config.webSocketSectionId} h4 .badge-danger`).textContent = socketDangerCount || '';
         };
 
         // update initial