Концепция GUI

Графический интерфейс пользователя реализован на веб-технологиях. Для доступа к функциональности приложения, пользователю не надо установливать дополнительное ПО на рабочие станции. Доступ к приложению осуществляется через веб-браузер Google Chrome 51.0 и выше или веб-браузер Яндекс 18.0 и выше.

Визуальная структура

Веб-страница приложения, визуально разделена на четыре зоны:

  • заголовок - глобальные элементы управления (синий);
  • левая - главное меню (оранжевый);
  • центральная зона делится на две части:
    • информационная панель, необязательно (зеленый);
    • рабочая область (желтый).

Заголовок страницы приложения

В верхней части страницы, помимо логотипа, присутствуют следующие элементы управления.

— В полный экран

Нажатие на кнопку разворачивает окно браузера во весь экран. Аналог нажатия кнопки «F11» на клавиатуре. Возврат из этого режима производится нажатиями одной из клавиш «Esc», «F11», либо повторным нажатием этой же экранной кнопки.

— Быстрый поиск любых объектов

Пользователю необходимо установить курсор в поле и начать набирать текст. Поиск осуществляется автоматически по мере ввода, по всем разделам системы, включая все вложенные пункты меню. Результатом поиска будет перечень ссылок для быстрого перехода к запрашиваемой информации.

— Выйти из системы

Нажатие на кнопку производит завершение текущей сессии пользователя и переадресует на страницу входа.

Важно: обязательно завершите текущие операции в системе перед выходом. Также всегда пользуйтесь этой кнопкой, прежде чем закрыть браузер.

— Свернуть меню

Нажатие на кнопку производит сокрытие главного меню, освобождая это место под рабочую область. Меню переводится в «плавающий» режим: чтобы его появления необходимо подвести курсор мыши к левой части окна браузера. Для возврата меню в закрепленный режим, необходимо повторно нажать на данную кнопку.

Главное меню

Главное меню интерфейса располагается с левой стороны экрана и служит для выбора функциональных разделов системы, таких как «Технический учет», «Управление», «Администрирование» и т. д. Выбранный элемент в меню всегда выделяется другим цветом. Перед названием раздела располагается обозначающая его пиктограмма (значок, символическое графическое изображение).

Некоторые разделы могут содержать вложенные пункты меню — подразделы, которые раскрываются нажатием на соответствующий пункт верхнего уровня.

Нажатием на кнопку внизу меню, можно его свернуть к левому краю экрана. В таком случае меню сворачивается в ширину до размеров пиктограммы. Обратное разворачивание выполняется кнопкой .

Центральная зона

Центральная зона имеет несколько типовых разметок и принципов построения интерфейса в зависимости от типа содержимого.

Страница объекта

Состоит из заголовка и рабочей области. Заголовок содержит идентификатора выбранного объекта. Для некоторых типов объектов, может содержать дополнительный текст, пиктограммы и закладки.

Визуальные компоненты

Графический интерфейс приложения построен “кирпичиков” - визуальных компонентов, типовых для всего приложения.

Виджет контейнер

В целях максимального использования пространства экрана, в табличном или картографическом виде, визуальный компонент таблица или карта помещается в другой компонент (контейнер) который называется виджет. Последний содержит название отображаемых объектов и элементы управления , которые опосредованно управляют таблицей или картой внутри контейнера. При наведении курсора мыши на каждый из них, появляется всплывающая подсказка с его назначением.

Автокомплит

Автокомплит (англ. autocomplete) - поле выбора объекта, которое подсказывает возможные значения на основании вводимого текста. В выпадающем списке появляются подходящие значения.

В списке подходящих значений, искомое значение выбирается кликом мыши или стрелочками вверх/вниз и Enter. При выборе, поле компонент окрасится в зеленый цвет. Зеленая галочка говорит о том, что элемент был выбран.

Пока не появилась зеленая галочка, считается что значение не выбрано.

