-
${labelText}
-
${wp.lat.toFixed(4)}, ${wp.lon.toFixed(4)}
-
+ return `
+
+
${wp.lat.toFixed(4)}, ${wp.lon.toFixed(4)}
+
`;
}).join('');
-
- // Показываем/скрываем кнопку добавления
- document.getElementById('btn-add-waypoint').style.display =
- routeWaypoints.length >= 10 ? 'none' : '';
-}
-
-// ─── Drag-and-drop порядка точек ──────────────────────────────────────────────
-let dragWpIdx = null;
-
-function onWpDragStart(e, idx) {
- dragWpIdx = idx;
- e.dataTransfer.effectAllowed = 'move';
-}
-
-function onWpDragOver(e, idx) {
- e.preventDefault();
- e.dataTransfer.dropEffect = 'move';
- document.querySelectorAll('.waypoint-row').forEach((r, i) => {
- r.classList.toggle('drag-over', i === idx);
- });
-}
-
-function onWpDragLeave(e) {
- e.currentTarget.classList.remove('drag-over');
-}
-
-function onWpDrop(e, idx) {
- e.preventDefault();
- document.querySelectorAll('.waypoint-row').forEach(r => r.classList.remove('drag-over'));
- if (dragWpIdx === null || dragWpIdx === idx) return;
- const moved = routeWaypoints.splice(dragWpIdx, 1)[0];
- routeWaypoints.splice(idx, 0, moved);
- dragWpIdx = null;
- rebuildWaypointMarkers();
- renderWaypointsList();
- if (routeWaypoints.length >= 2) debounceBuildRoute();
}
function removeWaypoint(idx) {
@@ -302,7 +489,6 @@ function removeWaypoint(idx) {
if (routeWaypoints.length >= 2) {
debounceBuildRoute();
} else {
- // Убираем маршруты с карты
const map = window._map;
for (let i = 0; i < 5; i++) {
if (map.getLayer('route-line-' + i)) map.removeLayer('route-line-' + i);
@@ -314,13 +500,12 @@ function removeWaypoint(idx) {
document.getElementById('route-actions').style.display =
routeWaypoints.length >= 2 ? 'block' : 'none';
document.getElementById('route-status').textContent =
- routeWaypoints.length === 0 ? 'Кликни точку старта' :
- routeWaypoints.length === 1 ? 'Кликни точку финиша' : '';
+ routeWaypoints.length === 0 ? 'Тапни точку старта на карте' :
+ routeWaypoints.length === 1 ? 'Тапни точку финиша' : '';
}
}
-
-// ─── Построение маршрута ──────────────────────────────────────────────────────
+// ─── Построение маршрута ───────────────────────────────────────────
function debounceBuildRoute() {
clearTimeout(buildDebounceTimer);
buildDebounceTimer = setTimeout(buildRoute, 300);
@@ -330,11 +515,10 @@ async function buildRoute() {
if (routeWaypoints.length < 2) return;
const map = window._map;
const basePath = getBasePath();
-
+
document.getElementById('route-status').textContent = '⏳ Строю маршрут...';
- const btn = document.getElementById('btn-build-route');
- if (btn) btn.textContent = '⏳ Строю...';
-
+ showSkeleton('route-cards', 3);
+
try {
const resp = await fetch(basePath + '/api/route', {
method: 'POST',
@@ -345,112 +529,94 @@ async function buildRoute() {
const data = await resp.json();
routeResults = data.routes || [];
if (!routeResults.length) throw new Error('Маршрут не найден');
-
- // Убираем старые слои
- for (let i = 0; i < 5; i++) {
- if (map.getLayer('route-line-' + i)) map.removeLayer('route-line-' + i);
- if (map.getLayer('route-line-' + i + '-outline')) map.removeLayer('route-line-' + i + '-outline');
- if (map.getSource('route-' + i)) map.removeSource('route-' + i);
- }
-
- // Рисуем все маршруты
- routeResults.forEach((route, i) => {
- const color = ROUTE_COLORS[i] || '#888888';
- const isActive = i === activeRouteIdx;
- map.addSource('route-' + i, {
- type: 'geojson',
- data: { type: 'Feature', geometry: route.geometry, properties: {} }
- });
- // Обводка (белая) для активного
- map.addLayer({
- id: 'route-line-' + i + '-outline',
- type: 'line',
- source: 'route-' + i,
- paint: {
- 'line-color': '#ffffff',
- 'line-width': isActive ? 7 : 4,
- 'line-opacity': isActive ? 0.6 : 0,
- },
- layout: { 'line-cap': 'round', 'line-join': 'round' }
- });
- map.addLayer({
- id: 'route-line-' + i,
- type: 'line',
- source: 'route-' + i,
- paint: {
- 'line-color': color,
- 'line-width': isActive ? 5 : 3,
- 'line-opacity': isActive ? 0.95 : 0.5,
- },
- layout: { 'line-cap': 'round', 'line-join': 'round' }
- });
-
- // Клик на линию маршрута
- map.on('click', 'route-line-' + i, (e) => {
- e.stopPropagation ? e.stopPropagation() : null;
- selectRoute(i);
- });
- map.on('mouseenter', 'route-line-' + i, () => {
- map.getCanvas().style.cursor = 'pointer';
- highlightRoute(i);
- });
- map.on('mouseleave', 'route-line-' + i, () => {
- map.getCanvas().style.cursor = routeMode ? 'crosshair' : '';
- unhighlightRoute(i);
- });
- });
-
- activeRouteIdx = 0;
- renderRouteCards(routeResults);
- document.getElementById('route-status').textContent = `✅ ${routeResults.length} маршрут(ов)`;
+
+ drawRouteResults(routeResults, 0);
+
+ document.getElementById('route-status').textContent = `${routeResults.length} маршрут(ов)`;
document.getElementById('route-actions').style.display = 'block';
-
} catch(e) {
document.getElementById('route-status').textContent = '❌ ' + e.message;
+ document.getElementById('route-cards').innerHTML = '';
}
-
- if (btn) btn.textContent = '🗺️ Построить маршрут';
}
-// ─── Выбор и подсветка маршрутов ─────────────────────────────────────────────
+function drawRouteResults(routes, activeIdx) {
+ const map = window._map;
+ activeRouteIdx = activeIdx;
+ routeResults = routes;
+
+ // Clear old layers
+ for (let i = 0; i < 5; i++) {
+ try { if (map.getLayer('route-line-' + i)) map.removeLayer('route-line-' + i); } catch(e) {}
+ try { if (map.getLayer('route-line-' + i + '-outline')) map.removeLayer('route-line-' + i + '-outline'); } catch(e) {}
+ try { if (map.getSource('route-' + i)) map.removeSource('route-' + i); } catch(e) {}
+ }
+
+ routes.forEach((route, i) => {
+ const color = ROUTE_COLORS[i] || '#888888';
+ const isActive = i === activeIdx;
+ map.addSource('route-' + i, {
+ type: 'geojson',
+ data: { type: 'Feature', geometry: route.geometry, properties: {} }
+ });
+ map.addLayer({
+ id: 'route-line-' + i + '-outline',
+ type: 'line', source: 'route-' + i,
+ paint: {
+ 'line-color': '#ffffff',
+ 'line-width': isActive ? 7 : 4,
+ 'line-opacity': isActive ? 0.6 : 0,
+ },
+ layout: { 'line-cap': 'round', 'line-join': 'round' }
+ });
+ map.addLayer({
+ id: 'route-line-' + i,
+ type: 'line', source: 'route-' + i,
+ paint: {
+ 'line-color': color,
+ 'line-width': isActive ? 5 : 3,
+ 'line-opacity': isActive ? 0.95 : 0.5,
+ },
+ layout: { 'line-cap': 'round', 'line-join': 'round' }
+ });
+
+ map.on('click', 'route-line-' + i, (e) => {
+ if (e.stopPropagation) e.stopPropagation();
+ selectRoute(i);
+ });
+ map.on('mouseenter', 'route-line-' + i, () => {
+ map.getCanvas().style.cursor = 'pointer';
+ });
+ map.on('mouseleave', 'route-line-' + i, () => {
+ map.getCanvas().style.cursor = routeMode ? 'crosshair' : '';
+ });
+ });
+
+ renderRouteCards(routes);
+}
+
function selectRoute(idx) {
activeRouteIdx = idx;
const map = window._map;
routeResults.forEach((_, i) => {
const isActive = i === idx;
- if (map.getLayer('route-line-' + i)) {
- map.setPaintProperty('route-line-' + i, 'line-width', isActive ? 5 : 3);
- map.setPaintProperty('route-line-' + i, 'line-opacity', isActive ? 0.95 : 0.5);
- }
- if (map.getLayer('route-line-' + i + '-outline')) {
- map.setPaintProperty('route-line-' + i + '-outline', 'line-width', isActive ? 7 : 4);
- map.setPaintProperty('route-line-' + i + '-outline', 'line-opacity', isActive ? 0.6 : 0);
- }
+ try {
+ if (map.getLayer('route-line-' + i)) {
+ map.setPaintProperty('route-line-' + i, 'line-width', isActive ? 5 : 3);
+ map.setPaintProperty('route-line-' + i, 'line-opacity', isActive ? 0.95 : 0.5);
+ }
+ if (map.getLayer('route-line-' + i + '-outline')) {
+ map.setPaintProperty('route-line-' + i + '-outline', 'line-width', isActive ? 7 : 4);
+ map.setPaintProperty('route-line-' + i + '-outline', 'line-opacity', isActive ? 0.6 : 0);
+ }
+ } catch(e) {}
});
- // Обновляем CSS карточек
document.querySelectorAll('.route-card').forEach((card, i) => {
card.classList.toggle('active', i === idx);
});
}
-function highlightRoute(idx) {
- const map = window._map;
- if (map.getLayer('route-line-' + idx)) {
- map.setPaintProperty('route-line-' + idx, 'line-width', 7);
- map.setPaintProperty('route-line-' + idx, 'line-opacity', 1);
- }
-}
-
-function unhighlightRoute(idx) {
- const isActive = idx === activeRouteIdx;
- const map = window._map;
- if (map.getLayer('route-line-' + idx)) {
- map.setPaintProperty('route-line-' + idx, 'line-width', isActive ? 5 : 3);
- map.setPaintProperty('route-line-' + idx, 'line-opacity', isActive ? 0.95 : 0.5);
- }
-}
-
-// ─── Карточки маршрутов ───────────────────────────────────────────────────────
+// ─── Карточки маршрутов ───────────────────────────────────────────
function renderRouteCards(routes) {
const container = document.getElementById('route-cards');
container.innerHTML = routes.map((route, i) => {
@@ -458,84 +624,34 @@ function renderRouteCards(routes) {
const distKm = (route.distance_m / 1000).toFixed(1);
const timeStr = formatDuration(route.duration_s);
const isActive = i === activeRouteIdx;
-
- let barHtml = '';
- let summaryHtml = '';
- let detailsHtml = '';
-
+
+ let statsHtml = '';
if (route.stats) {
const s = route.stats;
- barHtml = `
-
-
-
-
-
+ statsHtml = `
+
+
+ 🟡 ${s.dirt_total_pct || 0}% грунт
+ ${s.asphalt_pct ? `⬜ ${s.asphalt_pct}% асфальт` : ''}
`;
- summaryHtml = `
${s.dirt_total_pct}% грунт · ${s.asphalt_pct}% асфальт
`;
- detailsHtml = `
-
-
🟡 Lev1-2 ${(s.track_lev12_m/1000).toFixed(1)} км ${s.track_lev12_pct}%
-
🔴 Lev3-5 ${(s.track_lev345_m/1000).toFixed(1)} км ${s.track_lev345_pct}%
-
🔴 Тропы ${(s.path_m/1000).toFixed(1)} км ${s.path_pct}%
-
⬜ Асфальт ${(s.asphalt_m/1000).toFixed(1)} км ${s.asphalt_pct}%
-
-
-
-
-
-
`;
- } else {
- detailsHtml = `
-
-
-
-
-
-
-
`;
}
-
- return `
-