Верстка WEB GUI интерфейса из макета Figma
Есть 8 страниц системы мониторинга и управления насосной станции, по прокачке сточных вод. Это не сайт, это WEB GUI системы, за которой сидит 24х7 оператор (он плохо учился в школе), поэтому нужны навыки работы именно с GUI.
Логин (форма: логин, пароль, кнопка войти);
Дашборд: три графика (напор дерьма, густота, цвет, интерактив на базе d3 или аналог), и две таблички (состав, гранулярность);
Инвентори насосов: табличка на 7 колонок с сортировкой, поиском, разбито на странички;
Инвентори труб: табличка на 8 колонок, две из них – графическое отображение в виде цветовой шкалы;
Инвентори колодцев: табличка на 7 колонок, сортировка, поиск, постранично;
Настройки. Т.к. настройки зависят от прав доступа на стороне сервера, то содержимое не статически захардкоржено, а динамически, но по ограниченному перечню контролов (инпутбокс, чекбокс, радиобатон и т.п.). В рамках данного проекта нужно оживить 2 пробные странички с этими элементами.
Страничка групп – создание и удаление записей в табличной части.
Карта – тут используется узкоспециализированная библиотека NeXt (не та, что все подумали), от одного известного производителя телеком оборудования (пришлите его название в отклике; любого производителя пришлите, которого знаете). С библиотекой нужно будет разобраться, т.к. нужен дополнительные контекстные меню и изменение поведения некоторых стандартных элементов (обсуждается отдельно).
Все странички с 2 по 8 имеют типовое меню в хидере.
На время разработки данные для табличек и графиков нужно будет дергать с нашего тестового сервера в JSON (или с вашего по определенному формату). Как следствие – нужны обработчики ошибок и прогресс-бары на ожидание ответа.
Все работы нужны для MVP и дальнейшего запуска в полноценную реализацию, поэтому результаты должны быть масштабируемы и адаптивны к последующим изменениям. Результат - код, который можно выложить на сервер, а также образ VM или docker, обмазанный этими вашими фреймворками и прочим NodeJS.