diff --git a/plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/js/controllers/MainController.js b/plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/js/controllers/MainController.js
index 9cd3968e2769e3b08c0b1bc5cbae59bc23898d19..10028f28c7f4eeb2bdcf4c7ff2c38a468ec61045 100644
--- a/plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/js/controllers/MainController.js
+++ b/plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/js/controllers/MainController.js
@@ -359,7 +359,7 @@ function MainController(profile) {
this._showExperimentPage = function(experiment) {
//Show Form
- var experimentForm = new ExperimentForm("mainContainer", this, experiment, ExperimentFormMode.VIEW);
+ var experimentForm = new ExperimentForm("mainContainer", this, experiment, FormMode.VIEW);
experimentForm.init();
this.currentView = experimentForm;
}
diff --git a/plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/js/util/FormUtil.js b/plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/js/util/FormUtil.js
index a0c6bc9f01da8395239426993f04a48f6b54f91a..ba756edbfd91e0ebe24d3812faa1a4fa4f7a5bc0 100644
--- a/plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/js/util/FormUtil.js
+++ b/plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/js/util/FormUtil.js
@@ -1,5 +1,15 @@
+var FormMode = {
+ CREATE : 0,
+ EDIT : 1,
+ VIEW : 2
+}
+
var FormUtil = new function() {
this.profile = null;
+
+ //
+ // Form css classes
+ //
this.formColumClass = 'col-md-12'
this.labelColumnClass = 'col-md-2';
this.controlColumnClass = 'col-md-6';
@@ -30,6 +40,9 @@ var FormUtil = new function() {
return $component;
}
+ //
+ // Get Field with container to obtain a correct layout
+ //
this.getFieldForComponentWithLabel = function($component, label) {
var $fieldset = $('<div>');
@@ -53,7 +66,7 @@ var FormUtil = new function() {
}
this.getFieldForLabelWithText = function(label, text) {
- var $fieldset = $('<fieldset>');
+ var $fieldset = $('<div>');
var $controlGroup = $('<div>', {class : 'form-group'});
var $controlLabel = $('<label>', {class : 'control-label ' + this.labelColumnClass}).text(label + ":");
@@ -69,7 +82,10 @@ var FormUtil = new function() {
return $fieldset;
}
-
+
+ //
+ // Get Field from property
+ //
this.getFieldForPropertyType = function(propertyType) {
var $component = null;
if (propertyType.dataType === "BOOLEAN") {
@@ -107,6 +123,9 @@ var FormUtil = new function() {
return $component;
}
+ //
+ // Form Fields
+ //
this._getBooleanField = function(id, alt) {
return $('<div>', {'class' : 'checkbox'}).append($('<input>', {'type' : 'checkbox', 'id' : id, 'alt' : alt, 'placeholder' : alt }));
}
diff --git a/plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/js/views/ExperimentForm.js b/plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/js/views/ExperimentForm.js
index b41ae00eba754d8755c39921f3e18a6f7d7aaabc..6775421812a0fe54a5c767e9b495169f2298d377 100644
--- a/plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/js/views/ExperimentForm.js
+++ b/plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/js/views/ExperimentForm.js
@@ -13,18 +13,12 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-
-ExperimentFormMode = {
- CREATE : 0,
- EDIT : 1,
- VIEW : 2
-}
-
function ExperimentForm(containerId, mainController, experiment, mode) {
this._containerId = containerId;
this._mainController = mainController;
this._experiment = experiment;
this._mode = mode;
+ this.isFormDirty = false;
this.init = function() {
this.repaint();
@@ -35,7 +29,7 @@ function ExperimentForm(containerId, mainController, experiment, mode) {
$("#" + this._containerId).empty();
var $form = $("<div>", { "class" : "row"});
- var $formColumn = $("<div>", { "class" : "col-md-12"});
+ var $formColumn = $("<div>", { "class" : FormUtil.formColumClass + " form-horizontal", 'role' : "form"});
$form.append($formColumn);
@@ -43,22 +37,17 @@ function ExperimentForm(containerId, mainController, experiment, mode) {
// Title
//
var $formTitle = null;
- if(this._mode === ExperimentFormMode.VIEW || this._mode === ExperimentFormMode.EDIT) {
- $formTitle = $("<h1>").append("Experiment " + this._experiment.identifier);
+ if(this._mode === FormMode.VIEW || this._mode === FormMode.EDIT) {
+ $formTitle = $("<h2>").append("Experiment " + this._experiment.identifier);
} else {
- $formTitle = $("<h1>").append("Create " + this._experiment.experimentTypeCode);
+ $formTitle = $("<h2>").append("Create " + this._experiment.experimentTypeCode);
}
$formColumn.append($formTitle);
- //
- // Metadata Fields
- //
- var experimentType = this._mainController.profile.getExperimentTypeForExperimentTypeCode(this._experiment.experimentTypeCode);
-
//
// Create Sub Experiment
//
- if(this._mode === ExperimentFormMode.VIEW) {
+ if(this._mode === FormMode.VIEW) {
var $createSubExpBtn = $("<a>", { "class" : "btn btn-default"}).append("Create Sub Experiment");
$createSubExpBtn.click(function() {
var $dropdown = FormUtil.getSampleTypeDropdown("sampleTypeDropdown", true);
@@ -79,8 +68,71 @@ function ExperimentForm(containerId, mainController, experiment, mode) {
Util.unblockUI();
});
});
- $formColumn.append($createSubExpBtn);
+ $formTitle.append(" ");
+ $formTitle.append($createSubExpBtn);
+ }
+
+ //
+ // Metadata Identification
+ //
+ var $identificationInfo = $('<div>').append($('<legend>').text("Identification Info"));
+ $formColumn.append($identificationInfo);
+
+ var identifierParts = this._experiment.identifier.split("/");
+
+ $formColumn.append(FormUtil.getFieldForLabelWithText("Type", this._experiment.experimentTypeCode));
+ $formColumn.append(FormUtil.getFieldForLabelWithText("Project", identifierParts[2]));
+
+ if(this._mode === FormMode.VIEW || this._mode === FormMode.EDIT) {
+ $formColumn.append(FormUtil.getFieldForLabelWithText("Code", identifierParts[3]));
+ $formColumn.append(FormUtil.getFieldForLabelWithText("Registrator", this._experiment.registrationDetails.userId));
+ $formColumn.append(FormUtil.getFieldForLabelWithText("Registration Date", (new Date(this._experiment.registrationDetails.registrationDate)).toLocaleString()));
+ } else if(this._mode === FormMode.CREATE){
+ var $codeField = FormUtil._getInputField("text", "code", "code", null, true);
+ $formColumn.append(FormUtil.getFieldForComponentWithLabel($codeField, "Code"));
}
+
+ //
+ // Metadata Fields
+ //
+ var experimentType = this._mainController.profile.getExperimentTypeForExperimentTypeCode(this._experiment.experimentTypeCode);
+
+ for(var i = 0; i < experimentType.propertyTypeGroups.length; i++) {
+ var propertyTypeGroup = experimentType.propertyTypeGroups[i];
+
+ var $fieldset = $('<div>');
+ var $legend = $('<legend>');
+ $fieldset.append($legend);
+
+ if(propertyTypeGroup.name) {
+ $legend.text(propertyTypeGroup.name);
+ } else if(experimentType.propertyTypeGroups.length === 1) { //Only when there is only one group without name to render it with a default title.
+ $legend.text("Metadata Fields");
+ } else {
+ $legend.remove();
+ }
+
+ for(var j = 0; j < propertyTypeGroup.propertyTypes.length; j++) {
+ var propertyType = propertyTypeGroup.propertyTypes[j];
+
+ var $controlGroup = null;
+
+ if(this._mode === FormMode.VIEW) {
+ $controlGroup = FormUtil.getFieldForLabelWithText(propertyType.label, this._experiment.properties[propertyType.code]);
+ } else {
+ var $component = FormUtil.getFieldForPropertyType(propertyType);
+ $component.change(function(event) {
+ localInstance.isFormDirty = true;
+ });
+ $controlGroup = FormUtil.getFieldForComponentWithLabel($component, propertyType.label);
+ }
+
+ $fieldset.append($controlGroup);
+ }
+
+ $formColumn.append($fieldset);
+ }
+
$("#" + this._containerId).append($form);
}
}
\ No newline at end of file