Commit e1c41757 authored by Sebastien Robin's avatar Sebastien Robin

gui prototype: implement display of recursive properties in dialogs

parent 06c0779c
......@@ -86,9 +86,7 @@
<p class="validateTips">All form fields are required.</p>
<form>
<fieldset>
<label for="Throughput">Throughput</label>
<input type="text" name="throughput" id="throughput" class="text ui-widget-content ui-corner-all" />
<fieldset id="dialog-fieldset">
</fieldset>
</form>
</div>
......@@ -99,10 +97,5 @@
<script src="src/dream.js"></script>
<script src="src/jsonPlumb.js"></script>
<script src="src/dream_launcher.js"></script>
<!-- demo helper code -->
<!--script src="src/demo-list.js"></script-->
<!--script src="src/demo-helper-jquery.js"></script-->
</body>
</html>
......@@ -41,6 +41,91 @@
});
};
priv.removeElement = function(element_id) {
priv.plumb.removeElement(element_id);
};
priv.initDialog = function(title, element_id) {
$( "#dialog-form" ).dialog({autoOpen: false});
};
priv.prepareDialogForElement = function(title, element_id) {
// code to allow changing values on connections. For now we assume
// that it is throughput. But we will need more generic code
var throughput = $( "#throughput" ),
allFields = $( [] ).add( throughput );
$(function() {
$( "input[type=submit]" )
.button()
.click(function( event ) {
event.preventDefault();
});
});
// Render fields for that particular element
var fieldset = $("#dialog-fieldset");
$("#dialog-fieldset").children().remove()
var render_field = function(property_list, prefix) {
if (prefix === undefined) {
prefix = "";
}
_.each(property_list, function(property, key, list) {
if (property._class === "Dream.Property") {
fieldset.append("<label>" + prefix + property.id + "</label>" +
'<input type="text" name="' + property.id + '" id="' + property.id +
'" class="text ui-widget-content ui-corner-all"/>')
} else if (property._class === "Dream.PropertyList") {
var next_prefix = prefix + property.id + ".";
render_field(property.property_list, next_prefix);
}
});
};
var element_id_prefix = element_id.split("_")[0];
var property_list = configuration[element_id_prefix].property_list || [];
console.log("property_list to be rendered", property_list);
render_field(property_list);
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
title: title || "",
buttons: {
Cancel: function() {
$( this ).dialog( "close" );
},
Delete: function() {
console.log("Going to delete $(this)", $(this));
priv.removeElement(element_id);
$( this ).dialog( "close" );
},
"Validate": function() {
var bValid = true, i, i_length, box;
allFields.removeClass( "ui-state-error" );
bValid = bValid && checkRegexp( throughput, /^([0-9])+$/, "Througput must be integer." );
if ( bValid ) {
// Update the model with new value
i_length = model.box_list.length;
for (i = 0; i < i_length; i++) {
box = model.box_list[i];
if (box.id === priv.box_id) {
box.throughput = parseInt(throughput.val(), 10);
}
}
priv.updateModel();
$( this ).dialog( "close" );
}
},
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
});
};
Object.defineProperty(that, "newElement", {
configurable: false,
enumerable: false,
......@@ -48,6 +133,13 @@
value: function (element) {
var element_id = element.id.split('_')[0]
priv.plumb.newElement(element, configuration[element_id]);
$("#" + element.id).bind('click', function() {
console.log("bind click on window", $(this));
//$("#dialog-form").attr("title", "bar");
$( "#dialog-form" ).dialog( "destroy" ) ;
priv.prepareDialogForElement(element.id, element.id);
$( "#dialog-form" ).dialog( "open" );
});
}
});
......@@ -59,6 +151,7 @@
priv.plumb = jsonPlumb.newJsonPlumb();
priv.plumb.start();
priv.displayTool();
priv.initDialog();
}
});
......
......@@ -7,8 +7,17 @@
var window_id = 1;
var element_id;
var id_container = {}; // to allow generating next ids, like Machine_1, Machine_2, etc
var property_container = {interarrivalTime: {id:"interarrivalTime",
property_list: [{id: "mean", type: "string", _class: "Dream.Property"},
{id: "distributionType", type: "string", _class: "Dream.Property"}],
_class: "Dream.PropertyList"},
entity: {id: "entity",
type:"string",
_class: "Dream.Property"},};
var configuration = {
"Dream-Source": { anchor: {RightMiddle: {}}},
"Dream-Source": { anchor: {RightMiddle: {}},
property_list: [property_container["interarrivalTime"], property_container["entity"]],
},
"Dream-Machine": { anchor: {RightMiddle: {}, LeftMiddle: {}, TopCenter: {}, BottomCenter: {}}},
"Dream-Queue": { anchor: {RightMiddle: {}, LeftMiddle: {}}},
"Dream-Exit": { anchor: {LeftMiddle: {}}},
......
......@@ -130,64 +130,10 @@
jsPlumb.removeAllEndpoints($("#" + element_id));
$("#" + element_id).remove();
delete(priv.element_container[element_id]);
delete(priv.preference_container[element_id]);
priv.onDataChange();
};
priv.initDialog = function(title, element_id) {
// code to allow changing values on connections. For now we assume
// that it is throughput. But we will need more generic code
var throughput = $( "#throughput" ),
allFields = $( [] ).add( throughput ),
tips = $( ".validateTips" );
$(function() {
$( "input[type=submit]" )
.button()
.click(function( event ) {
event.preventDefault();
});
});
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
title: title || "",
buttons: {
Cancel: function() {
$( this ).dialog( "close" );
},
Delete: function() {
console.log("Going to delete $(this)", $(this));
priv.removeElement(element_id);
$( this ).dialog( "close" );
},
"Validate": function() {
var bValid = true, i, i_length, box;
allFields.removeClass( "ui-state-error" );
bValid = bValid && checkRegexp( throughput, /^([0-9])+$/, "Througput must be integer." );
if ( bValid ) {
// Update the model with new value
i_length = model.box_list.length;
for (i = 0; i < i_length; i++) {
box = model.box_list[i];
if (box.id === priv.box_id) {
box.throughput = parseInt(throughput.val(), 10);
}
}
priv.updateModel();
$( this ).dialog( "close" );
}
},
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
});
};
Object.defineProperty(that, "start", {
configurable: false,
enumerable: false,
......@@ -196,7 +142,6 @@
priv.element_container = {};
priv.preference_container = {};
priv.initJsPlumb();
priv.initDialog();
}
});
......@@ -260,15 +205,6 @@
// Initial DEMO code : make all the window divs draggable
priv.draggable();
console.log("window selector", jsPlumb.getSelector(".window"));
jsPlumb.getSelector("#" + element.id).bind('click', function() {
console.log("bind click on window", $(this));
//$("#dialog-form").attr("title", "bar");
$( "#dialog-form" ).dialog( "destroy" ) ;
priv.initDialog(element.id, element.id);
$( "#dialog-form" ).dialog( "open" );
});
// Add endPoint to allow drawing connections
var color = "#00f";
var gradient_color = "#09098e";
......
Markdown is supported
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