134 lines
4.9 KiB
Markdown
134 lines
4.9 KiB
Markdown
# Dev Task: Enduro Trails — UX маршрута дополнение (drag + дистанции)
|
||
|
||
**Приоритет:** HIGH
|
||
**Проект:** enduro-trails
|
||
**Дата:** 2026-05-05
|
||
**Дополнение к:** DEV_TASK_PHASE5_UX2.md
|
||
|
||
---
|
||
|
||
## Задача 5: Drag точек в основном sheet — не закрывать sheet
|
||
|
||
### Проблема
|
||
Сейчас в `_initWaypointDragHandles` после drop вызывается `debounceBuildRoute()` — это нормально. Но где-то в цепочке sheet закрывается.
|
||
|
||
### Нужное поведение
|
||
При перетаскивании точек в `#waypoints-list` (основной sheet открыт):
|
||
- Sheet остаётся открытым
|
||
- Маршрут пересчитывается в фоне (колесо в мини-баре)
|
||
- После пересчёта — обновить карточки маршрута прямо в открытом sheet
|
||
|
||
### Изменения
|
||
|
||
В `endDrag()` внутри `_initWaypointDragHandles`:
|
||
```js
|
||
function endDrag(finalClientY) {
|
||
if (dragIdx < 0) return;
|
||
clearHighlights();
|
||
const dy = Math.abs(finalClientY - startY);
|
||
|
||
if (dragging && dy > 30 && lastOverEl !== null) {
|
||
const dropIdx = parseInt(lastOverEl.dataset.idx, 10);
|
||
let insertAt = lastOverPos === 'top' ? dropIdx : dropIdx + 1;
|
||
const moved = routeWaypoints.splice(dragIdx, 1)[0];
|
||
if (insertAt > dragIdx) insertAt--;
|
||
routeWaypoints.splice(insertAt, 0, moved);
|
||
rebuildWaypointMarkers();
|
||
renderWaypointsList();
|
||
// НЕ закрывать sheet — просто пересчитать маршрут
|
||
if (routeWaypoints.length >= 2) {
|
||
showMiniRouteLoading(); // колесо в мини-баре
|
||
debounceBuildRoute();
|
||
}
|
||
updateMiniRouteCard();
|
||
}
|
||
|
||
dragIdx = -1;
|
||
dragging = false;
|
||
lastOverEl = null;
|
||
lastOverPos = null;
|
||
}
|
||
```
|
||
|
||
В `buildRoute()` — после успешного построения, если основной sheet открыт, обновить карточки без закрытия:
|
||
```js
|
||
// После drawRouteResults(routeResults, 0):
|
||
const sheetOpen = document.getElementById('sheet-route')?.classList.contains('open');
|
||
if (sheetOpen) {
|
||
renderRouteCards(routeResults); // обновить карточки в открытом sheet
|
||
} else {
|
||
showMiniRouteSheet(); // показать мини-бар
|
||
}
|
||
hideMiniRouteLoading();
|
||
```
|
||
|
||
---
|
||
|
||
## Задача 6: Расстояние между точками в wl-item
|
||
|
||
### Нужное поведение
|
||
В каждом `wl-item` (кроме первой точки) показывать расстояние от предыдущей точки.
|
||
|
||
Формат:
|
||
- < 1 км → "130 м"
|
||
- ≥ 1 км → "2,3 км" (запятая как разделитель)
|
||
|
||
### Реализация
|
||
|
||
Добавить функцию форматирования дистанции между точками:
|
||
```js
|
||
function formatSegmentDist(m) {
|
||
if (m < 1000) return Math.round(m) + ' м';
|
||
return (m / 1000).toFixed(1).replace('.', ',') + ' км';
|
||
}
|
||
```
|
||
|
||
Использовать haversine для расчёта расстояния между соседними точками:
|
||
```js
|
||
function haversineM(a, b) {
|
||
const R = 6371000;
|
||
const dLat = (b.lat - a.lat) * Math.PI / 180;
|
||
const dLon = (b.lon - a.lon) * Math.PI / 180;
|
||
const s = Math.sin(dLat/2)**2 + Math.cos(a.lat*Math.PI/180) * Math.cos(b.lat*Math.PI/180) * Math.sin(dLon/2)**2;
|
||
return R * 2 * Math.atan2(Math.sqrt(s), Math.sqrt(1-s));
|
||
}
|
||
```
|
||
|
||
В `renderWaypointsList()` добавить дистанцию в каждый wl-item (кроме первого):
|
||
```js
|
||
routeWaypoints.map((wp, i) => {
|
||
// ...
|
||
const distStr = i > 0 ? formatSegmentDist(haversineM(routeWaypoints[i-1], wp)) : '';
|
||
return `<div class="wl-item" id="wl-item-${i}" data-idx="${i}">
|
||
<div class="wl-pin">${waypointPinSvg(label, color)}</div>
|
||
<div class="wl-info">
|
||
<span class="wl-label" id="wl-label-${i}">${coordText}</span>
|
||
${distStr ? `<span class="wl-dist">${distStr}</span>` : ''}
|
||
</div>
|
||
<div class="wl-drag-handle" data-idx="${i}">${gripSvg}</div>
|
||
<button class="wl-remove" onclick="removeWaypoint(${i})" ...>...</button>
|
||
</div>`;
|
||
})
|
||
```
|
||
|
||
CSS для `.wl-dist`:
|
||
```css
|
||
.wl-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
|
||
.wl-label { font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||
.wl-dist { font-size: 11px; color: var(--text3); margin-top: 1px; }
|
||
```
|
||
|
||
---
|
||
|
||
## Деплой
|
||
```
|
||
/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-зависимостей
|
||
- Реализовать поверх изменений из DEV_TASK_PHASE5_UX2.md (они уже в коде или деплоятся параллельно)
|