From 738619b1e4bfbe7a77355cba83e5b1a435c54ed7 Mon Sep 17 00:00:00 2001 From: Whispering Wind <151555003+ReturnFI@users.noreply.github.com> Date: Tue, 19 Aug 2025 23:40:07 +0330 Subject: [PATCH] feat(ui): Redesign dashboard to display detailed server stats --- core/scripts/webpanel/templates/index.html | 172 ++++++++++++++------- 1 file changed, 120 insertions(+), 52 deletions(-) diff --git a/core/scripts/webpanel/templates/index.html b/core/scripts/webpanel/templates/index.html index 7932834..1f966ab 100644 --- a/core/scripts/webpanel/templates/index.html +++ b/core/scripts/webpanel/templates/index.html @@ -15,63 +15,119 @@
+
-
- -
-
-

--%

-

CPU Usage

-
-
- +
+
+ +
+ CPU Usage + --
-
- -
-
-

--

-

RAM Usage

-
-
- +
+
+ +
+ RAM Usage + -- / --
-
- -
-
-

--

-

Total Traffic

-
-
- +
+
+ +
+ Online Users + --
-
- -
-
-

--

-

Online Users

+
+
+ +
+ Uptime + --
-
- +
+
+
+
+
+
+ +
+ Download / Upload Speed + -- / -- +
+
+
+
+
+ +
+ TCP / UDP Connections + -- / --
+ +
+
+
+
+

Traffic Since Last Reboot

+
+
+
+

Uploaded

+

--

+
+
+

Downloaded

+

--

+
+
+

Combined

+

--

+
+
+
+
+
+
+
+

User Traffic (All Time)

+
+
+
+

Uploaded

+

--

+
+
+

Downloaded

+

--

+
+
+

Combined

+

--

+
+
+
+
+
+ +

--

-

Hysteria2

+

Hysteria2 Core

@@ -93,10 +149,10 @@

--

-

IP Limit

+

IP Limit Service

- +
@@ -104,7 +160,7 @@

--

-

Normal Subscription

+

Subscription Service

@@ -122,21 +178,34 @@ fetch('{{ url_for("server_status_api") }}') .then(response => response.json()) .then(data => { + // Core Stats document.getElementById('cpu-usage').textContent = data.cpu_usage; - document.getElementById('ram-usage').textContent = data.ram_usage; + document.getElementById('ram-usage').textContent = `${data.ram_usage} / ${data.total_ram}`; document.getElementById('online-users').textContent = data.online_users; - document.getElementById('total-traffic').textContent = data.total_traffic; + document.getElementById('uptime').textContent = data.uptime; + + // Network Stats + document.getElementById('network-speed').innerHTML = `🔽 ${data.download_speed} / 🔼 ${data.upload_speed}`; + document.getElementById('network-connections').textContent = `${data.tcp_connections} / ${data.udp_connections}`; + + // Traffic Since Reboot + document.getElementById('reboot-uploaded-traffic').textContent = data.reboot_uploaded_traffic; + document.getElementById('reboot-downloaded-traffic').textContent = data.reboot_downloaded_traffic; + document.getElementById('reboot-total-traffic').textContent = data.reboot_total_traffic; + + // User Traffic (All Time) + document.getElementById('user-uploaded-traffic').textContent = data.user_uploaded_traffic; + document.getElementById('user-downloaded-traffic').textContent = data.user_downloaded_traffic; + document.getElementById('user-total-traffic').textContent = data.user_total_traffic; }) .catch(error => console.error('Error fetching server info:', error)); } function updateServiceStatuses() { - // Add services api in fetch fetch('{{ url_for("server_services_status_api") }}') .then(response => response.json()) .then(data => { - updateServiceBox('hysteria2', data.hysteria_server); updateServiceBox('telegrambot', data.hysteria_telegram_bot); updateServiceBox('iplimit', data.hysteria_iplimit); @@ -152,20 +221,19 @@ if (status === true) { statusElement.textContent = 'Active'; statusBox.classList.remove('bg-danger'); - statusBox.classList.add('bg-success'); // Add green + statusBox.classList.add('bg-success'); } else { statusElement.textContent = 'Inactive'; statusBox.classList.remove('bg-success'); - statusBox.classList.add('bg-danger'); // Add red + statusBox.classList.add('bg-danger'); } } - - - updateServerInfo(); - updateServiceStatuses(); - - setInterval(updateServerInfo, 5000); + document.addEventListener('DOMContentLoaded', function () { + updateServerInfo(); + updateServiceStatuses(); + setInterval(updateServerInfo, 2000); + setInterval(updateServiceStatuses, 10000); + }); - {% endblock %} \ No newline at end of file