LaaS 3.0 Almost MVP

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

2 files changed, 38 insertions, 84 deletions

diff --git a/src/templates/base/account/booking_list.html b/src/templates/base/account/booking_list.html
index f9234bc..2af3915 100644
--- a/src/templates/base/account/booking_list.html
+++ b/src/templates/base/account/booking_list.html
@@ -6,15 +6,13 @@
         <div class="col-12 col-md-6 col-lg-4 col-xl-3 mb-3">
             <div class="card h-100">
                 <div class="card-header">
-                    <h3>Booking {{booking.id}}</h3>
+                    <h3>{{booking.purpose}} ({{booking.id}})</h3>
                 </div>
                 <ul class="list-group list-group-flush h-100">
-                    <li class="list-group-item">id: {{booking.id}}</li>
-                    <li class="list-group-item">lab: {{booking.lab}}</li>
-                    <li class="list-group-item">resource: {{booking.resource.template.name}}</li>
-                    <li class="list-group-item">start: {{booking.start}}</li>
-                    <li class="list-group-item">end: {{booking.end}}</li>
-                    <li class="list-group-item">purpose: {{booking.purpose}}</li>
+                    <li class="list-group-item">Lab: {{booking.lab}}</li>
+                    <li class="list-group-item">Project: {{booking.project}}</li>
+                    <li class="list-group-item">Start: {{booking.start}}</li>
+                    <li class="list-group-item">End: {{booking.end}}</li>
                 </ul>
                 <div class="card-footer d-flex">
                     <a class="btn btn-primary ml-auto mr-2" href="/booking/detail/{{booking.id}}/">Details</a>
@@ -41,15 +39,14 @@
         <div class="col-12 col-md-6 col-lg-4 col-xl-3 mb-3">
             <div class="card h-100">
                 <div class="card-header">
-                    <h3>Booking {{booking.id}}</h3>
+                    <h3>{{booking.purpose}} ({{booking.id}})</h3>
                 </div>
                 <ul class="list-group list-group-flush h-100">
-                    <li class="list-group-item">id: {{booking.id}}</li>
-                    <li class="list-group-item">lab: {{booking.lab}}</li>
-                    <li class="list-group-item">resource: {{booking.resource.template.name}}</li>
-                    <li class="list-group-item">start: {{booking.start}}</li>
-                    <li class="list-group-item">end: {{booking.end}}</li>
-                    <li class="list-group-item">purpose: {{booking.purpose}}</li>
+                    <li class="list-group-item">Owner: {{booking.owner}}</li>
+                    <li class="list-group-item">Lab: {{booking.lab}}</li>
+                    <li class="list-group-item">Project: {{booking.project}}</li>
+                    <li class="list-group-item">Start: {{booking.start}}</li>
+                    <li class="list-group-item">End: {{booking.end}}</li>
                 </ul>
                 <div class="card-footer d-flex">
                     <a class="btn btn-primary ml-auto" href="/booking/detail/{{booking.id}}/">Details</a>
@@ -72,17 +69,15 @@
         <div class="col-12 col-md-6 col-lg-4 col-xl-3 mb-3">
             <div class="card h-100">
                 <div class="card-header">
-                    <h3>Booking {{booking.id}}</h3>
+                    <h3>{{booking.purpose}} ({{booking.id}})</h3>
                 </div>
                 <ul class="list-group list-group-flush h-100">
-                    <li class="list-group-item">id: {{booking.id}}</li>
-                    <li class="list-group-item">lab: {{booking.lab}}</li>
-                    <li class="list-group-item">resource: {{booking.resource.template.name}}</li>
-                    <li class="list-group-item">start: {{booking.start}}</li>
-                    <li class="list-group-item">end: {{booking.end}}</li>
-                    <li class="list-group-item">purpose: {{booking.purpose}}</li>
-                    <li class="list-group-item">owner: {{booking.owner.userprofile.email_addr}}</li>
-                </ul>
+                    <li class="list-group-item">Owner: {{booking.owner}}</li>
+                    <li class="list-group-item">Lab: {{booking.lab}}</li>
+                    <li class="list-group-item">Project: {{booking.project}}</li>
+                    <li class="list-group-item">Start: {{booking.start}}</li>
+                    <li class="list-group-item">End: {{booking.end}}</li>
+
                 <div class="card-footer d-flex">
                     <a class="btn btn-primary ml-auto" href="/booking/detail/{{booking.id}}/">Details</a>
                 </div>
@@ -101,7 +96,7 @@
         current_booking_id = booking_id;
     }
 
