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>

8 files changed, 290 insertions, 580 deletions

diff --git a/src/templates/booking/booking_calendar.html b/src/templates/booking/booking_calendar.html
index ddcb45d..450c97f 100644
--- a/src/templates/booking/booking_calendar.html
+++ b/src/templates/booking/booking_calendar.html
@@ -23,9 +23,7 @@
                     <div id='calendar'>
                     </div>
                 </div>
-                <!-- /.panel-body -->
             </div>
-            <!-- /.panel -->
         </div>
     </div>
 
diff --git a/src/templates/booking/booking_detail.html b/src/templates/booking/booking_detail.html
index 918f5af..99de747 100644
--- a/src/templates/booking/booking_detail.html
+++ b/src/templates/booking/booking_detail.html
@@ -4,174 +4,164 @@
 
 {% block extrahead %}
     {{block.super}}
-<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=yaml"></script>
+    <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=yaml"></script>
 {% endblock %}
 
 {% block content %}
 
-<style>
-#modal_warning {
-    transition: max-height 0.5s ease-out;
-    overflow: hidden;
-}
-
-</style>
-
 <div class="container-fluid">
     <div class="row">
         <div class="col-12 col-lg-5">
             <div class="card mb-4">
                 <div class="card-header d-flex">
-                    <h4 style="display: inline;">Overview</h4>
+                    <h4 class="d-inline">Overview</h4>
                     <button data-toggle="collapse" data-target="#panel_overview" class="btn btn-outline-secondary ml-auto">Expand</button>
                 </div>
-                <div class="card-body collapse show" id="panel_overview">
-                    <table class="table">
-                        <tr>
-                            <td>Purpose</td>
-                            <td>{{ booking.purpose }}</td>
-                        </tr>
-                        <tr>
-                            <td>Project</td>
-                            <td>{{ booking.project }}</td>
-                        </tr>
-                        <tr>
-                            <td>Start Time</td>
-                            <td>{{ booking.start }}</td>
-                        </tr>
-                        <tr>
-                            <td>End Time</td>
-                            <td>{{ booking.end }}</td>
-                        </tr>
-                        <tr>
-                            <td>Pod Definition</td>
-                            <td>{{ booking.resource.template }}</td>
-                        </tr>
-                        <tr>
-                            <td>Pod Configuration</td>
-                            <td>{{ booking.config_bundle }}</td>
-                        </tr>
-                        <tr>
-                            <td>Lab Deployed At</td>
-                            <td>{{ booking.lab }}</td>
-                        </tr>
-                    </table>
+                <div class="collapse show" id="panel_overview">
+                    <div class="card-body">
+                        <table class="table">
+                            <tr>
+                                <td>Purpose</td>
+                                <td>{{ booking.purpose }}</td>
+                            </tr>
+                            <tr>
+                                <td>Project</td>
+                                <td>{{ booking.project }}</td>
+                            </tr>
+                            <tr>
+                                <td>Start Time</td>
+                                <td>{{ booking.start }}</td>
+                            </tr>
+                            <tr>
+                                <td>End Time</td>
+                                <td>{{ booking.end }}</td>
+                            </tr>
+                            <tr>
+                                <td>Pod Definition</td>
+                                <td>{{ booking.resource.template }}</td>
+                            </tr>
+                            <tr>
+                                <td>Pod Configuration</td>
+                                <td>{{ booking.config_bundle }}</td>
+                            </tr>
+                            <tr>
+                                <td>Lab Deployed At</td>
+                                <td>{{ booking.lab }}</td>
+                            </tr>
+                        </table>
+                    </div>
                 </div>
             </div>
             <div class="row">
                 <div class="col-lg-12">
                     <div class="card">
                         <div class="card-header d-flex">
-                            <h4 style="display: inline;">Pod</h4>
+                            <h4 class="d-inline">Pod</h4>
                             <button data-toggle="collapse" data-target="#pod_panel" class="btn btn-outline-secondary ml-auto">Expand</button>
                         </div>
