{#
/*
 * Spring Signage Ltd - http://www.springsignage.com
 * Copyright (C) 2015 Spring Signage Ltd
 * (${FILE_NAME})
 */

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

{% block actionMenu %}
    <ul class="nav nav-pills pull-right">
        <li><a title="{% trans "Open the Filter Form" %}" href="#" onclick="ToggleFilterView('Filter')">{% trans "Filter" %}</a></li>
    </ul>
{% endblock %}


{% block pageContent %}
    <div class="widget">
        <div class="widget-title">{% trans "Displays" %}</div>
        <div class="widget-body">
            <div class="XiboGrid" id="{{ random() }}">
                <div class="XiboFilter">
                    <div class="FilterDiv" id="Filter">
                        <form class="form-inline">

                            {{ inline.input("display", "Name", defaults.display) }}

                            {{ inline.input("macAddress", "Mac Address", defaults.macAddress) }}

                            {{ inline.dropdown("displayGroupId", "single", "Display Group", defaults.displayGroup, [{displayGroupId:null, displayGroup:""}]|merge(displayGroups), "displayGroupId", "displayGroup") }}

                            {{ inline.number("autoRefresh", "Auto Refresh", defaults.filterAutoRefresh) }}

                            {{ inline.checkbox("XiboFilterPinned", "Keep Open", defaults.filterPinned) }}
                        </form>
                    </div>
                </div>
                <div class="XiboData">
                    <table id="displays" class="table table-striped">
                        <thead>
                            <tr>
                                <th>{% trans "ID" %}</th>
                                <th>{% trans "Display" %}</th>
                                <th>{% trans "Status" %}</th>
                                <th>{% trans "Licence" %}</th>
                                <th>{% trans "Current Layout" %}</th>
                                <th>{% trans "Storage Available" %}</th>
                                <th>{% trans "Storage Total" %}</th>
                                <th>{% trans "Storage Free %" %}</th>
                                <th>{% trans "Description" %}</th>
                                <th>{% trans "Default Layout" %}</th>
                                <th>{% trans "Interleave Default" %}</th>
                                <th>{% trans "Email Alert" %}</th>
                                <th>{% trans "Logged In" %}</th>
                                <th>{% trans "Last Accessed" %}</th>
                                <th>{% trans "Version" %}</th>
                                <th>{% trans "IP Address" %}</th>
                                <th>{% trans "Mac Address" %}</th>
                                <th>{% trans "Screen shot?" %}</th>
                                <th>{% trans "Thumbnail" %}</th>
                                <th>{% trans "Last Command" %}</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javaScript %}
    <script type="text/javascript">
        var table = $("#displays").DataTable({ "language": dataTablesLanguage,
            serverSide: true, stateSave: true,
            filter: false,
            searchDelay: 3000,
            "order": [[ 1, "asc"]],
            ajax: {
                "url": "{{ urlFor("display.search") }}",
                "data": function(d) {
                    $.extend(d, $("#displays").closest(".XiboGrid").find(".FilterDiv form").serializeObject());
                }
            },
            "columns": [
                { "data": "displayId" },
                {
                    "name": "display",
                    "data": function(data, type) {
                        if (type != "display")
                            return data.display;

                        if ("{{ settings.SHOW_DISPLAY_AS_VNCLINK }}" != "" && data.clientAddress != "") {
                            return '<a href="{{ settings.SHOW_DISPLAY_AS_VNCLINK }}" title="{% trans "VNC to this Display" %}" target="' + data.clientAddress + '">' + data.display + '</a>';
                        }
                        else {
                            return data.display;
                        }
                    }
                },
                {
                    "data": "mediaInventoryStatus",
                    "render": function (data, type, row) {
                        if (type != "display")
                            return data;

                        var icon = "";
                        if (data == 1)
                            icon = "fa-check";
                        else if (data == 0)
                            icon = "fa-times";
                        else
                            icon = "fa-cloud-download";

                        return "<span class='fa " + icon + "'></span>";
                    }
                },
                { "data": "licensed", "render": dataTableTickCrossColumn },
                { "data": "currentLayout" },
                { "data": "storageAvailableSpace", "visible": false },
                { "data": "storageTotalSpace", "visible": false },
                { "data": "storagePercentage", "visible": false },
                { "data": "description" , "visible": false},
                { "data": "defaultLayout" , "visible": false},
                { "data": "incSchedule", "render": dataTableTickCrossColumn },
                { "data": "emailAlert", "render": dataTableTickCrossColumn },
                { "data": "loggedIn", "render": dataTableTickCrossColumn },
                { "data": "lastAccessed", "render": dataTableDateFromUnix },
                {
                    "name": "clientVersion",
                    "data": function(data, type) {
                        if (type != "display")
                            return data.clientVersion;

                        return data.clientType + ' ' + data.clientVersion + '-' + data.clientCode;
                    },
                    "visible": false
                },
                { "data": "clientAddress", "visible": false },
                { "data": "macAddress" },
                { "data": "screenShotRequested", "render": dataTableTickCrossColumn, "visible": false },
                {
                    "orderable": false,
                    "data": function(data, type) {
                        if (type != "display")
                            return data.thumbnail;

                        if (data.thumbnail != "") {
                            return '<a data-toggle="lightbox" data-type="image" href="' + data.thumbnail + '"><img class="display-screenshot" src="' + data.thumbnail + '" /></a>';
                        }
                        else {
                            return "";
                        }
                    },
                    "visible": false
                },
                {
                    "data": "lastCommandSuccess",
                    "render": function (data, type, row) {
                        if (type != "display")
                            return data;

                        var icon = "";
                        if (data == 1)
                            icon = "fa-check";
                        else if (data == 0)
                            icon = "fa-times";
                        else
                            icon = "fa-question";

                        return "<span class='fa " + icon + "'></span>";
                    },
                    "visible": false
                },
                {
                    "orderable": false,
                    "data": dataTableButtonsColumn
                }
            ]
        });

        table.on('draw', dataTableDraw);
        table.on('processing.dt', dataTableProcessing);
        dataTableAddButtons(table, $('#displays_wrapper').find('.col-sm-6').eq(1));
    </script>
{% endblock %}