dashboard: vm create finished disks part

circle/dashboard/static/dashboard/vm-create.js

 var vlans = [];
 var vlans = [];
+var disks = [];
 function vmCreateLoaded() {
 function vmCreateLoaded() {
   // temporarily disable for testing
   // temporarily disable for testing
   //$('.vm-create-advanced').hide();
   //$('.vm-create-advanced').hide();
@@ -15,6 +16,8 @@ function vmCreateLoaded() {
     vmCreateTemplateChange(this);
     vmCreateTemplateChange(this);
   });
   });
  
  
+  /* network thingies */
+
   /* 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();
@@ -48,7 +51,6 @@ function vmCreateLoaded() {
 
 
   /* remove network */
   /* remove network */
   // event for network remove button (icon, X)
   // event for network remove button (icon, X)
-  // TODO still not the right place (wrong file ...)
   $('body').on('click', '.vm-create-remove-network', function() {
   $('body').on('click', '.vm-create-remove-network', function() {
     var vlan_pk = ($(this).parent('span').prop('id')).replace('vlan-', '')
     var vlan_pk = ($(this).parent('span').prop('id')).replace('vlan-', '')
     // if it's "blue" then it's managed, kinda not cool
     // if it's "blue" then it's managed, kinda not cool
@@ -91,6 +93,77 @@ function vmCreateLoaded() {
     });
     });
   });
   });
 
 
+  /* ----- end of networks thingies ----- */
+
+
+  /* add disk */
+  $('#vm-create-disk-add-button').click(function() {
+    var disk_pk = $('#vm-create-disk-add-select :selected').val();
+    var name = $('#vm-create-disk-add-select :selected').text();
+
+    if ($('#vm-create-disk-list').children('span').length < 1) { 
+      $('#vm-create-disk-list').html('');
+    }  
+    $('#vm-create-disk-list').append(
+      vmCreateDiskLabel(disk_pk, name)
+    );
+
+    /* select the disk from the multiple select */
+    $('#vm-create-disk-add-form option[value="' + disk_pk + '"]').prop('selected', true);
+
+    $('option:selected', $('#vm-create-disk-add-select')).remove();
+    
+    /* add dummy text if no more disks are available */
+    if($('#vm-create-disk-add-select option').length < 1) {
+      $('#vm-create-disk-add-button').attr('disabled', true);
+      $('#vm-create-disk-add-select').html('<option value="-1">We are out of &lt;options&gt; hehe</option>');
+    }
+
+    return false;
+  });
+
+
+  /* remove disk */
+  // event for disk remove button (icon, X)
+  $('body').on('click', '.vm-create-remove-disk', function() {
+    var disk_pk = ($(this).parent('span').prop('id')).replace('vlan-', '')
+
+    $(this).parent('span').fadeOut(500, function() {
+      /* if ther are no more disks disabled the add button */
+      if($('#vm-create-disk-add-select option')[0].value == -1) {   
+        $('#vm-create-disk-add-button').attr('disabled', false);            
+        $('#vm-create-disk-add-select').html('');
+      }
+      
+      /* remove the disk label */
+      $(this).remove(); 
+
+      var disk_name = $(this).text();
+      $('#vm-create-disk-add-select').append($('<option>', {
+        value: disk_pk,
+        text: disk_name
+      }));
+
+      /* remove the selection from the multiple select */
+      $('#vm-create-disk-add-form option[value="' + disk_pk + '"]').prop('selected', false);
+      if ($('#vm-create-disk-list').children('span').length < 1) {
+        $('#vm-create-disk-list').append('No disks are added!');
+      }
+    });
+    return false;
+  });
+
+  /* copy disks from hidden select */
+  $('#vm-create-disk-add-select').html($('#vm-create-disk-add-form').html());
+
+
+  /* build up disk list */
+  $('#vm-create-disk-add-select option').each(function() {
+    disks.push({
+      'name': $(this).text(),
+      'pk': parseInt($(this).val())
+    });
+  });
   /* no js compatibility */
   /* no js compatibility */
   $('.no-js-hidden').show();
   $('.no-js-hidden').show();
   $('.js-hidden').hide();
   $('.js-hidden').hide();
