Add vue.js and try it in network creation

.idea/watcherTasks.xml

-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectTasksOptions">
-    <TaskOptions isEnabled="true">
-      <option name="arguments" value="--no-color $FileName$" />
-      <option name="checkSyntaxErrors" value="true" />
-      <option name="description" />
-      <option name="exitCodeBehavior" value="ERROR" />
-      <option name="fileExtension" value="less" />
-      <option name="immediateSync" value="true" />
-      <option name="name" value="Less" />
-      <option name="output" value="$FileNameWithoutExtension$.css" />
-      <option name="outputFilters">
-        <array>
-          <FilterInfo>
-            <option name="description" value="" />
-            <option name="name" value="" />
-            <option name="regExp" value="$MESSAGE$\Q in \E$FILE_PATH$\Q on line \E$LINE$\Q, column \E$COLUMN$" />
-          </FilterInfo>
-        </array>
-      </option>
-      <option name="outputFromStdout" value="true" />
-      <option name="program" value="/usr/local/bin/lessc" />
-      <option name="runOnExternalChanges" value="true" />
-      <option name="scopeName" value="Project Files" />
-      <option name="trackOnlyRoot" value="false" />
-      <option name="workingDir" value="$FileDir$" />
-      <envs />
-    </TaskOptions>
-  </component>
-</project>
\ No newline at end of file

circle/bower.json

@@ -23,9 +23,9 @@
     "datatables": "~1.10.4",
     "chart.js": "2.3.0",
     "clipboard": "~1.6.1",
-    "jsPlumb": "2.5.7",
     "d3": "3.5.16",
     "hogan.js": "hogan#^3.0.2",
-    "angular": "1.5.8"
+    "angular": "1.5.8",
+    "vue": "^2.5.13"
   }
 }

circle/circle/settings/base.py

@@ -187,6 +187,7 @@ PIPELINE = {
             "network/network.less",
             "autocomplete_light/vendor/select2/dist/css/select2.css",
             "autocomplete_light/select2.css",
+            "vue.css",
         ),
             "output_filename": "all.css",
         }
@@ -266,6 +267,11 @@ PIPELINE = {
         ),
             "output_filename": "editor.js",
         },
+        "new-network": {"source_filenames": (
+            "vue/dist/vue.js",
+        ),
+            "output_filename": "new-network.js",
+        },
     },
 }
 

circle/network/forms.py

@@ -379,4 +379,7 @@ class VxlanForm(forms.Form):
         'class': "form-control",
         'required': "",
     }))
+    networkAddress = forms.CharField(required=False)
+    isDhcpEnabled = forms.BooleanField(required=False)
 
+    #TODO: validate

circle/network/templates/network/vxlan-create.html

@@ -4,6 +4,7 @@
 {% load l10n %}
 {% load staticfiles %}
 {% load crispy_forms_tags %}
+{% load pipeline %}
 
 {% block title-page %}{% trans "Create" %} | {% trans "network" %}{% endblock %}
 
@@ -16,9 +17,35 @@
     <form method="POST">
     {% csrf_token %}
     {{ form.name|as_crispy_field }}
+      {% verbatim %}
+        <div id="vuepart" v-bind:class="{ well: isAdvancedConfig }">
+          <input v-model="isAdvancedConfig" type="checkbox"> Advanced configuration
+          <div v-cloak v-if="isAdvancedConfig">
+            <div class="form-group">
+              <label for="id_network_address"> Network address <i class="asteriskField">*</i></label>
+              <input type="text" name="name" required class="form-control textinput textInput form-control" id="id_network_address">
+
+              <input name="isDhcpEnabled" type="checkbox"> Enable DHCP
+            </div>
+          </div>
+        </div>
+      {% endverbatim %}
     <button class="btn btn-success pull-right text-right" type="submit">
       <i class="fa fa-plus"></i> {% trans "Create" %}
     </button>
   </form>
 </div>
 {% endblock %}
+
+{% block extra_js %}
+  {% javascript 'new-network' %}
+
+  <script>
+      var app = new Vue({
+        el: '#vuepart',
+        data: {
+          isAdvancedConfig: false
+        }
+      })
+  </script>
+{% endblock %}