139 lines
4.0 KiB
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 %}
|