crafty-4/app/frontend/templates/panel/dashboard.html

274 lines
10 KiB
HTML

{% extends ../base.html %}
{% block meta %}
<meta http-equiv="refresh" content="60">
{% end %}
{% block title %}Crafty Controller - Dashboard{% end %}
{% block content %}
<div class="content-wrapper">
<!-- Page Title Header Starts-->
<div class="row page-title-header">
<div class="col-12">
<div class="page-header">
<h4 class="page-title">Dashboard</h4>
</div>
</div>
</div>
<!-- Page Title Header Ends-->
<div class="row">
<div class="col-md-12 grid-margin">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-lg-3 col-md-6">
<div class="d-flex">
<div class="wrapper">
<h5 class="mb-1 font-weight-medium text-primary"> Host</h5>
<h3 class="mb-0 font-weight-semibold"> <i class="fas fa-chart-line"></i></h3>
</div>
<div class="wrapper my-auto ml-auto ml-lg-4">
<p class="mb-0 text-success" data-toggle="tooltip" data-placement="top" data-html="true" title="CPU Cores: {{ data.get('hosts_data').get('cpu_cores') }} <br /> CPU Cur Freq: {{ data.get('hosts_data').get('cpu_cur_freq') }} <br /> CPU Max Freq: {{ data.get('hosts_data').get('cpu_max_freq') }}" >
{{ data.get('hosts_data').get('cpu_usage') }} {{ _('CPU Usage') }}
</p>
<p class="mb-0 text-danger" data-toggle="tooltip" data-placement="top" title="Memory Usage: {{ data.get('hosts_data').get('mem_usage') }}" >
{{ data.get('hosts_data').get('mem_percent') }}% {{ _('Memory Usage') }}
</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mt-md-0 mt-4">
<div class="d-flex">
<div class="wrapper">
<h5 class="mb-1 font-weight-medium text-primary">Servers</h5>
<h3 class="mb-0 font-weight-semibold">{{ data['server_stats']['total'] }}</h3>
</div>
<div class="wrapper my-auto ml-auto ml-lg-4">
<p class="mb-0 text-success">{{ data['server_stats']['running'] }} {{_('Online')}}</p>
<p class="mb-0 text-warning"> {{ data['server_stats']['stopped'] }} {{_('Shutdown')}}</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mt-md-0 mt-4">
<div class="d-flex">
<div class="wrapper">
<h5 class="mb-1 font-weight-medium text-primary">Players</h5>
<h3 class="mb-0 font-weight-semibold">18</h3>
</div>
<div class="wrapper my-auto ml-auto ml-lg-4">
<p class="mb-0 text-success">35 Max</p>
<p class="mb-0 text-warning">10 Avg</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mt-md-0 mt-4">
<div class="d-flex">
<div class="wrapper">
<h5 class="mb-1 font-weight-medium text-primary">Backups</h5>
<h3 class="mb-0 font-weight-semibold">7</h3>
</div>
<div class="wrapper my-auto ml-auto ml-lg-4">
<p class="mb-0 text-success">Last: 11-31-2020</p>
<p class="mb-0 text-success">Next: 12-05-2020</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-lg-12 grid-margin stretch-card">
<div class="card">
<div class="card-header header-sm d-flex justify-content-between align-items-center">
<h4 class="card-title"><i class="fas fa-server"></i> &nbsp;All Servers</h4>
<div class="d-md-none">
<small>Can't see everything on mobile?<br /> Try scrolling the table sideways.</small>
</div>
<div><a class="nav-link" href="/server/step1"><i class="fas fa-plus-circle"></i> &nbsp; Add New Server</a></div>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table">
<thead>
<tr class="rounded">
<th>Server</th>
<th>Actions</th>
<th>CPU</th>
<th>Memory</th>
<th>World</th>
<th>Players</th>
<th>Status</th>
</tr>
</thead>
<tbody>
{% for server in data['servers'] %}
<tr>
<td>
<i class="fas fa-server"></i>
<a href="/panel/server_detail?id={{server['server_data']['server_id']}}">
{{ server['server_data']['server_name'] }}
</a>
</td>
<td>
{% if server['stats'][0]['running'] %}
<a class="stop_button" data-id="{{server['server_data']['server_id']}}"> <i class="fas fa-stop"></i></a> &nbsp;
<a class="restart_button" data-id="{{server['server_data']['server_id']}}"> <i class="fas fa-sync"></i></a> &nbsp;
{% else %}
<a data-id="{{server['server_data']['server_id']}}" class="play_button"><i class="fas fa-play"></i></a> &nbsp;
{% end %}
</td>
<td>
<div class="progress" data-toggle="tooltip" data-placement="top" title="{{server['stats'][0]['cpu']}}">
<div class="progress-bar
{% if server['stats'][0]['cpu'] <= 33 %}
bg-success
{% elif 34 <= server['stats'][0]['cpu'] <= 66 %}
bg-warning
{% else %}
bg-danger
{% end %}
" role="progressbar" style="width: {{server['stats'][0]['cpu']}}%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
{{server['stats'][0]['cpu']}}%
</td>
<td>
<div class="progress" data-toggle="tooltip" data-placement="top" title="{{server['stats'][0]['mem']}}">
<div class="progress-bar
{% if server['stats'][0]['mem_percent'] <= 33 %}
bg-success
{% elif 34 <= server['stats'][0]['mem_percent'] <= 66 %}
bg-warning
{% else %}
bg-danger
{% end %}
" role="progressbar" style="width: {{server['stats'][0]['mem_percent']}}%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
{{server['stats'][0]['mem_percent']}}% -
{% if server['stats'][0]['mem'] == 0 %}
0 MB
{% else %}
{{server['stats'][0]['mem']}}
{% end %}
</td>
<td>
{{ server['stats'][0]['world_name'] }} : {{ server['stats'][0]['world_size'] }}
</td>
<td>
{% if server['stats'][0]['int_ping_results'] %}
{{ server['stats'][0]['online'] }} / {{ server['stats'][0]['max'] }} Max<br />
{% if server['stats'][0]['desc'] != 'False' %}
{{ server['stats'][0]['desc'] }} <br />
{% end %}
{% if server['stats'][0]['version'] != 'False' %}
{{ server['stats'][0]['version'] }}
{% end %}
{% end %}
</td>
<td>
{% if server['stats'][0]['running'] %}
<i class="fas fa-thumbs-up"></i> <span class="text-success">Online</span>
{% else %}
<i class="fas fa-thumbs-down"></i> <span class="text-danger">Offline</span>
{% end %}
</td>
</tr>
{% end %}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- content-wrapper ends -->
{% end %}
{% block js %}
<script>
function send_command (server_id, command){
<!-- this getCookie function is in base.html-->
var token = getCookie("_xsrf");
$.ajax({
type: "POST",
headers: {'X-XSRFToken': token},
url: '/server/command?command=' + command + '&id=' + server_id,
success: function(data){
console.log("got response:");
console.log(data);
setTimeout(function(){ location.reload(); }, 10000);
}
});
}
$( document ).ready(function() {
console.log('ready for JS!')
$( ".play_button" ).click(function() {
server_id = $(this).attr("data-id");
send_command(server_id, 'start_server');
bootbox.alert({
backdrop: true,
title: "Sending your command",
message: '<div align="center"><i class="fas fa-spin fa-spinner"></i> &nbsp; Please be patient while we start the server<br /> This screen will refresh in a moment </div>'
});
});
$( ".stop_button" ).click(function() {
console.log("stopping server");
server_id = $(this).attr("data-id");
send_command(server_id, 'stop_server');
bootbox.alert({
backdrop: true,
title: "Sending your command",
message: '<div align="center"><i class="fas fa-spin fa-spinner"></i> &nbsp; Please be patient while we stop the server<br /> This screen will refresh in a moment </div>'
});
});
$( ".restart_button" ).click(function() {
server_id = $(this).attr("data-id");
send_command(server_id, 'restart_server');
bootbox.alert({
backdrop: true,
title: "Sending your command",
message: '<div align="center"><i class="fas fa-spin fa-spinner"></i> &nbsp; Please be patient while we restart the server<br /> This screen will refresh in a moment </div>'
});
});
});
</script>
{% end %}