From 71054c16514d2d4124b35bd03132953093045932 Mon Sep 17 00:00:00 2001
From: Mic <michael.cartmel@gmail.com>
Date: Mon, 5 Aug 2024 16:18:58 +1000
Subject: [PATCH] Misc UI bug fixes (#335)

* Bugfix button within status block

* Possible fix for museumsvictoria/nodel#259

Proactively disconnect and reconnect websockets when visibility and/or connectivity changes

* Fix incorrect display of values in the log

* Fix dropdown not closing on navigation

* Allow icons in status blocks
---
 nodel-webui-js/src/index.xsl     |  8 ++++----
 nodel-webui-js/src/nodel.js      | 33 +++++++++++++++++++++++---------
 nodel-webui-js/src/templates.xsl |  2 +-
 nodel-webui-js/src/theme.less    |  2 +-
 4 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/nodel-webui-js/src/index.xsl b/nodel-webui-js/src/index.xsl
index bccbd757..a7deebbd 100644
--- a/nodel-webui-js/src/index.xsl
+++ b/nodel-webui-js/src/index.xsl
@@ -105,7 +105,7 @@
                     <ul class="dropdown-menu">
                       <xsl:for-each select="page">
                         <li>
-                          <a role="button" data-nav="{translate(@title,translate(@title,$allowedSymbols,''),'')}" data-toggle="collapse" data-target="#nodel-navbar.in">
+                          <a role="button" data-nav="{translate(@title,translate(@title,$allowedSymbols,''),'')}" data-toggle="dropdown" data-target="#nodel-navbar .dropdown.open">
                             <xsl:if test="@action">
                               <xsl:attribute name="data-action">
                                 <xsl:value-of select="@action"/>
@@ -120,7 +120,7 @@
                   </xsl:if>
                     <xsl:if test="self::page">
                     <li>
-                      <a role="button" data-nav="{translate(@title,translate(@title,$allowedSymbols,''),'')}" data-toggle="collapse" data-target="#nodel-navbar.in">
+                      <a role="button" data-nav="{translate(@title,translate(@title,$allowedSymbols,''),'')}">
                         <xsl:if test="@action">
                           <xsl:attribute name="data-action">
                             <xsl:value-of select="@action"/>
@@ -764,8 +764,8 @@
                     <span class="logtitle">{^{>rawalias}}</span><span class="logtimestamp"> - {^{>~nicetime(timestamp)}}</span>
                     {^{if ~isset(arg)}}
                       <span class="logarg">
-                        {^{if ~root.hold or ~root.flt}}
-                          {^{:~jsonhighlight(~sanitize(arg, 250))}}
+                        {^{if ~root.hold || ~root.flt}}
+                          {^{:~jsonhighlight(~sanitize(arg, 250, true))}}
                         {{else}}
                           {^{:~sanitize(arg, 250)}}
                         {{/if}}
diff --git a/nodel-webui-js/src/nodel.js b/nodel-webui-js/src/nodel.js
index 996a0478..a546afdc 100644
--- a/nodel-webui-js/src/nodel.js
+++ b/nodel-webui-js/src/nodel.js
@@ -33,18 +33,22 @@ $.views.helpers({
   idxid: function (idx,id) {
     return !_.isUndefined(idx)? String(idx)+'_'+id : id;
   },
-  sanitize: function(value, maxLength) {
+  sanitize: function(value, maxLength, nostrip) {
     var value = JSON.stringify(value, null, 2);
     if (maxLength && value.length > maxLength) {
       value = value.substring(0, maxLength ) + "...";
     }
-    return value.replace(/[<>&]/g, function (c) {
-        switch (c) {
-            case '<': return '&lt;';
-            case '>': return '&gt;';
-            case '&': return '&amp;';
-        }
-    });
+    if(nostrip){
+      return value;
+    } else {
+      return value.replaceAll(/[<>&]/g, function (c) {
+          switch (c) {
+              case '<': return '&lt;';
+              case '>': return '&gt;';
+              case '&': return '&amp;';
+          }
+      });
+    }
   },
   nicetime: function (value, precise, format) {
     if (precise) return moment(value).format('MM-DD HH:mm:ss.SS');
@@ -1270,7 +1274,6 @@ var setEvents = function(){
     $("[data-section="+id+"]").show();
     history.replaceState(undefined, undefined, '#'+id);
     $("[data-section="+id+"]").find('.nodel-console').scrollTop(999999);
-    return false;
   });
   $('body').on('click', '#confirmkeypad *[data-keypad]', function () {
     var number = $(this).data('keypad');
@@ -2543,6 +2546,18 @@ var updateLogs = function(){
           offline();
           $('body').data('update', setTimeout(function() { updateLogs(); }, 1000));
         }
+        // proactively disconnect websocket when the page is not being viewed
+        $(document).off("visibilitychange.socket").on("visibilitychange.socket", function() {
+          if(document.hidden) socket.close();
+          else updateLogs();
+        });
+        // proactively disconnect when network is disconnected
+        $(window).off("offline.socket").on("offline.socket", function() {
+          socket.close();
+        });
+        $(window).off("online.socket").on("online.socket", function() {
+          if(!document.hidden) updateLogs();
+        });
       } catch(exception){
         console.log('Error: '+exception);
         offline();
diff --git a/nodel-webui-js/src/templates.xsl b/nodel-webui-js/src/templates.xsl
index dae227e6..8a5837ce 100644
--- a/nodel-webui-js/src/templates.xsl
+++ b/nodel-webui-js/src/templates.xsl
@@ -1035,7 +1035,7 @@
         </xsl:attribute>
       </xsl:if>
       <div class="panel-body">
-        <xsl:apply-templates select="image"/><xsl:apply-templates select="link"/><xsl:apply-templates select="button|switch|partialswitch"/><xsl:apply-templates select="badge|partialbadge|signal"/><strong><xsl:value-of select="text()"/></strong>
+        <xsl:apply-templates select="image"/><xsl:apply-templates select="icon"/><xsl:apply-templates select="link"/><xsl:apply-templates select="button|switch|partialswitch"/><xsl:apply-templates select="badge|partialbadge|signal"/><strong><xsl:value-of select="text()"/></strong>
         <xsl:if test="@event">
           <br/><span class="status">Unknown</span>
         </xsl:if>
diff --git a/nodel-webui-js/src/theme.less b/nodel-webui-js/src/theme.less
index 5aa67467..2a570b0b 100644
--- a/nodel-webui-js/src/theme.less
+++ b/nodel-webui-js/src/theme.less
@@ -167,7 +167,7 @@ label {
     & > .btn.btn-outline {
       color: @label-color;
     }
-    & > .btn, & > .btn-group {
+    & > .btn, & > .btn-group, span[class^="fa"], span[class^="glyph"] {
       float: right;
       margin-left: 15px;
       margin-bottom: 5px;