minor status changes

Change-Id: Ia29c2879ddea67bdb6b30c4e871d8cb97be38d41
Signed-off-by: Justin Choquette <jchoquette@iol.unh.edu>

3 files changed, 41 insertions, 74 deletions

diff --git a/src/static/js/workflows/book-a-pod.js b/src/static/js/workflows/book-a-pod.js
index ddea556..2396fdb 100644
--- a/src/static/js/workflows/book-a-pod.js
+++ b/src/static/js/workflows/book-a-pod.js
@@ -64,7 +64,7 @@ const steps = {
     }
 
     onclickSelectTemplate(templateCard, templateId) {
-        this.step = steps.SELECT_TEMPLATE
+        this.goTo(steps.SELECT_TEMPLATE)
         const oldHighlight = document.querySelector("#default_templates_list .selected_node")
         if (oldHighlight) {
             GUI.unhighlightCard(oldHighlight)
@@ -90,12 +90,6 @@ const steps = {
             return[passed, message]
         }
 
-        if (!(project.match(/^[a-z0-9~@#$^*()_+=[\]{}|,.?': -]+$/i))) {
-            passed = false;
-            message = "Project field contains invalid characters"
-            return[passed, message]
-        }
-
         return [passed, message]
     }
 
@@ -109,12 +103,6 @@ const steps = {
             return[passed, message]
         }
 
-        if (!(purpose.match(/^[a-z0-9~@#$^*()_+=[\]{}|,.?': -]+$/i))) {
-            passed = false;
-            message = "Purpose field contains invalid characters"
-            return[passed, message]
-        }
-
         return [passed, message]
     }
 
@@ -129,7 +117,7 @@ const steps = {
     }
 
     onFocusInCIFile() {
-        this.step = steps.CLOUD_INIT
+        workflow.goTo(steps.CLOUD_INIT)
         const ci_textarea = document.getElementById('ci-textarea')
         GUI.unhighlightError(ci_textarea)
     }
@@ -148,7 +136,7 @@ const steps = {
     }
 
     onFocusInPurpose() {
-        this.step = steps.BOOKING_DETAILS
+        workflow.goTo(steps.BOOKING_DETAILS)
         const input = document.getElementById('input_purpose');
         GUI.hideDetailsError()
         GUI.unhighlightError(input)
@@ -168,14 +156,14 @@ const steps = {
     }
 
     onFocusInProject() {
-        this.step = steps.BOOKING_DETAILS
+        workflow.goTo(steps.BOOKING_DETAILS)
         const input = document.getElementById('input_project');
         GUI.hideDetailsError()
         GUI.unhighlightError(input)
     }
 
     onchangeDays() {
-        this.step = steps.BOOKING_DETAILS
+        workflow.goTo(steps.BOOKING_DETAILS)
         const counter = document.getElementById("booking_details_day_counter")
         const input = document.getElementById('input_length')
         workflow.bookingBlob.metadata.length = input.value
@@ -184,8 +172,7 @@ const steps = {
     }
 
     add_collaborator(username) {
-        this.step = steps.ADD_COLLABS;
-
+        workflow.goTo(steps.ADD_COLLABS)
         for (const c of this.bookingBlob.allowed_users) {
             if (c == username) {
                 return;
@@ -198,8 +185,7 @@ const steps = {
 
     remove_collaborator(username) {
         // Removes collab from collaborators list and updates summary
-        this.step = steps.ADD_COLLABS
-
+        this.goTo(steps.ADD_COLLABS)
         const temp = [];
 
         for (const c of this.bookingBlob.allowed_users) {
@@ -340,9 +326,9 @@ class GUI {
         let disabled = !isAvailable ? 'disabled = "true"' : '';
 
         const col = document.createElement('div');
-        col.classList.add('col-3', 'my-1');
+        col.classList.add('col-12', 'col-md-6', 'col-xl-3', 'my-3', 'd-flex', 'flex-grow-1');
         col.innerHTML=  `
-          <div class="card">
+          <div class="card flex-grow-1">
             <div class="card-header">
                 <p class="h5 font-weight-bold mt-2">` + templateBlob.pod_name + `</p>
             </div>
diff --git a/src/static/js/workflows/design-a-pod.js b/src/static/js/workflows/design-a-pod.js
index 2083f7d..efec093 100644
--- a/src/static/js/workflows/design-a-pod.js
+++ b/src/static/js/workflows/design-a-pod.js
@@ -68,7 +68,7 @@ class DesignWorkflow extends Workflow {
 
     /** Takes an HTML element */
     async onclickSelectLab(lab_card) {
-        this.step = steps.SELECT_LAB;
+        this.goTo(steps.SELECT_LAB)
 
         if (this.templateBlob.lab_name == null) { // Lab has not been selected yet
             this.templateBlob.lab_name = lab_card.id;
@@ -106,7 +106,7 @@ class DesignWorkflow extends Workflow {
       // Generate template cards
       // Show modal
 
-      this.step = steps.ADD_RESOURCES;
+      this.goTo(steps.ADD_RESOURCES)
 
       if (this.templateBlob.lab_name == null) {
           showError("Please select a lab before adding resources.", steps.SELECT_LAB);
@@ -269,7 +269,7 @@ class DesignWorkflow extends Workflow {
      * @param {String} hostname 
      */
     onclickDeleteHost(hostname) {
-      this.step = steps.ADD_RESOURCES;
+      this.goTo(steps.ADD_RESOURCES);
       for (let existing_host of this.templateBlob.host_list) {
         if (hostname == existing_host.hostname) {
           this.removeHostFromTemplateBlob(existing_host);
@@ -294,8 +294,7 @@ class DesignWorkflow extends Workflow {
       // Prerequisite step checks
       // GUI stuff
 
-      this.step = steps.ADD_NETWORKS;
-
+      this.goTo(steps.ADD_NETWORKS)
       if (this.templateBlob.lab_name == null) {
           showError("Please select a lab before adding networks.", steps.SELECT_LAB);
           return;
@@ -311,7 +310,7 @@ class DesignWorkflow extends Workflow {
 
     /** onclick handler for the adding_network_confirm button */
     onclickConfirmNetwork() {
-      this.step = steps.ADD_NETWORKS;
+      this.goTo(steps.ADD_NETWORKS)
 
       // Add the network
       // call the GUI to make the card (refresh the whole view to make it easier)
@@ -364,7 +363,7 @@ class DesignWorkflow extends Workflow {
      * Takes a network name as a parameter.
     */
     onclickDeleteNetwork(network_name) {
-      this.step = steps.ADD_NETWORKS;
+      this.goTo(steps.ADD_NETWORKS)
 
       for (let existing_network of this.templateBlob.networks) {
         if (network_name == existing_network.name) {
@@ -402,7 +401,7 @@ class DesignWorkflow extends Workflow {
     }
 
     onclickConfigureConnection(hostname) {
-      this.step = steps.CONFIGURE_CONNECTIONS;
+      this.goTo(steps.CONFIGURE_CONNECTIONS)
 
       const host = this.templateBlob.findHost(hostname);
       if (!host) {
@@ -450,7 +449,7 @@ class DesignWorkflow extends Workflow {
       });
 
       pod_name_input.addEventListener('focusin', (event)=> {
-        this.step = steps.POD_DETAILS;
+        this.goTo(steps.POD_DETAILS)
         GUI.unhighlightError(pod_name_input);
         GUI.hidePodDetailsError();
       });
@@ -460,7 +459,7 @@ class DesignWorkflow extends Workflow {
       });
 
       pod_desc_input.addEventListener('focusin', (event)=> {
-        this.step = steps.POD_DETAILS;
+        this.goTo(steps.POD_DETAILS)
         GUI.unhighlightError(pod_desc_input);
         GUI.hidePodDetailsError();
       });
@@ -515,9 +514,6 @@ class DesignWorkflow extends Workflow {
       else if (input.length > maxCharCount) {
         message = form_name + ' cannot exceed ' + maxCharCount + ' characters.';
         result = false;
-      } else if (!(input.match(/^[a-z0-9~@#$^*()_+=[\]{}|,.?': -!]+$/i))) {
-        message = form_name + ' contains invalid characters.';
-        result = false;
       }
 
       return [result, message]
@@ -557,7 +553,7 @@ class DesignWorkflow extends Workflow {
     }
 
     async onclickSubmitTemplate() {
-      this.step = steps.POD_SUMMARY;
+      this.goTo(steps.POD_SUMMARY)
       const simpleValidation = this.simpleStepValidation();
       if (!simpleValidation[0]) {
         showError(simpleValidation[1], simpleValidation[2])
@@ -632,8 +628,10 @@ class GUI {
     */
     static refreshAddHostModal(template_list, flavor_map) {
       document.getElementById('add_resource_modal_body').innerHTML = `
-      <h2>Resource</h2>
-      <div id="template-cards" class="row align-items-center justify-content-start">
+      <p>Select a resource, then configure the image, hostname and cloud-init (optional).</p>
+      <p>For multi-node resources, select a tab to modify each individual node.</p>
+      <h2>Resource<span class="text-danger">*</span></h2>
+      <div id="template-cards" class="row flex-grow-1">
       </div>
 
       <div id="template-config-section">
@@ -642,11 +640,11 @@ class GUI {
         </ul>
         <!-- tabs -->
         <div id="resource_config_section" hidden="true">
-          <h2>Image</h2>
+          <h2>Image<span class="text-danger">*</span></h2>
           <div id="image-cards" class="row justify-content-start align-items-center">
           </div>
           <div class="form-group">
-            <h2>Hostname</h2>
+            <h2>Hostname<span class="text-danger">*</span></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">
@@ -695,11 +693,11 @@ class GUI {
       let color = available_count > 0 ? 'text-success' : 'text-danger';
       // let disabled = available_count == 0 ? 'disabled = "true"' : '';
         const col = document.createElement('div');
-        col.classList.add('col-12', 'col-md-6', 'col-xl-3', 'my-3');
+        col.classList.add('col-12', 'col-md-6', 'col-xl-3', 'my-3', 'd-flex', 'flex-grow-1');
         col.innerHTML=  `
-          <div class="card" id="card-" ` + templateBlob.id + `>
+          <div class="card flex-grow-1" id="card-" ` + templateBlob.id + `>
             <div class="card-header">
-                <p class="h5 font-weight-bold mt-2">` + templateBlob.pod_name + `</p>
+                <p class="h5 font-weight-bold">` + templateBlob.pod_name + `</p>
             </div>
             <div class="card-body">
                 <p class="grid-item-description">` + templateBlob.pod_desc +`</p>
@@ -999,7 +997,7 @@ class GUI {
           outer_block.appendChild(inner_block)
           for (const c of bg.connections) {
             const connection_li = document.createElement('li');
-            connection_li.innerText = c.connects_to + `: ` + c.tagged;
+            connection_li.innerText = c.connects_to + `: ` + (c.tagged == true ? "tagged" : "untagged");
             inner_block.appendChild(connection_li);
           }
           bondgroup_list.appendChild(outer_block)
diff --git a/src/static/js/workflows/workflow.js b/src/static/js/workflows/workflow.js
index 97bf8f4..97892a2 100644
--- a/src/static/js/workflows/workflow.js
+++ b/src/static/js/workflows/workflow.js
@@ -196,45 +196,28 @@ class Workflow {
      * Enables the next button if the step is less than sections.length after executing
     */
     goPrev() {
-
-        if (workflow.step <= 0) {
-            return;
-        }
-
-        this.step--;
-
-        document.getElementById(this.sections[this.step]).scrollIntoView({behavior: 'smooth'});
-
-        if (this.step == 0) {
-            document.getElementById('prev').setAttribute('disabled', '');
-        } else if (this.step == this.sections.length - 2) {
-            document.getElementById('next').removeAttribute('disabled');
-        }
+        this.goTo(this.step -1);
     }
 
     goNext() {
-        if (this.step >= this.sections.length - 1 ) {
-            return;
-        }
-
-        this.step++;
-        document.getElementById(this.sections[this.step]).scrollIntoView({behavior: 'smooth'});
-
-        if (this.step == this.sections.length - 1) {
-            document.getElementById('next').setAttribute('disabled', '');
-        } else if (this.step == 1) {
-            document.getElementById('prev').removeAttribute('disabled');
-        }
+        this.goTo(this.step + 1);
     }
 
     goTo(step_number) {
         if (step_number < 0) return;
         this.step = step_number
+        document.getElementById('workflow-next').removeAttribute('hidden');
+        document.getElementById('workflow-prev').removeAttribute('hidden');
+
         document.getElementById(this.sections[this.step]).scrollIntoView({behavior: 'smooth'});
+
+        if (this.step == 0) {
+            document.getElementById('workflow-prev').setAttribute('hidden', '');
+
+        }
+
         if (this.step == this.sections.length - 1) {
-            document.getElementById('next').setAttribute('disabled', '');
-        } else if (this.step == 1) {
-            document.getElementById('prev').removeAttribute('disabled');
+            document.getElementById('workflow-next').setAttribute('hidden', '');
         }
     }