{% extends "support.html" %}


{% block head %}
    {{ block.super }}
    <script>
        let width, height, gradient;
        function getGradient(ctx, chartArea) {
            const chartWidth = chartArea.right - chartArea.left;
            const chartHeight = chartArea.bottom - chartArea.top;
            if (gradient === null || width !== chartWidth || height !== chartHeight) {
                // Create the gradient because this is either the first render
                // or the size of the chart has changed
                width = chartWidth;
                height = chartHeight;
                gradient = ctx.createLinearGradient(0, chartArea.bottom, 0, chartArea.top);

                gradient.addColorStop(0, '#b1b3b5');
                gradient.addColorStop(0.2, '#c02025');
                gradient.addColorStop(0.4, '#f05a22');
                gradient.addColorStop(0.6, '#fff018');
                gradient.addColorStop(0.8, '#2984b2');
                gradient.addColorStop(1, '#44ba85');
            }

            return gradient;
        }

        $(function () {
            $(document).tooltip();

            $("#detail-graph-info").dialog({
                autoOpen: false,
                closeOnEscape: true,
                modal: true,
                draggable: false,
                width: 1400,
                open: function (event, ui) {
                    $.ajax({
                        url: "{% url 'support:tower-uptime-detail-graph' %}",
                        type: "POST",
                        data: {
                            csrfmiddlewaretoken: '{{csrf_token}}',
                            current_detail_data: $("#current_detail_data").val()
                        },
                        success: function (data, status, jqXHR) {
                            var $detailChart = $("#tower-uptime-detail-chart");
                            var ctx = $detailChart[0].getContext("2d");

                            new Chart(ctx, {
                                type: 'line',
                                data: {
                                    labels: data.labels,
                                    datasets: [{
                                        label: 'Tower Rx Queued',
                                        fill: false,
                                        borderColor: '#32a0d9',
                                        backgroundColor: '#3bbdff',
                                        borderDash: [5, 5],
                                        data: data.rx_que_data
                                    },{
                                        label: 'Tower Rx Runable',
                                        fill: '-1',
                                        borderColor: '#1d5d80',
                                        backgroundColor: '#2984b2',
                                        data: data.rx_runable_data
                                    },
                                    {
                                        label: 'Tower Prepack Queue',
                                        fill: false,
                                        borderColor: '#5effb5',
                                        backgroundColor: '#50d99b',
                                        borderDash: [5, 5],
                                        data: data.ppk_que_data
                                    },
                                    {
                                        label: 'Tower Prepack Runable',
                                        fill: '-1',
                                        borderColor: '#266649',
                                        backgroundColor: '#44ba85',
                                        data: data.ppk_runable_data
                                    },
                                    {
                                        label: 'System Queue',
                                        fill: false,
                                        borderColor: 'rgb(255, 99, 132)',
                                        backgroundColor: 'rgb(255, 99, 132)',
                                        data: data.sys_que_data
                                    }]
                                },
                                options: {
                                    responsive: true,
                                    interaction: {
                                        mode: 'nearest',
                                        axis: 'x'
                                    },
                                    legend: {
                                        position: 'top',
                                    },
                                    scales: {
                                        x: {
                                            autoSkip: true,
                                            type: 'time',
                                            display: true,
                                            title: {
                                                display: true,
                                                text: 'Date'
                                            },
                                            ticks: {
                                                maxRotation: 0,
                                                source: 'auto',
                                                major: {
                                                    enabled: true
                                                },
                                                font: function (context) {
                                                    if (context.tick && context.tick.major) {
                                                        return {
                                                            weight: 'bold',
                                                        };
                                                    }
                                                }
                                            }
                                        },
                                        y: {
                                            display: true,
                                            title: {
                                                display: true,
                                                text: 'Queue Size'
                                            }
                                        }
                                    }
                                }
                            });
                        }
                    })
                },
                position: {my: "top", at: "top", of: window},
                buttons: [
                    {
                        text: "Close",
                        "class": 'modal-dialog-button-right',
                        click: function () {
                            $(this).dialog("close");
                        }
                    }
                ]
            });

            $("button[name^='btn-detail-graph']").click(function (event) {
                $('#detail-graph-info-content').html('<canvas id=\"tower-uptime-detail-chart\"></canvas>');
                $("#current_detail_data").val(get_icon_button_value(event));
                $("#detail-graph-info").dialog("open");
            });

            $("#detail-tower-status").dialog({
                autoOpen: false,
                closeOnEscape: true,
                modal: true,
                draggable: false,
                width: 1400,
                open: function (event, ui) {
                    $.ajax({
                        url: "{% url 'support:tower-status-detail-graph' %}",
                        type: "POST",
                        data: {
                            csrfmiddlewaretoken: '{{csrf_token}}',
                            current_detail_data: $("#current_detail_data").val()
                        },
                        success: function (data, status, jqXHR) {
                            var $detailChart = $("#tower-status-detail-chart");
                            var ctx = $detailChart[0].getContext("2d");

                            new Chart(ctx, {
                                type: 'line',
                                data: {
                                    datasets: [{
                                        label: 'Tower Status',
                                        fill: false,
                                        borderColor: function(context) {
                                            const chart = context.chart;
                                            const {ctx, chartArea} = chart;

                                            if (!chartArea) {
                                                // This case happens on initial chart load
                                                return null;
                                            }
                                            return getGradient(ctx, chartArea);
                                        },
                                        backgroundColor: 'rgb(68, 186, 133)',
                                        stepped: true,
                                        data: data.status_data
                                    }]
                                },
                                options: {
                                    responsive: true,
                                    interaction: {
                                        mode: 'nearest',
                                        axis: 'x'
                                    },
                                    legend: {
                                        position: 'top',
                                    },
                                    scales: {
                                        x: {
                                            autoSkip: true,
                                            type: 'time',
                                            display: true,
                                            title: {
                                                display: true,
                                                text: 'Date'
                                            },
                                            ticks: {
                                                maxRotation: 0,
                                                source: 'auto',
                                                major: {
                                                    enabled: true
                                                },
                                                font: function (context) {
                                                    if (context.tick && context.tick.major) {
                                                        return {
                                                            weight: 'bold',
                                                        };
                                                    }
                                                }
                                            }
                                        },
                                        y: {
                                            display: true,
                                            type: 'category',
                                            labels: ['Running', 'Impeded', 'Idle', 'Paused', 'Halted', 'No Data'],
                                            title: {
                                                display: true,
                                                text: 'Tower Status'
                                            }
                                        }
                                    }
                                }
                            });
                        }
                    })
                },
                position: {my: "top", at: "top", of: window},
                buttons: [
                    {
                        text: "Close",
                        "class": 'modal-dialog-button-right',
                        click: function () {
                            $(this).dialog("close");
                        }
                    }
                ]
            });

            $("button[name^='btn-status-detail']").click(function (event) {
                $('#detail-tower-status-content').html('<canvas id=\"tower-status-detail-chart\"></canvas>');
                $("#current_detail_data").val(get_icon_button_value(event));
                $("#detail-tower-status").dialog("open");
            });


            $("#tower-story-detail").dialog({
                autoOpen: false,
                closeOnEscape: true,
                modal: true,
                draggable: false,
                width: 1400,
                open: function (event, ui) {
                    $.ajax({
                        url: "{% url 'support:tower-story-detail' %}",
                        type: "POST",
                        data: {
                            csrfmiddlewaretoken: '{{csrf_token}}',
                            current_detail_data: $("#current_detail_data").val()
                        },
                        success: function (data, status, jqXHR) {
                            $('#tower-story-detail-content').html(data);
                        }
                    })
                },
                position: {my: "top", at: "top", of: window},
                buttons: [
                    {
                        text: "Close",
                        "class": 'modal-dialog-button-right',
                        click: function () {
                            $(this).dialog("close");
                        }
                    }
                ]
            });

            $("button[name^='btn-story-mode']").click(function (event) {
                $('#tower-story-detail-content').html('Loading Tower Story . . .');
                $("#current_detail_data").val(get_icon_button_value(event));
                $("#tower-story-detail").dialog("open");
            });

            $("#tower-story-csv").dialog({
                autoOpen: false,
                closeOnEscape: true,
                modal: true,
                draggable: false,
                width: 400,
                open: function (event, ui) {
                    $.ajax({
                        url: "{% url 'support:tower-story-detail' %}?export=csv",
                        type: "POST",
                        data: {
                            csrfmiddlewaretoken: '{{csrf_token}}',
                            current_detail_data: $("#current_detail_data").val()
                        },
                        success: function (data, status, jqXHR) {
                            var element = document.createElement('a');
                            element.href = 'data:text/csv;charset=utf-8,' + encodeURI(data);
                            element.target = '_blank';
                            element.download = 'towerstory' + $("#current_detail_data").val() + '.csv';
                            element.click();
                            $("#tower-story-csv").dialog("close");
                        }
                    })
                },
                position: {my: "top", at: "top", of: window},
                buttons: [
                    {
                        text: "Close",
                        "class": 'modal-dialog-button-right',
                        click: function () {
                            $(this).dialog("close");
                        }
                    }
                ]
            });

            $("button[name^='btn-story-csv']").click(function (event) {
                $('#tower-story-csv-content').html('Exporting Tower Story . . .');
                $("#current_detail_data").val(get_icon_button_value(event));
                $("#tower-story-csv").dialog("open");
            });
        });
    </script>
{% endblock %}

