improve spreadsheet.

dream/platform/static/index.html

@@ -81,46 +81,6 @@
       <div id="spreadsheet">
         <h4>Spreadsheet</h4>
         <div class="jQuerySheet">
-          <table title="Spreadsheet 1" class="jSheet ui-widget-content" border="1px" cellpadding="0" cellspacing="0">
-            <tbody>
-              <tr height="18" style="height: 18px;">
-                <td id="0_table0_cell_c0_r0" class="">ID</td>
-                <td id="0_table0_cell_c1_r0" class="">Class</td>
-                <td id="0_table0_cell_c2_r0" class="">Name</td>
-                <td id="0_table0_cell_c3_r0" class="">Sequence</td>
-                <td id="0_table0_cell_c4_r0" class="">Processing Times</td>
-                <td id="0_table0_cell_c5_r0" class="">Priority</td>
-                <td id="0_table0_cell_c6_r0" class="">Order Date</td>
-              </tr>
-              <tr height="18" style="height: 18px;">
-                <td id="0_table0_cell_c0_r1" class=""></td>
-                <td id="0_table0_cell_c1_r1" class=""></td>
-                <td id="0_table0_cell_c2_r1" class=""></td>
-                <td id="0_table0_cell_c3_r1" class=""></td>
-                <td id="0_table0_cell_c4_r1" class=""></td>
-                <td id="0_table0_cell_c5_r1" class=""></td>
-                <td id="0_table0_cell_c6_r1" class=""></td>
-              </tr>
-              <tr height="18" style="height: 18px;">
-                <td id="0_table0_cell_c0_r2" class=""></td>
-                <td id="0_table0_cell_c1_r2" class=""></td>
-                <td id="0_table0_cell_c2_r2" class=""></td>
-                <td id="0_table0_cell_c3_r2" class=""></td>
-                <td id="0_table0_cell_c4_r2" class=""></td>
-                <td id="0_table0_cell_c5_r2" class=""></td>
-                <td id="0_table0_cell_c6_r2" class=""></td>
-              </tr>
-              <tr height="18" style="height: 18px;">
-                <td id="0_table0_cell_c0_r3" class=""></td>
-                <td id="0_table0_cell_c1_r3" class=""></td>
-                <td id="0_table0_cell_c2_r3" class=""></td>
-                <td id="0_table0_cell_c3_r3" class=""></td>
-                <td id="0_table0_cell_c4_r3" class=""></td>
-                <td id="0_table0_cell_c5_r3" class=""></td>
-                <td id="0_table0_cell_c6_r3" class=""></td>
-              </tr>
-            </tbody>
-          </table>
         </div>
       </div>
     </div>

dream/platform/static/spreadsheet_template.html

+          <table title="Spreadsheet 1" class="jSheet ui-widget-content" border="1px" cellpadding="0" cellspacing="0">
+            <tbody>
+              <tr height="18" style="height: 18px;">
+                <td id="0_table0_cell_c0_r0" class="">ID</td>
+                <td id="0_table0_cell_c1_r0" class="">Class</td>
+                <td id="0_table0_cell_c2_r0" class="">Name</td>
+                <td id="0_table0_cell_c3_r0" class="">Sequence</td>
+                <td id="0_table0_cell_c4_r0" class="">Processing Times</td>
+                <td id="0_table0_cell_c5_r0" class="">Priority</td>
+                <td id="0_table0_cell_c6_r0" class="">Order Date</td>
+              </tr>
+              <tr height="18" style="height: 18px;">
+                <td id="0_table0_cell_c0_r1" class=""></td>
+                <td id="0_table0_cell_c1_r1" class=""></td>
+                <td id="0_table0_cell_c2_r1" class=""></td>
+                <td id="0_table0_cell_c3_r1" class=""></td>
+                <td id="0_table0_cell_c4_r1" class=""></td>
+                <td id="0_table0_cell_c5_r1" class=""></td>
+                <td id="0_table0_cell_c6_r1" class=""></td>
+              </tr>
+              <tr height="18" style="height: 18px;">
+                <td id="0_table0_cell_c0_r2" class=""></td>
+                <td id="0_table0_cell_c1_r2" class=""></td>
+                <td id="0_table0_cell_c2_r2" class=""></td>
+                <td id="0_table0_cell_c3_r2" class=""></td>
+                <td id="0_table0_cell_c4_r2" class=""></td>
+                <td id="0_table0_cell_c5_r2" class=""></td>
+                <td id="0_table0_cell_c6_r2" class=""></td>
+              </tr>
+              <tr height="18" style="height: 18px;">
+                <td id="0_table0_cell_c0_r3" class=""></td>
+                <td id="0_table0_cell_c1_r3" class=""></td>
+                <td id="0_table0_cell_c2_r3" class=""></td>
+                <td id="0_table0_cell_c3_r3" class=""></td>
+                <td id="0_table0_cell_c4_r3" class=""></td>
+                <td id="0_table0_cell_c5_r3" class=""></td>
+                <td id="0_table0_cell_c6_r3" class=""></td>
+              </tr>
+            </tbody>
+          </table>

