vector/MOBILE_FORM_README.md

MobileForm - Мобильная форма с психотипом

Описание

Компонент MobileForm.tsx - мобильная форма для создания карточки пропавшего человека с блоком определения психотипа.

Расположение

• Компонент: frontend/src/components/MobileForm.tsx
• Стили: frontend/src/components/MobileForm.css

Структура формы

1. Основная информация

• Возраст (число)
• Пол (мужской/женский)

2. Диагнозы

Чекбоксы для выбора:

• РАС
• эпилепсия
• СДВГ
• деменция

3. Блок психотипа (необязательный)

Заголовок: "Поведение ребёнка (спросить родителей)"
Подзаголовок: "Помогает уточнить зону поиска"

Вопрос 1: Как ведёт себя в незнакомой обстановке?

• Активно исследует → unfamiliar_env: 'explore'
• Ждёт → unfamiliar_env: 'wait'
• Замирает → unfamiliar_env: 'freeze'
• Паникует → unfamiliar_env: 'panic'

Вопрос 2: Реакция на неудачи?

• Злится, кричит → stress_reaction: 'active'
• Плачет, замыкается → stress_reaction: 'cry'
• Спокойно ищет выход → stress_reaction: 'calm'

Вопрос 3: Лидер или ведомый?

• Лидер → group_role: 'leader'
• Иногда → group_role: 'sometimes'
• Всегда ведомый → group_role: 'follower'

Вопрос 4: Любит рисковать?

• Очень → risk_taking: 'high'
• Иногда → risk_taking: 'medium'
• Нет, осторожный → risk_taking: 'low'

Формат данных

Структура FormData

interface PsychotypeAnswers {
  unfamiliar_env?: string;
  stress_reaction?: string;
  group_role?: string;
  risk_taking?: string;
}

interface FormData {
  age?: number;
  gender?: string;
  diagnosis_type?: string[];
  psychotype_answers?: PsychotypeAnswers;
}

Пример отправляемых данных

{
  "age": 8,
  "gender": "male",
  "diagnosis_type": ["РАС"],
  "psychotype_answers": {
    "unfamiliar_env": "freeze",
    "stress_reaction": "cry",
    "group_role": "follower",
    "risk_taking": "low"
  }
}

Интеграция с API

Для определения психотипа нужно отправить psychotype_answers на endpoint:

POST /api/v1/analyze/psychotype
Content-Type: application/json

{
  "stress_reaction": "cry",
  "group_role": "follower",
  "risk_taking": "low",
  "unfamiliar_env": "freeze"
}

Ответ:

{
  "psychotype": "anxious",
  "modifiers": {
    "zone_0_500": 1.4,
    "zone_500_1500": 1.1,
    "zone_1500_2500": 0.5,
    "zone_2500plus": 0.3,
    "movement_model": "stay"
  },
  "recommendations": {
    "priority_zones": "Ближняя зона (0-500м) - критически важна",
    "search_pattern": "Тщательный осмотр ближайшей территории",
    "key_locations": "Укрытия, углубления, густая растительность",
    "communication": "Спокойные голосовые сигналы"
  }
}

Дизайн и UX

Touch-friendly кнопки

• Минимальная высота: 52px (56px на мобильных)
• Крупный шрифт: 16px
• Увеличенные отступы для удобного нажатия
• Визуальная обратная связь при нажатии (scale 0.98)

Цветовая схема

• Выбранная кнопка: #3498db (синий)
• Hover: #f0f8ff (светло-голубой фон)
• Секция психотипа: #f8f9fa (светло-серый фон)
• Кнопка отправки: #27ae60 (зелёный)

Адаптивность

• Максимальная ширина: 600px
• Мобильная оптимизация для экранов < 768px
• Вертикальное расположение кнопок для удобства на телефоне

Использование

Вариант 1: Standalone компонент

import MobileForm from './components/MobileForm';

function App() {
  return <MobileForm />;
}

Вариант 2: С обработкой отправки

import MobileForm from './components/MobileForm';

function App() {
  const handleSubmit = async (formData) => {
    // Отправка на backend
    const response = await fetch('/api/v1/cases', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(formData)
    });
    
    // Если есть psychotype_answers, получаем психотип
    if (formData.psychotype_answers) {
      const psychotypeResponse = await fetch('/api/v1/analyze/psychotype', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(formData.psychotype_answers)
      });
      const psychotypeData = await psychotypeResponse.json();
      console.log('Психотип:', psychotypeData);
    }
  };

  return <MobileForm onSubmit={handleSubmit} />;
}

Маппинг ответов на психотипы

Ответы	Психотип	Модель движения
active + leader + high	dominant	chaotic_far
calm + leader + low	harmonic	linear_landmark
cry + follower + low	anxious	stay
freeze + follower + low	introvert_passive	stay_hidden
active + leader + medium	introvert_active	linear_landmark

Валидация

• Все поля психотипа необязательные - можно пропустить
• Если заполнен хотя бы один вопрос, рекомендуется заполнить все 4
• Backend API валидирует значения и вернёт ошибку при невалидных данных

TODO

• Добавить prop onSubmit для обработки отправки формы
• Интегрировать с реальным API endpoint
• Добавить индикатор загрузки при отправке
• Показывать результат определения психотипа после отправки
• Добавить валидацию на фронтенде
• Сохранение черновика в localStorage
• Добавить больше полей (местность, погода, обстоятельства)

Связанные файлы

• backend/services/psychotype_service.py - сервис определения психотипа
• backend/api/v1/analyze.py - API endpoint /psychotype
• PSYCHOTYPE_API.md - документация API