Add clients in Linux and Windows mode

Scopes tree shows clients booted in Linux and Windows with ogClient
installed. It also shows if the user logs in.

2 files changed, 36 insertions, 3 deletions

diff --git a/ogcp/static/css/soleta.css b/ogcp/static/css/soleta.css
index 5edf03f..6a0a850 100644
--- a/ogcp/static/css/soleta.css
+++ b/ogcp/static/css/soleta.css
@@ -33,11 +33,27 @@ html, body {
   color: #99791a !important;
 }
 
+.text-linux {
+  color: #d77cb3 !important;
+}
+
+.text-windows {
+  color: #2d9efb !important;
+}
+
 .badge-wol {
   color: white !important;
   background-color: #99791a !important;
 }
 
+.badge-linux {
+  background-color: #d77cb3 !important;
+}
+
+.badge-windows {
+  background-color: #2d9efb !important;
+}
+
 .og-pill {
   width: 11em;
 }
diff --git a/ogcp/static/js/ogcp.js b/ogcp/static/js/ogcp.js
index 8fb9838..61d828d 100644
--- a/ogcp/static/js/ogcp.js
+++ b/ogcp/static/js/ogcp.js
@@ -179,10 +179,18 @@ function updatePillStatus(scope, pill) {
     let link = scope.link
     let units = 'Mb/s'
     const pillCls = ['badge-danger', 'badge-success', 'badge-warning',
-                     'badge-wol', 'badge-light'];
+                     'badge-wol', 'badge-light', 'text-linux', 'text-windows'];
     pill.classList.remove(...pillCls);
     if (state === 'OPG') {
         pill.classList.add('badge-warning');
+    } else if (state === 'LNX') {
+        pill.classList.add('badge-linux');
+    } else if (state === 'LNXS') {
+        pill.classList.add('badge-linux');
+    } else if (state === 'WIN') {
+        pill.classList.add('badge-windows');
+    } else if (state === 'WINS') {
+        pill.classList.add('badge-windows');
     } else if (state === 'BSY') {
         pill.classList.add('badge-danger');
     } else if (state === 'VDI') {
@@ -209,8 +217,9 @@ function updateScopes(scopes) {
             const scopeId = `${scope.name}_${scope.id}`.replaceAll(/[.]|[ ]/g, '_');
             const iconEl = document.querySelector(`#${scopeId} .nav-icon`);
             const iconCls = ['fas', 'far', 'fa-circle', 'fa-check-circle',
-                             'fa-times-circle', 'text-danger', 'text-success',
-                             'text-warning', 'text-wol'];
+                             'fa-times-circle', 'fa-user-circle', 'text-danger',
+                             'text-success', 'text-warning', 'text-wol',
+                             'text-linux', 'text-windows'];
             iconEl.classList.remove(...iconCls);
             let newIconCls = [];
             if (scope.state === 'OPG') {
@@ -219,6 +228,14 @@ function updateScopes(scopes) {
                     newIconCls.push('fa-times-circle');
                 else
                     newIconCls.push('fa-circle');
+            } else if (scope.state === 'LNX') {
+                newIconCls.push('fas', 'fa-circle', 'text-linux');
+            } else if (scope.state === 'LNXS') {
+                newIconCls.push('fas', 'fa-user-circle', 'text-linux');
+            } else if (scope.state === 'WIN') {
+                newIconCls.push('fas', 'fa-circle', 'text-windows');
+            } else if (scope.state === 'WINS') {
+                newIconCls.push('fas', 'fa-user-circle', 'text-windows');
             } else if (scope.state === 'BSY') {
                 newIconCls.push('fas', 'fa-circle', 'text-danger');
             } else if (scope.state === 'VDI') {