GUI: update static version

dream/platform/static/dream/Input_viewProductionLine.js

@@ -2,6 +2,7 @@
 (function(window, rJS, RSVP, loopEventListener) {
     "use strict";
     var gadget_klass = rJS(window);
+    // TODO: save on parent gadget
     function saveGraph(evt) {
         var gadget = this;
         return new RSVP.Queue().push(function() {
@@ -11,23 +12,12 @@
             }
             return gadget.getDeclaredGadget("productionline_graph");
         }).push(function(graph_gadget) {
-            return graph_gadget.getData();
-        }).push(function(data) {
-            graph_data = data;
-            // Always get a fresh version, to prevent deleting spreadsheet & co
-            return gadget.aq_getAttachment({
-                _id: gadget.props.jio_key,
-                _attachment: "body.json"
-            });
+            return graph_gadget.getContent();
         }).push(function(body) {
-            var data = JSON.parse(body), json_graph_data = JSON.parse(graph_data);
-            data.nodes = json_graph_data.nodes;
-            data.edges = json_graph_data.edges;
-            data.preference = json_graph_data.preference;
             return gadget.aq_putAttachment({
                 _id: gadget.props.jio_key,
                 _attachment: "body.json",
-                _data: JSON.stringify(data, null, 2),
+                _data: JSON.stringify(JSON.parse(body), null, 2),
                 _mimetype: "application/json"
             });
         }).push(function() {
@@ -56,7 +46,7 @@
         }
         this.timeout = window.setTimeout(saveGraph.bind(this), 100);
     }).declareMethod("render", function(options) {
-        var jio_key = options.id, gadget = this;
+        var jio_key = options.id, gadget = this, data;
         gadget.props.jio_key = jio_key;
         return new RSVP.Queue().push(function() {
             /*jslint nomen: true*/
@@ -65,11 +55,12 @@
                 _attachment: "body.json"
             }), gadget.getDeclaredGadget("productionline_graph") ]);
         }).push(function(result_list) {
-            return result_list[1].render(result_list[0]);
+            data = result_list[0];
+            return result_list[1].render(data);
         }).push(function() {
             return gadget.getDeclaredGadget("productionline_toolbox");
         }).push(function(toolbox_gadget) {
-            toolbox_gadget.render();
+            toolbox_gadget.render(data);
         });
     }).declareMethod("startService", function() {
         var g = this, graph;

dream/platform/static/dream/Input_viewSimulation.js

@@ -84,20 +84,22 @@
     // Precompile the templates while loading the first gadget instance
     var gadget_klass = rJS(window);
     initGadgetMixin(gadget_klass);
-    gadget_klass.declareAcquiredMethod("aq_getAttachment", "jio_getAttachment").declareAcquiredMethod("aq_putAttachment", "jio_putAttachment").declareAcquiredMethod("aq_ajax", "jio_ajax").declareAcquiredMethod("aq_getConfigurationDict", "getConfigurationDict").declareAcquiredMethod("pleaseRedirectMyHash", "pleaseRedirectMyHash").declareAcquiredMethod("whoWantsToDisplayThisDocument", "whoWantsToDisplayThisDocument").declareMethod("render", function(options) {
-        var gadget = this, property_list, data;
+    gadget_klass.declareAcquiredMethod("aq_getAttachment", "jio_getAttachment").declareAcquiredMethod("aq_putAttachment", "jio_putAttachment").declareAcquiredMethod("aq_ajax", "jio_ajax").declareAcquiredMethod("pleaseRedirectMyHash", "pleaseRedirectMyHash").declareAcquiredMethod("whoWantsToDisplayThisDocument", "whoWantsToDisplayThisDocument").declareMethod("render", function(options) {
+        var gadget = this, data;
         this.props.jio_key = options.id;
         return gadget.aq_getAttachment({
             _id: gadget.props.jio_key,
             _attachment: "body.json"
         }).push(function(json) {
-            data = JSON.parse(json).general;
-            return gadget.aq_getConfigurationDict();
-        }).push(function(configuration_dict) {
-            property_list = configuration_dict["Dream-Configuration"].property_list;
-            return gadget.getDeclaredGadget("fieldset");
-        }).push(function(fieldset_gadget) {
-            return fieldset_gadget.render(property_list, data);
+            var application_configuration = {};
+            data = JSON.parse(json);
+            application_configuration = data.application_configuration.general || {};
+            return gadget.getDeclaredGadget("fieldset").push(function(fieldset_gadget) {
+                return fieldset_gadget.render({
+                    value: data.general,
+                    property_definition: application_configuration
+                });
+            });
         });
     }).declareMethod("startService", function() {
         return waitForRunSimulation(this);

dream/platform/static/dream/index.js

@@ -26,6 +26,7 @@
                 title: "Create Document"
             }
         },
+        // TODO: remove this once everything is merged.
         Input: {
             view: {
                 gadget: "Input_viewProductionLine",
@@ -35,50 +36,32 @@
             view_wip_part_spreadsheet: {
                 gadget: "Input_viewWipPartSpreadsheet",
                 type: "object_view",
-                title: "WIP Part Spreadsheet",
-                condition: function(gadget) {
-                    return gadget.props.configuration_dict["Dream-Configuration"].gui.wip_part_spreadsheet;
-                }
+                title: "WIP Part Spreadsheet"
             },
             view_shift_spreadsheet: {
                 gadget: "Input_viewShiftSpreadsheet",
                 type: "object_view",
-                title: "Shift Spreadsheet",
-                condition: function(gadget) {
-                    return gadget.props.configuration_dict["Dream-Configuration"].gui.shift_spreadsheet;
-                }
+                title: "Shift Spreadsheet"
             },
             view_available_capacity_spreadsheet: {
                 gadget: "Input_viewAvailableCapacitySpreadsheet",
                 type: "object_view",
-                title: "Available Capacity Spreadsheet",
-                condition: function(gadget) {
-                    return gadget.props.configuration_dict["Dream-Configuration"].gui.capacity_by_project_spreadsheet;
-                }
+                title: "Available Capacity Spreadsheet"
             },
             view_required_capacity_spreadsheet: {
                 gadget: "Input_viewRequiredCapacitySpreadsheet",
                 type: "object_view",
-                title: "Required Capacity Spreadsheet",
-                condition: function(gadget) {
-                    return gadget.props.configuration_dict["Dream-Configuration"].gui.capacity_by_station_spreadsheet;
-                }
+                title: "Required Capacity Spreadsheet"
             },
             view_dp_capacity_spreadsheet: {
                 gadget: "Input_viewDemandPlanningCapacitySpreadsheet",
                 type: "object_view",
-                title: "Demand Planning Required Capacity Spreadsheet",
-                condition: function(gadget) {
-                    return gadget.props.configuration_dict["Dream-Configuration"].gui.dp_capacity_spreadsheet;
-                }
+                title: "Demand Planning Required Capacity Spreadsheet"
             },
             view_dp_route_spreadsheet: {
                 gadget: "Input_viewDemandPlanningRouteSpreadsheet",
                 type: "object_view",
-                title: "Demand Planning Route Spreadsheet",
-                condition: function(gadget) {
-                    return gadget.props.configuration_dict["Dream-Configuration"].gui.dp_route_spreadsheet;
-                }
+                title: "Demand Planning Route Spreadsheet"
             },
             view_simu: {
                 gadget: "Input_viewSimulation",
@@ -100,66 +83,42 @@
             view: {
                 gadget: "Output_viewStationUtilisationGraph",
                 type: "object_view",
-                title: "Stations Utilization",
-                condition: function(gadget) {
-                    return gadget.props.configuration_dict["Dream-Configuration"].gui.station_utilisation_graph;
-                }
+                title: "Stations Utilization"
             },
             download_excel_spreadsheet: {
                 gadget: "Output_viewDownloadExcelSpreadsheet",
                 type: "object_view",
-                title: "Download Excel Spreadsheet",
-                condition: function(gadget) {
-                    return gadget.props.configuration_dict["Dream-Configuration"].gui.download_excel_spreadsheet;
-                }
+                title: "Download Excel Spreadsheet"
             },
             view_capacity_utilization: {
                 gadget: "Output_viewCapacityUtilisationGraph",
                 type: "object_view",
-                title: "Capacity Utilization",
-                condition: function(gadget) {
-                    return gadget.props.configuration_dict["Dream-Configuration"].gui.capacity_utilisation_graph;
-                }
+                title: "Capacity Utilization"
             },
             view_queue_stat: {
                 gadget: "Output_viewQueueStatGraph",
                 type: "object_view",
-                title: "Queues Statistics",
-                condition: function(gadget) {
-                    return gadget.props.configuration_dict["Dream-Configuration"].gui.queue_stat;
-                }
+                title: "Queues Statistics"
             },
             view_exit_stat: {
                 gadget: "Output_viewExitStatistics",
                 type: "object_view",
-                title: "Exit Statistics",
-                condition: function(gadget) {
-                    return gadget.props.configuration_dict["Dream-Configuration"].gui.exit_stat;
-                }
+                title: "Exit Statistics"
             },
             view_gantt: {
                 gadget: "Output_viewJobGantt",
                 type: "object_view",
-                title: "Job Gantt",
-                condition: function(gadget) {
-                    return gadget.props.configuration_dict["Dream-Configuration"].gui.job_gantt;
-                }
+                title: "Job Gantt"
             },
             view_schedule: {
                 gadget: "Output_viewJobScheduleSpreadsheet",
                 type: "object_view",
-                title: "Job Schedule",
-                condition: function(gadget) {
-                    return gadget.props.configuration_dict["Dream-Configuration"].gui.job_schedule_spreadsheet;
-                }
+                title: "Job Schedule"
             },
             view_debug: {
                 gadget: "Output_viewDebugJson",
                 type: "object_view",
-                title: "Debug JSON",
-                condition: function(gadget) {
-                    return gadget.props.configuration_dict["Dream-Configuration"].gui.debug_json;
-                }
+                title: "Debug JSON"
             }
         }
     }, panel_template, navigation_template, active_navigation_template, error_template, gadget_klass = rJS(window);
@@ -328,8 +287,6 @@
             id: param_list[0],
             result: param_list[1]
         });
-    }).allowPublicAcquisition("getConfigurationDict", function() {
-        return this.props.configuration_dict;
     }).ready(function() {
         if (panel_template === undefined) {
             // XXX Only works as root gadget
@@ -354,21 +311,12 @@
             $(panel).trigger("create");
         });
     }).ready(function(g) {
-        var jio_gadget;
         return g.getDeclaredGadget("jio").push(function(gadget) {
-            jio_gadget = gadget;
-            return jio_gadget.createJio({
+            return gadget.createJio({
                 type: "local",
                 username: "dream",
                 applicationname: "dream"
             });
-        }).push(function() {
-            // XXX Hardcoded relative URL
-            return jio_gadget.ajax({
-                url: "../../getConfigurationDict"
-            });
-        }).push(function(evt) {
-            g.props.configuration_dict = JSON.parse(evt.target.responseText);
         });
     }).declareMethod("render", function(options) {
         var gadget = this, back_kw = {
@@ -389,8 +337,24 @@
                 back_kw.id = options.id;
             }
         }
+        return gadget.getDeclaredGadget("jio").push(function(jio_gadget) {
+            if (options.id) {
+                return jio_gadget.getAttachment({
+                    _id: options.id,
+                    _attachment: "body.json"
+                });
+            }
+        }).push(function(result) {
+            var data;
+            if (result) {
+                data = JSON.parse(result);
+                gadget.props.data = data;
+                portal_types.Input = data.application_configuration.input;
+                portal_types.Output = data.application_configuration.output;
+            }
             // Get the action information
-        return gadget.declareGadget(portal_types[portal_type][options.action].gadget + ".html").push(function(g) {
+            return gadget.declareGadget(portal_types[portal_type][options.action].gadget + ".html");
+        }).push(function(g) {
             page_gadget = g;
             if (page_gadget.render !== undefined) {
                 return page_gadget.render(options);

dream/platform/static/fieldset/fieldset.js

@@ -9,47 +9,39 @@
     // Precompile the templates while loading the first gadget instance
     var gadget_klass = rJS(window), source = gadget_klass.__template_element.getElementById("label-template").innerHTML, label_template = Handlebars.compile(source);
     initGadgetMixin(gadget_klass);
-    gadget_klass.declareMethod("render", function(property_list, data, key) {
-        var gadget = this, queue, value, property;
-        gadget.key = key;
+    gadget_klass.declareMethod("render", function(options, node_id) {
+        // XXX node_id is added like a property so that one can change the node
+        // id
+        var gadget = this, queue;
+        gadget.props.key = options.key;
         // used for recursive fieldsets
         gadget.props.field_gadget_list = [];
-        function addField(property, value) {
+        function addField(property_id, property_definition, value) {
             var sub_gadget;
             queue.push(function() {
                 // XXX this is incorrect for recursive fieldsets.
                 // we should use nested fieldset with legend
                 gadget.props.element.insertAdjacentHTML("beforeend", label_template({
-                    "for": property.id,
-                    name: property.name || property.id
+                    "for": property_id,
+                    name: property_definition.name || property_definition.description || property_id
                 }));
-                if (property._class === "Dream.PropertyList") {
+                if (property_definition.type === "object") {
                     // Create a recursive fieldset for this key.
                     return gadget.declareGadget("../fieldset/index.html");
                 }
-                if (property.type === "number") {
+                if (property_definition.type === "number") {
                     return gadget.declareGadget("../number_field/index.html");
                 }
-                if (property.choice) {
+                if (property_definition.enum) {
                     return gadget.declareGadget("../list_field/index.html");
                 }
                 return gadget.declareGadget("../string_field/index.html");
             }).push(function(gg) {
                 sub_gadget = gg;
-                var choice = property.choice || [], default_opt = choice[0] ? [ choice[0][1] ] : [ "" ];
-                value = data[property.id] === undefined ? value : data[property.id];
-                if (gg.__title === "Fieldset") {
-                    // XXX there must be a better way instead of using __title ?
-                    return gg.render(property.property_list, value, property.id);
-                }
                 return sub_gadget.render({
-                    field_json: {
-                        title: property.description || "",
-                        key: property.id,
+                    key: property_id,
                     value: value,
-                        items: choice,
-                        "default": default_opt
-                    }
+                    property_definition: property_definition
                 });
             }).push(function() {
                 return sub_gadget.getElement();
@@ -59,10 +51,18 @@
             });
         }
         queue = new RSVP.Queue().push(function() {
-            Object.keys(property_list).forEach(function(i) {
-                property = property_list[i];
-                value = property._default === undefined ? "" : property._default;
-                addField(property, value);
+            if (node_id) {
+                addField("id", {
+                    type: "string"
+                }, node_id);
+            }
+            Object.keys(options.property_definition.properties).forEach(function(property_name) {
+                var property_definition = options.property_definition.properties[property_name], value = (options.value || {})[property_name] === undefined ? property_definition._default : options.value[property_name];
+                // XXX some properties are not editable
+                // XXX should not be defined here
+                if (property_name !== "coordinate" && property_name !== "_class") {
+                    addField(property_name, property_definition, value);
+                }
             });
         });
         return queue;
@@ -75,8 +75,8 @@
             return RSVP.all(promise_list);
         }).push(function(result_list) {
             var name, result = {}, content = result;
-            if (gadget.key) {
-                content = result[gadget.key] = {};
+            if (gadget.props.key) {
+                content = result[gadget.props.key] = {};
             }
             for (i = 0; i < result_list.length; i += 1) {
                 for (name in result_list[i]) {

dream/platform/static/jsplumb/index.html

@@ -3,13 +3,15 @@
   <head>
     <meta charset="utf-8">
     <link rel="stylesheet" href="../lib/jquery-ui.css">
+    <link rel="stylesheet" href="../lib/jquerymobile.css">
     <link rel="stylesheet" href="jsplumb.css">
 
     <script src="../lib/jquery.js"></script>
     <script src="../lib/jquery-ui.js"></script>
+    <script src="../lib/jquerymobile.js"></script>
     <script src="../lib/rsvp.min.js"></script>
     <script src="../lib/renderjs.min.js"></script>
-    <script src="../lib/jquery.jsplumb.min.js"></script>
+    <script src="../lib/jquery.jsplumb.js"></script>
     <script src="../lib/handlebars.min.js"></script>
 
     <script id="node-template" type="text/x-handlebars-template">
@@ -22,9 +24,9 @@
     </script>
 
     <template id="popup-edit-template">
-      <div id="node-edit-popup" data-position-to="origin">
+      <div id="edit-popup" data-position-to="origin">
         <div data-role="header" data-theme="a">
-          <h1 class="node_class">Node edition</h1>
+          <h1 class="node_class">Edit properties</h1>
           <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
         </div>
         <br/>

dream/platform/static/list_field/listfield.js

@@ -12,17 +12,18 @@
             g.element = element;
         });
     }).declareMethod("render", function(options) {
-        var select = this.element.getElementsByTagName("select")[0], i, template, field_json = options.field_json, tmp = "";
-        select.setAttribute("name", field_json.key);
-        for (i = 0; i < field_json.items.length; i += 1) {
-            if (field_json.items[i][1] === field_json.value) {
+        var select = this.element.getElementsByTagName("select")[0], i, template, tmp = "";
+        select.setAttribute("name", options.key);
+        for (i = 0; i < options.property_definition.enum.length; i += 1) {
+            if (options.property_definition.enum[i] === options.value) {
                 template = selected_option_template;
             } else {
                 template = option_template;
             }
+            // XXX value and text are always same in json schema
             tmp += template({
-                value: field_json.items[i][1],
-                text: field_json.items[i][0]
+                value: options.property_definition.enum[i],
+                text: options.property_definition.enum[i]
             });
         }
         select.innerHTML += tmp;

dream/platform/static/number_field/numberfield.js

@@ -6,10 +6,10 @@
             gadget.element = element;
         });
     }).declareMethod("render", function(options) {
-        var input = this.element.querySelector("input"), field_json = options.field_json || {};
-        input.setAttribute("value", field_json.value);
-        input.setAttribute("name", field_json.key);
-        input.setAttribute("title", field_json.title);
+        var input = this.element.querySelector("input");
+        input.setAttribute("value", options.value);
+        input.setAttribute("name", options.key);
+        input.setAttribute("title", options.title || options.key);
     }).declareMethod("getContent", function() {
         var input = this.element.querySelector("input"), result = {};
         if (input.value !== "") {

dream/platform/static/string_field/stringfield.js

@@ -6,10 +6,10 @@
             gadget.element = element;
         });
     }).declareMethod("render", function(options) {
-        var input = this.element.querySelector("input"), field_json = options.field_json || {};
-        input.setAttribute("value", field_json.value || "");
-        input.setAttribute("name", field_json.key);
-        input.setAttribute("title", field_json.title);
+        var input = this.element.querySelector("input");
+        input.setAttribute("value", options.value || "");
+        input.setAttribute("name", options.key);
+        input.setAttribute("title", options.title || options.key);
     }).declareMethod("getContent", function() {
         var input = this.element.querySelector("input"), result = {};
         result[input.getAttribute("name")] = input.value;

dream/platform/static/toolbox/index.html

@@ -5,21 +5,8 @@
     <link rel="stylesheet" href="../lib/jquery-ui.css">
     <link rel="stylesheet" href="toolbox.css">
 
-    <script src="../lib/jquery.js"></script>
-    <script src="../lib/jquery-ui.js"></script>
     <script src="../lib/rsvp.min.js"></script>
     <script src="../lib/renderjs.min.js"></script>
-    <script src="../lib/handlebars.min.js"></script>
-
-    <script id="tool-template" type="text/x-handlebars-template">
-      <div id="{{key}}"
-           class="tool {{key}}"
-           draggable="true">
-        {{name}}
-        <ul/>
-      </div>
-    </script>
-
     <script src="../dream/mixin_gadget.js"></script>
     <script src="../dream/mixin_promise.js"></script>
 

dream/platform/static/toolbox/toolbox.js

-/*global window, document, RSVP, rJS, Handlebars, initGadgetMixin*/
-(function(window, document, RSVP, rJS, Handlebars, initGadgetMixin) {
+/*global window, document, RSVP, rJS, initGadgetMixin*/
+(function(window, document, RSVP, rJS, initGadgetMixin) {
     "use strict";
     /*jslint nomen: true*/
-    var gadget_klass = rJS(window), tool_template_source = gadget_klass.__template_element.getElementById("tool-template").innerHTML, tool_template = Handlebars.compile(tool_template_source);
+    var gadget_klass = rJS(window);
     function waitForDragstart(tool) {
         var callback;
         function canceller() {
@@ -14,7 +14,7 @@
         function itsANonResolvableTrap(resolve, reject) {
             callback = function(evt) {
                 try {
-                    evt.dataTransfer.setData("text/html", tool.outerHTML);
+                    evt.dataTransfer.setData("application/json", tool.dataset.class_name);
                 } catch (e) {
                     reject(e);
                 }
@@ -24,22 +24,28 @@
         return new RSVP.Promise(itsANonResolvableTrap, canceller);
     }
     initGadgetMixin(gadget_klass);
-    gadget_klass.declareAcquiredMethod("getConfigurationDict", "getConfigurationDict").declareMethod("render", function() {
-        var g = this;
-        return g.getConfigurationDict().push(function(config_dict) {
-            var tools_container = document.createElement("div");
+    gadget_klass.declareMethod("render", function(json_data) {
+        var data = JSON.parse(json_data), tools_container = document.createElement("div");
+        /* display all nodes in the palette.
+       */
         tools_container.className = "tools-container";
-            Object.keys(config_dict).forEach(function(key) {
-                var name = config_dict[key].name || key.split("-")[1];
-                if (key !== "Dream-Configuration") {
-                    tools_container.innerHTML += tool_template({
-                        key: key,
-                        name: name
+        Object.keys(data.class_definition).forEach(function(key) {
+            var _class = data.class_definition[key], tool;
+            // XXX "expand" the json schema "allOF" etc
+            if (_class._class === "node") {
+                tool = document.createElement("div");
+                // XXX maybe allow to configure the class name ?
+                tool.className = "tool " + key;
+                tool.textContent = _class.name || key;
+                tool.draggable = true;
+                tool.dataset.class_name = JSON.stringify(key);
+                Object.keys(_class.css || {}).forEach(function(k) {
+                    tool.style[k] = _class.css[k];
                 });
+                tools_container.appendChild(tool);
             }
         });
-            g.props.element.querySelector(".tools").appendChild(tools_container);
-        });
+        this.props.element.querySelector(".tools").appendChild(tools_container);
     }).declareMethod("startService", function() {
         var promiseArray = [];
         [].forEach.call(this.props.element.querySelectorAll(".tool"), function(tool) {
@@ -47,4 +53,4 @@
         });
         return RSVP.all(promiseArray);
     });
-})(window, document, RSVP, rJS, Handlebars, initGadgetMixin);
+})(window, document, RSVP, rJS, initGadgetMixin);
\ No newline at end of file