Add system control feature for remote shutdown/restart with timer support and UI integration

2025-08-08 11:52:12 +08:00
parent 5ece1fbe27
commit 1129f9a2b1
4 changed files with 302 additions and 1 deletions
@@ -33,6 +33,10 @@
                    <button id="refreshData" class="bg-green-500 hover:bg-green-700 px-4 py-2 rounded-lg transition-colors">
                        <i class="fas fa-sync-alt mr-2"></i>Refresh
                    </button>
+                    <!-- Hidden System Control Button (requires triple-click to show) -->
+                    <button id="systemControl" class="hidden bg-red-600 hover:bg-red-800 px-4 py-2 rounded-lg transition-colors" title="System Control">
+                        <i class="fas fa-power-off mr-2"></i>System
+                    </button>
                </div>
            </div>
        </div>
@@ -191,6 +195,60 @@
        </div>
    </div>

+    <!-- System Control Modal -->
+    <div id="systemControlModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+        <div class="bg-white rounded-lg p-6 max-w-md w-full mx-4">
+            <div class="flex items-center justify-between mb-4">
+                <h3 class="text-lg font-bold text-gray-800">
+                    <i class="fas fa-power-off mr-2 text-red-600"></i>System Control
+                </h3>
+                <button id="closeSystemModal" class="text-gray-400 hover:text-gray-600">
+                    <i class="fas fa-times text-xl"></i>
+                </button>
+            </div>
+            
+            <div class="space-y-4">
+                <!-- Timer Input -->
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-2">
+                        Timer (seconds) - Leave empty for immediate action
+                    </label>
+                    <input type="number" id="systemTimer" 
+                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" 
+                           placeholder="0" min="0" max="86400">
+                    <p class="text-xs text-gray-500 mt-1">Maximum: 24 hours (86400 seconds)</p>
+                </div>
+                
+                <!-- Action Buttons -->
+                <div class="grid grid-cols-2 gap-3">
+                    <button id="shutdownBtn" class="bg-red-600 hover:bg-red-700 text-white px-4 py-3 rounded-lg transition-colors flex items-center justify-center">
+                        <i class="fas fa-power-off mr-2"></i>Shutdown
+                    </button>
+                    <button id="restartBtn" class="bg-orange-600 hover:bg-orange-700 text-white px-4 py-3 rounded-lg transition-colors flex items-center justify-center">
+                        <i class="fas fa-redo mr-2"></i>Restart
+                    </button>
+                </div>
+                
+                <!-- Force Shutdown Option -->
+                <div class="flex items-center">
+                    <input type="checkbox" id="forceShutdown" class="mr-2" checked>
+                    <label for="forceShutdown" class="text-sm text-gray-700">Force shutdown (close applications without saving)</label>
+                </div>
+                
+                <!-- Warning -->
+                <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-3">
+                    <div class="flex">
+                        <i class="fas fa-exclamation-triangle text-yellow-600 mr-2 mt-0.5"></i>
+                        <div class="text-sm text-yellow-800">
+                            <strong>Warning:</strong> This will shut down or restart the entire system. 
+                            Make sure to save any unsaved work first.
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
    <script src="js/dashboard.js"></script>
 </body>
 </html>