-                        <div class="card-body collapse show" id="pod_panel">
-                            <table class="table">
-                            {% for host in booking.resource.hosts.all %}
-                            <tr>
-                                <td><h4>{{host.template.resource.name}}</h4></td>
-                                <td>
-                                    <table class="table">
-                                        <tr>
-                                            <td>Hostname:</td>
-                                            <td>{{host.template.resource.name}}</td>
-                                        </tr>
-                                        <tr>
-                                            <td>Profile:</td>
-                                            <td>{{host.name}}</td>
-                                        </tr>
-                                        <tr>
-                                            <td>Role:</td>
-                                            <td>{{host.config.opnfvRole}}</td>
-                                        </tr>
-                                        <tr>
-                                            <td>Image:</td>
-                                            <td id="host_image_{{host.id}}">
-                                                {{host.config.image}}
-                                                <button
-                                                    style="margin-left:10px;"
-                                                    class="btn btn-primary"
-                                                    data-toggle="modal"
-                                                    data-target="#imageModal"
-                                                    onclick="set_image_dropdown('{{host.profile.name}}', {{host.id}});"
-                                                >Change/Reset</button></td>
-                                        </tr>
-                                        <tr>
-                                            <td>RAM:</td>
-                                            <td>{{host.profile.ramprofile.first.amount}}G,
-                                                {{host.profile.ramprofile.first.channels}} channels</td>
-                                        </tr>
-                                        <tr>
-                                            <td>CPU:</td>
-                                            <td>
-                                                <table class="table">
-                                                    <tr>
-                                                        <td>Arch:</td>
-                                                        <td>{{host.profile.cpuprofile.first.architecture}}</td>
-                                                    </tr>
-                                                    <tr>
-                                                        <td>Cores:</td>
-                                                        <td>{{host.profile.cpuprofile.first.cores}}</td>
-                                                    </tr>
-                                                    <tr>
-                                                        <td>Sockets:</td>
-                                                        <td>{{host.profile.cpuprofile.first.cpus}}</td>
-                                                    </tr>
-                                                </table>
-                                            </td>
-                                        </tr>
-                                        <tr>
-                                            <td>DISK:</td>
-                                            <td>
-                                                <table class="table">
-                                                    <tr>
-                                                        <td>Size:</td>
-                                                        <td>{{host.profile.storageprofile.first.size}} GiB</td>
-                                                    </tr>
-                                                    <tr>
-                                                        <td>Type:</td>
-                                                        <td>{{host.profile.storageprofile.first.media_type}}</td>
-                                                    </tr>
-                                                    <tr>
-                                                        <td>Mount Point:</td>
-                                                        <td>{{host.profile.storageprofile.first.name}}</td>
-                                                    </tr>
-                                                </table>
-                                            </td>
-                                        </tr>
-                                        <tr>
-                                            <td>Interfaces:</td>
-                                            <td>
-                                                <style>
-                                                    .borderless td {
-                                                        border: none !important;
-                                                    }
-                                                </style>
-                                                <table class="table">
-                                                {% for intprof in host.profile.interfaceprofile.all %}
-                                                <tr>
-                                                    <td>
-                                                    <table class="table borderless">
+                        <div class="collapse show" id="pod_panel">
+                            <div class="card-body">
+                                <table class="table">
+                                {% for host in booking.resource.hosts.all %}
+                                <tr>
+                                    <td><h4>{{host.template.resource.name}}</h4></td>
+                                    <td>
+                                        <table class="table">
+                                            <tr>
+                                                <td>Hostname:</td>
+                                                <td>{{host.template.resource.name}}</td>
+                                            </tr>
+                                            <tr>
+                                                <td>Profile:</td>
+                                                <td>{{host.name}}</td>
+                                            </tr>
+                                            <tr>
+                                                <td>Role:</td>
+                                                <td>{{host.config.opnfvRole}}</td>
+                                            </tr>
+                                            <tr>
+                                                <td>Image:</td>
+                                                <td id="host_image_{{host.id}}">
+                                                    {{host.config.image}}
+                                                    <button
+                                                        class="btn btn-primary ml-4"
+                                                        data-toggle="modal"
+                                                        data-target="#imageModal"
+                                                        onclick="set_image_dropdown('{{host.profile.name}}', {{host.id}});"
+                                                    >Change/Reset</button></td>
+                                            </tr>
+                                            <tr>
+                                                <td>RAM:</td>
+                                                <td>{{host.profile.ramprofile.first.amount}}G,
+                                                    {{host.profile.ramprofile.first.channels}} channels</td>
+                                            </tr>
+                                            <tr>
+                                                <td>CPU:</td>
+                                                <td>
+                                                    <table class="table">
+                                                        <tr>
+                                                            <td>Arch:</td>
+                                                            <td>{{host.profile.cpuprofile.first.architecture}}</td>
+                                                        </tr>
                                                         <tr>
