{% extends "base.html" %}
{% block title %}Home Page - Title{% endblock %}
{% block javascript_includes %}
<script type="text/javascript" src="//code.highcharts.com/4.1.4/highcharts.js"></script>
{% endblock %}
{% block javascript_init %}
<script type="text/javascript" charset="utf-8">
var chart;
var chartOptions;
$(document).ready (function ()
{
    highChartsInitialization();

    $ ('#workflow_list').dataTable ({
        "jQueryUI"      : true,
        "pagingType": "full_numbers",
        "processing"    : true,
        "serverSide"    : true,
        "ajax": {
            "url": "{{ url_for ('.index') }}",
            "data": function (aoData) {
                aoData.time_filter =  $ ('#time_filter').val ();
            }
        },
        "autoWidth"     : false,
        "order"      : [
            [ 4, "desc" ]
        ],
        "columns": [
            { "data": "dax_label" },
            { "data": "submit_hostname" },
            { "data": "submit_dir" },
            { "data": "state" },
            { "data": "timestamp", "sClass": "text-nowrap" }
        ]
    });

    $("#time_filter").change ( function()
    {
        $("#workflow_list").dataTable().fnDraw();
    });

    chartOptions =
    {
        chart:
        {
            renderTo: 'workflow_counts',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            height: 250
        },
        title:
        {
            text: null
        },
        credits :
        {
            enabled : false
        },
        tooltip:
        {
            formatter: function()
            {
                return '<b>'+ this.point.name +'</b>: '+ this.point.y;
            }
        },
        plotOptions:
        {
            pie:
            {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels:
                {
                    enabled: false
                },
                showInLegend: true,
                dataLabels:
                {
                    color: '#000000',
                    formatter: function ()
                    {
                        return '<b>'+ this.point.name +':</b> '+ this.point.y;
                    }
                }
            }
        },
        series:
        [{
            type: 'pie',
            name: 'Workflow Distribution',
            data: [
                {
                    name: 'Running',
                    y: 0{{ counts.others }},
                    sliced: true,
                    selected: true
                },
                {
                    name: 'Failed',
                    y: 0{{ counts.fail }}
                },
                {
                    name: 'Successful',
                    y: 0{{ counts.success }}
                }
            ]
        }]
    };

chart = new Highcharts.Chart (chartOptions);
});
</script>
{% endblock %}
{% block title_header %}Workflow Listing{% endblock %}
{% block content %}
<section class="row">
    <div id="workflow_counts" class="col-xs-12"></div>
</section>
<section class="row">
    <div id="table_wrapper" class="col-xs-12">
        <label for="time_filter" class="control-label">Show results for </label>

        <div style="display: inline-block; margin-bottom: .5em;">
            <select id="time_filter" name="time_filter" class="form-control" style="width: auto;">
                <option value="all">all</option>
                <option value="day">last day</option>
                <option value="week">last week</option>
                <option value="month">last month</option>
                <option value="year">last year</option>
            </select>
        </div>

        <table id="workflow_list">
            <thead>
            <tr>
                <th>Workflow Label</th>
                <th>Submit Host</th>
                <th>Submit Directory</th>
                <th>State</th>
                <th>Submitted On</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</section>
{% endblock %}