dashboard: vm create finished network part

circle/dashboard/static/dashboard/dashboard.js

@@ -48,18 +48,42 @@ function vmCreateTemplateChange(new_this) {
     type: 'GET',
     success: function(data, textStatus, xhr) {
       if(xhr.status == 200) {
-       // set sliders
+        // set sliders
         $('#cpu-priority-slider').simpleSlider("setValue", data['priority']);
         $('#cpu-count-slider').simpleSlider("setValue", data['num_cores']);
         $('#ram-slider').simpleSlider("setValue", data['ram_size']);
 
+        /* clear selection */
+        $('select[id^="vm-create-network-add"], select[id$="managed"]').find('option').prop('selected', false);
+
+        /* append vlans from InterfaceTemplates */
         $('#vm-create-network-list').html('');
+        var added_vlans = []
         for(var n = 0; n<data['network'].length; n++) {
           nn = data['network'][n]
           $('#vm-create-network-list').append(
               vmCreateNetworkLabel(nn.vlan_pk, nn.vlan, nn.managed)
           );
-          $('#vm-create-network-add-form option[value="' + nn.vlan_pk + '|' + (nn.managed ? '1' : '0') + '"]').prop('selected', true);
+          
+          $('#vm-create-network-add-' + (nn.managed ? '' : 'un') + 'managed option[value="' + nn.vlan_pk + '"]').prop('selected', true);
+          added_vlans.push(nn.vlan_pk);
+        }
+
+        /* remove already added vlans from dropdown or add new ones */
+        $('#vm-create-network-add-select').html('');
+        for(var i=0; i < vlans.length; i++)
+          if(added_vlans.indexOf(vlans[i].pk) == -1)
+            $('#vm-create-network-add-select').append($('<option>', {
+              value: vlans[i].pk,                                                     
+              text: vlans[i].name                                                     
+            }));
+       
+        /* enalbe the network add button if there are not added vlans */
+        if(added_vlans.length != vlans.length) {
+          $('#vm-create-network-add-button').attr('disabled', false);
+        } else {
+          $('#vm-create-network-add-select').html('<option value="-1">We are out of &lt;options&gt; hehe</option>');
+          $('#vm-create-network-add-button').attr('disabled', true);
         }
       }
     }
@@ -71,6 +95,7 @@ function vmCreateNetworkLabel(pk, name, managed) {
 }
 
 
+var vlans = [];
 function vmCreateLoaded() {
   // temporarily disable for testing
   //$('.vm-create-advanced').hide();
@@ -89,19 +114,26 @@ function vmCreateLoaded() {
  
   /* add network */
   $('#vm-create-network-add-button').click(function() {
-    var option = $('#vm-create-network-add-select :selected');
-    var o = option.val().split('|');
-    var vlan_pk = o[0];
-    var managed = o[1];
+    var vlan_pk = $('#vm-create-network-add-select :selected').val();
+    var managed = $('#vm-create-network-add-checkbox-managed').prop('checked');
+    var name = $('#vm-create-network-add-select :selected').text();
+
     if ($('#vm-create-network-list').children('span').length < 1) { 
       $('#vm-create-network-list').html('');
     }  
     $('#vm-create-network-list').append(
-      vmCreateNetworkLabel(option.val(), option.text(), managed > 0 ? true : false)
+      vmCreateNetworkLabel(vlan_pk, name, managed)
     );
-    $('#vm-create-network-add-form option[value="' + vlan_pk + '|' + (managed ? '1' : '0') + '"]').prop('selected', true);
-    $('option:selected', $('#vm-create-network-add-select')).remove();
 
+    /* select the network from the managed/unmanaged multiple select */
+    if(managed) {
+      $('#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);
+    }
+    /* remove the network from select */
+    $('option:selected', $('#vm-create-network-add-select')).remove();
+    
     /* add dummy text if no more networks are available */
     if($('#vm-create-network-add-select option').length < 1) {
       $('#vm-create-network-add-button').attr('disabled', true);
@@ -113,26 +145,30 @@ function vmCreateLoaded() {
 
   /* remove network */
   // event for network remove button (icon, X)
-  // TODO still not the right place
+  // TODO still not the right place (wrong file ...)
   $('body').on('click', '.vm-create-remove-network', function() {
-    var value = ($(this).parent('span').prop('id')).replace('vlan-', '').split('|');
-    var vlan_pk = value[0];
-    var managed = value[1];
-    $(this).parent('span').fadeOut(500, function() {  
+    var vlan_pk = ($(this).parent('span').prop('id')).replace('vlan-', '')
+    // if it's "blue" then it's managed, kinda not cool
+    var managed = $(this).parent('span').hasClass('label-primary');
+
+    $(this).parent('span').fadeOut(500, function() {
+      /* if ther are no more vlans disabled the add button */
       if($('#vm-create-network-add-select option')[0].value == -1) {   
         $('#vm-create-network-add-button').attr('disabled', false);            
         $('#vm-create-network-add-select').html('');
       }
       
+      /* remove the network label */
       $(this).remove(); 
-      var vlan_name = $(this).text();
 
+      var vlan_name = $(this).text();
       $('#vm-create-network-add-select').append($('<option>', {
-        value: vlan_pk + "|" + managed,
+        value: vlan_pk,
         text: vlan_name
       }));
 
-      $('#vm-create-network-add-form option[value="' + vlan_pk + '|' + (managed ? '1' : '0') + '"]').prop('selected', false);
+      /* remove the selection from the multiple select */
+      $('#vm-create-network-add-' + (managed ? '' : 'un') + 'managed option[value="' + vlan_pk + '"]').prop('selected', false);
       if ($('#vm-create-network-list').children('span').length < 1) {
         $('#vm-create-network-list').append('Not added to any network!');
       }
@@ -140,6 +176,17 @@ function vmCreateLoaded() {
     return false;
   });
 
+  /* copy networks from hidden select */
+  $('#vm-create-network-add-select').html($('#vm-create-network-add-managed').html());
+
+
+  /* build up network list */
+  $('#vm-create-network-add-select option').each(function() {
+    vlans.push({
+      'name': $(this).text(),
+      'pk': parseInt($(this).val())
+    });
+  });
 
   /* no js compatibility */
   $('.no-js-hidden').show();

circle/dashboard/templates/dashboard/vm-create.html

@@ -61,7 +61,6 @@
     </div>
     <style>
       /* temporary inline css for dev */
-      
       a.hover-black {
         color:white;
       }
@@ -76,22 +75,33 @@
       }
     </style>
     <div class="col-sm-8" style="padding-top: 3px;">
-      <select class="form-control js-hidden" id="vm-create-network-add-form" multiple>
-        <option value="1|1">vmnet2 - managed</option>
-        <option value="2|0">PUB</option>
-        <option value="3|0">OFF</option>
-      </select>
+      <div class="js-hidden" style="padding-top: 15px;">
+        <h4>Managed networks</h4>
+        <select class="form-control" id="vm-create-network-add-managed" multiple>
+          {% for v in vlans %}
+            <option value="{{ v.pk }}">{{ v.name }}</option>
+          {% endfor %}
+        </select>
+
+        <h4>Unmanaged networks</h4>
+        <select class="form-control" id="vm-create-network-add-unmanaged" multiple>
+          {% for v in vlans %}
+            <option value="{{ v.pk }}">{{ v.name }}</option>
+          {% endfor %}
+        </select>
+      </div>
       <div class="no-js-hidden">
         <h3 id="vm-create-network-list" class="no-js-hidden">
           Not added to any network!
         </h3>
         <h3 id="vm-create-network-add">
-          <div class="input-group" style="max-width: 300px;">
+          <div class="input-group" style="max-width: 330px;">
             <select class="form-control" id="vm-create-network-add-select">         
-              <option value="1|1">vmnet2</option>
-              <option value="2|0">PUB</option>
-              <option value="3|0">OFF</option>
+              <!-- options should be copied via js from above -->
             </select>
+            <span class="input-group-addon">
+              <input id="vm-create-network-add-checkbox-managed" type="checkbox" title data-original-title="Managed network?" style="-webkit-transform: scale(1.4, 1.4); margin-top: 4px;" checked/>
+            </span>
             <div class="input-group-btn">
               <!--<input type="submit" value="Add to network" class="btn btn-success"/>-->
               <a href="#" id="vm-create-network-add-button" class="btn btn-success"><i class="icon-plus-sign"></i></a>

circle/dashboard/views.py

@@ -5,6 +5,7 @@ from django_tables2 import SingleTableView
 from tables import VmListTable
 
 from vm.models import Instance, InstanceTemplate, InterfaceTemplate
+from firewall.models import Vlan
 from django.core import signing
 
 import json
@@ -108,9 +109,10 @@ class VmCreate(TemplateView):
 
     def get_context_data(self, **kwargs):
         context = super(VmCreate, self).get_context_data(**kwargs)
+        # TODO acl
         context.update({
-            # TODO acl
-            'templates': InstanceTemplate.objects.all()
+            'templates': InstanceTemplate.objects.all(),
+            'vlans': Vlan.objects.all()
         })
 
         return context