From 2e37492c261652d68f96f5cc5c022e147288e912 Mon Sep 17 00:00:00 2001
From: kambereBr <brunokambere@gmail.com>
Date: Mon, 6 Jan 2025 03:23:19 +0200
Subject: [PATCH] [ENH] Add toggle for new MeshCentral UI in settings and in
 top headbar of the modern UI

---
 public/styles/style-bootstrap.css |  9 ++++++++-
 views/default3.handlebars         | 33 +++++++++++++++++++++++++++++++
 2 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/public/styles/style-bootstrap.css b/public/styles/style-bootstrap.css
index f69c9e68..3d30e5fe 100644
--- a/public/styles/style-bootstrap.css
+++ b/public/styles/style-bootstrap.css
@@ -2870,7 +2870,7 @@ nav .lbbuttonsel2 {
     width: 28px;
 }
 
-.viewSelector3 {
+.viewSelector3, .uiSelector7 {
     margin-left: 2px;
     margin-top: 2px;
     background: url(../images/views.png) -56px 0px;
@@ -2970,6 +2970,13 @@ nav .lbbuttonsel2 {
         background-color: #AAA;
     }
 
+.uiSelector_end {
+    width: 32px;
+    height: 32px;
+    float: left;
+    margin: 3px;
+}
+
 .uiSelectorSel {
     background-color: #BBB;
     opacity: 0.8;
diff --git a/views/default3.handlebars b/views/default3.handlebars
index a09a622e..bc949b72 100644
--- a/views/default3.handlebars
+++ b/views/default3.handlebars
@@ -153,6 +153,17 @@
             <img id="topMenuIcon" class=noselect
                 style="position:absolute;right:0;top:10px;color:#c8c8c8;font-size:44px;margin-right:8px;cursor:pointer;display:none"
                 onclick=topMenu() src="/images/3bars-30.png" width=30 height=30 />
+
+            <div style="position:absolute;right:0;margin-right:8px;cursor:pointer;">
+                <table>
+                    <tr>
+                        <td class="text-white fw-bold"><label class="form-check-label" for="inputUiViewMode">Try the new MeshCentral UI &ensp;</label></td>
+                        <td class="form-check form-switch">
+                            <input class="form-check-input" type="checkbox" id="inputUiViewMode" onchange="toggleBootstrapUIMode()" checked="">
+                        </td>
+                    </tr>
+                </table>
+            </div> 
         </div>
         <div class="sidebar flex-column" id="page_leftbar">
             <div style="height:24px"></div>
@@ -190,6 +201,11 @@
                                             onkeypress="if (event.key == 'Enter') userInterfaceSelectMenu(3)">
                                             <div class="uiSelector3"></div>
                                         </div>
+                                        <div tabindex=0 id=uiViewButton7 class=uiSelector
+                                            onclick=toggleBootstrapUIMode() title="Toggle Bootstrap UI"
+                                            onkeypress="if (event.key == 'Enter') toggleBootstrapUIMode()">
+                                            <div class="uiSelector7"></div>
+                                        </div>
                                     </td>
                                     <td>
                                         <div tabindex=0 id=uiViewButton6 class=uiSelector onclick="showNotes(false)"
@@ -207,6 +223,7 @@
                                             onkeypress="if (event.key == 'Enter') toggleFooterBarMode()">
                                             <div class="uiSelector5"></div>
                                         </div>
+                                        <div class=uiSelector_end>&nbsp;</div>
                                     </td>
                                 </tr>
                             </table>
@@ -2685,6 +2702,22 @@
             QV('body', true);
         }
 
+        function saveUserInterfaceMode() {
+            var nUiViewMode = 0;
+            if (Q('ui1').checked) { nUiViewMode = 1; }
+            putstore('uiViewMode', nUiViewMode);
+        }
+
+        function toggleBootstrapUIMode() {
+            if (xxdialogMode) return;
+            var uiViewMode = getstore('uiViewMode', '0');
+            var x = '<input type=radio id=ui0 name=uiradio value=0 ' + ((uiViewMode == 0)?'checked':'') + '><label for=ui0>' + "Classic" + '</label><br>';
+            x += '<input type=radio id=ui1 name=uiradio value=1 ' + ((uiViewMode == 1)?'checked':'') + '><label for=ui1>' + "Modern" + '</label><br>';
+            setModalContent('xxAddAgent', 'User Interface', x);
+            showModal('xxAddAgentModal', 'idx_dlgOkButton', saveUserInterfaceMode);
+            QV('uiMenu', false);
+        }
+
         function getNodeFromId(id) { if (nodes != null) { for (var i in nodes) { if (nodes[i]._id == id) return nodes[i]; } } return null; }
         function reload() {
             var x = window.location.href;