summaryrefslogtreecommitdiffstats
path: root/dashboard/src/templates
diff options
context:
space:
mode:
authorParker Berberian <pberberian@iol.unh.edu>2019-01-18 16:30:27 +0000
committerGerrit Code Review <gerrit@opnfv.org>2019-01-18 16:30:27 +0000
commitdb26f93d70ed60eb8208be074b02a394b7d43db2 (patch)
treeaecffb1ed30f06b00be2f54061743d04f5cad2ad /dashboard/src/templates
parent08564ab18c8ebf5e6613aac8a0b7f08d7e0b9fa3 (diff)
parente3842fee2abb084d020acf7b868af745b8a66c18 (diff)
Merge "Add Quick-Booking Workflow"
Diffstat (limited to 'dashboard/src/templates')
-rw-r--r--dashboard/src/templates/booking/quick_deploy.html206
-rw-r--r--dashboard/src/templates/dashboard/landing.html1
-rw-r--r--dashboard/src/templates/dashboard/multiple_select_filter_widget.html73
-rw-r--r--dashboard/src/templates/dashboard/searchable_select_multiple.html7
4 files changed, 247 insertions, 40 deletions
diff --git a/dashboard/src/templates/booking/quick_deploy.html b/dashboard/src/templates/booking/quick_deploy.html
new file mode 100644
index 0000000..3837315
--- /dev/null
+++ b/dashboard/src/templates/booking/quick_deploy.html
@@ -0,0 +1,206 @@
+{% extends "base.html" %}
+{% load staticfiles %}
+{% load bootstrap3 %}
+{% block content %}
+<style>
+ .grid_container {
+ display: grid;
+ grid-template-columns: repeat(12, 1fr);
+ padding: 30px;
+ }
+ .grid_element {
+ border-radius: 3px;
+ box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.75);
+ 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;
+ }
+</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 %}
+</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 configuration_pane grid_element_1third">
+ {% bootstrap_field form.hostname %}
+ {% bootstrap_field form.image %}
+ {% bootstrap_field form.installer %}
+ {% bootstrap_field form.scenario %}
+</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()
+ {
+ //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;
+ }
+
+ 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");
+ for( var i=0; i < drop.length; i++ )
+ {
+ if ( drop.options[i].text == '---------' )
+ {
+ drop.selectedIndex = i;
+ }
+ }
+
+ $('#id_image').children().hide();
+
+ var empty_map = {}
+
+ 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";
+ }
+ }
+ }
+ }
+
+ $('#id_image').children().hide();
+ $('#id_installer').children().hide();
+ $('#id_scenario').children().hide();
+
+
+ Array.from(document.getElementsByClassName("grid-item-select-btn")).forEach(function(element) {
+ element.addEventListener('click', imageHider);
+ });
+
+ function installerHider() {
+ dropFilter("id_installer", sup_installer_dict, "id_image");
+ scenarioHider();
+ }
+ document.getElementById('id_image').addEventListener('change', installerHider);
+
+ function scenarioHider() {
+ dropFilter("id_scenario", sup_scenario_dict, "id_installer");
+ }
+ document.getElementById('id_installer').addEventListener('change', scenarioHider);
+
+ function dropFilter(target, target_filter, master) {
+ ob = document.getElementById(target);
+
+ for(var i=0; i<ob.options.length; i++) {
+ if ( ob.options[i].text == '---------' ) {
+ ob.selectedIndex = i;
+ }
+ }
+
+ targ_id = "#" + target;
+ $(targ_id).children().hide();
+ 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++) {
+ var j = opts[i];
+ 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";
+ }
+ }
+ }
+</script>
+ <button 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/dashboard/landing.html b/dashboard/src/templates/dashboard/landing.html
index 40e0146..6bbb25b 100644
--- a/dashboard/src/templates/dashboard/landing.html
+++ b/dashboard/src/templates/dashboard/landing.html
@@ -39,6 +39,7 @@
</style>
{% if not request.user.is_anonymous %}
<div class='wf_create_div'>
+<a class="wf_create btn btn-primary" style="color: #FFF;" href="/booking/quick/">Create a Quick Booking</a>
<button class="wf_create btn btn-primary" onclick="cwf(0)">Create a Booking</button>
<button class="wf_create btn btn-primary" onclick="cwf(1)">Create a Pod</button>
<button class="wf_create btn btn-primary" onclick="cwf(2)">Configure a Pod</button>
diff --git a/dashboard/src/templates/dashboard/multiple_select_filter_widget.html b/dashboard/src/templates/dashboard/multiple_select_filter_widget.html
index d1929ef..4e47ce0 100644
--- a/dashboard/src/templates/dashboard/multiple_select_filter_widget.html
+++ b/dashboard/src/templates/dashboard/multiple_select_filter_widget.html
@@ -97,7 +97,7 @@
<script>
var initialized = false;
var mapping = {{ mapping|safe }};
-var items = {{ items|safe }};
+var filter_items = {{ filter_items|safe }};
var result = {};
var selection = {{selection_data|default_if_none:"null"|safe}};
var dropdown_count = 0;
@@ -108,31 +108,32 @@ make_selection({{selection_data|safe}});
function make_selection( selection_data ){
if(!initialized) {
- init();
+ filter_field_init();
}
for(var k in selection_data) {
selected_items = selection_data[k];
- for( var item in selected_items ){
- var node = items[item];
+ for( var selected_item in selected_items ){
+ var node = filter_items[selected_item];
if(!node['multiple']){
- var input_value = selected_items[item];
+ var input_value = selected_items[selected_item];
if( input_value != 'false' ) {
select(node);
markAndSweep(node);
}
- var div = document.getElementById(item)
+ var div = document.getElementById(selected_item)
+ var inputs = div.parentNode.getElementsByTagName("input")
var input = div.parentNode.getElementsByTagName("input")[0]
input.value = input_value;
- updateResult(item);
+ updateResult(selected_item);
} else {
- make_multiple_selection(selected_items, item);
+ make_multiple_selection(selected_items, selected_item);
}
}
}
}
function make_multiple_selection(data, item_class){
- var node = items[item_class];
+ var node = filter_items[item_class];
select(node);
markAndSweep(node);
prepop_data = data[item_class];
@@ -143,8 +144,8 @@ function make_multiple_selection(data, item_class){
}
function markAndSweep(root){
- for(var nodeId in items) {
- node = items[nodeId];
+ for(var nodeId in filter_items) {
+ node = filter_items[nodeId];
node['marked'] = true; //mark all nodes
//clears grey background of everything
}
@@ -164,17 +165,17 @@ function markAndSweep(root){
var neighbors = mapping[mappingId];
for(var neighId in neighbors) {
neighId = neighbors[neighId];
- var neighbor = items[neighId];
+ var neighbor = filter_items[neighId];
toCheck.push(neighbor);
}
}
}
//now remove all nodes still marked
- for(var nodeId in items){
- node = items[nodeId];
+ for(var nodeId in filter_items){
+ node = filter_items[nodeId];
if(node['marked']){
- disable(node);
+ disable_node(node);
}
}
}
@@ -186,8 +187,8 @@ function process(node) {
else {
var selected = []
//remember the currently selected, then reset everything and reselect one at a time
- for(var nodeId in items) {
- node = items[nodeId];
+ for(var nodeId in filter_items) {
+ node = filter_items[nodeId];
if(node['selected']) {
selected.push(node);
}
@@ -205,9 +206,9 @@ function process(node) {
function select(node) {
elem = document.getElementById(node['id']);
node['selected'] = true;
- elem.classList.remove('cleared_node')
- elem.classList.remove('disabled_node')
- elem.classList.add('selected_node')
+ elem.classList.remove('cleared_node');
+ elem.classList.remove('disabled_node');
+ elem.classList.add('selected_node');
var input = elem.parentNode.getElementsByTagName("input")[0];
input.disabled = false;
input.value = true;
@@ -218,27 +219,27 @@ function clear(node) {
node['selected'] = false;
node['selectable'] = true;
elem.classList.add('cleared_node')
- elem.classList.remove('disabled_node')
- elem.classList.remove('selected_node')
+ elem.classList.remove('disabled_node');
+ elem.classList.remove('selected_node');
elem.parentNode.getElementsByTagName("input")[0].disabled = true;
}
-function disable(node) {
+function disable_node(node) {
elem = document.getElementById(node['id']);
node['selected'] = false;
node['selectable'] = false;
- elem.classList.remove('cleared_node')
- elem.classList.add('disabled_node')
- elem.classList.remove('selected_node')
+ elem.classList.remove('cleared_node');
+ elem.classList.add('disabled_node');
+ elem.classList.remove('selected_node');
elem.parentNode.getElementsByTagName("input")[0].disabled = true;
}
function processClick(id, multiple){
if(!initialized){
- init();
+ filter_field_init();
}
var element = document.getElementById(id);
- var node = items[id];
+ var node = filter_items[id];
if(!node['selectable']){
return;
}
@@ -259,11 +260,11 @@ function processClick(id, multiple){
function processClickMultipleObject(node){
select(node);
- add_item(node);
+ add_node(node);
process(node);
}
-function add_item(node){
+function add_node(node){
return add_item_prepopulate(node, {});
}
@@ -364,15 +365,15 @@ function remove_dropdown(id){
}
}
if(deselect_class){
- clear(items[div_class]);
+ clear(filter_items[div_class]);
}
}
function updateResult(nodeId){
if(!initialized){
- init();
+ filter_field_init();
}
- if(!items[nodeId]['multiple']){
+ if(!filter_items[nodeId]['multiple']){
var node = document.getElementById(nodeId);
var value = {}
value[nodeId] = node.parentNode.getElementsByTagName("input")[0].value;
@@ -392,10 +393,10 @@ function updateObjectResult(parentElem){
result[node_type][parentElem.id] = input;
}
-function init() {
- for(nodeId in items) {
+function filter_field_init() {
+ for(nodeId in filter_items) {
element = document.getElementById(nodeId);
- node = items[nodeId];
+ node = filter_items[nodeId];
result[element.parentNode.parentNode.id] = {}
}
initialized = true;
diff --git a/dashboard/src/templates/dashboard/searchable_select_multiple.html b/dashboard/src/templates/dashboard/searchable_select_multiple.html
index ee460dd..c08fbe5 100644
--- a/dashboard/src/templates/dashboard/searchable_select_multiple.html
+++ b/dashboard/src/templates/dashboard/searchable_select_multiple.html
@@ -116,6 +116,7 @@
string_trie.isComplete = false;
var added_items = [];
+ var initial_log = {{ initial|safe }};
var added_template = {{ added_list|default:"{}" }};
@@ -128,7 +129,7 @@
entry_p.innerText = default_entry;
}
- init();
+ search_field_init();
if( show_from_noentry )
{
@@ -149,7 +150,7 @@
}
}
- function init() {
+ function search_field_init() {
build_all_tries(items);
var initial = {{ initial|safe }};
@@ -342,14 +343,12 @@
added_items.push(item);
}
}
-
update_selected_list();
document.getElementById("user_field").focus();
}
function remove_item(item_ref)
{
-
item = Object.values(items)[item_ref];
var index = added_items.indexOf(item);
added_items.splice(index, 1);