Skip to content

GitLab

Commit 322ce65c authored by Anze Vavpetic's avatar Anze Vavpetic
Browse files

fixed problem with attribute property dialogs when running the widget multiple times in a row

parent d5a224aa
Hide whitespace changes
Inline Side-by-side
workflows/decision_support/templates/interactions/wsm.html
View file @ 322ce65c
......@@ -50,24 +50,6 @@
<button id="reset-button-{{widget.pk}}">Reset!</button>
</div>
<div id="edit-attribute-properties-{{widget.pk}}">
<form>
<fieldset>
<label for="direction">Maximize or minimize the attribute</label>
<select name="direction" id="dialog-att-direction-{{widget.pk}}" class="text ui-widget-content ui-corner-all">
<option value="max">Maximize</option>
<option value="min">Minimize</option>
</select>
<label for="lower-bound">Range lower bound</label>
<input type="text" name="lower-bound" id="dialog-att-lower-bound-{{widget.pk}}" class="text ui-widget-content ui-corner-all" />
<label for="upper-bound">Range upper bound</label>
<input type="text" name="upper-bound" id="dialog-att-upper-bound-{{widget.pk}}" class="text ui-widget-content ui-corner-all" />
</fieldset>
</form>
<div id="dialog-error-{{widget.pk}}" class="dialog-error">
</div>
</div>
<!-- Style -->
<style type="text/css">
.weight-slider {
......@@ -83,141 +65,168 @@
<!-- Behaviour -->
<script type="text/javascript">
// Dialog
$('#edit-attribute-properties-{{widget.pk}}').dialog({
autoOpen: false,
resizable: false,
height: 300,
modal: true,
buttons: {
'Cancel' : function() {
$(this).dialog('close');
},
'Apply' : function() {
$(this).dialog('close');
var attId = $(this).data('attId');
// Get the edited options.
var dir_select = $('#dialog-att-direction-{{widget.pk}}')
.find('option:selected');
var direction = dir_select
.text();
var dir_value = dir_select
.val();
var rangeMin = $('#dialog-att-lower-bound-{{widget.pk}}')
.val();
var rangeMax = $('#dialog-att-upper-bound-{{widget.pk}}')
.val();
rangeMin = parseFloat(rangeMin);
rangeMax = parseFloat(rangeMax);
console.log("dialog")
console.log(attId);
console.log(rangeMin);
// Check for sane range values
if (isNaN(rangeMin) || isNaN(rangeMax)) {
$('#dialog-error-{{widget.pk}}').text('Problem: Illegal range value.');
$(this).dialog('open');
return;
} else if (rangeMin > rangeMax) {
$('#dialog-error-{{widget.pk}}').text('Problem: Lower range value is larger than the upper.');
$(this).dialog('open');
return;
$(function() {
var createDialogForm = function() {
// Dynamically remove and add dialog div
// This overcomes some problems when running the widget more than once
if ($('#edit-attribute-properties-{{widget.pk}}').length > 0) {
return;
}
$('#widgetinteract-{{widget.pk}}').append(
'<div id="edit-attribute-properties-{{widget.pk}}">' +
'<form>' +
'<fieldset>' +
'<label for="direction">Maximize or minimize the attribute</label>' +
'<select name="direction" id="dialog-att-direction-{{widget.pk}}" class="text ui-widget-content ui-corner-all">' +
'<option value="max">Maximize</option>' +
'<option value="min">Minimize</option>' +
'</select>' +
'<label for="lower-bound">Range lower bound</label>' +
'<input type="text" name="lower-bound" id="dialog-att-lower-bound-{{widget.pk}}" class="text ui-widget-content ui-corner-all" />' +
'<label for="upper-bound">Range upper bound</label>' +
'<input type="text" name="upper-bound" id="dialog-att-upper-bound-{{widget.pk}}" class="text ui-widget-content ui-corner-all" />' +
'</fieldset>' +
'</form>' +
'<div id="dialog-error-{{widget.pk}}" class="dialog-error">' +
'</div>' +
'</div>');
};
createDialogForm();
// Dialog
$('#edit-attribute-properties-{{widget.pk}}').dialog({
autoOpen: false,
resizable: false,
height: 300,
modal: true,
buttons: {
'Cancel' : function() {
$(this).dialog('close');
},
'Apply' : function() {
$(this).dialog('close');
var attId = $(this).data('attId');
// Get the edited options.
var dir_select = $('#dialog-att-direction-{{widget.pk}}')
.find('option:selected');
var direction = dir_select
.text();
var dir_value = dir_select
.val();
var rangeMin = $('#dialog-att-lower-bound-{{widget.pk}}')
.val();
var rangeMax = $('#dialog-att-upper-bound-{{widget.pk}}')
.val();
rangeMin = parseFloat(rangeMin);
rangeMax = parseFloat(rangeMax);
// Check for sane range values
if (isNaN(rangeMin) || isNaN(rangeMax)) {
$('#dialog-error-{{widget.pk}}').text('Problem: Illegal range value.');
$(this).dialog('open');
return;
} else if (rangeMin > rangeMax) {
$('#dialog-error-{{widget.pk}}').text('Problem: Lower range value is larger than the upper.');
$(this).dialog('open');
return;
}
// Save them
$('#display-direction-' + attId).text(direction);
$('#display-rangeMin-' + attId).text(rangeMin.toFixed(2));
$('#display-rangeMax-' + attId).text(rangeMax.toFixed(2));
$('#direction-' + attId).val(dir_value);
$('#rangeMin-' + attId).val(rangeMin);
$('#rangeMax-' + attId).val(rangeMax);
// Clear errors
$('#dialog-error-{{widget.pk}}').text('');
}
}
});
// Save them
$('#display-direction-' + attId).text(direction);
$('#display-rangeMin-' + attId).text(rangeMin);
$('#display-rangeMax-' + attId).text(rangeMax);
$('#direction-' + attId).val(dir_value);
$('#rangeMin-' + attId).val(rangeMin);
$('#rangeMax-' + attId).val(rangeMax);
// Clear errors
$('#dialog-error-{{widget.pk}}').text('');
// Attach dialog openers for each attribute
{% for att, def_range in attributes %}
{% with count=forloop.counter0 pk=widget.pk %}
$('#edit-properties-{{pk}}-{{count}}').on('click', function(e){
e.preventDefault();
// Current values
var attId = '{{pk}}-{{count}}';
var direction = $('#display-direction-' + attId).text();
var rangeMin = $('#display-rangeMin-' + attId).text();
var rangeMax = $('#display-rangeMax-' + attId).text();
// Set the current values
$('#dialog-att-direction-{{pk}}')
.find('option')
.filter(function() {
return $(this).text() == direction;
})
.attr('selected', true);
$('#dialog-att-lower-bound-{{pk}}').val(rangeMin);
$('#dialog-att-upper-bound-{{pk}}').val(rangeMax);
$('#edit-attribute-properties-{{widget.pk}}')
.data('attId', attId)
.dialog('option', 'title', 'Properties of "{{att}}"')
.dialog('open');
});
// Slider code.
$("#slider-{{pk}}-{{count}}").slider({
value:0,
min:0,
max:100,
slide: function( event, ui ) {
$("#weight-{{pk}}-{{count}}").val($("#slider-{{pk}}-{{count}}").slider("value"));
},
stop: function ( event, ui ) {
$("#weight-{{pk}}-{{count}}").val($("#slider-{{pk}}-{{count}}").slider("value"));
}
}
});
});
// Slider code.
{% for att, def_range in attributes %}
{% with count=forloop.counter0 pk=widget.pk %}
$('#edit-properties-{{pk}}-{{count}}').on('click', function(e){
e.preventDefault();
// Current values
var attId = '{{pk}}-{{count}}';
var direction = $('#display-direction-' + attId).text();
var rangeMin = $('#display-rangeMin-' + attId).text();
var rangeMax = $('#display-rangeMax-' + attId).text();
// Set the current values
$('#dialog-att-direction-{{pk}}')
.find('option')
.filter(function() {
return $(this).text() == direction;
})
.attr('selected', true);
$('#dialog-att-lower-bound-{{pk}}').val(rangeMin);
$('#dialog-att-upper-bound-{{pk}}').val(rangeMax);
console.log('setup')
console.log(attId);
console.log(rangeMin);
$('#edit-attribute-properties-{{widget.pk}}')
.data('attId', attId)
.dialog('option', 'title', 'Properties of "{{att}}"')
.dialog('open');
});
// Change the slider position when manually editing the weight.
$("#weight-{{pk}}-{{count}}").on('change', function() {
$("#slider-{{pk}}-{{count}}").slider("value", $("#weight-{{pk}}-{{count}}").val());
});
$("#slider-{{pk}}-{{count}}").slider({
value:0,
min:0,
max:100,
slide: function( event, ui ) {
$("#weight-{{pk}}-{{count}}").val($("#slider-{{pk}}-{{count}}").slider("value"));
},
stop: function ( event, ui ) {
$("#weight-{{pk}}-{{count}}").val($("#slider-{{pk}}-{{count}}").slider("value"));
}
});
// Change the slider position when manually editing the weight.
$("#weight-{{pk}}-{{count}}").on('change', function() {
$("#slider-{{pk}}-{{count}}").slider("value", $("#weight-{{pk}}-{{count}}").val());
});
{% endwith %}
{% endfor %}
// Data table code.
$('#weight-sel-{{widget.pk}}').dataTable( {
"bJQueryUI": true,
"bPaginate" : false,
"bSort" : false,
"bFilter" : false
});
// Normalization code.
$("#normalize-button-{{widget.pk}}").button().click(function() {
var weight_elements = $('[id^="weight-{{widget.pk}}"]');
var weight_sum = 0;
weight_elements.each(function(index) {
weight_sum += parseFloat($(this).val());
{% endwith %}
{% endfor %}
// Data table code.
$('#weight-sel-{{widget.pk}}').dataTable( {
"bJQueryUI": true,
"bPaginate" : false,
"bSort" : false,
"bFilter" : false
});
if (weight_sum > 0) {
// Normalization code.
$("#normalize-button-{{widget.pk}}").button().click(function() {
var weight_elements = $('[id^="weight-{{widget.pk}}"]');
var weight_sum = 0;
weight_elements.each(function(index) {
//round(100 * parseFloat($(this).val()) / weight_sum)
$(this).val(Math.round(100 * parseFloat($(this).val()) / weight_sum));
weight_sum += parseFloat($(this).val());
});
if (weight_sum > 0) {
weight_elements.each(function(index) {
//round(100 * parseFloat($(this).val()) / weight_sum)
$(this).val(Math.round(100 * parseFloat($(this).val()) / weight_sum));
$(this).change();
});
}
});
// Reset button code.
$("#reset-button-{{widget.pk}}").button().click(function() {
$('[id^="weight-{{widget.pk}}"]').each(function() {
$(this).val(0);
$(this).change();
});
}
});
// Reset button code.
$("#reset-button-{{widget.pk}}").button().click(function() {
$('[id^="weight-{{widget.pk}}"]').each(function() {
$(this).val(0);
$(this).change();
});
});
</script>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment