99 lines
4.5 KiB
Markdown
99 lines
4.5 KiB
Markdown
---
|
||
type: trz
|
||
work_item_id: ET-002
|
||
title: "ТЗ: Чекбокс показа/скрытия POI в попапе рельефа"
|
||
version: 1
|
||
status: approved
|
||
created_at: 2026-05-20
|
||
authors:
|
||
- "agent:analyst"
|
||
---
|
||
|
||
# ТЗ — ET-002: Чекбокс показа/скрытия POI в попапе рельефа
|
||
|
||
## 1. Функциональные требования
|
||
|
||
### REQ-F-01: Чекбокс POI в попапе рельефа
|
||
|
||
Система должна отображать чекбокс «POI» в попапе кнопки «Рельеф» (`terrain-popup`), расположенный после чекбокса «Тропы» (`trails-path-cb`), отделённый горизонтальной линией (`<hr>`).
|
||
|
||
### REQ-F-02: Состояние по умолчанию
|
||
|
||
При первом посещении (отсутствие ключа в localStorage) чекбокс POI должен быть включён (checked), маркеры POI видимы.
|
||
|
||
### REQ-F-03: Скрытие POI
|
||
|
||
При снятии чекбокса система должна установить `visibility: 'none'` для слоёв `poi-circles` и `poi-labels` через `map.setLayoutProperty()`.
|
||
|
||
### REQ-F-04: Показ POI
|
||
|
||
При установке чекбокса система должна установить `visibility: 'visible'` для слоёв `poi-circles` и `poi-labels`.
|
||
|
||
### REQ-F-05: Сохранение состояния
|
||
|
||
Система должна сохранять состояние чекбокса в `localStorage` под ключом `poi-visible` (значения: `'1'` — показывать, `'0'` — скрывать).
|
||
|
||
### REQ-F-06: Восстановление состояния при загрузке
|
||
|
||
При загрузке страницы система должна:
|
||
1. Прочитать значение `localStorage.getItem('poi-visible')`
|
||
2. Если значение `'0'` — снять чекбокс и скрыть слои POI
|
||
3. Если значение `'1'` или отсутствует (null) — установить чекбокс и показать слои POI
|
||
|
||
### REQ-F-07: Синхронизация с layerState
|
||
|
||
Изменение чекбокса должно обновлять `layerState.poi` (true/false), чтобы состояние было консистентно с внутренней моделью приложения.
|
||
|
||
## 2. Нефункциональные требования
|
||
|
||
### REQ-NF-01: Производительность
|
||
|
||
Переключение видимости POI должно происходить мгновенно (< 50 мс), без перезагрузки тайлов.
|
||
|
||
### REQ-NF-02: Совместимость
|
||
|
||
Решение должно работать во всех браузерах, поддерживающих MapLibre GL JS (Chrome 80+, Firefox 78+, Safari 14+, Edge 80+).
|
||
|
||
### REQ-NF-03: Мобильная адаптация
|
||
|
||
Чекбокс должен быть доступен и нажимаем на мобильных устройствах (touch target ≥ 44px).
|
||
|
||
### REQ-NF-04: Отсутствие регрессий
|
||
|
||
Существующие чекбоксы (Тени рельефа, Перепады, Грунтовки, Тропы) должны продолжать работать без изменений.
|
||
|
||
## 3. UI-спецификация
|
||
|
||
### Расположение в HTML
|
||
|
||
```html
|
||
<!-- Внутри #terrain-popup, после trails-path-cb -->
|
||
<hr style="margin:6px 0;border-color:rgba(128,128,128,0.3)">
|
||
<label class="terrain-checkbox">
|
||
<input type="checkbox" id="poi-visible-cb" onchange="onPoiCheckbox()" checked>
|
||
<span>POI</span>
|
||
</label>
|
||
```
|
||
|
||
### Стилизация
|
||
|
||
Использовать существующий класс `terrain-checkbox` — единообразие с остальными чекбоксами в попапе.
|
||
|
||
## 4. Данные
|
||
|
||
- localStorage ключ: `poi-visible`
|
||
- Значения: `'1'` (показывать) | `'0'` (скрывать)
|
||
- MapLibre слои: `poi-circles`, `poi-labels`
|
||
- Состояние в JS: `layerState.poi`
|
||
|
||
## 5. API
|
||
|
||
Нет изменений в backend API. Вся логика — клиентская.
|
||
|
||
## 6. Затрагиваемые файлы
|
||
|
||
| Файл | Изменение |
|
||
|------|-----------|
|
||
| `src/web/index.html` | Добавить чекбокс в `terrain-popup` |
|
||
| `src/web/app.js` | Добавить функцию `onPoiCheckbox()`, логику восстановления состояния при загрузке |
|