-                                                            <td>Name:</td>
-                                                            <td>{{intprof.name}}</td>
+                                                            <td>Cores:</td>
+                                                            <td>{{host.profile.cpuprofile.first.cores}}</td>
                                                         </tr>
                                                         <tr>
-                                                            <td>Speed:</td>
-                                                            <td>{{intprof.speed}}</td>
+                                                            <td>Sockets:</td>
+                                                            <td>{{host.profile.cpuprofile.first.cpus}}</td>
                                                         </tr>
                                                     </table>
-                                                    </td>
-                                                </tr>
-                                                {% endfor %}
-                                                </table>
-                                            </td>
-                                        </tr>
-                                    </table>
-                                </td>
-                            {% endfor %}
-                            </tr>
-                            </table>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>DISK:</td>
+                                                <td>
+                                                    <table class="table">
+                                                        <tr>
+                                                            <td>Size:</td>
+                                                            <td>{{host.profile.storageprofile.first.size}} GiB</td>
+                                                        </tr>
+                                                        <tr>
+                                                            <td>Type:</td>
+                                                            <td>{{host.profile.storageprofile.first.media_type}}</td>
+                                                        </tr>
+                                                        <tr>
+                                                            <td>Mount Point:</td>
+                                                            <td>{{host.profile.storageprofile.first.name}}</td>
+                                                        </tr>
+                                                    </table>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>Interfaces:</td>
+                                                <td>
+                                                    <table class="table">
+                                                    {% for intprof in host.profile.interfaceprofile.all %}
+                                                    <tr>
+                                                        <td>
+                                                        <table class="table table-borderless">
+                                                            <tr>
+                                                                <td>Name:</td>
+                                                                <td>{{intprof.name}}</td>
+                                                            </tr>
+                                                            <tr>
+                                                                <td>Speed:</td>
+                                                                <td>{{intprof.speed}}</td>
+                                                            </tr>
+                                                        </table>
+                                                        </td>
+                                                    </tr>
+                                                    {% endfor %}
+                                                    </table>
+                                                </td>
+                                            </tr>
+                                        </table>
+                                    </td>
+                                {% endfor %}
+                                </tr>
+                                </table>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -180,105 +170,72 @@
         <div class="col">
             <div class="card mb-4">
                 <div class="card-header d-flex">
-                    <h4 style="display: inline;">Deployment Progress</h4>
-                    <p style="display: inline; margin-left: 10px;">  These are the different tasks that have to be completed before your deployment is ready</p>
+                    <h4 class="d-inline">Deployment Progress</h4>
+                    <p>These are the different tasks that have to be completed before your deployment is ready</p>
                     <button data-toggle="collapse" data-target="#panel_tasks" class="btn btn-outline-secondary ml-auto">Expand</button>
                 </div>
