Implement OPNFV workflow

This is a counterpart to an update to network models,
and allows for configuring baremetal OPNFV and Openstack deploys

Change-Id: I0185dbfa6c9105d7e63a7e7d7dd1f5cf228a8877
Signed-off-by: Sawyer Bergeron <sbergeron@iol.unh.edu>
Signed-off-by: Parker Berberian <pberberian@iol.unh.edu>

1 files changed, 41 insertions, 88 deletions

diff --git a/dashboard/src/templates/config_bundle/steps/define_software.html b/dashboard/src/templates/config_bundle/steps/define_software.html
index 8e7be91..ba1ff34 100644
--- a/dashboard/src/templates/config_bundle/steps/define_software.html
+++ b/dashboard/src/templates/config_bundle/steps/define_software.html
@@ -1,102 +1,55 @@
-{% extends "workflow/viewport-element.html" %}
-{% load staticfiles %}
+{% extends "config_bundle/steps/table_formset.html" %}
 
 {% load bootstrap3 %}
 
+{% block table %}
+    <thead>
+        <tr>
+            <th>Device</th>
+            <th>Image</th>
+            <th>HeadNode</th>
+        </tr>
+    </thead>
+    <tbody>
+{% for form in formset %}
+    <tr>
+        <td>{% bootstrap_field form.host_name show_label=False %}</td>
+        <td>{% bootstrap_field form.image show_label=False %}</td>
+        <td class="table_hidden_input_parent">
+            <input id="radio_{{forloop.counter}}" class="my_radio" type="radio" name="headnode" value="{{forloop.counter}}">
+            {{ form.headnode }}
+        </td>
+    </tr>
+{% endfor %}
+{{formset.management_form}}
+
+{% endblock table %}
+
+{% block tablejs %}
+<script>
+
+    document.getElementById("radio_{{headnode}}").checked = true;
+
+</script>
+{% endblock tablejs %}
 
-{% block extrahead %}
-    <!-- DataTables CSS -->
-    <link href="{% static "bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css" %}"
-          rel="stylesheet">
 
-    <!-- DataTables Responsive CSS -->
-    <link href="{% static "bower_components/datatables-responsive/css/dataTables.responsive.css" %}" rel="stylesheet">
-{% endblock extrahead %}
-
-{% block content %}
-{% if error %}
-    <h1 style="text-align:center;">{{ error }}</h1>
-{% else %}
-    <form style="width: 90%; margin: 5%;" method="post" action="" class="form" id="softwaredefinitionform">
-        {% csrf_token %}
-
-    <div class="row">
-        <div class="col-lg-12">
-                    <div class="dataTables_wrapper">
-                        <table class="table table-striped table-bordered table-hover" id="table" cellspacing="0"
-                               width="100%">
-
-                            {% block table %}
-                                <thead>
-                                    <tr>
-                                        <th>Device</th>
-                                        <th>Role</th>
-                                        <th>Image</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                            {% for form in formset %}
-                                <tr>
-                                {% for field in form %}
-                                    <td>{{ field }}</td>
-                                {% endfor %}
-                                </tr>
-                            {% endfor %}
-                            {{formset.management_form}}
-
-                            {% endblock table %}
-
-                        </table>
-                    </div>
-                    <!-- /.table-responsive -->
-                <!-- /.panel-body -->
-            <!-- /.panel -->
-        </div>
-        <!-- /.col-lg-12 -->
-    </div>
-    </form>
-
-    <script>
-function filter_images(){
-    var filter_data = {{filter_data|safe}};
-    for(var key in filter_data){
-        var dropdown = document.getElementById(key);
-        var to_remove = filter_data[key];
-        for(var i=0; i<to_remove.length; i++){
-            for(var j=dropdown.children.length-1; j>=0; j--){
-                if(dropdown.children[j].text == to_remove[i]){
-                    dropdown.removeChild(dropdown.children[j]);
-                }
-            }
-        }
+{% block onleave %}
+var parents = document.getElementsByClassName("table_hidden_input_parent");
+for(var i=0; i<parents.length; i++){
+    var node = parents[i];
+    var radio = node.getElementsByClassName("my_radio")[0];
+    var checkbox = radio.nextElementSibling;
+    if(radio.checked){
+        checkbox.value = "True";
     }
 }
 
-filter_images();
-    </script>
-{% endif %}
-{% endblock content %}
-
-{% block extrajs %}
-    {{ block.super }}
-    <!-- DataTables JavaScript -->
-
-    <script src={% static "bower_components/datatables/media/js/jquery.dataTables.min.js" %}></script>
-    <script src={% static "bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.min.js" %}></script>
-
-    <script src={% static "js/dataTables-sort.js" %}></script>
-
-    {% block tablejs %}
-    {% endblock tablejs %}
-{% endblock extrajs %}
-
-
-{% block onleave %}
-var form = $("#softwaredefinitionform");
+var form = $("#table_formset");
 var formData = form.serialize();
 var req = new XMLHttpRequest();
 req.open("POST", "/wf/workflow/", false);
 req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 req.onerror = function() { alert("problem with form submission"); }
 req.send(formData);
-{% endblock %}
+{% endblock onleave %}