dashboard: vm create UI improvements

circle/dashboard/static/dashboard/dashboard.js

@@ -59,6 +59,60 @@ $(function () {
   vmCreateLoaded();
 });
 
+function vmCreateTemplateChange(new_this) {
+  this.value = new_this.value;
+  if(this.value < 0) return;
+  $.ajax({
+    url: '/dashboard/template/' + this.value,
+    type: 'GET',
+    success: function(data, textStatus, xhr) {
+      if(xhr.status == 200) {
+       // set sliders
+        $('#cpu-priority-slider').simpleSlider("setValue", data['priority']);
+        $('#cpu-count-slider').simpleSlider("setValue", data['num_cores']);
+        $('#ram-slider').simpleSlider("setValue", data['ram_size']);
+
+        $('#vm-create-network-list').html('');
+        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)
+          );
+        }
+        vmCreateAddRemoveNetworkClick();
+      }
+    }
+  });
+}
+
+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> ';
+
+}
+
+// #TODO this doesn't feel right
+function vmCreateAddRemoveNetworkClick() {
+    $('.vm-create-remove-network').click(function() {
+      var vlan_pk = ($(this).parent('span').prop('id')).replace('vlan-', '');
+      $(this).parent('span').fadeOut(500, function() { 
+        $(this).remove(); 
+        var vlan_name = $(this).text();
+
+        $('#vm-create-network-add-select').append($('<option>', {
+          value: vlan_pk,
+          text: vlan_name
+        }));
+
+        if ($('#vm-create-network-list').children('span').length < 1) {
+          $('#vm-create-network-list').append('Not added to any network!');
+        }
+      
+
+      });
+      return false;
+  });
+}
+
 function vmCreateLoaded() {
   // temporarily disable for testing
   //$('.vm-create-advanced').hide();
@@ -71,6 +125,25 @@ function vmCreateLoaded() {
     } 
   });
   
+  $('#vm-create-template-select').change(function() {
+    vmCreateTemplateChange(this);
+  });
+ 
+  $('#vm-create-network-add-button').click(function() {
+    var option = $('#vm-create-network-add-select :selected');
+    if(option.val() > 0) {
+      if ($('#vm-create-network-list').children('span').length < 1) { 
+        $('#vm-create-network-list').html('');
+      }  
+      $('#vm-create-network-list').append(
+        vmCreateNetworkLabel(option.val(), option.text(), true)
+      );
+      $('option:selected', $('#vm-create-network-add-select')).remove();
+      vmCreateAddRemoveNetworkClick();
+    }
+
+    return false;
+  });
 
   $("[data-slider]").each(function() {
     if($(this).css('display') != "none") 

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

-
 <style>
   .row {
     margin-bottom: 15px;
@@ -6,12 +5,11 @@
 </style>
 <div class="row">
   <div class="col-sm-10">
-  <select class="select form-control">
-    <option>Menő gép</option>
-    <option>Menő gép</option>
-    <option>Menő gép</option>
-    <option>Menő gép</option>
-    <option>Menő gép</option>
+  <select class="select form-control" id="vm-create-template-select">
+    <option value="-1">Choose a VM template</option>
+    {% for template in templates %}
+      <option value="{{ template.pk }}">{{ template.name}}</option>
+    {% endfor %}
   </select>
   </div>
 </div> 
@@ -43,7 +41,7 @@
       </h3>
       <h3>
         <div class="input-group" style="max-width: 300px;">
-          <select class="form-control">         
+          <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>
@@ -74,20 +72,19 @@
       }
     </style>
     <div class="col-sm-8" style="padding-top: 3px;">
-      <h3>
-        <span class="label label-primary"><i class="icon-globe"></i> vmnet  <a href="#" class="hover-black"><i class="icon-remove-sign"></i></a></span>
-        <span class="label label-default"><i class="icon-link"></i> grid <a href="#" class="hover-black"><i class="icon-remove-sign hover-danger"></i></a></span>
+      <h3 id="vm-create-network-list">
+        Not added to any network!
       </h3>
-      <h3>
+      <h3 id="vm-create-network-add">
         <div class="input-group" style="max-width: 300px;">
-          <select class="form-control">         
+          <select class="form-control" id="vm-create-network-add-select">         
             <option value="1">vmnet2</option>
             <option value="2">PUB</option>
             <option value="3">OFF</option>
           </select>
           <div class="input-group-btn">
             <!--<input type="submit" value="Add to network" class="btn btn-success"/>-->
-            <a href="" class="btn btn-success"><i class="icon-plus-sign"></i></a>
+            <a href="#" id="vm-create-network-add-button" class="btn btn-success"><i class="icon-plus-sign"></i></a>
           </div>
         </div>
       </h3>

circle/dashboard/urls.py

 from django.conf.urls import patterns, url
 
-from .views import IndexView, VmDetailView, VmList, VmCreate
+from .views import IndexView, VmDetailView, VmList, VmCreate, TemplateDetail
 
 urlpatterns = patterns(
     '',
     url(r'^$', IndexView.as_view()),
+    url(r'^template/(?P<pk>\d+)/$', TemplateDetail.as_view(),
+        name='dashboard.views.template-detail'),
     url(r'^vm/(?P<pk>\d+)/$', VmDetailView.as_view(),
         name='dashboard.views.detail'),
     url(r'^vm/list/$', VmList.as_view(), name='dashboard.views.vm-list'),

circle/dashboard/views.py

+from django.http import HttpResponse
 from django.views.generic import TemplateView, DetailView
 from django_tables2 import SingleTableView
 
 from tables import VmListTable
 
-from vm.models import Instance
+from vm.models import Instance, InstanceTemplate, InterfaceTemplate
 from django.core import signing
 
+import json
+
 
 class IndexView(TemplateView):
     template_name = "dashboard/index.html"
@@ -50,6 +53,37 @@ class VmDetailView(DetailView):
         return context
 
 
+class TemplateDetail(DetailView):
+    model = InstanceTemplate
+
+    def get(self, request, *args, **kwargs):
+        if request.is_ajax():
+            template = InstanceTemplate.objects.get(pk=kwargs['pk'])
+            template = {
+                'num_cores': template.num_cores,
+                'ram_size': template.ram_size,
+                'priority': template.priority,
+                'arch': template.arch,
+                'description': template.description,
+                'system': template.system,
+                'name': template.name,
+                'disks': [{'pk': d.pk, 'name': d.name}
+                          for d in template.disks.all()],
+                'network': [
+                    {'vlan_pk': i.vlan.pk, 'vlan': i.vlan.name,
+                     'managed': i.managed}
+                    for i in InterfaceTemplate.objects.filter(
+                        template=self.get_object()).all()
+                ]
+            }
+            print template
+            return HttpResponse(json.dumps(template),
+                                content_type="application/json")
+        else:
+            # return super(TemplateDetail, self).get(request, *args, **kwargs)
+            return HttpResponse('soon')
+
+
 class VmList(SingleTableView):
     template_name = "dashboard/vm-list.html"
     model = Instance
@@ -73,3 +107,12 @@ class VmCreate(TemplateView):
                 'box_title': 'Create a VM'
             })
         return self.render_to_response(context)
+
+    def get_context_data(self, **kwargs):
+        context = super(VmCreate, self).get_context_data(**kwargs)
+        context.update({
+            # TODO acl
+            'templates': InstanceTemplate.objects.all()
+        })
+
+        return context

[Kálmán Viktor]

http://stackoverflow.com/a/9331127/1112653