Для удаления выбранного элемента используйте клавиши Del и Backspace.

Выбор интервала дат

Компонент выбора интервала дат имеет два режима:

  • свернутый - отображается выбранный интервал дат;
  • развернутый - отображает окно в котоом можно изменить интервал дат.

В большинстве случаев, компонент используется при фильтрации хронологических данных.

Свернутый режим

Компонент выглядит следующим образом:

При клике в компонент, компонент переходит в развернутый режим.

Развернутый режим

Компонент выглядит следующим образом:

  • Красным цветом подсвечивается текущая дата;
  • Серым цветом выделяется выбранные начало и конец интервала дат;
  • Кнопка Выбрать предназначена для подтверждения выбранного интервала. При нажатии компонент переходит в свернутый режим. Выбранный интервал обновляется.
  • Кнопка Отменить предназначена для отмены изменений, сделанных в окне. При нажатии компонент переходит в свернутый режим. Содержимое интервала не обновляется.

Пользователю предоставляется несколько способов выбора интервала дат:

  • клик на интервал в левой части формы позволяет, выбрать один из типовых интервалов;
  • поля ввода в верхней части формы позволяют задать интервал используя клавиатуру;
  • компонент Календарь в центральной части формы позволяет с помощью мышки установить интервал дат:
    • кликом на стрелочки задать год и месяц
    • кликом на дни задать календарные дни месяца интервала дат.

Кнопка выбора действий над объектом

Кнопка Действия содержит скрытый список с нечастыми операциями над текущим объектом, выбранными записями или всеми объектами таблицы. При нажатии на кнопку появляется выпадающий список операций в контексте текущего места:

Операции могут быть запрещены в текущем состоянии объекта (название серым и некликабельно). Клик мышки в название операции начнет выполнение операции.

Значение редактируемое в месте отображения

Текст подчеркнутый синей прерывистой линией можно перевести в режим редактирования кликом мыши. При этом на экране появится микро-окно с полем ввода или выпадающим списком и кнопки подтверждения/отмены:

  • Кнопка ОК предназначена для сохранения изменений.
  • Кнопка Отменить предназначена для отмены изменений сделанных в поле ввода. Альтернативные варианты:
    • Нажатие клавиши ESC;
    • Клик мышкой вне площади микро-окна.

При отсутствии прав доступа на редактирование, значения отображаются в виде обычного текста.

Таблица

Общее описание

Таблица - это набор пересекающихся вертикальных и горизонтальных линий - один набор опрерделяет столбцы, другой набор определяет строки. Таблица служит для отображения списка записей (объектов).

Первая строка таблицы является заголовком описывающий колонки таблицы и содержит:

  • Наименование колонки;
  • Признак возможности сортировки ;
  • Признак отсортированности по значению в данной колонке по возврастаанию или по убыванию.

Все прочие строки таблицы содержат записи (объекты).

При клике в колонку с возможностью сортировки производится прямая или обратная сортировка, при этом значок меняет свой вид.

  • Текстовые поля сортируются по алфавиту;
  • Числовые поля сортируются по значению;
  • Даты сортируются в хронологическом порядке;
  • Длительности сортируются как числа (с предварительной конвертацией в секунды).

Если таблица отсортирована по колонке А, то при клике в колонку Б, сортировка по колонке А будет отменена, и будет применена сортировка по колонке Б.

Заголовок колонки по которой отсортированы значения в таблице подчеркивается красной линией.

Навигация

В нижней части таблицы, для постраничного перехода при большом количестве записей, расположена навигационая панель которая содержит:

  • Кнопки с номерами страниц для быстрого перехода к блоку записей;
  • Кнопки Предыдущая и Следующая для изменения текущей страницы на -1 или +1;
  • Выпадающий список с количеством одновременных отображаемых записей на странице.

Фильтрация

