You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@cloudstack.apache.org by se...@apache.org on 2013/07/18 18:34:47 UTC
[12/39] Format JS
http://git-wip-us.apache.org/repos/asf/cloudstack/blob/ad69bc8d/ui/scripts/ui-custom/projects.js
----------------------------------------------------------------------
diff --git a/ui/scripts/ui-custom/projects.js b/ui/scripts/ui-custom/projects.js
index f1f9eba..d897ac9 100644
--- a/ui/scripts/ui-custom/projects.js
+++ b/ui/scripts/ui-custom/projects.js
@@ -15,755 +15,781 @@
// specific language governing permissions and limitations
// under the License.
(function(cloudStack, $) {
- var pageElems = cloudStack.uiCustom.projectsTabs = {
- /**
- * User management multi-edit
- */
- userManagement: function(args) {
- var multiEdit = !args.useInvites ?
- cloudStack.projects.addUserForm :
- cloudStack.projects.inviteForm;
-
- var $multi = $('<div>').multiEdit($.extend(true, {}, multiEdit, {
- context: args.context
- }));
-
- if (args.useInvites) {
- var $fields = $multi.find('form table').find('th, td');
- var $accountFields = $fields.filter(function() {
- return $(this).hasClass('account');
- });
- var $emailFields = $fields.filter(function() {
- return $(this).hasClass('email');
- });
+ var pageElems = cloudStack.uiCustom.projectsTabs = {
+ /**
+ * User management multi-edit
+ */
+ userManagement: function(args) {
+ var multiEdit = !args.useInvites ?
+ cloudStack.projects.addUserForm :
+ cloudStack.projects.inviteForm;
+
+ var $multi = $('<div>').multiEdit($.extend(true, {}, multiEdit, {
+ context: args.context
+ }));
- $multi.prepend(
- $('<div>').addClass('add-by')
- .append($('<span>').html(_l('label.add.by') + ':'))
- .append(
- $('<div>').addClass('selection')
- .append(
- $('<input>').attr({
- type: 'radio',
- name: 'add-by',
- checked: 'checked'
- }).click(function() {
- $accountFields.show();
- $emailFields.hide();
- $emailFields.find('input').val('');
+ if (args.useInvites) {
+ var $fields = $multi.find('form table').find('th, td');
+ var $accountFields = $fields.filter(function() {
+ return $(this).hasClass('account');
+ });
+ var $emailFields = $fields.filter(function() {
+ return $(this).hasClass('email');
+ });
- return true;
- }).click()
- )
- .append($('<label>').html(_l('label.account')))
- .append(
- $('<input>').attr({
- type: 'radio',
- name: 'add-by'
- }).click(function() {
- $accountFields.hide();
- $accountFields.find('input').val('');
- $emailFields.show();
+ $multi.prepend(
+ $('<div>').addClass('add-by')
+ .append($('<span>').html(_l('label.add.by') + ':'))
+ .append(
+ $('<div>').addClass('selection')
+ .append(
+ $('<input>').attr({
+ type: 'radio',
+ name: 'add-by',
+ checked: 'checked'
+ }).click(function() {
+ $accountFields.show();
+ $emailFields.hide();
+ $emailFields.find('input').val('');
+
+ return true;
+ }).click()
+ )
+ .append($('<label>').html(_l('label.account')))
+ .append(
+ $('<input>').attr({
+ type: 'radio',
+ name: 'add-by'
+ }).click(function() {
+ $accountFields.hide();
+ $accountFields.find('input').val('');
+ $emailFields.show();
+
+ return true;
+ })
+ )
+ .append($('<label>').html(_l('label.email')))
+ )
+ );
+ }
- return true;
- })
- )
- .append($('<label>').html(_l('label.email')))
- )
- );
- }
-
- return $multi;
- },
-
- dashboardTabs: {
- overview: function() {
- var $dashboard = $('#template').find('.project-dashboard-view').clone();
- $dashboard.data('tab-title', _l('label.menu.dashboard'));
-
- var getData = function() {
- // Populate data
- $dashboard.find('[data-item]').hide();
- var $loading = $('<div>').addClass('loading-overlay').prependTo($dashboard);
- cloudStack.projects.dashboard({
- response: {
- success: function(args) {
- $loading.remove();
- var data = args.data;
-
- // Iterate over data; populate corresponding DOM elements
- $.each(data, function(key, value) {
- var $elem = $dashboard.find('[data-item=' + key + ']');
-
- // This assumes an array of data
- if ($elem.is('ul')) {
- $elem.show();
- var $liTmpl = $elem.find('li').remove();
- $(value).each(function() {
- var item = this;
- var $li = $liTmpl.clone().appendTo($elem).hide();
-
- $.each(item, function(arrayKey, arrayValue) {
- var $arrayElem = $li.find('[data-list-item=' + arrayKey + ']');
-
- $arrayElem.html(_s(arrayValue));
- });
-
- $li.attr({ title: item.description });
-
- $li.fadeIn();
- });
- } else {
- $elem.each(function() {
- var $item = $(this);
- if ($item.hasClass('chart-line')) {
- $item.show().animate({ width: value + '%' });
- } else {
- $item.hide().html(_s(value)).fadeIn();
- }
+ return $multi;
+ },
+
+ dashboardTabs: {
+ overview: function() {
+ var $dashboard = $('#template').find('.project-dashboard-view').clone();
+ $dashboard.data('tab-title', _l('label.menu.dashboard'));
+
+ var getData = function() {
+ // Populate data
+ $dashboard.find('[data-item]').hide();
+ var $loading = $('<div>').addClass('loading-overlay').prependTo($dashboard);
+ cloudStack.projects.dashboard({
+ response: {
+ success: function(args) {
+ $loading.remove();
+ var data = args.data;
+
+ // Iterate over data; populate corresponding DOM elements
+ $.each(data, function(key, value) {
+ var $elem = $dashboard.find('[data-item=' + key + ']');
+
+ // This assumes an array of data
+ if ($elem.is('ul')) {
+ $elem.show();
+ var $liTmpl = $elem.find('li').remove();
+ $(value).each(function() {
+ var item = this;
+ var $li = $liTmpl.clone().appendTo($elem).hide();
+
+ $.each(item, function(arrayKey, arrayValue) {
+ var $arrayElem = $li.find('[data-list-item=' + arrayKey + ']');
+
+ $arrayElem.html(_s(arrayValue));
+ });
+
+ $li.attr({
+ title: item.description
+ });
+
+ $li.fadeIn();
+ });
+ } else {
+ $elem.each(function() {
+ var $item = $(this);
+ if ($item.hasClass('chart-line')) {
+ $item.show().animate({
+ width: value + '%'
+ });
+ } else {
+ $item.hide().html(_s(value)).fadeIn();
+ }
+ });
+ }
+ });
+ }
+ }
});
- }
+ };
+
+ getData();
+
+ $dashboard.find('.button.manage-resources').click(function() {
+ $('.navigation-item.network').click();
});
- }
- }
- });
- };
- getData();
+ $dashboard.find('.info-box.events .button').click(function() {
+ $('.navigation-item.events').click();
+ });
- $dashboard.find('.button.manage-resources').click(function() {
- $('.navigation-item.network').click();
- });
+ return $dashboard;
+ },
- $dashboard.find('.info-box.events .button').click(function() {
- $('.navigation-item.events').click();
- });
+ users: function() {
+ return $('<div>').addClass('management').data('tab-title', _l('label.menu.accounts'));
+ },
- return $dashboard;
- },
-
- users: function() {
- return $('<div>').addClass('management').data('tab-title', _l('label.menu.accounts'));
- },
-
- invitations: function() {
- return $('<div>').addClass('management-invite').data('tab-title', _l('label.invitations'));
- },
-
- resources: function(options) {
- if (!options) options = {};
-
- var $resources = $('<div>').addClass('resources').data('tab-title', _l('label.resources'));
- var $form = $('<form>');
- var $submit = $('<input>').attr({
- type: 'submit'
- }).val(_l('label.apply'));
-
- cloudStack.projects.resourceManagement.dataProvider({
- response: {
- success: function(args) {
- $(args.data).each(function() {
- var resource = this;
- var $field = $('<div>').addClass('field');
- var $label = $('<label>').attr({
- 'for': resource.type
- }).html(_s(resource.label));
- var $input = $('<input>').attr({
- type: 'text',
- name: resource.type,
- value: resource.value,
- id: resource.type
- }).addClass('required');
-
- $field.append($label, $input);
- $field.appendTo($form);
- });
-
- $form.validate();
- $form.submit(function() {
- if (!$form.valid) {
- return false;
- }
+ invitations: function() {
+ return $('<div>').addClass('management-invite').data('tab-title', _l('label.invitations'));
+ },
- var $loading = $('<div>').addClass('loading-overlay').appendTo($form);
-
- cloudStack.projects.resourceManagement.update({
- data: cloudStack.serializeForm($form),
- response: {
- success: function(args) {
- $loading.remove();
- $('.notifications').notifications('add', {
- section: 'dashboard',
- desc: 'label.update.project.resources',
- interval: 1000,
- poll: function(args) {
- args.complete();
+ resources: function(options) {
+ if (!options) options = {};
+
+ var $resources = $('<div>').addClass('resources').data('tab-title', _l('label.resources'));
+ var $form = $('<form>');
+ var $submit = $('<input>').attr({
+ type: 'submit'
+ }).val(_l('label.apply'));
+
+ cloudStack.projects.resourceManagement.dataProvider({
+ response: {
+ success: function(args) {
+ $(args.data).each(function() {
+ var resource = this;
+ var $field = $('<div>').addClass('field');
+ var $label = $('<label>').attr({
+ 'for': resource.type
+ }).html(_s(resource.label));
+ var $input = $('<input>').attr({
+ type: 'text',
+ name: resource.type,
+ value: resource.value,
+ id: resource.type
+ }).addClass('required');
+
+ $field.append($label, $input);
+ $field.appendTo($form);
+ });
+
+ $form.validate();
+ $form.submit(function() {
+ if (!$form.valid) {
+ return false;
+ }
+
+ var $loading = $('<div>').addClass('loading-overlay').appendTo($form);
+
+ cloudStack.projects.resourceManagement.update({
+ data: cloudStack.serializeForm($form),
+ response: {
+ success: function(args) {
+ $loading.remove();
+ $('.notifications').notifications('add', {
+ section: 'dashboard',
+ desc: 'label.update.project.resources',
+ interval: 1000,
+ poll: function(args) {
+ args.complete();
+ }
+ });
+ }
+ }
+ }, options.projectID);
+
+ return false;
+ });
+
+ $submit.appendTo($form);
+ $form.appendTo($resources);
}
- });
}
- }
}, options.projectID);
- return false;
- });
+ return $resources;
+ }
+ },
+
+ /**
+ * Projects dashboard
+ */
+ dashboard: function() {
+ var tabs = {
+ dashboard: pageElems.dashboardTabs.overview
+ };
+
+ // Only show management tabs to owner of project
+ if (isAdmin() || isDomainAdmin() || (
+ cloudStack.context.projects &&
+ (cloudStack.context.projects[0].account == cloudStack.context.users[0].account)
+ )) {
+ tabs.users = pageElems.dashboardTabs.users;
+
+ if (g_capabilities.projectinviterequired) {
+ tabs.invitations = pageElems.dashboardTabs.invitations;
+ }
- $submit.appendTo($form);
- $form.appendTo($resources);
+ if (isAdmin() || isDomainAdmin()) {
+ tabs.resources = pageElems.dashboardTabs.resources;
+ }
}
- }
- }, options.projectID);
- return $resources;
- }
- },
+ var $tabs = $('<div>').addClass('tab-content').append($('<ul>'));
+ var $toolbar = $('<div>').addClass('toolbar');
+
+ // Make UI tabs
+ $.each(tabs, function(tabName, tab) {
+ var $tab = $('<li>').appendTo($tabs.find('ul:first'));
+ var $tabContent = tab();
+ var $tabLink = $('<a>')
+ .attr({
+ href: '#project-view-dashboard-' + tabName
+ })
+ .html($tabContent.data('tab-title'))
+ .appendTo($tab);
+ var $content = $('<div>')
+ .appendTo($tabs)
+ .attr({
+ id: 'project-view-dashboard-' + tabName
+ })
+ .append($tabContent);
+ });
+
+ $tabs.find('ul li:first').addClass('first');
+ $tabs.find('ul li:last').addClass('last');
+
+ $tabs.bind('tabsshow', function(event, ui) {
+ var $panel = $(ui.panel);
+ var $management = $panel.find('.management');
+ var $managementInvite = $panel.find('.management-invite');
+
+ if ($management.size()) {
+ $management.children().remove();
+ $management.append(pageElems.userManagement({
+ context: cloudStack.context
+ }));
- /**
- * Projects dashboard
- */
- dashboard: function() {
- var tabs = {
- dashboard: pageElems.dashboardTabs.overview
- };
-
- // Only show management tabs to owner of project
- if (isAdmin() || isDomainAdmin() || (
- cloudStack.context.projects &&
- (cloudStack.context.projects[0].account == cloudStack.context.users[0].account)
- )) {
- tabs.users = pageElems.dashboardTabs.users;
-
- if (g_capabilities.projectinviterequired) {
- tabs.invitations = pageElems.dashboardTabs.invitations;
- }
+ return true;
+ }
- if (isAdmin() || isDomainAdmin()) {
- tabs.resources = pageElems.dashboardTabs.resources;
- }
- }
-
- var $tabs = $('<div>').addClass('tab-content').append($('<ul>'));
- var $toolbar = $('<div>').addClass('toolbar');
-
- // Make UI tabs
- $.each(tabs, function(tabName, tab) {
- var $tab = $('<li>').appendTo($tabs.find('ul:first'));
- var $tabContent = tab();
- var $tabLink = $('<a>')
- .attr({ href: '#project-view-dashboard-' + tabName })
- .html($tabContent.data('tab-title'))
- .appendTo($tab);
- var $content = $('<div>')
- .appendTo($tabs)
- .attr({ id: 'project-view-dashboard-' + tabName })
- .append($tabContent);
- });
-
- $tabs.find('ul li:first').addClass('first');
- $tabs.find('ul li:last').addClass('last');
-
- $tabs.bind('tabsshow', function(event, ui) {
- var $panel = $(ui.panel);
- var $management = $panel.find('.management');
- var $managementInvite = $panel.find('.management-invite');
-
- if ($management.size()) {
- $management.children().remove();
- $management.append(pageElems.userManagement({
- context: cloudStack.context
- }));
-
- return true;
- }
+ if ($managementInvite.size()) {
+ $managementInvite.children().remove();
+ $managementInvite.append(pageElems.userManagement({
+ context: cloudStack.context,
+ useInvites: true
+ }));
+ }
- if ($managementInvite.size()) {
- $managementInvite.children().remove();
- $managementInvite.append(pageElems.userManagement({
- context: cloudStack.context,
- useInvites: true
- }));
- }
+ return true;
+ });
- return true;
- });
+ return $('<div>').addClass('project-dashboard')
+ .append($.merge(
+ $toolbar,
+ $tabs.tabs()
+ ));
+ },
+
+ /**
+ * Add new project flow
+ */
+ newProjectForm: function() {
+ var $newProject = $('<div>').addClass('new-project');
+ $newProject.append($('<div>').addClass('title').html(_l('label.create.project')));
+
+ var $form = $('<form>');
+ var $formDesc = $('<div>').addClass('form-desc');
+ var $projectName = $('<div>').addClass('field name')
+ .append($('<label>').attr('for', 'project-name').html(_l('label.project.name')))
+ .append($('<input>').addClass('required disallowSpecialCharacters').attr({
+ type: 'text',
+ name: 'project-name',
+ id: 'project-name'
+ }));
+ var $projectDesc = $('<div>').addClass('field desc')
+ .append($('<label>').attr('for', 'project-desc').html(_l('label.display.text')))
+ .append($('<input>').addClass('disallowSpecialCharacters').attr({
+ type: 'text',
+ name: 'project-display-text',
+ id: 'project-desc'
+ }));
+ var $submit = $('<input>').attr({
+ type: 'submit'
+ }).val(_l('label.create.project'));
+ var $cancel = $('<div>').addClass('button cancel').html(_l('label.cancel'));
+ var $loading = $('<div>').addClass('loading-overlay');
+
+ // Form events/validation
+ $form.validate();
+ $form.submit(function() {
+ if (!$form.valid()) return false;
+
+ $form.prepend($loading);
+
+ cloudStack.projects.add({
+ context: cloudStack.context,
+ data: cloudStack.serializeForm($form),
+ response: {
+ success: function(args) {
+ var project = args.data;
+ var $projectSwitcher = $('div.project-switcher');
+
+ $(window).trigger('cloudStack.fullRefresh');
+
+ // dynamically add newly created project into project switcher
+ $projectSwitcher.find('select').append(
+ $('<option>').val(project.id).html(project.name)
+ );
+
+ $loading.remove();
+
+ // Confirmation
+ $form.replaceWith(function() {
+ var $confirm = $('<div>').addClass('confirm');
+
+ // Update title with project name
+ $newProject.find('.title').html(_s(args.data.name));
+
+ // Show field data
+ $confirm.append($projectName).find('input').replaceWith( // Name
+ $('<span>').addClass('value').html(_s(
+ args.data.name
+ ))
+ );
+ $confirm.append($projectDesc).find('input').replaceWith( // Display text
+ $('<span>').addClass('value').html(_s(
+ args.data.displayText
+ ))
+ );
+
+ var $buttons = $('<div>').addClass('buttons');
+ var $addAccountButton = $('<div>').addClass('button confirm').html(_l('label.add.accounts'));
+
+ $addAccountButton.click(function() {
+ // Show add user form
+ $confirm.replaceWith(function() {
+ var $userManagement = pageElems.userManagement({
+ context: $.extend(true, {}, cloudStack.context, {
+ projects: [project]
+ }),
+ useInvites: cloudStack.projects.requireInvitation()
+ });
+ var $nextButton = $('<div>').addClass('button confirm next').html(_l('label.next'));
+
+ $newProject.find('.title').html(
+ cloudStack.projects.requireInvitation() ?
+ _l('label.invite.to') + ' ' + _s(args.data.name) :
+ _l('label.add.accounts.to') + ' ' + _s(args.data.name)
+ );
+ $nextButton.appendTo($userManagement).click(function() {
+ $newProject.find('.title').html(_l('label.review'));
+ $userManagement.replaceWith(function() {
+ var $review = $('<div>').addClass('review');
+ var $projectData = $('<div>').addClass('project-data');
+
+ // Basic project data
+ $review.append($projectData);
+ $projectData.append($projectName).find('input').replaceWith( // Name
+ $('<span>').addClass('value').html(_s(
+ args.data.name
+ ))
+ );
+ $projectData.append($projectDesc).find('input').replaceWith( // Display text
+ $('<span>').addClass('value').html(_s(
+ args.data.displayText
+ ))
+ );
+
+ // User/resouce tabs
+ var $tabs = $('<div>').addClass('tabs resources').appendTo($review);
+ var $ul = $('<ul>').appendTo($tabs)
+ .append(
+ // Users tab
+ $('<li>').addClass('first').append(
+ $('<a>').attr({
+ href: '#new-project-review-tabs-users'
+ }).html(
+ cloudStack.projects.requireInvitation() ?
+ _l('label.invitations') : _l('label.accounts')
+ )
+ )
+ );
+
+ if (isAdmin() || isDomainAdmin()) {
+ $ul.append(
+ // Resources tab
+ $('<li>').addClass('last').append(
+ $('<a>').attr({
+ href: '#new-project-review-tabs-resouces'
+ }).html(_l('label.resources'))
+ )
+ );
+ }
+
+ var $users = $('<div>').attr({
+ id: 'new-project-review-tabs-users'
+ }).appendTo($tabs);
+ cloudStack.context.projects = [project];
+
+ var $resources;
+ if (isAdmin() || isDomainAdmin()) {
+ $resouces = $('<div>')
+ .attr({
+ id: 'new-project-review-tabs-resouces'
+ })
+ .appendTo($tabs)
+ .append(pageElems.dashboardTabs.resources);
+ }
+
+ $tabs.tabs();
+
+ $users.listView({
+ listView: {
+ id: 'project-accounts',
+ disableInfiniteScrolling: true,
+ fields: !cloudStack.projects.requireInvitation() ? {
+ username: {
+ label: _l('label.account')
+ }
+ } : {
+ account: {
+ label: _l('label.invited.accounts')
+ }
+ },
+ dataProvider: function(args) {
+ setTimeout(function() {
+ args.response.success({
+ data: $.map($userManagement.find('.data-item tr'), function(elem) {
+ // Store previous user data in list table
+ return !cloudStack.projects.requireInvitation() ? {
+ username: $(elem).find('td.username span').html()
+ } : {
+ account: $(elem).find('td.account span').html()
+ };
+ })
+ });
+ }, 0);
+ }
+ }
+ });
+
+ // Save button
+ var $saveButton = $nextButton.clone().appendTo($review);
+ $saveButton.html(_l('label.save'));
+ $saveButton.click(function() {
+ $('#new-project-review-tabs-resouces').find('form').submit();
+ $('.ui-dialog, .overlay').remove();
+ });
+
+ $laterButton.click(function() {
+ $(':ui-dialog, .overlay').remove();
+
+ return false;
+ });
+
+ return $review;
+ });
+
+ $(':ui-dialog').dialog('option', 'position', 'center');
+ });
+ $laterButton.html(_l('label.close')).appendTo($userManagement);
+
+ return $userManagement;
+ });
+
+ $(':ui-dialog').dialog('option', 'position', 'center');
+
+ return false;
+ });
- return $('<div>').addClass('project-dashboard')
- .append($.merge(
- $toolbar,
- $tabs.tabs()
- ));
- },
+ var $laterButton = $('<div>').addClass('button later').html(_l('label.remind.later'));
+ $laterButton.click(function() {
+ $(':ui-dialog, .overlay').remove();
- /**
- * Add new project flow
- */
- newProjectForm: function() {
- var $newProject = $('<div>').addClass('new-project');
- $newProject.append($('<div>').addClass('title').html(_l('label.create.project')));
-
- var $form = $('<form>');
- var $formDesc = $('<div>').addClass('form-desc');
- var $projectName = $('<div>').addClass('field name')
- .append($('<label>').attr('for', 'project-name').html(_l('label.project.name')))
- .append($('<input>').addClass('required disallowSpecialCharacters').attr({
- type: 'text',
- name: 'project-name',
- id: 'project-name'
- }));
- var $projectDesc = $('<div>').addClass('field desc')
- .append($('<label>').attr('for', 'project-desc').html(_l('label.display.text')))
- .append($('<input>').addClass('disallowSpecialCharacters').attr({
- type: 'text',
- name: 'project-display-text',
- id: 'project-desc'
- }));
- var $submit = $('<input>').attr({ type: 'submit' }).val(_l('label.create.project'));
- var $cancel = $('<div>').addClass('button cancel').html(_l('label.cancel'));
- var $loading = $('<div>').addClass('loading-overlay');
-
- // Form events/validation
- $form.validate();
- $form.submit(function() {
- if (!$form.valid()) return false;
-
- $form.prepend($loading);
-
- cloudStack.projects.add({
- context: cloudStack.context,
- data: cloudStack.serializeForm($form),
- response: {
- success: function(args) {
- var project = args.data;
- var $projectSwitcher = $('div.project-switcher');
-
- $(window).trigger('cloudStack.fullRefresh');
-
- // dynamically add newly created project into project switcher
- $projectSwitcher.find('select').append(
- $('<option>').val(project.id).html(project.name)
- );
-
- $loading.remove();
-
- // Confirmation
- $form.replaceWith(function() {
- var $confirm = $('<div>').addClass('confirm');
-
- // Update title with project name
- $newProject.find('.title').html(_s(args.data.name));
-
- // Show field data
- $confirm.append($projectName).find('input').replaceWith( // Name
- $('<span>').addClass('value').html(_s(
- args.data.name
- ))
- );
- $confirm.append($projectDesc).find('input').replaceWith( // Display text
- $('<span>').addClass('value').html(_s(
- args.data.displayText
- ))
- );
+ return false;
+ });
- var $buttons = $('<div>').addClass('buttons');
- var $addAccountButton = $('<div>').addClass('button confirm').html(_l('label.add.accounts'));
-
- $addAccountButton.click(function() {
- // Show add user form
- $confirm.replaceWith(function() {
- var $userManagement = pageElems.userManagement({
- context: $.extend(true, {}, cloudStack.context, {
- projects: [project]
- }),
- useInvites: cloudStack.projects.requireInvitation()
- });
- var $nextButton = $('<div>').addClass('button confirm next').html(_l('label.next'));
-
- $newProject.find('.title').html(
- cloudStack.projects.requireInvitation() ?
- _l('label.invite.to') + ' ' + _s(args.data.name) :
- _l('label.add.accounts.to') + ' ' + _s(args.data.name)
- );
- $nextButton.appendTo($userManagement).click(function() {
- $newProject.find('.title').html(_l('label.review'));
- $userManagement.replaceWith(function() {
- var $review = $('<div>').addClass('review');
- var $projectData = $('<div>').addClass('project-data');
-
- // Basic project data
- $review.append($projectData);
- $projectData.append($projectName).find('input').replaceWith( // Name
- $('<span>').addClass('value').html(_s(
- args.data.name
- ))
- );
- $projectData.append($projectDesc).find('input').replaceWith( // Display text
- $('<span>').addClass('value').html(_s(
- args.data.displayText
- ))
- );
-
- // User/resouce tabs
- var $tabs = $('<div>').addClass('tabs resources').appendTo($review);
- var $ul = $('<ul>').appendTo($tabs)
- .append(
- // Users tab
- $('<li>').addClass('first').append(
- $('<a>').attr({ href: '#new-project-review-tabs-users'}).html(
- cloudStack.projects.requireInvitation() ?
- _l('label.invitations') : _l('label.accounts')
- )
- )
- );
-
- if (isAdmin() || isDomainAdmin()) {
- $ul.append(
- // Resources tab
- $('<li>').addClass('last').append(
- $('<a>').attr({ href: '#new-project-review-tabs-resouces'}).html(_l('label.resources'))
- )
- );
- }
+ $buttons.appendTo($confirm).append($.merge(
+ $addAccountButton, $laterButton
+ ));
- var $users = $('<div>').attr({ id: 'new-project-review-tabs-users' }).appendTo($tabs);
- cloudStack.context.projects = [project];
+ return $confirm;
+ });
+ },
+ error: cloudStack.dialog.error(function() {
+ $loading.remove();
+ })
+ }
+ });
- var $resources;
- if (isAdmin() || isDomainAdmin()) {
- $resouces = $('<div>')
- .attr({ id: 'new-project-review-tabs-resouces' })
- .appendTo($tabs)
- .append(pageElems.dashboardTabs.resources);
- }
+ return false;
+ });
- $tabs.tabs();
-
- $users.listView({
- listView: {
- id: 'project-accounts',
- disableInfiniteScrolling: true,
- fields: !cloudStack.projects.requireInvitation() ? {
- username: { label: _l('label.account') }
- } : {
- account: { label: _l('label.invited.accounts') }
- },
- dataProvider: function(args) {
- setTimeout(function() {
- args.response.success({
- data: $.map($userManagement.find('.data-item tr'), function(elem) {
- // Store previous user data in list table
- return !cloudStack.projects.requireInvitation() ? {
- username: $(elem).find('td.username span').html()
- } : {
- account: $(elem).find('td.account span').html()
- };
- })
- });
- }, 0);
- }
- }
- });
+ $cancel.click(function() {
+ $(':ui-dialog, .overlay').remove();
+ });
- // Save button
- var $saveButton = $nextButton.clone().appendTo($review);
- $saveButton.html(_l('label.save'));
- $saveButton.click(function() {
- $('#new-project-review-tabs-resouces').find('form').submit();
- $('.ui-dialog, .overlay').remove();
- });
+ return $newProject
+ .append(
+ $form
+ .append($formDesc)
+ .append($projectName)
+ .append($projectDesc)
+ .append($cancel)
+ .append($submit)
+ );
+ },
+
+ /**
+ * Project selection list
+ */
+ selector: function(args) {
+ var $selector = $('<div>').addClass('project-selector');
+ var $toolbar = $('<div>').addClass('toolbar');
+ var $list = $('<div>').addClass('listing')
+ .append($('<div>').addClass('header').html(_l('label.name')))
+ .append($('<div>').addClass('data').append($('<ul>')));
+ var $searchForm = $('<form>');
+ var $search = $('<div>').appendTo($toolbar).addClass('search')
+ .append(
+ $searchForm
+ .append($('<input>').attr({
+ type: 'text'
+ }))
+ .append($('<input>').attr({
+ type: 'submit'
+ }).val(''))
+ );
+ var $projectSelect = args.$projectSelect;
+ var $cancel = $('<div>').addClass('button cancel').html(_l('label.cancel'));
+
+ // Get project data
+ var loadData = function(complete, options) {
+ cloudStack.projects.dataProvider({
+ projectName: options ? options.projectName : null,
+ context: cloudStack.context,
+ response: {
+ success: function(args) {
+ var data = args.data;
+
+ $projectSelect.find('option').remove();
+ $(data).each(function() {
+ var displayText = this.displayText ? this.displayText : this.name;
+
+ $('<li>')
+ .data('json-obj', this)
+ .html(_s(displayText))
+ .appendTo($list.find('ul'));
+
+ // Populate project select
+ $('<option>')
+ .appendTo($projectSelect)
+ .data('json-obj', this)
+ .html(_s(displayText));
+ });
+
+ cloudStack.evenOdd($list, 'li', {
+ even: function($elem) {
+ $elem.addClass('even');
+ },
+
+ odd: function($elem) {
+ $elem.addClass('odd');
+ }
+ });
+
+ if (complete) complete();
+ }
+ }
+ });
+ };
- $laterButton.click(function() {
- $(':ui-dialog, .overlay').remove();
+ // Search form
+ $searchForm.submit(function() {
+ $list.find('li').remove();
+ loadData(null, {
+ projectName: $(this).find('input[type=text]').val()
+ });
- return false;
- });
+ return false;
+ });
+
+ //Cancel button
+ $cancel.click(function() {
+ $(':ui-dialog, .overlay').remove();
+ $('.select.default-view').click();
+ });
+
+
+ // Initial load
+ loadData(function() {
+ if (!$list.find('li').size()) {
+ cloudStack.dialog.notice({
+ message: isAdmin() || isDomainAdmin() || g_userProjectsEnabled ? _l('message.no.projects') : _l('message.no.projects.adminOnly')
+ }).closest('.ui-dialog');
+ $.merge($selector, $('.overlay')).remove();
+ $('.select.default-view').click();
+ } else {
+ $selector.dialog({
+ title: _l('label.select.project'),
+ dialogClass: 'project-selector-dialog',
+ closeOnEscape: false,
+ width: 420
+ }).closest('.ui-dialog').overlay();
+ }
+ });
- return $review;
- });
+ // Project item click event
+ $selector.click(function(event) {
+ var $target = $(event.target);
- $(':ui-dialog').dialog('option', 'position', 'center');
- });
- $laterButton.html(_l('label.close')).appendTo($userManagement);
+ if ($target.is('li')) {
+ cloudStack.context.projects = [$target.data('json-obj')];
+ showDashboard();
- return $userManagement;
- });
+ var $switcher = $('.select.project-view');
+ var projectName = _s(cloudStack.context.projects[0].name);
- $(':ui-dialog').dialog('option', 'position', 'center');
+ $switcher.attr('title', projectName);
+ if (projectName.length > 10) {
+ projectName = projectName.substr(0, 10).concat('...');
+ }
- return false;
- });
+ // Put project name in header
+ $switcher.html('<span class="icon"> </span>' + projectName);
- var $laterButton = $('<div>').addClass('button later').html(_l('label.remind.later'));
- $laterButton.click(function() {
- $(':ui-dialog, .overlay').remove();
- return false;
- });
+ $.merge($selector, $('.overlay')).remove();
- $buttons.appendTo($confirm).append($.merge(
- $addAccountButton, $laterButton
- ));
+ // Select active project
+ $projectSelect
+ .find('option').attr('selected', '')
+ .filter(function() {
+ return $(this).data('json-obj').name == _s(cloudStack.context.projects[0].name);
+ }).attr('selected', 'selected');
- return $confirm;
- });
- },
- error: cloudStack.dialog.error(function() {
- $loading.remove();
- })
- }
- });
+ ////
+ // Hidden for now
+ //$projectSelect.parent().show();
+ }
+ });
- return false;
- });
-
- $cancel.click(function() {
- $(':ui-dialog, .overlay').remove();
- });
-
- return $newProject
- .append(
- $form
- .append($formDesc)
- .append($projectName)
- .append($projectDesc)
- .append($cancel)
- .append($submit)
- );
- },
+ return $selector
+ .append($toolbar)
+ .append($list)
+ .append($cancel);
+ }
+ };
/**
- * Project selection list
+ * Show project-mode appearance on CloudStack UI
*/
- selector: function(args) {
- var $selector = $('<div>').addClass('project-selector');
- var $toolbar = $('<div>').addClass('toolbar');
- var $list = $('<div>').addClass('listing')
- .append($('<div>').addClass('header').html(_l('label.name')))
- .append($('<div>').addClass('data').append($('<ul>')));
- var $searchForm = $('<form>');
- var $search = $('<div>').appendTo($toolbar).addClass('search')
- .append(
- $searchForm
- .append($('<input>').attr({ type: 'text' }))
- .append($('<input>').attr({ type: 'submit' }).val(''))
- );
- var $projectSelect = args.$projectSelect;
- var $cancel = $('<div>').addClass('button cancel').html(_l('label.cancel'));
-
- // Get project data
- var loadData = function(complete, options) {
- cloudStack.projects.dataProvider({
- projectName: options ? options.projectName : null,
- context: cloudStack.context,
- response: {
- success: function(args) {
- var data = args.data;
-
- $projectSelect.find('option').remove();
- $(data).each(function() {
- var displayText = this.displayText ? this.displayText : this.name;
-
- $('<li>')
- .data('json-obj', this)
- .html(_s(displayText))
- .appendTo($list.find('ul'));
-
- // Populate project select
- $('<option>')
- .appendTo($projectSelect)
- .data('json-obj', this)
- .html(_s(displayText));
- });
-
- cloudStack.evenOdd($list, 'li', {
- even: function($elem) {
- $elem.addClass('even');
- },
-
- odd: function($elem) {
- $elem.addClass('odd');
- }
- });
+ var applyProjectStyle = function() {
+ var $container = $('#cloudStack3-container');
+ $container.addClass('project-view');
+ };
- if (complete) complete();
- }
- }
- });
- };
+ /**
+ * Initiate new project flow
+ */
+ var addProject = function() {
+ pageElems.newProjectForm().dialog({
+ title: 'New Project',
+ closeOnEscape: false,
+ width: 760
+ }).closest('.ui-dialog').overlay();
+ };
- // Search form
- $searchForm.submit(function() {
- $list.find('li').remove();
- loadData(null, {
- projectName: $(this).find('input[type=text]').val()
- });
+ var deleteProject = function(args) {
+ var projectId = args.id;
+ var $projectSwitcher = $('div.project-switcher');
+ var contextProjectId = cloudStack.context.projects ? cloudStack.context.projects[0].id : -1;
- return false;
- });
-
- //Cancel button
- $cancel.click(function() {
- $(':ui-dialog, .overlay').remove();
- $('.select.default-view').click();
- });
-
-
- // Initial load
- loadData(function() {
- if (!$list.find('li').size()) {
- cloudStack.dialog.notice({
- message: isAdmin() || isDomainAdmin() || g_userProjectsEnabled ?
- _l('message.no.projects') :
- _l('message.no.projects.adminOnly')
- }).closest('.ui-dialog');
- $.merge($selector, $('.overlay')).remove();
- $('.select.default-view').click();
- } else {
- $selector.dialog({
- title: _l('label.select.project'),
- dialogClass: 'project-selector-dialog',
- closeOnEscape: false ,
- width: 420
- }).closest('.ui-dialog').overlay();
- }
- });
+ $projectSwitcher.find('option[value="' + projectId + '"]').remove();
- // Project item click event
- $selector.click(function(event) {
- var $target = $(event.target);
+ //return to default view if current project is deleted
+ if (contextProjectId == projectId) {
+ $projectSwitcher.find('select').trigger('change');
+ }
+ return false;
+ };
- if ($target.is('li')) {
- cloudStack.context.projects = [$target.data('json-obj')];
- showDashboard();
+ /**
+ * Show the dashboard, in panel
+ */
+ var showDashboard = function() {
+ var $browser = $('#browser .container');
+ applyProjectStyle($('html body'));
+
+ // Cleanup project context
+ if (cloudStack.context.projects)
+ cloudStack.context.projects[0].isNew = false;
+
+ $browser.cloudBrowser('removeAllPanels');
+ $browser.cloudBrowser('addPanel', {
+ title: _l('label.project.dashboard'),
+ complete: function($newPanel) {
+ $('#navigation li.dashboard').addClass('active').siblings().removeClass('active');
+ $newPanel.append(pageElems.dashboard);
+ }
+ });
+ };
- var $switcher = $('.select.project-view');
- var projectName = _s(cloudStack.context.projects[0].name);
+ /**
+ * Projects entry point
+ */
+ cloudStack.uiCustom.projects = function(args) {
+ var $dashboardNavItem = $('#navigation li.navigation-item.dashboard');
- $switcher.attr('title', projectName);
- if (projectName.length > 10) {
- projectName = projectName.substr(0, 10).concat('...');
- }
+ // Use project dashboard
+ var event = function() {
+ if (!$('#cloudStack3-container').hasClass('project-view')) {
+ // No longer in project view, go back to normal dashboard
+ $dashboardNavItem.unbind('click', event);
- // Put project name in header
- $switcher.html('<span class="icon"> </span>' + projectName);
+ return true;
+ }
+ $(this).addClass('active');
+ $(this).siblings().removeClass('active');
- $.merge($selector, $('.overlay')).remove();
+ if (cloudStack.context.projects && cloudStack.context.projects[0]) {
+ showDashboard();
+ }
- // Select active project
- $projectSelect
- .find('option').attr('selected', '')
- .filter(function() {
- return $(this).data('json-obj').name == _s(cloudStack.context.projects[0].name);
- }).attr('selected', 'selected');
+ return false;
+ };
+ $dashboardNavItem.bind('click', event);
- ////
- // Hidden for now
- //$projectSelect.parent().show();
+ if (args.alreadySelected) {
+ showDashboard();
+ } else {
+ pageElems.selector(args);
}
- });
-
- return $selector
- .append($toolbar)
- .append($list)
- .append($cancel);
- }
- };
-
- /**
- * Show project-mode appearance on CloudStack UI
- */
- var applyProjectStyle = function() {
- var $container = $('#cloudStack3-container');
- $container.addClass('project-view');
- };
-
- /**
- * Initiate new project flow
- */
- var addProject = function() {
- pageElems.newProjectForm().dialog({
- title: 'New Project',
- closeOnEscape: false,
- width: 760
- }).closest('.ui-dialog').overlay();
- };
-
- var deleteProject = function(args) {
- var projectId = args.id;
- var $projectSwitcher = $('div.project-switcher');
- var contextProjectId = cloudStack.context.projects ? cloudStack.context.projects[0].id : -1;
-
- $projectSwitcher.find('option[value="'+projectId+'"]').remove();
-
- //return to default view if current project is deleted
- if(contextProjectId == projectId) {
- $projectSwitcher.find('select').trigger('change');
- }
- return false;
- };
-
- /**
- * Show the dashboard, in panel
- */
- var showDashboard = function() {
- var $browser = $('#browser .container');
- applyProjectStyle($('html body'));
-
- // Cleanup project context
- if (cloudStack.context.projects)
- cloudStack.context.projects[0].isNew = false;
-
- $browser.cloudBrowser('removeAllPanels');
- $browser.cloudBrowser('addPanel', {
- title: _l('label.project.dashboard'),
- complete: function($newPanel) {
- $('#navigation li.dashboard').addClass('active').siblings().removeClass('active');
- $newPanel.append(pageElems.dashboard);
- }
- });
- };
-
- /**
- * Projects entry point
- */
- cloudStack.uiCustom.projects = function(args) {
- var $dashboardNavItem = $('#navigation li.navigation-item.dashboard');
-
- // Use project dashboard
- var event = function() {
- if (!$('#cloudStack3-container').hasClass('project-view')) {
- // No longer in project view, go back to normal dashboard
- $dashboardNavItem.unbind('click', event);
-
- return true;
- }
+ };
- $(this).addClass('active');
- $(this).siblings().removeClass('active');
+ /**
+ * New project event
+ */
+ $(window).bind('cloudStack.newProject', function() {
+ addProject();
+ });
- if (cloudStack.context.projects && cloudStack.context.projects[0]) {
- showDashboard();
- }
- return false;
- };
- $dashboardNavItem.bind('click', event);
-
- if (args.alreadySelected) {
- showDashboard();
- } else {
- pageElems.selector(args);
- }
- };
-
- /**
- * New project event
- */
- $(window).bind('cloudStack.newProject', function() {
- addProject();
- });
-
-
- $(window).bind('cloudStack.deleteProject', function(event, args) {
- deleteProject({id: args.data.id});
- });
+ $(window).bind('cloudStack.deleteProject', function(event, args) {
+ deleteProject({
+ id: args.data.id
+ });
+ });
})(cloudStack, jQuery);
http://git-wip-us.apache.org/repos/asf/cloudstack/blob/ad69bc8d/ui/scripts/ui-custom/recurringSnapshots.js
----------------------------------------------------------------------
diff --git a/ui/scripts/ui-custom/recurringSnapshots.js b/ui/scripts/ui-custom/recurringSnapshots.js
index 985f369..c32aa99 100644
--- a/ui/scripts/ui-custom/recurringSnapshots.js
+++ b/ui/scripts/ui-custom/recurringSnapshots.js
@@ -15,200 +15,201 @@
// specific language governing permissions and limitations
// under the License.
(function(cloudStack, $) {
- cloudStack.uiCustom.recurringSnapshots = function(args) {
- var desc = args.desc;
- var selects = args.selects;
- var actions = args.actions;
- var dataProvider = args.dataProvider;
-
- return function(args) {
- var $snapshots = $('#template').find('.recurring-snapshots').clone();
- var context = args.context;
-
- // Update labels
- $snapshots.find('.forms ul li.hourly a').html(_l('label.hourly'));
- $snapshots.find('.forms ul li.daily a').html(_l('label.daily'));
- $snapshots.find('.forms ul li.weekly a').html(_l('label.weekly'));
- $snapshots.find('.forms ul li.monthly a').html(_l('label.monthly'));
- $snapshots.find('.field.timezone .name').html(_l('label.timezone'));
- $snapshots.find('.field.time .name').html(_l('label.time'));
- $snapshots.find('.field.time .value label').html(_l('label.minute.past.hour'));
- $snapshots.find('.add-snapshot-action.add').html(_l('label.add'));
-
- // Get description
- $snapshots.find('.desc').html(_l(desc));
-
- // Snapshot type tabs
- $snapshots.find('.forms').tabs();
-
- // Populate selects
- $snapshots.find('form select').each(function() {
- var $select = $(this);
- var selectData = selects[$select.attr('name')];
-
- if (selectData) {
- selectData({
- response: {
- success: function(args) {
- $(args.data).each(function() {
- var $option = $('<option>').appendTo($select);
-
- $option.val(this.id).html(_l(this.name));
+ cloudStack.uiCustom.recurringSnapshots = function(args) {
+ var desc = args.desc;
+ var selects = args.selects;
+ var actions = args.actions;
+ var dataProvider = args.dataProvider;
+
+ return function(args) {
+ var $snapshots = $('#template').find('.recurring-snapshots').clone();
+ var context = args.context;
+
+ // Update labels
+ $snapshots.find('.forms ul li.hourly a').html(_l('label.hourly'));
+ $snapshots.find('.forms ul li.daily a').html(_l('label.daily'));
+ $snapshots.find('.forms ul li.weekly a').html(_l('label.weekly'));
+ $snapshots.find('.forms ul li.monthly a').html(_l('label.monthly'));
+ $snapshots.find('.field.timezone .name').html(_l('label.timezone'));
+ $snapshots.find('.field.time .name').html(_l('label.time'));
+ $snapshots.find('.field.time .value label').html(_l('label.minute.past.hour'));
+ $snapshots.find('.add-snapshot-action.add').html(_l('label.add'));
+
+ // Get description
+ $snapshots.find('.desc').html(_l(desc));
+
+ // Snapshot type tabs
+ $snapshots.find('.forms').tabs();
+
+ // Populate selects
+ $snapshots.find('form select').each(function() {
+ var $select = $(this);
+ var selectData = selects[$select.attr('name')];
+
+ if (selectData) {
+ selectData({
+ response: {
+ success: function(args) {
+ $(args.data).each(function() {
+ var $option = $('<option>').appendTo($select);
+
+ $option.val(this.id).html(_l(this.name));
+ });
+ }
+ }
+ });
+ }
+ });
+
+ // Form validation
+ $snapshots.find('form').validate();
+
+ // Add snapshot
+ $snapshots.find('.add-snapshot-action.add').click(function() {
+ var $form = $snapshots.find('form:visible');
+
+ if (!$form.valid()) return false;
+
+ var formData = cloudStack.serializeForm($form);
+
+ actions.add({
+ context: context,
+ snapshot: formData,
+ response: {
+ success: function(args) {
+ var $snapshotRow = $snapshots.find('.scheduled-snapshots tr').filter(function() {
+ return $(this).index() == args.data.type;
+ }).addClass('active').show();
+
+ $snapshotRow.data('json-obj', args.data);
+
+ // Update fields
+ $snapshotRow.find('td.time span').html(args.data.time);
+ $snapshotRow.find('td.day-of-week span').html(_l(
+ args.data['day-of-week'] ?
+ $snapshots.find('select[name=day-of-week] option').filter(function() {
+ return $(this).val() == args.data['day-of-week'];
+ }).html() :
+ args.data['day-of-month']
+ ));
+ $snapshotRow.find('td.timezone span').html(
+ $snapshots.find('select[name=timezone] option').filter(function() {
+ return $(this).val() == args.data['timezone'];
+ }).html()
+ );
+ $snapshotRow.find('td.keep span').html(args.data.keep);
+
+ $(':ui-dialog').dialog('option', 'position', 'center');
+
+ refreshSnapshotTabs();
+ }
+ }
});
- }
- }
- });
- }
- });
-
- // Form validation
- $snapshots.find('form').validate();
-
- // Add snapshot
- $snapshots.find('.add-snapshot-action.add').click(function() {
- var $form = $snapshots.find('form:visible');
-
- if (!$form.valid()) return false;
-
- var formData = cloudStack.serializeForm($form);
-
- actions.add({
- context: context,
- snapshot: formData,
- response: {
- success: function(args) {
- var $snapshotRow = $snapshots.find('.scheduled-snapshots tr').filter(function() {
- return $(this).index() == args.data.type;
- }).addClass('active').show();
-
- $snapshotRow.data('json-obj', args.data);
-
- // Update fields
- $snapshotRow.find('td.time span').html(args.data.time);
- $snapshotRow.find('td.day-of-week span').html(_l(
- args.data['day-of-week'] ?
- $snapshots.find('select[name=day-of-week] option').filter(function() {
- return $(this).val() == args.data['day-of-week'];
- }).html() :
- args.data['day-of-month']
- ));
- $snapshotRow.find('td.timezone span').html(
- $snapshots.find('select[name=timezone] option').filter(function() {
- return $(this).val() == args.data['timezone'];
- }).html()
- );
- $snapshotRow.find('td.keep span').html(args.data.keep);
-
- $(':ui-dialog').dialog('option', 'position', 'center');
-
- refreshSnapshotTabs();
- }
- }
- });
-
- return true;
- });
-
- // Enable/disable snapshot tabs based on table contents;
- var refreshSnapshotTabs = function() {
- $snapshots.find('li').each(function() {
- var index = $(this).index();
- var $tr = $snapshots.find('tr').filter(function() {
- return $(this).index() == index;
- });
-
- if ($tr.size() && $tr.hasClass('active')) { $(this).addClass('disabled ui-state-disabled'); }
- else { $(this).removeClass('disabled ui-state-disabled'); }
-
- if ($(this).is('.ui-tabs-selected.ui-state-disabled')) {
- $snapshots.find('form').show();
-
- if ($snapshots.find('li.ui-state-disabled').size() == $snapshots.find('li').size()) {
- $snapshots.find('form').hide();
- } else {
- $snapshots.find('li:not(.ui-state-disabled):first a').click();
- }
- }
- });
- };
-
- // Remove snapshot
- $snapshots.find('.action.destroy').click(function() {
- var $tr = $(this).closest('tr');
- actions.remove({
- context: context,
- snapshot: $tr.data('json-obj'),
- response: {
- success: function(args) {
- $tr.hide().removeClass('active');
- $(':ui-dialog').dialog('option', 'position', 'center');
-
- refreshSnapshotTabs();
- }
- }
- });
- });
-
- // Get existing data
- dataProvider({
- context: context,
- response: {
- success: function(args) {
- $(args.data).each(function() {
- var snapshot = this;
-
- // Get matching table row
- var $tr = $snapshots.find('tr').filter(function() {
- return $(this).index() == snapshot.type;
- }).addClass('active').show();
-
- $tr.data('json-obj', snapshot);
-
- $tr.find('td.time span').html(snapshot.time);
- $tr.find('td.timezone span').html(
- $snapshots.find('select[name=timezone] option').filter(function() {
- return $(this).val() == snapshot['timezone'];
- }).html()
- );
- $tr.find('td.keep span').html(snapshot.keep);
- $tr.find('td.day-of-week span').html(
- snapshot['day-of-week'] ?
- $snapshots.find('select[name=day-of-week] option').filter(function() {
- return $(this).val() == snapshot['day-of-week'];
- }).html() :
- snapshot['day-of-month']
- );
+
+ return true;
+ });
+
+ // Enable/disable snapshot tabs based on table contents;
+ var refreshSnapshotTabs = function() {
+ $snapshots.find('li').each(function() {
+ var index = $(this).index();
+ var $tr = $snapshots.find('tr').filter(function() {
+ return $(this).index() == index;
+ });
+
+ if ($tr.size() && $tr.hasClass('active')) {
+ $(this).addClass('disabled ui-state-disabled');
+ } else {
+ $(this).removeClass('disabled ui-state-disabled');
+ }
+
+ if ($(this).is('.ui-tabs-selected.ui-state-disabled')) {
+ $snapshots.find('form').show();
+
+ if ($snapshots.find('li.ui-state-disabled').size() == $snapshots.find('li').size()) {
+ $snapshots.find('form').hide();
+ } else {
+ $snapshots.find('li:not(.ui-state-disabled):first a').click();
+ }
+ }
+ });
+ };
+
+ // Remove snapshot
+ $snapshots.find('.action.destroy').click(function() {
+ var $tr = $(this).closest('tr');
+ actions.remove({
+ context: context,
+ snapshot: $tr.data('json-obj'),
+ response: {
+ success: function(args) {
+ $tr.hide().removeClass('active');
+ $(':ui-dialog').dialog('option', 'position', 'center');
+
+ refreshSnapshotTabs();
+ }
+ }
+ });
+ });
+
+ // Get existing data
+ dataProvider({
+ context: context,
+ response: {
+ success: function(args) {
+ $(args.data).each(function() {
+ var snapshot = this;
+
+ // Get matching table row
+ var $tr = $snapshots.find('tr').filter(function() {
+ return $(this).index() == snapshot.type;
+ }).addClass('active').show();
+
+ $tr.data('json-obj', snapshot);
+
+ $tr.find('td.time span').html(snapshot.time);
+ $tr.find('td.timezone span').html(
+ $snapshots.find('select[name=timezone] option').filter(function() {
+ return $(this).val() == snapshot['timezone'];
+ }).html()
+ );
+ $tr.find('td.keep span').html(snapshot.keep);
+ $tr.find('td.day-of-week span').html(
+ snapshot['day-of-week'] ?
+ $snapshots.find('select[name=day-of-week] option').filter(function() {
+ return $(this).val() == snapshot['day-of-week'];
+ }).html() :
+ snapshot['day-of-month']
+ );
+ });
+
+ refreshSnapshotTabs();
+ }
+ }
});
- refreshSnapshotTabs();
- }
- }
- });
-
- // Create dialog
- var $dialog = $snapshots.dialog({
- title: _l('label.action.recurring.snapshot'),
- dialogClass: 'recurring-snapshots',
- closeOnEscape:false,
- width: 600,
- buttons: [
- {
- text: _l('label.done'),
- 'class': 'ok',
- click: function() {
- $dialog.fadeOut(function() {
- $dialog.remove();
- });
-
- $('div.overlay').fadeOut(function() {
- $('div.overlay').remove();
- });
- }
- }
- ]
- }).closest('.ui-dialog').overlay();
-
- return $dialog;
+ // Create dialog
+ var $dialog = $snapshots.dialog({
+ title: _l('label.action.recurring.snapshot'),
+ dialogClass: 'recurring-snapshots',
+ closeOnEscape: false,
+ width: 600,
+ buttons: [{
+ text: _l('label.done'),
+ 'class': 'ok',
+ click: function() {
+ $dialog.fadeOut(function() {
+ $dialog.remove();
+ });
+
+ $('div.overlay').fadeOut(function() {
+ $('div.overlay').remove();
+ });
+ }
+ }]
+ }).closest('.ui-dialog').overlay();
+
+ return $dialog;
+ };
};
- };
}(cloudStack, jQuery));
http://git-wip-us.apache.org/repos/asf/cloudstack/blob/ad69bc8d/ui/scripts/ui-custom/regions.js
----------------------------------------------------------------------
diff --git a/ui/scripts/ui-custom/regions.js b/ui/scripts/ui-custom/regions.js
index 9fc36f3..986e009 100644
--- a/ui/scripts/ui-custom/regions.js
+++ b/ui/scripts/ui-custom/regions.js
@@ -16,115 +16,117 @@
// under the License.
(function($, cloudStack) {
- $(window).bind('cloudStack.ready', function() {
- // Region switcher
- var $regionList = $('<ul>');
-
- // Get region listing
- var refreshRegions = function() {
- $regionList.find('li').remove();
- cloudStack.sections.regions.regionSelector.dataProvider({
- response: {
- success: function(args) {
- var data = args.data;
-
- var currentRegion = null;
- $(data).each(function() {
- var region = this;
- var regionName = region.name;
- var $li = $('<li>').append($('<span>').html(_s(region.name)));
-
- $li.data('region-data', region);
-
- /* e.g.
- region.endpoint == "http://localhost:8080/client/"
- document.location.href == "http://localhost:8080/client/#"
+ $(window).bind('cloudStack.ready', function() {
+ // Region switcher
+ var $regionList = $('<ul>');
+
+ // Get region listing
+ var refreshRegions = function() {
+ $regionList.find('li').remove();
+ cloudStack.sections.regions.regionSelector.dataProvider({
+ response: {
+ success: function(args) {
+ var data = args.data;
+
+ var currentRegion = null;
+ $(data).each(function() {
+ var region = this;
+ var regionName = region.name;
+ var $li = $('<li>').append($('<span>').html(_s(region.name)));
+
+ $li.data('region-data', region);
+
+ /* e.g.
+ region.endpoint == "http://localhost:8080/client/"
+ document.location.href == "http://localhost:8080/client/#"
*/
- if(document.location.href.indexOf(region.endpoint) != -1) {
- currentRegion = region;
- $li.addClass('active');
- }
-
- $regionList.append($li);
+ if (document.location.href.indexOf(region.endpoint) != -1) {
+ currentRegion = region;
+ $li.addClass('active');
+ }
+
+ $regionList.append($li);
+ });
+
+ if (currentRegion != null) {
+ $regionSwitcherButton.find('.title').html(_s(currentRegion.name)).attr('title', _s(currentRegion.name));
+ } else {
+ $regionSwitcherButton.find('.title').html('').attr('title', '');
+ }
+ }
+ }
});
-
- if(currentRegion != null) {
- $regionSwitcherButton.find('.title').html(_s(currentRegion.name)).attr('title', _s(currentRegion.name));
- }
- else {
- $regionSwitcherButton.find('.title').html('').attr('title', '');
- }
- }
- }
- });
- };
-
- $(window).bind('cloudStack.refreshRegions', refreshRegions);
-
- var $regionSelector = $('<div>').addClass('region-selector')
- .append($('<div>').addClass('top-arrow'))
- .append($('<h2>').html(_l('label.menu.regions')))
- .append($regionList)
- .append(
- $('<div>').addClass('buttons')
- .append(
- $('<div>').addClass('button close').append($('<span>').html(_l('label.close')))
- )
- )
- .hide();
- var $regionSwitcherButton = $('<div>').addClass('region-switcher')
- .attr('title', 'Select region')
- .append(
- $('<span>').addClass('icon').html(' '),
- $('<span>').addClass('title').html('')
- );
-
- var closeRegionSelector = function(args) {
- $regionSwitcherButton.removeClass('active');
- $regionSelector.fadeOut(args ? args.complete : null);
- $('body > .overlay').fadeOut(function() { $('body > .overlay').remove() });
- };
-
- var switchRegion = function(url) {
- closeRegionSelector({
- complete: function() {
- $('#container').prepend($('<div>').addClass('loading-overlay'));
- document.location.href = url;
- }
- });
- };
-
- $regionList.click(function(event) {
- var $target = $(event.target);
- var $li = $target.closest('li');
- var region, url;
-
- if ($li.size() && !$li.hasClass('active')) {
- region = $li.data('region-data');
- url = region.endpoint;
- id = region.id;
-
- if (id != '-1') {
- switchRegion(url);
- }
- }
- });
+ };
- $regionSwitcherButton.click(function() {
- if ($regionSwitcherButton.hasClass('active')) {
- closeRegionSelector();
- } else {
- $regionSwitcherButton.addClass('active');
- $regionSelector.fadeIn('fast').overlay({ closeAction: closeRegionSelector });
- }
- });
+ $(window).bind('cloudStack.refreshRegions', refreshRegions);
+
+ var $regionSelector = $('<div>').addClass('region-selector')
+ .append($('<div>').addClass('top-arrow'))
+ .append($('<h2>').html(_l('label.menu.regions')))
+ .append($regionList)
+ .append(
+ $('<div>').addClass('buttons')
+ .append(
+ $('<div>').addClass('button close').append($('<span>').html(_l('label.close')))
+ )
+ )
+ .hide();
+ var $regionSwitcherButton = $('<div>').addClass('region-switcher')
+ .attr('title', 'Select region')
+ .append(
+ $('<span>').addClass('icon').html(' '),
+ $('<span>').addClass('title').html('')
+ );
+
+ var closeRegionSelector = function(args) {
+ $regionSwitcherButton.removeClass('active');
+ $regionSelector.fadeOut(args ? args.complete : null);
+ $('body > .overlay').fadeOut(function() {
+ $('body > .overlay').remove()
+ });
+ };
+
+ var switchRegion = function(url) {
+ closeRegionSelector({
+ complete: function() {
+ $('#container').prepend($('<div>').addClass('loading-overlay'));
+ document.location.href = url;
+ }
+ });
+ };
+
+ $regionList.click(function(event) {
+ var $target = $(event.target);
+ var $li = $target.closest('li');
+ var region, url;
+
+ if ($li.size() && !$li.hasClass('active')) {
+ region = $li.data('region-data');
+ url = region.endpoint;
+ id = region.id;
+
+ if (id != '-1') {
+ switchRegion(url);
+ }
+ }
+ });
+
+ $regionSwitcherButton.click(function() {
+ if ($regionSwitcherButton.hasClass('active')) {
+ closeRegionSelector();
+ } else {
+ $regionSwitcherButton.addClass('active');
+ $regionSelector.fadeIn('fast').overlay({
+ closeAction: closeRegionSelector
+ });
+ }
+ });
+
+ $regionSelector.find('.button.close').click(function() {
+ closeRegionSelector();
+ });
- $regionSelector.find('.button.close').click(function() {
- closeRegionSelector();
+ $('#header .controls .view-switcher.button:last').after($regionSwitcherButton, $regionSelector);
+ refreshRegions();
});
-
- $('#header .controls .view-switcher.button:last').after($regionSwitcherButton, $regionSelector);
- refreshRegions();
- });
-}(jQuery, cloudStack));
-
+}(jQuery, cloudStack));