-                <div class="card-body collapse show" id="panel_tasks">
-                    <table class="table">
-                        <style>
-                            .progress {
-                                display: inline-block;
-                                border: 3px solid #f3f3f3;
-                                border-radius: 50%;
-                                border-top: 3px solid #12aebb;
-                                width: 20px;
-                                height: 20px;
-                                -webkit-animation: spin 2s linear infinite; /* Safari */
-                                animation: spin 2s linear infinite;
-                              }
-
-                              @keyframes spin {
-                                  0% {transform: rotate(0deg);}
-                                  100% {transform: rotate(360deg);}
-                              }
-
-                              .new {
-                                  display: inline-block;
-                                  width: 20px;
-                                  height: 20px;
-                                  background: #f3f3f3;
-                                  border-radius: 50%;
-                                  animation: fadeInOut 1s infinite alternate;
-
-                              }
-                              @keyframes fadeInOut {
-                                  from { opacity: 0;}
-                              }
-                              .done {
-                                  display: inline-block;
-                                  width: 20px;
-                                  height: 20px;
-                                  background: #40B976;
-                                  border-radius: 50%;
-                              }
-                            </style>
-                        <tr>
-                            <th></th>
-                            <th>Status</th>
-                            <th>Lab Response</th>
-                            <th>Type</th>
-                        </tr>
-                        {% for task in booking.job.get_tasklist %}
-                        <tr>
-                            <td>
-                                {% if task.status < 100 %}
-                                    <div class="new"></div>
-                                {% elif task.status < 200 %}
-                                    <div class="progress"></div>
-                                {% else %}
-                                    <div class="done"></div>
-                                {% endif %}
-                            </td>
-                            <td>
-                                {% if task.status < 100 %}
-                                    PENDING
-                                {% elif task.status < 200 %}
-                                    IN PROGRESS
-                                {% else %}
-                                    DONE
-                                {% endif %}
-                            </td>
-                            <td>
-                                {% if task.message %}
-                                {% if task.type_str == "Access Task" and user_id != task.config.user.id %}
-                                Message from Lab: <pre>--secret--</pre>
-                                {% else %}
-                                Message from Lab: <pre>{{ task.message }}</pre>
-                                {% endif %}
-                                {% else %}
-                                No response provided (yet)
-                                {% endif %}
-                            </td>
-                            <td>
-                                {{ task.type_str }}
-                            </td>
-                        </tr>
-                        {% endfor %}
-                    </table>
+                <div class="collapse show" id="panel_tasks">
+                    <div class="card-body">
+                        <table class="table">
+                            <tr>
+                                <th></th>
+                                <th>Status</th>
+                                <th>Lab Response</th>
+                                <th>Type</th>
+                            </tr>
+                            {% for task in booking.job.get_tasklist %}
+                            <tr>
+                                <td>
+                                    {% if task.status < 100 %}
+                                        <div class="rounded-circle bg-secondary square-20"></div>
+                                    {% elif task.status < 200 %}
+                                        <div class="spinner-border text-primary square-20"></div>
+                                    {% else %}
+                                        <div class="rounded-circle bg-success square-20"></div>
+                                    {% endif %}
+                                </td>
+                                <td>
+                                    {% if task.status < 100 %}
+                                        PENDING
+                                    {% elif task.status < 200 %}
+                                        IN PROGRESS
+                                    {% else %}
+                                        DONE
+                                    {% endif %}
+                                </td>
+                                <td>
+                                    {% if task.message %}
+                                    {% if task.type_str == "Access Task" and user_id != task.config.user.id %}
+                                    Message from Lab: <pre>--secret--</pre>
+                                    {% else %}
+                                    Message from Lab: <pre>{{ task.message }}</pre>
+                                    {% endif %}
+                                    {% else %}
+                                    No response provided (yet)
+                                    {% endif %}
+                                </td>
+                                <td>
+                                    {{ task.type_str }}
+                                </td>
+                            </tr>
+                            {% endfor %}
+                        </table>
+                    </div>
                 </div>
             </div>
             <div class="row">
                 <div class="col">
                     <div class="card">
                         <div class="card-header d-flex">
-                            <h4 style="display: inline;">PDF</h4>
+                            <h4 class="d-inline">PDF</h4>
                             <button data-toggle="collapse" data-target="#pdf_panel" class="btn btn-outline-secondary ml-auto">Expand</button>
                         </div>
-                        <div class="card-body collapse show" id="pdf_panel" style="padding: 0px;">
-                            <pre class="prettyprint lang-yaml" style="margin: 0px; padding: 15px; border: none;">
-                                {{pdf}}
-                            </pre>
+                        <div class="collapse show" id="pdf_panel">
+                            <div class="card-body p-0">
+                                <pre class="prettyprint lang-yaml m-0 p-4 border-0">
+                                    {{pdf}}
+                                </pre>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -289,10 +246,10 @@
 
 
 <div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
-    <div class="modal-dialog" style="width: 450px;" role="document">
+    <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-header">
-                <h4 class="modal-title" id="exampleModalLabel" style="display: inline; float: left;">Host Image</h4>
+                <h4 class="modal-title d-inline float-left" id="exampleModalLabel">Host Image</h4>
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">&times;</span>
                 </button>
@@ -300,23 +257,24 @@
             <div class="modal-body">
                 <form id="image_host_form">
                     {% csrf_token %}
-                    <select class="form-control" style="width: 80%; margin-left: 10%" id="image_select" name="image_id">
+                    <select class="form-control" id="image_select" name="image_id">
                     </select>
                     <input id="host_id_input" type="hidden" name="host_id">
                     </input>
                 </form>
             </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-                <button type="button" class="btn btn-primary" onclick="document.getElementById('modal_warning').style['max-height'] = '500px';">Reset Host</button>
-            </div>
-            <div id="modal_warning" class="modal-footer" style="max-height:0px;" >
-                <div style="text-align:center; margin: 5px">
+            <div class="modal-footer d-flex flex-column">
+                <div>
+                    <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Close</button>
+                    <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#modal_warning" aria-expanded="false">Reset Host</button>
+                </div>
+                <div class="border-top collapse mt-3 py-2 text-center w-100" id="modal_warning">
                     <h3>Are You Sure?</h3>
                     <p>This will wipe the disk and reimage the host</p>
