gui prototype: implement display of recursive properties in dialogs

dream/platform/static/index.html

@@ -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>
+  </body>
 </html>

dream/platform/static/src/dream.js

@@ -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();
       }
     });
 

dream/platform/static/src/dream_launcher.js

@@ -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: {}}},

dream/platform/static/src/jsonPlumb.js

@@ -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";