wiki/tasks/enduro-trails/BRD_PHASE5.md

BRD: Enduro Trails — Фаза 5 «Редизайн»

Версия: 2.1
Дата: 2026-05-06
Автор: Стрим 🌊
Статус: ✅ Реализовано (с дополнениями)

---

1. Контекст и проблема

Фазы 3–4 дали полный функционал (роутинг, разведка, связка, красивый маршрут), но UI был dev-прототипом: белый фон, emoji-иконки, панели перекрывали карту, не работало на мобиле в перчатках.

2. Цель

Мобильный UI уровня onX Offroad / Locus Map — тёмный, эндуро-стильный, thumb-friendly. Карта — главный герой. UI — минималистичный HUD.

3. Что реализовано в Фазе 5

✅ Дизайн-система

• Две темы: тёмная (body.theme-dark) и светлая (body.theme-light)
• Авто-режим: SunCalc (CDN) определяет восход/закат по геолокации (fallback: Москва 55.75°N)
• Три режима переключателя: Авто → Светлая → Тёмная → Авто (циклически)
• Сохранение: localStorage — режим темы сохраняется между сессиями
• CSS vars: все компоненты используют var(--bg), var(--surface), var(--accent) и т.д.
• Карта: map.setStyle() переключает dark/light style.json при смене темы; слои пересоздаются через map.on('style.load', onMapStyleLoad)

✅ Layout и компоненты

• Search bar — position: fixed, top, safe-area, все цвета через CSS vars
• Bottom toolbar — 6 режимов (Маршрут, Связка, Красивый, Разведка, Линейка, Метка), SVG Lucide-иконки, активная кнопка = оранжевый фон + белый текст
• Bottom sheets — 4 шита (route/recon/scenic/link), slide-up анимация, drag handle, safe-area padding
• Map controls — компас + геолокация, справа
• Skeleton loading — shimmer-анимация в карточках маршрутов пока идёт запрос

✅ Анимации

• Sheet slide: transform: translateY + cubic-bezier(0.32, 0, 0.15, 1), 300ms
• Кнопки: scale(0.94) при tap
• Карточки маршрутов: cardFadeIn stagger (0/60/120/180/240ms)
• Маркеры: markerPopIn scale появление

✅ Свайп вниз для закрытия sheet

• initSheetSwipe() — touch-обработка на всех .bottom-sheet
• Свайп > 80px → closeSheet()
• Во время свайпа: translateY(dy) для визуального feedback

✅ Адаптив — десктоп

• @media (min-width: 768px) — toolbar вертикально слева, sheet с max-width 400px

✅ Промежуточные точки — drag-and-drop (добавлено в ходе фазы)

• Grip-иконка (6 кружков, Lucide-style) в каждом wl-item
• _initWaypointDragHandles(list) — единая логика для touch и mouse
• Touch (мобиль): touchstart/touchmove/touchend
• Mouse (десктоп): mousedown → document mousemove/mouseup
• Визуальный feedback: dragging (opacity 0.4), drag-over-top/drag-over-bottom (border accent)
• После drop: rebuildWaypointMarkers() + renderWaypointsList() + debounceBuildRoute()

✅ Кнопка «Скачать GPX» (изменение в ходе фазы)

• Кнопка «Поделиться» (share dialog с Telegram/WhatsApp) убрана по запросу Славы
• Заменена на прямую кнопку «Скачать GPX» с download-иконкой (стрелка вниз)
• onclick="downloadGPX()" — без промежуточных диалогов

✅ Расстояние по маршруту между точками (добавлено 05.05.2026)

• Функция getRouteSegmentDistances() — snap каждого waypoint к ближайшей точке геометрии OSRM

• Первая точка → snapIdx[0] = 0, последняя → snapIdx[n-1] — гарантирует покрытие всей геометрии

• Сумма сегментов масштабируется к route.distance_m — точное совпадение (diff=0)

• Обновляется при смене варианта (selectRoute, selectMiniRoute)

• Обновляется после построения маршрута (drawRouteResults → renderWaypointsList)

• Fallback на haversine по прямой если маршрут ещё не построен

• Форматирование toFixed(1) везде (сегменты, карточки вариантов, мини-бар)

• #mini-route-bar — компактная полоска поверх карты когда sheet свёрнут

• Показывает активный маршрут (дистанция, % грунт)

• Кнопки: добавить точку, развернуть sheet

• miniAddWaypoint() — теперь корректно устанавливает routeMode = true перед addingWaypoint = true

✅ Поиск точек маршрута (добавлено 05.05.2026)

• Убран верхний search bar, поиск перенесён прямо в список waypoints
• Кнопка-лупа в каждом wl-item → inline Nominatim поиск
• btn-theme перенесён в map-controls-r

✅ Метки (named markers, добавлено 05.05.2026)

• 6 типов меток: 🚩 Флаг, 🏕 Лагерь, 🔧 Ремонт, ⛽ Заправка, 💧 Вода, 📍 Точка
• Сохраняются в localStorage (лимит 50)
• Попап с координатами и кнопками: → Точка A, → Точка B, 🗑 Удалить
• Баг исправлен: removeMarker() теперь явно закрывает попап перед удалением маркера

✅ Линейка — полный UX редизайн (06.05.2026)

Маркеры:

