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
Show 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 Flask, jsonify
from flask import request from flask import request
from crossdomain import crossdomain from crossdomain import crossdomain
from util import deunicodeData
app = Flask(__name__) app = Flask(__name__)
@app.route("/") @app.route("/")
...@@ -26,5 +27,15 @@ def someTest(): ...@@ -26,5 +27,15 @@ def someTest():
response =request.json response =request.json
return jsonify(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__": if __name__ == "__main__":
main() main()
ui/css/demo-new.css
View file @ 9a12864a
...@@ -66,6 +66,26 @@ body { ...@@ -66,6 +66,26 @@ body {
background-color:#eaedef; 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 { #sidebar {
margin-left:auto; margin-left:auto;
margin-right:auto; margin-right:auto;
......
ui/index.html
View file @ 9a12864a
...@@ -10,17 +10,20 @@ ...@@ -10,17 +10,20 @@
<div id="headerWrapper"><div id="header"></div></div> <div id="headerWrapper"><div id="header"></div></div>
<div id="main"> <div id="main">
<div id="render"></div> <div id="render"></div>
<!--div class="window" id="window1"><strong>1</strong><br/><br/></div> <div id="available">
<div class="window" id="window2"><strong>2</strong><br/><br/></div> <ul>
<div class="window" id="window3"><strong>3</strong><br/><br/></div> </ul>
<div class="window" id="window4"><strong>4</strong><br/><br/></div> </div>
<div class="window" id="window5"><strong>5</strong><br/><br/></div> <div id="not_available">
<div class="window" id="window6"><strong>6</strong><br/><br/></div> <ul>
<div class="window" id="window7"><strong>Moulding</strong><br/><br/></div> <li>Seb</li>
<div class="window" id="window8"><strong>8</strong><br/><br/></div> <li>Jerome</li>
<div class="window" id="window9"><strong>Packaging</strong><br/><br/></div> <li>Jean-Paul</li>
<div class="window" id="window10"><strong>10</strong><br/><br/></div> <li>Ivor</li>
<div class="window" id="window11"><strong>Packaging</strong><br/><br/></div--> <li>George</li>
<li>Anna</li>
</ul>
</div>
</div> </div>
<div id="sidebar"> <div id="sidebar">
<div id="explanation"> <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() { ;(function() {
window.jsPlumbDemo = { window.jsPlumbDemo = {
...@@ -85,17 +74,17 @@ Object.keys = function( obj ) { ...@@ -85,17 +74,17 @@ Object.keys = function( obj ) {
var graph_data = {}, i, i_length, render_dom, box, j, j_length, var graph_data = {}, i, i_length, render_dom, box, j, j_length,
style_string, line; style_string, line;
graph_data.box_list = [ graph_data.box_list = [
{id: 'window1', title: '1', target_list: ['window2'], coordinate: {top: 10, left: 5}}, {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: 10, left: 15}}, {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: 10, left: 25}}, {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: 30, left: 5}}, {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: 30, left: 15}}, {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: 30, left: 25}}, {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: 20, left: 35}}, {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: 10, left: 45}}, {id: 'window8', title: '8', target_list: ['window9'], coordinate: {top: 5, left: 45}, style: {"background-color":"#FF0000"}},
{id: 'window9', title: '9', coordinate: {top: 10, left: 55}}, {id: 'window9', title: '9', coordinate: {top: 5, left: 55}, style: {"background-color":"#FF0000"}},
{id: 'window10', title: '10', target_list: ['window11'], coordinate: {top: 30, left: 45}}, {id: 'window10', title: '10', target_list: ['window11'], coordinate: {top: 20, left: 45}, style: {"background-color":"#FF0000"}},
{id: 'window11', title: '11', coordinate: {top: 30, left: 55}}, {id: 'window11', title: '11', coordinate: {top: 20, left: 55}, style: {"background-color":"#FF0000"}},
]; ];
// Add boxes in the render div // Add boxes in the render div
...@@ -105,12 +94,18 @@ Object.keys = function( obj ) { ...@@ -105,12 +94,18 @@ Object.keys = function( obj ) {
box = graph_data.box_list[i]; box = graph_data.box_list[i];
style_string = "" style_string = ""
if (box.coordinate !== undefined) { if (box.coordinate !== undefined) {
style_string = 'style="';
_.each(box.coordinate, function(value, key, list) { _.each(box.coordinate, function(value, key, list) {
style_string = style_string + key + ':' + value + 'em;'; 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="' + render_dom.append('<div class="window" id="' +
box.id + '" ' + style_string + '"><strong>' + box.title box.id + '" ' + style_string + '"><strong>' + box.title
+ '</strong><br/><br/></div>'); + '</strong><br/><br/></div>');
...@@ -129,9 +124,32 @@ Object.keys = function( obj ) { ...@@ -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 // Initial DEMO code : make all the window divs draggable
jsPlumb.draggable(jsPlumb.getSelector(".window"), { grid: [20, 20] }); 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 () { setTimeout(function () {
console.log("in timeout"); console.log("in timeout");
...@@ -139,6 +157,7 @@ Object.keys = function( obj ) { ...@@ -139,6 +157,7 @@ Object.keys = function( obj ) {
}, 500); }, 500);
})(); })();
// Dummy code only to show json communication with server
(function() { (function() {
function sendData(url, data, onSuccess, onError) { function sendData(url, data, onSuccess, onError) {
...@@ -156,10 +175,10 @@ Object.keys = function( obj ) { ...@@ -156,10 +175,10 @@ Object.keys = function( obj ) {
} }
}); });
} }
setTimeout(function () { // setTimeout(function () {
console.log("in timeout"); // console.log("in timeout");
sendData("http://localhost:5000/someTest", {"a": "b"}, // sendData("http://localhost:5000/someTest", {"a": "b"},
function (response) {console.log("ok", response);}, // function (response) {console.log("ok", response);},
function(foo, bar, baz) {console.log("failure");}) // function(foo, bar, baz) {console.log("failure");})
}, 1000); // }, 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