Реализовать прототип формы react, ts

Гость4 года в сервисе

Данные заказчика будут вам доступны после подачи заявки

09.10.2020

Здравствуйте.

Это мой первый опыт обращения к фрилансу, прошу прощения за спутанность.

Для старта размышлений над проектом мне нужен прототип пользовательского интерфейса (черновик в рисунке) (только фронтенд).

## Смысл приложения таков

Просто для общего понимания - на самом деле это наверно не сильно важно, но позволяет лучше понять смысл.

А так же поясняет структура типов в 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