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, 72 insertions, 301 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 %}
diff --git a/src/templates/workflow/resource_select.html b/src/templates/workflow/resource_select.html
deleted file mode 100644
index cd04137..0000000
--- a/src/templates/workflow/resource_select.html
+++ /dev/null
@@ -1,50 +0,0 @@
-{% extends "workflow/viewport-element.html" %}
-{% load staticfiles %}
-
-{% load bootstrap4 %}
-
-{% block content %}
-
-<p>resource selection template</p>
-
-<style>
-    .db_pane_wrapper{
-        display: grid;
-        grid-template-columns: 49% 2% 49%;
-    }
-    .divider{
-        border-style: solid;
-        height: 100vh;
-    }
-
-    .hidden_form{
-        display: none;
-    }
-</style>
-
-<div class="db_pane_wrapper">
-    <div class="pane_one">
-        <p>Select Resource</p>
-
-    </div>
-    <div class="divider">
-
-    </div>
-    <div class="pane_two">
-        <button>Create New Resource</button>
-    </div>
-</div>
-
-<div class="hidden_form" id="form_div">
-    <form method="post" action="" class="form" id="resource_selection_form">
-        {% csrf_token %}
-        {% bootstrap_field form.resourcebundle %}
-        {% buttons %}
-            <button type="submit" class="btn btn btn-success">
-                Confirm Edit
-            </button>
-        {% endbuttons %}
-    </form>
-</div>
-
-{% endblock content %}
\ No newline at end of file
diff --git a/src/templates/workflow/viewport-base.html b/src/templates/workflow/viewport-base.html
index aa01d7e..d219386 100644
--- a/src/templates/workflow/viewport-base.html
+++ b/src/templates/workflow/viewport-base.html
@@ -5,158 +5,6 @@
 
 {% block content %}
 
-<style>
-    .go_btn {
-
-        position: absolute;
-        width: 100px;
-        top: 170px;
-        height: calc(100% - 170px);
-
-    }
-
-    .go_btn_disabled {
-        background-color: #ffffff;
-    }
-
-    .go_forward {
-        right: 0px;
-        border-left: none;
-    }
-
-    .go_back {
-        left: 251px;
-        border-right: none;
-    }
-
-
-    .btn_wrapper {
-        text-align: center;
-        margin-bottom: 5px;
-
-    }
-
-    {% if DEBUG %}
-        .add_btn_wrapper {
-            right: 130px;
-            top: 10px;
-            position: absolute;
-        }
-    {% endif %}
-
-    #breadcrumbs {
-        margin-bottom: 0;
-    }
-
-    .btn_wrapper {
-        margin: 0;
-    }
-
-    .step {
-        display: inline;
-        padding: 7px;
-        margin: 1px;
-        font-size: 14pt;
-        cursor: default;
-    }
-
-    .step:active {
-        -webkit-box-shadow: inherit;
-        box-shadow: inherit;
-    }
-
-    .step_active:active {
-        -webkit-box-shadow: inherit;
-        box-shadow: inherit;
-    }
-
-    .step_active {
-        display: inline;
-        padding: 7px;
-        margin: 1px;
-        cursor: default;
-        font-size: 14pt;
-        padding-bottom: 4px !important;
-        border-bottom: 4px solid #41ba78 !important;
-    }
-
-    .step_hidden {
-        background: #EFEFEF;
-        color: #999999;
-    }
-
-    .step_invalid::after {
-        content: " \2612";
-        color: #CC3300;
-    }
-
-    .step_valid::after {
-        content: " \2611";
-        color: #41ba78;
-    }
-
-    .step_untouched::after {
-        content: " \2610";
-    }
-
-    .iframe_div {
-        width: calc(100% - 450px);
-        margin-left: 70px;
-        height: calc(100vh - 155px);
-        position: absolute;
-        border: none;
-    }
-
-    .iframe_elem {
-        width: 100%;
-        height: calc(100vh - 155px);
-        border: none;
-    }
-
-    #breadcrumbs {
-        background-color: inherit;
-    }
-
-    #breadcrumbs.breadcrumb>li {
-        border: 1px solid #cccccc;
-        border-left: none;
-    }
-
-    #breadcrumbs.breadcrumb>li:first-child {
-        border-left: 1px solid #cccccc;
-    }
-
-    #breadcrumbs.breadcrumb>li+li:before {
-        content: "";
-        width: 0;
-        margin: 0;
-        padding: 0;
-    }
-
-    #topPagination .topcrumb {
-        flex: 1 1 0;
-        display: flex;
-        align-content: center;
-        justify-content: center;
-        border: 1px solid #dee2e6;
-        border-left: none;
-    }
-
-    .topcrumb > span {
-        color: #343a40;
-        cursor: default;
-    }
-
-    .topcrumb.active > span {
-        background: #007bff;
-        color: white;
-    }
-
-    .topcrumb.disabled > span {
-        color: #6c757d;
-        background: #f8f9fa;
-    }
-</style>
 <!-- Pagination -->
 <div class="row mt-3">
     <div class="col">
