diff --git a/src/sunstone/public/app/tabs/files-tab.js b/src/sunstone/public/app/tabs/files-tab.js index 31415361c0..ccc9c6ee87 100644 --- a/src/sunstone/public/app/tabs/files-tab.js +++ b/src/sunstone/public/app/tabs/files-tab.js @@ -7,14 +7,16 @@ define(function(require) { var TAB_ID = require('./files-tab/tabId'); var DATATABLE_ID = "dataTableFiles"; - var _dialogs = [ - //require('./files-tab/dialogs/create') - ]; + var _dialogs = []; var _panels = [ require('./files-tab/panels/info') ]; + var _formPanels = [ + require('./files-tab/form-panels/create') + ]; + var Tab = { tabId: TAB_ID, title: Locale.tr("Files & Kernels"), @@ -31,6 +33,7 @@ define(function(require) { actions: Actions, dataTable: new Table(DATATABLE_ID, {actions: true, info: true}), panels: _panels, + formPanels: _formPanels, dialogs: _dialogs }; diff --git a/src/sunstone/public/app/tabs/files-tab/actions.js b/src/sunstone/public/app/tabs/files-tab/actions.js index 15ef13bbaa..7d9cc9e967 100644 --- a/src/sunstone/public/app/tabs/files-tab/actions.js +++ b/src/sunstone/public/app/tabs/files-tab/actions.js @@ -7,25 +7,28 @@ define(function(require) { var RESOURCE = "File"; var XML_ROOT = "IMAGE"; var TAB_ID = require('./tabId'); -// var CREATE_DIALOG_ID = require('./dialogs/create/dialogId'); + var CREATE_DIALOG_ID = require('./form-panels/create/formPanelId'); var _actions = { "File.create" : { type: "create", call: OpenNebulaResource.create, callback: function(request, response) { - Sunstone.getDialog(CREATE_DIALOG_ID).hide(); - Sunstone.getDialog(CREATE_DIALOG_ID).reset(); + Sunstone.resetFormPanel(TAB_ID, CREATE_DIALOG_ID); + Sunstone.hideFormPanel(TAB_ID); Sunstone.getDataTable(TAB_ID).addElement(request, response); Notifier.notifyCustom(Locale.tr("File created"), " ID: " + response[XML_ROOT].ID, false); }, - error: Notifier.onError, + error: function(request, response) { + Sunstone.hideFormPanelLoading(TAB_ID); + Notifier.onError(request, response); + }, }, "File.create_dialog" : { type: "custom", call: function() { - Sunstone.getDialog(CREATE_DIALOG_ID).show(); + Sunstone.showFormPanel(TAB_ID, CREATE_DIALOG_ID, "create"); } }, diff --git a/src/sunstone/public/app/tabs/files-tab/form-panels/create.js b/src/sunstone/public/app/tabs/files-tab/form-panels/create.js new file mode 100644 index 0000000000..b63aa98619 --- /dev/null +++ b/src/sunstone/public/app/tabs/files-tab/form-panels/create.js @@ -0,0 +1,273 @@ +define(function(require) { + /* + DEPENDENCIES + */ + + var BaseFormPanel = require('utils/form-panels/form-panel'); + var Resumable = require('resumable'); + var Sunstone = require('sunstone'); + var OpenNebulaError = require('opennebula/error'); + var Notifier = require('utils/notifier'); + var Locale = require('utils/locale'); + var Tips = require('utils/tips'); + var ResourceSelect = require('utils/resource-select'); + + var TemplateWizardHTML = require('hbs!./create/wizard'); + var TemplateAdvancedHTML = require('hbs!./create/advanced'); + + /* + CONSTANTS + */ + + var FORM_PANEL_ID = require('./create/formPanelId'); + var TAB_ID = require('../tabId'); + + /* + CONSTRUCTOR + */ + + function FormPanel() { + this.formPanelId = FORM_PANEL_ID; + this.tabId = TAB_ID; + this.actions = { + 'create': { + 'title': Locale.tr("Create File"), + 'buttonText': Locale.tr("Create"), + 'resetButton': true + } + }; + + BaseFormPanel.call(this); + } + + FormPanel.FORM_PANEL_ID = FORM_PANEL_ID; + FormPanel.prototype = Object.create(BaseFormPanel.prototype); + FormPanel.prototype.constructor = FormPanel; + FormPanel.prototype.htmlWizard = _htmlWizard; + FormPanel.prototype.htmlAdvanced = _htmlAdvanced; + FormPanel.prototype.submitWizard = _submitWizard; + FormPanel.prototype.submitAdvanced = _submitAdvanced; + FormPanel.prototype.onShow = _onShow; + FormPanel.prototype.setup = _setup; + + return FormPanel; + + + /* + FUNCTION DEFINITIONS + */ + + function _htmlWizard() { + return TemplateWizardHTML({ + 'formPanelId': this.formPanelId + }); + } + + function _htmlAdvanced() { + return TemplateAdvancedHTML({ + 'formPanelId': this.formPanelId + }); + } + + function _onShow(context) { + $("#file_name", context).focus(); + + var ds_id = $('#file_datastore .resource_list_select', context).val(); + var ds_id_raw = $('#file_datastore_raw .resource_list_select', context).val(); + + // Filter out DS with type image (0) or system (1) + var filter_att = ["TYPE", "TYPE"]; + var filter_val = ["0", "1"]; + + ResourceSelect.insert('div#file_datastore', context, "Datastore", + ds_id, false, null, filter_att, filter_val); + + ResourceSelect.insert('div#file_datastore_raw', context, "Datastore", + ds_id_raw, false, null, filter_att, filter_val); + + return false; + } + + function _setup(context) { + var that = this; + Tips.setup(context); + + $('#file_path,#files_file-uploader', context).closest('.row').hide(); + + $("input[name='src_path']", context).change(function() { + var value = $(this).val(); + switch (value){ + case "path": + $('#files_file-uploader', context).closest('.row').hide(); + $('#file_path', context).closest('.row').show(); + + $('#file_path', context).attr('required', ''); + break; + case "upload": + $('#file_path', context).closest('.row').hide(); + $('#files_file-uploader', context).closest('.row').show(); + + $('#file_path', context).removeAttr('required'); + break; + } + }); + + $('#path_file', context).click(); + + if (_getInternetExplorerVersion() > -1) { + $("#upload_file").attr("disabled", "disabled"); + } else { + that.uploader = new Resumable({ + target: 'upload_chunk', + chunkSize: 10 * 1024 * 1024, + maxFiles: 1, + testChunks: false, + query: { + csrftoken: ""//TODO csrftoken + } + }); + + that.uploader.assignBrowse($('#files_file-uploader-input', context)); + + var fileName = ''; + var file_input = false; + + that.uploader.on('fileAdded', function(file) { + fileName = file.fileName; + file_input = fileName; + + $('#files_file-uploader-input', context).hide() + $("#files_file-uploader-label", context).html(file.fileName); + }); + + that.uploader.on('uploadStart', function() { + $('#files_upload_progress_bars').append('
\ +
\ + ' + Locale.tr("Uploading...") + '\ +
\ +
\ +
\ + \ +
\ +
' + fileName + '
\ +
\ +
'); + }); + + that.uploader.on('progress', function() { + $('span.meter', $('div[id="files-' + fileName + 'progressBar"]')).css('width', that.uploader.progress() * 100.0 + '%') + }); + } + + return false; + } + + function _submitWizard(context) { + var that = this; + var upload = false; + + var ds_id = $('#file_datastore .resource_list_select', context).val(); + if (!ds_id) { + Notifier.notifyError(Locale.tr("Please select a datastore for this file")); + return false; + } + + var img_json = {}; + + var name = $('#file_name', context).val(); + img_json["NAME"] = name; + + var desc = $('#file_desc', context).val(); + if (desc.length) { + img_json["DESCRIPTION"] = desc; + } + + var type = $('#file_type', context).val(); + img_json["TYPE"] = type; + + switch ($('#src_path_select input:checked', context).val()){ + case "path": + path = $('#file_path', context).val(); + if (path) img_json["PATH"] = path; + break; + case "upload": + upload = true; + break; + } + + var img_obj = { + "image" : img_json, + "ds_id" : ds_id + }; + + //this is an image upload we trigger FileUploader + //to start the upload + if (upload) { + Sunstone.resetFormPanel(that.tabId, that.formPanelId); + Sunstone.hideFormPanel(that.tabId); + + that.uploader.on('fileSuccess', function(file) { + $('div[id="files-' + file.fileName + '-info"]').text(Locale.tr("Registering in OpenNebula")); + $.ajax({ + url: 'upload', + type: "POST", + data: { + csrftoken: csrftoken, + img : JSON.stringify(img_obj), + file: file.fileName, + tempfile: file.uniqueIdentifier + }, + success: function() { + Notifier.notifyMessage("Image uploaded correctly"); + $('div[id="files-' + file.fileName + 'progressBar"]').remove(); + Sunstone.runAction("File.refresh"); + }, + error: function(response) { + Notifier.onError({}, OpenNebulaError(response)); + $('div[id="files-' + file.fileName + 'progressBar"]').remove(); + } + }); + }); + + that.uploader.upload(); + } else { + Sunstone.runAction("File.create", img_obj); + } + + return false; + } + + function _submitAdvanced(context) { + var template = $('#template', context).val(); + var ds_id = $('#file_datastore_raw .resource_list_select', context).val(); + + if (!ds_id) { + Notifier.notifyError(Locale.tr("Please select a datastore for this file")); + return false; + } + + var img_obj = { + "image" : { + "image_raw" : template + }, + "ds_id" : ds_id + }; + + Sunstone.runAction("File.create", img_obj); + + return false; + } + + function _getInternetExplorerVersion() { + // Returns the version of Internet Explorer or a -1 + // (indicating the use of another browser). + var rv = -1; // Return value assumes failure. + if (navigator.appName == 'Microsoft Internet Explorer') { + var ua = navigator.userAgent; + var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})"); + if (re.exec(ua) != null) + rv = parseFloat(RegExp.$1); + } + return rv; + } +}); diff --git a/src/sunstone/public/app/tabs/files-tab/form-panels/create/advanced.hbs b/src/sunstone/public/app/tabs/files-tab/form-panels/create/advanced.hbs new file mode 100644 index 0000000000..8e67838c97 --- /dev/null +++ b/src/sunstone/public/app/tabs/files-tab/form-panels/create/advanced.hbs @@ -0,0 +1,18 @@ +
+
+
+ +
+
+
+
+
+

{{tr "Write the Image template here"}}

+
+
+
+
+ +
+
+
\ No newline at end of file diff --git a/src/sunstone/public/app/tabs/files-tab/form-panels/create/formPanelId.js b/src/sunstone/public/app/tabs/files-tab/form-panels/create/formPanelId.js new file mode 100644 index 0000000000..618a3b264c --- /dev/null +++ b/src/sunstone/public/app/tabs/files-tab/form-panels/create/formPanelId.js @@ -0,0 +1,3 @@ +define(function(require){ + return 'createFileForm'; +}); \ No newline at end of file diff --git a/src/sunstone/public/app/tabs/files-tab/form-panels/create/wizard.hbs b/src/sunstone/public/app/tabs/files-tab/form-panels/create/wizard.hbs new file mode 100644 index 0000000000..4dff8e384c --- /dev/null +++ b/src/sunstone/public/app/tabs/files-tab/form-panels/create/wizard.hbs @@ -0,0 +1,82 @@ +
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ +
+
+
+
+
+ {{tr "Image location"}}: +
+
+ + + + + + +
+
+
+
+
+ + +
+
+
+
+ + +
+
+
+
\ No newline at end of file