dashboard: improve vm create

circle/dashboard/static/dashboard/dashboard.js

@@ -4,12 +4,27 @@ $(function () {
       type: 'GET',
       type: 'GET',
       url: '/dashboard/vm/create/', 
       url: '/dashboard/vm/create/', 
       success: function(data) { 
       success: function(data) { 
-        // TODO this is ugly
-        var html = '<div class="modal fade" id="vm-create-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button><h4 class="modal-title">Modal title</h4></div><div class="modal-body"> ' +
-        data + 
-        '</div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button><button type="button" class="btn btn-primary">Save changes</button></div></div><!-- /.modal-content --></div><!-- /.modal-dialog --></div><!-- /.modal -->';
+        // TODO this is still ugly
+        var html = '<div class="modal fade" id="vm-create-modal" tabindex="-1" role="dialog">' +
+                    '<div class="modal-dialog">' +
+                      '<div class="modal-content">' +
+                        '<div class="modal-header">' +
+                          '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
+                          '<h4 class="modal-title">Create VM</h4>' +
+                        '</div>' +
+                        '<div class="modal-body"> ' +
+                          data +
+                        '</div>' +
+                      /*'<div class="modal-footer">' +
+                          '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>' +
+                          '<button type="button" class="btn btn-primary">Save changes</button>' +
+                        '</div>' + */
+                      '</div><!-- /.modal-content -->' +
+                     '</div><!-- /.modal-dialog -->' +
+                    '</div><!-- /.modal -->';
 
 
         $('.container').append(html);
         $('.container').append(html);
+        vmCreateLoaded();
         $('#vm-create-modal').modal('show');
         $('#vm-create-modal').modal('show');
         $('#vm-create-modal').on('hidden.bs.modal', function() {
         $('#vm-create-modal').on('hidden.bs.modal', function() {
           $('#vm-create-modal').remove();
           $('#vm-create-modal').remove();
@@ -53,10 +68,22 @@ $(function () {
     $("[data-mark]")
     $("[data-mark]")
         .each(function () {
         .each(function () {
             var value=$(this).attr('data-mark').parseFloat();
             var value=$(this).attr('data-mark').parseFloat();
-
-
-        });
+    });
     if (window.location.hash)
     if (window.location.hash)
         $("a[href=" + window.location.hash +"]").tab('show');
         $("a[href=" + window.location.hash +"]").tab('show');
+
+    vmCreateLoaded();
 });
 });
 
 
+function vmCreateLoaded() {
+  $('.vm-create-advanced').hide();
+  $('.vm-create-advanced-btn').click(function() {
+    $('.vm-create-advanced').stop().slideToggle();
+    if ($('.vm-create-advanced-icon').hasClass('icon-caret-down')) {
+      $('.vm-create-advanced-icon').removeClass('icon-caret-down').addClass('icon-caret-up');
+    } else { 
+      $('.vm-create-advanced-icon').removeClass('icon-caret-up').addClass('icon-caret-down');
+    } 
+  });
+}
+

circle/dashboard/templates/dashboard/ajax-wrapper.html

 {% extends "dashboard/base.html" %}
 {% extends "dashboard/base.html" %}
 
 
 {% block content %}
 {% block content %}
-    {% include template %}
+  <div class="body-content">
+    <div class="panel panel-default">
+      <div class="panel-heading">
+        <h3 class="no-margin">
+          {{ box_title }}
+        </h3>
+      </div>
+      <div class="panel-body">
+        {% include template %}
+      </div>
+  </div>
 {% endblock %}
 {% endblock %}

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

-Create a VM
+
+<style>
+  .row {
+    margin-bottom: 15px;
+  }
+</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>
+  </div>
+</div> 
+
+<div class="row">
+  <div class="col-sm-5">
+    <a class="btn btn-info vm-create-advanced-btn">Advanced <i class="vm-create-advanced-icon icon-caret-down"></i></a>
+  </div>
+  <div class="col-sm-5 text-right">
+    <a class="btn btn-success "><i class="icon-play"></i> Start</a>
+  </div>
+</div>
+
+<div class="vm-create-advanced">
+  <div class="row">
+    <div class="col-sm-12">
+      <h2>Resources</h2>
+    </div>
+    {% include "dashboard/vm-detail-resources.html" %}
+  </div>
+
+  <div class="row">
+    <div class="col-sm-12">
+      <h2>Disks</h2>
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="col-sm-12">
+      <h2>Network</h2>
+    </div>
+  </div>
+</div>

circle/dashboard/views.py

@@ -65,6 +65,7 @@ class VmCreate(TemplateView):
         context = self.get_context_data(**kwargs)
         context = self.get_context_data(**kwargs)
         if not request.is_ajax():
         if not request.is_ajax():
             context.update({
             context.update({
-                'template': 'dashboard/vm-create.html'
+                'template': 'dashboard/vm-create.html',
+                'box_title': 'Create a VM'
             })
             })
         return self.render_to_response(context)
         return self.render_to_response(context)