auto-sync: 2026-05-05 22:20:01

tasks/enduro-trails/prototype/static/app.css

@@ -665,3 +665,18 @@ body.has-map-mode #sheet-backdrop.visible { pointer-events: none; }
 @media (min-width: 768px) {
   #sheet-route-mini { left: 72px; width: 380px; right: auto; border-radius: 0 14px 0 0; }
 }
+
+/* ── Moto Wheel Loading Indicator ────────────── */
+.moto-wheel {
+  width: 32px; height: 32px;
+  flex-shrink: 0;
+  display: none;
+}
+.moto-wheel.spinning {
+  display: block;
+  animation: wheelSpin 0.8s linear infinite;
+}
+@keyframes wheelSpin {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(360deg); }
+}

tasks/enduro-trails/prototype/static/app.js

@@ -399,29 +399,25 @@ function toggleRouteMode() {
   const btn = document.getElementById('tb-route');
 
   if (routeMode) {
-    // X button pressed while panel open → exit mode + clear route
+    // If sheet is open — close sheet but stay in mode
+    const sheet = document.getElementById('sheet-route');
+    if (sheet && sheet.classList.contains('open')) {
+      closeSheet('sheet-route');
+      return;
+    }
+    // Sheet is closed — exit mode and clear route
     routeMode = false;
     btn.classList.remove('active');
-    closeSheet('sheet-route');
     clearRoute();
     window._map.getCanvas().style.cursor = '';
-  } else if (routeResults.length > 0) {
-    // Route exists, mini-bar visible → show full panel
-    hideMiniRouteSheet();
-    deactivateAllModes();
-    routeMode = true;
-    btn.classList.add('active');
-    openSheet('sheet-route');
-    window._map.getCanvas().style.cursor = 'crosshair';
   } else {
-    // No route → enter route input mode
-    hideMiniRouteSheet();
+    // Enter route mode — do NOT open sheet
     deactivateAllModes();
     routeMode = true;
     btn.classList.add('active');
-    openSheet('sheet-route');
     clearRoute();
     window._map.getCanvas().style.cursor = 'crosshair';
+    // sheet is NOT opened — user taps mini-bar to open it
   }
   updateMapModeClass();
 }