• Первая точка — зелёная (#2EA043) с подписью «Старт»
• Остальные точки — синие с расстоянием сегмента от предыдущей точки
• Крестик × (кнопка button) справа от расстояния в одной строке — удаляет точку
• anchor: 'center' — маркер точно привязан к точке тапа
• Label абсолютно позиционирован ниже dot

Панель общего расстояния (#ruler-info):

• Компактная: width: fit-content, max-width: 320px, прижата к левому краю
• Показывается только после добавления первой точки
• Кнопка ✓ Завершить — выход из режима рисования, линейка остаётся на карте
• Кнопка ✕ (deleteRuler()) — удаляет всю линейку

Логика кнопки тулбара (tb-ruler):

• Нет линейки → войти в режим рисования + показать toast-подсказку
• Режим активен → выйти из режима, скрыть линейку (точки сохраняются в памяти)
• Линейка скрыта → показать линейку и войти в режим рисования

Toast-подсказка:

• «Тапни на карту чтобы добавить точку» — появляется при входе в режим, исчезает через 3 сек или при первом тапе

Восстановление панели:

• Тап на линию (ruler-line) → показать панель + возобновить режим рисования
• Тап на маркер линейки → то же самое

updateRulerLabels() — пересчитывает все расстояния и цвета точек с нуля после удаления любой точки

---

4. Баги исправленные в ходе фазы (включая 06.05.2026)

Баг	Причина	Фикс
Кнопка «Добавить точку» не работала	addWaypointMode() не устанавливала routeMode = true	Добавлена проверка и установка routeMode
Web Share API не работал на HTTP	API требует HTTPS	Убран share dialog, оставлено только скачивание GPX
Drag-and-drop не работал на десктопе	Только touch-события	Добавлены mouse-события (mousedown/mousemove/mouseup)
CSS классы диалога не совпадали с JS	Dev добавил JS с одними классами, CSS с другими	Унифицированы, затем диалог полностью убран
Расстояние между точками по прямой	renderWaypointsList вызывался до построения маршрута, routeResults был пуст	Добавлен renderWaypointsList() после drawRouteResults()
Расстояние не обновлялось при смене варианта	selectRoute/selectMiniRoute не вызывали renderWaypointsList	Добавлен renderWaypointsList() в обе функции
Деплой статики не работал	deploy_app2.js копирует только app.py; образ перезаписывает статику при рестарте	SFTP → docker restart → docker cp (порядок важен!)
Крестик × линейки не срабатывал	Слишком маленькая тапабельная зона (span 11px)	Заменён на button с min-width/height: 32px, font-size: 16px
Тап на линию не показывал панель	Общий map.on('click') перехватывал событие раньше	e.originalEvent.stopPropagation() на ruler-line click
Кнопка ✕ в панели не удаляла линейку	toggleRuler() при rulerMode=false + точки есть только показывал панель	Создана отдельная функция deleteRuler()
Попап метки зависал при удалении	removeMarker() не закрывал попап перед удалением	Добавлен явный popup.remove() перед marker.remove()
#ruler-info показывался до добавления точек	Панель открывалась при входе в режим	Панель показывается только после первой точки

---

5. Definition of Done — статус

Критерий	Статус
Все P0 тест-кейсы на iPhone SE (375px)	✅
Bottom sheet плавно открывается/закрывается	✅
Toolbar: все 6 режимов, min 48px tap target	✅
Тема: авто (SunCalc) + ручной переключатель	✅
SVG иконки (Lucide), никаких emoji в UI	✅
Карта видна при активных панелях	✅
Safe area корректная	✅
Десктоп: боковая панель, не ломается layout	✅
GPX скачивание работает	✅
Drag-and-drop точек маршрута (touch + mouse)	✅
Расстояние по маршруту между точками (сумма = route.distance_m)	✅
Обновление расстояний при смене варианта маршрута	✅
Деплой + health check OK	✅
Линейка: расстояние сегмента под каждым маркером	✅
Линейка: крестик удаления точки с нормальной тапабельной зоной	✅
Линейка: панель компактная, fit-content	✅
Линейка: кнопки Завершить / Удалить всё	✅
Линейка: toast-подсказка при входе в режим	✅
Линейка: первая точка зелёная «Старт»	✅
Линейка: тап на линию/маркер возобновляет режим	✅
Линейка: логика кнопки тулбара (скрыть/показать/рисовать)	✅
Метки: 6 типов, сохранение в localStorage	✅
Метки: попап с кнопками A/B/Удалить	✅
Поиск точек маршрута inline (Nominatim)	✅

---

6. Технический стек фронтенда

• MapLibre GL JS 4.7.0 (CDN)
• SunCalc 1.9.0 (CDN) — авто-тема по восходу/закату
• Без npm-зависимостей, всё inline CSS/JS
• Деплой: Node.js ssh2 → SFTP на сервер → docker restart → docker cp после рестарта

⚠️ Критически важно: порядок деплоя статики

Образ Docker запекает статику при сборке. При docker restart образ перезаписывает /app/static/. Поэтому:

1. SFTP загрузить файлы на сервер (/home/slin/enduro-trails/prototype/static/)
2. docker restart prototype-enduro-trails-1
3. Подождать 8 секунд
4. docker cp /home/slin/.../app.js prototype-enduro-trails-1:/app/static/app.js
5. docker cp /home/slin/.../app.css prototype-enduro-trails-1:/app/static/app.css
6. docker cp /home/slin/.../index.html prototype-enduro-trails-1:/app/static/index.html

deploy_app2.js — только для app.py (бэкенд).
deploy_static.js — SFTP статики, но cp нужно делать вручную после рестарта.

---

7. Файлы

Файл	Описание
prototype/static/index.html	HTML, CDN подключения, структура DOM
prototype/static/app.css	Все стили, CSS vars, темы, компоненты
prototype/static/app.js	Вся логика: карта, роутинг, UI, drag-and-drop
prototype/app.py	Бэкенд FastAPI (не трогать)

---

Фаза 5 завершена. Следующая: Фаза 6 — SRTM рельеф.