summaryrefslogtreecommitdiffstats
path: root/src/templates/booking
diff options
context:
space:
mode:
authorBrandon Lo <lobrandon1217@gmail.com>2019-06-27 15:43:55 -0400
committerBrandon Lo <lobrandon1217@gmail.com>2019-06-28 15:28:24 +0000
commit7fec796ae500313ddbbbedf32d4f7581985d41d4 (patch)
treec7c40f8bfc0d0ff682249187b4d68bfdfa8c6493 /src/templates/booking
parente5e07b97e3d797a3a1f90fa33b7ccc41b6bacde3 (diff)
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>
Diffstat (limited to 'src/templates/booking')
-rw-r--r--src/templates/booking/booking_calendar.html2
-rw-r--r--src/templates/booking/booking_detail.html446
-rw-r--r--src/templates/booking/quick_deploy.html158
-rw-r--r--src/templates/booking/stats.html8
-rw-r--r--src/templates/booking/steps/booking_confirm.html25
-rw-r--r--src/templates/booking/steps/booking_meta.html85
-rw-r--r--src/templates/booking/steps/resource_select.html73
-rw-r--r--src/templates/booking/steps/swconfig_select.html73
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 %}