@@ -205,10 +53,10 @@
 <div class="row px-4">
     <div class="col">
         <div id="iframe_header" class="row view-header">
-            <div class="col-lg-12 step_header">
-                <h1 class="step_title d-inline-block" id="view_title"></h1>
+            <div class="col-lg-12">
+                <h1 class="d-inline-block" id="view_title"></h1>
                 <span class="description text-muted" id="view_desc"></span>
-                <p class="step_message" id="view_message"></p>
+                <p id="view_message"></p>
             </div>
             <script>
                 function update_description(title, desc) {
@@ -222,28 +70,22 @@
                     document.getElementById("view_message").classList.add("message_" + stepstatus);
                 }
             </script>
-            <!-- /.col-lg-12 -->
         </div>
     </div>
     <div class="col-auto align-self-center d-flex">
         <button id="cancel_btn" class="btn btn-danger ml-auto" onclick="cancel_wf()">Cancel</button>
     </div>
 </div>
-<!-- Content here -->
 <div class="row d-flex flex-column flex-grow-1">
     <div class="container-fluid d-flex flex-column h-100">
         <div class="row d-flex flex-grow-1 p-4">
-            <!-- iframe workflow -->
-            <div class="col-12 d-flex border flex-grow-1">
-                <!-- This was where the iframe went -->
+            <div class="col-12 d-flex border flex-grow-1 px-0">
                 <iframe src="/wf/workflow" class="w-100 h-100" scrolling="yes" id="viewport-iframe"
                     frameBorder="0"></iframe>
             </div>
         </div>
     </div>
 </div>
-<div class="btn_wrapper">
-</div>
 {% csrf_token %}
 
 <script type="text/javascript">
@@ -478,7 +320,7 @@
         window.location = window.location;
     }
 </script>
-<div style="display: none;" id="workflow_pop_form_div">
+<div class="d-none" id="workflow_pop_form_div">
     <form id="workflow_pop_form" action="/wf/workflow/finish/" method="post">
         {% csrf_token %}
     </form>
diff --git a/src/templates/workflow/viewport-element.html b/src/templates/workflow/viewport-element.html
index 7a7165a..b87013a 100644
--- a/src/templates/workflow/viewport-element.html
+++ b/src/templates/workflow/viewport-element.html
@@ -4,15 +4,12 @@
 
 {% block basecontent %}
 
-    <div id="wrapper">
+    <div id="wrapper" class="h-100">
         <!-- Page Content -->
-        <div id="page-wrapper">
-
+        <div id="page-wrapper" class="h-100">
             {% block content %}
-
             {% endblock content %}
         </div>
-        <!-- /#page-wrapper -->
     </div>
     {% block vport_comm %}
              <script type="text/javascript">
@@ -53,9 +50,9 @@
 
     <script>
     function step_on_leave() {
-    {% block onleave %}
-        alert("override onleave");
-    {% endblock %}
+        {% block onleave %}
+            alert("override onleave");
+        {% endblock %}
     }
     </script>
 
@@ -64,6 +61,4 @@
         {% bootstrap_messages %}
         {% endblock %}
     </div>
-
-    <!-- /#wrapper -->
 {% endblock basecontent %}