Commit Graph

25 Commits (4c9c3b48db02bcc27a89da694cd9ef5aad1c14c5)

Author SHA1 Message Date
Javier Sánchez Parra 4c9c3b48db Add indeterminate checkboxes to scopes tree
Each checkbox may have child checkboxes. If all those children are
checked, it be checked. If none are checked, it is unchecked. If some of
them are checked, then it’s in an indeterminate state (in this case
symbolically meaning “partially” checked).
2022-04-08 08:03:10 +02:00
Javier Sánchez Parra 1120b31e38 Simplify scope identifiers
Old id format example: id_1-1_2-4_3-2

New id format example: scope-1-4-2

It represents the node and its ancestors' position with respect to
theirs siblings. The rightmost value is the current node position.

Commit f70d90ba32 introduces the old format.
2022-04-08 08:03:10 +02:00
Javier Sánchez Parra a2a5e4ed78 Submit IPs when scopes tree is read only
Otherwise, users can not switch between actions without going back to
the parent view.

This makes "scopesForm" work again in all views and not only in
scopes.html and commands.html.

Commit feed135554 introduces this regression.
2022-04-01 15:07:05 +02:00
Javier Sánchez Parra d4e7a9f05b Replace " " with "_" in HTML scopes IDs
Otherwise, scopes with whitespaces in their names breaks the javascript
code.

From
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id:

---
Note: Technically, in HTML5, the value for an id attribute may contain
any character, except whitespace characters. However, to avoid
inadvertent errors, only ASCII letters, digits, '_', and '-' should be
used and the value for an id attribute should start with a letter. For
example, . has a special meaning in CSS (it acts as a class selector).
Unless you are careful to escape it in the CSS, it won't be recognized
as part of the value of an id attribute. It is easy to forget to do
this, resulting in bugs in your code that could be hard to detect.
---
2022-03-25 12:08:39 +01:00
Javier Sánchez Parra feed135554 Disable scopes tree's checkboxes in action views
Now users can select clients only in scopes and command views, in any
other view we set the scopes tree read only.
2022-03-10 11:03:40 +01:00
Javier Sánchez Parra 7dfeb3e44e Set pills width
Set the same width to all pills.
2022-03-09 17:08:33 +01:00
Javier Sánchez Parra 632bb3d578 Add separator and heading to selected clients 2022-03-07 16:39:12 +01:00
Javier Sánchez Parra 3db3659499 Use pill style in confirmation pages
Draw selected clients from confirmation pages like selected clients from
scopes and commands pages.
2022-03-03 11:41:16 +01:00
Javier Sánchez Parra 500d92007f Replace "." with "_" in HTML scopes IDs
Otherwise, scopes with dots in their names breaks the javascript code.

From
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id:

---
Note: Technically, in HTML5, the value for an id attribute may contain
any character, except whitespace characters. However, to avoid
inadvertent errors, only ASCII letters, digits, '_', and '-' should be
used and the value for an id attribute should start with a letter. For
example, . has a special meaning in CSS (it acts as a class selector).
Unless you are careful to escape it in the CSS, it won't be recognized
as part of the value of an id attribute. It is easy to forget to do
this, resulting in bugs in your code that could be hard to detect.
---
2022-02-25 13:44:06 +01:00
Javier Sánchez Parra 23d9799e09 Limit max number of clients drawn in commands
Print large number of clients (hundreds) does not make sense, it is
unreadable.
2022-02-24 17:05:29 +01:00
Javier Sánchez Parra af4b07cecf Wrap selected clients list
Otherwise, the list overflows the screen when users select many clients.
2022-02-24 17:05:12 +01:00
Javier Sánchez Parra 42ba24c9f9 Refactor selected clients drawing in commands
Refactor duplicated code as a jinja macro.
2022-02-24 17:05:12 +01:00
Javier Sánchez Parra 886e6c7b67 Show selected clients in container block
On scopes and commands views, draw clients as users selects them in the
scopes tree.

Trigger client drawing on two events:

1."change" event, occurs when the user clicks a client checkbox. This
  event is standard [1].

2. "show-client" event, fires when ogcp get selected clients from
   localStorage and when an user checks a parent checkbox. This event is
   custom.

Dot characters (".") in clients names are replaced by underscore("_")
when used as id to avoid errors.

1. https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event
2022-02-23 10:47:08 +01:00
Javier Sánchez Parra 5d9ad78ed3 Check scopes checkboxes recursively
Otherwise, nested scopes are not checked and mislead users.

