gendesign/frontend/src/components/site-finder/CpLayerControlPanel.tsx
Light1YT 86e9ea2937 fix(week-review): автофиксы код-ревью — 169 issue (label «week ревью 1»)
Многоагентный аудит + имплементация: один воркер на файл, точечные правки.
Верификация: py_compile (47/47 .py) + tsc --noEmit (0 ошибок). Unit-тесты
не прогонялись (окружение не поднято: rollup native dep / нет pytest-venv).

Полностью исправлено (169): #1336, #1337, #1339, #1340, #1341, #1342, #1343, #1345, #1346, #1348, #1349, #1350, #1351, #1354, #1356, #1358, #1359, #1360, #1362, #1364, #1365, #1366, #1367, #1368, #1369, #1370, #1371, #1372, #1373, #1374, #1375, #1376, #1377, #1378, #1379, #1380, #1381, #1382, #1384, #1385, #1386, #1387, #1388, #1389, #1390, #1391, #1392, #1394, #1395, #1396, #1397, #1399, #1400, #1401, #1402, #1403, #1404, #1408, #1409, #1410, #1411, #1412, #1413, #1414, #1415, #1416, #1417, #1418, #1420, #1423, #1425, #1426, #1427, #1428, #1429, #1430, #1431, #1432, #1433, #1434, #1435, #1437, #1438, #1439, #1440, #1441, #1442, #1443, #1444, #1445, #1446, #1447, #1448, #1449, #1450, #1451, #1452, #1453, #1454, #1455, #1456, #1457, #1458, #1459, #1460, #1461, #1462, #1463, #1464, #1465, #1466, #1467, #1468, #1469, #1471, #1472, #1473, #1474, #1476, #1478, #1479, #1481, #1482, #1483, #1484, #1485, #1487, #1488, #1489, #1490, #1491, #1492, #1493, #1494, #1495, #1496, #1497, #1499, #1500, #1501, #1502, #1504, #1505, #1506, #1507, #1510, #1514, #1515, #1516, #1517, #1518, #1519, #1521, #1522, #1523, #1524, #1525, #1526, #1527, #1528, #1529, #1531, #1532, #1533, #1534, #1535, #1536, #1537, #1538

Частично (9, in-file часть, остаток cross-file): #1361, #1419, #1422, #1424, #1470, #1475, #1477, #1480, #1498
Требуют cross-file (3, не тронуты): #1338, #1363, #1421
Пропущено (1): #1539

Не входило в партию: 22 needs-Leha issue (нужны решения владельца).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-15 20:21:11 +05:00

322 lines
10 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

