{#
/*
 * Spring Signage Ltd - http://www.springsignage.com
 * Copyright (C) 2017 Spring Signage Ltd
 * (stats-library-page.twig)
 */

#}
{% extends "authed.twig" %}
{% import "inline.twig" as inline %}

{% block pageContent %}
    <div class="row">
        <div class="col-md-12">
            <div class="widget">
                <div class="widget-title">{% trans "Library Usage" %}</div>
                <div class="widget-body">
                    <div class="XiboGrid" id="{{ random() }}">
                        <div class="XiboFilter well">
                            <div class="FilterDiv" id="Filter">
                                <form class="form-inline">
                                    {% set title %}{% trans "User" %}{% endset %}
                                    {% set userFilterOptions = [{userId: null, user: ""}]|merge(users) %}
                                    {{ inline.dropdown("userId", "single", title, "", userFilterOptions, "userId", "userName", "", "selectPicker", "", "u", "", [{name: "data-live-search", value:"true"}, {name: "data-selected-text-format", value: "count > 3"}]) }}

                                    {% set title %}{% trans "User Group" %}{% endset %}
                                    {% set groupFilterOptions = [{groupId: null, group: ""}]|merge(groups) %}
                                    {{ inline.dropdown("groupId", "single", title, "", groupFilterOptions, "groupId", "group", "", "selectPicker", "", "g", "", [{name: "data-live-search", value:"true"}, {name: "data-selected-text-format", value: "count > 3"}]) }}
                                </form>
                            </div>
                        </div>
                        <div class="XiboData">
                            <table id="libraryUsage" class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>{% trans "ID" %}</th>
                                        <th>{% trans "User" %}</th>
                                        <th>{% trans "Usage" %}</th>
                                        <th>{% trans "Count Files" %}</th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="widget">
                <div class="widget-title">
                    <i class="fa fa-tasks"></i>
                    {% if libraryLimitSet != "" %}
                        {% trans %}Library Usage. Limit {{ libraryLimit }}{% endtrans %}
                    {% else %}
                        {% trans "Library Usage" %}
                    {% endif %}
                    <div class="clearfix"></div>
                </div>
                <div class="widget-body medium no-padding">
                    <canvas id="libraryChart" style="clear:both;" width="350" height="220"></canvas>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="widget">
                <div class="widget-title">
                    <i class="fa fa-user"></i>
                    {% trans "User Percentage Usage" %}
                    <div class="clearfix"></div>
                </div>
                <div class="widget-body medium no-padding">
                    <canvas id="userChart" style="clear:both;" width="350" height="220"></canvas>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block javaScript %}
    <script type="text/javascript">
        var userChart = null;

        var table = $("#libraryUsage").DataTable({
            "language": dataTablesLanguage,
            serverSide: true,
            stateSave: true,
            filter: false,
            searchDelay: 3000,
            ajax: {
                url: "{{ urlFor("stats.library.grid") }}",
                data: function (d) {
                    $.extend(d, $("#libraryUsage").closest(".XiboGrid").find(".FilterDiv form").serializeObject());
                }
            },
            "columns": [
                { data: "userId" },
                { data: "userName" },
                { data: "bytesUsedFormatted" },
                { data: "numFiles" }
            ]
        });

        table.on('draw', dataTableDraw);
        table.on('processing.dt', function(e, settings, processing) {
            dataTableProcessing(e, settings, processing);

            if (!processing) {
                // Render a pie chart
                if (userChart !== undefined && userChart !== null) {
                    console.log('Destroying Chart');
                    userChart.destroy();
                }

                // Organise our rows into datasets for the chart
                var totalSize = 0;
                var userData = new Array();
                var userLabels = new Array();

                $.each(table.data(), function(index, el) {
                    totalSize += el.bytesUsed;
                });

                $.each(table.data(), function(index, el) {
                    userData.push(((el.bytesUsed/totalSize)*100).toFixed(2));
                    userLabels.push(el.userName);
                });

                var colours = new Array();
                for(var i = 0; i < userData.length; i++) {
                    colours.push($c.rand());
                }

                userChart = new Chart($("#userChart"), {
                    type: 'pie',
                    data: {
                        datasets: [{
                            data: userData,
                            backgroundColor: colours
                        }],
                        labels: userLabels
                    },
                    options: {
                        maintainAspectRatio: false
                    }
                });
            }
        });

        // Create a lovely library pie chart
        var libraryData = {{ libraryWidgetData|raw }};
        var colours = new Array();
        for(var i = 0; i < libraryData.length; i++) {
            colours.push($c.rand());
        }
        var libraryChart = new Chart($("#libraryChart"), {
            type: 'pie',
            data: {
                datasets: [{
                    data: libraryData,
                    backgroundColor: colours
                }],
                labels: {{ libraryWidgetLabels|raw }}
            },
            options: {
                maintainAspectRatio: false
            }
        });
    </script>
{% endblock %}