@@ -109,8 +182,9 @@ function vmCreateTemplateChange(new_this) {
         $('#cpu-count-slider').simpleSlider("setValue", data['num_cores']);
         $('#cpu-count-slider').simpleSlider("setValue", data['num_cores']);
         $('#ram-slider').simpleSlider("setValue", data['ram_size']);
         $('#ram-slider').simpleSlider("setValue", data['ram_size']);
 
 
-        /* clear selection */
+        /* clear selections */
         $('select[id^="vm-create-network-add"], select[id$="managed"]').find('option').prop('selected', false);
         $('select[id^="vm-create-network-add"], select[id$="managed"]').find('option').prop('selected', false);
+         $('#vm-create-disk-add-form').find('option').prop('selected', false);
 
 
         /* append vlans from InterfaceTemplates */
         /* append vlans from InterfaceTemplates */
         $('#vm-create-network-list').html('');
         $('#vm-create-network-list').html('');
@@ -141,6 +215,37 @@ function vmCreateTemplateChange(new_this) {
           $('#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">We are out of &lt;options&gt; hehe</option>');
           $('#vm-create-network-add-button').attr('disabled', true);
           $('#vm-create-network-add-button').attr('disabled', true);
         }
         }
+
+
+        /* append disks */
+        $('#vm-create-disk-list').html('');
+        var added_disks = []
+        for(var d = 0; d<data['disks'].length; d++) {
+          dd = data['disks'][d]
+          $('#vm-create-disk-list').append(
+              vmCreateDiskLabel(dd.pk, dd.name)
+          );
+          
+          $('#vm-create-disk-add-form option[value="' + dd.pk + '"]').prop('selected', true);
+          added_disks.push(dd.pk);
+        }
+
+        /* remove already added disks from dropdown or add new ones */
+        $('#vm-create-disk-add-select').html('');
+        for(var i=0; i < disks.length; i++)
+          if(added_disks.indexOf(disks[i].pk) == -1)
+            $('#vm-create-disk-add-select').append($('<option>', {
+              value: disks[i].pk,                                                     
+              text: disks[i].name                                                     
+            }));
+       
+        /* enalbe the disk add button if there are not added disks */
+        if(added_disks.length != disks.length) {
+          $('#vm-create-disk-add-button').attr('disabled', false);
+        } else {
+          $('#vm-create-disk-add-select').html('<option value="-1">We are out of &lt;options&gt; hehe</option>');
+          $('#vm-create-disk-add-button').attr('disabled', true);
+        }
       }
       }
     }
     }
   });
   });
