Changed code for debug. Add show and hide element styles.

XHunter74 · Apr 24, 2024 · 9794a13 · 9794a13
1 parent 8c2940e
commit 9794a13
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 25 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -8,7 +8,7 @@
             "type": "chrome",
             "request": "launch",
             "name": "Launch Left Panel",
-            "url": "http://localhost:5500/admin/tab_m.html",
+            "url": "http://localhost:5500/admin/tab_m.html?debug=true",
             "webRoot": "${workspaceFolder}/admin"
         }
     ]

diff --git a/admin/tab_m.css b/admin/tab_m.css
@@ -90,19 +90,19 @@
     background-color: rgb(248, 209, 176) !important;
 }
 
-.display-on{
+.display-on {
     background-color: rgb(248, 209, 176) !important;
 }
 
 .edit-btn {
-    font-size: 17px!important;
+    font-size: 17px !important;
     color: blue;
     cursor: pointer;
     margin-left: 10px;
 }
 
-.alive-icon{
-    font-size: 17px!important;
+.alive-icon {
+    font-size: 17px !important;
     color: red;
     margin-right: 10px;
 }
@@ -111,11 +111,19 @@
     position: relative;
     height: 50px;
     padding: 20px 20px 5px 20px;
-    border-bottom: 1px solid rgba(0,0,0,.1);
+    border-bottom: 1px solid rgba(0, 0, 0, .1);
 }
-.m .modal.modal-fixed-footer.modal-fixed-header .modal-content{
-    height: calc(100% - 140px)!important;
+
+.m .modal.modal-fixed-footer.modal-fixed-header .modal-content {
+    height: calc(100% - 140px) !important;
     padding-top: 5px;
     padding-bottom: 5px;
 }
 
+.hide-element {
+    display: none!important;
+}
+
+.show-element {
+    display: block!important;
+}
diff --git a/admin/tab_m.js b/admin/tab_m.js
@@ -1,22 +1,15 @@
 /*global $, location,  document, window, io, systemLang, translateAll*/
+const debugServer = 'http://172.23.215.95:8081/';
 const path = location.pathname;
 
 let isDebug = false;
 
-if (location.host === 'localhost:5500') {
-    isDebug = true;
-}
-
 const parts = path.split('/');
 parts.splice(-3);
 
 let socket;
 
-if (isDebug) {
-    socket = io.connect('http://172.23.215.95:8081/', { path: 'socket.io' });
-} else {
-    socket = io.connect('/', { path: parts.join('/') + '/socket.io' });
-}
+
 
 const query = (window.location.search || '').replace(/^\?/, '').replace(/#.*$/, '');
 const args = {};
@@ -41,6 +34,10 @@ query.trim().split('&').filter(function (t) { return t.trim(); }).forEach(functi
     }
 });
 
+if (args.debug) {
+    isDebug = true;
+}
+
 let instance = args.instance;
 
 if (typeof instance === 'undefined') {
@@ -50,6 +47,12 @@ if (typeof instance === 'undefined') {
 const namespace = 'gree-hvac.' + instance;
 // const namespace = 'gree-hvac.0';
 
+if (isDebug) {
+    socket = io.connect(debugServer, { path: 'socket.io' });
+} else {
+    socket = io.connect('/', { path: parts.join('/') + '/socket.io' });
+}
+
 const Materialize = (typeof M !== 'undefined') ? M : Materialize;// eslint-disable-line no-undef
 
 socket.emit('subscribe', namespace + '.*');
@@ -109,11 +112,11 @@ function processStateChange(deviceId, stateId, stateVal) {
             break;
         case 'fan-speed':
             if (stateVal === 0) {
-                $('#' + `${deviceId}-fan-mode`).css('display', 'block');
-                $('#' + `${deviceId}-fan-speed`).css('display', 'none');
+                $('#' + `${deviceId}-fan-mode`).addClass('show-element');
+                $('#' + `${deviceId}-fan-speed`).addClass('hide-element');
             } else {
-                $('#' + `${deviceId}-fan-mode`).css('display', 'none');
-                $('#' + `${deviceId}-fan-speed`).css('display', 'block');
+                $('#' + `${deviceId}-fan-mode`).addClass('hide-element');
+                $('#' + `${deviceId}-fan-speed`).addClass('show-element');
                 if (stateVal === 1) {
                     $('#' + `${deviceId}-fan-speed`).text('signal_cellular_alt_1_bar');
                 } else if (stateVal === 3) {
@@ -125,9 +128,9 @@ function processStateChange(deviceId, stateId, stateVal) {
             break;
         case 'alive':
             if (stateVal === true) {
-                $('#' + `${deviceId}-alive`).css('display', 'none');
+                $('#' + `${deviceId}-alive`).addClass('hide-element');
             } else {
-                $('#' + `${deviceId}-alive`).css('display', 'block');
+                $('#' + `${deviceId}-alive`).addClass('show-element');
             }
             break;
     }
@@ -190,7 +193,7 @@ function getCard(device) {
     let html = '';
     html += `<div id="${device.id}" class="device-card">`;
     html += `   <div style="display:flex;justify-content: center;margin-top: 10px;">`;
-    html += `       <span id="${device.id}-alive" class="material-symbols-outlined alive-icon">wifi_off</span>`;
+    html += `       <span id="${device.id}-alive" class="material-symbols-outlined alive-icon hide-element">wifi_off</span>`;
     html += `       <span id="${device.id}-device-name" style="font-size: 14px;">${device.name}</span>`;
     html += `       <span id="${device.id}-edit" class="material-symbols-outlined edit-btn">edit</span>`;
     html += `   </div>`;
@@ -245,7 +248,7 @@ function assignClickEvents() {
                 if (data.error) {
                     console.log('Error: ' + data.error);
                 } else {
-                    console.log('msg: ' + data);
+                    console.log('msg: ' + JSON.stringify(data));
                 }
             }
         });