{% extends "base.html" %}
{% block comments %}
<!--
# Copyright (c) 2015 Riverbed Technology, Inc.
#
# This software is licensed under the terms and conditions of the MIT License
# accompanying the software ("License").  This software is distributed "AS IS"
# as set forth in the License.
-->
{% endblock %}

{% block header %}
<script type="text/javascript">
    $(document).ready(function() {
        $("input[type='checkbox']").change(function() {
            $.post(
                '/plugins/' + this.name + '/',
                {"enabled": this.checked, "csrfmiddlewaretoken": "{{ csrf_token }}" },
                function(data) {
                    href = window.location.href.split('#')[0].split('?')[0];
                    window.location.href = href + '?changed=true';
                },
                "json"
            );
        });
    });

    function updateReports(collect_url, reload_url, pluginName) {
        if(!pluginName){
            pluginName = 'All';
        }
        var heading = "Update " + pluginName + " Reports";
        var question =
            '<div class"row">' +
                '<div class="col-xs-offset-1">' +
                    '<label class="checkbox">' +
                        '<input type="checkbox" id="col-reports-id" onclick="toggleOverwrite()"> Collect Reports' +
                    '</label>' +
                    '<label class="checkbox" style="margin-left:2em;">' +
                    '<input type="checkbox" id="col-overwrite-id"  disabled> ' +
                    'and Overwrite Reports' +
                    '</label>' +
                    '<label class="checkbox">' +
                        '<input type="checkbox" id="reload-reports-id"> Reload Reports' +
                    '</label>' +
                '</div>' +
            '</div>';
        var okButtonTxt = 'Go!';
        var cancelButtonTxt = 'Cancel';
        rvbd.modal.confirm(heading, question, cancelButtonTxt, okButtonTxt,
                           function(){ reloadingHandler(collect_url, reload_url) });
    }


    var reloadingHandler = function(collect_url, reload_url) {
        var url = null,
            onSuccess = null,
            modalText,
            modal;
        if($('#col-reports-id').is(':checked')){
            url = collect_url;
            if($('#col-overwrite-id').is(':checked'))
                url += '?overwrite=True';
            modalText = ['Collecting Reports', 'Please wait ...'];
        }
        if($('#reload-reports-id').is(':checked')){
            if(!url){
                url = reload_url;
                modalText = ['Reloading Reports', 'Please wait ...'];
            }else{
                // If we want to both collect and reload reports
                onSuccess = function(){ sendGet(reload_url); };
                modalText = ['Collecting and Reloading Reports', 'Please wait ...'];
            }
        }
        if(!url)
            return;
        modal = rvbd.modal.loading(modalText[0], modalText[1]);
        modal.modal('show');
        sendGet(url, onSuccess);
    };

    function sendGet(url, onSuccess) {
        $.ajax({
            type: "GET",
            url: url,
            error: function(xhr, statusText, errorThrown) {
                $('.modal').modal('hide');
                if (errorThrown == "INTERNAL SERVER ERROR"){
                    errorThrown += "<br><br>Check appfwk log for more details.";
                }
                rvbd.modal.alert(statusText, errorThrown, "OK", function(){});
            },
            success: function(data){
                if(!onSuccess){
                    reloadPage();
                }else{
                    onSuccess();
                }
            }});
    }

    var reloadPage = function() {
        href = window.location.href.split('#')[0].split('?')[0];
        window.location.href = href + '?changed=true';
    }

    function toggleOverwrite() {
        if($('#col-reports-id').is(':checked')){
            $('#col-overwrite-id').removeAttr("disabled");
        }else{
            $('#col-overwrite-id').attr("disabled", "");
            $('#col-overwrite-id').removeAttr("checked");
        }
    }
</script>


{% endblock %}

{% block title %}App Framework: Plugins List{% endblock %}

{% block header_row %}
    <h3>Plugins List</h3>
    <h4>List of installed Application Framework plugins</h4>
{% endblock %}

{% block content %}
    <div class="container-fluid">
        <table border="0" class="table table-bordered block-centered" style="max-width: 90%">
            <thead>
            <tr>
                <th>Enabled</th>
                <th>Action</th>
                <th>Name</th>
                <th>Description</th>
                <th>Version</th>
                <th>Author</th>
            </tr>
            </thead>
            <tbody>
                {% if not plugins %}
                    <tr>
                        <td colspan="5" style="text-align: center">No plugins installed.</td>
                    </tr>
                {% endif %}
                {% for plugin in plugins %}
                    <tr {% if not plugin.enabled %}class="row-disabled"{% endif %}>
                        <td style="text-align: center"><input id="id_{{plugin.slug}}" name="{{plugin.slug}}" type="checkbox" {% if plugin.is_enabled %}checked{% endif %}></td>
                        {% if plugin.enabled %}
                        <td><a href="#" onclick="updateReports('{% url 'plugins-collect' plugin.slug %}', '{% url 'reload-report' plugin.get_namespace %}', '{{plugin.title}}')">Update&nbsp;Reports</a></td>
                        {% else %}
                        <td>Update&nbsp;Reports</td>
                        {% endif %}
                        <td>{{ plugin.title }}</td>
                        <td>{{ plugin.description|safe }}</td>
                        <td>{{ plugin.version }}</td>
                        <td>{{ plugin.author }}</td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
        <div class="row">
            <div class="block-centered" style="text-align: center">
                <input type="button" value="Update All Reports" class="btn btn-primary" onClick="updateReports('{% url 'plugins-collect-all' %}', '{% url 'reload-all' %}')">
            </div>
        </div>
    </div>
{% endblock %}
