aboutsummaryrefslogtreecommitdiffstats
path: root/src/templates/workflow
diff options
context:
space:
mode:
Diffstat (limited to 'src/templates/workflow')
-rw-r--r--src/templates/workflow/confirm.html140
-rw-r--r--src/templates/workflow/resource_select.html50
-rw-r--r--src/templates/workflow/viewport-base.html210
-rw-r--r--src/templates/workflow/viewport-element.html23
4 files changed, 89 insertions, 334 deletions
diff --git a/src/templates/workflow/confirm.html b/src/templates/workflow/confirm.html
index c1f3440..b7e6c46 100644
--- a/src/templates/workflow/confirm.html
+++ b/src/templates/workflow/confirm.html
@@ -5,26 +5,7 @@
{% 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;">
+<div class="text-center">
<h3>Confirm Session</h3>
</div>
<div id="vlan_warning"></div>
@@ -32,29 +13,34 @@
{% 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 class="container">
+ <div class="row justify-content-center">
+ <div class="col-auto">
+ <pre>{{confirmation_info|escape}}</pre>
+ </div>
</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 class="row">
+ <div class="col">
+ <div id="form_div" class="text-center p-4">
+ <form id="confirmation_form" action="/wf/workflow/" method="post">
+ {% csrf_token %}
+ <div class="d-none">
+ {{form|default:"<p> No Form Loaded</p>"}}
+ </div>
+ </form>
+ <div class="cform_buttons mx-auto">
+ <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 class="d-none">
+ <form id="manager_delete_form" action="/wf/workflow/finish/" method="post">
+ {% csrf_token %}
+ </form>
+ </div>
+ </div>
+ </div>
</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");
@@ -114,47 +100,45 @@
}
</script>
<script>
-
-function fixVlans() {
- document.getElementById("vlan_input").value = "True";
- var form = $("#vlan_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 submitting form"); }
- req.onreadystatechange = function() { //replaces current page with response
- if(req.readyState === 4 ) {
- var d = document.getElementById("vlan_warning").innerHTML = "";
- document.getElementById("confirm_button").disabled = false;
- document.getElementById("cancel_button").disabled = false;
+ function fixVlans() {
+ document.getElementById("vlan_input").value = "True";
+ var form = $("#vlan_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 submitting form"); }
+ req.onreadystatechange = function() { //replaces current page with response
+ if(req.readyState === 4 ) {
+ var d = document.getElementById("vlan_warning").innerHTML = "";
+ document.getElementById("confirm_button").disabled = false;
+ document.getElementById("cancel_button").disabled = false;
+ }
}
+ req.send(formData);
+ }
+ 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;
}
- req.send(formData);
-}
-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 %}
diff --git a/src/templates/workflow/resource_select.html b/src/templates/workflow/resource_select.html
deleted file mode 100644
index cd04137..0000000
--- a/src/templates/workflow/resource_select.html
+++ /dev/null
@@ -1,50 +0,0 @@
-{% extends "workflow/viewport-element.html" %}
-{% load staticfiles %}
-
-{% load bootstrap4 %}
-
-{% 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
index aa01d7e..103a095 100644
--- a/src/templates/workflow/viewport-base.html
+++ b/src/templates/workflow/viewport-base.html
@@ -5,165 +5,13 @@
{% block content %}
-<style>
- .go_btn {
-
- position: absolute;
- width: 100px;
- top: 170px;
- height: calc(100% - 170px);
-
- }
-
- .go_btn_disabled {
- background-color: #ffffff;
- }
-
- .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 %}
-
- #breadcrumbs {
- margin-bottom: 0;
- }
-
- .btn_wrapper {
- margin: 0;
- }
-
- .step {
- display: inline;
- padding: 7px;
- margin: 1px;
- font-size: 14pt;
- cursor: default;
- }
-
- .step:active {
- -webkit-box-shadow: inherit;
- box-shadow: inherit;
- }
-
- .step_active:active {
- -webkit-box-shadow: inherit;
- box-shadow: inherit;
- }
-
- .step_active {
- display: inline;
- padding: 7px;
- margin: 1px;
- cursor: default;
- font-size: 14pt;
- padding-bottom: 4px !important;
- border-bottom: 4px solid #41ba78 !important;
- }
-
- .step_hidden {
- background: #EFEFEF;
- color: #999999;
- }
-
- .step_invalid::after {
- content: " \2612";
- color: #CC3300;
- }
-
- .step_valid::after {
- content: " \2611";
- color: #41ba78;
- }
-
- .step_untouched::after {
- content: " \2610";
- }
-
- .iframe_div {
- width: calc(100% - 450px);
- margin-left: 70px;
- height: calc(100vh - 155px);
- position: absolute;
- border: none;
- }
-
- .iframe_elem {
- width: 100%;
- height: calc(100vh - 155px);
- border: none;
- }
-
- #breadcrumbs {
- background-color: inherit;
- }
-
- #breadcrumbs.breadcrumb>li {
- border: 1px solid #cccccc;
- border-left: none;
- }
-
- #breadcrumbs.breadcrumb>li:first-child {
- border-left: 1px solid #cccccc;
- }
-
- #breadcrumbs.breadcrumb>li+li:before {
- content: "";
- width: 0;
- margin: 0;
- padding: 0;
- }
-
- #topPagination .topcrumb {
- flex: 1 1 0;
- display: flex;
- align-content: center;
- justify-content: center;
- border: 1px solid #dee2e6;
- border-left: none;
- }
-
- .topcrumb > span {
- color: #343a40;
- cursor: default;
- }
-
- .topcrumb.active > span {
- background: #007bff;
- color: white;
- }
-
- .topcrumb.disabled > span {
- color: #6c757d;
- background: #f8f9fa;
- }
-</style>
<!-- Pagination -->
<div class="row mt-3">
<div class="col">
<nav>
<ul class="pagination d-flex flex-row" id="topPagination">
<li class="page-item flex-shrink-1 page-control">
- <a class="page-link" href="#" id="gob" onclick="go('prev')">
+ <a class="page-link" href="#" id="gob" onclick="submit_and_go('prev')">
<i class="fas fa-backward"></i> Back
</a>
</li>
@@ -193,7 +41,7 @@
</a>
</li>
<li class="page-item flex-shrink-1 page-control">
- <a class="page-link text-right" href="#" id="gof" onclick="go('next')">
+ <a class="page-link text-right" href="#" id="gof" onclick="submit_and_go('next')">
Next <i class="fas fa-forward"></i>
</a>
</li>
@@ -205,10 +53,10 @@
<div class="row px-4">
<div class="col">
<div id="iframe_header" class="row view-header">
- <div class="col-lg-12 step_header">
- <h1 class="step_title d-inline-block" id="view_title"></h1>
+ <div class="col-lg-12">
+ <h1 class="d-inline-block" id="view_title"></h1>
<span class="description text-muted" id="view_desc"></span>
- <p class="step_message" id="view_message"></p>
+ <p id="view_message"></p>
</div>
<script>
function update_description(title, desc) {
@@ -222,39 +70,30 @@
document.getElementById("view_message").classList.add("message_" + stepstatus);
}
</script>
- <!-- /.col-lg-12 -->
</div>
</div>
<div class="col-auto align-self-center d-flex">
<button id="cancel_btn" class="btn btn-danger ml-auto" onclick="cancel_wf()">Cancel</button>
</div>
</div>
-<!-- Content here -->
<div class="row d-flex flex-column flex-grow-1">
<div class="container-fluid d-flex flex-column h-100">
<div class="row d-flex flex-grow-1 p-4">
- <!-- iframe workflow -->
- <div class="col-12 d-flex border flex-grow-1">
- <!-- This was where the iframe went -->
- <iframe src="/wf/workflow" class="w-100 h-100" scrolling="yes" id="viewport-iframe"
- frameBorder="0"></iframe>
+ <div class="col-12 d-flex border flex-grow-1 px-0">
+ <div id="formContainer" class="h-100 w-100"></div>
</div>
</div>
</div>
</div>
-<div class="btn_wrapper">
-</div>
{% csrf_token %}
-
+<script src="{% static "js/dashboard.js" %}"></script>
<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 submit_and_go(to) {
+ submitStepForm(to);
}
function request_leave(to) {
@@ -289,7 +128,7 @@
req.onload = function (e) {
if (req.readyState === 4) {
if (req.status < 300) {
- document.getElementById("viewport-iframe").srcdoc = this.responseText;
+ write_iframe(this.responseText);
} else {
problem();
}
@@ -301,10 +140,6 @@
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) {
@@ -328,8 +163,7 @@
});
}
- function update_page(data) {
- context_data = data;
+ function updateBreadcrumbs(data) {
update_breadcrumbs(data);
if (data["workflow_count"] == 1) {
document.getElementById("cancel_btn").innerText = "Exit Workflow";
@@ -430,16 +264,13 @@
url = "/wf/workflow/";
req.open("GET", url, true);
req.onload = function (e) {
- var doc = document.getElementById("viewport-iframe").contentWindow.document;
- doc.open();
- doc.write(this.responseText);
- doc.close();
+ write_iframe(this.responseText);
}
req.send();
}
function write_iframe(contents) {
- document.getElementById("viewport-iframe").contentWindow.document.innerHTML = contents;
+ $("#formContainer").html(contents);
}
function redirect_root() {
@@ -477,10 +308,19 @@
function refresh_wf_iframe() {
window.location = window.location;
}
+
+ // Load the actual first page
+ $(document).ready(function(){
+ $.ajax("/wf/workflow", {
+ success: function(data) {
+ write_iframe(data);
+ }
+ });
+ });
</script>
-<div style="display: none;" id="workflow_pop_form_div">
+<div class="d-none" id="workflow_pop_form_div">
<form id="workflow_pop_form" action="/wf/workflow/finish/" method="post">
{% csrf_token %}
</form>
</div>
-{% endblock content %} \ No newline at end of file
+{% endblock content %}
diff --git a/src/templates/workflow/viewport-element.html b/src/templates/workflow/viewport-element.html
index 7a7165a..bf13304 100644
--- a/src/templates/workflow/viewport-element.html
+++ b/src/templates/workflow/viewport-element.html
@@ -1,19 +1,10 @@
-{% extends "layout.html" %}
{% load bootstrap4 %}
{% load staticfiles %}
{% block basecontent %}
- <div id="wrapper">
- <!-- Page Content -->
- <div id="page-wrapper">
-
- {% block content %}
-
- {% endblock content %}
- </div>
- <!-- /#page-wrapper -->
- </div>
+ {% block content %}
+ {% endblock content %}
{% block vport_comm %}
<script type="text/javascript">
var step_count = {{ step_number|default:0 }};
@@ -51,19 +42,9 @@
{% 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 %}