refactor: refactor checkFakeIP to return a promise and update updateDiagnostics to use async/await

luci-app-podkop/htdocs/luci-static/resources/view/podkop/podkop.js

@@ -867,10 +867,7 @@ return view.extend({
         o.cfgvalue = () => E('div', { id: 'diagnostics-status' }, _('Loading diagnostics...'));
 
         function checkFakeIP() {
-            let lastStatus = null;
+            return new Promise((resolve) => {
-            let statusElement = document.getElementById('fakeip-status');
-
-            function updateFakeIPStatus() {
                 const controller = new AbortController();
                 const timeoutId = setTimeout(() => controller.abort(), 10000);
 
@@ -878,75 +875,93 @@ return view.extend({
                     .then(response => response.text())
                     .then(text => {
                         clearTimeout(timeoutId);
-                        if (!statusElement) {
+                        let status = {
-                            statusElement = document.getElementById('fakeip-status');
+                            state: 'unknown',
-                            if (!statusElement) return;
+                            message: '',
-                        }
+                            color: '#ff9800'
+                        };
 
-                        let currentStatus, statusHTML;
                         if (text.includes('Cannot GET /ip')) {
-                            currentStatus = 'working';
+                            status.state = 'working';
-                            statusHTML = E('span', { 'style': 'color: #4caf50' }, ['✔ ', _('working')]).outerHTML;
+                            status.message = _('working');
+                            status.color = '#4caf50';
                         } else if (text.includes('"origin":')) {
-                            currentStatus = 'not_working';
+                            status.state = 'not_working';
-                            statusHTML = E('span', { 'style': 'color: #f44336' }, ['✘ ', _('not working')]).outerHTML;
+                            status.message = _('not working');
+                            status.color = '#f44336';
                         } else {
-                            currentStatus = 'error';
+                            status.state = 'error';
-                            statusHTML = E('span', { 'style': 'color: #ff9800' }, ['! ', _('check error')]).outerHTML;
+                            status.message = _('check error');
-                        }
-
-                        if (currentStatus !== lastStatus) {
-                            lastStatus = currentStatus;
-                            statusElement.innerHTML = statusHTML;
                         }
+                        resolve(status);
                     })
                     .catch(error => {
                         clearTimeout(timeoutId);
-                        const errorStatus = 'error';
+                        resolve({
-                        if (errorStatus !== lastStatus) {
+                            state: 'error',
-                            lastStatus = errorStatus;
+                            message: error.name === 'AbortError' ? _('timeout') : _('check error'),
-                            if (statusElement) {
+                            color: '#ff9800'
-                                statusElement.innerHTML = E('span', { 'style': 'color: #ff9800' }, [
+                        });
-                                    '! ',
+                    });
-                                    error.name === 'AbortError' ? _('timeout') : _('check error')
-                                ]).outerHTML;
-                            }
-                        }
             });
         }
 
-            updateFakeIPStatus();
+        async function updateDiagnostics() {
-            const intervalId = setInterval(updateFakeIPStatus, 10000);
+            try {
-            window.addEventListener('unload', () => clearInterval(intervalId));
+                const [
-        }
+                    podkopStatus,
-
+                    singboxStatus,
-        function updateDiagnostics() {
+                    podkop,
-            Promise.all([
+                    luci,
+                    singbox,
+                    system,
+                    fakeipStatus
+                ] = await Promise.all([
                     fs.exec('/etc/init.d/podkop', ['get_status']),
                     fs.exec('/etc/init.d/podkop', ['get_sing_box_status']),
                     fs.exec('/etc/init.d/podkop', ['show_version']),
                     fs.exec('/etc/init.d/podkop', ['show_luci_version']),
                     fs.exec('/etc/init.d/podkop', ['show_sing_box_version']),
-                fs.exec('/etc/init.d/podkop', ['show_system_info'])
+                    fs.exec('/etc/init.d/podkop', ['show_system_info']),
-            ]).then(([podkopStatus, singboxStatus, podkop, luci, singbox, system]) => {
+                    checkFakeIP()
-                try {
+                ]);
+
                 const parsedPodkopStatus = JSON.parse(podkopStatus.stdout || '{"running":0,"enabled":0,"status":"unknown"}');
                 const parsedSingboxStatus = JSON.parse(singboxStatus.stdout || '{"running":0,"enabled":0,"status":"unknown"}');
-                    const newContent = createStatusSection(parsedPodkopStatus, parsedSingboxStatus, podkop, luci, singbox, system);
+
                 const container = document.getElementById('diagnostics-status');
-                    if (container) {
+                if (!container) return;
+
+                const statusSection = createStatusSection(parsedPodkopStatus, parsedSingboxStatus, podkop, luci, singbox, system);
                 container.innerHTML = '';
-                        container.appendChild(newContent);
+                container.appendChild(statusSection);
-                        checkFakeIP();
+
+                // Update FakeIP status
+                const fakeipElement = document.getElementById('fakeip-status');
+                if (fakeipElement) {
+                    fakeipElement.innerHTML = E('span', { 'style': `color: ${fakeipStatus.color}` }, [
+                        fakeipStatus.state === 'working' ? '✔ ' : fakeipStatus.state === 'not_working' ? '✘ ' : '! ',
+                        fakeipStatus.message
+                    ]).outerHTML;
                 }
             } catch (e) {
-                    console.error('Error parsing diagnostics status:', e);
+                console.error('Error updating diagnostics:', e);
                 const container = document.getElementById('diagnostics-status');
                 if (container) {
-                        container.innerHTML = '<div class="alert-message warning"><strong>' + _('Error loading diagnostics') + '</strong><br><pre>' + e.toString() + '</pre></div>';
+                    container.innerHTML = E('div', { 'class': 'alert-message warning' }, [
+                        E('strong', {}, _('Error loading diagnostics')),
+                        E('br'),
+                        E('pre', {}, e.toString())
+                    ]).outerHTML;
                 }
             }
-            });
+        }
+
+        // Start periodic updates
+        function startPeriodicUpdates() {
+            updateDiagnostics();
+            const intervalId = setInterval(updateDiagnostics, 10000);
+            window.addEventListener('unload', () => clearInterval(intervalId));
         }
 
         // Extra Section
@@ -960,7 +975,7 @@ return view.extend({
         const map_promise = m.render();
         map_promise.then(node => {
             node.classList.add('fade-in');
-            updateDiagnostics();
+            startPeriodicUpdates();
             return node;
         });