dashboard: vm create no js compatibility

circle/dashboard/static/dashboard/dashboard.js

@@ -38,6 +38,10 @@ $(function () {
     $("a[href=" + window.location.hash +"]").tab('show');
     $("a[href=" + window.location.hash +"]").tab('show');
 
 
   vmCreateLoaded();
   vmCreateLoaded();
+
+  /* no js compatibility */
+  $('.no-js-hidden').show();
+  $('.js-hidden').hide();
 });
 });
 
 
 function vmCreateTemplateChange(new_this) {
 function vmCreateTemplateChange(new_this) {
@@ -59,6 +63,7 @@ function vmCreateTemplateChange(new_this) {
           $('#vm-create-network-list').append(
           $('#vm-create-network-list').append(
               vmCreateNetworkLabel(nn.vlan_pk, nn.vlan, nn.managed)
               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);
         }
         }
       }
       }
     }
     }
@@ -98,6 +103,7 @@ function vmCreateLoaded() {
     $('#vm-create-network-list').append(
     $('#vm-create-network-list').append(
       vmCreateNetworkLabel(option.val(), option.text(), managed > 0 ? true : false)
       vmCreateNetworkLabel(option.val(), option.text(), managed > 0 ? true : false)
     );
     );
+    $('#vm-create-network-add-form option[value="' + vlan_pk + '|' + (managed ? '1' : '0') + '"]').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 */
@@ -113,22 +119,24 @@ function vmCreateLoaded() {
   // event for network remove button (icon, X)
   // event for network remove button (icon, X)
   // TODO still not the right place
   // TODO still not the right place
   $('body').on('click', '.vm-create-remove-network', function() {
   $('body').on('click', '.vm-create-remove-network', function() {
-    console.log($('#vm-create-network-add-select option').length);
+    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() {  
       if($('#vm-create-network-add-select option')[0].value == -1) {   
       if($('#vm-create-network-add-select option')[0].value == -1) {   
         $('#vm-create-network-add-button').attr('disabled', false);            
         $('#vm-create-network-add-button').attr('disabled', false);            
         $('#vm-create-network-add-select').html('');
         $('#vm-create-network-add-select').html('');
       }
       }
       
       
-    var vlan_pk = ($(this).parent('span').prop('id')).replace('vlan-', '');
-    $(this).parent('span').fadeOut(500, function() { 
       $(this).remove(); 
       $(this).remove(); 
       var vlan_name = $(this).text();
       var vlan_name = $(this).text();
 
 
       $('#vm-create-network-add-select').append($('<option>', {
       $('#vm-create-network-add-select').append($('<option>', {
-        value: vlan_pk,
+        value: vlan_pk + "|" + managed,
         text: vlan_name
         text: vlan_name
       }));
       }));
 
 
+      $('#vm-create-network-add-form option[value="' + vlan_pk + '|' + (managed ? '1' : '0') + '"]').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!');
       }
       }

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

@@ -70,9 +70,19 @@
         color: black /*#d9534f*/;
         color: black /*#d9534f*/;
         text-decoration: none;
         text-decoration: none;
       }
       }
+
+      .no-js-hidden {
+        display: none;
+      }
     </style>
     </style>
     <div class="col-sm-8" style="padding-top: 3px;">
     <div class="col-sm-8" style="padding-top: 3px;">
-      <h3 id="vm-create-network-list">
+      <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="no-js-hidden">
+        <h3 id="vm-create-network-list" class="no-js-hidden">
           Not added to any network!
           Not added to any network!
         </h3>
         </h3>
         <h3 id="vm-create-network-add">
         <h3 id="vm-create-network-add">
@@ -90,4 +100,5 @@
         </h3>
         </h3>
       </div>
       </div>
     </div>
     </div>
+  </div>
 </div>
 </div>