Skip to content

dream
dream
Commit 5df21e0f authored by Sebastien Robin's avatar Sebastien Robin
Browse files
Options

add almost working dialog to update graph values

parent 5408320c
Hide whitespace changes
Inline Side-by-side
Showing with 115 additions and 14 deletions
ui/css/demo-new.css
View file @ 5df21e0f
......@@ -86,6 +86,20 @@ body {
border-radius: 10px;
}
/* Setting for dialog */
label, input { display:block; }
input.text { margin-bottom:12px; width:95%; padding: .4em; }
fieldset { padding:0; border:0; margin-top:25px; }
h1 { font-size: 1.2em; margin: .6em 0; }
div#users-contain { width: 350px; margin: 20px 0; }
div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
.ui-dialog .ui-state-error { padding: .3em; }
.validateTips { border: 1px solid transparent; padding: 0.3em; }
/* End of dialog setting */
li { margin: 3px;
/*padding: 1px;*/
/*text-align: -webkit-match-parent;*/
......
ui/index.html
View file @ 5df21e0f
......@@ -4,6 +4,7 @@
<title>jsPlumb 1.4.0 - flowchart connectors demonstration - jQuery</title>
<link rel="stylesheet" href="css/demo-new.css">
<link rel="stylesheet" href="css/flowchartDemo.css">
<link rel="stylesheet" href="css/jquery-ui.css">
</head>
<body data-demo-id="flowchartConnectorsDemo" data-library="jquery">
......@@ -23,12 +24,23 @@
</div>
<div id="sidebar">
<div id="explanation">
<p>This is a demonstration of Flowchart connectors</p>
<p>Hover over connections to highlight them, click to delete. </p>
<p>Drag new connections from blue dots to green dots. You can also drag connections from green dots onto other green dots or back onto themselves.</p>
<p>This demonstration uses jsPlumb 1.4.0, jQuery 1.8.1 and jQuery UI 1.8.23.</p>
<p>This is a demonstration of Flowchart combined with simulation.</p>
<p>Drag not available people to the box "Available". If there is enough workers, a green path will be displayed on the Flowchart.</p>
<p>Every time there is change to the list of available/not available people, a simulation server get informations and process new calculation.</p>
<p>For now, there is no real simulation, only some little code to make this demo working</p>
<p>This demonstration uses jsPlumb 1.4.0, jQuery 1.8.1 and jQuery UI 1.8.23.</p>
</div>
</div>
<div id="dialog-form" title="Change Througput">
<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>
</form>
</div>
<!-- DEP -->
<script type="text/javascript" src="lib/underscore-min.js"></script>
......
ui/src/flowchartConnectorsDemo.js
View file @ 5df21e0f
;(function() {
var throughput = $( "#throughput" ),
allFields = $( [] ).add( throughput ),
tips = $( ".validateTips" ),
dialog_connection;
function updateTips( t ) {
tips
.text( t )
.addClass( "ui-state-highlight" );
setTimeout(function() {
tips.removeClass( "ui-state-highlight", 1500 );
}, 500 );
}
function checkLength( o, n, min, max ) {
if ( o.val().length > max || o.val().length < min ) {
o.addClass( "ui-state-error" );
updateTips( "Length of " + n + " must be between " +
min + " and " + max + "." );
return false;
} else {
return true;
}
}
function checkRegexp( o, regexp, n ) {
if ( !( regexp.test( o.val() ) ) ) {
o.addClass( "ui-state-error" );
updateTips( n );
return false;
} else {
return true;
}
}
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Validate": function() {
var bValid = true;
allFields.removeClass( "ui-state-error" );
console.log("going to check troughput val", throughput.val());
bValid = bValid && checkRegexp( throughput, /^([0-9])+$/, "Througput must be integer." );
if ( bValid ) {
console.log("new value is ok...", throughput.val());
console.log("dialog_connection", dialog_connection);
$( this ).dialog( "close" );
}
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
});
window.jsPlumbDemo = {
init : function() {
......@@ -19,14 +82,14 @@
length:14,
foldback:0.8
} ],
[ "Label", { label:"FOO", id:"label" }]
//[ "Label", { label:"FOO", id:"label" }]
],
Anchor: "Continuous",
Connector: ["StateMachine", { curviness:20 }],
});
init = function(connection) {
connection.getOverlay("label").setLabel(connection.sourceId.substring(6) + "-" + connection.targetId.substring(6));
//connection.getOverlay("label").setLabel(connection.sourceId.substring(6) + "-" + connection.targetId.substring(6));
connection.bind("editCompleted", function(o) {
if (typeof console != "undefined")
console.log("connection edited. path is now ", o.path);
......@@ -46,8 +109,11 @@
// listen for clicks on connections, and offer to delete connections on click.
//
jsPlumb.bind("click", function(conn, originalEvent) {
if (confirm("Delete connection from " + conn.sourceId + " to " + conn.targetId + "?"))
jsPlumb.detach(conn);
//if (confirm("Delete connection from " + conn.sourceId + " to " + conn.targetId + "?"))
// jsPlumb.detach(conn);
console.log("user click connection", conn);
dialog_connection = conn;
$( "#dialog-form" ).dialog( "open" );
});
jsPlumb.bind("connectionDrag", function(connection) {
......@@ -68,12 +134,15 @@
})();
(function() {
function displayGraph() {
function displayGraph() {
// So instead of having html filled with data, we will use
// a structure (like if we got it from json) and we will render it
var graph_data = {}, i, i_length, render_dom, box, j, j_length,
style_string, line, people_list, setSimulationParameters,
available_people = {};
available_people = {}, onError;
var onError = function(error) {
console.log("Error", error);
};
graph_data.box_list = [
{id: 'window1', title: 'attach1', target_list: ['window2'], coordinate: {top: 5, left: 5}},
{id: 'window2', title: 'attach2', target_list: ['window3'], coordinate: {top: 5, left: 15}},
......@@ -120,7 +189,7 @@
if (box.target_list !== undefined) {
j_length = box.target_list.length;
for (j=0; j < j_length; j++) {
line = jsPlumb.connect({source:box.id, target: box.target_list[j]});
line = jsPlumb.connect({source:box.id, target: box.target_list[j], label: "foo"});
// Example to change line color
// line.setPaintStyle({strokeStyle:"#42a62c", lineWidth:2 });
}
......@@ -199,16 +268,22 @@
if (worker !== undefined && worker !== null) {
html_string += "<br> (" + worker + ")";
}
box.html(html_string)
box.html(html_string);
};
// Then ask the server from time to time for an update of graph based
// on the result of some simulation
var getModel = function () {
var refreshGraph = function(model) {
//console.log("model", model);
var i, i_length, box;
//console.log("before i_length");
//console.log("model", model);
//console.log(typeof(model));
//console.log("model.box_list", model["box_list"]);
i_length = model.box_list.length;
console.log("model", model);
//console.log("after i_length");
//console.log("model", model);
for (i = 0; i < i_length; i++) {
//, style: {"background-color":"#FF0000"}
box = model.box_list[i];
......
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7