working demo showing green boxes when at least 6 avaiable people

dream/platform/__init__.py

@@ -3,6 +3,7 @@ from flask import request
 from crossdomain import crossdomain
 from util import deunicodeData
 app = Flask(__name__)
+global model
 
 @app.route("/")
 def welcome():
@@ -30,12 +31,35 @@ def someTest():
 @app.route("/setModel", methods=["POST", "OPTIONS"])
 @crossdomain(origin='*')
 def setModel():
+  global model
   app.logger.debug('setModel')
   app.logger.debug("request.json: %r" % (request.json,))
+  #model = deunicodeData(request.json)
   model = request.json
   app.logger.debug("model: %r" % (model,))
-  response =request.json
-  return jsonify(request.json)
+  return "ok"
+
+@app.route("/setSimulationParameters", methods=["POST", "OPTIONS"])
+@crossdomain(origin='*')
+def setSimulationParameters():
+  app.logger.debug('setSimulationParameters')
+  parameter_dict = request.json
+  app.logger.debug("parameter_dict: %r" % (parameter_dict,))
+  box_to_enable_list = [1, 2, 3, 7, 8, 9]
+  to_enable = len([x for x in parameter_dict if parameter_dict[x]]) >= 6
+  for box in model["box_list"]:
+    if int(box["id"][len("window"):]) in box_to_enable_list:
+      box["enabled"] = to_enable
+    else:
+      box["enabled"] = False
+  return "ok"
+
+@app.route("/getModel", methods=["GET", "OPTIONS"])
+@crossdomain(origin='*')
+def getModel():
+  global model
+  app.logger.debug('getModel')
+  return jsonify(model)
 
 if __name__ == "__main__":
   main()

ui/index.html

@@ -11,17 +11,13 @@
         <div id="main">
 			<div id="render"></div>
       <div id="available">
+        Available
         <ul>
         </ul>
       </div>
       <div id="not_available">
+        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>

ui/src/flowchartConnectorsDemo.js

@@ -72,19 +72,20 @@
      // 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;
+         style_string, line, people_list, setSimulationParameters,
+         available_people = {};
      graph_data.box_list = [
-       {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"}},
+       {id: 'window1', title: '1', target_list: ['window2'], coordinate: {top: 5, left: 5}},
+       {id: 'window2', title: '2', target_list: ['window3'], coordinate: {top: 5, left: 15}},
+       {id: 'window3', title: '3', target_list: ['window7'], coordinate: {top: 5, left: 25}},
+       {id: 'window4', title: '4', target_list: ['window5'], coordinate: {top: 20, left: 5}},
+       {id: 'window5', title: '5', target_list: ['window6'], coordinate: {top: 20, left: 15}},
+       {id: 'window6', title: '6', target_list: ['window7'], coordinate: {top: 20, left: 25}},
+       {id: 'window7', title: 'Moulding', target_list: ['window8', 'window10'], coordinate: {top: 12, left: 35}},
+       {id: 'window8', title: '8', target_list: ['window9'], coordinate: {top: 5, left: 45}},
+       {id: 'window9', title: '9', coordinate: {top: 5, left: 55}},
+       {id: 'window10', title: '10', target_list: ['window11'], coordinate: {top: 20, left: 45}},
+       {id: 'window11', title: '11', coordinate: {top: 20, left: 55}},
      ];
 
      // Add boxes in the render div
@@ -124,13 +125,44 @@
        }
      }
 
-     // Make list of people draggable
+     //Fill list of people
+     people_list = ["Seb", "Jerome", "Jean-Paul", "Anna", "George", "Ivor", "Dipo", "Stephan"];
+     i_length = people_list.length;
+     for (i = 0; i < i_length; i++) {
+       $("#not_available ul").append("<li>" + people_list[i] + "</li>");
+     }
+
+     // Define ajax call to update list of available people
+     setSimulationParameters = function(parameters) {
+      $.ajax({
+        url: "http://localhost:5000/setSimulationParameters",
+        type: 'POST',
+        data: JSON.stringify(parameters),
+        contentType: "application/json",
+        success: function(response) {
+          console.log("got json response",response);
+        },
+        error: function(xhr, textStatus, error) {
+          onError(error);
+        }
+      });
+     };
+     // Make list of people draggable, update list of people depending
+     // to make them available or not
      $("#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());
+         available_people[ui.draggable.text()] = true;
+         console.log(available_people);
+         setSimulationParameters(available_people);
+       }
+     });
+     $("#not_available").droppable({
+       drop: function(event, ui) {
+         available_people[ui.draggable.text()] = false;
+         console.log(available_people);
+         setSimulationParameters(available_people);
        }
      });
 
@@ -150,6 +182,47 @@
          onError(error);
        }
      });
+
+     // Utility function to update the style of a box
+     var updateBoxStyle = function (box_id, style) {
+       var box;
+       box = $("#" + box_id);
+       _.each(style, function(value, key, list) {
+         box.css(key, value);
+       })
+     };
+
+     // 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) {
+         var i, i_length, box;
+         i_length = model.box_list.length;
+         console.log("model", model);
+         for (i = 0; i < i_length; i++) {
+           //, style: {"background-color":"#FF0000"}
+           box = model.box_list[i];
+           if (box.enabled) {
+             updateBoxStyle(box.id, {"background-color": "#5EFB6E"});
+           } else {
+             updateBoxStyle(box.id, {"background-color": "#FF0000"});
+           }
+         }
+       };
+       $.ajax({
+         url: "http://localhost:5000/getModel",
+         type: 'GET',
+         success: function(response) {
+           refreshGraph(response);
+         },
+         error: function(xhr, textStatus, error) {
+           onError(error);
+         }
+       });
+
+       setTimeout(getModel, 1000);
+     };
+     setTimeout(getModel, 1000);
   }
   setTimeout(function () {
     console.log("in timeout");