Skip to content
Snippets Groups Projects
Commit 2f1fcdeb authored by juanf's avatar juanf
Browse files

SP-1115 / BIS-627 : ELN UI : Implement data set upload, ongoing work.

SVN: 30337
parent 3448e044
No related branches found
No related tags found
No related merge requests found
/*
* Copyright 2013 ETH Zuerich, CISD
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
DataSetFormMode = {
CREATE : 0
}
function DataSetForm(serverFacade, containerId, profile, sample, mode) {
this.serverFacade = serverFacade;
this.containerId = containerId;
this.profile = profile;
this.sample = sample;
this.mode = mode;
this.dataSetTypes = null;
this.init = function() {
var localInstance = this;
this.serverFacade.listDataSetTypes(
function(data) {
localInstance.dataSetTypes = data.result;
localInstance._repaint();
}
);
}
this._getDropDownForField = function(code, dataSetTypes) {
var $component = $("<select>");
$component.attr('id', code);
$component.attr('required', '');
$component.append($("<option>").attr('value', '').attr('selected', '').text(''));
for(var i = 0; i < dataSetTypes.length; i++) {
$component.append($("<option>").attr('value',dataSetTypes[i].code).text(dataSetTypes[i].code));
}
return $component;
}
this._repaint = function() {
//Clean and prepare container
var localInstance = this;
var container = $("#"+containerId);
container.empty();
var $wrapper = $('<form>', { class : 'form-horizontal'});
$wrapper.append($('<h2>').text("Create Data Set"));
//Drop Down DataSetType Field Set
var $dataSetTypeFieldSet = $('<fieldset>');
$dataSetTypeFieldSet.append($('<legend>').text("Type Info"));
var $dataSetTypeDropDownObj = this._getDropDownForField('DATASET_TYPE', this.dataSetTypes);
$dataSetTypeDropDownObj.change(function() {
localInstance._repaintMetadata(
localInstance._getDataSetType($('#DATASET_TYPE').val())
);
});
var $dataSetTypeDropDown = $('<div>', { class : "control-group"});
$dataSetTypeDropDown.append($('<label>', {class: 'control-label'}).text('Data Set Type:'));
$dataSetTypeDropDown.append(
$('<div>', {class: 'controls'})
.append($dataSetTypeDropDownObj).append(' (Required)')
);
$dataSetTypeFieldSet.append($dataSetTypeDropDown);
$wrapper.append($dataSetTypeFieldSet);
//Metadata Container
$wrapper.append($('<div>', {'id' : 'metadataContainer'}));
//Attach File
var $fileFieldSet = $('<fieldset>')
.append($('<legend>').text("File to upload"))
.append($('<div>', { class : "control-group"}))
.append($('<div>', {class: 'controls'})
.append($('<input>', {'type' : 'file', class : "filestyle", 'data-buttonText' : 'Find file'})).append(' (Required)'));
$wrapper.append($fileFieldSet);
//Submit Button
var $submitButton = $('<fieldset>')
.append($('<div>', { class : "control-group"}))
.append($('<div>', {class: 'controls'})
.append($('<input>', { class : 'btn btn-primary', 'type' : 'submit', 'value' : 'Create Dataset'})));
$wrapper.append($submitButton);
//Attach to main form
container.append($wrapper);
//Initialize file chooser
$(":file").filestyle({buttonText: "Find file"});
}
this._getDataSetType = function(typeCode) {
for(var i = 0; i < this.dataSetTypes.length; i++) {
if(this.dataSetTypes[i].code === typeCode) {
return this.dataSetTypes[i];
}
}
return null;
}
this._repaintMetadata = function(dataSetType) {
$("#metadataContainer").empty();
var $wrapper = $("<div>");
for(var i = 0; i < dataSetType.propertyTypeGroups.length; i++) {
var propertyTypeGroup = dataSetType.propertyTypeGroups[i];
var $fieldset = $('<fieldset>');
var $legend = $('<legend>');
$fieldset.append($legend);
if(propertyTypeGroup.name) {
$legend.text(propertyTypeGroup.name);
} else if(dataSetType.propertyTypeGroups.length === 1) { //Only when there is only one group without name to render it with a default title.
$legend.text("Metadata Fields");
}
for(var j = 0; j < propertyTypeGroup.propertyTypes.length; j++) {
var propertyType = propertyTypeGroup.propertyTypes[j];
var $controlGroup = $('<div>', {class : 'control-group'});
var $controlLabel = $('<label>', {class : 'control-label'}).text(propertyType.label + ":");
var $controls = $('<div>', {class : 'controls'});
$controlGroup.append($controlLabel);
$controlGroup.append($controls);
$fieldset.append($controlGroup);
var $component = this.getFieldForPropertyType(propertyType);
$controls.append($component);
if(propertyType.mandatory) {
$controls.append(' (Required)')
}
}
$wrapper.append($fieldset);
}
$("#metadataContainer").append($wrapper);
}
//
// Standard Form Fields
//
this.getFieldForPropertyType = function(propertyType) {
var $component = null;
if (propertyType.dataType === "BOOLEAN") {
$component = this._getBooleanField(propertyType.code, propertyType.description);
} else if (propertyType.dataType === "CONTROLLEDVOCABULARY") {
var vocabulary = null;
if(isNaN(propertyType.vocabulary)) {
vocabulary = this.profile.getVocabularyById(propertyType.vocabulary.id);
if(vocabulary === null) { //This should not happen, but can save the day.
vocabulary = propertyType.vocabulary;
vocabulary.terms = propertyType.terms;
}
} else {
vocabulary = this.profile.getVocabularyById(propertyType.vocabulary);
}
$component = this._getDropDownFieldForVocabulary(propertyType.code, vocabulary.terms, propertyType.mandatory);
} else if (propertyType.dataType === "HYPERLINK") {
$component = this._getInputField("url", propertyType.code, propertyType.description, null, propertyType.mandatory);
} else if (propertyType.dataType === "INTEGER") {
$component = this._getInputField("number", propertyType.code, propertyType.description, '1', propertyType.mandatory);
} else if (propertyType.dataType === "MATERIAL") {
$component = this._getInputField("text", propertyType.code, propertyType.description, null, propertyType.mandatory);
} else if (propertyType.dataType === "MULTILINE_VARCHAR") {
$component = this._getTextBox(propertyType.code, propertyType.description, propertyType.mandatory);
} else if (propertyType.dataType === "REAL") {
$component = this._getInputField("number", propertyType.code, propertyType.description, 'any', propertyType.mandatory);
} else if (propertyType.dataType === "TIMESTAMP") {
$component = this._getDatePickerField(propertyType.code, propertyType.mandatory);
} else if (propertyType.dataType === "VARCHAR") {
$component = this._getInputField("text", propertyType.code, propertyType.description, null, propertyType.mandatory);
} else if (propertyType.dataType === "XML") {
$component = this._getTextBox(propertyType.code, propertyType.description, propertyType.mandatory);
}
return $component;
}
this._getBooleanField = function(id, alt) {
return $('<input>', {'type' : 'checkbox', 'id' : id, 'alt' : alt});
}
this._getDropDownFieldForVocabulary = function(code, terms, isRequired) {
var $component = $("<select>");
$component.attr('id', code);
if (isRequired) {
$component.attr('required', '');
}
$component.append($("<option>").attr('value', '').attr('selected', '').text(''));
for(var i = 0; i < terms.length; i++) {
$component.append($("<option>").attr('value',terms[i].code).text(terms[i].label));
}
return $component;
}
this._getInputField = function(type, id, alt, step, isRequired) {
var $component = $('<input>', {'type' : type, 'id' : id, 'alt' : alt});
if (isRequired) {
$component.attr('required', '');
}
if (isRequired) {
$component.attr('step', step);
}
return $component;
}
this._getTextBox = function(id, alt, isRequired) {
var $component = $('<textarea>', {'id' : id, 'alt' : alt, 'style' : 'height: 80px; width: 450px;'});
if (isRequired) {
$component.attr('required', '');
}
return $component;
}
this._getDatePickerField = function(id, isRequired) {
var $component = $('<div>', {'class' : 'well', 'style' : 'width: 250px;'});
var $subComponent = $('<div>', {'class' : 'input-append date', 'id' : 'datetimepicker_' + id });
var $input = $('<input>', {'type' : 'text', 'id' : id, 'data-format' : 'yyyy-MM-dd HH:mm:ss'});
if (isRequired) {
$input.attr('required', '');
}
var $spanAddOn = $('<span>', {'class' : 'add-on'})
.append($('<i>', {'data-date-icon' : 'icon-calendar' , 'data-time-icon' : 'icon-time' }));
//Jquery evaluate javascript instead of leaving the browser to do it when is inserted.
//We need this executed after the elements are inserted into the DOM, that's why we have a timeout of 1s.
//This opens the door to a race condition, if the elements take more time to be inserted into the DOM it will not work.
var $script = $('<script>', {'type' : 'text/javascript'})
.text("$(setTimeout(function() { $('#datetimepicker_" + id + "').datetimepicker({ language: 'en' }); }) , 1000);");
$subComponent.append($input);
$subComponent.append($spanAddOn);
$component.append($subComponent);
$component.append($script);
return $component;
}
}
\ No newline at end of file
/*
* bootstrap-filestyle
* http://dev.tudosobreweb.com.br/bootstrap-filestyle/
*
* Copyright (c) 2013 Markus Vinicius da Silva Lima
* Version 1.0.3
* Licensed under the MIT license.
*/
(function(c){var b=function(d,e){this.options=e;this.$elementFilestyle=[];this.$element=c(d)};b.prototype={clear:function(){this.$element.val("");this.$elementFilestyle.find(":text").val("")},destroy:function(){this.$element.removeAttr("style").removeData("filestyle").val("");this.$elementFilestyle.remove()},icon:function(d){if(d===true){if(!this.options.icon){this.options.icon=true;this.$elementFilestyle.find("label").prepend(this.htmlIcon())}}else{if(d===false){if(this.options.icon){this.options.icon=false;this.$elementFilestyle.find("i").remove()}}else{return this.options.icon}}},input:function(d){if(d===true){if(!this.options.input){this.options.input=true;this.$elementFilestyle.prepend(this.htmlInput());var e="",g=[];if(this.$element[0].files===undefined){g[0]={name:this.$element[0].value}}else{g=this.$element[0].files}for(var f=0;f<g.length;f++){e+=g[f].name.split("\\").pop()+", "}if(e!==""){this.$elementFilestyle.find(":text").val(e.replace(/\, $/g,""))}}}else{if(d===false){if(this.options.input){this.options.input=false;this.$elementFilestyle.find(":text").remove()}}else{return this.options.input}}},buttonText:function(d){if(d!==undefined){this.options.buttonText=d;this.$elementFilestyle.find("label span").html(this.options.buttonText)}else{return this.options.buttonText}},classButton:function(d){if(d!==undefined){this.options.classButton=d;this.$elementFilestyle.find("label").attr({"class":this.options.classButton});if(this.options.classButton.search(/btn-inverse|btn-primary|btn-danger|btn-warning|btn-success/i)!==-1){this.$elementFilestyle.find("label i").addClass("icon-white")}else{this.$elementFilestyle.find("label i").removeClass("icon-white")}}else{return this.options.classButton}},classIcon:function(d){if(d!==undefined){this.options.classIcon=d;if(this.options.classButton.search(/btn-inverse|btn-primary|btn-danger|btn-warning|btn-success/i)!==-1){this.$elementFilestyle.find("label").find("i").attr({"class":"icon-white "+this.options.classIcon})}else{this.$elementFilestyle.find("label").find("i").attr({"class":this.options.classIcon})}}else{return this.options.classIcon}},classInput:function(d){if(d!==undefined){this.options.classInput=d;this.$elementFilestyle.find(":text").addClass(this.options.classInput)}else{return this.options.classInput}},htmlIcon:function(){if(this.options.icon){var d="";if(this.options.classButton.search(/btn-inverse|btn-primary|btn-danger|btn-warning|btn-success/i)!==-1){d=" icon-white "}return'<i class="'+d+this.options.classIcon+'"></i> '}else{return""}},htmlInput:function(){if(this.options.input){return'<input type="text" class="'+this.options.classInput+'" disabled> '}else{return""}},constructor:function(){var i=this,g="",h=this.$element.attr("id"),d=[];if(h===""||!h){h="filestyle-"+c(".bootstrap-filestyle").length;this.$element.attr({id:h})}g=this.htmlInput()+'<label for="'+h+'" class="'+this.options.classButton+'">'+this.htmlIcon()+"<span>"+this.options.buttonText+"</span></label>";this.$elementFilestyle=c('<div class="bootstrap-filestyle" style="display: inline;">'+g+"</div>");var f=this.$elementFilestyle.find("label");var e=f.parent();e.attr("tabindex","0").keypress(function(j){if(j.keyCode===13||j.charCode===32){f.click()}});this.$element.css({position:"absolute",left:"-9999px"}).attr("tabindex","-1").after(this.$elementFilestyle);this.$element.change(function(){var j="";if(this.files===undefined){d[0]={name:this.value}}else{d=this.files}for(var k=0;k<d.length;k++){j+=d[k].name.split("\\").pop()+", "}if(j!==""){i.$elementFilestyle.find(":text").val(j.replace(/\, $/g,""))}});if(window.navigator.userAgent.search(/firefox/i)>-1){this.$elementFilestyle.find("label").click(function(){i.$element.click();return false})}}};var a=c.fn.filestyle;c.fn.filestyle=function(e,d){var f="",g=this.each(function(){if(c(this).attr("type")==="file"){var j=c(this),h=j.data("filestyle"),i=c.extend({},c.fn.filestyle.defaults,e,typeof e==="object"&&e);if(!h){j.data("filestyle",(h=new b(this,i)));h.constructor()}if(typeof e==="string"){f=h[e](d)}}});if(typeof f!==undefined){return f}else{return g}};c.fn.filestyle.defaults={buttonText:"Choose file",input:true,icon:true,classButton:"btn",classInput:"input-large",classIcon:"icon-folder-open"};c.fn.filestyle.noConflict=function(){c.fn.filestyle=a;return this};c(".filestyle").each(function(){var e=c(this),d={buttonText:e.attr("data-buttonText"),input:e.attr("data-input")==="false"?false:true,icon:e.attr("data-icon")==="false"?false:true,classButton:e.attr("data-classButton"),classInput:e.attr("data-classInput"),classIcon:e.attr("data-classIcon")};e.filestyle(d)})})(window.jQuery);
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment