{% extends 'bootstrap/base.html' %}

{% block content %}
<h1>Flask SQLAlchemy Web query</h1>
    {% if models %}
<div class="container">
    <div class="form-group">
        <select class="form-control" id="primary_model">
            <option></option>
            {% for model, model_data in models.items() %}
            <option value="{{ model_data.table }}">{{ model.__name__ }}</option>
    {% endfor %}
        </select>
    </div>
</div>
    {% else %}
<p class="danger">
    It seems you have no models registered. Did you forget to initialise SQLAlchemy before webquery?
</p>
    {% endif %}
<div id="table-container">
    Please choose a primary model!
</div>
{% endblock %}

{% block scripts %}
{{ super() }}
<script>
 $(document).ready(function() {
     {# TODO: Move this away, as this is Flask-WTF related! #}
     var csrf_token = '{{ csrf_token() }}';
     var current_columns = [];
     var model = '';

     $.ajaxSetup({
         beforeSend: function(xhr, settings) {
             if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type) &&
                 !this.crossDomain) {
                 xhr.setRequestHeader('X-CSRFToken', csrf_token);
             }
         }
     });

     var header_row = $('<tr></tr>')
         .on('change', 'select', function() {
             var column = $(this).val().split(':');
             var model = column[0];
             column = column[1];

             current_columns.push({model: model, column: column});
             $(this).replaceWith($('<span></span>').text(model + '.' + column));

             update_view();
         });
     var table_body = $('<tbody></tbody>')
     var table = $('<table></table>')
         .append($('<thead></thead>')
             .append(header_row))
         .append(table_body);

     function add_column(data) {
         var select = $('<select></select>')
             .append($('<option></option>'));
         var column_chooser = $('<td></td>')
             .append(select);

         header_row.append(column_chooser);

         var prev_key = null;
         var optgroup = null;

         $.each(data.columns, function(key, value) {
             optgroup = $('<optgroup></optgroup>')
                 .attr('label', key);

             $.each(value, function(idx, column) {
                 var opt_value = key + ':' + column;

                 var option = $('<option></option>')
                     .val(opt_value)
                     .text(column);

                 optgroup.append(option);
             });

             select.append(optgroup);
         });
     }

     function update_view() {
         $.ajax({
             type: 'post',
             url: '{{ url_for('flask_sqlalchemy_webquery.update_view') }}',
             contentType: 'application/json; charset=utf-8',
             data: JSON.stringify({
                 model: model,
                 columns: current_columns
             }),
             success: function(data) {
                 table_body.empty()

                 add_column(data);

                 if (data.results !== null) {

                     $.each(data.results, function(idx, row) {
                         table_row = $('<tr></tr>');

                         $.each(current_columns, function(idx, column) {
                             column_key = column.model + ':' + column.column;
                             table_cell = $('<td></td>')
                                 .text(row[column_key]);
                             table_row.append(table_cell)
                         });

                         table_body.append(table_row);
                     });

                 }
             }
         });
     }

     $('#primary_model').change(function() {
         model = $(this).val();

         if (model === '') return;

         {# TODO: Replace model as text with something more meaningful #}
         $(this).replaceWith($('<div>' + model + '</div>'));

         $('#table-container').empty().append(table);

         update_view();
     });
 });
</script>
{% endblock %}