"use client";
import { useState } from "react";
import type {
ConnectionPointsResponse,
EngineeringStructure,
} from "@/types/nspd";
import {
CP_ALL_CATEGORIES,
CP_CATEGORY_STYLES,
type CpCategory,
} from "@/components/site-finder/ConnectionPointsLayer";
import { MARKET_COLORS } from "@/components/site-finder/MarketLayers";
import type { MarketLayerKey } from "@/components/site-finder/SiteMap";
// #999 (958-B4) — конфиг рыночных слоёв для тумблеров. count = число объектов
// с координатами (без них точка не рисуется), поэтому показываем именно его.
export interface MarketLayerToggle {
key: MarketLayerKey;
label: string;
color: string;
count: number;
}
interface Props {
data: ConnectionPointsResponse | null;
grouped: Map<CpCategory, EngineeringStructure[]>;
visibleCategories: Set<CpCategory>;
onToggleCategory: (cat: CpCategory) => void;
onToggleAll: () => void;
// #999 — рыночные слои (опциональны: панель работает и без них).
marketLayers?: MarketLayerToggle[];
visibleMarketLayers?: Set<MarketLayerKey>;
onToggleMarketLayer?: (key: MarketLayerKey) => void;
}
export function CpLayerControlPanel({
data,
grouped,
visibleCategories,
onToggleCategory,
onToggleAll,
marketLayers,
visibleMarketLayers,
onToggleMarketLayer,
}: Props) {
const [collapsed, setCollapsed] = useState(false);
const totalCount = data?.engineering_structures.length ?? 0;
// #1459 — чекбоксы рендерятся только для непустых категорий, поэтому
// «Показать все» должен отражать состояние именно доступных пользователю
// (непустых) категорий, а не всех CP_ALL_CATEGORIES (включая пустые).
const togglableCategories = CP_ALL_CATEGORIES.filter(
(cat) => (grouped.get(cat)?.length ?? 0) > 0,
);
const allVisible =
togglableCategories.length > 0 &&
togglableCategories.every((cat) => visibleCategories.has(cat));
const hasMarketLayers = (marketLayers?.length ?? 0) > 0;
return (
<div
style={{
background: "#fff",
border: "1px solid #e5e7eb",
borderRadius: 10,
marginTop: 10,
fontSize: 12,
}}
>
{/* Header */}
<div
style={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
padding: "8px 12px",
cursor: "pointer",
userSelect: "none",
borderBottom: collapsed ? "none" : "1px solid #f3f4f6",
}}
onClick={() => setCollapsed((v) => !v)}
>
<span style={{ fontWeight: 700, color: "#1f2937" }}>
{data ? "Слои карты" : "Слои рынка"}
</span>
<span style={{ color: "#6b7280", fontSize: 11 }}>
{data ? `${totalCount} тчк ` : ""}
{collapsed ? "▲" : "▼"}
</span>
</div>
{!collapsed && (
<div style={{ padding: "8px 12px 10px" }}>
{/* ── Точки подключения (CP) ─────────────────────────────── */}
{data && (
<>
{/* No dump */}
{!data.dump_available && (
<div
style={{
background: "#fef3c7",
color: "#92400e",
borderRadius: 6,
padding: "4px 8px",
fontSize: 11,
marginBottom: 8,
}}
>
Дамп квартала не загружен 0 точек подключения
</div>
)}
{/* Empty state */}
{data.dump_available && totalCount === 0 && (
<div style={{ color: "#6b7280", fontSize: 11, marginBottom: 6 }}>
0 точек подключения в этом квартале
</div>
)}
{/* Toggle-all */}
{totalCount > 0 && (
<label
style={{
display: "flex",
alignItems: "center",
gap: 6,
marginBottom: 6,
cursor: "pointer",
fontWeight: 600,
color: "#374151",
}}
>
<input
type="checkbox"
checked={allVisible}
onChange={onToggleAll}
style={{ cursor: "pointer" }}
/>
Показать все ({totalCount})
</label>
)}
{/* Per-category */}
<div
style={{
display: "flex",
flexWrap: "wrap",
gap: "4px 14px",
}}
>
{CP_ALL_CATEGORIES.map((cat) => {
const structs = grouped.get(cat) ?? [];
const style = CP_CATEGORY_STYLES[cat];
if (structs.length === 0) return null;
const active = visibleCategories.has(cat);
return (
<label
key={cat}
style={{
display: "flex",
alignItems: "center",
gap: 5,
cursor: "pointer",
color: "#374151",
opacity: active ? 1 : 0.45,
transition: "opacity 0.15s",
}}
>
<input
type="checkbox"
checked={active}
onChange={() => onToggleCategory(cat)}
style={{ cursor: "pointer" }}
/>
<span
style={{
display: "inline-block",
width: 10,
height: 10,
borderRadius: "50%",
background: style.color,
flexShrink: 0,
}}
/>
{style.label}
<span style={{ color: "#9ca3af" }}>{structs.length}</span>
</label>
);
})}
</div>
{/* Summary */}
{data.dump_available && totalCount > 0 && (
<div
style={{
marginTop: 8,
paddingTop: 8,
borderTop: "1px solid #f3f4f6",
display: "flex",
flexWrap: "wrap",
gap: 6,
alignItems: "center",
}}
>
{data.summary.nearest_structure_distance_m !== null && (
<span
style={{
background: "#f3f4f6",
color: "#374151",
borderRadius: 6,
padding: "2px 8px",
fontSize: 11,
}}
>
Ближайший:{" "}
{Math.round(data.summary.nearest_structure_distance_m)} м
</span>
)}
{data.summary.in_protection_zone && (
<span
style={{
background: "#fee2e2",
color: "#991b1b",
borderRadius: 6,
padding: "2px 8px",
fontSize: 11,
fontWeight: 600,
}}
>
В охранной зоне
</span>
)}
{data.summary.protection_zones_intersecting > 0 &&
!data.summary.in_protection_zone && (
<span
style={{
background: "#fef3c7",
color: "#92400e",
borderRadius: 6,
padding: "2px 8px",
fontSize: 11,
}}
>
Охранных зон: {data.summary.protection_zones_intersecting}
</span>
)}
</div>
)}
</>
)}
{/* ── Рыночные слои (#999, 958-B4) ───────────────────────── */}
{hasMarketLayers && visibleMarketLayers && onToggleMarketLayer && (
<div
style={{
marginTop: data ? 8 : 0,
paddingTop: data ? 8 : 0,
borderTop: data ? "1px solid #f3f4f6" : "none",
}}
>
<div
style={{
fontWeight: 600,
color: "#374151",
marginBottom: 6,
}}
>
Рынок
</div>
<div
style={{
display: "flex",
flexWrap: "wrap",
gap: "4px 14px",
}}
>
{marketLayers!.map((ml) => {
const active = visibleMarketLayers.has(ml.key);
return (
<label
key={ml.key}
style={{
display: "flex",
alignItems: "center",
gap: 5,
cursor: "pointer",
color: "#374151",
opacity: active ? 1 : 0.45,
transition: "opacity 0.15s",
}}
>
<input
type="checkbox"
checked={active}
onChange={() => onToggleMarketLayer(ml.key)}
style={{ cursor: "pointer" }}
/>
<span
style={{
display: "inline-block",
width: 10,
height: 10,
borderRadius: "50%",
background: ml.color,
flexShrink: 0,
}}
/>
{ml.label}
<span style={{ color: "#9ca3af" }}>{ml.count}</span>
</label>
);
})}
</div>
</div>
)}
</div>
)}
</div>
);
}