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

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

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

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

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

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

Спасибо.

4 года назад
guest_16022294011999
4 года в сервисе
Был
4 года назад

Заявки фрилансеров

Андрей
 
30 лет
12 лет в сервисе
Был
3 дня назад
61 отзыв
4 года назад