LaaS 3.0 Almost MVP

Change-Id: Ided9a43cf3088bb58a233dc459711c03f43e11b8 Signed-off-by: Justin Choquette <jchoquette@iol.unh.edu>
author: Justin Choquette <jchoquette@iol.unh.edu> 2023-06-08 12:46:53 -0400
committer: Justin Choquette <jchoquette@iol.unh.edu> 2023-07-21 13:17:51 -0400
commit: a09db9f287a02873c0226759f8ea444bb304cd59 (patch)
tree: 59e744e4b998973a808abbae2d21fbdd6201d829 /src/templates/base/workflow
parent: 8ddc7e820e120f1dde4e901d3cb6f1dd3f281e65 (diff)
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 %}
author	Justin Choquette <jchoquette@iol.unh.edu>	2023-06-08 12:46:53 -0400
committer	Justin Choquette <jchoquette@iol.unh.edu>	2023-07-21 13:17:51 -0400
commit	a09db9f287a02873c0226759f8ea444bb304cd59 (patch)
tree	59e744e4b998973a808abbae2d21fbdd6201d829 /src/templates/base/workflow
parent	8ddc7e820e120f1dde4e901d3cb6f1dd3f281e65 (diff)