Replace and change CSS

Fix animation bugs
Fix layout issues
Replace custom CSS to bootstrap classes
Remove unused files
Change code to use es6 syntax
Add dropdown styles

Change-Id: Ie2ed31fa2e6763cf30d3b19e4bf9379019cbb0f5
Signed-off-by: Brandon Lo <lobrandon1217@gmail.com>

4 files changed, 23 insertions, 233 deletions

diff --git a/src/templates/booking/steps/booking_confirm.html b/src/templates/booking/steps/booking_confirm.html
deleted file mode 100644
index 40c30a9..0000000
--- a/src/templates/booking/steps/booking_confirm.html
+++ /dev/null
@@ -1,25 +0,0 @@
-{% extends "workflow/viewport-element.html" %}
-{% load staticfiles %}
-
-{% load bootstrap4 %}
-
-{% block content %}
-
-<style>
-    #form_div {
-        width: 100%;
-        padding: 5%;
-        text-align: center;
-    }
-</style>
-
-<div id="form_div">
-<p>confirm booking</p>
-<p>{{info|default:"booking info"}}</p>
-<form action="/wf/workflow/" method="post">
-    {% csrf_token %}
-    {{form|default:"<p> No Form Loaded</p>"}}
-    <input type="submit" value="Submit" style="display: none;"/>
-</form>
-</div>
-{% endblock content %}
\ No newline at end of file
diff --git a/src/templates/booking/steps/booking_meta.html b/src/templates/booking/steps/booking_meta.html
index 710d4ee..a7bb8b9 100644
--- a/src/templates/booking/steps/booking_meta.html
+++ b/src/templates/booking/steps/booking_meta.html
@@ -5,72 +5,33 @@
 
 {% block content %}
 
-<style>
-    .bkmeta_panel {
-        padding: 5%;
-    }
-
-    .bkcontrib_panel {
-        display: flex;
-        flex-direction: column;
-    }
-
-    .bkcontrib_panel > .form-group {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-    }
-
-    .panel{
-        padding: 5%;
-        /*border: solid 1px black;*/
-    }
-
-    .panel_wrap {
-        width: 100%;
-        display: grid;
-        grid-template-columns: 45% 10% 45%;
-        border: none;
-    }
-
-    #id_length {
-        -moz-appearance: none;
-        border: none;
-        box-shadow: none;
-    }
-    input[type=range]::-moz-range-track {
-        background: #cccccc;
-    }
-</style>
-
 {% bootstrap_form_errors form type='non_fields' %}
 <form id="booking_meta_form" action="/wf/workflow/" method="POST" class="form">
 {% csrf_token %}
-<div id="form_div">
-    <div class="panel_wrap">
-    <div class="panel bkmeta_panel">
-        {% bootstrap_field form.purpose %}
-        {% bootstrap_field form.project %}
-        {% bootstrap_field form.length %}
-        <p style="display:inline;">Days: </p><output id="daysout" style="display:inline;">0</output>
-        <script>
-            document.getElementById("id_length").setAttribute("oninput", "daysout.value=this.value");
-            document.getElementById("daysout").value = document.getElementById("id_length").value;
-        </script>
-        {% bootstrap_field form.info_file %}
-        <p>You must provide a url to your project's INFO.yaml file if you are a PTL and you are trying to book a POD with multiple servers in it.</p>
-        {% bootstrap_field form.deploy_opnfv %}
-    </div>
-    <div class="panel panel_center">
-    </div>
-    <div class="panel bkcontrib_panel">
-        <p>You may add collaborators on your booking to share resources with coworkers.</p>
-        {% bootstrap_field form.users label="Collaborators" %}
+<div id="form_div" class="container-fluid">
+    <div class="row">
+        <div class="p-4 col">
+            {% bootstrap_field form.purpose %}
+            {% bootstrap_field form.project %}
+            {% bootstrap_field form.length %}
+            <span>Days: </span><output id="daysout">0</output>
+            <script>
+                document.getElementById("id_length").oninput = function() { daysout.value=this.value; }
+                document.getElementById("daysout").value = document.getElementById("id_length").value;
+            </script>
+            {% bootstrap_field form.info_file %}
+            <p>You must provide a url to your project's INFO.yaml file if you are a PTL and you are trying to book a POD with multiple servers in it.</p>
+            {% bootstrap_field form.deploy_opnfv %}
+        </div>
+        <div class="p-4 col">
+            <p>You may add collaborators on your booking to share resources with coworkers.</p>
+            {% bootstrap_field form.users label="Collaborators" %}
+        </div>
     </div>
