{% extends "base.html" %}
{% comment %}© 2011, Multapplied Networks, Inc.{% endcomment %}
{% load speedtest %}
{% load bootstrap %}
{% block title %}{{ bond.bonder.name | escapejs }} Speed Tests {{ block.super }}{% endblock %}

{% block pagescript %}
    <script>
$(function(){
    /* TODO: put this in an external JS file. */
    $('.controls ul').addClass('list-unstyled');
    $("input:radio[name=protocol]").click(updateProtocolFieldVisibility);
    updateProtocolFieldVisibility();

    $("#preset-test-anchors").find("li a").each( function(index) {
        /* Register click handlers for test preset links */
        var a = $(this);
        a.click( function(e) {
            e.preventDefault();
            $("form#" + a.attr("data-test-form")).submit();
        });
    });

    // Disable rate limit on bond speed tests
    $('#id_target').change(function(e) {
        if (e.target.value == 'bond') {
            $('#id_rate_limit').prop('disabled', true);
        } else {
            $('#id_rate_limit').prop('disabled', false);
        }
    }).change();

});
function updateProtocolFieldVisibility() {
    /* Update fields that depend on the value of the protocol field. */
    var protocol = $("input:radio[name=protocol]:checked").val();
    var concurrency = $("input[name=concurrency]");
    var payload_size = $("input[name=payload_size]");

    if (protocol == "udp") {
        concurrency.attr("readonly", "readonly");
        payload_size.removeAttr("readonly");
    } else {
        payload_size.attr("readonly", "readonly");
        concurrency.removeAttr("readonly");
    }
}
</script>
{% endblock %}

{% block breadcrumbs %}
    {{ block.super }}
    <li><a href="{% url 'bonds' %}" target="_parent">Bonds</a></li>
    <li><a href="{% url 'bond-details' bond.id %}" target="_parent">{{ bond.bonder.name }}</a></li>
    <li>Speed Tests</li>
{% endblock %}

{% block content %}

