From 0d50c8b424b66ad34d2d9cfb33377fd1d7e3ef71 Mon Sep 17 00:00:00 2001
From: Pawel Janisio <p.janisio@gmail.com>
Date: Tue, 2 Jul 2024 19:57:28 +0200
Subject: [PATCH] 2.4.3

- redesign loader to use additoinal small modal window
- fixed path in auth.php
- fixed parsing html entities by json while using error reporting
- updated show/hide logic
- fixed bug with choosing device clearing out after fetching parameters
- release 2.4.3
---
 css/styles.css    |   7 ++
 index.html        |  71 +++++++++++++------
 js/scripts.js     | 175 +++++++++++++++++++++++++++++-----------------
 php/auth.php      |   4 +-
 php/http.php      |   2 -
 php/websocket.php |   2 -
 6 files changed, 169 insertions(+), 92 deletions(-)
diff --git a/css/styles.css b/css/styles.css
index e1fdda0..fa8350f 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -54,6 +54,13 @@
 .changed-value {
     color: green;
 }
+#monitoringControls {
+    display: none;
+}
+#deviceControl.border {
+    border: 1px solid #ccc;
+    padding: 10px;
+}
 @keyframes pulse {
     0% { transform: scale(0.75); }
     50% { transform: scale(1.25); }
diff --git a/index.html b/index.html
index 0daf05c..021c44e 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
     <title>Sonoff - ewelink device monitoring</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
-    <link rel="stylesheet" href="css/styles.css">
+    <link rel="stylesheet" href="css/styles.css?v=5">
     <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
 </head>
 <body>
@@ -36,7 +36,7 @@ <h1 class="text-center w-100" id="animatedTitle">
             <div id="loader-text" class="mt-2">Connecting and fetching data...</div>
         </div>
         <div class="mb-3">
-            <label for="deviceId" class="form-label">Device ID or Name:</label>
+            <label for="deviceId" class="form-label">Choosing device:</label>
             <select id="deviceId" name="deviceId" class="form-control"></select>
         </div>
         <div id="parameters" class="mb-3" style="display: none;">
@@ -52,31 +52,31 @@ <h2 class="text-decoration-underline">Select Parameters to Monitor <span>&#9660;
             </div>
             <button id="startMonitoring" class="btn btn-success mt-2" style="display: none;">Start Monitoring</button>
         </div>
-        <div id="monitoringControls" class="mb-3">
+        <div id="monitoringControls" class="mb-3" style="display: none;">
             <div class="form-group">
                 <label for="requestInterval" class="form-label">Request Interval (seconds):</label>
                 <input type="number" id="requestInterval" name="requestInterval" class="form-control" value="5">
             </div>
-            <button id="stopMonitoring" class="btn btn-danger mt-2" style="display: none;">Stop Monitoring</button>
         </div>
-            <!-- Update Device Control Section -->
-            <div id="deviceControl" class="mb-3" style="display: none;">
-                <h2>Device Control</h2>
+        <div id="deviceControl" class="mb-3 border p-3" style="display: none;">
+            <h2>Device Control</h2>
             <div id="multiChannelToggles">
-            <!-- Dynamic Toggle Switches will be added here -->
+                <!-- Dynamic Toggle Switches will be added here -->
+            </div>
+            <div class="d-flex justify-content-start mt-2">
+                <button id="advancedControl" class="btn btn-warning me-2">Advanced Control</button>
+                <button id="stopMonitoring" class="btn btn-danger">Stop Monitoring</button>
             </div>
-            <button id="advancedControl" class="btn btn-warning mt-2">Advanced Control</button>
         </div>
-
-        <div id="deviceData" class="mb-3">
+        <div id="deviceData" class="mb-3" style="display: none;">
             <h2>Live Data</h2>
             <pre id="liveData" class="border p-3"></pre>
         </div>
-        <div id="heartbeat" class="mb-3">
+        <div id="heartbeat" class="mb-3" style="display: none;">
             <h2>Heartbeat <span id="ws-icon" class="ws-icon ws-offline"></span></h2>
             <pre id="heartbeatLog" class="border p-3"></pre>
         </div>
-        <div id="websocketsStats" class="mb-3">
+        <div id="websocketsStats" class="mb-3" style="display: none;">
             <h2>Websockets Stats</h2>
             <pre id="answerTimeLog" class="border p-3"></pre>
         </div>
@@ -84,7 +84,7 @@ <h2>Websockets Stats</h2>
             <h2>HTTP Stats</h2>
             <pre id="answerTimeLogHttp" class="border p-3"></pre>
         </div>
-        <div id="changesLog" class="mb-3">
+        <div id="changesLog" class="mb-3" style="display: none;">
             <h2>Changes Log</h2>
             <div id="changesContainer" class="log-container"></div>
         </div>
@@ -102,12 +102,6 @@ <h5 class="modal-title" id="advancedControlModalLabel">Advanced Control</h5>
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
                 <div class="modal-body">
-                    <div id="modal-loader" class="mt-2">
-                        <div class="progress" style="height: 30px;">
-                            <div id="modal-loader-progress" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;">0%</div>
-                        </div>
-                        <div id="modal-loader-text" class="mt-2">Connecting and fetching data...</div>
-                    </div>
                     <p class="text-danger">Please carefully choose parameters and values for change, in case of error you could have to pair device again and in worst case your device can be broken.</p>
                     <form id="advancedControlForm">
                         <div class="row" id="advancedControlFormContent">
@@ -122,6 +116,43 @@ <h5 class="modal-title" id="advancedControlModalLabel">Advanced Control</h5>
             </div>
         </div>
     </div>
+
+    <!-- Modal for Progress -->
+    <div class="modal fade" id="progressModal" tabindex="-1" aria-labelledby="progressModalLabel" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="progressModalLabel">Working...</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <div class="progress" style="height: 30px;">
+                        <div id="progressBar" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;">0%</div>
+                    </div>
+                    <div id="progressText" class="mt-2">Initializing...</div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Small Modal for Advanced Control Progress -->
+    <div class="modal fade" id="modalProgressModal" tabindex="-1" aria-labelledby="modalProgressModalLabel" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="modalProgressModalLabel">Working...</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <div class="progress" style="height: 30px;">
+                        <div id="modal-loader-progress" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;">0%</div>
+                    </div>
+                    <div id="modal-loader-text" class="mt-2">Initializing...</div>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <script src="js/scripts.js?v=<?php echo time(); ?>"></script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
 </body>
diff --git a/js/scripts.js b/js/scripts.js
index bcdc94f..956c158 100644
--- a/js/scripts.js
+++ b/js/scripts.js
@@ -22,14 +22,14 @@ $(document).ready(function () {
             $('#modal-loader-progress').css('width', progress + '%').text(progress + '%');
             $('#modal-loader-text').text(text);
         } else {
-            $('#loader-progress').css('width', progress + '%').text(progress + '%');
-            $('#loader-text').text(text);
+            $('#progressBar').css('width', progress + '%').text(progress + '%');
+            $('#progressText').text(text);
         }
     }
 
     // Show loader and initialize theme
-    $('#loader').show();
-    updateLoader(10, 'Loading Device List...');
+    showProgressModal();
+    updateLoader(10, 'Loading Device List...', false);
 
     /**
      * Apply the selected theme
@@ -82,16 +82,16 @@ $(document).ready(function () {
                 if (data.redirect) {
                     window.location.href = data.redirect;
                 } else if (data.success) {
-                    updateLoader(40, 'Authorization successful. Fetching devices...');
+                    updateLoader(40, 'Authorization successful. Fetching devices...', false);
                     fetchDevices();
                 } else {
                     console.error(data.error ? data.error : 'Unknown error');
-                    updateLoader(100, 'Authorization failed.');
+                    updateLoader(100, 'Authorization failed.', false);
                 }
             },
             error: function (xhr, status, error) {
                 console.error(error);
-                updateLoader(100, 'Authorization failed.');
+                updateLoader(100, 'Authorization failed.', false);
             }
         });
     }
@@ -108,6 +108,7 @@ $(document).ready(function () {
                 let data = typeof response === 'string' ? JSON.parse(response) : response;
                 if (data.success) {
                     let deviceSelect = $('#deviceId');
+                    let currentDevice = deviceSelect.val();  // Save the current selection
                     deviceSelect.empty();
                     deviceSelect.append('<option value="">Select Device</option>');
                     data.data.forEach(device => {
@@ -124,18 +125,19 @@ $(document).ready(function () {
                         }
                         deviceSelect.append(option);
                     });
-                    updateLoader(60, 'Device list loaded.');
+                    deviceSelect.val(currentDevice);  // Restore the previous selection
+                    updateLoader(100, 'Device list loaded.', false);
                     setTimeout(function () {
-                        $('#loader').hide();
+                        $('#progressModal').modal('hide');
                     }, 500);
                 } else {
                     console.error(data.error ? data.error : 'Unknown error');
-                    updateLoader(100, 'Failed to load device list.');
+                    updateLoader(100, 'Failed to load device list.', false);
                 }
             },
             error: function (xhr, status, error) {
                 console.error(error);
-                updateLoader(100, 'Failed to load device list.');
+                updateLoader(100, 'Failed to load device list.', false);
             }
         });
     }
@@ -165,9 +167,10 @@ $(document).ready(function () {
                     $('#startMonitoring').show();
                     $('#parameters-content').show();
                     $('#parameters').show(); // Unhide the parameters section
-                    updateLoader(80, 'Parameters loaded.');
+                    $('#monitoringControls').show(); // Show request interval
+                    updateLoader(100, 'Parameters loaded.', false);
                     setTimeout(function () {
-                        $('#loader').hide();
+                        $('#progressModal').modal('hide');
                     }, 500);
 
                     updateDeviceToggles(data.data);
@@ -175,12 +178,12 @@ $(document).ready(function () {
                     $('#deviceControl').show();
                 } else {
                     console.error(data.error ? data.error : 'Unknown error');
-                    updateLoader(100, 'Failed to fetch parameters.');
+                    updateLoader(100, 'Failed to fetch parameters.', false);
                 }
             },
             error: function (xhr, status, error) {
                 console.error(error);
-                updateLoader(100, 'Failed to fetch parameters.');
+                updateLoader(100, 'Failed to fetch parameters.', false);
             }
         });
     }
@@ -209,12 +212,14 @@ $(document).ready(function () {
             });
         } else {
             multiChannelToggles.append(`
-                <div class="form-check form-switch">
-                    <input class="form-check-input" type="checkbox" id="deviceToggle" ${data.switch === 'on' ? 'checked' : ''}>
-                    <label class="form-check-label" for="deviceToggle">Device Control</label>
+                <div class="d-flex align-items-center">
+                    <div class="form-check form-switch me-3">
+                        <input class="form-check-input" type="checkbox" id="deviceToggle" ${data.switch === 'on' ? 'checked' : ''}>
+                        <label class="form-check-label" for="deviceToggle">Turn ON/OFF device:</label>
+                    </div>
+                    <div id="deviceToggleLabel" class="ms-2"></div>
                 </div>
             `);
-            multiChannelToggles.append('<div id="deviceToggleLabel"></div>');
 
             $('#deviceToggle').change(function () {
                 let deviceId = $('#deviceId').val();
@@ -222,16 +227,16 @@ $(document).ready(function () {
                 updateDeviceState(deviceId, newState);
             });
 
-            let initialStatus = data.switch === 'on' ? 'SWITCHED ON' : 'SWITCHED OFF';
+            let initialStatus = data.switch === 'on' ? 'on' : 'off';
             updateToggleLabel(initialStatus);
         }
     }
 
     // Function to update the device state for single-channel devices
     function updateDeviceState(deviceId, newState) {
-        $('#loader').show();
-        updateLoader(30, 'Updating device state...');
-        updateLoader(50, 'Waiting for response...');
+        showProgressModal();
+        updateLoader(30, 'Updating device state...', false);
+        updateLoader(50, 'Waiting for response...', false);
         $.ajax({
             url: useWebSocket ? 'php/websocket.php' : 'php/http.php',
             method: 'GET',
@@ -240,17 +245,20 @@ $(document).ready(function () {
                 let data = typeof response === 'string' ? JSON.parse(response) : response;
                 if (data.success) {
                     console.log('Device state updated successfully');
-                    updateLoader(70, 'Fetching current parameters...');
+                    updateLoader(100, 'Device state updated.', false);
+                    setTimeout(function () {
+                        $('#progressModal').modal('hide');
+                    }, 500);
                     fetchDeviceParameters(deviceId); // This will update the toggle state based on the actual device state
                 } else {
                     console.error(data.error ? data.error : 'Unknown error');
-                    updateLoader(100, 'Failed to update device state.');
+                    updateLoader(100, 'Failed to update device state.', false);
                     $('#deviceToggle').prop('disabled', false); // Enable the toggle in case of error
                 }
             },
             error: function (xhr, status, error) {
                 console.error(error);
-                updateLoader(100, 'Failed to update device state.');
+                updateLoader(100, 'Failed to update device state.', false);
                 $('#deviceToggle').prop('disabled', false); // Enable the toggle in case of error
             }
         });
@@ -258,9 +266,9 @@ $(document).ready(function () {
 
     // Function to update the device state for multi-channel devices
     function updateDeviceSwitchState(deviceId, index, newState) {
-        $('#loader').show();
-        updateLoader(30, 'Updating device switch state...');
-        updateLoader(50, 'Waiting for response...');
+        showProgressModal();
+        updateLoader(30, 'Updating device switch state...', false);
+        updateLoader(50, 'Waiting for response...', false);
         $.ajax({
             url: useWebSocket ? 'php/websocket.php' : 'php/http.php',
             method: 'GET',
@@ -269,17 +277,20 @@ $(document).ready(function () {
                 let data = typeof response === 'string' ? JSON.parse(response) : response;
                 if (data.success) {
                     console.log('Device switch state updated successfully');
-                    updateLoader(70, 'Fetching current parameters...');
+                    updateLoader(100, 'Device switch state updated.', false);
+                    setTimeout(function () {
+                        $('#progressModal').modal('hide');
+                    }, 500);
                     fetchDeviceParameters(deviceId); // This will update the toggle state based on the actual device state
                 } else {
                     console.error(data.error ? data.error : 'Unknown error');
-                    updateLoader(100, 'Failed to update device switch state.');
+                    updateLoader(100, 'Failed to update device switch state.', false);
                     $('#deviceToggle_' + index).prop('disabled', false); // Enable the toggle in case of error
                 }
             },
             error: function (xhr, status, error) {
                 console.error(error);
-                updateLoader(100, 'Failed to update device switch state.');
+                updateLoader(100, 'Failed to update device switch state.', false);
                 $('#deviceToggle_' + index).prop('disabled', false); // Enable the toggle in case of error
             }
         });
@@ -292,12 +303,21 @@ $(document).ready(function () {
      */
     function startMonitoring(deviceId, interval) {
         console.log('Starting monitoring for device ID:', deviceId, 'with interval:', interval);
-        updateLoader(50, 'Starting monitoring...');
-        updateLoader(60, 'Connecting...');
-        updateLoader(70, 'Sending request...');
-        updateLoader(80, 'Waiting for response...');
+        updateLoader(50, 'Starting monitoring...', false);
+        updateLoader(60, 'Connecting...', false);
+        updateLoader(70, 'Sending request...', false);
+        updateLoader(80, 'Waiting for response...', false);
         firstResponseReceived = false;
 
+        // Show hidden sections
+        $('#deviceData').show();
+        if (useWebSocket) {
+            $('#heartbeat, #websocketsStats').show();
+        } else {
+            $('#httpStats').show();
+        }
+        $('#changesLog').show();
+
         monitoringInterval = setInterval(function () {
             pendingRequests++;
             const startTime = performance.now();
@@ -343,9 +363,9 @@ $(document).ready(function () {
                             firstResponseReceived = true;
                         }
 
-                        updateLoader(100, 'Monitoring started.');
+                        updateLoader(100, 'Monitoring started.', false);
                         setTimeout(function () {
-                            $('#loader').hide();
+                            $('#progressModal').modal('hide');
                         }, 500);
                         updateWebSocketStatus(true);
                         $('#heartbeatTime').text(elapsedTime);
@@ -393,8 +413,9 @@ $(document).ready(function () {
         console.log('Stopping monitoring');
         clearInterval(monitoringInterval);
         clearInterval(heartbeatInterval);
-        updateLoader(50, 'Stopping monitoring...');
-        updateLoader(60, 'Fetching current parameters...');
+        showProgressModal();
+        updateLoader(50, 'Stopping monitoring...', false);
+        updateLoader(60, 'Fetching current parameters...', false);
 
         let deviceId = $('#deviceId').val();
         $.ajax({
@@ -405,24 +426,26 @@ $(document).ready(function () {
                 let data = typeof response === 'string' ? JSON.parse(response) : response;
                 if (data.success) {
                     updateDeviceToggles(data.data);
-                    $('#loader').hide();
+                    $('#progressModal').modal('hide');
                     $('#parameters').show();
                     $('#stopMonitoring').hide();
                     $('#heartbeatLog').text('Monitoring stopped.');
                     updateWebSocketStatus(false);
+                    // Hide sections after stopping monitoring
+                    $('#deviceData, #heartbeat, #websocketsStats, #httpStats, #changesLog, #monitoringControls').hide();
                 } else {
                     console.error(data.error ? data.error : 'Unknown error');
-                    updateLoader(100, 'Failed to fetch current parameters.');
+                    updateLoader(100, 'Failed to fetch current parameters.', false);
                     setTimeout(function () {
-                        $('#loader').hide();
+                        $('#progressModal').modal('hide');
                     }, 500);
                 }
             },
             error: function (xhr, status, error) {
                 console.error(error);
-                updateLoader(100, 'Failed to fetch current parameters.');
+                updateLoader(100, 'Failed to fetch current parameters.', false);
                 setTimeout(function () {
-                    $('#loader').hide();
+                    $('#progressModal').modal('hide');
                 }, 500);
             }
         });
@@ -449,7 +472,7 @@ $(document).ready(function () {
         if (data.switch !== undefined) {
             let switchState = data.switch;
             $('#deviceToggle').prop('checked', switchState === 'on');
-            updateToggleLabel(switchState === 'on' ? 'SWITCHED ON' : 'SWITCHED OFF');
+            updateToggleLabel(switchState === 'on' ? 'on' : 'off');
         }
     }
 
@@ -461,8 +484,8 @@ $(document).ready(function () {
         let selectedDevice = $('#deviceId option:selected');
         let deviceName = selectedDevice.data('device-name');
         let deviceProduct = selectedDevice.data('device-product');
-        let statusClass = status === 'SWITCHED ON' ? 'text-success fw-bold' : 'text-danger fw-bold';
-        let labelText = `${deviceName} (${deviceProduct}) - <span class="${statusClass}">${status}</span>`;
+        let statusClass = status === 'on' ? 'ws-online' : 'ws-offline';
+        let labelText = `${deviceName} (${deviceProduct}) - <span class="ws-icon ${statusClass}"></span>`;
         $('#deviceToggleLabel').html(labelText);
     }
 
@@ -473,8 +496,8 @@ $(document).ready(function () {
             alert('Please select a device');
             return;
         }
-        $('#loader').show();
-        updateLoader(20, 'Fetching device parameters...');
+        showProgressModal();
+        updateLoader(20, 'Fetching device parameters...', false);
         fetchDeviceParameters(deviceId);
     });
 
@@ -494,8 +517,8 @@ $(document).ready(function () {
             alert('Interval must be at least 1 second.');
             return;
         }
-        $('#loader').show();
-        updateLoader(30, 'Connecting...');
+        showProgressModal();
+        updateLoader(30, 'Connecting...', false);
         $('#parameters').hide();
         startMonitoring(deviceId, interval);
         $('#stopMonitoring').show();
@@ -524,13 +547,12 @@ $(document).ready(function () {
             stopMonitoring();
         }
         useWebSocket = false;
-        $('#httpStats').show();
-        $('#websocketsStats').hide();
-        $('#heartbeat').hide();
+        $('#heartbeat, #websocketsStats').hide();
         $('#useHttp').removeClass('btn-outline-primary').addClass('btn-primary');
         $('#useWebSocket').removeClass('btn-primary').addClass('btn-outline-secondary');
-        $('#loader').show();
-        updateLoader(10, 'Switching to HTTP...');
+        $('#monitoringControls').hide(); // Hide request interval
+        showProgressModal();
+        updateLoader(10, 'Switching to HTTP...', false);
         fetchDevices();
     });
 
@@ -542,12 +564,11 @@ $(document).ready(function () {
         useWebSocket = true;
         $('#requestInterval').val(15); // Default interval for WebSocket
         $('#httpStats').hide();
-        $('#websocketsStats').show();
-        $('#heartbeat').show();
         $('#useHttp').removeClass('btn-primary').addClass('btn-outline-primary');
         $('#useWebSocket').removeClass('btn-outline-secondary').addClass('btn-primary');
-        $('#loader').show();
-        updateLoader(10, 'Switching to WebSocket...');
+        $('#monitoringControls').hide(); // Hide request interval
+        showProgressModal();
+        updateLoader(10, 'Switching to WebSocket...', false);
         fetchDevices();
     });
 
@@ -562,7 +583,7 @@ $(document).ready(function () {
             alert('Please select a device');
             return;
         }
-        $('#modal-loader').show();
+        showProgressModal(true);
         updateLoader(20, 'Fetching device parameters for advanced control...', true);
         $.ajax({
             url: useWebSocket ? 'php/websocket.php' : 'php/http.php',
@@ -631,16 +652,22 @@ $(document).ready(function () {
                     $('#advancedControlModal').modal('show');
                     updateLoader(100, 'Parameters loaded.', true);
                     setTimeout(function () {
-                        $('#modal-loader').hide();
+                        $('#modalProgressModal').modal('hide');
                     }, 500);
                 } else {
                     console.error(data.error ? data.error : 'Unknown error');
                     updateLoader(100, 'Failed to fetch parameters.', true);
+                    setTimeout(function () {
+                        $('#modalProgressModal').modal('hide');
+                    }, 500);
                 }
             },
             error: function (xhr, status, error) {
                 console.error(error);
                 updateLoader(100, 'Failed to fetch parameters.', true);
+                setTimeout(function () {
+                    $('#modalProgressModal').modal('hide');
+                }, 500);
             }
         });
     });
@@ -657,7 +684,7 @@ $(document).ready(function () {
             nestedParam[lastKey] = item.value;
         });
 
-        $('#modal-loader').show();
+        showProgressModal(true);
         updateLoader(30, 'Sending updated parameters...', true);
         let action = useWebSocket ? 'forceUpdateDevice' : 'setDeviceStatus';
         $.ajax({
@@ -674,18 +701,36 @@ $(document).ready(function () {
                     console.log('Device parameters updated successfully');
                     updateLoader(100, 'Parameters updated successfully.', true);
                     setTimeout(function () {
-                        $('#modal-loader').hide();
+                        $('#modalProgressModal').modal('hide');
                     }, 500);
                     $('#advancedControlModal').modal('hide');
                 } else {
                     console.error(data.error ? data.error : 'Unknown error');
                     updateLoader(100, 'Failed to update parameters.', true);
+                    setTimeout(function () {
+                        $('#modalProgressModal').modal('hide');
+                    }, 500);
                 }
             },
             error: function (xhr, status, error) {
                 console.error(error);
                 updateLoader(100, 'Failed to update parameters.', true);
+                setTimeout(function () {
+                    $('#modalProgressModal').modal('hide');
+                }, 500);
             }
         });
     });
+
+    /**
+     * Show the progress modal
+     * @param {boolean} isModal - Whether it is for a modal window
+     */
+    function showProgressModal(isModal = false) {
+        if (isModal) {
+            $('#modalProgressModal').modal('show');
+        } else {
+            $('#progressModal').modal('show');
+        }
+    }
 });
diff --git a/php/auth.php b/php/auth.php
index b188f4b..cd2fd04 100644
--- a/php/auth.php
+++ b/php/auth.php
@@ -1,8 +1,6 @@
 <?php
-error_reporting(E_ALL);
-ini_set('display_errors', 1);
 
-require_once __DIR__ . '/autoloader.php';
+require_once __DIR__ . '../../autoloader.php';
 
 $httpClient = new HttpClient();
 $token = new Token($httpClient);
diff --git a/php/http.php b/php/http.php
index e0bc3c5..3588a23 100644
--- a/php/http.php
+++ b/php/http.php
@@ -1,6 +1,4 @@
 <?php
-error_reporting(E_ALL);
-ini_set('display_errors', 1);
 
 require_once __DIR__ . '../../autoloader.php';
 
diff --git a/php/websocket.php b/php/websocket.php
index b2b421e..5116e5f 100644
--- a/php/websocket.php
+++ b/php/websocket.php
@@ -1,6 +1,4 @@
 <?php
-error_reporting(E_ALL);
-ini_set('display_errors', 1);
 
 require_once __DIR__ . '../../autoloader.php';
 
