Commit f3d69ed5 authored by Jérome Perrin's avatar Jérome Perrin

GUI: update static version

parent 389c6681
......@@ -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;
......
......@@ -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);
......
......@@ -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);
......
......@@ -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]) {
......
......@@ -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/>
......
This diff is collapsed.
This diff is collapsed.
......@@ -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;
......
......@@ -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 !== "") {
......
......@@ -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;
......
......@@ -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>
......
/*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);
\ No newline at end of file
})(window, document, RSVP, rJS, initGadgetMixin);
\ No newline at end of file
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment