refactor: Externalize all template

This commit is contained in:
ReturnFI
2025-09-24 19:38:47 +00:00
parent 9b1d2cabb9
commit 105371cb07
5 changed files with 68 additions and 1798 deletions

View File

@ -13,7 +13,9 @@
</div>
</div>
<section class="content">
<section class="content"
data-server-status-url="{{ url_for('server_status_api') }}"
data-services-status-url="{{ url_for('server_services_status_api') }}">
<div class="container-fluid">
<div class="row">
<div class="col-md-3 col-sm-6 col-12">
@ -190,77 +192,5 @@
{% endblock %}
{% block javascripts %}
<script>
function updateServerInfo() {
fetch('{{ url_for("server_status_api") }}')
.then(response => response.json())
.then(data => {
document.getElementById('cpu-usage').textContent = data.cpu_usage;
document.getElementById('ram-usage').textContent = `${data.ram_usage} / ${data.total_ram}`;
document.getElementById('online-users').textContent = data.online_users;
document.getElementById('uptime').textContent = data.uptime;
document.getElementById('server-ipv4').textContent = `IPv4: ${data.server_ipv4 || 'N/A'}`;
document.getElementById('server-ipv6').textContent = `IPv6: ${data.server_ipv6 || 'N/A'}`;
document.getElementById('download-speed').textContent = `🔽 Download: ${data.download_speed}`;
document.getElementById('upload-speed').textContent = `🔼 Upload: ${data.upload_speed}`;
document.getElementById('tcp-connections').textContent = `TCP: ${data.tcp_connections}`;
document.getElementById('udp-connections').textContent = `UDP: ${data.udp_connections}`;
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;
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() {
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);
updateServiceBox('normalsub', data.hysteria_normal_sub);
})
.catch(error => console.error('Error fetching service statuses:', error));
}
function updateServiceBox(serviceName, status) {
const statusElement = document.getElementById(serviceName + '-status');
const statusBox = document.getElementById(serviceName + '-status-box');
if (status === true) {
statusElement.textContent = 'Active';
statusBox.classList.remove('bg-danger');
statusBox.classList.add('bg-success');
} else {
statusElement.textContent = 'Inactive';
statusBox.classList.remove('bg-success');
statusBox.classList.add('bg-danger');
}
}
document.addEventListener('DOMContentLoaded', function () {
updateServerInfo();
updateServiceStatuses();
setInterval(updateServerInfo, 2000);
setInterval(updateServiceStatuses, 10000);
const toggleIpBtn = document.getElementById('toggle-ip-visibility');
const ipAddressesDiv = document.getElementById('ip-addresses');
toggleIpBtn.addEventListener('click', function(e) {
e.preventDefault();
const isBlurred = ipAddressesDiv.style.filter === 'blur(5px)';
ipAddressesDiv.style.filter = isBlurred ? 'none' : 'blur(5px)';
toggleIpBtn.querySelector('i').classList.toggle('fa-eye');
toggleIpBtn.querySelector('i').classList.toggle('fa-eye-slash');
});
});
</script>
<script src="{{ url_for('assets', path='js/index.js') }}"></script>
{% endblock %}