flask-sqlalchemy-webquery/flask_sqlalchemy_webquery/templates/flask_sqlalchemy_webquery/list-models.html

139 lines
4.0 KiB
HTML

{% 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 %}