Skip to content

dream
dream
Commit 9a12864a authored by Sebastien Robin's avatar Sebastien Robin
Browse files
Options

basic drag/drop working for list of people

parent 3211cf7e
Hide whitespace changes
Inline Side-by-side
Showing with 94 additions and 41 deletions
dream/platform/__init__.py
View file @ 9a12864a
from flask import Flask, jsonify
from flask import request
from crossdomain import crossdomain
from util import deunicodeData
app = Flask(__name__)
@app.route("/")
......@@ -26,5 +27,15 @@ def someTest():
response =request.json
return jsonify(request.json)
@app.route("/setModel", methods=["POST", "OPTIONS"])
@crossdomain(origin='*')
def setModel():
app.logger.debug('setModel')
app.logger.debug("request.json: %r" % (request.json,))
model = request.json
app.logger.debug("model: %r" % (model,))
response =request.json
return jsonify(request.json)
if __name__ == "__main__":
main()
ui/css/demo-new.css
View file @ 9a12864a
......@@ -66,6 +66,26 @@ body {
background-color:#eaedef;
}
#available {
position: absolute;
width: 200px;
height: 200px;
border: 2px solid;
margin-top: 350px;
margin-left: 150px;
border-radius: 10px;
}
#not_available {
position: absolute;
width: 200px;
height: 200px;
border: 2px solid;
margin-top: 350px;
margin-left: 500px;
border-radius: 10px;
}
#sidebar {
margin-left:auto;
margin-right:auto;
......
ui/index.html
View file @ 9a12864a
......@@ -10,17 +10,20 @@
<div id="headerWrapper"><div id="header"></div></div>
<div id="main">
<div id="render"></div>
<!--div class="window" id="window1"><strong>1</strong><br/><br/></div>
<div class="window" id="window2"><strong>2</strong><br/><br/></div>
<div class="window" id="window3"><strong>3</strong><br/><br/></div>
<div class="window" id="window4"><strong>4</strong><br/><br/></div>
<div class="window" id="window5"><strong>5</strong><br/><br/></div>
<div class="window" id="window6"><strong>6</strong><br/><br/></div>
<div class="window" id="window7"><strong>Moulding</strong><br/><br/></div>
<div class="window" id="window8"><strong>8</strong><br/><br/></div>
<div class="window" id="window9"><strong>Packaging</strong><br/><br/></div>
<div class="window" id="window10"><strong>10</strong><br/><br/></div>
<div class="window" id="window11"><strong>Packaging</strong><br/><br/></div-->
<div id="available">
<ul>
</ul>
</div>
<div id="not_available">
<ul>
<li>Seb</li>
<li>Jerome</li>
<li>Jean-Paul</li>
<li>Ivor</li>
<li>George</li>
<li>Anna</li>
</ul>
</div>
</div>
<div id="sidebar">
<div id="explanation">
......
ui/src/flowchartConnectorsDemo.js
View file @ 9a12864a
Object.keys = function( obj ) {
var array = new Array();
for ( var prop in obj ) {
if ( obj.hasOwnProperty( prop ) ) {
array.push( prop );
}
}
return array;
};
;(function() {
window.jsPlumbDemo = {
......@@ -85,17 +74,17 @@ Object.keys = function( obj ) {
var graph_data = {}, i, i_length, render_dom, box, j, j_length,
style_string, line;
graph_data.box_list = [
{id: 'window1', title: '1', target_list: ['window2'], coordinate: {top: 10, left: 5}},
{id: 'window2', title: '2', target_list: ['window3'], coordinate: {top: 10, left: 15}},
{id: 'window3', title: '3', target_list: ['window7'], coordinate: {top: 10, left: 25}},
{id: 'window4', title: '4', target_list: ['window5'], coordinate: {top: 30, left: 5}},
{id: 'window5', title: '5', target_list: ['window6'], coordinate: {top: 30, left: 15}},
{id: 'window6', title: '6', target_list: ['window7'], coordinate: {top: 30, left: 25}},
{id: 'window7', title: 'Moulding', target_list: ['window8', 'window10'], coordinate: {top: 20, left: 35}},
{id: 'window8', title: '8', target_list: ['window9'], coordinate: {top: 10, left: 45}},
{id: 'window9', title: '9', coordinate: {top: 10, left: 55}},
{id: 'window10', title: '10', target_list: ['window11'], coordinate: {top: 30, left: 45}},
{id: 'window11', title: '11', coordinate: {top: 30, left: 55}},
{id: 'window1', title: '1', target_list: ['window2'], coordinate: {top: 5, left: 5}, style: {"background-color":"#FF0000"}},
{id: 'window2', title: '2', target_list: ['window3'], coordinate: {top: 5, left: 15}, style: {"background-color":"#FF0000"}},
{id: 'window3', title: '3', target_list: ['window7'], coordinate: {top: 5, left: 25}, style: {"background-color":"#FF0000"}},
{id: 'window4', title: '4', target_list: ['window5'], coordinate: {top: 20, left: 5}, style: {"background-color":"#FF0000"}},
{id: 'window5', title: '5', target_list: ['window6'], coordinate: {top: 20, left: 15}, style: {"background-color":"#FF0000"}},
{id: 'window6', title: '6', target_list: ['window7'], coordinate: {top: 20, left: 25}, style: {"background-color":"#FF0000"}},
{id: 'window7', title: 'Moulding', target_list: ['window8', 'window10'], coordinate: {top: 12, left: 35}, style: {"background-color":"#FF0000"}},
{id: 'window8', title: '8', target_list: ['window9'], coordinate: {top: 5, left: 45}, style: {"background-color":"#FF0000"}},
{id: 'window9', title: '9', coordinate: {top: 5, left: 55}, style: {"background-color":"#FF0000"}},
{id: 'window10', title: '10', target_list: ['window11'], coordinate: {top: 20, left: 45}, style: {"background-color":"#FF0000"}},
{id: 'window11', title: '11', coordinate: {top: 20, left: 55}, style: {"background-color":"#FF0000"}},
];
// Add boxes in the render div
......@@ -105,12 +94,18 @@ Object.keys = function( obj ) {
box = graph_data.box_list[i];
style_string = ""
if (box.coordinate !== undefined) {
style_string = 'style="';
_.each(box.coordinate, function(value, key, list) {
style_string = style_string + key + ':' + value + 'em;';
})
}
style_string = style_string + '"';
if (box.style !== undefined) {
_.each(box.style, function(value, key, list) {
style_string = style_string + key + ':' + value + ';';
})
}
if (style_string.length > 0) {
style_string = 'style="' + style_string + '"';
}
render_dom.append('<div class="window" id="' +
box.id + '" ' + style_string + '"><strong>' + box.title
+ '</strong><br/><br/></div>');
......@@ -129,9 +124,32 @@ Object.keys = function( obj ) {
}
}
// Make list of people draggable
$("#available li").draggable({appendTo: "body"});
$("#not_available li").draggable({appendTo: "body"});
$("#available").droppable({
drop: function(event, ui) {
console.log($(this), event, ui.draggable.text);
console.log(ui.draggable.text());
}
});
// Initial DEMO code : make all the window divs draggable
jsPlumb.draggable(jsPlumb.getSelector(".window"), { grid: [20, 20] });
// Now communicate our model to the simulation server
$.ajax({
url: "http://localhost:5000/setModel",
type: 'POST',
data: JSON.stringify(graph_data),
contentType: "application/json",
success: function(response) {
console.log("got json response",response);
},
error: function(xhr, textStatus, error) {
onError(error);
}
});
}
setTimeout(function () {
console.log("in timeout");
......@@ -139,6 +157,7 @@ Object.keys = function( obj ) {
}, 500);
})();
// Dummy code only to show json communication with server
(function() {
function sendData(url, data, onSuccess, onError) {
......@@ -156,10 +175,10 @@ Object.keys = function( obj ) {
}
});
}
setTimeout(function () {
console.log("in timeout");
sendData("http://localhost:5000/someTest", {"a": "b"},
function (response) {console.log("ok", response);},
function(foo, bar, baz) {console.log("failure");})
}, 1000);
// setTimeout(function () {
// console.log("in timeout");
// sendData("http://localhost:5000/someTest", {"a": "b"},
// function (response) {console.log("ok", response);},
// function(foo, bar, baz) {console.log("failure");})
// }, 1000);
})();
\ No newline at end of file
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