GUI concepts

The graphical user interface is based on web technologies. To access the functionality of the application, the user does not need to install additional software on workstations. The application is accessed through the web browser Google Chrome 51.0 and higher or the web browser Yandex 18.0 and higher.

Visual structure

The web page of the application is visually divided into four zones:

  • header - global controls (blue);
  • left - main menu (orange);
  • the central zone is divided into two parts:
    • information panel, optional (green);
    • work area (yellow).

Application page title

At the top of the page, in addition to the logo, there are the following controls.

- Full screen

Clicking on the button expands the browser window to full screen. Analogue of pressing the “F11” button on the keyboard. Return from this mode is made by pressing one of the “Esc”, “F11” keys, or by pressing the same on-screen button again.

- Quick search for any objects

The user needs to place the cursor in the field and start typing. The search is carried out automatically as you type, in all sections of the system, including all nested menu items. The search result will be a list of links for quick transition to the requested information.

  • Log out

Pressing the button terminates the current user session and redirects to the login page.

Important: Be sure to complete the current operations in the system before exiting. Also, always use this button before closing your browser.

  • Collapse the menu

Pressing the button hides the main menu, freeing up this space for the work area. The menu is put into “floating” mode: to make it appear, you need to move the mouse cursor to the left side of the browser window. To return the menu to the fixed mode, you must press this button again.

The main menu of the interface is located on the left side of the screen and serves to select the functional sections of the system, such as “Technical accounting”, “Management”, “Administration”, etc. The selected item in the menu is always highlighted in a different color. Before the name of the section, there is an icon designating it (an icon, a symbolic graphic image).

Some sections may contain nested menu items - subsections that are expanded by clicking on the corresponding top-level item.

By pressing the button at the bottom of the menu, you can minimize it to the left edge of the screen. In this case, the menu is collapsed in width to the size of the icon. Reverse expansion is performed with the Button .

Central zone

The central zone has several typical layouts and interface design principles, depending on the type of content.

Object page

Consists of a title and a work area. The header contains the identifier of the selected object. For some types of objects, it may contain additional text, icons and bookmarks.

Visual components

The graphical interface of the application is built of “bricks” - visual components that are typical for the entire application.

Widget container

In order to maximize the use of screen space, in tabular or cartographic form, the visual component of the table or map is placed in another component (container) called a widget. The latter contains the name of the displayed objects and controls , which indirectly manage the table or map inside the container. When you hover the mouse cursor over each of them, a tooltip appears with its purpose.

Autocomplete

Autocomplete is an object selection field that suggests possible values based on the entered text. The matching values appear in the drop-down list.

In the list of matching values, the desired value is selected by clicking the mouse or up / down arrows and Enter. When selected, the component box will turn green. A green check mark indicates that the item has been selected.

Until a green check mark appears, the value is considered not selected.

To delete the selected item, use the Del and Backspace keys.

Select date range

The date range picker has two modes:

  • collapsed - the selected date range is displayed;
  • maximized - displays a window in which you can change the date interval.

In most cases, the component is used to filter historical data.

Minimized mode

The component looks like this:

When you click on a component, the component goes into expanded mode.

Expanded Mode

The component looks like this:

  • The current date is highlighted in red;
  • The selected beginning and end of the date interval are highlighted in gray;
  • The Select button is used to confirm the selected interval. When pressed, the component enters collapsed mode. The selected interval is updated.
  • The Undo button is intended to cancel the changes made in the window. When pressed, the component enters collapsed mode. The contents of the interval are not updated.

The user is presented with several ways to select the date interval:

  • clicking on the interval on the left side of the form allows you to select one of the typical intervals;
  • input fields at the top of the form allow you to set the interval using the keyboard;
  • the Calendar component in the central part of the form allows you to set the date interval with the mouse:
    • by clicking on the arrows set the year and month
    • by clicking on the days, set the calendar days of the month of the date interval.

Button for selecting actions on an object

Button Actions contains a hidden list with infrequent operations on the current object, selected records or all table objects. When you click on the button, a drop-down list of operations appears in the context of the current location:

Operations can be prohibited in the current state of the object (the name is grayed out and unclickable). Clicking on the name of the operation will start the operation.

Value editable at the display location

The text underlined with a blue dashed line can be switched to editing mode with a mouse click. In this case, a micro-window with an input field or a drop-down list and confirmation / cancellation buttons will appear on the screen:

  • The OK button is intended to save the changes.
  • The Cancel button is intended to cancel the changes made in the input field. Alternative options:
    • Pressing the ESC key;
    • Click with the mouse outside the micro-window area.

