Mirrored_Repos/crafty-4
1
0
Fork 0
mirror of https://gitlab.com/crafty-controller/crafty-4.git synced 2024-08-30 18:23:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixed Table occupation

Browse Source
This commit is contained in:
Silversthorn 2022-05-18 22:00:20 +02:00
parent c7fab827d9
commit 8c21eddf2b
1 changed files with 135 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

261
app/frontend/templates/panel/dashboard.html
View File

@ -15,8 +15,9 @@
<div class="page-header"> <div class="page-header">
<h4 class="page-title">{{ translate('dashboard', 'dashboard', data['lang']) }} <h4 class="page-title">{{ translate('dashboard', 'dashboard', data['lang']) }}
{% if data['server_stats']['running'] != 0 %} {% if data['server_stats']['running'] != 0 %}
<span id="sync" style="margin-left: 5px;"><i class="fas fa-sync fa-spin"></i></span></h4> <span id="sync" style="margin-left: 5px;"><i class="fas fa-sync fa-spin"></i></span>
{% end %} </h4>
{% end %}
</div> </div>
</div> </div>
@ -38,12 +39,12 @@
</div> </div>
<div class="wrapper my-auto ml-auto ml-lg-4"> <div class="wrapper my-auto ml-auto ml-lg-4">
<p id="cpu_data" class="mb-0 text-success" data-toggle="tooltip" data-placement="top" data-html="true" <p id="cpu_data" class="mb-0 text-success" data-toggle="tooltip" data-placement="top" data-html="true"
title="{% raw translate('dashboard', 'cpuCores', data['lang']) %}: {{ data.get('hosts_data').get('cpu_cores') }} <br /> {% raw translate('dashboard', 'cpuCurFreq', data['lang']) %}: {{ data.get('hosts_data').get('cpu_cur_freq') }} <br /> {% raw translate('dashboard', 'cpuMaxFreq', data['lang']) %}: {{ data.get('hosts_data').get('cpu_max_freq') }}"> title="{% raw translate('dashboard', 'cpuCores', data['lang']) %}: {{ data.get('hosts_data').get('cpu_cores') }} <br /> {% raw translate('dashboard', 'cpuCurFreq', data['lang']) %}: {{ data.get('hosts_data').get('cpu_cur_freq') }} <br /> {% raw translate('dashboard', 'cpuMaxFreq', data['lang']) %}: {{ data.get('hosts_data').get('cpu_max_freq') }}">
{{ translate('dashboard', 'cpuUsage', data['lang']) }}: <span id="cpu_usage">{{ {{ translate('dashboard', 'cpuUsage', data['lang']) }}: <span id="cpu_usage">{{
data.get('hosts_data').get('cpu_usage') }}</span> data.get('hosts_data').get('cpu_usage') }}</span>
</p> </p>
<p id="mem_usage" class="mb-0 text-danger" data-toggle="tooltip" data-placement="top" <p id="mem_usage" class="mb-0 text-danger" data-toggle="tooltip" data-placement="top"
title="{{ translate('dashboard', 'memUsage', data['lang']) }}: {{ data.get('hosts_data').get('mem_usage') }}"> title="{{ translate('dashboard', 'memUsage', data['lang']) }}: {{ data.get('hosts_data').get('mem_usage') }}">
{{ translate('dashboard', 'memUsage', data['lang']) }}: <span id="mem_percent">{{ {{ translate('dashboard', 'memUsage', data['lang']) }}: <span id="mem_percent">{{
data.get('hosts_data').get('mem_percent') }}%</span> data.get('hosts_data').get('mem_percent') }}%</span>
</p> </p>
@ -92,8 +93,8 @@
data['lang']) }}</h4> data['lang']) }}</h4>
{% if len(data['servers']) > 0 %} {% if len(data['servers']) > 0 %}
<span class="too_small" title="{{ translate('dashboard', 'cannotSeeOnMobile', data['lang']) }}" , <span class="too_small" title="{{ translate('dashboard', 'cannotSeeOnMobile', data['lang']) }}" ,
data-content="{{ translate('dashboard', 'cannotSeeOnMobile2', data['lang']) }}" , data-content="{{ translate('dashboard', 'cannotSeeOnMobile2', data['lang']) }}" ,
data-placement="top"></span> data-placement="top"></span>
{% end %} {% end %}
<div><a class="nav-link" href="/server/step1"><i class="fas fa-plus-circle"></i> &nbsp; {{ <div><a class="nav-link" href="/server/step1"><i class="fas fa-plus-circle"></i> &nbsp; {{
translate('dashboard', 'newServer', data['lang']) }}</a></div> translate('dashboard', 'newServer', data['lang']) }}</a></div>
@ -112,7 +113,7 @@
{% end %} {% end %}
{% if len(data['servers']) > 0 %} {% if len(data['servers']) > 0 %}
<!-- View for Large screen --> <!-- View for Large screen -->
<table id="servers_table" class="table table-hover d-none d-sm-block"> <table id="servers_table" class="table table-hover d-none d-sm-table">
<thead> <thead>
<tr class="rounded" id="first" draggable="false"> <tr class="rounded" id="first" draggable="false">
<th draggable="false">{{ translate('dashboard', 'server', data['lang']) }}</th> <th draggable="false">{{ translate('dashboard', 'server', data['lang']) }}</th>
@ -138,17 +139,17 @@
{% if server['user_command_permission'] %} {% if server['user_command_permission'] %}
{% if server['stats']['running'] %} {% if server['stats']['running'] %}
<a data-id="{{server['server_data']['server_id']}}" class="stop_button" <a data-id="{{server['server_data']['server_id']}}" class="stop_button"
data-toggle="tooltip" title="{{ translate('dashboard', 'stop' , data['lang']) }}"> data-toggle="tooltip" title="{{ translate('dashboard', 'stop' , data['lang']) }}">
<i class="fas fa-stop"></i> <i class="fas fa-stop"></i>
</a> &nbsp; </a> &nbsp;
<a data-id="{{server['server_data']['server_id']}}" class="restart_button" <a data-id="{{server['server_data']['server_id']}}" class="restart_button"
data-toggle="tooltip" title="{{ translate('dashboard', 'restart' , data['lang']) }}"> data-toggle="tooltip" title="{{ translate('dashboard', 'restart' , data['lang']) }}">
<i class="fas fa-sync"></i> <i class="fas fa-sync"></i>
</a> &nbsp; </a> &nbsp;
<a data-id="{{server['server_data']['server_id']}}" class="kill_button" <a data-id="{{server['server_data']['server_id']}}" class="kill_button"
data-toggle="tooltip" title="{{ translate('dashboard', 'kill' , data['lang']) }}"> data-toggle="tooltip" title="{{ translate('dashboard', 'kill' , data['lang']) }}">
<i class="fas fa-skull"></i> <i class="fas fa-skull"></i>
</a> &nbsp; </a> &nbsp;
@ -161,20 +162,20 @@
<a data-id="{{server['server_data']['server_id']}}" class="" title="{{ <a data-id="{{server['server_data']['server_id']}}" class="" title="{{
translate('dashboard', 'delay-explained' , data['lang'])}}">{{ translate('dashboard', 'starting', translate('dashboard', 'delay-explained' , data['lang'])}}">{{ translate('dashboard', 'starting',
data['lang']) }}</i></a> data['lang']) }}</i></a>
{% elif server['stats']['downloading']%} {% elif server['stats']['downloading']%}
<a data-id="{{server['server_data']['server_id']}}" class=""><i class="fa fa-spinner fa-spin"></i> {{ translate('serverTerm', 'downloading', <a data-id="{{server['server_data']['server_id']}}" class=""><i class="fa fa-spinner fa-spin"></i> {{ translate('serverTerm', 'downloading',
data['lang']) }}</a> data['lang']) }}</a>
{% else %} {% else %}
<a data-id="{{server['server_data']['server_id']}}" class="play_button" <a data-id="{{server['server_data']['server_id']}}" class="play_button"
data-toggle="tooltip" title="{{ translate('dashboard', 'start' , data['lang']) }}"> data-toggle="tooltip" title="{{ translate('dashboard', 'start' , data['lang']) }}">
<i class="fas fa-play"></i> <i class="fas fa-play"></i>
</a> &nbsp; </a> &nbsp;
<a data-id="{{server['server_data']['server_id']}}" class="clone_button" <a data-id="{{server['server_data']['server_id']}}" class="clone_button"
data-toggle="tooltip" title="{{ translate('dashboard', 'clone' , data['lang']) }}"> data-toggle="tooltip" title="{{ translate('dashboard', 'clone' , data['lang']) }}">
<i class="fas fa-clone"></i> <i class="fas fa-clone"></i>
</a> &nbsp; </a> &nbsp;
<a data-id="{{server['server_data']['server_id']}}" class="kill_button" <a data-id="{{server['server_data']['server_id']}}" class="kill_button"
data-toggle="tooltip" title="{{ translate('dashboard', 'kill' , data['lang']) }}"> data-toggle="tooltip" title="{{ translate('dashboard', 'kill' , data['lang']) }}">
<i class="fas fa-skull"></i> <i class="fas fa-skull"></i>
</a> &nbsp; </a> &nbsp;
{% end %} {% end %}
@ -183,7 +184,7 @@
<td draggable="false" id="server_cpu_{{server['server_data']['server_id']}}"> <td draggable="false" id="server_cpu_{{server['server_data']['server_id']}}">
<div class="progress mb-1" data-toggle="tooltip" data-placement="top" <div class="progress mb-1" data-toggle="tooltip" data-placement="top"
title="{{server['stats']['cpu']}}"> title="{{server['stats']['cpu']}}">
<div class="progress-bar <div class="progress-bar
{% if server['stats']['cpu'] <= 33 %} {% if server['stats']['cpu'] <= 33 %}
bg-success bg-success
@ -193,14 +194,14 @@
bg-danger bg-danger
{% end %} {% end %}
" role="progressbar" style="width: {{server['stats']['cpu']}}%" aria-valuenow="0" " role="progressbar" style="width: {{server['stats']['cpu']}}%" aria-valuenow="0"
aria-valuemin="0" aria-valuemax="100"></div> aria-valuemin="0" aria-valuemax="100"></div>
</div> </div>
{{server['stats']['cpu']}}% {{server['stats']['cpu']}}%
</td> </td>
<td draggable="false" id="server_mem_{{server['server_data']['server_id']}}"> <td draggable="false" id="server_mem_{{server['server_data']['server_id']}}">
<div class="progress mb-1" data-toggle="tooltip" data-placement="top" <div class="progress mb-1" data-toggle="tooltip" data-placement="top"
title="{{server['stats']['mem']}}"> title="{{server['stats']['mem']}}">
<div class="progress-bar <div class="progress-bar
{% if server['stats']['mem_percent'] <= 33 %} {% if server['stats']['mem_percent'] <= 33 %}
bg-success bg-success
@ -210,7 +211,7 @@
bg-danger bg-danger
{% end %} {% end %}
" role="progressbar" style="width: {{server['stats']['mem_percent']}}%" aria-valuenow="0" " role="progressbar" style="width: {{server['stats']['mem_percent']}}%" aria-valuenow="0"
aria-valuemin="0" aria-valuemax="100"></div> aria-valuemin="0" aria-valuemax="100"></div>
</div> </div>
{{server['stats']['mem_percent']}}% - {{server['stats']['mem_percent']}}% -
@ -240,13 +241,13 @@
</td> </td>
<td draggable="false" id="server_running_status_{{server['server_data']['server_id']}}"> <td draggable="false" id="server_running_status_{{server['server_data']['server_id']}}">
{% if server['stats']['running'] %} {% if server['stats']['running'] %}
<span class="text-success"><i class="fas fa-signal"></i> {{ translate('dashboard', 'online', <span class="text-success"><i class="fas fa-signal"></i> {{ translate('dashboard', 'online',
data['lang']) }}</span> data['lang']) }}</span>
{% elif server['stats']['crashed'] %} {% elif server['stats']['crashed'] %}
<span class="text-danger"><i class="fas fa-exclamation-triangle"></i> {{ translate('dashboard', 'crashed', <span class="text-danger"><i class="fas fa-exclamation-triangle"></i> {{ translate('dashboard', 'crashed',
data['lang']) }}</span> data['lang']) }}</span>
{% else %} {% else %}
<span class="text-warning"><i class="fas fa-ban"></i> {{ translate('dashboard', 'offline', <span class="text-warning"><i class="fas fa-ban"></i> {{ translate('dashboard', 'offline',
data['lang']) }}</span> data['lang']) }}</span>
{% end %} {% end %}
</td> </td>
@ -256,7 +257,7 @@
</tbody> </tbody>
</table> </table>
<!-- View for Small screen --> <!-- View for Small screen -->
<table id="servers_table" class="table table-hover d-block d-sm-none"> <table id="servers_table" class="table table-hover d-table d-sm-none">
<thead> <thead>
<tr class="rounded" id="first" draggable="false"> <tr class="rounded" id="first" draggable="false">
<th scope="col" draggable="false">{{ translate('dashboard', 'server', data['lang']) }}</th> <th scope="col" draggable="false">{{ translate('dashboard', 'server', data['lang']) }}</th>
@ -277,17 +278,17 @@
{% if server['user_command_permission'] %} {% if server['user_command_permission'] %}
{% if server['stats']['running'] %} {% if server['stats']['running'] %}
<a data-id="{{server['server_data']['server_id']}}" class="stop_button" <a data-id="{{server['server_data']['server_id']}}" class="stop_button"
data-toggle="tooltip" title="{{ translate('dashboard', 'stop' , data['lang']) }}"> data-toggle="tooltip" title="{{ translate('dashboard', 'stop' , data['lang']) }}">
<i class="fas fa-stop"></i> <i class="fas fa-stop"></i>
</a> &nbsp; </a> &nbsp;
<a data-id="{{server['server_data']['server_id']}}" class="restart_button" <a data-id="{{server['server_data']['server_id']}}" class="restart_button"
data-toggle="tooltip" title="{{ translate('dashboard', 'restart' , data['lang']) }}"> data-toggle="tooltip" title="{{ translate('dashboard', 'restart' , data['lang']) }}">
<i class="fas fa-sync"></i> <i class="fas fa-sync"></i>
</a> &nbsp; </a> &nbsp;
<a data-id="{{server['server_data']['server_id']}}" class="kill_button" <a data-id="{{server['server_data']['server_id']}}" class="kill_button"
data-toggle="tooltip" title="{{ translate('dashboard', 'kill' , data['lang']) }}"> data-toggle="tooltip" title="{{ translate('dashboard', 'kill' , data['lang']) }}">
<i class="fas fa-skull"></i> <i class="fas fa-skull"></i>
</a> &nbsp; </a> &nbsp;
@ -298,19 +299,19 @@
<!-- WHAT HAPPENED HERE --> <!-- WHAT HAPPENED HERE -->
<a data-id="{{server['server_data']['server_id']}}" class="" title="{{ <a data-id="{{server['server_data']['server_id']}}" class="" title="{{
translate('dashboard', 'delay-explained' , data['lang'])}}">{{ translate('dashboard', 'starting', data['lang']) }}</i></a> translate('dashboard', 'delay-explained' , data['lang'])}}">{{ translate('dashboard', 'starting', data['lang']) }}</i></a>
{% elif server['stats']['downloading']%} {% elif server['stats']['downloading']%}
<a data-id="{{server['server_data']['server_id']}}" class=""><i class="fa fa-spinner fa-spin"></i> {{ translate('serverTerm', 'downloading', data['lang']) }}</a> <a data-id="{{server['server_data']['server_id']}}" class=""><i class="fa fa-spinner fa-spin"></i> {{ translate('serverTerm', 'downloading', data['lang']) }}</a>
{% else %} {% else %}
<a data-id="{{server['server_data']['server_id']}}" class="play_button" <a data-id="{{server['server_data']['server_id']}}" class="play_button"
data-toggle="tooltip" title="{{ translate('dashboard', 'start' , data['lang']) }}"> data-toggle="tooltip" title="{{ translate('dashboard', 'start' , data['lang']) }}">
<i class="fas fa-play"></i> <i class="fas fa-play"></i>
</a> &nbsp; </a> &nbsp;
<a data-id="{{server['server_data']['server_id']}}" class="clone_button" <a data-id="{{server['server_data']['server_id']}}" class="clone_button"
data-toggle="tooltip" title="{{ translate('dashboard', 'clone' , data['lang']) }}"> data-toggle="tooltip" title="{{ translate('dashboard', 'clone' , data['lang']) }}">
<i class="fas fa-clone"></i> <i class="fas fa-clone"></i>
</a> &nbsp; </a> &nbsp;
<a data-id="{{server['server_data']['server_id']}}" class="kill_button" <a data-id="{{server['server_data']['server_id']}}" class="kill_button"
data-toggle="tooltip" title="{{ translate('dashboard', 'kill' , data['lang']) }}"> data-toggle="tooltip" title="{{ translate('dashboard', 'kill' , data['lang']) }}">
<i class="fas fa-skull"></i> <i class="fas fa-skull"></i>
</a> &nbsp; </a> &nbsp;
{% end %} {% end %}
@ -318,13 +319,13 @@
</td> </td>
<td draggable="false" id="m_server_running_status_{{server['server_data']['server_id']}}"> <td draggable="false" id="m_server_running_status_{{server['server_data']['server_id']}}">
{% if server['stats']['running'] %} {% if server['stats']['running'] %}
<span class="text-success"><i class="fas fa-signal"></i> {{ translate('dashboard', 'online', <span class="text-success"><i class="fas fa-signal"></i> {{ translate('dashboard', 'online',
data['lang']) }}</span> data['lang']) }}</span>
{% elif server['stats']['crashed'] %} {% elif server['stats']['crashed'] %}
<span class="text-danger"><i class="fas fa-exclamation-triangle"></i> {{ translate('dashboard', 'crashed', <span class="text-danger"><i class="fas fa-exclamation-triangle"></i> {{ translate('dashboard', 'crashed',
data['lang']) }}</span> data['lang']) }}</span>
{% else %} {% else %}
<span class="text-warning"><i class="fas fa-ban"></i> {{ translate('dashboard', 'offline', <span class="text-warning"><i class="fas fa-ban"></i> {{ translate('dashboard', 'offline',
data['lang']) }}</span> data['lang']) }}</span>
{% end %} {% end %}
</td> </td>
@ -332,7 +333,7 @@
<span data-toggle="collapse" data-target="#details_{{server['server_data']['server_id']}}" aria-expanded="false" aria-controls="details_{{server['server_data']['server_id']}}"><i class="fas fa-chevron-down"></i></span> <span data-toggle="collapse" data-target="#details_{{server['server_data']['server_id']}}" aria-expanded="false" aria-controls="details_{{server['server_data']['server_id']}}"><i class="fas fa-chevron-down"></i></span>
</td> </td>
</tr> </tr>
<tr id="details_{{server['server_data']['server_id']}}" class="collapse" draggable="false"> <tr id="details_{{server['server_data']['server_id']}}" class="collapse" draggable="false">
<td colspan="4"> <td colspan="4">
<div class="collapse" id="details_{{server['server_data']['server_id']}}"> <div class="collapse" id="details_{{server['server_data']['server_id']}}">
<div class="row"> <div class="row">
@ -340,7 +341,7 @@
<h6>{{ translate('dashboard', 'cpuUsage', data['lang']) }}</h6> <h6>{{ translate('dashboard', 'cpuUsage', data['lang']) }}</h6>
<div id="m_server_cpu_{{server['server_data']['server_id']}}"> <div id="m_server_cpu_{{server['server_data']['server_id']}}">
<div class="progress mb-1" data-toggle="tooltip" data-placement="top" <div class="progress mb-1" data-toggle="tooltip" data-placement="top"
title="{{server['stats']['cpu']}}"> title="{{server['stats']['cpu']}}">
<div class="progress-bar <div class="progress-bar
{% if server['stats']['cpu'] <= 33 %} {% if server['stats']['cpu'] <= 33 %}
bg-success bg-success
@ -350,7 +351,7 @@
bg-danger bg-danger
{% end %} {% end %}
" role="progressbar" style="width: {{server['stats']['cpu']}}%" aria-valuenow="0" " role="progressbar" style="width: {{server['stats']['cpu']}}%" aria-valuenow="0"
aria-valuemin="0" aria-valuemax="100"></div> aria-valuemin="0" aria-valuemax="100"></div>
</div> </div>
{{server['stats']['cpu']}}% {{server['stats']['cpu']}}%
</div> </div>
@ -359,7 +360,7 @@
<h6>{{ translate('dashboard', 'memUsage', data['lang']) }}</h6> <h6>{{ translate('dashboard', 'memUsage', data['lang']) }}</h6>
<div draggable="false" id="m_server_mem_{{server['server_data']['server_id']}}"> <div draggable="false" id="m_server_mem_{{server['server_data']['server_id']}}">
<div class="progress mb-1" data-toggle="tooltip" data-placement="top" <div class="progress mb-1" data-toggle="tooltip" data-placement="top"
title="{{server['stats']['mem']}}"> title="{{server['stats']['mem']}}">
<div class="progress-bar <div class="progress-bar
{% if server['stats']['mem_percent'] <= 33 %} {% if server['stats']['mem_percent'] <= 33 %}
bg-success bg-success
@ -369,7 +370,7 @@
bg-danger bg-danger
{% end %} {% end %}
" role="progressbar" style="width: {{server['stats']['mem_percent']}}%" aria-valuenow="0" " role="progressbar" style="width: {{server['stats']['mem_percent']}}%" aria-valuenow="0"
aria-valuemin="0" aria-valuemax="100"></div> aria-valuemin="0" aria-valuemax="100"></div>
</div> </div>
{{server['stats']['mem_percent']}}% - {{server['stats']['mem_percent']}}% -
@ -429,15 +430,19 @@
color: white !important; color: white !important;
; ;
} }
#desc_id {
-ms-overflow-style: none; /* for Internet Explorer, Edge */
scrollbar-width: none; /* for Firefox */
overflow-y: scroll;
}
#desc_id::-webkit-scrollbar { #desc_id {
display: none; /* for Chrome, Safari, and Opera */ -ms-overflow-style: none;
} /* for Internet Explorer, Edge */
scrollbar-width: none;
/* for Firefox */
overflow-y: scroll;
}
#desc_id::-webkit-scrollbar {
display: none;
/* for Chrome, Safari, and Opera */
}
</style> </style>
@ -454,20 +459,20 @@
}; };
} }
$(document).ready(function() { $(document).ready(function () {
$('[data-toggle="popover"]').popover(); $('[data-toggle="popover"]').popover();
if ($(window).width() < 1000) { if ($(window).width() < 1000) {
$('.too_small').popover("show"); $('.too_small').popover("show");
} }
}); });
$(window).ready(function() { $(window).ready(function () {
$('body').click(function() { $('body').click(function () {
$('.too_small').popover("hide"); $('.too_small').popover("hide");
}); });
}); });
$(window).resize(function() { $(window).resize(function () {
// This will execute whenever the window is resized // This will execute whenever the window is resized
if ($(window).width() < 1000) { if ($(window).width() < 1000) {
$('.too_small').popover("show"); $('.too_small').popover("show");
@ -545,8 +550,8 @@
cpu_status = "bg-warning"; cpu_status = "bg-warning";
} }
server_cpu.innerHTML = `<div class="progress mb-1" data-toggle="tooltip" data-placement="top" title="`+ server.cpu +`"><div class="progress-bar `+ cpu_status + `" role="progressbar" style="width: `+ server.cpu + `%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div></div>`+ server.cpu +`%`; server_cpu.innerHTML = `<div class="progress mb-1" data-toggle="tooltip" data-placement="top" title="` + server.cpu + `"><div class="progress-bar ` + cpu_status + `" role="progressbar" style="width: ` + server.cpu + `%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div></div>` + server.cpu + `%`;
m_server_cpu.innerHTML = `<div class="progress mb-1" data-toggle="tooltip" data-placement="top" title="`+ server.cpu +`"><div class="progress-bar `+ cpu_status + `" role="progressbar" style="width: `+ server.cpu + `%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div></div>`+ server.cpu +`%`; m_server_cpu.innerHTML = `<div class="progress mb-1" data-toggle="tooltip" data-placement="top" title="` + server.cpu + `"><div class="progress-bar ` + cpu_status + `" role="progressbar" style="width: ` + server.cpu + `%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div></div>` + server.cpu + `%`;
/* Update Memory */ /* Update Memory */
@ -563,8 +568,8 @@
total_mem = server.mem; total_mem = server.mem;
} }
server_mem.innerHTML = `<div class="progress mb-1" data-toggle="tooltip" data-placement="top" title="`+ server_mem +`"><div class="progress-bar `+ mem_status + `" role="progressbar" style="width: `+ server.mem_percent + `%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div></div>`+ server.mem_percent +`% - ` + total_mem; server_mem.innerHTML = `<div class="progress mb-1" data-toggle="tooltip" data-placement="top" title="` + server_mem + `"><div class="progress-bar ` + mem_status + `" role="progressbar" style="width: ` + server.mem_percent + `%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div></div>` + server.mem_percent + `% - ` + total_mem;
m_server_mem.innerHTML = `<div class="progress mb-1" data-toggle="tooltip" data-placement="top" title="`+ server_mem +`"><div class="progress-bar `+ mem_status + `" role="progressbar" style="width: `+ server.mem_percent + `%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div></div>`+ server.mem_percent +`% - ` + total_mem; m_server_mem.innerHTML = `<div class="progress mb-1" data-toggle="tooltip" data-placement="top" title="` + server_mem + `"><div class="progress-bar ` + mem_status + `" role="progressbar" style="width: ` + server.mem_percent + `%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div></div>` + server.mem_percent + `% - ` + total_mem;
/* Update World Infos */ /* Update World Infos */
server_world.innerHTML = server.world_size server_world.innerHTML = server.world_size
@ -582,7 +587,7 @@
let servers = document.getElementsByClassName("server-player-totals"); let servers = document.getElementsByClassName("server-player-totals");
let all_total_players = 0; let all_total_players = 0;
let all_total_max_players = 0; let all_total_max_players = 0;
for(let i = 0; i < servers.length; i++) { for (let i = 0; i < servers.length; i++) {
try { try {
all_total_players += parseInt(servers[i].getAttribute('data-players')); all_total_players += parseInt(servers[i].getAttribute('data-players'));
all_total_max_players += parseInt(servers[i].getAttribute('data-max')); all_total_max_players += parseInt(servers[i].getAttribute('data-max'));
@ -633,17 +638,17 @@
function update_servers_status(data) { function update_servers_status(data) {
try { try {
update_one_server_status(data[0]); update_one_server_status(data[0]);
} catch (e) { } catch (e) {
console.log ('Failed to update server stats', e) console.log('Failed to update server stats', e)
} }
display_motd(); display_motd();
} }
$(document).ready(function() { $(document).ready(function () {
console.log('ready for JS!') console.log('ready for JS!')
$(".play_button").click(function() { $(".play_button").click(function () {
server_id = $(this).attr("data-id"); server_id = $(this).attr("data-id");
send_command(server_id, 'start_server'); send_command(server_id, 'start_server');
bootbox.alert({ bootbox.alert({
@ -653,7 +658,7 @@
}); });
}); });
$(".stop_button").click(function() { $(".stop_button").click(function () {
console.log("stopping server"); console.log("stopping server");
server_id = $(this).attr("data-id"); server_id = $(this).attr("data-id");
send_command(server_id, 'stop_server'); send_command(server_id, 'stop_server');
@ -664,7 +669,7 @@
}); });
}); });
$(".restart_button").click(function() { $(".restart_button").click(function () {
server_id = $(this).attr("data-id"); server_id = $(this).attr("data-id");
send_command(server_id, 'restart_server'); send_command(server_id, 'restart_server');
bootbox.alert({ bootbox.alert({
@ -673,7 +678,7 @@
message: '<div align="center"><i class="fas fa-spin fa-spinner"></i> &nbsp; {% raw translate("dashboard", "bePatientRestart", data["lang"]) %} </div>' message: '<div align="center"><i class="fas fa-spin fa-spinner"></i> &nbsp; {% raw translate("dashboard", "bePatientRestart", data["lang"]) %} </div>'
}); });
}); });
$(".kill_button").click(function() { $(".kill_button").click(function () {
server_id = $(this).attr("data-id"); server_id = $(this).attr("data-id");
bootbox.confirm({ bootbox.confirm({
message: "This will kill the server process and all it's subprocesses. Killing a process can potentially corrupt files. Only do this in extreme circumstances. Are you sure you would like to continue?", message: "This will kill the server process and all it's subprocesses. Killing a process can potentially corrupt files. Only do this in extreme circumstances. Are you sure you would like to continue?",
@ -687,7 +692,7 @@
className: 'btn-secondary' className: 'btn-secondary'
} }
}, },
callback: function(result) { callback: function (result) {
if (result) { if (result) {
send_kill(server_id); send_kill(server_id);
let dialog = bootbox.dialog({ let dialog = bootbox.dialog({
@ -695,8 +700,8 @@
message: '<p><i class="fa fa-spin fa-spinner"></i> Loading...</p>' message: '<p><i class="fa fa-spin fa-spinner"></i> Loading...</p>'
}); });
dialog.init(function() { dialog.init(function () {
setTimeout(function() { setTimeout(function () {
location.reload(); location.reload();
}, 15000); }, 15000);
}); });
@ -711,7 +716,7 @@
mem_percent = document.getElementById('mem_percent'); mem_percent = document.getElementById('mem_percent');
webSocket.on('update_host_stats', function(hostStats) { webSocket.on('update_host_stats', function (hostStats) {
let cpuDataTitle = `{% raw translate('dashboard', 'cpuCores', data['lang']) %}: ${hostStats.cpu_cores} <br /> {% raw translate("dashboard", "cpuCurFreq", data['lang']) %}: ${hostStats.cpu_cur_freq} <br /> {% raw translate("dashboard", "cpuMaxFreq", data['lang']) %}: ${hostStats.cpu_max_freq}`; let cpuDataTitle = `{% raw translate('dashboard', 'cpuCores', data['lang']) %}: ${hostStats.cpu_cores} <br /> {% raw translate("dashboard", "cpuCurFreq", data['lang']) %}: ${hostStats.cpu_cur_freq} <br /> {% raw translate("dashboard", "cpuMaxFreq", data['lang']) %}: ${hostStats.cpu_max_freq}`;
cpu_data.setAttribute('data-original-title', cpuDataTitle); cpu_data.setAttribute('data-original-title', cpuDataTitle);
cpu_usage.textContent = hostStats.cpu_usage; cpu_usage.textContent = hostStats.cpu_usage;
@ -721,13 +726,13 @@
} }
if (webSocket) { if (webSocket) {
webSocket.on('send_start_reload', function() { webSocket.on('send_start_reload', function () {
location.reload() location.reload()
}); });
} }
if (webSocket) { if (webSocket) {
webSocket.on('update_button_status', function(updateButton) { webSocket.on('update_button_status', function (updateButton) {
let serverId = updateButton.server_id; let serverId = updateButton.server_id;
let message = updateButton.string; let message = updateButton.string;
let updating = updateButton.isUpdating; let updating = updateButton.isUpdating;
@ -746,7 +751,7 @@
webSocket.on('update_server_status', update_servers_status); webSocket.on('update_server_status', update_servers_status);
} }
$(".clone_button").click(function() { $(".clone_button").click(function () {
server_id = $(this).attr("data-id"); server_id = $(this).attr("data-id");
send_command(server_id, 'clone_server'); send_command(server_id, 'clone_server');
bootbox.alert({ bootbox.alert({
@ -763,21 +768,25 @@
<link rel="stylesheet" href="/static/assets/css/jquery-ui.structure.css"> <link rel="stylesheet" href="/static/assets/css/jquery-ui.structure.css">
<style> <style>
@media only screen and (max-width: 760px) { @media only screen and (max-width: 760px) {
#mobile { display: none; } #mobile {
display: none;
}
} }
.ui-sortable-handle { .ui-sortable-handle {
cursor: default; cursor: default;
padding:2px; padding: 2px;
} }
.ui-sortable-handle:hover { .ui-sortable-handle:hover {
cursor: grab !important; cursor: grab !important;
padding:2px; padding: 2px;
} }
</style> </style>
<script> <script>
/* Search Bar */ /* Search Bar */
$(document).ready(function() { $(document).ready(function () {
let servers_table = $('#servers_table').DataTable({ let servers_table = $('#servers_table').DataTable({
"ordering": false, // false to disable sorting (or any other option) "ordering": false, // false to disable sorting (or any other option)
"paging": false "paging": false
@ -787,9 +796,9 @@
}); });
/* Search Bar End */ /* Search Bar End */
$(document).on("mousedown keyup click", function(event) { $(document).on("mousedown keyup click", function (event) {
const value = $('.dataTables_filter input').val(); const value = $('.dataTables_filter input').val();
const is_mobile = $('#mobile').css('display')=='none'; const is_mobile = $('#mobile').css('display') == 'none';
if ($("table#servers_table tbody").sortable("toArray").length > 1 && value === '' && !is_mobile) { if ($("table#servers_table tbody").sortable("toArray").length > 1 && value === '' && !is_mobile) {
$("table#servers_table tbody").sortable("enable"); $("table#servers_table tbody").sortable("enable");
@ -798,61 +807,61 @@
} }
}); });
$(document).ready(function() { $(document).ready(function () {
function sendOrder(id_string) { function sendOrder(id_string) {
const token = getCookie("_xsrf") const token = getCookie("_xsrf")
$.ajax({ $.ajax({
type: "POST", type: "POST",
headers: {'X-XSRFToken': token}, headers: { 'X-XSRFToken': token },
url: '/ajax/send_order?order='+id_string, url: '/ajax/send_order?order=' + id_string,
data: { data: {
order: id_string, order: id_string,
}, },
success: function(data) { success: function (data) {
console.log("got response:"); console.log("got response:");
console.log(data); console.log(data);
}, },
}); });
} }
// Inits the sortable // Inits the sortable
$("table#servers_table tbody") $("table#servers_table tbody")
.sortable({ .sortable({
items: '> tr', items: '> tr',
cursor: "grabbing", cursor: "grabbing",
axis: "y", axis: "y",
revert: true, revert: true,
handle:"i.fas.fa-server,a", handle: "i.fas.fa-server,a",
forcePlaceholderSize: true, forcePlaceholderSize: true,
placeholder:'table-placeholder', placeholder: 'table-placeholder',
deactivate: function(event, ui) { deactivate: function (event, ui) {
// Gets the list of ids in the server list as an array, // Gets the list of ids in the server list as an array,
// and joins the elements with an [,] and sends to the server. // and joins the elements with an [,] and sends to the server.
const ids = $("table#servers_table tbody").sortable("toArray").join(); const ids = $("table#servers_table tbody").sortable("toArray").join();
try { try {
sendOrder(ids); sendOrder(ids);
} catch { } catch {
console.log("Search is actively supressing order change") console.log("Search is actively supressing order change")
} }
}, },
}); });
// Give the table an actual width so the draggable does't collapse when dragged // Give the table an actual width so the draggable does't collapse when dragged
$("table#servers_table") $("table#servers_table")
.children() .children()
.find("td") .find("td")
.each(function () { .each(function () {
$(this).css("width", "").css("width", $(this).outerWidth()); $(this).css("width", "").css("width", $(this).outerWidth());
}); });
// Fixes the appearance of a scrollbar when a user tries to drag an item too low // Fixes the appearance of a scrollbar when a user tries to drag an item too low
// Disabled on mobile since sorting is disabled on mobile // Disabled on mobile since sorting is disabled on mobile
if($('#mobile').css('display') != 'none'){ if ($('#mobile').css('display') != 'none') {
$("div#servers_table_wrapper").css({ overflow: "hidden" }); $("div#servers_table_wrapper").css({ overflow: "hidden" });
} }
}); });
</script> </script>
{% end %} {% end %}