{% block pagehead %}
    {% include 'pagehead.html' %}
{% endblock %}

{% block content %}
<form id="towerUptimeForm" name="towerUptimeForm" method="POST">
    {% csrf_token %}
    <input type="hidden" name="current_detail_data" id="current_detail_data" value=""/>
{% for itm in report_list %}
{% if itm.header %}
    <table id="cabinet-statistics-summary-table" class="table table-bordered table-striped">
            <caption class="dosis-grouping-caption">{% if group_type == 'hour'%}Group By Hour -- {{ itm.date_rec }} {{ itm.hour|floatformat }}
                {% elif group_type == 'day' %}Group By Day -- {{ itm.date_rec }}
                {% elif group_type == 'week' %}Group By Week -- {{ itm.year|floatformat }} {{ itm.week|floatformat }}
                {% elif group_type == 'month' %}Group By Month -- {{ itm.month_display }}
                {% elif group_type == 'year' %}Group By Year -- {{ itm.year|floatformat }}{% endif %} </caption>
        <thead style="position: sticky; top: 0;">
        <tr class="dosis-report-header">
            {% include 'report-table-header.html' %}
            <th><i class="icon-th-list"></i></th>
        </tr>
        </thead>
        <tbody>
        {% endif %}
            <tr>
                <td {% if itm.dafe == 'SUBTOTAL' %}class="subtotal-cell"{% endif %}>{{ itm.dafe }}</td>
                <td {% if itm.dafe == 'SUBTOTAL' %}class="subtotal-cell"{% endif %} title="{{ itm.running_hours }} hours">{{ itm.running_mins }}{% if itm.dafe != 'SUBTOTAL' %} ({{ itm.running_pct|floatformat:"-2" }}%){% endif %}</td>
                <td {% if itm.dafe == 'SUBTOTAL' %}class="subtotal-cell"{% endif %} title="{{ itm.impeded_hours }} hours">{{ itm.impeded_mins }}{% if itm.dafe != 'SUBTOTAL' %} ({{ itm.impeded_pct|floatformat:"-2" }}%){% endif %}</td>
                <td {% if itm.dafe == 'SUBTOTAL' %}class="subtotal-cell"{% endif %} title="{{ itm.idle_hours }} hours">{{ itm.idle_mins }}{% if itm.dafe != 'SUBTOTAL' %} ({{ itm.idle_pct|floatformat:"-2" }}%){% endif %}</td>
                <td {% if itm.dafe == 'SUBTOTAL' %}class="subtotal-cell"{% endif %} title="{{ itm.paused_hours }} hours">{{ itm.paused_mins }}{% if itm.dafe != 'SUBTOTAL' %} ({{ itm.paused_pct|floatformat:"-2" }}%){% endif %}</td>
                <td {% if itm.dafe == 'SUBTOTAL' %}class="subtotal-cell"{% endif %} title="{{ itm.halted_hours }} hours">{{ itm.halted_mins }}{% if itm.dafe != 'SUBTOTAL' %} ({{ itm.halted_pct|floatformat:"-2" }}%){% endif %}</td>
                <td {% if itm.dafe == 'SUBTOTAL' %}class="subtotal-cell"{% endif %} title="{{ itm.sys_queue_empty_hours }} hours">{{ itm.sys_queue_empty_mins }}{% if itm.dafe != 'SUBTOTAL' %} ({{ itm.sys_queue_empty_pct|floatformat:"-2" }}%){% endif %}</td>
                <td {% if itm.dafe == 'SUBTOTAL' %}class="subtotal-cell"{% endif %} title="{{ itm.down_hours }} hours">{{ itm.down_mins }}{% if itm.dafe != 'SUBTOTAL' %} ({{ itm.down_pct|floatformat:"-2" }}%){% endif %}</td>
            {% if itm.dafe != 'SUBTOTAL' %}
                <td><button id="btn-detail-graph-{{ itm.id }}" name="btn-detail-graph-{{ itm.id }}" type="button"
                        value="{{ itm.dafe }}:{{ itm.start_date|date:"mdYHis" }}--{{ itm.end_date|date:"mdYHis" }}"
                        title="View Queue Details" class="btn btn-small btn-link"><i
                        class="icon-tasks"></i></button>&nbsp;&nbsp;&nbsp;
                <button id="btn-status-detail-{{ itm.id }}" name="btn-status-detail-{{ itm.id }}" type="button"
                        value="{{ itm.dafe }}:{{ itm.start_date|date:"mdYHis" }}--{{ itm.end_date|date:"mdYHis" }}"
                        title="View Tower Status Details" class="btn btn-small btn-link"><i
                        class="icon-calendar"></i></button>&nbsp;&nbsp;&nbsp;
                <button id="btn-story-mode-{{ itm.id }}" name="btn-story-mode-{{ itm.id }}" type="button"
                        value="{{ itm.dafe }}:{{ itm.start_date|date:"mdYHis" }}--{{ itm.end_date|date:"mdYHis" }}"
                        title="View Tower Status Story" class="btn btn-small btn-link"><i
                        class="icon-book"></i></button>&nbsp;&nbsp;&nbsp;
                <button id="btn-story-csv-{{ itm.id }}" name="btn-story-csv-{{ itm.id }}" type="button"
                        value="{{ itm.dafe }}:{{ itm.start_date|date:"mdYHis" }}--{{ itm.end_date|date:"mdYHis" }}"
                        title="Export Tower Status Story CSV" class="btn btn-small btn-link"><i
                        class="icon-arrow-down"></i></button></td>

            {% else %}
                <td>&nbsp;</td>
            {% endif %}
            </tr>
        {% if itm.dafe == 'SUBTOTAL' %}
        </tbody>
    </table>
        {% endif %}
{% endfor %}
</form>
    {% include 'pagenav.html' %}
    <div id="detail-graph-info" title="Queue History Detail" style="margin-left: 2px;">
        <div id="detail-graph-info-content">
            <canvas id="tower-uptime-detail-chart"></canvas>
        </div>
    </div>
    <div id="detail-tower-status" title="Tower Status Detail" style="margin-left: 2px;">
        <div id="detail-tower-status-content">
            <canvas id="tower-status-detail-chart"></canvas>
        </div>
    </div>
    <div id="tower-story-detail" title="Tower Story Detail" style="margin-left: 2px;">
        <div id="tower-story-detail-content">
            Loading Tower Story...
        </div>
    </div>
    <div id="tower-story-csv" title="Tower Story CSV" style="margin-left: 2px;">
        <div id="tower-story-csv-content">
            Exporting Tower Story...
        </div>
    </div>
{% endblock %}