feat(webpanel): add restart button for Hysteria2 service with fetch handling

core/scripts/webpanel/assets/js/index.js

@@ -53,6 +53,15 @@ function updateServiceBox(serviceName, status) {
         statusBox.classList.remove('bg-success');
         statusBox.classList.add('bg-danger');
     }
+
+    if (serviceName === 'hysteria2') {
+        const restartBtn = document.getElementById('restart-hysteria2-btn');
+        if (status === true) {
+            restartBtn.style.display = 'none';
+        } else {
+            restartBtn.style.display = 'block';
+        }
+    }
 }
 
 document.addEventListener('DOMContentLoaded', function () {
@@ -70,4 +79,48 @@ document.addEventListener('DOMContentLoaded', function () {
         toggleIpBtn.querySelector('i').classList.toggle('fa-eye');
         toggleIpBtn.querySelector('i').classList.toggle('fa-eye-slash');
     });
+
+    const restartBtn = document.getElementById('restart-hysteria2-btn');
+    const restartUrl = document.querySelector('.content').dataset.restartHysteriaUrl;
+
+    restartBtn.addEventListener('click', function(e) {
+        e.preventDefault();
+        
+        restartBtn.innerHTML = 'Restarting... <i class="fas fa-sync-alt fa-spin ml-1"></i>';
+        restartBtn.style.pointerEvents = 'none';
+
+        fetch(restartUrl, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            }
+        })
+        .then(response => {
+            if (!response.ok) {
+                return response.json().then(err => { throw new Error(err.detail || 'Unknown error'); });
+            }
+            return response.json();
+        })
+        .then(data => {
+            Swal.fire({
+                icon: 'success',
+                title: 'Success',
+                text: data.detail,
+                timer: 2000,
+                showConfirmButton: false
+            });
+            setTimeout(updateServiceStatuses, 1000);
+        })
+        .catch(error => {
+            Swal.fire({
+                icon: 'error',
+                title: 'Error',
+                text: `Failed to restart Hysteria2: ${error.message}`
+            });
+        })
+        .finally(() => {
+            restartBtn.innerHTML = 'Restart Service <i class="fas fa-sync-alt ml-1"></i>';
+            restartBtn.style.pointerEvents = 'auto';
+        });
+    });
 });

core/scripts/webpanel/templates/index.html

@@ -15,7 +15,8 @@
 
 <section class="content" 
          data-server-status-url="{{ url_for('server_status_api') }}" 
-         data-services-status-url="{{ url_for('server_services_status_api') }}">
+         data-services-status-url="{{ url_for('server_services_status_api') }}"
+         data-restart-hysteria-url="{{ url_for('restart_service') }}">
     <div class="container-fluid">
         <div class="row">
             <div class="col-md-3 col-sm-6 col-12">
@@ -151,6 +152,9 @@
                     <div class="icon">
                         <i class="fas fa-bolt"></i>
                     </div>
+                    <a href="#" id="restart-hysteria2-btn" class="small-box-footer" style="display: none;">
+                        Restart Service <i class="fas fa-sync-alt ml-1"></i>
+                    </a>
                 </div>
             </div>
             <div class="col-lg-3 col-6">