94 lines
3.2 KiB
HTML
94 lines
3.2 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Dashboard{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="content-header">
|
|
<div class="container-fluid">
|
|
<div class="row mb-2">
|
|
<div class="col-sm-6">
|
|
<h1 class="m-0">Dashboard</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<section class="content">
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-lg-3 col-6">
|
|
<!-- small box -->
|
|
<div class="small-box bg-info">
|
|
<div class="inner">
|
|
<h3 id="cpu-usage">--<sup style="font-size: 20px">%</sup></h3>
|
|
<p>CPU Usage</p>
|
|
</div>
|
|
<div class="icon">
|
|
<i class="fas fa-microchip"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-6">
|
|
<!-- small box -->
|
|
<div class="small-box bg-warning">
|
|
<div class="inner">
|
|
<h3 id="ram-usage">--</h3>
|
|
<p>RAM Usage</p>
|
|
</div>
|
|
<div class="icon">
|
|
<i class="fas fa-memory"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-6">
|
|
<!-- small box -->
|
|
<div class="small-box bg-secondary">
|
|
<div class="inner">
|
|
<h3 id="total-traffic">--</h3>
|
|
<p>Total Traffic</p>
|
|
</div>
|
|
<div class="icon">
|
|
<i class="fas fa-network-wired"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-6">
|
|
<!-- small box -->
|
|
<div class="small-box bg-success">
|
|
<div class="inner">
|
|
<h3 id="online-users">--</h3>
|
|
<p>Online Users</p>
|
|
</div>
|
|
<div class="icon">
|
|
<i class="fas fa-users"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{% endblock %}
|
|
|
|
{% block javascripts %}
|
|
<script>
|
|
function updateServerInfo() {
|
|
fetch('{{ url_for("server_status_api") }}')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
// Update extended info from CLI
|
|
document.getElementById('cpu-usage').textContent = data.cpu_usage;
|
|
document.getElementById('ram-usage').textContent = data.ram_usage;
|
|
document.getElementById('online-users').textContent = data.online_users;
|
|
document.getElementById('total-traffic').textContent = data.total_traffic;
|
|
})
|
|
.catch(error => console.error('Error fetching server info:', error));
|
|
}
|
|
|
|
// Initial update
|
|
updateServerInfo();
|
|
|
|
// Update every 10 seconds (adjust as needed)
|
|
setInterval(updateServerInfo, 5000);
|
|
</script>
|
|
|
|
{% endblock %} |