crafty-4/app/frontend/templates/public/status.html

{% extends ../public_base.html %}

{% block meta %}
{% end %}

{% block title %}Crafty Controller - {{ translate('dashboard', 'dashboard', data['lang']) }}{% end %}

{% block content %}
<div class="content-wrapper col-md login-modal" style="background-color: #222437;">
  <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'] %}
        <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' %}
            {% if server['raw_ping_result']['icon'] %}
            <img src="data:image/png;base64,{% raw server['raw_ping_result']['icon'] %}" alt="icon" />
            {% else %}
            <img src="/static/assets/images/pack.png" alt="icon" />
            {% end %}
            <span id="input_motd_{{ server['stats']['server_id']['server_id'] }}" class="input_motd">{{
              server['stats']['desc'] }}</span> <br />
            {% 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 %}

      </tbody>
    </table>
  </div>
  <hr />
</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) {
    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);

    /* TODO Update each element */
    if (server.int_ping_results) {

      /* Update Players */
      if (server.players)
      {
        server_players.innerHTML = server.online + ` / ` + server.max + ` {{ translate('dashboard', 'max', data['lang']) }}<br />`
      }

      /* Update Motd */
      var motd = "";
      if (server.desc) {
        if (server.icon) {
          motd = `<img src="data:image/png;base64,` + server.icon + `" alt="icon" /> `;
        }
        else {
          motd = `<img src="/static/assets/images/pack.png" alt="icon" /> `;
        }

        motd = motd + `<span id="input_motd_` + server.id + `" class="input_motd">` + server.desc + `</span> <br />`;
        server_motd.innerHTML = motd;
      }

      /* Version */
      if (server.version)
      {
        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>`
    }

    /* 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>`;
    }
    else {
      online_status = `<span class="text-danger"><i class="fas fa-ban"></i> {{ translate('dashboard', 'offline', data['lang'])}}</span>`;
    }
    server_online_status.innerHTML = online_status;
  }

  function update_servers_status(data) {
    console.log(data);
    update_one_server_status(data[0]);
    display_motd();
  }

  $(document).ready(function () {
    console.log("ready!");

    if (webSocket)
    {
      webSocket.on('update_server_status', update_servers_status);
    }
  }());
</script>

{% end %}