Skip to content

Gelencsér Szabolcs / circlestack

Go to a project
Commit 04eae09e by Kálmán Viktor
Options

dashboard: fix vm create network add/remove

parent 6bf11f0f
Showing with 43 additions and 22 deletions
circle/dashboard/forms.py
...@@ -209,7 +209,7 @@ class VmCreateForm(forms.Form): ...@@ -209,7 +209,7 @@ class VmCreateForm(forms.Form):
Field( Field(
"networks", "networks",
css_class="form-control", css_class="form-control",
id="vm-create-network-add-managed", id="vm-create-network-add-vlan",
), ),
css_class="js-hidden", css_class="js-hidden",
style="padding-top: 15px; max-width: 450px;", style="padding-top: 15px; max-width: 450px;",
...@@ -225,7 +225,8 @@ class VmCreateForm(forms.Form): ...@@ -225,7 +225,8 @@ class VmCreateForm(forms.Form):
Div( Div(
AnyTag( AnyTag(
"select", "select",
css_class="form-control", css_class=("form-control "
"font-awesome-font"),
css_id="vm-create-network-add-select", css_id="vm-create-network-add-select",
), ),
Div( Div(
......
circle/dashboard/static/dashboard/dashboard.css
...@@ -258,3 +258,8 @@ a.hover-black { ...@@ -258,3 +258,8 @@ a.hover-black {
.dashboard-vm-details-network-h3 { .dashboard-vm-details-network-h3 {
margin-top: 20px; margin-top: 20px;
} }
/* font awesome font */
.font-awesome-font {
font-family: "FontAwesome";
}
circle/dashboard/static/dashboard/vm-create.js
...@@ -25,8 +25,10 @@ function vmCreateLoaded() { ...@@ -25,8 +25,10 @@ function vmCreateLoaded() {
/* add network */ /* add network */
$('#vm-create-network-add-button').click(function() { $('#vm-create-network-add-button').click(function() {
var vlan_pk = $('#vm-create-network-add-select :selected').val(); var vlan_pk = $('#vm-create-network-add-select :selected').val();
var managed = $('#vm-create-network-add-checkbox-managed').prop('checked'); var managed = $('#vm-create-network-add-select :selected').data('managed');
var name = $('#vm-create-network-add-select :selected').text(); var name = $('#vm-create-network-add-select :selected').text();
// remove the hex chars
name = name.substring(name.indexOf(" "), name.length);
if ($('#vm-create-network-list').children('span').length < 1) { if ($('#vm-create-network-list').children('span').length < 1) {
$('#vm-create-network-list').html(''); $('#vm-create-network-list').html('');
...@@ -35,19 +37,15 @@ function vmCreateLoaded() { ...@@ -35,19 +37,15 @@ function vmCreateLoaded() {
vmCreateNetworkLabel(vlan_pk, name, managed) vmCreateNetworkLabel(vlan_pk, name, managed)
); );
/* select the network from the managed/unmanaged multiple select */ /* select the network in the hidden network select */
if(managed) { $('#vm-create-network-add-vlan option[value="' + vlan_pk + '"]').prop('selected', true);
$('#vm-create-network-add-managed option[value="' + vlan_pk + '"]').prop('selected', true);
} else {
$('#vm-create-network-add-unmanaged option[value="' + vlan_pk + '"]').prop('selected', true);
}
$('option:selected', $('#vm-create-network-add-select')).remove(); $('option:selected', $('#vm-create-network-add-select')).remove();
/* add dummy text if no more networks are available */ /* add dummy text if no more networks are available */
if($('#vm-create-network-add-select option').length < 1) { if($('#vm-create-network-add-select option').length < 1) {
$('#vm-create-network-add-button').attr('disabled', true); $('#vm-create-network-add-button').attr('disabled', true);
$('#vm-create-network-add-select').html('<option value="-1">We are out of &lt;options&gt; hehe</option>'); $('#vm-create-network-add-select').html('<option value="-1">No more networks!</option>');
} }
return false; return false;
...@@ -71,13 +69,13 @@ function vmCreateLoaded() { ...@@ -71,13 +69,13 @@ function vmCreateLoaded() {
$(this).remove(); $(this).remove();
var vlan_name = $(this).text(); var vlan_name = $(this).text();
$('#vm-create-network-add-select').append($('<option>', {
value: vlan_pk, var html = '<option data-managed="' + (managed ? 1 : 0) + '" value="' + vlan_pk + '">'+
text: vlan_name (managed ? "&#xf0ac;": "&#xf0c1;") + vlan_name + '</option>';
})); $('#vm-create-network-add-select').append(html);
/* remove the selection from the multiple select */ /* remove the selection from the multiple select */
$('#vm-create-network-add-' + (managed ? '' : 'un') + 'managed option[value="' + vlan_pk + '"]').prop('selected', false); $('#vm-create-network-add-vlan option[value="' + vlan_pk + '"]').prop('selected', false);
if ($('#vm-create-network-list').children('span').length < 1) { if ($('#vm-create-network-list').children('span').length < 1) {
$('#vm-create-network-list').append('Not added to any network!'); $('#vm-create-network-list').append('Not added to any network!');
} }
...@@ -86,7 +84,18 @@ function vmCreateLoaded() { ...@@ -86,7 +84,18 @@ function vmCreateLoaded() {
}); });
/* copy networks from hidden select */ /* copy networks from hidden select */
$('#vm-create-network-add-select').html($('#vm-create-network-add-managed').html()); $('#vm-create-network-add-vlan option').each(function() {
var managed = $(this).text().indexOf("mana") == 0;
var text = $(this).text();
var pk = $(this).val();
if(managed) {
text = text.replace("managed -", "&#xf0ac;");
} else {
text = text.replace("unmanaged -", "&#xf0c1;");
}
var html = '<option data-managed="' + (managed ? 1 : 0) + '" value="' + pk + '">' + text + '</option>';
$('#vm-create-network-add-select').append(html);
});
/* build up network list */ /* build up network list */
...@@ -201,6 +210,10 @@ function vmCreateLoaded() { ...@@ -201,6 +210,10 @@ function vmCreateLoaded() {
}); });
return false; return false;
}); });
/* for no js stuff */
$('.no-js-hidden').show();
$('.js-hidden').hide();
} }
function vmCreateTemplateChange(new_this) { function vmCreateTemplateChange(new_this) {
...@@ -220,7 +233,7 @@ function vmCreateTemplateChange(new_this) { ...@@ -220,7 +233,7 @@ function vmCreateTemplateChange(new_this) {
refreshSliders(); refreshSliders();
/* clear selections */ /* clear selections */
$('select[id^="vm-create-network-add"], select[id$="managed"]').find('option').prop('selected', false); $("#vm-create-network-add-vlan").find('option').prop('selected', false);
$('#vm-create-disk-add-form').find('option').prop('selected', false); $('#vm-create-disk-add-form').find('option').prop('selected', false);
/* append vlans from InterfaceTemplates */ /* append vlans from InterfaceTemplates */
...@@ -232,12 +245,13 @@ function vmCreateTemplateChange(new_this) { ...@@ -232,12 +245,13 @@ function vmCreateTemplateChange(new_this) {
vmCreateNetworkLabel(nn.vlan_pk, nn.vlan, nn.managed) vmCreateNetworkLabel(nn.vlan_pk, nn.vlan, nn.managed)
); );
$('#vm-create-network-add-' + (nn.managed ? '' : 'un') + 'managed option[value="' + nn.vlan_pk + '"]').prop('selected', true); $('#vm-create-network-add-vlan option[value="' + nn.vlan_pk + '"]').prop('selected', true);
added_vlans.push(nn.vlan_pk); added_vlans.push(nn.vlan_pk);
} }
/* remove already added vlans from dropdown or add new ones */ /* remove already added vlans from dropdown or add new ones */
$('#vm-create-network-add-select').html(''); $('#vm-create-network-add-select').html('');
// this is working because the vlans array already has the icon's hex code
for(var i=0; i < vlans.length; i++) for(var i=0; i < vlans.length; i++)
if(added_vlans.indexOf(vlans[i].pk) == -1) if(added_vlans.indexOf(vlans[i].pk) == -1)
$('#vm-create-network-add-select').append($('<option>', { $('#vm-create-network-add-select').append($('<option>', {
...@@ -245,11 +259,11 @@ function vmCreateTemplateChange(new_this) { ...@@ -245,11 +259,11 @@ function vmCreateTemplateChange(new_this) {
text: vlans[i].name text: vlans[i].name
})); }));
/* enalbe the network add button if there are not added vlans */ /* enable the network add button if there are not added vlans */
if(added_vlans.length != vlans.length) { if(added_vlans.length != vlans.length) {
$('#vm-create-network-add-button').attr('disabled', false); $('#vm-create-network-add-button').attr('disabled', false);
} else { } else {
$('#vm-create-network-add-select').html('<option value="-1">We are out of &lt;options&gt; hehe</option>'); $('#vm-create-network-add-select').html('<option value="-1">No more networks!</option>');
$('#vm-create-network-add-button').attr('disabled', true); $('#vm-create-network-add-button').attr('disabled', true);
} }
...@@ -276,7 +290,7 @@ function vmCreateTemplateChange(new_this) { ...@@ -276,7 +290,7 @@ function vmCreateTemplateChange(new_this) {
text: disks[i].name text: disks[i].name
})); }));
/* enalbe the disk add button if there are not added disks */ /* enable the disk add button if there are not added disks */
if(added_disks.length != disks.length) { if(added_disks.length != disks.length) {
$('#vm-create-disk-add-button').attr('disabled', false); $('#vm-create-disk-add-button').attr('disabled', false);
} else { } else {
......
circle/firewall/models.py
...@@ -262,7 +262,8 @@ class Vlan(AclBase, models.Model): ...@@ -262,7 +262,8 @@ class Vlan(AclBase, models.Model):
verbose_name=_('modified at')) verbose_name=_('modified at'))
def __unicode__(self): def __unicode__(self):
return self.name return "%s - %s" % ("managed" if self.managed else "unmanaged",
self.name)
@models.permalink @models.permalink
def get_absolute_url(self): def get_absolute_url(self):
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment