aboutsummaryrefslogtreecommitdiffstats
path: root/src/templates/workflow
diff options
context:
space:
mode:
authorParker Berberian <pberberian@iol.unh.edu>2018-10-10 16:06:47 -0400
committerParker Berberian <pberberian@iol.unh.edu>2018-10-15 13:16:11 -0400
commit1f3a770d2547848590f39e9d9b9bdffeb94eec14 (patch)
tree97222e5facd1a242d951c38482315057b5790d51 /src/templates/workflow
parent6d4019e59eda897384e9c00d1daf8b2ce87d128f (diff)
Lab as a Service 2.0
See changes here: https://wiki.opnfv.org/display/INF/Pharos+Laas Change-Id: I59ada5f98e70a28d7f8c14eab3239597e236ca26 Signed-off-by: Sawyer Bergeron <sbergeron@iol.unh.edu> Signed-off-by: Parker Berberian <pberberian@iol.unh.edu>
Diffstat (limited to 'src/templates/workflow')
-rw-r--r--src/templates/workflow/confirm.html125
-rw-r--r--src/templates/workflow/no_workflow.html7
-rw-r--r--src/templates/workflow/resource_select.html50
-rw-r--r--src/templates/workflow/viewport-base.html426
-rw-r--r--src/templates/workflow/viewport-element.html69
5 files changed, 677 insertions, 0 deletions
diff --git a/src/templates/workflow/confirm.html b/src/templates/workflow/confirm.html
new file mode 100644
index 0000000..555fa56
--- /dev/null
+++ b/src/templates/workflow/confirm.html
@@ -0,0 +1,125 @@
+{% extends "workflow/viewport-element.html" %}
+{% load staticfiles %}
+
+{% load bootstrap3 %}
+
+{% block content %}
+
+<style>
+ #form_div {
+ width: 100%;
+ padding: 5%;
+ text-align: center;
+ }
+ #text_display {
+ text-align: left;
+ display: inline-block;
+ }
+ #text_wrapper {
+ text-align: center; /*centers child div*/
+ }
+ p {
+ margin:0;
+ padding:0;
+ }
+</style>
+
+<div style="text-align:center;">
+ <h3>Confirm Session</h3>
+</div>
+<div id="vlan_warning"></div>
+<form id="vlan_form" action="/wf/workflow/" method="post">
+ {% csrf_token %}
+ <input id="vlan_input" name="vlan_input" type="hidden"/>
+</form>
+<div id="text_wrapper">
+ <div id="text_display">
+ <pre>{{confirmation_info|escape}}</pre>
+ </div>
+</div>
+<div id="form_div">
+<form id="confirmation_form" action="/wf/workflow/" method="post">
+ {% csrf_token %}
+ <div style="display: none;">
+ {{form|default:"<p> No Form Loaded</p>"}}
+ </div>
+</form>
+<div class="cform_buttons">
+ <button id="confirm_button" class="btn btn-success" onclick="formconfirm()">Confirm</button>
+ <button id="cancel_button" class="btn btn-danger" onclick="formcancel()">Cancel</button>
+</div>
+
+<div style="display: none;">
+<form id="manager_delete_form" action="/wf/workflow/finish/" method="post">
+ {% csrf_token %}
+</form>
+</div>
+
+<script>
+ var select = document.getElementById("id_confirm");
+
+ function delete_manager()
+ {
+ var form = $("#manager_delete_form");
+ var formData = form.serialize();
+ var req = new XMLHttpRequest();
+ req.open("POST", "/wf/workflow/finish/", false);
+ req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+ req.onerror = function() { alert("problem with cleaning up session"); }
+ req.onreadystatechange = function() { if(req.readyState === 4 ) { parent.redirect_root(); } }
+ req.send(formData);
+ }
+
+ function formconfirm()
+ {
+ select.value = "True";
+ document.getElementById("confirmation_form").submit();
+ }
+ function formcancel()
+ {
+ select.value = "False";
+ document.getElementById("confirmation_form").submit();
+ }
+
+ var confirmed = {{bypassed|default:"false"}};
+ if( confirmed )
+ {
+ delete_manager();
+ }
+</script>
+<script>
+
+function fixVlans() {
+ document.getElementById("vlan_input").value = "True";
+ document.getElementById("vlan_form").submit();
+}
+var problem = {{vlan_warning|default:'false'}};
+if(problem){
+ var d = document.getElementById("vlan_warning");
+ var h3 = document.createElement("h3");
+ h3.innerHTML = "WARNING: Vlans not available";
+ var h4 = document.createElement("h4");
+ h4.innerHTML = "The vlans you selected are not currently available. Would you like to automatically change them?";
+ var button1 = document.createElement("button");
+ button1.innerHTML = "Correct Vlans For Me";
+ button1.onclick = function() { fixVlans(); }
+
+ var button2 = document.createElement("button");
+ button2.innerHTML = "Cancel. I will change my vlans";
+ button2.onclick = function() { formcancel(); }
+ d.appendChild(h3);
+ d.appendChild(h4);
+ d.appendChild(button1);
+ d.appendChild(button2);
+ document.getElementById("confirm_button").disabled = true;
+ document.getElementById("cancel_button").disabled = true;
+}
+</script>
+</div>
+{% block element_messages %}
+
+{% endblock element_messages %}
+{% endblock content %}
+{% block onleave %}
+//document.getElementById("confirmation_form").submit();
+{% endblock %}
diff --git a/src/templates/workflow/no_workflow.html b/src/templates/workflow/no_workflow.html
new file mode 100644
index 0000000..ff8aab3
--- /dev/null
+++ b/src/templates/workflow/no_workflow.html
@@ -0,0 +1,7 @@
+{% extends "base.html" %}
+{% load staticfiles %}
+
+{% block content %}
+<h3>If you would like to create a booking or a resource, please use the links on the sidebar or from the homepage</h3>
+<a href="/">Go Home</a>
+{% endblock content %}
diff --git a/src/templates/workflow/resource_select.html b/src/templates/workflow/resource_select.html
new file mode 100644
index 0000000..c319ff5
--- /dev/null
+++ b/src/templates/workflow/resource_select.html
@@ -0,0 +1,50 @@
+{% extends "workflow/viewport-element.html" %}
+{% load staticfiles %}
+
+{% load bootstrap3 %}
+
+{% block content %}
+
+<p>resource selection template</p>
+
+<style>
+ .db_pane_wrapper{
+ display: grid;
+ grid-template-columns: 49% 2% 49%;
+ }
+ .divider{
+ border-style: solid;
+ height: 100vh;
+ }
+
+ .hidden_form{
+ display: none;
+ }
+</style>
+
+<div class="db_pane_wrapper">
+ <div class="pane_one">
+ <p>Select Resource</p>
+
+ </div>
+ <div class="divider">
+
+ </div>
+ <div class="pane_two">
+ <button>Create New Resource</button>
+ </div>
+</div>
+
+<div class="hidden_form" id="form_div">
+ <form method="post" action="" class="form" id="resource_selection_form">
+ {% csrf_token %}
+ {% bootstrap_field form.resourcebundle %}
+ {% buttons %}
+ <button type="submit" class="btn btn btn-success">
+ Confirm Edit
+ </button>
+ {% endbuttons %}
+ </form>
+</div>
+
+{% endblock content %} \ No newline at end of file
diff --git a/src/templates/workflow/viewport-base.html b/src/templates/workflow/viewport-base.html
new file mode 100644
index 0000000..fd9b638
--- /dev/null
+++ b/src/templates/workflow/viewport-base.html
@@ -0,0 +1,426 @@
+{% extends "base.html" %}
+{% load staticfiles %}
+
+{% load bootstrap3 %}
+
+{% block content %}
+
+<style>
+ .go_btn{
+
+ position: absolute;
+ width: 100px;
+ top: 170px;
+ height: calc(100% - 170px);
+
+ }
+ .go_forward{
+ right: 0px;
+ border-left: none;
+ }
+
+ .go_back{
+ left: 251px;
+ border-right: none;
+ }
+
+
+ .btn_wrapper{
+ text-align: center;
+ margin-bottom: 5px;
+
+ }
+
+ {% if DEBUG %}
+
+ .add_btn_wrapper{
+ right: 130px;
+ top: 10px;
+ position: absolute;
+ }
+ {% endif %}
+
+
+
+ .options{
+ position: absolute;
+ top: 60px;
+ right: 20px;
+ }
+
+ #breadcrumbs {
+ padding: 4px;
+ }
+ .step{
+ background: #DEEED3;
+ display: inline;
+ padding: 5px;
+ margin: 1px;
+ }
+
+ .step_active{
+ background: #5EC392;
+ display: inline;
+ padding: 5px;
+ margin: 1px;
+ font-weight: bold;
+ }
+
+ .step_untouched
+ {
+ background: #98B0AF;
+ }
+
+ .step_invalid
+ {
+ background: #CC3300;
+ }
+
+ .step_valid
+ {
+ background: #0FD57D;
+ }
+
+ #viewport-iframe
+ {
+ height: calc(100vh - 450);
+ }
+
+
+</style>
+
+<button id="gof" onclick="go(step+1)" class="btn go_btn go_forward">Go Forward</button>
+<button id="gob" onclick="go(step-1)" class="btn btn go_btn go_back">Go Back</button>
+
+<div class="options">
+ <button class="btn" onclick="cancel_wf()">Cancel</button>
+</div>
+<div class="btn_wrapper">
+<div id="breadcrumbs">
+</div>
+</div>
+{% csrf_token %}
+
+<script type="text/javascript">
+
+
+ update_context();
+ var step = 0;
+ var page_count = 0;
+ var context_data = false;
+
+ function go(to)
+ {
+ step_on_leave();
+ request_leave(to);
+ }
+
+ function request_leave(to)
+ {
+ $.ajax({
+ type: "GET",
+ url: "/wf/manager/",
+ beforeSend: function(request) {
+ request.setRequestHeader("X-CSRFToken",
+ $('input[name="csrfmiddlewaretoken"]').val());
+ },
+ success: function (data) {
+ confirm_permission(to, data);
+ update_page(data);
+ }
+ });
+ }
+
+ function confirm_permission(to, data)
+ {
+ if( errors_exist(data) )
+ {
+ var continueanyway = confirm("The current step has errors that will prevent it from saving. Continue anyway?");
+ if( !continueanyway )
+ {
+ return;
+ }
+ }
+ if( to >= page_count )
+ {
+ to = page_count-1;
+ }
+ else if( to < 0 )
+ {
+ to = 0;
+ }
+ var problem = function() {
+ alert("There was a problem");
+ }
+ //makes an asynch request
+ req = new XMLHttpRequest();
+ url = "/wf/workflow/?step=" + to;
+ req.open("GET", url, true);
+ req.onload = function(e) {
+ if(req.readyState === 4){
+ if(req.status < 300){
+ document.getElementById("viewport-iframe").srcdoc = this.responseText;
+ } else { problem(); }
+ } else { problem(); }
+ }
+ req.onerror = problem;
+ req.send();
+ }
+
+ function step_on_leave()
+ {
+ document.getElementById("viewport-iframe").contentWindow.step_on_leave();
+ }
+
+ function errors_exist(data)
+ {
+ var stat = data['steps'][data['active']]['valid'];
+ if( stat >= 100 && stat < 200 )
+ {
+ return true;
+ }
+ else
+ {
+ return false;
+ }
+ }
+
+ function update_context() {
+ $.ajax({
+ type: "GET",
+ url: "/wf/manager/",
+ beforeSend: function(request) {
+ request.setRequestHeader("X-CSRFToken",
+ $('input[name="csrfmiddlewaretoken"]').val());
+ },
+ success: function (data) {
+ update_page(data);
+ }
+ });
+ }
+
+ function update_page(data)
+ {
+ context_data = data;
+ update_breadcrumbs(data);
+ }
+
+ function update_breadcrumbs(meta_json) {
+ step = meta_json['active'];
+ page_count = meta_json['steps'].length;
+ //remove all children of breadcrumbs so we can redraw
+ var container = document.getElementById("breadcrumbs");
+ while(container.firstChild){
+ container.removeChild(container.firstChild);
+ }
+ //draw enough rows for all steps
+ var depth = meta_json['max_depth'];
+ for(var i=0; i<=depth; i++){
+ var div = document.createElement("DIV");
+ div.id = "row"+i;
+ if(i<depth){
+ div.style['margin-bottom'] = "7px";
+ }
+ if(i>0){
+ div.style['margin-top'] = "7px";
+ }
+ container.appendChild(div);
+ }
+ draw_steps(meta_json);
+ }
+
+ function draw_steps(meta_json){
+ var all_relations = meta_json['relations'];
+ var relations = [];
+ var active_steps = [];
+ var active_step = step;
+ while(active_step < meta_json['steps'].length){
+ active_steps.push(active_step);
+ var index = meta_json['parents'][active_step];
+ var relation = all_relations[index];
+ relations.push(relation);
+ active_step = relation['parent'];
+ }
+ var child_index = meta_json['children'][step];
+ var my_children = all_relations[child_index];
+ if(my_children){
+ relations.push(my_children);
+ }
+ draw_relations(relations, meta_json, active_steps);
+ }
+
+ function draw_relations(relations, meta_json, active_steps){
+ for(var i=0; i<relations.length; i++){
+ var relation = relations[i];
+ var children_container = document.createElement("DIV");
+ children_container.style['display'] = "inline";
+ children_container.style['margin'] = "3px";
+ children_container.style['padding'] = "3px";
+ console.log("meta_json: ");
+ console.log(meta_json);
+ for(var j=0; j<relation['children'].length; j++){
+ var step_json = meta_json['steps'][relation['children'][j]];
+ step_json['index'] = relation['children'][j];
+ var active = active_steps.indexOf(step_json['index']) > -1;
+ var step_button = create_step(meta_json['steps'][relation['children'][j]], active);
+ children_container.appendChild(step_button);
+ }
+ var parent_div = document.getElementById("row" + relation['depth']);
+ parent_div.appendChild(children_container);
+ }
+ }
+
+ function create_step(step_json, active){
+ var step_dom = document.createElement("DIV");
+ if(active){
+ step_dom.className = "step_active";
+ console.log(step_json['message']);
+
+ } else{
+ step_dom.className = "step";
+ }
+ step_dom.appendChild(document.createTextNode(step_json['title']));
+ var code = step_json['valid'];
+ stat = "";
+ msg = "";
+ if( code < 100 )
+ {
+ step_dom.classList.add("step_untouched");
+
+ stat = "";
+ msg = "";
+ }
+ else if( code < 200 )
+ {
+ step_dom.classList.add("step_invalid");
+ stat = "invalid";
+ msg = step_json['message'];
+ }
+ else if( code < 300 )
+ {
+ step_dom.classList.add("step_valid");
+ stat = "valid";
+ msg = step_json['message'];
+ }
+ if(active)
+ {
+ update_message(msg, stat);
+ }
+
+ var step_number = step_json['index'];
+ step_dom.onclick = function(){ go(step_number); }
+ //TODO: background color and other style
+ return step_dom;
+ }
+
+ function cancel_wf(){
+ $.ajax({
+ type: "POST",
+ url: "/wf/manager/",
+ data: {"cancel":"",},
+ beforeSend: function(request) {
+ request.setRequestHeader("X-CSRFToken",
+ $('input[name="csrfmiddlewaretoken"]').val()
+ );
+ },
+ success: redirect_root()
+ });
+ }
+
+ function redirect_root()
+ {
+ window.location.replace('/');
+ }
+
+ function add_wf(type){
+ add_wf_internal(type, false);
+ }
+
+ function add_edit_wf(type, target){
+ add_wf_internal(type, target);
+ }
+
+ function add_wf_internal(type, itemid){
+ data = {"add": type};
+ if(itemid){
+ data['target'] = itemid;
+ }
+ $.ajax({
+ type: "POST",
+ url: "/wf/manager/",
+ data: data,
+ beforeSend: function(request) {
+ request.setRequestHeader("X-CSRFToken",
+ $('input[name="csrfmiddlewaretoken"]').val()
+ );
+ },
+ success: refresh_wf_iframe()
+ });
+ }
+
+ function refresh_wf_iframe() {
+ window.location=window.location;
+ }
+</script>
+<div id="iframe_header" class="row view-header">
+ <div class="col-lg-12 step_header">
+ <h1 class="step_title" id="view_title"></h1>
+ <p class="description" id="view_desc"></p>
+ <p class="step_message" id="view_message"></p>
+ </div>
+ <style>
+ #view_desc{
+ margin-bottom: 15px;
+ margin-top: 5px;
+ margin-left: 30px;
+ display: inline;
+ }
+ #view_title{
+ margin-top: 5px;
+ margin-bottom: 0px;
+ display: inline;
+ }
+ #view_message{
+ margin-top: 10px;
+ margin-bottom: 5px;
+ float: right;
+ }
+ .message_invalid{
+ color: #ff4400;
+ }
+ .message_valid{
+ color: #44cc00;
+ }
+ .step_header{
+ border-bottom: 1px solid #eee;
+ border-top: 1px solid #eee;
+ left: 101px;
+ width: calc(100% - 202px);
+ }
+ </style>
+ <script>
+ function update_description(title, desc){
+ document.getElementById("view_title").innerText = title;
+ document.getElementById("view_desc").innerText = desc;
+ }
+ function update_message(message, stepstatus){
+ document.getElementById("view_message").innerText = message;
+ document.getElementById("view_message").className = "step_message";
+ document.getElementById("view_message").classList.add("message_" + stepstatus);
+ }
+ function resize_iframe(){
+ var page_rect = document.getElementById("wrapper").getBoundingClientRect();
+ var title_rect = document.getElementById("iframe_header").getBoundingClientRect();
+ var iframe_height = page_rect.bottom - title_rect.bottom;
+ console.log("setting height to " + iframe_height);
+ document.getElementById("viewport-iframe").height = iframe_height;
+
+ }
+ window.addEventListener('load', resize_iframe);
+ window.addEventListener('resize', resize_iframe);
+ </script>
+ <!-- /.col-lg-12 -->
+</div>
+
+<iframe src="/wf/workflow" style="position: absolute; left: 351px; right: 105px; width: calc(100% - 450px); border-style: none; border-width: 1px; border-color: #888888;" scrolling="yes" id="viewport-iframe" onload="resize_iframe();"></iframe>
+{% endblock content %}
diff --git a/src/templates/workflow/viewport-element.html b/src/templates/workflow/viewport-element.html
new file mode 100644
index 0000000..f25e644
--- /dev/null
+++ b/src/templates/workflow/viewport-element.html
@@ -0,0 +1,69 @@
+{% extends "layout.html" %}
+{% load bootstrap3 %}
+{% load staticfiles %}
+
+{% block basecontent %}
+
+ <div id="wrapper">
+ <!-- Page Content -->
+ <div id="page-wrapper">
+
+ {% block content %}
+
+ {% endblock content %}
+ </div>
+ <!-- /#page-wrapper -->
+ </div>
+ {% block vport_comm %}
+ <script type="text/javascript">
+ var step_count = {{ step_number|default:0 }};
+ var active_step = {{ active_step|default:0 }};
+ var render_correct = {{ render_correct|default:"false" }};
+ var title = "{{ step_title|default:"Workflow Step" }}";
+ var description = "{{ description|default:"Contact the admins, because this field should have something else filled in here" }}";
+ if(render_correct){
+ parent.update_context();
+ }
+ parent.update_description(title, description);
+ </script>
+
+ {% endblock vport_comm %}
+ {% block validate_step %}
+ <script>
+
+ function step_is_valid()
+ {
+ valid = confirm("Is this form valid?");
+ if( valid )
+ {
+ return true;
+ }
+ else{
+ return false;
+ }
+ }
+
+ function onError()
+ {
+ alert("Error: something!");
+ }
+ </script>
+
+ {% endblock validate_step %}
+
+ <script>
+ function step_on_leave() {
+ {% block onleave %}
+ alert("override onleave");
+ {% endblock %}
+ }
+ </script>
+
+ <div class="messages">
+ {% block element_messages %}
+ {% bootstrap_messages %}
+ {% endblock %}
+ </div>
+
+ <!-- /#wrapper -->
+{% endblock basecontent %}