mirror of https://github.com/apache/cloudstack.git
-Fix zone chart -- $browser is undefined error
-Support dynamic generation of create form fields (for add network offering) -Add example add network offering form
This commit is contained in:
Brian Federle
parent
0bb325ac12
commit
ed176cf3c9
|
|
@ -2598,7 +2598,6 @@ Dialogs*/
|
|||
/*** Create form*/
|
||||
.ui-dialog div.form-container {
|
||||
height: 106px;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
@ -2610,6 +2609,7 @@ Dialogs*/
|
|||
}
|
||||
|
||||
.ui-dialog div.form-container div.form-item {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
|
|
@ -2637,15 +2637,14 @@ Dialogs*/
|
|||
}
|
||||
|
||||
.ui-dialog div.form-container div.value {
|
||||
width: 232px;
|
||||
overflow: hidden;
|
||||
float: right;
|
||||
width: 61%;
|
||||
float: left;
|
||||
margin: 0 0 0 15px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.ui-dialog div.form-container div.value input {
|
||||
width: 226px;
|
||||
width: 98%;
|
||||
font-size: 14px;
|
||||
background: #F6F6F6;
|
||||
/*+border-radius:4px;*/
|
||||
|
|
@ -2663,7 +2662,7 @@ Dialogs*/
|
|||
}
|
||||
|
||||
.ui-dialog div.form-container div.value select {
|
||||
width: 231px;
|
||||
width: 100%;
|
||||
float: right;
|
||||
}
|
||||
|
||||
|
|
@ -2741,6 +2740,44 @@ Dialogs*/
|
|||
border-color: #878787;
|
||||
}
|
||||
|
||||
/**** Dynamic input*/
|
||||
.ui-dialog div.form-container div.value .dynamic-input {
|
||||
background: #FFFFFF;
|
||||
width: 98%;
|
||||
min-height: 50px;
|
||||
clear: both;
|
||||
max-height: 211px;
|
||||
overflow: auto;
|
||||
border: 1px solid #CDCDCD;
|
||||
/*+border-radius:6px;*/
|
||||
-moz-border-radius: 6px;
|
||||
-webkit-border-radius: 6px;
|
||||
-khtml-border-radius: 6px;
|
||||
border-radius: 6px 6px 6px 6px;
|
||||
/*+box-shadow:inset -1px 1px 1px #636363;*/
|
||||
-moz-box-shadow: inset -1px 1px 1px #636363;
|
||||
-webkit-box-shadow: inset -1px 1px 1px #636363;
|
||||
-o-box-shadow: inset -1px 1px 1px #636363;
|
||||
box-shadow: inset -1px 1px 1px #636363;
|
||||
}
|
||||
|
||||
.ui-dialog div.form-container div.value .dynamic-input .form-item {
|
||||
width: 97%;
|
||||
margin: 4px 0 0 5px;
|
||||
}
|
||||
|
||||
.ui-dialog div.form-container div.value .dynamic-input .name {
|
||||
width: 86px;
|
||||
}
|
||||
|
||||
.ui-dialog div.form-container div.value .dynamic-input .name label {
|
||||
width: inherit;
|
||||
}
|
||||
|
||||
.ui-dialog div.form-container div.value .dynamic-input .value {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
/*User options*/
|
||||
#user-options {
|
||||
width: 115px;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
(function(cloudStack, testData) {
|
||||
(function(cloudStack, testData, $) {
|
||||
cloudStack.sections.configuration = {
|
||||
title: 'Configuration',
|
||||
id: 'configuration',
|
||||
|
|
@ -72,7 +72,7 @@
|
|||
setTimeout(function() {
|
||||
args.response.success({
|
||||
data: testData.data.serviceOfferings
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -144,7 +144,7 @@
|
|||
setTimeout(function() {
|
||||
args.response.success({
|
||||
data: testData.data.systemServiceOfferings
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -250,6 +250,135 @@
|
|||
networkrate: { label: 'Network Rate' },
|
||||
traffictype: { label: 'Traffic Type'}
|
||||
},
|
||||
|
||||
actions: {
|
||||
add: {
|
||||
label: 'Add network offering',
|
||||
|
||||
action: function(args) {
|
||||
setTimeout(function() {
|
||||
args.response.success();
|
||||
}, 200);
|
||||
},
|
||||
|
||||
createForm: {
|
||||
title: 'Add network offering',
|
||||
desc: 'Please specify the network offering',
|
||||
fields: {
|
||||
name: { label: 'Name', validation: { required: true } },
|
||||
|
||||
displayText: { label: 'Display Text', validation: { required: true } },
|
||||
|
||||
maxConnections: { label: 'Max Connections' },
|
||||
|
||||
networkRate: { label: 'Network Rate' },
|
||||
|
||||
trafficType: {
|
||||
label: 'Traffic Type', validation: { required: true },
|
||||
select: function(args) {
|
||||
args.response.success({
|
||||
data: [
|
||||
{ id: 'GUEST', description: 'Guest' }
|
||||
]
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
guestType: {
|
||||
label: 'Guest Type',
|
||||
select: function(args) {
|
||||
args.response.success({
|
||||
data: [
|
||||
{ id: 'Isolated', description: 'Isolated' },
|
||||
{ id: 'Shared', description: 'Shared' }
|
||||
]
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
availability: {
|
||||
label: 'Availability',
|
||||
select: function(args) {
|
||||
args.response.success({
|
||||
data: [
|
||||
{ id: 'Required', description: 'Required' },
|
||||
{ id: 'Optional', description: 'Optional' },
|
||||
{ id: 'Unavailable', description: 'Unavailable' }
|
||||
]
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
serviceOfferingId: {
|
||||
label: 'Service Offering',
|
||||
select: function(args) {
|
||||
args.response.success({
|
||||
data: $.map(testData.data.serviceOfferings, function(elem) {
|
||||
return {
|
||||
id: elem.id,
|
||||
description: elem.name
|
||||
};
|
||||
})
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
specifyVlan: { label: 'Specify VLAN', isBoolean: true },
|
||||
|
||||
vlanId: { label: 'VLAN ID', isHidden: true, dependsOn: 'specifyVlan'},
|
||||
|
||||
supportedServices: {
|
||||
label: 'Supported Services',
|
||||
|
||||
dynamic: function(args) {
|
||||
setTimeout(function() {
|
||||
var fields = {};
|
||||
var services = ['Vpn', 'Dhcp', 'Gateway', 'Firewall', 'Lb', 'UserData', 'SourceNat', 'StaticNat', 'PortForwarding', 'SecurityGroup'];
|
||||
|
||||
$(services).each(function() {
|
||||
var id = {
|
||||
isEnabled: this + '.' + 'isEnabled',
|
||||
capabilities: this + '.' + 'capabilities',
|
||||
provider: this + '.' + 'provider'
|
||||
};
|
||||
|
||||
fields[id.isEnabled] = { label: this, isBoolean: true };
|
||||
fields[id.provider] = {
|
||||
label: this + ' Provider',
|
||||
isHidden: true,
|
||||
dependsOn: id.isEnabled,
|
||||
select: function(args) {
|
||||
args.response.success({
|
||||
data: [
|
||||
{ id: 'NetScaler', description: 'NetScaler'},
|
||||
{ id: 'SRX', description: 'SRX' }
|
||||
]
|
||||
});
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
args.response.success({
|
||||
fields: fields
|
||||
});
|
||||
}, 50);
|
||||
}
|
||||
},
|
||||
|
||||
tags: { label: 'Tags' }
|
||||
}
|
||||
},
|
||||
|
||||
notification: {
|
||||
poll: testData.notifications.testPoll
|
||||
},
|
||||
messages: {
|
||||
notification: function(args) {
|
||||
return 'Added network offering';
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
dataProvider: function(args) {
|
||||
setTimeout(function() {
|
||||
args.response.success({
|
||||
|
|
@ -261,4 +390,4 @@
|
|||
}
|
||||
}
|
||||
};
|
||||
})(cloudStack, testData);
|
||||
})(cloudStack, testData, jQuery);
|
||||
|
|
|
|||
|
|
@ -247,6 +247,7 @@
|
|||
complete: function($newPanel) {
|
||||
$newPanel.detailView(
|
||||
$.extend(true, {}, naas.mainNetworks[itemID].detailView, {
|
||||
$browser: listViewArgs.$browser,
|
||||
context: { zones: context.physicalResources }
|
||||
})
|
||||
);
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@
|
|||
// Checkbox
|
||||
$dependsOn.bind('click', function(event) {
|
||||
var $target = $(this);
|
||||
var $dependent = $form.find('[depends-on=' + dependsOn + ']');
|
||||
var $dependent = $target.closest('form').find('[depends-on=\'' + dependsOn + '\']');
|
||||
|
||||
if (($target.is(':checked') && !isReverse) ||
|
||||
($target.is(':unchecked') && isReverse)) {
|
||||
|
|
@ -102,6 +102,7 @@
|
|||
}
|
||||
}
|
||||
};
|
||||
|
||||
selectFn = this.select;
|
||||
$input = $('<select>')
|
||||
.attr({ name: key })
|
||||
|
|
@ -114,9 +115,10 @@
|
|||
$.extend(selectArgs, { $select: $input });
|
||||
|
||||
if (dependsOn) {
|
||||
$dependsOn = $form.find('input, select').filter(function() {
|
||||
$dependsOn = $input.closest('form').find('input, select').filter(function() {
|
||||
return $(this).attr('name') === dependsOn;
|
||||
});
|
||||
|
||||
$dependsOn.bind('change', function(event) {
|
||||
var $target = $(this);
|
||||
|
||||
|
|
@ -166,6 +168,30 @@
|
|||
$input.attr('checked', 'checked');
|
||||
}
|
||||
}
|
||||
} else if (this.dynamic) {
|
||||
// Generate a 'sub-create-form' -- append resulting fields
|
||||
$input = $('<div>').addClass('dynamic-input').appendTo($value);
|
||||
$form.hide();
|
||||
|
||||
this.dynamic({
|
||||
response: {
|
||||
success: function(args) {
|
||||
var form = cloudStack.dialog.createForm({
|
||||
noDialog: true,
|
||||
form: {
|
||||
title: '',
|
||||
fields: args.fields
|
||||
}
|
||||
});
|
||||
|
||||
var $fields = form.$formContainer.find('.form-item').appendTo($input);
|
||||
$form.show();
|
||||
|
||||
// Form should be slightly wider
|
||||
$form.closest(':ui-dialog').dialog('option', { position: 'center' });
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
$input = $('<input>').attr({
|
||||
name: key,
|
||||
|
|
|
|||
Loading…
Reference in New Issue