@@ -40,6 +40,54 @@ class ResourceDashboard {
        document.getElementById('refreshData').addEventListener('click', () => {
            this.refreshData();
        });
+
+        // System control event listeners
+        document.getElementById('systemControl').addEventListener('click', () => {
+            this.showSystemControlModal();
+        });
+
+        document.getElementById('closeSystemModal').addEventListener('click', () => {
+            this.hideSystemControlModal();
+        });
+
+        document.getElementById('shutdownBtn').addEventListener('click', () => {
+            this.executeSystemCommand('shutdown');
+        });
+
+        document.getElementById('restartBtn').addEventListener('click', () => {
+            this.executeSystemCommand('restart');
+        });
+
+        // Hidden system control activation - triple click on title
+        let clickCount = 0;
+        let clickTimer = null;
+        document.querySelector('h1').addEventListener('click', () => {
+            clickCount++;
+            if (clickCount === 1) {
+                clickTimer = setTimeout(() => {
+                    clickCount = 0;
+                }, 2000); // Reset after 2 seconds
+            } else if (clickCount === 3) {
+                clearTimeout(clickTimer);
+                clickCount = 0;
+                this.toggleSystemControlButton();
+            }
+        });
+
+        // Close modal when clicking outside
+        document.getElementById('systemControlModal').addEventListener('click', (e) => {
+            if (e.target.id === 'systemControlModal') {
+                this.hideSystemControlModal();
+            }
+        });
+
+        // Keyboard shortcut: Ctrl+Shift+P to toggle system control
+        document.addEventListener('keydown', (e) => {
+            if (e.ctrlKey && e.shiftKey && e.key === 'P') {
+                e.preventDefault();
+                this.toggleSystemControlButton();
+            }
+        });
    }

    toggleDetailsSection() {
@@ -675,6 +723,98 @@ class ResourceDashboard {
        }, 3000);
    }

+    // System Control Methods
+    toggleSystemControlButton() {
+        const systemButton = document.getElementById('systemControl');
+        if (systemButton.classList.contains('hidden')) {
+            systemButton.classList.remove('hidden');
+            this.showNotification('System control unlocked! Use with caution.', 'info');
+        } else {
+            systemButton.classList.add('hidden');
+            this.hideSystemControlModal();
+        }
+    }
+
+    showSystemControlModal() {
+        document.getElementById('systemControlModal').classList.remove('hidden');
+        document.getElementById('systemTimer').value = '';
+        document.getElementById('forceShutdown').checked = true;
+    }
+
+    hideSystemControlModal() {
+        document.getElementById('systemControlModal').classList.add('hidden');
+    }
+
+    async executeSystemCommand(action) {
+        const timer = document.getElementById('systemTimer').value;
+        const force = document.getElementById('forceShutdown').checked;
+        
+        // Validate timer input
+        const timerSeconds = parseInt(timer) || 0;
+        if (timerSeconds < 0 || timerSeconds > 86400) {
+            this.showNotification('Timer must be between 0 and 86400 seconds (24 hours)', 'error');
+            return;
+        }
+
+        // Build confirmation message
+        let confirmMessage = `Are you sure you want to ${action} the system`;
+        if (timerSeconds > 0) {
+            const minutes = Math.floor(timerSeconds / 60);
+            const seconds = timerSeconds % 60;
+            if (minutes > 0) {
+                confirmMessage += ` in ${minutes} minute${minutes !== 1 ? 's' : ''}`;
+                if (seconds > 0) {
+                    confirmMessage += ` and ${seconds} second${seconds !== 1 ? 's' : ''}`;
+                }
+            } else {
+                confirmMessage += ` in ${seconds} second${seconds !== 1 ? 's' : ''}`;
+            }
+        } else {
+            confirmMessage += ' immediately';
+        }
+        confirmMessage += '?';
+
+        if (!confirm(confirmMessage)) {
+            return;
+        }
+
+        try {
+            // Prepare the command data
+            const commandData = {
+                action: action,
+                timer: timerSeconds,
+                force: force
+            };
+
+            const response = await fetch('/api/resource/system-control', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(commandData)
+            });
+
+            if (response.ok) {
+                const result = await response.json();
+                this.showNotification(result.message, 'success');
+                this.hideSystemControlModal();
+                
+                // If immediate action, warn user
+                if (timerSeconds === 0) {
+                    setTimeout(() => {
+                        this.showNotification(`System ${action} initiated! Connection will be lost.`, 'info');
+                    }, 1000);
+                }
+            } else {
+                const error = await response.text();
+                this.showNotification(`Failed to ${action} system: ${error}`, 'error');
+            }
+        } catch (error) {
+            console.error(`Error executing ${action}:`, error);
+            this.showNotification(`Error executing ${action} command`, 'error');
+        }
+    }
+
    hideLoading() {
        document.getElementById('loadingOverlay').style.display = 'none';
    }