224 lines
8.9 KiB
Markdown
224 lines
8.9 KiB
Markdown
# Dev Task: Enduro Trails — UX маршрута + индикатор загрузки
|
||
|
||
**Приоритет:** HIGH
|
||
**Проект:** enduro-trails
|
||
**Дата:** 2026-05-05
|
||
|
||
---
|
||
|
||
## Контекст
|
||
|
||
Текущий UX маршрута неудобен:
|
||
1. После выбора двух точек автоматически открывается основной sheet — карта скрывается
|
||
2. «Добавить точку» в основном sheet не скрывает sheet — карта не видна для тапа
|
||
3. Основной sheet открывается сразу, хотя достаточно мини-бара
|
||
4. Нет индикатора что маршрут строится — пользователь не понимает что происходит
|
||
|
||
**Файлы:** ТОЛЬКО `app.js`, `app.css`, `index.html` (бэкенд НЕ трогать)
|
||
|
||
---
|
||
|
||
## Задача 1: Не открывать основной sheet автоматически
|
||
|
||
### Текущее поведение
|
||
В `initRouteClicks` при добавлении второй точки вызывается `buildRoute()` — который внутри ничего не открывает, НО `toggleRouteMode()` при входе в режим уже открыл sheet через `openSheet('sheet-route')`.
|
||
|
||
### Нужное поведение
|
||
- Вход в режим маршрута (`toggleRouteMode()`) → **НЕ открывать** `sheet-route` автоматически
|
||
- Sheet открывается ТОЛЬКО по явному тапу на мини-бар (уже работает через `showMiniRouteSheet`)
|
||
- Маршрут строится в фоне, карта остаётся видна, мини-бар показывает прогресс
|
||
|
||
### Изменения в `toggleRouteMode()`:
|
||
|
||
```js
|
||
function toggleRouteMode() {
|
||
const btn = document.getElementById('tb-route');
|
||
|
||
if (routeMode) {
|
||
// Если sheet открыт — закрыть sheet (но не выходить из режима)
|
||
const sheet = document.getElementById('sheet-route');
|
||
if (sheet && sheet.classList.contains('open')) {
|
||
closeSheet('sheet-route');
|
||
return;
|
||
}
|
||
// Если sheet закрыт — выйти из режима и сбросить маршрут
|
||
routeMode = false;
|
||
btn.classList.remove('active');
|
||
clearRoute();
|
||
window._map.getCanvas().style.cursor = '';
|
||
} else {
|
||
// Войти в режим маршрута — НЕ открывать sheet
|
||
deactivateAllModes();
|
||
routeMode = true;
|
||
btn.classList.add('active');
|
||
clearRoute();
|
||
window._map.getCanvas().style.cursor = 'crosshair';
|
||
// sheet НЕ открываем — пользователь сам тапнет на мини-бар
|
||
}
|
||
updateMapModeClass();
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## Задача 2: «Добавить точку» скрывает sheet
|
||
|
||
### В `addWaypointMode()`:
|
||
|
||
```js
|
||
function addWaypointMode() {
|
||
if (routeWaypoints.length >= 10) return;
|
||
if (!routeMode) {
|
||
routeMode = true;
|
||
document.getElementById('tb-route').classList.add('active');
|
||
updateMapModeClass();
|
||
}
|
||
addingWaypoint = true;
|
||
window._map.getCanvas().style.cursor = 'crosshair';
|
||
// Скрыть основной sheet чтобы карта была видна
|
||
closeSheet('sheet-route');
|
||
// Показать подсказку в мини-баре
|
||
const statsEl = document.getElementById('mini-stats');
|
||
if (statsEl) statsEl.textContent = 'Тапни на карте для добавления точки';
|
||
document.getElementById('sheet-route-mini').classList.add('visible');
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## Задача 3: После построения маршрута — только мини-бар
|
||
|
||
### В `buildRoute()` — убрать автоматическое открытие sheet, показывать только мини-бар:
|
||
|
||
```js
|
||
async function buildRoute() {
|
||
if (routeWaypoints.length < 2) return;
|
||
|
||
// Показать мини-бар с индикатором загрузки
|
||
showMiniRouteLoading();
|
||
|
||
// Закрыть основной sheet если открыт
|
||
closeSheet('sheet-route');
|
||
|
||
document.getElementById('route-status').textContent = 'Строю маршрут...';
|
||
|
||
try {
|
||
const resp = await fetch(...);
|
||
// ... существующая логика ...
|
||
|
||
drawRouteResults(routeResults, 0);
|
||
|
||
// После успеха — показать мини-бар с результатом (НЕ открывать sheet)
|
||
showMiniRouteSheet();
|
||
hideMiniRouteLoading();
|
||
document.getElementById('route-status').textContent = `${routeResults.length} маршрут(ов)`;
|
||
} catch(e) {
|
||
hideMiniRouteLoading();
|
||
document.getElementById('route-status').textContent = '❌ ' + e.message;
|
||
// Показать ошибку в мини-баре
|
||
const statsEl = document.getElementById('mini-stats');
|
||
if (statsEl) statsEl.textContent = '❌ ' + e.message;
|
||
}
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## Задача 4: Индикатор загрузки — колесо мотоцикла
|
||
|
||
### Анимация
|
||
|
||
В мини-баре (`#sheet-route-mini`) показывать SVG колесо мотоцикла которое крутится пока строится маршрут.
|
||
|
||
**SVG колесо (кросс/эндуро стиль — спицы, грунтозацепы):**
|
||
|
||
```svg
|
||
<svg class="moto-wheel" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
|
||
<!-- Обод -->
|
||
<circle cx="20" cy="20" r="17" fill="none" stroke="var(--accent)" stroke-width="2.5"/>
|
||
<!-- Шина (внешний контур с грунтозацепами — неровный) -->
|
||
<circle cx="20" cy="20" r="19" fill="none" stroke="var(--text2)" stroke-width="1.5" stroke-dasharray="3 2"/>
|
||
<!-- Ступица -->
|
||
<circle cx="20" cy="20" r="3" fill="var(--accent)"/>
|
||
<!-- Спицы (8 штук) -->
|
||
<line x1="20" y1="3" x2="20" y2="17" stroke="var(--text2)" stroke-width="1.2" stroke-linecap="round"/>
|
||
<line x1="20" y1="23" x2="20" y2="37" stroke="var(--text2)" stroke-width="1.2" stroke-linecap="round"/>
|
||
<line x1="3" y1="20" x2="17" y2="20" stroke="var(--text2)" stroke-width="1.2" stroke-linecap="round"/>
|
||
<line x1="23" y1="20" x2="37" y2="20" stroke="var(--text2)" stroke-width="1.2" stroke-linecap="round"/>
|
||
<line x1="7.9" y1="7.9" x2="17.5" y2="17.5" stroke="var(--text2)" stroke-width="1.2" stroke-linecap="round"/>
|
||
<line x1="22.5" y1="22.5" x2="32.1" y2="32.1" stroke="var(--text2)" stroke-width="1.2" stroke-linecap="round"/>
|
||
<line x1="32.1" y1="7.9" x2="22.5" y2="17.5" stroke="var(--text2)" stroke-width="1.2" stroke-linecap="round"/>
|
||
<line x1="17.5" y1="22.5" x2="7.9" y2="32.1" stroke="var(--text2)" stroke-width="1.2" stroke-linecap="round"/>
|
||
</svg>
|
||
```
|
||
|
||
**CSS анимация:**
|
||
```css
|
||
.moto-wheel {
|
||
width: 32px; height: 32px;
|
||
animation: wheelSpin 0.8s linear infinite;
|
||
display: none;
|
||
flex-shrink: 0;
|
||
}
|
||
.moto-wheel.spinning {
|
||
display: block;
|
||
}
|
||
@keyframes wheelSpin {
|
||
from { transform: rotate(0deg); }
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
```
|
||
|
||
### Где показывать
|
||
|
||
В `#sheet-route-mini` добавить элемент колеса рядом с `#mini-stats`:
|
||
|
||
```html
|
||
<!-- В index.html, внутри #sheet-route-mini -->
|
||
<svg id="mini-wheel" class="moto-wheel" viewBox="0 0 40 40" ...>...</svg>
|
||
```
|
||
|
||
**Функции управления:**
|
||
```js
|
||
function showMiniRouteLoading() {
|
||
const wheel = document.getElementById('mini-wheel');
|
||
const statsEl = document.getElementById('mini-stats');
|
||
if (wheel) wheel.classList.add('spinning');
|
||
if (statsEl) statsEl.textContent = 'Строю маршрут...';
|
||
document.getElementById('sheet-route-mini').classList.add('visible');
|
||
}
|
||
|
||
function hideMiniRouteLoading() {
|
||
const wheel = document.getElementById('mini-wheel');
|
||
if (wheel) wheel.classList.remove('spinning');
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## Итоговый UX-флоу
|
||
|
||
```
|
||
Тап на 🗺 → routeMode=true, cursor=crosshair, sheet НЕ открывается
|
||
Тап на карте (точка A) → маркер A, cursor=crosshair
|
||
Тап на карте (точка B) → маркер B, мини-бар появляется с крутящимся колесом
|
||
Маршрут построен → колесо исчезает, мини-бар показывает "120 км · 87% грунт"
|
||
Тап на мини-бар → открывается основной sheet с деталями
|
||
Тап «Добавить точку» в sheet → sheet скрывается, карта видна, cursor=crosshair
|
||
Тап на карте → точка добавлена, маршрут перестраивается (колесо в мини-баре)
|
||
```
|
||
|
||
---
|
||
|
||
## Деплой
|
||
```
|
||
/tmp/deploy_static.js
|
||
SSH: host=82.22.50.71, port=22, user=slin, pass=motoZ@yaz2010
|
||
Health: curl -s http://mva154:5558/api/health
|
||
```
|
||
|
||
## Ограничения
|
||
- НЕ трогать `app.py`
|
||
- Без npm-зависимостей
|
||
- Сохранить всю существующую логику (drag-and-drop, geocoding, GPX, etc.)
|