Update Lab List View

Makes the list of labs detail cards, similar to how we list
a user's bookings

Change-Id: I4c1594d990bc460b423d38b3ada62f9a12e22614
Signed-off-by: Parker Berberian <pberberian@iol.unh.edu>

1 files changed, 21 insertions, 82 deletions

diff --git a/dashboard/src/templates/dashboard/lab_list.html b/dashboard/src/templates/dashboard/lab_list.html
index a86f7f4..c459dd9 100644
--- a/dashboard/src/templates/dashboard/lab_list.html
+++ b/dashboard/src/templates/dashboard/lab_list.html
@@ -1,87 +1,26 @@
 {% extends "base.html" %}
-{% load staticfiles %}
-
-{% block extrahead %}
-    {{block.super}}
-    <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=yaml"></script>
-{% endblock %}
-
 {% block content %}
-    <style>
-     .grid-item-container {
-         padding: 10px;
-     }
-
-         .grid-item {
-             cursor: pointer;
-             border:2px;
-             border-style:none;
-             border-color:black;
-             border-radius: 5px;
-             padding: 7px;
-             color: inherit;
-
-             box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.75);
-             transition-property: box-shadow, background-color;
-             transition-duration: .2s;
-         }
-
-     .grid-item-text
-     {
-         color: inherit;
-         text-decoration: none;
-     }
-     .grid-item-text:hover
-     {
-         color: #121212;
-         text-decoration: none;
-     }
-
-     .grid-item:hover {
-         box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.75);
-         transition-property: box-shadow;
-         transition-duration: .2s;
-
-     }
-
-     .selected_node {
-         box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.75);
-         background-color: #CCECD7;
-         transition-property: background-color;
-         transition-duration: .2s;
-     }
-
-     .disabled_node {
-         cursor: not-allowed;
-         background-color: #EFEFEF;
-         box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.75);
-         transition-property: box-shadow;
-         transition-duration: .2s;
-     }
-
-     .disabled_node:hover {
-         box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.75);
-     }
-
-    </style>
-    <div class="container-fluid">
-    <div class="row">
-
-    <div class="listgrid">
-        {% for lab in labs %}
-        <div class="grid-item-container col-lg-2 col-mid-4 col-sm-6">
-
-            <a href="{{ lab.name }}" class="grid-item-text">
-
-            <div class="grid-item">
-            <h4 class="grid-item-header">{{ lab.name }}</h4>
-            <p class="grid-item-description">{{ lab.description }}</p>
+    <h2>Labs</h2>
+    <div class="card_container">
+    {% for lab in labs %}
+        <div class="detail_card">
+            <div>
+                <h3>{{lab.name}}</h3>
+                <ul class="list-group">
+                    <li class="list-group-item">name: {{lab.name}}</li>
+                    <li class="list-group-item">description: {{lab.description}}</li>
+                    <li class="list-group-item">location: {{lab.location}}</li>
+                    {% if lab.status == 0 %}
+                    <li class="list-group-item">status: Up</li>
+                    {% elif lab.status == 100 %}
+                    <li class="list-group-item">status: Down for Maintenance</li>
+                    {% elif lab.status == 200 %}
+                    <li class="list-group-item">status: Down</li>
+                    {% endif %}
+                </ul>
             </div>
-            </a>
+            <a class="btn btn-primary" href="/lab/{{lab.name}}/">Details</a>
         </div>
-        {% endfor %}
-    </div>
+    {% endfor %}
     </div>
-    </div>
-
-{% endblock content %}
+{% endblock %}