-    function submit_cancel_form() {
+    async function submit_cancel_form() {
         var ajaxForm = $("#booking_cancel_form");
         var formData = ajaxForm.serialize();
         req = new XMLHttpRequest();
@@ -110,6 +105,8 @@
         req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
         req.onerror = function() { alert("problem submitting form"); }
         req.send(formData);
+        await new Promise(r => setTimeout(r, 500)); // Quickest solution I could come up with to give liblaas time to mark it as deleted until we do an api rework
+        location.reload();
     }
 </script>
 
diff --git a/src/templates/base/account/resource_list.html b/src/templates/base/account/resource_list.html
index 33ccaff..c16fd07 100644
--- a/src/templates/base/account/resource_list.html
+++ b/src/templates/base/account/resource_list.html
@@ -1,21 +1,26 @@
 {% extends "base.html" %}
+{% block extrahead %}
+<script src="/static/js/workflows/workflow.js"></script>
+{% endblock %}
 {% block content %}
 <div class="row">
-{% for resource in resources %}
+{% for resource in templates %}
     <div class="col-12 col-md-6 col-lg-4 col-xl-3 mb-3">
         <div class="card h-100">
             <div class="card-header">
-                <h3>Resource {{resource.id}}</h3>
+                <h3>{{resource.pod_name}}</h3>
             </div>
             <ul class="list-group list-group-flush h-100">
-                <li class="list-group-item">id: {{resource.id}}</li>
-                <li class="list-group-item">name: {{resource.name}}</li>
-                <li class="list-group-item">description: {{resource.description}}</li>
+                <li class="list-group-item">Description: {{resource.pod_desc}}</li>
+                <li class="list-group-item">Lab: {{resource.lab_name}}</li>
+                <li class="list-group-item">Hosts: {% for h in resource.host_list %}{{h.hostname}}{% if not forloop.last %}, {% endif %}{% endfor %}</li>
+                <li class="list-group-item">Networks: {% for n in resource.networks %}{{n.name}}{% if not forloop.last %}, {% endif %}{% endfor %}</li>
+
             </ul>
             <div class="card-footer">
                 <button
                     class="btn btn-danger w-100"
-                    onclick='delete_resource({{resource.id}});'
+                    onclick='delete_resource("{{resource.id}}");'
                     data-toggle="modal"
                     data-target="#resModal"
                 >Delete</button>
@@ -29,67 +34,19 @@
 {% endfor %}
 </div>
 <script>
-    var active_resources = {{active_resources|safe|default:"{}"}}
+    const user = "{{user}}"
     var current_resource_id = -1;
     function delete_resource(resource_id) {
         document.getElementById("confirm_delete_button").removeAttribute("disabled");
-        var warning = document.createTextNode("Are You Sure?");
-        var warning_subtext = document.createTextNode("This cannot be undone");
-        if(active_resources[resource_id]){
-            var warning = document.createTextNode("This resource is being used or is scheduled to be used. It cannot be deleted.");
-            var warning_subtext = document.createTextNode("If your booking just ended, you may need to give us a few minutes to clean it up before this can be removed.");
-
-            document.getElementById("confirm_delete_button").disabled = true;
-        }
-        else {
-            warning_text = "Are You Sure?";
-            warning = document.createTextNode(warning_text);
-        }
-
         current_resource_id = resource_id;
-        set_modal_text(warning, warning_subtext);
     }
 
-    function set_modal_text(title, text) {
-        var clear = function(node) {
-            while(node.lastChild) {
-                node.removeChild(node.lastChild);
-            }
+    async function submit_delete_form() {
+        if(LibLaaSAPI.deleteTemplate(current_resource_id)) {
+            location.reload();
+        } else {
+            alert('Unable to delete template.');
         }
-        var warning_title = document.getElementById("config_warning");
-        var warning_text = document.getElementById("warning_subtext");
-
-        clear(warning_title);
-        clear(warning_text);
-
-        warning_title.appendChild(title);
-        warning_text.appendChild(text);
-    }
-
-    function list_configs(configs) {
-        var list = document.getElementById("config_list");
-        for(var i=0; i<configs.length; i++){
-            var str = configs[i].name;
-            var list_item = document.createElement("LI");
-            list_item.appendChild(document.createTextNode(str));
-            list.appendChild(list_item);
-        }
-    }
-
-    function submit_delete_form() {
-        var ajaxForm = $("#res_delete_form");
-        var formData = ajaxForm.serialize();
-        req = new XMLHttpRequest();
-        var url = "delete/" + current_resource_id;
-        req.onreadystatechange = function() {
-            if (this.readyState == 4 && this.status == 200) {
-                location.reload();
-            }
-        };
-        req.open("POST", url, true);
-        req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
-        req.onerror = function() { alert("problem submitting form"); }
-        req.send(formData);
     }
 </script>
 <div class="modal fade" id="resModal" tabindex="-1" role="dialog" aria-hidden="true">