crafty-4/app/frontend/templates/public/status.html
2024-01-31 23:04:22 +01:00

274 lines
12 KiB
HTML

{% extends ../public_base.html %}
{% block meta %}
{% end %}
{% block title %}Crafty Controller - {{ translate('dashboard', 'dashboard', data['lang']) }}{% end %}
{% block content %}
<!-- View for Large screen -->
<style>
.auth.auth-bg-1 {
background: url("../../static/assets/images/auth/{% raw data['background'] %}"),
url("/static/assets/images/auth/login_1.jpg");
background-size: cover;
}
</style>
<div class="row justify-content-center">
<div class="content-wrapper col-md login-modal d-none d-sm-block" style="background-color: var(--dropdown-bg);">
<img src="/static/assets/images/logo_long.png" style='width: 25%; margin-left: 38%;'>
<hr />
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr class="rounded">
<th>{{ translate('dashboard', 'server', data['lang']) }}</th>
<th>{{ translate('dashboard', 'players', data['lang']) }}</th>
<th>{{ translate('dashboard', 'motd', data['lang']) }}</th>
<th>{{ translate('dashboard', 'version', data['lang']) }}</th>
<th>{{ translate('dashboard', 'status', data['lang']) }}</th>
</tr>
</thead>
<tbody>
{% for server in data['servers'] %}
{% if server['server_data']['show_status'] %}
<tr>
<td id="server_name_{{ server['stats']['server_id']['server_id'] }}">
<i class="fas fa-server"></i>
{{ server['server_data']['server_name'] }}
</td>
{% if server['stats']['int_ping_results'] != 'False' %}
<td id="server_players_{{ server['stats']['server_id']['server_id'] }}">
{{ server['stats']['online'] }} / {{ server['stats']['max'] }} {{ translate('dashboard', 'max',
data['lang']) }}<br />
</td>
<td id="server_motd_{{ server['stats']['server_id']['server_id'] }}">
{% if server['stats']['desc'] != 'False' %}
<div class="row">
<div class="col-auto">
<img src="/static/assets/images/pack.png" alt="icon" style="-webkit-filter:grayscale(100%); filter:grayscale(100%)" />
</div>
<div class="col-auto">
<span id="input_motd_{{ server['stats']['server_id']['server_id'] }}" class="input_motd">{{ translate('serverStats', 'loadingMotd', data['lang']) }}</span>
</div>
</div>
{% end %}
</td>
<td id="server_version_{{ server['stats']['server_id']['server_id'] }}">
{% if server['stats']['version'] != 'False' %}
{{ server['stats']['version'] }}
{% end %}
</td>
{% else %}
<td id="server_players_{{ server['stats']['server_id']['server_id'] }}">
<span class="text-warning"><i class="fas fa-exclamation-triangle"></i></span>
</td>
<td id="server_motd_{{ server['stats']['server_id']['server_id'] }}">
<span class="text-warning">Crafty can't get infos from this Server </span>
</td>
<td id="server_version_{{ server['stats']['server_id']['server_id'] }}">
<span class="text-warning"><i class="fas fa-question"></i></i></span>
</td>
{% end %}
<td id="server_online_status_{{ server['stats']['server_id']['server_id'] }}">
{% if server['stats']['running'] %}
<span class="text-success"><i class="fas fa-signal"></i> {{ translate('dashboard', 'online', data['lang'])
}}</span>
{% else %}
<span class="text-danger"><i class="fas fa-ban"></i> {{ translate('dashboard', 'offline', data['lang'])
}}</span>
{% end %}
</td>
</tr>
{% end %}
{% end %}
</tbody>
</table>
</div>
<hr />
</div>
</div>
<!-- View for Small screen -->
<div class="row justify-content-center align-items-sm-center">
<div class="content-wrapper login-modal d-sm-none d-block" style="background-color: var(--dropdown-bg);">
<img src="/static/assets/images/logo_long.png" style='width: 100%;'>
<hr />
<div class="accordion" id="accordionServers">
{% for server in data['servers'] %}
{% if server['server_data']['show_status'] %}
<div class="card mb-0">
<div class="card-header" id="heading-{{server['server_data']['server_id']}}">
<h2 class="mb-0 container overflow-hidden">
<div class="row">
<div class="col-8 mx-0 px-0">
<a id="m_server_name_{{ server['stats']['server_id']['server_id'] }}" class="btn btn-link d-flex justify-content-center" type="button" data-toggle="collapse" data-target="#collapse-{{server['server_data']['server_id']}}" aria-expanded="false" aria-controls="collapse-{{server['server_data']['server_id']}}">
<i class="fas fa-server"></i>
{{ server['server_data']['server_name'] }}
</a>
</div>
<div class="col-4 mx-0 px-0">
<a id="m_server_online_status_{{ server['stats']['server_id']['server_id'] }}" class="btn btn-link d-flex justify-content-center" type="button">
{% if server['stats']['running'] %}
<div id="m_server_players_{{ server['stats']['server_id']['server_id'] }}">
<span class="text-success"><i class="fas fa-signal"></i> {{ server['stats']['online'] }} / {{
server['stats']['max'] }}</span>
</div>
{% else %}
<span class="text-danger"><i class="fas fa-ban"></i> {{ translate('dashboard', 'offline',
data['lang']) }}</span>
{% end %}
</a>
</div>
</div>
</h2>
</div>
<div id="collapse-{{server['server_data']['server_id']}}" class="collapse" aria-labelledby="heading-{{server['server_data']['server_id']}}" data-parent="#accordionServers">
<div class="card-body">
{% if server['stats']['int_ping_results'] != 'False' %}
<div id="m_server_motd_{{ server['stats']['server_id']['server_id'] }}" class="media">
{% if server['stats']['desc'] != 'False' %}
<img src="/static/assets/images/pack.png" class="w-25 mr-3" alt="icon" style="-webkit-filter:grayscale(100%); filter:grayscale(100%);" />
{% end %}
<div class="media-body">
{% if server['stats']['desc'] != 'False' %}
<div id="m_server_motd_{{ server['stats']['server_id']['server_id'] }}">
<span id="m_input_motd_{{ server['stats']['server_id']['server_id'] }}" class="input_motd">{{ translate('serverStats', 'loadingMotd', data['lang']) }}</span> <br />
</div>
{% end %}
</div>
</div>
<br />
<div id="m_server_version_{{ server['stats']['server_id']['server_id'] }}">
{% if server['stats']['version'] != 'False' %}
{{ server['stats']['version'] }}
{% end %}
</div>
{% else %}
<div class="row">
<div class="col-12">
<div id="m_server_motd_{{ server['stats']['server_id']['server_id'] }}">
<span class="text-warning"><i class="fas fa-exclamation-triangle"></i> Crafty can't get infos from
this Server </span>
</div>
<div id="m_server_version_{{ server['stats']['server_id']['server_id'] }}"></div>
</div>
</div>
{% end %}
</div>
</div>
</div>
{% end %}
{% end %}
</div>
</div>
</div>
{% end %}
{% block js %}
<script src="/static/assets/js/motd.js"></script>
<script>
function display_motd() {
var all_motds = Array.from(document.getElementsByClassName('input_motd'));
for (element of all_motds) {
initParser(element.id, element.id);
};
}
function update_one_server_status(server) {
/* Normal Screen view */
server_players = document.getElementById('server_players_' + server.id);
server_motd = document.getElementById('server_motd_' + server.id);
server_version = document.getElementById('server_version_' + server.id);
server_online_status = document.getElementById('server_online_status_' + server.id);
/* Small Screen view */
m_server_players = document.getElementById('m_server_players_' + server.id);
m_server_motd = document.getElementById('m_server_motd_' + server.id);
m_server_version = document.getElementById('m_server_version_' + server.id);
m_server_online_status = document.getElementById('m_server_online_status_' + server.id);
/* TODO Update each element */
if (server.running) {
/* Update Players */
if (server.max != 0) {
server_players.innerHTML = server.online + ` / ` + server.max + ` {{ translate('dashboard', 'max', data['lang']) }}<br />`
}
/* Update Motd */
var motd = "";
if (server.desc) {
if (server.icon) {
img_motd = `<img src="data:image/png;base64,` + server.icon + `" alt="icon" /> `;
m_motd = `<img src="data:image/png;base64,` + server.icon + `" alt="icon" /> `;
}
else {
img_motd = `<img src="/static/assets/images/pack.png" alt="icon" /> `;
m_motd = `<img class="w-25 mr-3" src="/static/assets/images/pack.png" alt="icon" /> `;
}
desc_motd = `<span id="input_motd_` + server.id + `" class="input_motd">` + server.desc + `</span> <br />`;
m_motd = m_motd + `<div class="media-body"><span id="m_input_motd_` + server.id + `" class="input_motd">` + server.desc + `</span></div>`;
motd = `<div class="row"><div class="col-auto">` + img_motd + `</div><div class="col-auto">` + desc_motd + `</div></div>`;
server_motd.innerHTML = motd;
m_server_motd.innerHTML = m_motd;
}
/* Version */
if (server.version) {
server_version.innerHTML = server.version;
m_server_version.innerHTML = server.version;
}
}
else {
server_players.innerHTML = `<span class="text-warning"><i class="fas fa-exclamation-triangle"></i></span>`;
server_motd.innerHTML = `<span class="text-warning">Crafty can't get infos from this Server </span>`;
server_version.innerHTML = `<span class="text-warning"><i class="fas fa-question"></i></i></span>`;
m_server_motd.innerHTML = `<span class="text-warning"><i class="fas fa-exclamation-triangle"></i> Crafty can't get infos from this Server </span>`;
}
/* Update Online Status */
var online_status = "";
if (server.running) {
online_status = `<span class="text-success"><i class="fas fa-signal"></i> {{ translate('dashboard', 'online', data['lang'])}}</span>`;
m_online_status = `<span class="text-success"><i class="fas fa-signal"></i>` + server.online + ` / ` + server.max + `</span>`;
}
else {
online_status = `<span class="text-danger"><i class="fas fa-ban"></i> {{ translate('dashboard', 'offline', data['lang'])}}</span>`;
m_online_status = `<span class="text-danger"><i class="fas fa-ban"></i> {{ translate('dashboard', 'offline', data['lang'])}}</span>`;
}
server_online_status.innerHTML = online_status;
m_server_online_status.innerHTML = m_online_status;
}
function update_servers_status(data) {
console.log("update servers");
data.forEach(server => {
console.log(server);
update_one_server_status(server);
});
display_motd();
}
function refreshStatus() {
let xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
var myData = JSON.parse(this.responseText);
update_servers_status(myData.data);
}
};
xmlHttp.open('GET', '/api/v2/servers/status', true);
xmlHttp.send();
setTimeout(refreshStatus, 30000);
}
$(document).ready(function () {
console.log("ready!");
refreshStatus();
}());
</script>
{% end %}