{% extends ../base.html %}

{% block meta %}
  <meta http-equiv="refresh" content="60">
{% end %}

{% block title %}Crafty Controller - {{ translate('dashboard', '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">{{ translate('dashboard', '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"> {{ translate('dashboard', '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 id="cpu_data" class="mb-0 text-success" data-toggle="tooltip" data-placement="top" data-html="true" title="{% raw translate('dashboard', 'cpuCores') %}: {{ data.get('hosts_data').get('cpu_cores') }} <br /> {% raw translate('dashboard', 'cpuCurFreq') %}: {{ data.get('hosts_data').get('cpu_cur_freq') }} <br /> {% raw translate('dashboard', 'cpuMaxFreq') %}: {{ data.get('hosts_data').get('cpu_max_freq') }}" >
                  {{ translate('dashboard', 'cpuUsage') }}: <span id="cpu_usage">{{ data.get('hosts_data').get('cpu_usage') }}</span>
                  </p>
                  <p id="mem_usage" class="mb-0 text-danger" data-toggle="tooltip" data-placement="top" title="{{ translate('dashboard', 'memUsage') }}: {{ data.get('hosts_data').get('mem_usage') }}" >
                    {{ translate('dashboard', 'memUsage') }}: <span id="mem_percent">{{ data.get('hosts_data').get('mem_percent') }}%</span>
                  </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">{{ translate('dashboard', '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'] }} {{ translate('dashboard', 'online').lower() }}</p>
                  <p class="mb-0 text-warning"> {{ data['server_stats']['stopped'] }} {{ translate('dashboard', 'offline').lower() }}</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">{{ translate('dashboard', '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 {{ translate('dashboard', 'max') }}</p>
                  <p class="mb-0 text-warning">10 {{ translate('dashboard', '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">{{ translate('dashboard', '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">{{ translate('dashboard', 'lastBackup') }} 11-31-2020</p>
                  <p class="mb-0 text-success">{{ translate('dashboard', 'nextBackup') }} 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;{{ translate('dashboard', 'allServers') }}</h4>
          <div class="d-md-none">
            <small>{{ translate('dashboard', 'cannotSeeOnMobile') }}<br /> {{ translate('dashboard', 'cannotSeeOnMobile2') }}</small>
          </div>
          <div><a class="nav-link" href="/server/step1"><i class="fas fa-plus-circle"></i> &nbsp; {{ translate('dashboard', 'newServer') }}</a></div>
        </div>
        <div class="card-body">

          <div class="table-responsive">
            <table class="table">
              <thead>
                <tr class="rounded">
                  <th>{{ translate('dashboard', 'server') }}</th>
                  <th>{{ translate('dashboard', 'actions') }}</th>
                  <th>{{ translate('dashboard', 'cpuUsage') }}</th>
                  <th>{{ translate('dashboard', 'memUsage') }}</th>
                  <th>{{ translate('dashboard', 'world') }}</th>
                  <th>{{ translate('dashboard', 'players') }}</th>
                  <th>{{ translate('dashboard', '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 class="actions_serverlist">

                    {% if server['stats']['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;
                      <a data-id="{{server['server_data']['server_id']}}" class="clone_button"> <i class="fas fa-clone"></i></a> &nbsp;
                    {% end %}

                  </td>

                  <td>
                    <div class="progress mb-1" data-toggle="tooltip" data-placement="top" title="{{server['stats']['cpu']}}">
                      <div class="progress-bar
                      {% if server['stats']['cpu'] <= 33 %}
                      bg-success
                      {% elif 34 <= server['stats']['cpu'] <= 66 %}
                      bg-warning
                      {% else %}
                      bg-danger
                      {% end %}
                      " role="progressbar" style="width: {{server['stats']['cpu']}}%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                    {{server['stats']['cpu']}}%
                  </td>

                  <td>
                    <div class="progress mb-1" data-toggle="tooltip" data-placement="top" title="{{server['stats']['mem']}}">
                      <div class="progress-bar
                      {% if server['stats']['mem_percent'] <= 33 %}
                      bg-success
                      {% elif 34 <= server['stats']['mem_percent'] <= 66 %}
                      bg-warning
                      {% else %}
                      bg-danger
                      {% end %}
                      " role="progressbar" style="width: {{server['stats']['mem_percent']}}%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                    {{server['stats']['mem_percent']}}% -

                    {% if server['stats']['mem'] == 0 %}
                      0 MB
                    {% else %}
                      {{server['stats']['mem']}}
                    {% end %}
                  </td>
                  <td>
                    {{ server['stats']['world_name'] }} : {{ server['stats']['world_size'] }}
                  </td>
                  <td>
                    {% if server['stats']['int_ping_results'] %}
                      {{ server['stats']['online'] }} / {{ server['stats']['max'] }} {{ translate('dashboard', 'max') }}<br />

                      {% if server['stats']['desc'] != 'False' %}
                        {{ server['stats']['desc'] }} <br />
                      {% end %}

                      {% if server['stats']['version'] != 'False' %}
                        {{ server['stats']['version'] }}
                      {% end %}
                    {% end %}

                  </td>
                  <td>
                    {% if server['stats']['running'] %}
                    <i class="fas fa-thumbs-up"></i> <span class="text-success">{{ translate('dashboard', 'online') }}</span>
                    {% else %}
                    <i class="fas fa-thumbs-down"></i> <span class="text-danger">{{ translate('dashboard', '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: '{% raw translate("dashboard", "sendingCommand") %}',
      message: '<div align="center"><i class="fas fa-spin fa-spinner"></i> &nbsp; {% raw translate("dashboard", "bePatientStart") %} </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: '{% raw translate("dashboard", "sendingCommand") %}',
      message: '<div align="center"><i class="fas fa-spin fa-spinner"></i> &nbsp; {% raw translate("dashboard", "bePatientStop") %} </div>'
    });
  });

  $( ".restart_button" ).click(function() {
    server_id = $(this).attr("data-id");
    send_command(server_id, 'restart_server');
    bootbox.alert({
      backdrop: true,
      title: '{% raw translate("dashboard", "sendingCommand") %}',
      message: '<div align="center"><i class="fas fa-spin fa-spinner"></i> &nbsp; {% raw translate("dashboard", "bePatientRestart") %} </div>'
    });
  });
  if (webSocket) {
    cpu_data = document.getElementById('cpu_data');
    cpu_usage = document.getElementById('cpu_usage');
    mem_usage = document.getElementById('mem_usage');
    mem_percent = document.getElementById('mem_percent');

    webSocket.on('update_host_stats', function (hostStats) {
      var cpuDataTitle = `{% raw translate('dashboard', 'cpuCores') %}: ${hostStats.cpu_cores} <br /> {% raw translate("dashboard", "cpuCurFreq") %}: ${hostStats.cpu_cur_freq} <br /> {% raw translate("dashboard", "cpuMaxFreq") %}: ${hostStats.cpu_max_freq}`;
      cpu_data.setAttribute('data-original-title', cpuDataTitle);
      cpu_usage.textContent = hostStats.cpu_usage;
      mem_usage.setAttribute('data-original-title', `{% raw translate("dashboard", "memUsage") %}: ${hostStats.mem_usage}`);
      mem_percent.textContent = hostStats.mem_percent + '%';
    });
  }

  $( ".clone_button" ).click(function() {
    server_id = $(this).attr("data-id");
    send_command(server_id, 'clone_server');
    bootbox.alert({
      backdrop: true,
      title: '{% raw translate("dashboard", "sendingCommand") %}',
      message: '<div align="center"><i class="fas fa-spin fa-spinner"></i> &nbsp; {% raw translate("dashboard", "bePatientClone") %} </div>'
    });
  });

});
</script>

{% end %}