Если таблица поддерживает режим фильтрации записей, то над таблицей будет расположен переключатель Режим фильтрации. По клику активируется режим фильтрации, когда над каждой фильтруемой колонкой появляется поле ввода. Фильтрация записей осуществляется автоматически по мере ввода текста в полях. Если по запросу не будет ничего найдено, появится надпись: «Записей не найдено».

Для отмены фильтрации следует кликнуть в переключатель еще раз .

Выбор нескольких записей

Таблицы, первый столбец которых содержит элемент выбора (чекбокс) , позволяют выделять одну или несколько строк для совершения действий над выделенными записями. Для выделения нужной строки необходимо нажать на элемент выделения внутри строки, а для группового выделения всех элементов на этой странице — в заголовке таблицы. При этом выбранные строки будут отмечены галочкой . Дальнейшее действие, например, Действия->Запросить показания, будет применяться только к выделенным записям.

Важно: при дополнительной фильтрации или сортировке элементов в таблице, выделение строк сбрасывается.

Выгрузка в Excel

Содержимое таблицы, в нижней части которой расположена кнопка Выгрузить в Excel, может быть сохранено в файле формата .xlsx по нажатию данной кнопки. Имя выгружаемого файла назначается автоматически системой. Выгружаются все отображаемые записи. То есть при выгрузке учитывается фильтрация и сортировка.

Переход на страницу объекта

Переход на страницу объекта выполняется кликом в ссылку в колонках (код, наименование) в списке объектов. Если у пользователя нет прав перехода на страницу объекта, то ссылка отображается в виде некликабельного текста черного цвета.

В приведенном примере переход на страницу опоры выполнится по клику на выбранный Код опоры, переход на страницу кабинета выполнится по клику на выбранный Кабинет

Редактирование

Редактирование записи (объекта) выполняется по нажатию на кнопку Карандаш

Удаление

Удаление записи (объекта) выполняется по нажатию на кнопку Корзина

Модальное окно

Модальное окно - это окно, которое блокирует работу пользователя с элементами управления основного окна (страницы). Преимущественно предназначено для ввода данных.

  • Кнопка Сохранить предназначена для сохранения изменений/введенных данных.
  • Кнопка Отменить предназначена для отмены изменений сделанных в полях формы. Нажатие клавиши ESC является альтернативой нажатия на кнопку.

При нажатии на Сохранить или Отменить модальное окно закрывается (скрывается).

Подтверждение действия

Для подтверждения критических операций используется модальное окно черного цвета, в котором содержится уточняющий вопрос и кнопки подтверждения/отмены операции:

  • Нажатие Да приводит к выполнению операции. Нажатие клавиши Enter является альтернативной нажатия на кнопку;
  • Нажатие Нет приводит к отмене операции. Нажатие клавиши ESC является альтернативой нажатия на кнопку.

При нажатии на любую кнопку модальное окно закрывается.

Карта

Управление картой производится с помощью кнопок расположенных в левой части карты.

Доступны следующие функции управления картой:

  • Изменение разрешения карты в сторону увеличения выполняется по нажатию на кнопку
  • Изменение разрешения карты в сторону уменьшения выполняется по нажатию на кнопку
  • Отрисовка карты во весь экран выполняется по нажатию на кнопку
  • Возврат из полноэкранного режима выполняется по нажатию на кнопку
  • Определение местоположения пользователя системы и соотвествующая отрисовка выполняется по нажатию на кнопку
  • Скрытие элементов управления содержимым карты (объектами) выполняется по нажатию на кнопку Повторное нажатие вернет карту в предыдущее состояние
  • Просмотр информации об объекте выполняется кликом на маркер. Для разных объектов используются различные как по цвету, так и по форме маркеры:
    • Кабинет
    • Опора
    • Светильник

Фильтр событий по уровню важности

Компонент мультивыбора уровня важности событий представляет собой группу кнопок с окружностями разного цвета. Каждый цвет обозначает уровень важности:

  • красный - ошибка
  • оранжевый - предупреждение
  • зеленый - уведомление