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>

1 files changed, 62 insertions, 78 deletions

diff --git a/src/templates/workflow/confirm.html b/src/templates/workflow/confirm.html
index c1f3440..b7e6c46 100644
--- a/src/templates/workflow/confirm.html
+++ b/src/templates/workflow/confirm.html
@@ -5,26 +5,7 @@
 
 {% block content %}
 
-<style>
-    #form_div {
-        width: 100%;
-        padding: 5%;
-        text-align: center;
-    }
-    #text_display {
-        text-align: left;
-        display: inline-block;
-    }
-    #text_wrapper {
-        text-align: center; /*centers child div*/
-    }
-    p {
-        margin:0;
-        padding:0;
-    }
-</style>
-
-<div style="text-align:center;">
+<div class="text-center">
     <h3>Confirm  Session</h3>
 </div>
 <div id="vlan_warning"></div>
@@ -32,29 +13,34 @@
     {% csrf_token %}
     <input id="vlan_input" name="vlan_input" type="hidden"/>
 </form>
-<div id="text_wrapper">
-    <div id="text_display">
-        <pre>{{confirmation_info|escape}}</pre>
+<div class="container">
+    <div class="row justify-content-center">
+        <div class="col-auto">
+            <pre>{{confirmation_info|escape}}</pre>
+        </div>
     </div>
-</div>
-<div id="form_div">
-<form id="confirmation_form" action="/wf/workflow/" method="post">
-    {% csrf_token %}
-    <div style="display: none;">
-    {{form|default:"<p> No Form Loaded</p>"}}
+    <div class="row">
+        <div class="col">
+            <div id="form_div" class="text-center p-4">
+                <form id="confirmation_form" action="/wf/workflow/" method="post">
+                    {% csrf_token %}
+                    <div class="d-none">
+                    {{form|default:"<p> No Form Loaded</p>"}}
+                    </div>
+                </form>
+                <div class="cform_buttons mx-auto">
+                    <button id="confirm_button" class="btn btn-success" onclick="formconfirm()">Confirm</button>
+                    <button id="cancel_button" class="btn btn-danger" onclick="formcancel()">Cancel</button>
+                </div>
+                <div class="d-none">
+                    <form id="manager_delete_form" action="/wf/workflow/finish/" method="post">
+                        {% csrf_token %}
+                    </form>
+                </div>
+            </div>
+        </div>
     </div>
-</form>
-<div class="cform_buttons">
-    <button id="confirm_button" class="btn btn-success" onclick="formconfirm()">Confirm</button>
-    <button id="cancel_button" class="btn btn-danger" onclick="formcancel()">Cancel</button>
-</div>
-
-<div style="display: none;">
-<form id="manager_delete_form" action="/wf/workflow/finish/" method="post">
-    {% csrf_token %}
-</form>
 </div>
-
 <script>
     var select = document.getElementById("id_confirm");
 
@@ -114,47 +100,45 @@
     }
 </script>
 <script>
-
-function fixVlans() {
-    document.getElementById("vlan_input").value = "True";
-    var form = $("#vlan_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 submitting form"); }
-    req.onreadystatechange = function() { //replaces current page with response
-        if(req.readyState === 4 ) {
-            var d = document.getElementById("vlan_warning").innerHTML = "";
-            document.getElementById("confirm_button").disabled = false;
-            document.getElementById("cancel_button").disabled = false;
+    function fixVlans() {
+        document.getElementById("vlan_input").value = "True";
+        var form = $("#vlan_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 submitting form"); }
+        req.onreadystatechange = function() { //replaces current page with response
+            if(req.readyState === 4 ) {
+                var d = document.getElementById("vlan_warning").innerHTML = "";
+                document.getElementById("confirm_button").disabled = false;
+                document.getElementById("cancel_button").disabled = false;
+            }
         }
+        req.send(formData);
+    }
+    var problem = {{vlan_warning|default:'false'}};
+    if(problem){
+        var d = document.getElementById("vlan_warning");
+        var h3 = document.createElement("h3");
+        h3.innerHTML = "WARNING: Vlans not available";
+        var h4 = document.createElement("h4");
+        h4.innerHTML = "The vlans you selected are not currently available. Would you like to automatically change them?";
+        var button1 = document.createElement("button");
+        button1.innerHTML = "Correct Vlans For Me";
+        button1.onclick = function() { fixVlans(); }
+
+        var button2 = document.createElement("button");
+        button2.innerHTML = "Cancel. I will change my vlans";
+        button2.onclick = function() { formcancel(); }
+        d.appendChild(h3);
+        d.appendChild(h4);
+        d.appendChild(button1);
+        d.appendChild(button2);
+        document.getElementById("confirm_button").disabled = true;
+        document.getElementById("cancel_button").disabled = true;
     }
-    req.send(formData);
-}
-var problem = {{vlan_warning|default:'false'}};
-if(problem){
-    var d = document.getElementById("vlan_warning");
-    var h3 = document.createElement("h3");
-    h3.innerHTML = "WARNING: Vlans not available";
-    var h4 = document.createElement("h4");
-    h4.innerHTML = "The vlans you selected are not currently available. Would you like to automatically change them?";
-    var button1 = document.createElement("button");
-    button1.innerHTML = "Correct Vlans For Me";
-    button1.onclick = function() { fixVlans(); }
-
-    var button2 = document.createElement("button");
-    button2.innerHTML = "Cancel. I will change my vlans";
-    button2.onclick = function() { formcancel(); }
-    d.appendChild(h3);
-    d.appendChild(h4);
-    d.appendChild(button1);
-    d.appendChild(button2);
-    document.getElementById("confirm_button").disabled = true;
-    document.getElementById("cancel_button").disabled = true;
-}
 </script>
-</div>
 {% block element_messages %}
 
 {% endblock element_messages %}