286 lines
12 KiB
Markdown
286 lines
12 KiB
Markdown
# DEV TASK: Восстановление UI Enduro Trails до состояния фазы 5.4
|
||
|
||
**Статус:** Ready for dev
|
||
**Проект:** enduro-trails
|
||
**Фаза:** 5.4 (восстановление)
|
||
**Приоритет:** 🔴 Критический
|
||
|
||
---
|
||
|
||
## Цель
|
||
|
||
Восстановить `index.html` и `app.js` до состояния фазы 5.4 — с тёмной темой, правильным toolbar, кнопкой рельефа, линейкой масштаба, зумом и всеми фичами фаз 5.0–5.4.
|
||
|
||
## Контекст
|
||
|
||
Актуальная версия UI была только в Docker-контейнере (через `docker cp`) и не была закоммичена в git. Контейнер удалён. Текущий `index.html` на сервере — версия до фазы 5 (28160 байт, без terrain, без правильного toolbar).
|
||
|
||
Нужно восстановить UI по документации.
|
||
|
||
---
|
||
|
||
## Инфраструктура
|
||
|
||
| Параметр | Значение |
|
||
|----------|----------|
|
||
| Сервер | `slin@82.22.50.71`, sudo: `motoZ@yaz2010` |
|
||
| SSH | через node ssh2 из `/home/node/.openclaw/workspace/tasks/enduro-trails/prototype/` |
|
||
| Целевые файлы | `/home/slin/repos/enduro-trails/src/web/index.html` |
|
||
| | `/home/slin/repos/enduro-trails/src/web/app.js` |
|
||
| | `/home/slin/repos/enduro-trails/src/web/app.css` |
|
||
| Контейнер | `enduro-trails-app-1` (volume mount — файлы сразу видны без рестарта) |
|
||
| URL | `https://openclaw.mva154.duckdns.org/enduro/` |
|
||
| Деплой | Файлы монтированы через volume `./src/web:/app/src/web` — просто записать файлы на сервер |
|
||
|
||
---
|
||
|
||
## Текущее состояние файлов
|
||
|
||
- `index.html` на сервере: 30386 байт — **старая версия** (toolbar без terrain, нет линейки масштаба)
|
||
- `app.js` на сервере: 113632 байт — **есть terrain код** (toggleTerrain, applyTerrainLayer)
|
||
- `app.css` на сервере: 38764 байт
|
||
|
||
---
|
||
|
||
## Что должно быть в финальном UI
|
||
|
||
### index.html — обязательные элементы:
|
||
|
||
**1. Map controls (правый верхний угол):**
|
||
```html
|
||
<div id="map-controls">
|
||
<button class="map-btn" id="btn-compass" onclick="toggleCompass()"><!-- compass SVG --></button>
|
||
<button class="map-btn" onclick="locateMe()"><!-- locate SVG --></button>
|
||
<button class="map-btn" id="btn-theme" onclick="toggleTheme()"><!-- theme SVG --></button>
|
||
</div>
|
||
```
|
||
|
||
**2. Zoom controls (правый верхний угол, под map-controls):**
|
||
```html
|
||
<div id="zoom-controls">
|
||
<button class="map-btn" onclick="map.zoomIn()">+</button>
|
||
<div id="zoom-level">12</div>
|
||
<button class="map-btn" onclick="map.zoomOut()">−</button>
|
||
</div>
|
||
```
|
||
|
||
**3. Scale bar (левый нижний угол):**
|
||
```html
|
||
<div id="scale-bar">
|
||
<div id="scale-line"></div>
|
||
<span id="scale-label">1 км</span>
|
||
</div>
|
||
```
|
||
|
||
**4. Toolbar (bottom nav, 7 кнопок):**
|
||
```html
|
||
<nav id="toolbar">
|
||
<button class="tb-btn" id="tb-route" onclick="toggleRouteMode()"><!-- route SVG --><span>Маршрут</span></button>
|
||
<button class="tb-btn" id="tb-link" onclick="toggleLinkMode()"><!-- link SVG --><span>Связка</span></button>
|
||
<button class="tb-btn" id="tb-scenic" onclick="toggleScenicMode()"><!-- scenic SVG --><span>Красивый</span></button>
|
||
<button class="tb-btn" id="tb-recon" onclick="toggleReconMode()"><!-- recon SVG --><span>Разведка</span></button>
|
||
<button class="tb-btn" id="tb-ruler" onclick="toggleRuler()"><!-- ruler SVG --><span>Линейка</span></button>
|
||
<button class="tb-btn" id="tb-marker" onclick="toggleMarkerMode()"><!-- marker SVG --><span>Метка</span></button>
|
||
<button class="tb-btn" id="terrain-toggle" onclick="toggleTerrainPopup()"><!-- mountain SVG --><span>Рельеф</span></button>
|
||
</nav>
|
||
```
|
||
|
||
**5. Terrain popup:**
|
||
```html
|
||
<div id="terrain-popup" style="display:none; position:fixed; bottom:80px; right:12px; ...">
|
||
<div>🏔️ Рельеф</div>
|
||
<label><input type="checkbox" id="terrain-hypso-cb" onchange="onTerrainCheckbox()"> Гипсометрия</label>
|
||
<label><input type="checkbox" id="terrain-hillshade-cb" onchange="onTerrainCheckbox()"> <span id="terrain-hillshade-label">Отмывка</span></label>
|
||
</div>
|
||
```
|
||
|
||
**6. Bottom sheets** (route, recon, scenic, link) — с drag handle, close button, content
|
||
|
||
**7. Mini route bar** (`#sheet-route-mini`) — onboarding panel с поиском Nominatim
|
||
|
||
**8. Ruler info bar** (`#ruler-info`) — с кнопками завершить/удалить
|
||
|
||
**9. Search bar** (`#search-bar`) — Nominatim поиск
|
||
|
||
### app.js — обязательные функции:
|
||
|
||
- `toggleTerrainPopup()` — открыть/закрыть terrain popup
|
||
- `onTerrainCheckbox()` — обработка чекбоксов
|
||
- `applyTerrainLayer(id, url, enabled, opacity, minzoom, maxzoom)` — добавить/убрать слой
|
||
- `updateHillshadeAvailability()` — disable чекбокс на зуме < 10
|
||
- `restoreTerrainState()` — восстановить из localStorage
|
||
- `updateScaleBar()` — обновить линейку масштаба
|
||
- `updateZoomLevel()` — обновить отображение зума
|
||
- Все функции роутинга, линейки, меток, разведки, связки, красивого маршрута
|
||
|
||
### app.css — обязательные стили:
|
||
|
||
- CSS vars для тёмной/светлой темы
|
||
- `.tb-btn` — стили toolbar кнопок
|
||
- `.map-btn` — стили map controls
|
||
- `#scale-bar` — линейка масштаба
|
||
- `#zoom-controls` — зум контролы
|
||
- `#terrain-popup` — попап рельефа
|
||
- `.bottom-sheet` — bottom sheets
|
||
- Анимации (slide-up, cardFadeIn, markerPopIn)
|
||
|
||
---
|
||
|
||
## Задачи
|
||
|
||
### Task 1: Анализ текущего состояния
|
||
|
||
**Шаги:**
|
||
|
||
- [ ] **1.1** Прочитать текущий `index.html` на сервере:
|
||
```bash
|
||
cat /home/slin/repos/enduro-trails/src/web/index.html
|
||
```
|
||
|
||
- [ ] **1.2** Прочитать текущий `app.js` (первые 200 строк):
|
||
```bash
|
||
head -200 /home/slin/repos/enduro-trails/src/web/app.js
|
||
```
|
||
|
||
- [ ] **1.3** Прочитать документацию:
|
||
- `/home/node/.openclaw/workspace/tasks/enduro-trails/BRD_PHASE5.md`
|
||
- `/home/node/.openclaw/workspace/tasks/enduro-trails/BRD_TERRAIN.md`
|
||
- `/home/node/.openclaw/workspace/tasks/enduro-trails/PROJECT.md` (секция фаз 5.x)
|
||
|
||
**Критерий готовности:** Понимание что есть и чего не хватает.
|
||
|
||
---
|
||
|
||
### Task 2: Восстановление index.html
|
||
|
||
**Файлы:**
|
||
- Изменить: `/home/slin/repos/enduro-trails/src/web/index.html`
|
||
|
||
**Шаги:**
|
||
|
||
- [ ] **2.1** Написать полный `index.html` с ВСЕМИ элементами из списка выше
|
||
- Использовать SVG Lucide-иконки (те же что в текущем файле)
|
||
- Сохранить все существующие bottom sheets (route, recon, scenic, link)
|
||
- Добавить zoom-controls, scale-bar, terrain-popup
|
||
- Toolbar: 7 кнопок включая terrain-toggle
|
||
|
||
- [ ] **2.2** Загрузить на сервер через SSH/SFTP
|
||
|
||
- [ ] **2.3** Проверить:
|
||
```bash
|
||
curl -s https://openclaw.mva154.duckdns.org/enduro/ | grep -c "terrain-toggle\|scale-bar\|zoom-controls"
|
||
# Ожидаемый результат: 3
|
||
```
|
||
|
||
**Критерий готовности:** В HTTP-ответе есть `terrain-toggle`, `scale-bar`, `zoom-controls`.
|
||
|
||
---
|
||
|
||
### Task 3: Восстановление app.js
|
||
|
||
**Файлы:**
|
||
- Изменить: `/home/slin/repos/enduro-trails/src/web/app.js`
|
||
|
||
**Шаги:**
|
||
|
||
- [ ] **3.1** Проверить что в текущем `app.js` уже есть:
|
||
```bash
|
||
grep -c "toggleTerrain\|updateScaleBar\|updateZoomLevel" /home/slin/repos/enduro-trails/src/web/app.js
|
||
```
|
||
|
||
- [ ] **3.2** Добавить недостающие функции:
|
||
- `updateScaleBar()` — вычисляет масштаб по текущему зуму и широте, обновляет `#scale-line` width и `#scale-label` текст
|
||
- `updateZoomLevel()` — обновляет `#zoom-level` текстом текущего зума
|
||
- Вызовы в `map.on('zoom', ...)` и `map.on('move', ...)`
|
||
|
||
- [ ] **3.3** Загрузить на сервер
|
||
|
||
- [ ] **3.4** Проверить:
|
||
```bash
|
||
curl -s https://openclaw.mva154.duckdns.org/enduro/app.js | grep -c "updateScaleBar\|updateZoomLevel"
|
||
# Ожидаемый результат: 2+
|
||
```
|
||
|
||
**Критерий готовности:** Функции `updateScaleBar` и `updateZoomLevel` присутствуют в файле.
|
||
|
||
---
|
||
|
||
### Task 4: Восстановление app.css
|
||
|
||
**Файлы:**
|
||
- Изменить: `/home/slin/repos/enduro-trails/src/web/app.css`
|
||
|
||
**Шаги:**
|
||
|
||
- [ ] **4.1** Проверить что есть в текущем `app.css`:
|
||
```bash
|
||
grep -c "scale-bar\|zoom-controls\|terrain-popup" /home/slin/repos/enduro-trails/src/web/app.css
|
||
```
|
||
|
||
- [ ] **4.2** Добавить недостающие стили для:
|
||
- `#scale-bar` — позиция левый нижний угол, белая линия + текст
|
||
- `#zoom-controls` — вертикальный блок с +/число/−
|
||
- `#zoom-level` — отображение текущего зума
|
||
- `#terrain-popup` — если нет в CSS (уже есть inline в HTML — ок)
|
||
|
||
- [ ] **4.3** Загрузить на сервер
|
||
|
||
**Критерий готовности:** Стили для scale-bar и zoom-controls присутствуют.
|
||
|
||
---
|
||
|
||
## Проверка (Acceptance)
|
||
|
||
| # | Проверка | Команда | Ожидаемый результат |
|
||
|---|----------|---------|---------------------|
|
||
| 1 | terrain-toggle в HTML | `curl -s https://openclaw.mva154.duckdns.org/enduro/ \| grep terrain-toggle` | Есть кнопка |
|
||
| 2 | scale-bar в HTML | `curl -s https://openclaw.mva154.duckdns.org/enduro/ \| grep scale-bar` | Есть элемент |
|
||
| 3 | zoom-controls в HTML | `curl -s https://openclaw.mva154.duckdns.org/enduro/ \| grep zoom-controls` | Есть элемент |
|
||
| 4 | updateScaleBar в JS | `curl -s https://openclaw.mva154.duckdns.org/enduro/app.js \| grep updateScaleBar` | Есть функция |
|
||
| 5 | HTTP 200 | `curl -s -o /dev/null -w "%{http_code}" https://openclaw.mva154.duckdns.org/enduro/` | 200 |
|
||
|
||
---
|
||
|
||
## Ограничения и контекст
|
||
|
||
- ⚠️ Файлы монтированы через Docker volume — рестарт контейнера НЕ нужен, файлы сразу видны
|
||
- ⚠️ SSH через node ssh2 (бинарник SSH не работает в контейнере — glibc несовместимость)
|
||
- ⚠️ OSRM на порту 5559 — НЕ ТРОГАТЬ
|
||
- ⚠️ nginx конфиг — НЕ ТРОГАТЬ
|
||
- 🚫 Не менять `docker-compose.yml` и `Dockerfile`
|
||
- 🚫 Не трогать `src/api/main.py` — бэкенд работает
|
||
- ✅ Terrain тайлы отдаются через nginx alias `/enduro/terrain/` → `/home/slin/repos/enduro-trails/data/terrain/`
|
||
- ✅ TERRAIN_BASE_URL в app.js: `window.location.pathname.replace(/\/[^\/]*$/, '') + '/terrain'`
|
||
- ✅ `scheme: 'tms'` для terrain sources (тайлы в TMS формате)
|
||
- ✅ `bounds: [35, 45, 55, 62]` для terrain sources
|
||
|
||
## SSH подключение (пример)
|
||
|
||
```javascript
|
||
const { Client } = require('ssh2');
|
||
const conn = new Client();
|
||
function exec(conn, cmd, timeout) {
|
||
return new Promise((resolve) => {
|
||
const t = setTimeout(() => resolve({ out: 'TIMEOUT', err: '' }), timeout || 20000);
|
||
conn.exec(cmd, (err, stream) => {
|
||
if (err) { clearTimeout(t); return resolve({ out: '', err: err.message }); }
|
||
let out = '', e = '';
|
||
stream.on('data', d => out += d);
|
||
stream.stderr.on('data', d => e += d);
|
||
stream.on('close', () => { clearTimeout(t); resolve({ out: out.trim(), err: e.trim() }); });
|
||
});
|
||
});
|
||
}
|
||
conn.on('ready', async () => {
|
||
// команды здесь
|
||
conn.end();
|
||
});
|
||
conn.connect({ host: '82.22.50.71', username: 'slin', password: 'motoZ@yaz2010', readyTimeout: 15000 });
|
||
```
|
||
|
||
Рабочая директория: `/home/node/.openclaw/workspace/tasks/enduro-trails/prototype`
|
||
|
||
---
|
||
|
||
*Создано: 2026-05-16 | Автор ТЗ: Стрим | Исполнитель: Dev-агент*
|