{% extends 'commands.html' %}
{% import "bootstrap/wtf.html" as wtf %}

{% set sidebar_state = 'disabled' %}
{% set btn_back = true %}

{% block nav_client %} active{% endblock %}
{% block nav_client_cache %} active{% endblock %}
{% block content %}

{% set ip_list = form.ips.data.split(' ') %}
{% set ip_count = ip_list | length %}
<h1 class="m-5">
  {{ _('Manage Cache') }}
</h1>

<p>{{ _('Check free cache space in the client\'s bubbles:') }}</p>

{{ macros.cmd_selected_clients(selected_clients) }}

<p>{{ _('Select the images to be deleted:') }}</p>

<form class="form-inline" method="POST" id="cacheForm">
    <table class="table table-hover">
        <thead class="thead-light">
            <tr>
                <th>{{ _('Image') }}</th>
                <th>{{ _('Clients') }}</th>
            </tr>
        </thead>

        <tbody data-target="cache-fieldset" id="cacheTable" class="text-left">
                {{ form.hidden_tag() }}
                {% for image in form.images %}
                    <tr data-toggle="fieldset-entry">
                        <td class="radio-container">
                            {{ image.selected(class_="form-control") }}
                            {{ image.image_name() }}
                            {{ image.clients() }}
                            <b>{{ image.image_name.data  }} ({{ (images_data[image.selected.label.text]['size'] | int / 2**20)|round(3) }} MiB)</b>
                        </td>
                        <td>{{ ', '.join(images_data[image.selected.label.text]['clients']) }}</td>
                    </tr>
                {% endfor %}
        </tbody>
    </table>
    <button class="btn btn-danger" form="cacheForm">
        {{ _('Delete') }}
    </button>
</form>

<br>

<div class="card text-center">
    <div class="card-header">
      {{ _('Detailed cache usage') }}
    </div>
    <div class="card-body">
        <label for="cacheSelect">Choose a client:</label>
        <select id="cacheSelect" onchange="onClientSelected()">
        {% for client_ip in ip_list %}
            <option value="{{ client_ip }}">{{ client_ip }}</option>
        {% endfor %}
        </select>

        <ul class="list-group list-group-horizontal">
            <li class="list-group-item w-50">
                <canvas id="cacheChart" class="mb-2"></canvas>
            </li>
            <li class="list-group-item w-50">
              <p>{{ _('Images in cache:') }}</p>
              <div id="cacheList"></div>
            </li>
        </ul>
        <ul class="list-group list-group-horizontal">
            <li class="list-group-item w-50">
                {{ _('Disk size') }}
            </li>
            <li class="list-group-item w-50">
                {{ _('used') }} (%)
            </li>
            <li class="list-group-item w-50">
                {{ _('available') }} (%)
            </li>
        </ul>
        <ul class="list-group list-group-horizontal">
            <li id="totalCacheItem" class="list-group-item w-50"></li>
            <li id="usedCacheItem" class="list-group-item w-50"></li>
            <li id="freeCacheItem" class="list-group-item w-50"></li>
        </ul>
    </div>
  </div>

<!-- jQuery -->
<script src="{{ url_for('static', filename='AdminLTE/plugins/jquery/jquery.min.js') }}"></script>
<!-- ChartJS -->
<script src="{{ url_for('static', filename='AdminLTE/plugins/chart.js/Chart.min.js') }}"></script>
<script>
    var cacheChartConfig = {
      type: 'doughnut',
      data: {
        labels: ['Used', 'Available'],
        datasets: [
          {
            label: 'Disk usage',
            data: [
              0,
              1,
            ],
            backgroundColor: [
              'rgb(255, 99, 132)',
              'rgb(54, 162, 235)',
            ],
          },
        ],
      },
      options: {
        responsive: true,
        plugins: {
          legend: {
            position: 'top',
          },
          title: {
            display: true,
            text: 'Chart.js Doughnut Chart'
          },
        },
      },
    };
    var cacheChart = new Chart(
      document.getElementById('cacheChart'),
      cacheChartConfig,
    );

    var storageData = {{ storage_data|tojson|safe }};
    var imageData = {{ images_data|tojson|safe }};
    var clientImages = {{ client_images|tojson|safe }};

    function onClientSelected() {
      var selectElement = document.getElementById("cacheSelect");
      var selectedOption = selectElement.options[selectElement.selectedIndex].text;
      updateChart(selectedOption);
    }

    function toGiB(v, decimals) {
      return (v / Math.pow(2, 30)).toFixed(decimals);
    }

    function updateChart(ip) {
        var totalCache = toGiB(storageData[ip].total, 3);
        var usedCache = toGiB(storageData[ip].used, 3);
        var freeCache = toGiB(storageData[ip].total - storageData[ip].used, 3)

        cacheChart.data.datasets[0].data = [
          usedCache,
          freeCache,
        ]
        cacheChart.update();

        var totalCacheItem = document.getElementById("totalCacheItem");
        totalCacheItem.innerHTML = totalCache + " GiB";

        var usedCacheItem = document.getElementById("usedCacheItem");
        usedCacheItem.innerHTML = usedCache + " GiB (" + Math.round((usedCache / totalCache) * 100) + "%)";

        var freeCacheItem = document.getElementById("freeCacheItem");
        freeCacheItem.innerHTML = freeCache + " GiB (" + Math.round((freeCache / totalCache) * 100) + "%)";

        var cacheList = document.getElementById("cacheList");
        cacheList.innerHTML = "";
        clientImages[ip].forEach(function(img) {
          cacheList.innerHTML += imageData[img]["name"] + " (" + (imageData[img]["size"] / Math.pow(2, 20)).toFixed(3) + " MiB)<br>";
        });
    }

    updateChart("{{ ip_list[0] }}");

    // Update pill data
    $('.badge-pill').each(function(index) {
      for (var ip in storageData) {
        if ($(this).html().includes(ip)) {
          var totalCache = storageData[ip].total;
          var usedCache = storageData[ip].used;
          var freeCache = toGiB(totalCache - usedCache, 1)
          $(this).html($(this).html() + '<br>free: ' + freeCache + ' GiB');
          break;
        }
      }
    });
</script>

{% endblock %}