diff options
Diffstat (limited to 'dashboard/src/templates/booking')
10 files changed, 108 insertions, 147 deletions
diff --git a/dashboard/src/templates/booking/booking_calendar.html b/dashboard/src/templates/booking/booking_calendar.html index 1b29dc2..ddcb45d 100644 --- a/dashboard/src/templates/booking/booking_calendar.html +++ b/dashboard/src/templates/booking/booking_calendar.html @@ -1,7 +1,7 @@ {% extends "base.html" %} {% load staticfiles %} -{% load bootstrap3 %} +{% load bootstrap4 %} {% block extrahead %} {{ block.super }} diff --git a/dashboard/src/templates/booking/booking_delete.html b/dashboard/src/templates/booking/booking_delete.html index 76a5634..b89eb15 100644 --- a/dashboard/src/templates/booking/booking_delete.html +++ b/dashboard/src/templates/booking/booking_delete.html @@ -1,5 +1,5 @@ {% load jira_filters %} -{% load bootstrap3 %} +{% load bootstrap4 %} <p> Really delete Booking from {{ booking.start}} to {{ booking.end }}? diff --git a/dashboard/src/templates/booking/booking_detail.html b/dashboard/src/templates/booking/booking_detail.html index ac00e22..918f5af 100644 --- a/dashboard/src/templates/booking/booking_detail.html +++ b/dashboard/src/templates/booking/booking_detail.html @@ -1,6 +1,6 @@ {% extends "base.html" %} {% load staticfiles %} -{% load bootstrap3 %} +{% load bootstrap4 %} {% block extrahead %} {{block.super}} @@ -19,13 +19,13 @@ <div class="container-fluid"> <div class="row"> - <div class="col-lg-4"> - <div class="panel panel-default"> - <div class="panel-heading clearfix"> + <div class="col-12 col-lg-5"> + <div class="card mb-4"> + <div class="card-header d-flex"> <h4 style="display: inline;">Overview</h4> - <a data-toggle="collapse" data-target="#panel_overview" class="btn pull-right" style="line-height: 1;">Expand</a> + <button data-toggle="collapse" data-target="#panel_overview" class="btn btn-outline-secondary ml-auto">Expand</button> </div> - <div class="panel-body collapse in" id="panel_overview"> + <div class="card-body collapse show" id="panel_overview"> <table class="table"> <tr> <td>Purpose</td> @@ -60,12 +60,12 @@ </div> <div class="row"> <div class="col-lg-12"> - <div class="panel panel-default"> - <div class="panel-heading clearfix"> + <div class="card"> + <div class="card-header d-flex"> <h4 style="display: inline;">Pod</h4> - <a data-toggle="collapse" data-target="#pod_panel" class="btn pull-right" style="line-height: 1;" >Expand</a> + <button data-toggle="collapse" data-target="#pod_panel" class="btn btn-outline-secondary ml-auto">Expand</button> </div> - <div class="panel-body pod_panel collapse in" id="pod_panel"> + <div class="card-body collapse show" id="pod_panel"> <table class="table"> {% for host in booking.resource.hosts.all %} <tr> @@ -177,14 +177,14 @@ </div> </div> </div> - <div class="col-lg-8"> - <div class="panel panel-default"> - <div class="panel-heading clearfix"> + <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> - <a data-toggle="collapse" data-target="#panel_tasks" class="btn pull-right" style="line-height: 1;" >Expand</a> + <button data-toggle="collapse" data-target="#panel_tasks" class="btn btn-outline-secondary ml-auto">Expand</button> </div> - <div class="panel-body collapse in" id="panel_tasks"> + <div class="card-body collapse show" id="panel_tasks"> <table class="table"> <style> .progress { @@ -269,15 +269,15 @@ </div> </div> <div class="row"> - <div class="col-lg-8"> - <div class="panel panel-default"> - <div class="panel-heading clearfix"> + <div class="col"> + <div class="card"> + <div class="card-header d-flex"> <h4 style="display: inline;">PDF</h4> - <a data-toggle="collapse" data-target="#pdf_panel" class="btn pull-right" style="line-height: 1;" >Expand</a> + <button data-toggle="collapse" data-target="#pdf_panel" class="btn btn-outline-secondary ml-auto">Expand</button> </div> - <div class="panel-body collapse in" id="pdf_panel" style="padding: 0px;"> + <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}} + {{pdf}} </pre> </div> </div> diff --git a/dashboard/src/templates/booking/booking_list.html b/dashboard/src/templates/booking/booking_list.html index a245450..591ecc9 100644 --- a/dashboard/src/templates/booking/booking_list.html +++ b/dashboard/src/templates/booking/booking_list.html @@ -1,44 +1,38 @@ {% extends "base.html" %} {% load staticfiles %} -{% load bootstrap3 %} +{% load bootstrap4 %} {% block extrahead %} {{ block.super }} <!-- DataTables CSS --> - <link href="{% static "bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css" %}" + <link href="{% static "bower_components/datatables.net-bs4/css/dataTables.bootstrap4.min.css" %}" rel="stylesheet"> <!-- DataTables Responsive CSS --> - <link href="{% static "bower_components/datatables-responsive/css/dataTables.responsive.css" %}" + <link href="{% static "bower_components/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css" %}" rel="stylesheet"> {% endblock extrahead %} {% block content %} <div class="row"> - <div class="panel-body"> - <div class="dataTables_wrapper"> - <table class="table table-striped table-bordered table-hover" id="table" - cellspacing="0" - width="100%"> - {% include "booking/booking_table.html" %} - </table> - </div> - <!-- /.table-responsive --> - <!-- /.panel-body --> - <!-- /.panel --> + <div class="col"> + <div class="panel-body"> + <div class="dataTables_wrapper"> + <table class="table table-striped table-bordered table-hover" id="table" + cellspacing="0" + width="100%"> + {% include "booking/booking_table.html" %} + </table> + </div> + </div> </div> - <!-- /.col-lg-12 --> </div> {% endblock content %} {% block extrajs %} <!-- DataTables JavaScript --> - <link href="{% static "bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css" %}" - rel="stylesheet"> - - - <script src={% static "bower_components/datatables/media/js/jquery.dataTables.min.js" %}></script> - <script src={% static "bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.min.js" %}></script> + <script src={% static "bower_components/datatables.net/js/jquery.dataTables.min.js" %}></script> + <script src={% static "bower_components/datatables.net-bs4/js/dataTables.bootstrap4.min.js" %}></script> <script type="text/javascript"> $(document).ready(function () { diff --git a/dashboard/src/templates/booking/quick_deploy.html b/dashboard/src/templates/booking/quick_deploy.html index 2fbd035..07f3d89 100644 --- a/dashboard/src/templates/booking/quick_deploy.html +++ b/dashboard/src/templates/booking/quick_deploy.html @@ -1,6 +1,6 @@ {% extends "base.html" %} {% load staticfiles %} -{% load bootstrap3 %} +{% load bootstrap4 %} {% block content %} <style> .grid_container { @@ -79,77 +79,55 @@ </div> </div> <script type="text/javascript"> - var normalize = function(data) - { - //converts the top level keys in data to map to lists - var normalized = {} - for( var key in data ){ - normalized[key] = []; - for( var subkey in data[key] ){ - normalized[key].push(data[key][subkey]); - } - } - return normalized; - } - var update_page_contents = function(response) - { - document.open(); - document.write(response); - document.close(); - } - //form hamdler code - submit_form = function() + function submit_form() { - //altered from initial prototype: form submits automatically, - //but needs formatting for multiple select field - var data = normalize(result); - data = JSON.stringify(data); - document.getElementById("filter_field").value = data; + //formats data for form submission + multi_filter_widget.finish(); } - var sup_image_dict = {{ image_filter|safe }}; - var sup_installer_dict = {{ installer_filter|safe }}; - var sup_scenario_dict = {{ scenario_filter|safe }}; - - function imageHider() { - var data = normalize(result); - var drop = document.getElementById("id_image"); + function hide_dropdown(drop_id) { + var drop = document.getElementById(drop_id); + //select 'blank' option for( var i=0; i < drop.length; i++ ) { 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){ + for( var attr in multi_filter_widget.result[key] ){ + 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 }}; + + function imageHider() { + var drop = document.getElementById("id_image"); + hide_dropdown("id_image"); - var empty_map = {} + 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 { - var lab_pk = "" - for( var j in data["labs"][0] ) - { - if( j in {} ) { continue; } - else { lab_pk = j; break; } - } - var host_pk = ""; - for( var j in data["hosts"][0] ) - { - if( j in {} ) { continue; } - else { host_pk = j; break; } - } if( image_object.host_profile == host_pk && image_object.lab == lab_pk ) { drop.childNodes[i].style.display = "inherit"; @@ -180,28 +158,15 @@ document.getElementById('id_installer').addEventListener('change', scenarioHider); function dropFilter(target, target_filter, master) { - ob = document.getElementById(target); + var dropdown = document.getElementById(target); - for(var i=0; i<ob.options.length; i++) { - if ( ob.options[i].text == '---------' ) { - ob.selectedIndex = i; - } - } + hide_dropdown(target); - targ_id = "#" + target; - - $(targ_id).children().hide(); - - for (var i = 0; i < document.getElementById(target).childNodes.length; i++) - { - document.getElementById(target).childNodes[i].disabled = true; - } var drop = document.getElementById(master); var opts = target_filter[drop.options[drop.selectedIndex].value]; if (!opts) { opts = {}; } - var emptyMap = {} var map = Object.create(null); for (var i = 0; i < opts.length; i++) { @@ -209,34 +174,14 @@ map[j] = true; } - for (var i = 0; i < document.getElementById(target).childNodes.length; i++) { - if (document.getElementById(target).childNodes[i].value in opts && !(document.getElementById(target).childNodes[i].value in emptyMap) ) { - document.getElementById(target).childNodes[i].style.display = "inherit"; - document.getElementById(target).childNodes[i].disabled = false; + for (var i = 0; i < dropdown.childNodes.length; i++) { + 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> -<script> - //context vars - var prefill_host_selection = "{{host_select_field_prefill_data|default:""|safe}}"; - var prefill_purpose = "{{prefill_purpose|default:""|safe}}"; - var prefill_project = "{{prefill_project|default:""|safe}}"; - var prefill_hostname = "{{prefill_hostname|default:""|safe}}"; - - //to handle prefill - function prefill_host_select_field(data) - { - // - if(data) - { - make_selection(data); - } - } - - //call init functions - prefill_host_select_field(prefill_host_selection); -</script> {% endblock %} diff --git a/dashboard/src/templates/booking/stats.html b/dashboard/src/templates/booking/stats.html index 42eebdd..8bc68cd 100644 --- a/dashboard/src/templates/booking/stats.html +++ b/dashboard/src/templates/booking/stats.html @@ -41,17 +41,28 @@ function getData(){ {% endblock %} {% block content %} - <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> - <div id="all_graph_container"> - <div id="booking_graph_wrapper"> - <div id="booking_graph_container"/> + <div class="container-fluid"> + <div class="row"> + <div class="col"> + <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> + </div> </div> - <div id="user_graph_wrapper" > - <div id="user_graph_container"/> + <div class="row"> + <div class="col-12 col-md-10"> + <!-- These graphs do NOT get redrawn when the browser size is changed --> + <div id="all_graph_container border" class="mw-100"> + <div id="booking_graph_wrapper"> + <div id="booking_graph_container"/> + </div> + <div id="user_graph_wrapper"> + <div id="user_graph_container"/> + </div> + </div> + </div> </div> </div> <script> diff --git a/dashboard/src/templates/booking/steps/booking_confirm.html b/dashboard/src/templates/booking/steps/booking_confirm.html index 9c7e951..40c30a9 100644 --- a/dashboard/src/templates/booking/steps/booking_confirm.html +++ b/dashboard/src/templates/booking/steps/booking_confirm.html @@ -1,7 +1,7 @@ {% extends "workflow/viewport-element.html" %} {% load staticfiles %} -{% load bootstrap3 %} +{% load bootstrap4 %} {% block content %} diff --git a/dashboard/src/templates/booking/steps/booking_meta.html b/dashboard/src/templates/booking/steps/booking_meta.html index cdd7834..710d4ee 100644 --- a/dashboard/src/templates/booking/steps/booking_meta.html +++ b/dashboard/src/templates/booking/steps/booking_meta.html @@ -1,7 +1,7 @@ {% extends "workflow/viewport-element.html" %} {% load staticfiles %} -{% load bootstrap3 %} +{% load bootstrap4 %} {% block content %} @@ -10,6 +10,17 @@ 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;*/ @@ -52,7 +63,7 @@ </div> <div class="panel panel_center"> </div> - <div class="panel"> + <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> diff --git a/dashboard/src/templates/booking/steps/resource_select.html b/dashboard/src/templates/booking/steps/resource_select.html index 7ccceb3..382316f 100644 --- a/dashboard/src/templates/booking/steps/resource_select.html +++ b/dashboard/src/templates/booking/steps/resource_select.html @@ -1,7 +1,7 @@ {% extends "workflow/viewport-element.html" %} {% load staticfiles %} -{% load bootstrap3 %} +{% load bootstrap4 %} {% block content %} diff --git a/dashboard/src/templates/booking/steps/swconfig_select.html b/dashboard/src/templates/booking/steps/swconfig_select.html index 15c79d8..60a0df7 100644 --- a/dashboard/src/templates/booking/steps/swconfig_select.html +++ b/dashboard/src/templates/booking/steps/swconfig_select.html @@ -1,7 +1,7 @@ {% extends "workflow/viewport-element.html" %} {% load staticfiles %} -{% load bootstrap3 %} +{% load bootstrap4 %} {% block content %} |