Add and restyle clients states

This patch adds new states: OPG for clients in ogLive, BSY for busy
clients, VDI for clients in OpenGnsys VDI and WOL_SENT for booting
clients.

It also removes state ON because do not exists.

ogCP currently uses the following colors:

* OPG -> Solid yellow
* BSY -> Solid red
* VDI -> Solid green
* WOL_SENT -> Solid brown
* OFF -> Hollow grey

3 files changed, 21 insertions, 18 deletions

diff --git a/ogcp/static/css/soleta.css b/ogcp/static/css/soleta.css
index d17674c..b3eca96 100644
--- a/ogcp/static/css/soleta.css
+++ b/ogcp/static/css/soleta.css
@@ -1,7 +1,3 @@
-.state--opg {
-	background-color: rgb(252, 222, 66);
-}
-
 html, body {
     width: 100%;
     height: 100% !important;
@@ -28,3 +24,7 @@ html, body {
   padding: 0;
 }
 
+.text-wol {
+  color: #99791a !important;
+}
+
diff --git a/ogcp/static/js/ogcp.js b/ogcp/static/js/ogcp.js
index ab06dfc..f9c8e56 100644
--- a/ogcp/static/js/ogcp.js
+++ b/ogcp/static/js/ogcp.js
@@ -25,20 +25,21 @@ function updateScopes(scopes) {
     scopes.forEach((scope) => {
         if (scope.state) {
             const scopeId = `${scope.name}_${scope.id}`;
-            const scopeEl = document.querySelector(`#${scopeId}`);
-            const stateCls = ['state--on', 'state--off'];
-            scopeEl.classList.remove(...stateCls);
-            const stateClass = `state--${scope.state}`;
-            scopeEl.classList.add(stateClass);
-
             const iconEl = document.querySelector(`#${scopeId} .nav-icon`);
-            const iconCls = ['fas', 'far', 'text-danger', 'text-success'];
+            const iconCls = ['fas', 'far', 'text-danger', 'text-success',
+                             'text-warning', 'text-wol'];
             iconEl.classList.remove(...iconCls);
             let newIconCls = [];
-            if (scope.state === 'on') {
+            if (scope.state === 'OPG') {
+                newIconCls.push('fas', 'text-warning');
+            } else if (scope.state === 'BSY') {
+                newIconCls.push('fas', 'text-danger');
+            } else if (scope.state === 'VDI') {
                 newIconCls.push('fas', 'text-success');
+            } else if (scope.state === 'WOL_SENT') {
+                newIconCls.push('fas', 'text-wol');
             } else {
-                newIconCls.push('far', 'text-danger');
+                newIconCls.push('far');
             }
             iconEl.classList.add(...newIconCls);
         }
diff --git a/ogcp/templates/macros.html b/ogcp/templates/macros.html
index 93c7380..09326b5 100644
--- a/ogcp/templates/macros.html
+++ b/ogcp/templates/macros.html
@@ -38,10 +38,7 @@
 
 {% macro scopes_tree_collapse_level(scopes, i) -%}
 {% for scope in scopes %}
-  <li
-    id="{{ scope["name"] }}_{{ scope["id"] }}"
-    class="nav-item {% if scope["state"] %}state--{{scope["state"] | lower}}{% endif %}"
-  >
+  <li id="{{ scope["name"] }}_{{ scope["id"] }}" class="nav-item">
     {% if " ".join(scope["ip"]) %}
         <input class="form-check-input" type="checkbox" form="scopesForm"
                value="{{ " ".join(scope["ip"]) }}"
@@ -51,7 +48,12 @@
     <a class="nav-link {% if not scope["scope"] %}disabled{% endif %}" href="#level{{i}}-{{loop.index}}"
                        {% if scope["scope"] %}data-toggle="collapse"{% endif %}>
       {% if not scope["scope"] %}
-        <i class="nav-icon fa-circle {% if scope['state'] == 'on' %}fas text-success{% else %}far text-danger{% endif %}"></i>
+        <i class="nav-icon fa-circle
+                  {% if scope['state'] == 'OPG' %}fas text-warning
+                  {% elif scope['state'] == 'BSY' %}fas text-danger
+                  {% elif scope['state'] == 'VDI' %}fas text-success
+                  {% elif scope['state'] == 'WOL_SENT' %}fas text-wol
+                  {% else %}far{% endif %}"></i>
       {% endif %}
       {{ scope["name"] }}
     </a>