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

2 files changed, 14 insertions, 13 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);
         }