@@ -149,3 +254,8 @@ function vmCreateTemplateChange(new_this) {
 function vmCreateNetworkLabel(pk, name, managed) {
 function vmCreateNetworkLabel(pk, name, managed) {
   return '<span id="vlan-' + pk + '" class="label label-' +  (managed ? 'primary' : 'default')  + '"><i class="icon-' + (managed ? 'globe' : 'link') + '"></i> ' + name + ' <a href="#" class="hover-black vm-create-remove-network"><i class="icon-remove-sign"></i></a></span> ';
   return '<span id="vlan-' + pk + '" class="label label-' +  (managed ? 'primary' : 'default')  + '"><i class="icon-' + (managed ? 'globe' : 'link') + '"></i> ' + name + ' <a href="#" class="hover-black vm-create-remove-network"><i class="icon-remove-sign"></i></a></span> ';
 }
 }
+
+
+function vmCreateDiskLabel(pk, name) {
+  return '<span id="vlan-' + pk + '" class="label label-primary"><i class="icon-file"></i> ' + name + ' <a href="#" class="hover-black vm-create-remove-disk"><i class="icon-remove-sign"></i></a></span> ';
+}

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

@@ -31,30 +31,39 @@
     {% include "dashboard/vm-detail-resources.html" %}
     {% include "dashboard/vm-detail-resources.html" %}
   </div>
   </div>
 
 
+  <!-- disk -->
   <div class="row">
   <div class="row">
     <div class="col-sm-4">
     <div class="col-sm-4">
       <h2>Disks</h2>
       <h2>Disks</h2>
     </div>
     </div>
     <div class="col-sm-8" style="padding-top: 3px;">
     <div class="col-sm-8" style="padding-top: 3px;">
-      <h3>
-        <span class="label label-primary"><i class="icon-file"></i> default <a href="#" class="hover-black"><i class="icon-remove-sign"></i></a></span>
+      <div class="js-hidden" style="padding-top: 15px;">
+        <select class="form-control" id="vm-create-disk-add-form" multiple>
+          {% for d in disks %}
+            <option value="{{ d.pk }}">{{ d.name }}</option>
+          {% endfor %}
+        </select>
+      </div>
+      <div class="no-js-hidden">
+        <h3 id="vm-create-disk-list">
+          No disks are added!
         </h3>
         </h3>
-      <h3>
-        <div class="input-group" style="max-width: 300px;">
-          <select class="form-control" id="vm-create-disks-add">         
-            <option value="1">yo disk</option>
-            <option value="2">huge</option>
-            <option value="3">minor</option>
+        <h3 id="vm-create-disk-add">
+          <div class="input-group" style="max-width: 330px;">
+            <select class="form-control" id="vm-create-disk-add-select">         
+              <!-- options should be copied via js from above -->
             </select>
             </select>
             <div class="input-group-btn">
             <div class="input-group-btn">
-            <!--<input type="submit" value="Add disk" class="btn btn-success"/>-->
-            <a href="" class="btn btn-success"><i class="icon-plus-sign"></i></a>
+              <!--<input type="submit" value="Add to network" class="btn btn-success"/>-->
+              <a href="#" id="vm-create-disk-add-button" class="btn btn-success"><i class="icon-plus-sign"></i></a>
             </div>
             </div>
           </div>
           </div>
         </h3>
         </h3>
       </div>
       </div>
     </div>
     </div>
+  </div>
 
 
+  <!-- network -->
   <div class="row">
   <div class="row">
     <div class="col-sm-4">
     <div class="col-sm-4">
       <h2>Network</h2> 
       <h2>Network</h2> 
@@ -91,7 +100,7 @@
         </select>
         </select>
       </div>
       </div>
       <div class="no-js-hidden">
       <div class="no-js-hidden">
-        <h3 id="vm-create-network-list" class="no-js-hidden">
+        <h3 id="vm-create-network-list">
           Not added to any network!
           Not added to any network!
         </h3>
         </h3>
         <h3 id="vm-create-network-add">
         <h3 id="vm-create-network-add">

circle/dashboard/views.py

@@ -6,6 +6,7 @@ from tables import VmListTable
 
 
 from vm.models import Instance, InstanceTemplate, InterfaceTemplate
 from vm.models import Instance, InstanceTemplate, InterfaceTemplate
 from firewall.models import Vlan
 from firewall.models import Vlan
+from storage.models import Disk
 from django.core import signing
 from django.core import signing
 
 
 import json
 import json
@@ -112,7 +113,8 @@ class VmCreate(TemplateView):
         # TODO acl
         # TODO acl
         context.update({
         context.update({
             'templates': InstanceTemplate.objects.all(),
             'templates': InstanceTemplate.objects.all(),
-            'vlans': Vlan.objects.all()
+            'vlans': Vlan.objects.all(),
+            'disks': Disk.objects.all()
         })
         })
 
 
         return context
         return context