{% extends "eukalypse_now/root.html" %}

{% block base_nav %}
{% endblock %}

{% block base_content %}
<h1>Projects</h1>
<div class="clearfix">
    {% for project in projects %}
    <div id="well-{{ project.id }}" class="well well-small half pull-left">
        <legend>{{ project }}</legend>
        <div class="graph" id="graph-{{ project.id }}">
            graph-{{ project.id }}
        </div>
        <table class="table-test table table-striped table-hover table-bordered table-condensed">
            <thead>
                <tr>
                    <th class="status" width="20">#</th>
                    <th>Datum</th>
                    <th width="25"></th>
                    <th width="25"></th>
                    <th width="25"></th>
                </tr>
            </thead>
            <tbody>
                {% for testrun in project.list_testrun_for_overview %}
                <tr onclick="window.location.href='{{ testrun.get_absolute_url }}'">
                    <td class="status">{{ forloop.counter }}</td>
                    <td>{{ testrun.created|date:"d. F Y" }} um {{ testrun.created|date:"H:i" }} Uhr</td>
                    <td class="status">
                        {% if testrun.total_noerror %}
                        <span title="No error" class="label label-success">
                            {{ testrun.total_noerror }}
                        </span>
                        {% endif %}
                    </td>
                    <td class="status">
                        {% if testrun.total_error_handelt %}
                        <span title="Handelt error" class="label label-warning">
                            {{ testrun.total_error_handelt }}
                        </span>
                        {% endif %}
                    </td>
                    <td class="status">
                        {% if testrun.total_error_nohandelt %}
                        <span title="Unhandelt error" class="label label-important">
                            {{ testrun.total_error_nohandelt }}
                        </span>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% empty %}
    <div class="well well-small half pull-left">
    no testresults yet! go to the admin interface and create tests.
    afterwards run the tests! <br>
    </div>
    {% endfor %}
</div>
{% endblock %}

{% block "foot_js" %}
<script type="text/javascript">
    jQuery(document).ready(function($) {
        $('.label').tooltip({
            animation: false,
            placement: 'top',
            delay: { show: 200 }
        });

        google.setOnLoadCallback(drawChart);
    });

    var drawChart = function() {
        var options = {
            animation: {
                duration: 400,
                easing: 'inAndOut'
            },
            connectSteps: false,
            backgroundColor: '#f5f5f5',
            focusTarget: 'category',
            series: [{
                    color: 'red',
                    lineWidth: 0,
                    pointSize: 5
                }, {
                    color: 'orange',
                    lineWidth: 0,
                }, {
                    color: 'green',
                    lineWidth: 0,
                }
            ],
            chartArea: {
                top: 20,
                left: 20,
                height: 120,
                width: 400
            },
            fontSize: 14,
            fontName: 'Helvetica',
            axisTitlesPosition: 'none',
            isStacked: true,
            legend: {
                position: 'none'
            },
            hAxis: {
                textPosition: 'none',
                baselineColor: '#f5f5f5',
            },
            vAxis: {
                format: '##',
                baselineColor: '#f5f5f5',
                minorGridlines: {
                    color: '#eee',
                    count: 4
                },
                minValue: 0,
                maxValue: 15
            }
        };

        {% for project in projects %}
        var data{{ project.id }} = google.visualization.arrayToDataTable([
                ['', 'Fehler', 'Bekannt', 'OK'],
                {% for testrun in project.list_testrun_for_graph reversed %}
                ['{{ testrun.created|date:"d. F Y" }} um {{ testrun.created|date:"H:i" }} Uhr',
                    {{ testrun.total_error_nohandelt }},
                    {{ testrun.total_error_handelt }},
                    {{ testrun.total_noerror }}
                ],
                {% endfor %}
            ]);

        var chart{{ project.id }} = new google.visualization.SteppedAreaChart(document.getElementById('graph-{{ project.id }}'));
        chart{{ project.id }}.draw(data{{ project.id }}, options);
        {% endfor %}
    };
</script>
{% endblock "foot_js" %}