{% extends "assets.html" %}

{% block headtitle %}Asset Changes on {{ date }}{% endblock %}

{% block breadcrumbs %}
<li><a href="/">Home</a></li>
<li><a href="/assets/" >Assets</a></li>
<li><a href="/assets/changes/" >Changes</a></li>
<li><a href="/assets/changes/{{ date_str }}" >{{ date|ecm_datetime }}</a></li>
{% endblock %}

{% block title %}
<div>
  <h1 class="pagetitle">Asset Changes on
    <small>
      <select id="date_selector" class="date_selector">{% for d in dates %}
        <option value="{{ d.value }}" {% if d.value == date_str %}selected="selected"{% endif %}>{{ d.show|ecm_datetime }}</option>
      {% endfor %}</select>
    </small>
  </h1>
</div>
{% endblock %}

{% block javascripts %}
<script type="text/javascript">
BASE_URL = '/assets/changes/{{ date_str }}/';
DATE = '{{ date_str }}';
PARAMS = {
    stations: true,
    space: true,
    since_weeks: {{since_weeks}},
    to_weeks: {{to_weeks}},
    divisions: '{%for h in hangars%}{{h.hangarID}}{%if not forloop.last%},{%endif%}{%endfor%}',
};
</script>
{% endblock %}


{% block assets_javascripts %}
<script type="text/javascript">
function updateDateSelector() {
    $.getJSON('/assets/changes/dates/', PARAMS)
     .success(function (data) {
         var options = '';
         var selected = '';
         for (var i=0; i < data.length; i++) {
             selected = data[i].value == DATE ? 'selected' : '';
             options += '<option value="' + data[i].value + '" ' + selected + '>' + data[i].show + '</option>';
         }
         $('#date_selector').html(options);         
     });
}
$(document).ready(function () {
    $('#date_selector').change(function () {
        DATE = $('#date_selector option:selected').val();
        BASE_URL = '/assets/changes/' + DATE + '/';
        $('#assets_tree').jstree('close_all');
        $('#assets_tree').jstree('refresh');
    });

    $('#apply_filter').click(function() {
        PARAMS.stations = $('button#show_stations').hasClass('active');
        PARAMS.space = $('button#show_space').hasClass('active');
        
        var divisionsBtns = $('#division_buttons button.active');
        var divisions = '';
        for (var i=0 ; i < divisionsBtns.length ; i++) {
            divisions += ',' + divisionsBtns[i].id;
        }
        if (divisions.length != 0) {
            divisions = divisions.substring(1);
        }
        PARAMS.divisions = divisions;
        updateDateSelector();
        $('#assets_tree').jstree('close_all');
        $('#assets_tree').jstree('refresh');
    });

    $('#reset_filter').click(function() {
        $('#space_buttons button').addClass('active');
        $('#division_buttons button').addClass('active');
        PARAMS.stations = true;
        PARAMS.space = true;
        PARAMS.stations = true;
        var divisionsBtns = $('#division_buttons button');
        var divisions = '';
        for (var i=0 ; i < divisionsBtns.length ; i++) {
            divisions += ',' + divisionsBtns[i].id;
        }
        if (divisions.length != 0) {
            divisions = divisions.substring(1);
        }
        PARAMS.divisions = divisions;
        updateDateSelector();
        $('#assets_tree').jstree('close_all');
        $('#assets_tree').jstree('refresh');
    });
});
</script>
{% endblock %}