-                    <button class="btn" onclick="document.getElementById('modal_warning').style['max-height'] = '0px';">Nevermind</button>
+                    <button class="btn btn-outline-secondary" data-dismiss="modal">Nevermind</button>
                     <button class="btn btn-danger" data-dismiss="modal" onclick="submit_image_form();">I'm Sure</button>
                 </div>
+            </div>
         </div>
     </div>
 </div>
@@ -342,7 +300,7 @@
             dropdown.options.add(opt);
         }
 
-        document.getElementById("modal_warning").style['max-height'] = '0px';
+        document.getElementById("modal_warning").classList.add("collapse");
     }
 
     function submit_image_form() {
diff --git a/src/templates/booking/quick_deploy.html b/src/templates/booking/quick_deploy.html
index 07f3d89..f1ba491 100644
--- a/src/templates/booking/quick_deploy.html
+++ b/src/templates/booking/quick_deploy.html
@@ -2,88 +2,64 @@
 {% load staticfiles %}
 {% load bootstrap4 %}
 {% block content %}
-<style>
-    .grid_container {
-        display: grid;
-        grid-template-columns: repeat(12, 1fr);
-        padding: 30px;
-    }
-    .grid_element {
-        border-radius: 5px;
-        border: 1px solid #ccc;
-        margin: 10px;
-        padding: 7px;
-    }
-    .grid_element_wide {
-        grid-column-start: span 12;
-    }
-    .grid_element_half {
-        grid-column-start: span 6;
-    }
-    .grid_element_1third {
-        grid-column-start: span 4;
-    }
-    .grid_element_2third {
-        grid-column-start: span 8;
-    }
-    .collaborator_pane {
-        display: flex;
-        flex-direction: column;
-    }
-    #id_length {
-        -moz-appearance: none;
-        border: none;
-        box-shadow: none;
-    }
-
-    input[type=range]::-moz-range-track {
-        background: #cccccc;
-    }
 
-    .grid_element {
-        overflow: hidden;
-    }
-</style>
 {% bootstrap_form_errors form type='non_fields' %}
 <form id="quick_booking_form" action="/booking/quick/" method="POST" class="form">
-{% csrf_token %}
-<div class="grid_container">
-<div class="grid_element host_select_pane grid_element_wide">
-<p>Please select a host type you wish to book. Only available types are shown.</p>
-{% bootstrap_field form.filter_field show_label=False %}
-</div>
-<div class="grid_element booking_info_pane grid_element_1third">
-    {% 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>
-</div>
-<div class="grid_element collaborator_pane grid_element_1third">
-        <label>Collaborators</label>
-        {{ form.users }}
-</div>
-<div class="grid_element_1third">
-    <div class="configuration_pane grid_element">
-        {% bootstrap_field form.hostname %}
-        {% bootstrap_field form.image %}
-    </div>
-    <div class="configuration_pane grid_element">
-        <strong>OPNFV: (Optional)</strong>
-        {% bootstrap_field form.installer %}
-        {% bootstrap_field form.scenario %}
+    {% csrf_token %}
+    <div class="container-fluid">
+        <div class="row">
+            <div class="col-12 px-1 my-2">
+                <div class="col py-2 rounded border">
+                    <p>Please select a host type you wish to book. Only available types are shown.</p>
+                    {% bootstrap_field form.filter_field show_label=False %}
+                </div>
+            </div>
+            <div class="col-12 col-lg-3 px-1 my-2">
+                <div class="col border rounded py-2 h-100">
+                    {% 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").setAttribute("oninput", "daysout.value=this.value");
+                        document.getElementById("daysout").value = document.getElementById("id_length").value;
+                    </script>
+                </div>
+            </div>
+            <div class="col-12 col-lg-3 px-1 my-2">
+                <div class="col border rounded py-2 h-100">
+                    <label>Collaborators</label>
+                    {{ form.users }}
+                </div>
+            </div>
+            <div class="col-12 col-lg-3 px-1 my-2">
+                <div class="col border rounded py-2 h-100">
+                    {% bootstrap_field form.hostname %}
+                    {% bootstrap_field form.image %}
+                </div>
+            </div>
+            <div class="col-12 col-lg-3 px-1 my-2">
+                <div class="col border rounded py-2 h-100">
+                    <strong>OPNFV: (Optional)</strong>
+                    {% bootstrap_field form.installer %}
+                    {% bootstrap_field form.scenario %}
+                </div>
+            </div>
+            <div class="col-12 d-flex px-0 mt-2 justify-content-end">
+                <button id="quick_booking_confirm" onclick="submit_form();" type="button" class="btn btn-success">Confirm</button>
+            </div>
+        </div>
     </div>
-</div>
-</div>
-<script type="text/javascript">
+</form>
 
+<script type="text/javascript">
     function submit_form()
     {
         //formats data for form submission
         multi_filter_widget.finish();
+        // Submit the form manually since confirm button is type="button" now
+        // due to the form submitting before the data was even created by finish()
+        document.getElementById("quick_booking_form").submit();
     }
 
     function hide_dropdown(drop_id) {
@@ -94,13 +70,6 @@
             if ( drop.options[i].text == '---------' )
                 drop.selectedIndex = i;
         }
-
-        //cross browser hide children
-        $('#id_image').children().hide();
-        for( var i = 0; i < drop.childNodes.length; i++ )
-        {
-            drop.childNodes[i].disabled = true; // closest we can get on safari to hiding it outright
-        }
     }
 
     function get_selected_value(key){
@@ -108,12 +77,11 @@
             if(!(attr in {}) )
                 return attr;
         }
-        return null;
     }
 