-
-    {% buttons %}
-    <button type="submit" style="display: none;" class="btn btn-success">Confirm</button>
-    {% endbuttons %}
+    <div class="panel_wrap">
+        {% buttons %}
+            <button type="submit" class="btn btn-success d-none">Confirm</button>
+        {% endbuttons %}
     </div>
 </div>
 </form>
diff --git a/src/templates/booking/steps/resource_select.html b/src/templates/booking/steps/resource_select.html
deleted file mode 100644
index 382316f..0000000
--- a/src/templates/booking/steps/resource_select.html
+++ /dev/null
@@ -1,73 +0,0 @@
-{% extends "workflow/viewport-element.html" %}
-{% load staticfiles %}
-
-{% load bootstrap4 %}
-
-{% block content %}
-
-<style>
-    #resource_form_div {
-        width: 100%;
-        padding: 5%;
-    }
-
-    .panel {
-        /*border: solid 1px black;*/
-        border: none;
-    }
-    .select_panels {
-        width: 100%;
-        display: grid;
-        grid-template-columns: 45% 10% 45%;
-
-    }
-
-    .panel_center {
-        text-align: center;
-        border: none;
-
-
-    }
-    .panel_center p{
-        font-size: 20pt;
-    }
-</style>
-
-<div id="resource_form_div">
-    <div class="select_panels">
-        <div class="panel_chooser panel">
-    <form id="resource_select_form" method="post" action="" class="form" id="resourceselectorform">
-        {% csrf_token %}
-        {{ form|default:"<p>no form loaded</p>" }}
-        {% buttons %}
-
-        {% endbuttons %}
-    </form>
-    </div>
-    <div class="panel_center panel"><p>OR</p></div>
-    <div class="panel_add panel">
-        <button class="btn {% if disabled %} disabled {% endif %}"
-        style="width: 100%; height: 100%;"
-        {% if not disabled %}onclick="parent.add_wf(1)"
-        {% endif %}>Create Resource</button>
-    </div>
-
-</div>
-</div>
-<script>
-    {% if disabled %}
-    disable();
-    {% endif %}
-</script>
-
-{% endblock content %}
-{% block onleave %}
-var form = $("#resource_select_form");
-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 %}
-
diff --git a/src/templates/booking/steps/swconfig_select.html b/src/templates/booking/steps/swconfig_select.html
deleted file mode 100644
index 60a0df7..0000000
--- a/src/templates/booking/steps/swconfig_select.html
+++ /dev/null
@@ -1,73 +0,0 @@
-{% extends "workflow/viewport-element.html" %}
-{% load staticfiles %}
-
-{% load bootstrap4 %}
-
-{% block content %}
-
-<style>
-    #sw_form_div {
-        width: 100%;
-        padding: 5%;
-    }
-
-    .panel {
-        /*border: solid 1px black;*/
-        border: none;
-    }
-    .select_panels {
-        width: 100%;
-        display: grid;
-        grid-template-columns: 45% 10% 45%;
-
-    }
-
-    .panel_center {
-        text-align: center;
-        border: none;
-
-
-    }
-    .panel_center p{
-        font-size: 20pt;
-    }
-</style>
-
-<div id="sw_form_div">
-    <div class="select_panels">
-        <div class="panel_chooser panel">
-    <form id="software_select_form" method="post" action="" class="form" id="swselectorform">
-        {% csrf_token %}
-        {{ form|default:"<p>no form loaded</p>" }}
-        {% buttons %}
-
-        {% endbuttons %}
-    </form>
-    </div>
-    <div class="panel_center panel"><p>OR</p></div>
-    <div class="panel_add panel">
-        <button class="btn {% if disabled %} disabled {% endif %}"
-        style="width: 100%; height: 100%;"
-        {% if not disabled %}onclick="parent.add_wf(2)"
-        {% endif %}>Create Config</button>
-    </div>
-    <script>
-        {% if disabled %}
-        disable();
-        {% endif %}
-    </script>
-
-</div>
-</div>
-
-{% endblock content %}
-
-{% block onleave %}
-var form = $("#software_select_form");
-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 %}