<div class="row">
    <div class="col-md-12">
        <div class="row">
            <div class="col-md-12">
                <h1 id="top">{{ bond.bonder.name }} Speed Tests</h1>
            </div>
        </div>

        {% if perms.baspeedtest.add_speedtest %}
            <div class="row"
                ng-controller="SpeedTestFormCtrl" ng-init="init('{% url 'current:bond-detail' bond.id %}')"
                ng-cloak>
                <div class="col-md-6">
                    <div class="panel panel-default">
                        <div class="panel-heading"><h2>Speed Test</h2><i class="fa fa-caret-up fa-lg pull-right"> </i></div>
                        <div class="panel-body panel-collapse">
                            <div>
                                <form method="post" target="_parent" id="speed-test" action="">
                                    {% csrf_token %}
                                    <fieldset class="form-horizontal">
                                        {{ speed_test_form|bootstrap_horizontal }}
                                    </fieldset>
                                    <div class="row">
                                        <div class="col-sm-offset-2 col-sm-10">
                                            {% verbatim %}
                                            <div class="btn-toolar form-actions" ng-attr-title="{{ hasActiveTuning() ? 'Action disabled because the bond or a leg is being tuned. Try again when the tuning job is complete.' : '' }}">
                                                <button ng-attr-type="{{ hasActiveTuning() ? 'button' : 'submit' }}" class="btn btn-primary" ng-class="{disabled: hasActiveTuning()}">
                                                    Test
                                                </button>
                                            </div>
                                            {% endverbatim %}
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="panel panel-default">
                        <div class="panel-heading"><h2>Preset Tests</h2><i class="fa fa-caret-up fa-lg pull-right"> </i></div>
                        <div class="panel-body panel-collapse">
                            <div>
                                <ul id="preset-test-anchors">
                                    <li><a href="#" data-test-form="bonded-tcp-down">Bonded TCP download</a></li>
                                    <li><a href="#" data-test-form="bonded-tcp-down-8">Bonded TCP download (8-concurrent)</a></li>
                                    <li><a href="#" data-test-form="bonded-tcp-up">Bonded TCP upload</a></li>
                                    <li><a href="#" data-test-form="bonded-packet-loss">Bonded packet loss</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}

        <div class="row"
            ng-controller="SpeedTestListCtrl" ng-init="init('{% url 'current:speedtest-list' bond.id %}')"
            ng-cloak
        >
            <div class="col-md-12">
                <h2 id="results">Test Results</h2>
                <div class="table-controls">
                    <div class="row">
                        <div class="col-md-5 btn-toolbar">
                            <table-options page-options="page_options"></table-options>
                            <div class="btn-group">
                                <input class="btn btn-default" ng-class="{disabled: selected_tests.length <= 1}" type="button" value="Compare tests" ng-click="compareTests('{% url 'bond-compare-speed-tests' bond.id %}')">
                            </div>
                        </div>
                    </div>
                </div>
                {% verbatim %}
                <div class="row">
                    <div class="col-md-12">
                        <table class="table table-bordered table-striped table-condensed speedtest-table" cg-busy="{promise:promise,message:'Loading',backdrop:false,delay:300}">
                            <thead>
                            <tr>
                                <th class="vert-align-middle"></th>
                                <th class="vert-align-middle">ID</th>
                                <th class="vert-align-middle">Target</th>
                                <th class="vert-align-middle">Description</th>
                                <th class="vert-align-middle">Submitted</th>
                                <th class="vert-align-middle">Results</th>
                                <th class="vert-align-middle">Actions</th>
                            </tr>
                            </thead>
                            <tbody>
                                <tr ng-show="tests.length === 0">
                                    <td colspan="7" class="vert-align-middle">No speed tests to show.</td>
                                </tr>
                                <tr ng-repeat="test in tests track by test.id">
                                    <td class="vert-align-middle">
                                        <input type="checkbox" ng-show="test.updated_time && test.master_stats && test.slave_stats" ng-checked="selected_tests.indexOf(test.id) > -1" ng-click="toggleTestSelect(test.id)">
                                    </td>
                                    <td class="vert-align-middle"><a href="/bonds/{{ bond_id }}/speedtests/{{ test.id }}/" target="_parent">{{ test.id }}</a></td>
                                    <td class="vert-align-middle">{{ test.target }}</td>
                                    <td class="vert-align-middle">{{ test.protocol | uppercase }} {{ test.direction }}load test, {{ test.rate_limit | filter_rate_limit }},
                                        {{ test.length | number:1 }} second<ng-pluralize count="test.length" when="{'1': '', '1.0': '', 'other': 's'}"></ng-pluralize>,
                                        {{ test | filter_protocol_detail }}
                                    </td>
                                    <td class="vert-align-middle">{{ test.submitted_time | date: 'yyyy-MM-dd HH:mm:ss' }}</td>
                                    <td class="vert-align-middle">
                                        <span>{{ test | filter_speedtest_results }}</span>
                                    </td>
                                    <td class="vert-align-middle">
                                        <a ng-href="/bonds/{{ bond_id }}/speedtests/{{ test.id }}/" target="_parent" class="btn btn-default btn-sm" title="Speed test details"><i class="fa fa-search-plus"></i></a>
                                        {% endverbatim %}
                                        {% if perms.baspeedtest.add_speedtest %}
                                        {% verbatim %}
                                            <a ng-href="/bonds/{{ bond_id }}/speedtests/{{ test.id }}/repeat/" target="_parent" class="btn btn-default btn-sm" title="Repeat speed test"><i class="fa fa-repeat"></i></a>
                                        {% endverbatim %}
                                        {% endif %}
                                        {% verbatim %}
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                {% endverbatim %}
                {% verbatim %}
                <div class="row" ng-if="data.results.length > 0">
                    <div class="col-md-4"><br/><br/>{{ query_stats.first_item }}-{{ query_stats.last_item }} of {{ query_stats.total_items }}</div>
                    <div class="col-md-8 text-right">
                        <uib-pagination ng-model="query.page" max-size="5" total-items="data.count" items-per-page="query.page_size" ng-change="onChangePage()"></uib-pagination>
                    </div>
                </div>
                {% endverbatim %}
            </div>
        </div>
    </div>
</div>

<!-- Preset tests -->
<form method="post" id="bonded-tcp-down" style="display: none;">
    {% csrf_token %}
    <input type="hidden" name="target" value="bond">
    <input type="hidden" name="protocol" value="tcp">
    <input type="hidden" name="direction" value="down">
    <input type="hidden" name="rate_limit" value="">
    <input type="hidden" name="length" value="10.0">
    <input type="hidden" name="concurrency" value="1">
    <input type="hidden" name="payload_size" value="1000">
</form>
<form method="post" id="bonded-tcp-down-8" style="display: none;">
    {% csrf_token %}
    <input type="hidden" name="target" value="bond">
    <input type="hidden" name="protocol" value="tcp">
    <input type="hidden" name="direction" value="down">
    <input type="hidden" name="rate_limit" value="">
    <input type="hidden" name="length" value="10.0">
    <input type="hidden" name="concurrency" value="8">
    <input type="hidden" name="payload_size" value="1000">
</form>
<form method="post" id="bonded-tcp-up" style="display: none;">
    {% csrf_token %}
    <input type="hidden" name="target" value="bond">
    <input type="hidden" name="protocol" value="tcp">
    <input type="hidden" name="direction" value="up">
    <input type="hidden" name="rate_limit" value="">
    <input type="hidden" name="length" value="10.0">
    <input type="hidden" name="concurrency" value="1">
    <input type="hidden" name="payload_size" value="1000">
</form>
<form method="post" id="bonded-packet-loss" style="display: none;">
    {% csrf_token %}
    <input type="hidden" name="target" value="bond">
    <input type="hidden" name="protocol" value="udp">
    <input type="hidden" name="direction" value="down">
    <input type="hidden" name="rate_limit" value="0.1">
    <input type="hidden" name="length" value="10.0">
    <input type="hidden" name="concurrency" value="1">
    <input type="hidden" name="payload_size" value="10">
</form>
{% endblock %}