{% extends "base.html" %}
{% load url from future %}
{% load i18n %}
{% load staticfiles %}

<!--
        Title
-->
{% block title %}{% trans "Weight overview" %}{% endblock %}

<!--
        Header data
-->
{% block header %}
<script src="{% static 'js/d3.js' %}"></script>
<script src="{% static 'js/jquery-globalize/lib/globalize.js' %}"></script>



<script type="text/javascript">

// Initialise the datepicker for the modal dialog
function custom_modal_init()
{
    init_weight_datepicker();
}


$(document).ready(function () {

    // Load the chart data, without arguments this returns all weight entries
    var date_min = $("#weight_filter_from").val();
    var date_max = $("#weight_filter_to").val();
    var filter_data = {}
    if( date_min && date_max)
    {
        filter_data = {'date_min': date_min,
                       'date_max': date_max}
    }

    $.getJSON("/weight/api/get_weight_data/", filter_data, function(json) {
        weight_chart(json);
    });

    // Add datepickers to the filter elements

    $("#weight_filter_from").datepicker({ dateFormat: "yy-mm-dd",
                                          {% if min_date %}minDate: {{ min_date }}{% endif %}
                                      });
    $("#weight_filter_to").datepicker({ dateFormat: "yy-mm-dd",
                                        {% if max_date %}maxDate: {{max_date}}{% endif %}
                                     });

    // Process the filter
    $("#weight_diagram_refresh").click(function(e) {

        e.preventDefault();

        var date_min = $("#weight_filter_from").val();
        var date_max = $("#weight_filter_to").val();

        $.getJSON("/weight/api/get_weight_data/",
                    {'date_min': date_min,
                     'date_max': date_max},
                     function(json) {
                        weight_chart(json);
                });
    });
});
</script>
{% endblock %}


<!--
        Main Content
-->
{% block content %}
{% if not min_date %}
<p>
    {% trans "There is no chart here because there are no weight entries." %}
    {% trans "Use link to add one." %}
</p>
{% endif %}

<div id="weight_diagram"></div>

<p>
<a href="{% url 'weight-add' %}"
   class="modal-dialog"
   id="add-weight-entry">{% trans "Add weight entry" %}</a>
</p>

<p>
    <em>{% trans "You can click on a value on the chart to edit it. "%}</em>
</p>

{% endblock %}


<!--
        Side bar
-->
{% block sidebar %}
<h3>{% trans "Filter options" %}</h3>
<p>{% blocktrans %}
Use the second chart to pan or zoom by clicking and dragging the selection. Clicking
on the background resets it.
{% endblocktrans %}</p>


<h3>{% trans "Options" %}</h3>
<p>
    <a href="{% url 'wger.weight.views.export_csv' %}"
       target="_blank">
    <img src="{% static 'images/icons/save.svg' %}"
         width="32"
         height="32"
         alt="{% trans 'Export as CSV' %}"
         title="{% trans 'Export as CSV' %}">
        {% trans "Export as CSV" %}
    </a>
</p>

<p>
    <a href="{% url 'weight-import-csv' %}">
    <img src="{% static 'images/icons/csv-table.svg' %}"
         width="32"
         height="32"
         alt="{% trans 'Import from spreadsheet' %}"
         title="{% trans 'Import from spreadsheet' %}">
        {% trans "Import from spreadsheet" %}
    </a>
</p>


{% endblock %}
