{% extends "layout.html" %}
{% set active_page = active_page|default('meters') -%}
{% block title %}Energy Usage - {{meter_name}}{% endblock %}
{% block container %}
<h1 class="page-header">Energy Usage <small>{{meter_name}}</small></h1>


<div id="load" style="max-width: 100%; height: 350px;"></div>
<img id="load-loading" src="{{ url_for('static', filename='img/loading_icon.gif') }}"
    style="position: absolute; visibility:visible">

<h2>Yearly Summaries</h2>
<div class="card-deck">
    <div class="card">
        <div class="card-body">

            {% for fy in fys %}
            <a class="btn btn-primary" role="button"
                href="{{url_for('meters.usage_fy', meter_id=meter_id, fin_year=fy) }}">{{fy}}</a>
            {% endfor %}
        </div><!-- /card-body-->
    </div><!-- /card-->

</div><!-- /card-deck-->


<h2>Usage Stats</h2>
<p>Usage stats are for the most recent 12 mths of energy data.</p>
<div class="card-deck">
    <div class="card card-body" id="day_avgs">

        <div class="container">
            <div class="row">
                <div class="col-sm">
                    <table class="table table-sm table-striped">
                        <thead class="thead-light">
                            <tr>
                                <th>Day</th>
                                <th>Avg General Supply Load</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Mon</td>
                                <td>{% raw %}{{ day_avgs.Mon.toFixed(2) }}{% endraw %}</td>
                            </tr>
                            <tr>
                                <td>Tue</td>
                                <td>{% raw %}{{ day_avgs.Tue.toFixed(2) }}{% endraw %}</td>
                            </tr>
                            <tr>
                                <td>Wed</td>
                                <td>{% raw %}{{ day_avgs.Wed.toFixed(2) }}{% endraw %}</td>
                            </tr>
                            <tr>
                                <td>Thu</td>
                                <td>{% raw %}{{ day_avgs.Thu.toFixed(2) }}{% endraw %}</td>
                            </tr>
                            <tr>
                                <td>Fri</td>
                                <td>{% raw %}{{ day_avgs.Fri.toFixed(2) }}{% endraw %}</td>
                            </tr>
                            <tr>
                                <td>Sat</td>
                                <td>{% raw %}{{ day_avgs.Sat.toFixed(2) }}{% endraw %}</td>
                            </tr>
                            <tr>
                                <td>Sun</td>
                                <td>{% raw %}{{ day_avgs.Sun.toFixed(2) }}{% endraw %}</td>
                            </tr>
                        </tbody>
                    </table>
                </div><!-- /col-->
                <div class="col-sm">

                    <table class="table table-sm table-striped">
                        <thead class="thead-light">
                            <tr>
                                <th>Day</th>
                                <th>Avg General Supply Load</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Weekdays</td>
                                <td>{% raw %}{{ day_avgs.weekdays.toFixed(2) }}{% endraw %}</td>
                            </tr>
                            <tr>
                                <td>Weekends</td>
                                <td>{% raw %}{{ day_avgs.weekends.toFixed(2) }}{% endraw %}</td>
                            </tr>

                        </tbody>
                    </table>

                </div><!-- /col-->



            </div><!-- /row-->

        </div><!-- /container-->

    </div><!-- /card-->

</div><!-- /card-deck-->


<figure>
    <img id="calendar"
        src="{{ url_for('meters.calendar_png', meter_id=meter_id, start=first_record, end=last_record) }}"
        alt="daily usage calendar">
    <figcaption>Daily Consumption</figcaption>
</figure>



<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script>
    {% include 'meters/chart_monthly_totals.js' %}
</script>

<script>

    var dataURL = 'stats.json';
    var app = new Vue({
        el: '#day_avgs',
        data: {
            day_avgs: []
        },
        mounted: function () { // when the Vue app is booted up, this is run automatically.
            var self = this; // create a closure to access component in the callback below
            $.ajax({
                dataType: "json",
                url: dataURL,
                success: onDataReceived
            });
            function onDataReceived(data) {
                self.day_avgs = data.day_avgs;
            };
        }
    });

</script>
{% endblock container%}