dream/platform/static/src/dream.js

@@ -247,6 +247,7 @@
       manpy_dict['nodes'] = nodes;
       manpy_dict['edges'] = data['edges'];
       manpy_dict['general'] = data['general'];
+      manpy_dict['spreadsheet'] = data['spreadsheet'];
       return manpy_dict;
     };
 

dream/platform/static/src/dream_launcher.js

@@ -263,6 +263,13 @@
     });
 
     var loadData = function (data) {
+      // spreadsheet
+      var spreadsheet = data.spreadsheet;
+      if (spreadsheet !== undefined) {
+        var sheet = $('.jQuerySheet');
+        sheet.html($.sheet.dts.toTables.json(spreadsheet)).sheet();
+      }
+
       var preference = data.preference !== undefined ?
         data.preference : {};
       dream_instance.setPreferences(preference);
@@ -297,34 +304,6 @@
       } else {
         dream_instance.redraw();
       }
-
-      // spreadsheet
-      var default_config = {
-        id: "jquerysheet-div",
-        style: '',
-        jquerySheet: true,
-        jquerySheetCss: true,
-        parser: true,
-        jqueryUiCss: true,
-        scrollTo: false,
-        jQueryUI: false,
-        raphaelJs: false,
-        gRaphaelJs: false,
-        colorPicker: false,
-        colorPickerCss: false,
-        elastic: false,
-        advancedMath: false,
-        finance: false,
-        editable: true,
-        autoFiller: true
-      };
-
-      var sheet = $('.jQuerySheet');
-      var spreadsheet = data.spreadsheet;
-      if (spreadsheet !== undefined) {
-        sheet.html($.sheet.dts.toTables.json(spreadsheet));
-      }
-      sheet.sheet();
     };
     // Check if there is already data when we first load the page, if yes, then build graph from it
     jio.get({

dream/platform/static/src/jsonPlumb.js

@@ -106,6 +106,18 @@
       priv.draggable();
     };
 
+    priv.initSpreadSheet = function () {
+      var sheet = $('.jQuerySheet');
+      $.get('spreadsheet_template.html', function (data) {
+        sheet.html(data).sheet();
+        // Here we bind on the parent object because bind will be
+        // reset when we replace the contents by using html().
+        $('#spreadsheet').bind('sheetCellEdited', function () {
+          priv.onDataChange();
+        });
+      });
+    };
+
     priv.updateElementCoordinate = function (element_id, coordinate) {
       var coordinates = priv.preference_container['coordinates'] || {}, element;
       if (coordinate === undefined) {
@@ -313,6 +325,7 @@
       priv.preference_container = {};
       priv.general_container = {};
       priv.initJsPlumb();
+      priv.initSpreadSheet();
     };
 
     that.removeElement = function (element_id) {
@@ -329,6 +342,7 @@
       });
       // delete anything if still remains
       $("#render").children().remove();
+      priv.initSpreadSheet();
     };
 
     that.connect = function (source_id, target_id) {