blob: 274040e7db53a86ac630ae69df99f0ca615efd5f [file] [log] [blame]
<form>
<div class="customize_row">
<div class="customize_column">
<div>Available Dashboard Views</div>
<select name="selectfrom" id="select-from" multiple size="5">
{% for cp in unusedDashboards %}
<option value="{{ cp }}">{{ cp }}</option>
{% endfor %}
</select>
</div>
<div class="customize_column">
<br>
<div class="btn btn-success" id="btn-add">Add &raquo;</div><br><br>
<div class="btn btn-success" id="btn-remove">&laquo; Remove</div>
</div>
<div class="customize_column">
<div>Selected Dashboard Views</div>
<select name="selectto" id="select-to" multiple size="5">
{% for cp in dashboards %}
<option value="{{ cp }}">{{ cp }}</option>
{% endfor %}
</select>
<br>
<div class="btn btn-high btn-info" id="btn-save">Save</div>
</div>
<div class="customize_column">
<br>
<div class="btn btn-success" id="btn-up">Up</div><br><br>
<div class="btn btn-success" id="btn-down">Down</div>
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#btn-add').click(function(){
$('#select-from option:selected').each( function() {
$('#select-to').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
$(this).remove();
});
});
$('#btn-remove').click(function(){
$('#select-to option:selected').each( function() {
$('#select-from').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
$(this).remove();
});
});
$('#btn-up').bind('click', function() {
$('#select-to option:selected').each( function() {
var newPos = $('#select-to option').index(this) - 1;
if (newPos > -1) {
$('#select-to option').eq(newPos).before("<option value='"+$(this).val()+"' selected='selected'>"+$(this).text()+"</option>");
$(this).remove();
}
});
});
$('#btn-down').bind('click', function() {
var countOptions = $('#select-to option').size();
$('#select-to option:selected').each( function() {
var newPos = $('#select-to option').index(this) + 1;
if (newPos < countOptions) {
$('#select-to option').eq(newPos).after("<option value='"+$(this).val()+"' selected='selected'>"+$(this).text()+"</option>");
$(this).remove();
}
});
});
$('#btn-save').bind('click', function() {
$( "#btn-save").unbind()
$( "#btn-save" ).html("<div class='loading'>Saving ...</div>");
var items=[];
$("#select-to option").each(function() { items.push($(this).val()); });
$.ajax({
url: '/customize/',
dataType: 'json',
data: {
dashboards: items.join(","),
csrfmiddlewaretoken: "{{ csrf_token }}" // < here
},
type: 'POST',
complete: function () {
location.reload();
}
});
});
});
</script>