Example on how to create a new tab

and ideas on how the configuration dict can be read from the json and how the gadgets can be instanciated with some configuration so that we have generic gadgets with some dynamic configuration in the json (for example spreadsheet columns)

Example on how to create a new tab
and ideas on how the configuration dict can be read from the json and how the gadgets can be instanciated with some configuration so that we have generic gadgets with some dynamic configuration in the json (for example spreadsheet columns)
5aa48435 · Jérome Perrin · a3ad96f5 · 5aa48435 · 5aa48435 · 5aa48435
Commit 5aa48435 authored Nov 13, 2014 by Jérome Perrin
3 changed files
--- a/dream/platform/src/dream/Input_viewSpreadsheet.html
+++ b/dream/platform/src/dream/Input_viewSpreadsheet.html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Edit Spreadsheet</title>
+    <script src="../<%= copy.rsvp.relative_dest %>" type="text/javascript"></script>
+    <script src="../<%= copy.renderjs.relative_dest %>" type="text/javascript"></script>
+    <script src="../<%= curl.jquery.relative_dest %>" type="text/javascript"></script>
+    <script src="../<%= curl.jquerymobilejs.relative_dest %>" type="text/javascript"></script>
+    <script src="mixin_gadget.js" type="text/javascript"></script>
+    <script src="Input_viewSpreadsheet.js" type="text/javascript"></script>
+  </head>
+  <body>
+    <div data-gadget-url="../handsontable/index.html"
+         data-gadget-scope="tableeditor"></div>
+        <h3> Hello ! </h3>
+    <form class="save_form">
+      <button type="submit" class="ui-btn ui-btn-b ui-btn-inline
+        ui-icon-edit ui-btn-icon-right">Save</button>
+    </form>
+  </body>
+</html>
--- a/dream/platform/src/dream/Input_viewSpreadsheet.js
+++ b/dream/platform/src/dream/Input_viewSpreadsheet.js
+/*global rJS, RSVP, initGadgetMixin, loopEventListener */
+(function (window, rJS, RSVP, initGadgetMixin, loopEventListener) {
+  "use strict";
+  // XXX it is always the same code to save ...
+  function saveSpreadsheet(evt) {
+    var gadget = this,
+      editor_data,
+      editor_gadget;
+    return new RSVP.Queue()
+      .push(function () {
+        // Prevent double click
+        if (evt) {
+          evt.target.getElementsByClassName("ui-btn")[0].disabled = true;
+        }
+        return gadget.getDeclaredGadget("tableeditor");
+      })
+      .push(function (tablegadget) {
+        editor_gadget = tablegadget;
+        return editor_gadget.getData();
+      })
+      .push(function (data) {
+        editor_data = data;
+        // Always get a fresh version, to prevent deleting spreadsheet & co
+        return gadget.aq_getAttachment({
+          "_id": gadget.props.jio_key,
+          "_attachment": "body.json"
+        });
+      })
+      .push(function (body) {
+        var data = JSON.parse(body);
+        data.tutorial_spreadsheet = JSON.parse(editor_data);
+        return gadget.aq_putAttachment({
+          "_id": gadget.props.jio_key,
+          "_attachment": "body.json",
+          "_data": JSON.stringify(data, null, 2),
+          "_mimetype": "application/json"
+        });
+      })
+      .push(function () {
+        if (evt) {
+          evt.target.getElementsByClassName("ui-btn")[0].disabled = false;
+        }
+      });
+  }
+  function waitForSave(gadget) {
+    return loopEventListener(
+      gadget.props.element.getElementsByClassName("save_form")[0],
+      'submit',
+      false,
+      saveSpreadsheet.bind(gadget)
+    );
+  }
+  var gadget_klass = rJS(window);
+  initGadgetMixin(gadget_klass);
+  gadget_klass
+    /////////////////////////////////////////////////////////////////
+    // Acquired methods
+    /////////////////////////////////////////////////////////////////
+    .declareAcquiredMethod("aq_getAttachment", "jio_getAttachment")
+    .declareAcquiredMethod("aq_putAttachment", "jio_putAttachment")
+    /////////////////////////////////////////////////////////////////
+    // declared methods
+    /////////////////////////////////////////////////////////////////
+    .declareMethod("render", function (options, configuration) {
+      var jio_key = options.id,
+        gadget = this;
+      gadget.props.jio_key = jio_key;
+      window.console.log(configuration);
+      return new RSVP.Queue()
+        .push(function () {
+          return RSVP.all([
+            gadget.aq_getAttachment({
+              "_id": jio_key,
+              "_attachment": "body.json"
+            }),
+            gadget.getDeclaredGadget("tableeditor")
+          ]);
+        })
+        .push(function (result_list) {
+          // XXX here, get options to create some columns,
+          // creating empty list from options
+          return result_list[1].render(
+            JSON.stringify(JSON.parse(result_list[0]).tutorial_spreadsheet),
+            { minSpareRows: 1,
+              onChange: function () {
+                if (gadget.timeout) {
+                  window.clearTimeout(gadget.timeout);
+                }
+                gadget.timeout = window.setTimeout(
+                  saveSpreadsheet.bind(gadget),
+                  100
+                );
+              }
+              }
+          );
+        });
+    })
+    .declareMethod("startService", function () {
+      var gadget = this;
+      return this.getDeclaredGadget("tableeditor")
+        .push(function (tableeditor) {
+          return RSVP.all([
+            tableeditor.startService(),
+            waitForSave(gadget)
+          ]);
+        });
+    });
+}(window, rJS, RSVP, initGadgetMixin, loopEventListener));
--- a/dream/platform/src/dream/index.js
+++ b/dream/platform/src/dream/index.js
@@ -34,6 +34,32 @@
        "type": "object_view",
        "title": "Production Line"
      },
+      "view_tutorial_spreadsheet": {
+        "gadget": "Input_viewSpreadsheet",
+        "type": "object_view",
+        "title": "Tutorial Spreadsheet",
+        "configuration":
+          {"columns": [
+            {
+              "name": "Date",
+              "type": "string",
+              "format": "date-time"
+            },
+            {
+              "name": "Machines",
+              "type": "string"
+            },
+            {
+              "name": "Start",
+              "type": "string"
+            },
+            {
+              "name": "Stop",
+              "type": "string"
+            }
+          ]
+            }
+      },
      "view_wip_part_spreadsheet": {
        "gadget": "Input_viewWipPartSpreadsheet",
        "type": "object_view",
@@ -509,6 +535,7 @@
          back_kw.id = options.id;
        }
      }
+      // XXX : read configuration json here to know the available actions.
      // Get the action information
      return gadget.declareGadget(
@@ -517,7 +544,8 @@
        .push(function (g) {
          page_gadget = g;
          if (page_gadget.render !== undefined) {
-            return page_gadget.render(options);
+            return page_gadget.render(options,
+              portal_types[portal_type][options.action].configuration);
          }
        }).push(function () {
          return RSVP.all([