-    var sup_image_dict = {{ image_filter|safe }};
-    var sup_installer_dict = {{ installer_filter|safe }};
-    var sup_scenario_dict = {{ scenario_filter|safe }};
+    var sup_image_dict = {{image_filter | safe}};
+    var sup_installer_dict = {{installer_filter | safe}};
+    var sup_scenario_dict = {{scenario_filter | safe}};
 
     function imageHider() {
         var drop = document.getElementById("id_image");
@@ -123,15 +91,13 @@
         var lab_pk = get_selected_value("lab");
         var host_pk = get_selected_value("host");
 
-        for ( var i=0; i < drop.childNodes.length; i++ )
-        {
-            var image_object = sup_image_dict[drop.childNodes[i].value];
-            if( image_object ) //weed out empty option
+        for (const childNode of drop.childNodes) {
+            var image_object = sup_image_dict[childNode.value];
+            if (image_object) //weed out empty option
             {
-                if( image_object.host_profile == host_pk && image_object.lab == lab_pk )
-                {
-                    drop.childNodes[i].style.display = "inherit";
-                    drop.childNodes[i].disabled = false;
+                if (image_object.host_profile == host_pk && image_object.lab == lab_pk) {
+                    childNode.style.display = "inherit";
+                    childNode.disabled = false;
                 }
             }
         }
@@ -142,7 +108,7 @@
     $('#id_scenario').children().hide();
 
 
-    Array.from(document.getElementsByClassName("grid-item-select-btn")).forEach(function(element) {
+    Array.from(document.getElementsByClassName("grid-item-select-btn")).forEach(function (element) {
         element.addEventListener('click', imageHider);
     });
 
@@ -175,13 +141,11 @@
         }
 
         for (var i = 0; i < dropdown.childNodes.length; i++) {
-            if (dropdown.childNodes[i].value in opts && !(dropdown.childNodes[i].value in {}) ) {
+            if (dropdown.childNodes[i].value in opts && !(dropdown.childNodes[i].value in {})) {
                 dropdown.childNodes[i].style.display = "inherit";
                 dropdown.childNodes[i].disabled = false;
             }
         }
     }
 </script>
-    <button id="quick_booking_confirm" onclick="submit_form();" class="btn btn-success">Confirm</button>
-</form>
-{% endblock %}
+{% endblock %}
\ No newline at end of file
diff --git a/src/templates/booking/stats.html b/src/templates/booking/stats.html
index 8bc68cd..ed34731 100644
--- a/src/templates/booking/stats.html
+++ b/src/templates/booking/stats.html
@@ -43,11 +43,11 @@ function getData(){
 {% block content %}
     <div class="container-fluid">
         <div class="row">
-                <div class="col">
+                <div class="col-auto">
                         <p>Number of days to plot: </p>
-                        <div class="form-group">
-                            <input id="number_days" type="number" class="form-control" min="1" step="1" style="display:inline;width:200px"/>
-                            <button class="btn btn-primary" onclick="getData();" style="display:inline;">Submit</button>
+                        <div class="form-group d-flex align-content-center">
+                            <input id="number_days" type="number" class="form-control d-inline-block w-auto" min="1" step="1"/>
+                            <button class="btn btn-primary ml-1" onclick="getData();">Submit</button>
                         </div>
                 </div>
         </div>
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 %}