aboutsummaryrefslogtreecommitdiffstats
path: root/src/templates/base/workflow
diff options
context:
space:
mode:
Diffstat (limited to 'src/templates/base/workflow')
-rw-r--r--src/templates/base/workflow/book_a_pod.html121
-rw-r--r--src/templates/base/workflow/confirm.html56
-rw-r--r--src/templates/base/workflow/design_a_pod.html214
-rw-r--r--src/templates/base/workflow/no_workflow.html3
-rw-r--r--src/templates/base/workflow/viewport-base.html82
-rw-r--r--src/templates/base/workflow/viewport-element.html17
6 files changed, 335 insertions, 158 deletions
diff --git a/src/templates/base/workflow/book_a_pod.html b/src/templates/base/workflow/book_a_pod.html
new file mode 100644
index 0000000..7053bfd
--- /dev/null
+++ b/src/templates/base/workflow/book_a_pod.html
@@ -0,0 +1,121 @@
+{% extends "base.html" %}
+{% load staticfiles %}
+{% load bootstrap4 %}
+{% block extrahead %}
+<script src="/static/js/workflows/common-models.js"></script>
+<script src="/static/js/workflows/workflow.js"></script>
+<script src="/static/js/workflows/book-a-pod.js"></script>
+{% endblock %}
+{% block content %}
+<body>
+<div class="workflow-container">
+ <div id="prev" class="row w-100 m-0">
+ <button class="btn btn-workflow-nav stretched-link m-0 p-0 mt-3" onclick="workflow.goPrev()" id="workflow-prev">
+ <div class="arrow arrow-up"></div>
+ </button>
+ </div>
+
+ <div id="next" class="row w-100 m-0">
+ <button class="btn btn-workflow-nav stretched-link m-0 p-0 mb-3" onclick="workflow.goNext()" id="workflow-next">
+ <div class="arrow arrow-down"></div>
+ </button>
+ </div>
+
+ <div class="scroll-container w-100 h-100 p-0">
+ <div class="scroll-area pt-5 mx-5" id="select_template">
+ <h1 class="mt-4"><u>Book a Pod</u></h1>
+ <h2 class="mt-4 mb-3">Select Host Or Template:</h2>
+ <div class="card-deck align-items-center">
+
+ <div class="col-12" id="template_list">
+
+ <div class="my-5" id="select_template_tab_content">
+ <ul id="default_templates_list" class="p-0 m-0 row">
+ </ul>
+ </div>
+
+ </div>
+ </div>
+ </div>
+
+ <div class="scroll-area pt-5 mx-5" id="cloud_init">
+ <h2 class="mt-4 mb-3">Global Cloud Init Override</h2>
+ <div class="d-flex align-items-center">
+ <textarea name="ci-textarea" id="ci-textarea" rows="15" class="w-50"></textarea>
+ </div>
+ </div>
+
+ <div class="scroll-area pt-5 mx-5" id="booking_details">
+ <h2 class="mt-4 mb-3">Booking Details</h2>
+ <div class="form-group mb-0">
+ <div class="row align-items-center my-4">
+ <div class="col-xl-6 col-md-8 col-11">
+ <input id="input_project" class="form-control form-control-lg border border-dark p-5" type="text" placeholder="Project">
+ </div>
+ </div>
+ <div class="row align-items-center my-4">
+ <div class="col-xl-6 col-md-8 col-11">
+ <input id="input_purpose" class="form-control form-control-lg border border-dark p-5" type="text" placeholder = "Purpose">
+ </div>
+ </div>
+ <div class="row align-items-center my-4">
+ <span id="booking_details_error" class="text-danger col-xl-6 col-md-8 col-11"></span>
+ </div>
+ <div class="row align-items-center my-4">
+ <span id="booking_details_day_counter" class="col-md-1 col-2 p-0">Days: 1</span>
+ <input id="input_length" type="range" min="1" max="21" value="1" class="form-control form-control-lg col-xl-5 col-9 p-0" placeholder="Length" oninput="workflow.onchangeDays()">
+ </div>
+ </div>
+ </div>
+
+ <div class="scroll-area pt-5 mx-5" id="add_collabs">
+ <h2 class="mt-4 mb-3">Add Collaborators:</h2>
+ <div class="row">
+ <div class="col-xl-6 col-md-8 col-11 p-0 border border-dark">
+ {% bootstrap_field form.users label="Collaborators" %}
+ </div>
+ </div>
+ </div>
+
+ <div class="scroll-area pt-5 mx-5" id="booking_summary">
+ <h2 class="mt-4 mb-3">Booking Summary</h2>
+ <div class="row align-items-center">
+ <div class="card col-xl-6 col-md-8 col-11 border-0">
+ <ul class="list-group">
+ <li class="list-group-item">Booking Details
+ <ul id="booking_summary_booking_details">
+ </ul>
+ </li>
+ <li class="list-group-item">Collaborators
+ <ul id="booking_summary_collaborators">
+ </ul>
+ </li>
+ <li class="list-group-item">Hosts
+ <ul id="booking_summary_hosts">
+ </ul>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row align-items-center mt-5">
+ <button class="btn btn-danger cancel-book-button p-0 mr-2 col-xl-2 col-md-3 col-5" onclick="workflow.onclickCancel()">Cancel</button>
+ <button class="btn btn-success cancel-book-button p-0 ml-2 col-xl-2 col-md-3 col-5" onclick="workflow.onclickConfirm()">Book</button>
+ </div>
+ </div>
+
+ </div>
+</div>
+
+<div class="hidden_form d-none">
+ <form id="token">
+ {% csrf_token %}
+ </form>
+</div>
+</body>
+
+<script>
+ const user = "{{user}}"
+ const workflow = new BookingWorkflow();
+ workflow.startWorkflow();
+ </script>
+{% endblock %}
diff --git a/src/templates/base/workflow/confirm.html b/src/templates/base/workflow/confirm.html
deleted file mode 100644
index bc8e4e3..0000000
--- a/src/templates/base/workflow/confirm.html
+++ /dev/null
@@ -1,56 +0,0 @@
-{% extends "workflow/viewport-element.html" %}
-{% load staticfiles %}
-
-{% load bootstrap4 %}
-
-{% block content %}
-
-<div class="text-center">
- <h3>Confirm Session</h3>
-</div>
-<div class="container">
- <div class="row justify-content-center">
- <div class="col-auto">
- <pre>{{confirmation_info|escape}}</pre>
- </div>
- </div>
- <div class="row">
- <div class="col">
- <div id="form_div" class="text-center p-4">
- <form id="step_form" action="/workflow/manager/" 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="/workflow/finish/" method="post">
- {% csrf_token %}
- </form>
- </div>
- </div>
- </div>
- </div>
-</div>
-<script>
- var select = document.getElementById("id_confirm");
-
- function formconfirm()
- {
- select.value = "True";
- submitStepForm();
- pop_workflow();
- }
- function formcancel()
- {
- pop_workflow();
- }
-</script>
-{% block element_messages %}
-
-{% endblock element_messages %}
-{% endblock content %}
diff --git a/src/templates/base/workflow/design_a_pod.html b/src/templates/base/workflow/design_a_pod.html
new file mode 100644
index 0000000..5d48273
--- /dev/null
+++ b/src/templates/base/workflow/design_a_pod.html
@@ -0,0 +1,214 @@
+{% extends "base.html" %}
+{% load staticfiles %}
+{% load bootstrap4 %}
+{% block extrahead %}
+<script src="/static/js/workflows/common-models.js"></script>
+<script src="/static/js/workflows/workflow.js"></script>
+<script src="/static/js/workflows/design-a-pod.js"></script>
+{% endblock %}
+{% block content %}
+{% if dashboard == 'laas' %}
+
+<!-- Main Content -->
+<body>
+
+ <div class="workflow-container">
+ <div id="prev" class="row w-100 m-0">
+ <button class="btn btn-workflow-nav stretched-link m-0 p-0 mt-3" onclick="workflow.goPrev()" id="workflow-prev">
+ <div class="arrow arrow-up"></div>
+ </button>
+ </div>
+
+ <div id="next" class="row w-100 m-0">
+ <button class="btn btn-workflow-nav stretched-link m-0 p-0 mb-3" onclick="workflow.goNext()" id="workflow-next">
+ <div class="arrow arrow-down"></div>
+ </button>
+ </div>
+
+ <div class="scroll-container w-100 h-100 p-0">
+
+ <!-- Select Lab -->
+ <div class="scroll-area pt-5 mx-5" id="select_lab">
+ <!-- Ideally the 'Design a Pod' header would be anchored to the top of the page below the arrow -->
+ <h1 class="mt-4"><u>Design a Pod</u></h1>
+ <h2 class="mt-4 mb-3">Select a Lab:</h2>
+ <div class="row card-deck" id="lab_cards">
+ </div>
+ </div>
+
+ <!-- Add Resources -->
+ <div class="scroll-area pt-5 mx-5" id="add_resources">
+ <h2 class="mt-4 mb-3">Add Resources:</h2>
+ <div class="row card-deck align-items-center" id="host_cards">
+ <div class="col-xl-3 col-md-6 col-12" id="add_resource_plus_card">
+ <div class="card align-items-center border-0">
+ <span class="" id="resource-count">0 / 8</span>
+ <button class="btn btn-success add-button p-0" onclick="workflow.onclickAddResource()">+</button>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <!-- Add Networks -->
+ <div class="scroll-area pt-5 mx-5" id="add_networks">
+ <h2 class="mt-4 mb-3">Add Networks:</h2>
+ <div class="row card-deck align-items-center" id="network_card_deck">
+ <div class="col-xl-3 col-md-6 col-12" id="add_network_plus_card">
+ <div class="card align-items-center border-0">
+ <button class="btn btn-success add-button p-0" onclick="workflow.onclickAddNetwork()">+</button>
+ </div>
+ </div>
+ </div>
+ </div>
+
+
+ <!-- Configure Connections-->
+ <div class="scroll-area pt-5 mx-5" id="configure_connections">
+ <h2 class="mt-4 mb-3">Configure Connections:</h2>
+ <div class="row card-deck align-items-center" id="connection_cards">
+ </div>
+ </div>
+
+ <!-- Pod Details-->
+ <div class="scroll-area pt-5 mx-5" id="pod_details">
+ <h2 class="mt-4 mb-3">Pod Details</h2>
+ <div class="form-group">
+ <div class="row align-items-center my-4">
+ <div class="col-xl-6 col-md-8 col-11">
+ <input id="pod-name-input" class="form-control form-control-lg border border-dark p-3" type="text" placeholder="Pod Name">
+ </div>
+ </div>
+ <div class="row align-items-center my-4">
+ <div class="col-xl-6 col-md-8 col-11">
+ <textarea id="pod-desc-input" class="form-control form-control-lg border border-dark pt-3 pl-3" rows="5" placeholder="Pod Description"></textarea>
+ </div>
+ </div>
+ <div class="row align-items-center my-4">
+ <div class="col-xl-6 col-md-8 col-11">
+ <div class="custom-control custom-switch">
+ <input type="checkbox" class="custom-control-input" id="pod-public-input">
+ <label class="custom-control-label" for="pod-public-input">Make pod template public?</label>
+ </div>
+ </div>
+ </div>
+ <div class="row align-items-center my-4">
+ <div class="col-xl-6 col-md-8 col-11">
+ <span id="pod_details_error" class="text-danger"></span>
+ </div>
+ </div>
+ </div>
+ </div>
+
+
+ <!-- Pod Summary-->
+ <div class="scroll-area pt-5 mx-5" id="pod_summary">
+ <h2 class="mt-4 mb-3">Pod Summary:</h2>
+ <div class="row align-items-center">
+ <div class="col-xl-6 col-md-8 col-11">
+ <div class="card border-0">
+ <ul class="list-group">
+ <li class="list-group-item">Pod Details
+ <ul id="pod_summary_pod_details">
+ </ul>
+ </li>
+ <li class="list-group-item">Resources
+ <ul id="pod_summary_hosts">
+ </ul>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ <div class="row align-items-center mt-5">
+ <div class="col-xl-2 col-md-3 col-5"><button class="btn btn-danger cancel-book-button p-0 w-100" onclick="workflow.onclickDiscardTemplate()">Discard</button></div>
+ <div class="col-xl-2 col-md-3 col-5"><button class="btn btn-success cancel-book-button p-0 w-100" onclick = "workflow.onclickSubmitTemplate()">Create</button></div>
+ </div>
+ </div>
+
+
+ <!-- End of workflow container and scroll container -->
+ </div>
+ </div>
+
+
+
+ <!-- Modals -->
+
+ <!-- Add Host Modal -->
+ <div class="modal fade" id="resource_modal" tabindex="-1">
+ <div class="modal-dialog modal-xl">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h5 class="modal-title">Add Resource</h5>
+ <button class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button>
+ </div>
+ <div class="modal-body" id="add_resource_modal_body">
+ <h2>Resource</h2>
+ <div id="template-cards" class="row align-items-center justify-content-start">
+ </div>
+
+ <div id="template-config-section">
+ <ul class="nav nav-tabs" role="tablist" id="add_resource_tablist">
+ <!-- add a tab per host in template -->
+ </ul>
+ <!-- tabs -->
+ <div id="resource_config_section">
+ <h2>Image</h2>
+ <div id="image-cards" class="row justify-content-start align-items-center">
+ </div>
+ <div class="form-group">
+ <h2>Hostname</h2>
+ <input type="text" class="form-control" id="hostname-input" placeholder="Enter Hostname">
+ <h2>Cloud Init</h2>
+ <div class="d-flex justify-content-center align-items-center">
+ <textarea name="ci-textarea" id="ci-textarea" rows="5" class="w-100"></textarea>
+ </div>
+ </div>
+ </div>
+ </div>
+ <p id="add-host-error-msg" class="text-danger"></p>
+ </div>
+ <div class="modal-footer">
+ <button class="btn btn-danger" data-dismiss="modal">Cancel</button>
+ <button class="btn btn-success" onclick="workflow.onclickSubmitHostConfig()">Submit</button>
+ </div>
+ </div>
+ </div>
+ </div>
+
+<!-- Configure Connections modal -->
+<div class="modal fade" id="connection_modal" tabindex="-1">
+ <div class="modal-dialog modal-lg">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h5 class="modal-title">Configure Connections</h5>
+ <button class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button>
+ </div>
+ <div class="modal-body text-center">
+ <ul class="nav nav-tabs" role="tablist" id="configure-connections-tablist">
+ </ul>
+ <table id="connections_widget" class="table table-bordered">
+ </table>
+ </div>
+ <div class="modal-footer">
+ <button class="btn btn-success" data-dismiss="modal" id="connection-modal-submit" onclick="workflow.onclickSubmitConnectionConfig()">Confirm</button>
+ </div>
+ </div>
+ </div>
+</div>
+
+<div class="hidden_form d-none">
+ <form id="token">
+ {% csrf_token %}
+ </form>
+</div>
+
+</body>
+
+<script>
+ const user = "{{user}}"
+ const workflow = new DesignWorkflow();
+ workflow.startWorkflow();
+</script>
+{% endif %}
+{% endblock %}
diff --git a/src/templates/base/workflow/no_workflow.html b/src/templates/base/workflow/no_workflow.html
deleted file mode 100644
index 0ac6549..0000000
--- a/src/templates/base/workflow/no_workflow.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<script>
- top.window.location.href='/';
-</script>
diff --git a/src/templates/base/workflow/viewport-base.html b/src/templates/base/workflow/viewport-base.html
deleted file mode 100644
index 88229ca..0000000
--- a/src/templates/base/workflow/viewport-base.html
+++ /dev/null
@@ -1,82 +0,0 @@
-{% extends "base.html" %}
-{% load staticfiles %}
-
-{% load bootstrap4 %}
-
-{% block content %}
-
-<!-- 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" id="workflow-nav-back">
- <a class="page-link" href="#" id="gob" onclick="submit_and_go('prev')">
- <i class="fas fa-backward"></i> Back
- </a>
- </li>
- <li class="page-item flex-grow-1">
- <a class="page-link disabled" href="#">
- <i class="far"></i>
- </a>
- </li>
- <li class="page-item flex-shrink-1 page-control" id="workflow-nav-next">
- <a class="page-link text-right" href="#" id="gof" onclick="submit_and_go('next')">
- Next <i class="fas fa-forward"></i>
- </a>
- </li>
- </ul>
- </nav>
- </div>
-</div>
- <div class=”row”>
- <div class=”col-xs-6 col-md-4”>
- Is something not working right? Let us know <a href="mailto::{{contact_email}}"> here! </a>
- </div>
-</div>
-<!-- Top header -->
-<div class="row">
- <div class="col">
- <div id="iframe_header" class="row view-header">
- <div class="col-lg-12">
- <h1 class="d-inline-block" id="view_title"></h1>
- <span class="description text-muted" id="view_desc"></span>
- <p id="view_message"></p>
- </div>
- </div>
- </div>
- <div class="col-auto align-self-center d-flex">
- <button id="cancel_btn" class="btn btn-danger ml-auto" onclick="pop_workflow()">Cancel</button>
- </div>
-</div>
-<div class="row d-flex flex-column flex-grow-1 mt-3">
- <div class="col flex-grow-1">
- <div id="formContainer" class="h-100 w-100"></div>
- </div>
-</div>
-{% csrf_token %}
-<script type="text/javascript">
- function submit_and_go(to) {
- submitStepForm(to);
- }
-
- $(document).ready(function(){
- $.ajax({
- url: "/workflow/manager/",
- dataType: "json",
- success: update_page
- });
- });
-
- // global variable required for mxgraph to load its css and images
- mxBasePath = '{% static "node_modules/mxgraph/javascript/src" %}';
-</script>
-<!-- lazy load scripts -->
-<script type="text/javascript" src="{% static "node_modules/mxgraph/javascript/mxClient.js" %}" ></script>
-<!-- end lazy load scripts -->
-<div class="d-none" id="workflow_pop_form_div">
- <form id="workflow_pop_form" action="/workflow/finish/" method="post">
- {% csrf_token %}
- </form>
-</div>
-{% endblock content %}
diff --git a/src/templates/base/workflow/viewport-element.html b/src/templates/base/workflow/viewport-element.html
deleted file mode 100644
index db4da54..0000000
--- a/src/templates/base/workflow/viewport-element.html
+++ /dev/null
@@ -1,17 +0,0 @@
-{% load bootstrap4 %}
-{% load staticfiles %}
-
-{% block basecontent %}
-
- {% block content %}
- {% endblock content %}
-
- <div class="messages">
- {% block element_messages %}
- {% bootstrap_messages %}
- {% endblock %}
- </div>
-{% endblock basecontent %}
-
-{% block extrajs %}
-{% endblock extrajs %}