Здравствуйте. Это мой первый опыт обращения к фрилансу, прошу прощения за спутанность. Для старта размышлений над проектом мне нужен прототип пользовательского интерфейса (черновик в рисунке) (только фронтенд). ## Смысл приложения таков Просто для общего понимания - на самом деле это наверно не сильно важно, но позволяет лучше понять смысл. А так же поясняет структура типов в backend.ts. - Для устройств создается (или настраивается на основе имеющегося) образ (Image). - Устройство состоит из разных частей (шасси, приводы, контроллер) (App) - Один образ может быть использован на разных конфигурациях (HardwareType) устройства, и по этому для каждой части можно отдельно настроить какую прошивку (Binary) использовать. Вся работа производится тольк с "ссылками на бинарники и т.п." через из id. Тоесть никакой логики в этом плане нет. ## Задача Реализовать интерфейс позволяющий добавлять, перегруппировывать и перенастраивать этот тип данных: - добавлять/менять порядок/удалять App - изменять базовые настройки (одна галочка) App - удалять/добавлять/изменять Binary в приложении. - связывать Binary с конкретным оборудованием. Черновик того, как я вижу этот интерфейс в прилоежниях. На входе - json (typescript interface) на выходе такой же тип. Всё взаимодействие с бэкендом - это заглушка на клиентской стороне (zip c ts файлом в приложении). Все типы описаны интерфейсами в ts, там же есть пример структуры и заглушки вызовов бэкэнда. ## Интерфейс Интерфейс состоит из 4 основных частей - строки поиска, - панели с древовидным интерфейсом (с группировкой элементов) - панели с деталями (приложения и прошивки) ### Набросок поведения 1. в поисковую строку вводится текст. -> если ошибка - alarm(error) По завершении загрузки отображается дерево. 2. Дерево: вложенность дерева - жесткая - два уровня. Первый уровень - названия приложений. Второй уровень - это список "оборудования". Если двум разым "оборудованиям" соответствуют одинаковые приложения - они должны быть сгруппированы (как - не знаю - визуально это должно быть заметно). По клику на "названии приложения" открывается панель деталей приложения (название, список оборудования и т.п.) По клику на оборудование открывается панель с деталями приложения. 3. Детали приложения позволяют: - просмотреть детали Binary. - редактировать на каком оборудовании этот бинарник можно использовать - изменять параметры - переопределить Binary для этого железа через поиск по id, или (app + version) Как отмечалось выше - пользователь должен иметь возможность "более-менее" наглядно редактировать эту структуру. запросы к сервису реализованы с задержкой (они реально будут медленными), по этому хотелось бы, что бы интерфейс это отображал "крутилкой". ## Implementation - React - Typescript - Npm - Ant.design - предполагается использовать только на десктопах - reactive не нужен. Спасибо.