When a scope is checked, we search all its children and check them too.
2022-01-31 16:28:53 +01:00
Javier Sánchez Parra a9e6340517 Keep selected clients in the scopes tree
Otherwise, users have to click clients checkboxes every time they
switch view.

This commit adds one hook to capture when clients checkboxes changes.
When they are checked, ogcp (front-end) stores them in browser's local
storage. When they are unchecked, ogcp removes them from local storage.

Every time users load a page with the scopes tree, ogcp checks local
storage to restore selected clients.
2022-01-28 12:51:07 +01:00
Javier Sánchez Parra b7e4f47f5c Keep scopes tree state
Otherwise, users have to expand the scopes tree every time they switch
view.

This commit adds two hooks to capture when an element of the tree is
shown or is hidden[1]. When they are shown, ogcp (front-end) stores them
in browser's local storage[2]. When they are hidden, ogcp removes them
from local storage.

Every time users load a page with the scopes tree, ogcp checks local
storage to restore the scopes tree state.

Store and remove functions use stopPropagation() to prevent ancestors of
clicked elements to also be stored or removed from local storage.[3]

1. https://getbootstrap.com/docs/4.1/components/collapse/#events
2. https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API
3. https://javascript.info/bubbling-and-capturing
2022-01-28 08:23:43 +01:00
Javier Sánchez Parra 5fbcff64f2 Remove dead code in macro.html
scopes_tree_collapse() replaces this dead code.
2022-01-28 08:23:43 +01:00
Javier Sánchez Parra f70d90ba32 Ensure unique HTML ids for scope elements
Otherwise, undesired collapse/expand events may occur when users click
an element of the scope.

Old id format example: level3-2

New id format example: id_1-1_2-4_3-2

Explanation:

	* "id" -> Prefix needed because html ids must start with an
	  alphabetic character.

	* "_" -> Separator.

	* "1-1" -> Values pair separated by "-". The first value is the
	  level of the node. The second value is its position with
	  respect to its siblings. This is always 1-1 because is the
	  root node.

	* "_" -> Separator.

	* "2-4" -> Child node of the previous node. In this example,
	  this node its in level 2 and has the fourth position.

	* "_" -> Separator.

	* "3-2" -> Child of node "2-4" in level 3 and in the second
	  position. This is the final node in this example.

In other cases ogcp may draws deeper nodes, so it creates longer ids.
For example: id_1-1_2-1_3-2_4-1_5-1_6-1
2021-11-26 12:43:53 +01:00
Jose M. Guisado 76d500fe2e Keep scopes collapsed by default
For large scopes, unfolding by default slows page loading. It also
takes lots of vertical space and the scroll bar gets smaller.
2021-10-15 12:14:53 +02:00
Javier Sánchez Parra 95c113f067 Fix scopes tree draw on empty centers/rooms
Otherwise, ogcp draws empty centers and rooms as computers, with the
state circle.
2021-07-30 13:01:36 +02:00
Javier Sánchez Parra 4b4edf4aee 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
2021-07-20 11:22:41 +02:00
Daniel García Moreno 4e519590af Update scopes tree dynamically
This patch adds a javascript function to update the scope tree (on/off)
state.

This javacript function is called every second, does a call to the
new backend endpoint `/scopes/status` and updates the tree classes
depending on the current data.

The new `/scopes/status` endpoint just returns the scopes tree as json.

This patch also adds an icon in the tree leafs, a filled green circle
when the state is `on`, and a empty red circle when the state is `off`.

There's also a new javascript function to unfold all collapses in the
scope tree.
2021-07-07 11:27:28 +02:00
Jose M. Guisado Gomez 288654722d Add scopes_tree_collapse macro
Being able to collapse the scopes tree allows to fit a bigger scopes
tree.

A new macro is introduced to generate the HTML code for the scope tree
in such a way that each non-leaf level (center, room) are collapsible.

	macros.scopes_tree_collapse(scopes)

As of now, the state of the scope tree is not saved when changing nav
sections.
2021-06-30 17:19:17 +02:00
Daniel García Moreno f121d591e5 Keep the selection in the sidebar for mode & setup 2021-06-17 16:42:50 +02:00
Jose M. Guisado 3667db8662 Add commands view and macros.html
Commands view has a scope sidebar with the content block filled with
command buttons (poweroff, wol, etc.)

This commit leaves scope create/delete/update buttons in the /scopes
view, which serves that purpose.

To avoid duplicating scope tree creation macro, an external macros.html
is created, this template can be imported. Future macros needed can be
written in there.
2021-06-17 09:58:11 +02:00