@@ -450,7 +446,6 @@ function clearRoute() {
 
 function addWaypointMode() {
   if (routeWaypoints.length >= 10) return;
-  // Убедиться что routeMode активен — иначе клик на карте игнорируется
   if (!routeMode) {
     routeMode = true;
     document.getElementById('tb-route').classList.add('active');
@@ -458,7 +453,12 @@ function addWaypointMode() {
   }
   addingWaypoint = true;
   window._map.getCanvas().style.cursor = 'crosshair';
-  document.getElementById('route-status').textContent = 'Тапни на карте для добавления точки';
+  // Hide main sheet so the map is visible for tapping
+  closeSheet('sheet-route');
+  // Show hint in mini-bar
+  const statsEl = document.getElementById('mini-stats');
+  if (statsEl) statsEl.textContent = 'Тапни на карте для добавления точки';
+  document.getElementById('sheet-route-mini').classList.add('visible');
 }
 
 // ─── Маркеры точек ─────────────────────────────────────────────────
@@ -729,10 +729,15 @@ async function buildRoute() {
   if (routeWaypoints.length < 2) return;
   const map = window._map;
   const basePath = getBasePath();
-  
-  document.getElementById('route-status').textContent = '⏳ Строю маршрут...';
+
+  // Show mini-bar with spinning wheel
+  showMiniRouteLoading();
+  // Close main sheet if open
+  closeSheet('sheet-route');
+
+  document.getElementById('route-status').textContent = 'Строю маршрут...';
   showSkeleton('route-cards', 3);
-  
+
   try {
     const resp = await fetch(basePath + '/api/route', {
       method: 'POST',
@@ -743,13 +748,19 @@ async function buildRoute() {
     const data = await resp.json();
     routeResults = data.routes || [];
     if (!routeResults.length) throw new Error('Маршрут не найден');
-    
+
     drawRouteResults(routeResults, 0);
-    
+
     document.getElementById('route-status').textContent = `${routeResults.length} маршрут(ов)`;
+    // Show mini-bar with result — do NOT open main sheet
+    hideMiniRouteLoading();
+    showMiniRouteSheet();
   } catch(e) {
+    hideMiniRouteLoading();
     document.getElementById('route-status').textContent = '❌ ' + e.message;
     document.getElementById('route-cards').innerHTML = '';
+    const statsEl = document.getElementById('mini-stats');
+    if (statsEl) statsEl.textContent = '❌ ' + e.message;
   }
 }
 
@@ -1857,6 +1868,20 @@ function selectMiniRoute(idx) {
   updateMiniRouteCard();
 }
 
+// ─── Mini Route Loading Indicator ─────────────────────────────────
+function showMiniRouteLoading() {
+  const wheel = document.getElementById('mini-wheel');
+  const statsEl = document.getElementById('mini-stats');
+  if (wheel) wheel.classList.add('spinning');
+  if (statsEl) statsEl.textContent = 'Строю маршрут...';
+  document.getElementById('sheet-route-mini').classList.add('visible');
+}
+
+function hideMiniRouteLoading() {
+  const wheel = document.getElementById('mini-wheel');
+  if (wheel) wheel.classList.remove('spinning');
+}
+
 function initMiniRouteInteraction() {
   const mini = document.getElementById('sheet-route-mini');
   if (!mini) return;

tasks/enduro-trails/prototype/static/index.html

@@ -233,6 +233,24 @@
 <div id="sheet-route-mini">
   <div class="mini-handle" id="mini-route-handle"></div>
   <div class="mini-route-info">
+    <!-- Moto wheel loading indicator -->
+    <svg id="mini-wheel" class="moto-wheel" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
+      <!-- Rim -->
+      <circle cx="20" cy="20" r="17" fill="none" stroke="var(--accent)" stroke-width="2.5"/>
+      <!-- Tyre (outer with knobby tread) -->
+      <circle cx="20" cy="20" r="19" fill="none" stroke="var(--text2)" stroke-width="1.5" stroke-dasharray="3 2"/>
+      <!-- Hub -->
+      <circle cx="20" cy="20" r="3" fill="var(--accent)"/>
+      <!-- Spokes (8) -->
+      <line x1="20" y1="3" x2="20" y2="17" stroke="var(--text2)" stroke-width="1.2" stroke-linecap="round"/>
+      <line x1="20" y1="23" x2="20" y2="37" stroke="var(--text2)" stroke-width="1.2" stroke-linecap="round"/>
+      <line x1="3" y1="20" x2="17" y2="20" stroke="var(--text2)" stroke-width="1.2" stroke-linecap="round"/>
+      <line x1="23" y1="20" x2="37" y2="20" stroke="var(--text2)" stroke-width="1.2" stroke-linecap="round"/>
+      <line x1="7.9" y1="7.9" x2="17.5" y2="17.5" stroke="var(--text2)" stroke-width="1.2" stroke-linecap="round"/>
+      <line x1="22.5" y1="22.5" x2="32.1" y2="32.1" stroke="var(--text2)" stroke-width="1.2" stroke-linecap="round"/>
+      <line x1="32.1" y1="7.9" x2="22.5" y2="17.5" stroke="var(--text2)" stroke-width="1.2" stroke-linecap="round"/>
+      <line x1="17.5" y1="22.5" x2="7.9" y2="32.1" stroke="var(--text2)" stroke-width="1.2" stroke-linecap="round"/>
+    </svg>
     <div class="mini-route-dot" id="mini-dot"></div>
     <div class="mini-route-text">
       <div class="mini-route-label" id="mini-label">Вариант 1</div>