If you do not have permission to edit, the values are displayed in plain text.

Table

General description

A table is a set of intersecting vertical and horizontal lines - one set defines columns, another set defines rows. The table is used to display a list of records (objects).

The first row of the table is a header describing the columns of the table and contains:

  • Column name;
  • Sign of the possibility of sorting ;
  • Sign of sorted by value in this column in ascending order or descending .

All other rows of the table contain records (objects).

When you click on a column with the possibility of sorting, direct or reverse sorting is performed, while the icon changes its appearance.

  • Text fields are sorted alphabetically;
  • Numeric fields are sorted by value;
  • Dates are sorted in chronological order;
  • Durations are sorted as numbers (with preliminary conversion to seconds).

If the table is sorted by column A, then when you click on column B, sorting by column A will be canceled, and sorting by column B will be applied.

The heading of the column by which the values are sorted in the table is underlined with a red line.

At the bottom of the table, for page-by-page navigation with a large number of records, there is a navigation panel that contains:

  • Buttons with page numbers for quick transition to the block of records;
  • Buttons Previous and Next to change the current page by -1 or +1;
  • Drop-down list with the number of simultaneous displayed records on the page.

Filtering

If the table supports the filtering mode of records, then the Filtering mode switch will be located above the table. By clicking, the filtering mode is activated, when an input field appears above each filtered column. Records are filtered automatically as you enter text in the fields. If nothing is found by your request, the following message will appear: “No records found”.

To cancel filtering, click the switch again .

Selecting multiple entries

Tables, the first column of which contains a selection element (checkbox) , allow you to select one or more rows to perform actions on the selected records. To select the required row, click on the selection element inside the row, and to group selection of all the elements on this page - in the table header. The selected lines will be marked with a check mark . Further action, for example, Actions-> Request->Readings, will be applied only to the selected records.

Important: with additional filtering or sorting of elements in the table, the selection of rows is reset.

Export to Excel

The contents of the table, at the bottom of which there is a button Download to Excel, can be saved in an .xlsx file by clicking this button. The name of the uploaded file is assigned automatically by the system. All displayed records are unloaded. That is, when unloading, filtering and sorting are taken into account.

Go to object page

The transition to the page of the object is performed by clicking on the link in the columns (code, name) in the list of objects. If the user does not have the right to go to the object page, the link is displayed as non-clickable black text.

In the given example, the transition to the mounting page will be performed by clicking on the selected Code of the mounting, the transition to the cabinet page will be performed by clicking on the selected Cabinet

Editing

Editing a record (object) is performed by clicking on the button Pencil

Delete

Deleting a record (object) is performed by clicking on the button Trash

A modal window is a window that blocks user interaction with the controls of the main window (page). Mainly intended for data entry.

  • The Save button is designed to save changes / entered data.
  • The button Cancel is intended for canceling the changes made in the form fields. Pressing the ESC key is an alternative to pressing the button.

When you click on Save or Cancel, the modal window is closed (hidden).

Confirmation of action

To confirm critical operations, a black modal window is used, which contains a clarifying question and buttons for confirming / canceling the operation:

  • Pressing Yes will execute the operation. Pressing the Enter key is an alternative to pressing the button;
  • Pressing No cancels the operation. Pressing the ESC key is an alternative to pressing the button.

Pressing any button closes the modal window.

Map

The map is controlled using the buttons located on the left side of the map.

The following card management functions are available:

  • Changing the resolution of the map in the direction of increasing is performed by clicking on the button
  • Changing the resolution of the map downward is performed by clicking on the button
  • Drawing the map in full screen is performed by pressing the button
  • Return from full-screen mode is performed by pressing the button
  • Determining the location of the system user and the corresponding rendering is performed by clicking on the button
  • Hiding the controls for the contents of the map (objects) is performed by pressing the button Pressing again will return the map to the previous state
  • Viewing information about an object is performed by clicking on the marker. For different objects, markers that are different both in color and in shape are used:
    • Cabinet
    • Mounting
    • Luminaire

Filter events by severity

The multi-select component of the event severity level is a group of buttons with circles of different colors. Each color indicates a level of importance:

  • red - error
  • orange - warning
  • green - notification
  • grey - debug event


Last modified August 11, 2022 : описание синхронизации профилей с БУ (1c671ad)