{% extends "global/Base.html" %}
{% load app_tags %}


{% block title %}
    Alien Game results

    <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
{% endblock %}


{% block styles %}

    <style type="text/css">
        button {
            margin-bottom: 12px;
        }

        th {
            color: rgba(0, 8, 231, 0.78);
            text-align: center;
        }

        .fixed-headers {
            table-layout: fixed;
        }

        tr:hover {
            background-color: rgba(212, 231, 255, 0.4);
        }

        td {
            text-align: center;
        }
    </style>

{% endblock %}


{% block content %}

    <div class="dropdown" style="float: left;">
        <button id="table-chooser" class="btn btn-danger dropdown-toggle" type="button" data-toggle="dropdown">
            Select table
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item" href="#">gamestep</a>
            <a class="dropdown-item" href="#">alienGameLandscape</a>
            <a class="dropdown-item" href="#">fitnessData</a>
{#            <a class="dropdown-item" href="#">player</a>#}
{#            <a class="dropdown-item" href="#">subsession</a>#}
        </div>
    </div>


    <button class="btn btn-primary" type="button" onclick="exportAllTableToCSV()" style="float: right;">
        <i class="fas fa-download"></i> Download CSV files
    </button>
    <button class="btn btn-primary" id="refresh-button" type="button" onClick="window.location.reload()" style="float: right;  margin-right: 3px">
        <i class="fas fa-sync-alt"></i> Refresh
    </button>

    <div class="database-table" id="gamestep-table">
        <table class="fixed-headers" style="width: 100%">
            <tr id="headerRow" class="header">
                <th>Game step ID</th>
                <th>Player ID</th>
                <th>Subsession ID</th>
                <th>Fitness data ID</th>
                <th>Game step count</th>
                <th>Timestamp (sec)</th>
            </tr>
            {% show_game_steps as game_steps %}
            {% for record in game_steps %}
                <tr>
                    <td>{{ record.id }}</td>
                    <td>{{ record.player_id }}</td>
                    <td>{{ record.subsession_id }}</td>
                    <td>{{ record.fitnessData_id }}</td>
                    <td>{{ record.gameStepCount }}</td>
                    <td>{{ record.timestamp }}</td>
                </tr>
            {% endfor %}
        </table>
    </div>

    <div class="database-table" id="alienGameLandscape-table">
        <table class="fixed-headers" style="width: 100%">
            <tr id="headerRow" class="header">
                <th>Landscape ID</th>
                <th>Landscape name (description)</th>
            </tr>
            {% show_alien_game_landscapes as landsapes %}
            {% for record in landsapes %}
                <tr>
                    <td>{{ record.id }}</td>
                    <td>{{ record.landscape }}</td>
                </tr>
            {% endfor %}
        </table>
    </div>

    <div class="database-table" id="fitnessData-table">
        <table class="fixed-headers" style="width: 100%">
            <tr id="headerRow" class="header">
                <th>Fitness data ID</th>
                <th>Bitstring ID</th>
                <th>Bitstring</th>
                <th>Fitness value</th>
                <th>Landscape ID</th>
            </tr>
            {% show_fitness_data as fitnessData %}
            {% for record in fitnessData %}
                <tr>
                    <td>{{ record.id }}</td>
                    <td>{{ record.bitstringID }}</td>
                    <td>{{ record.bitstring }}</td>
                    <td>{{ record.fitness }}</td>
                    <td>{{ record.alien_game_landscape_id }}</td>
                </tr>
            {% endfor %}
        </table>
    </div>

{% endblock %}


{% block scripts %}

    <script type="text/javascript">

        function hideAllTables() {
            var database_tables = document.getElementsByClassName("database-table");
            for(var i=0; i<database_tables.length; ++i){
                database_tables[i].style.display = "none";
            }
        }

        function showTable(id) {
            var tableToShow = document.getElementById(id);
            tableToShow.style.display = "";
        }

        function downloadCSV(csv, filename) {
            var csvFile;
            var downloadLink;

            csvFile = new Blob([csv], {type: "text/csv"});

            // Download link
            downloadLink = document.createElement("a");

            // File name
            downloadLink.download = filename;

            // Create a link to the file
            downloadLink.href = window.URL.createObjectURL(csvFile);

            // Hide download link
            downloadLink.style.display = "none";

            // Add the link to DOM
            document.body.appendChild(downloadLink);

            // Click download link
            downloadLink.click();
        }

        function exportTableToCSV(filename, el) {
            var csv = [];
            var rows = el.querySelectorAll("table tr");

            for (var i = 0; i < rows.length; i++) {
                var row = [], cols = rows[i].querySelectorAll("td, th");

                for (var j = 0; j < cols.length; j++)
                    row.push(cols[j].innerText);

                csv.push(row.join(";"));
            }

            // Download CSV file
            downloadCSV(csv.join("\n"), filename);
        }

        function exportAllTableToCSV() {
            document.getElementById("refresh-button").click();
            var el = document.getElementsByClassName("database-table");
            for(var i=0; i<el.length; ++i){
                var tableName = el[i].getAttribute("id").split("-")[0];
                exportTableToCSV(tableName + ".csv", el[i]);
            }
        }

        $(document).ready(function () {
            hideAllTables();
            showTable(sessionStorage.getItem("table") + "-table");
            $("#table-chooser").text(sessionStorage.getItem("table"));
            $("#table-chooser").val(sessionStorage.getItem("table"));
        });

        $(".dropdown-menu a").click(function () {
                $("#table-chooser").text($(this).text());
                $("#table-chooser").val($(this).text());
                sessionStorage.setItem("table", $(this).text());
                {#location.reload();#}
                hideAllTables();
                showTable($(this).text() + "-table");
            });

    </script>

{% endblock %}