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
multi-ogserver
Javier Sánchez Parra 2021-07-16 12:22:22 +02:00 committed by OpenGnSys Support Team
parent 4e519590af
commit 4b4edf4aee
3 changed files with 21 additions and 18 deletions

View File

@ -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;
}

View File

@ -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);
}

View File

@ -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>