AEB-71: Added 3D navigation in monitoring zones

frontend/components/navigation/Monitoring.tsx

@@ -1,13 +1,51 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import Image from 'next/image';
 
 interface MonitoringProps {
   objectId?: string;
   onClose?: () => void;
+  onSelectModel?: (modelPath: string) => void;
 }
 
-const Monitoring: React.FC<MonitoringProps> = ({ onClose }) => {
+const Monitoring: React.FC<MonitoringProps> = ({ onClose, onSelectModel }) => {
   const [objectImageError, setObjectImageError] = useState(false);
+  const [models, setModels] = useState<{ title: string; path: string }[]>([]);
+  const [loadError, setLoadError] = useState<string | null>(null);
+
+  // Загружаем список доступных моделей из assets/big-models через API
+  useEffect(() => {
+    const fetchModels = async () => {
+      try {
+        setLoadError(null);
+        const res = await fetch('/api/big-models/list');
+        if (!res.ok) {
+          const text = await res.text();
+          throw new Error(text || 'Failed to fetch models list');
+        }
+        const data = await res.json();
+        const items: { name: string; path: string }[] = Array.isArray(data?.models) ? data.models : [];
+
+        // Приоритизируем указанную модель, чтобы она была первой карточкой
+        const preferred = 'AerBIM-Monitor_ASM-HT-Viewer_Expo2017Astana_20250910';
+        const formatted = items
+          .map((it) => ({ title: it.name, path: it.path }))
+          .sort((a, b) => {
+            const ap = a.path.includes(preferred) ? -1 : 0;
+            const bp = b.path.includes(preferred) ? -1 : 0;
+            if (ap !== bp) return ap - bp;
+            return a.title.localeCompare(b.title);
+          });
+
+        setModels(formatted);
+      } catch (error) {
+        console.error('[Monitoring] Error loading models list:', error);
+        setLoadError(error instanceof Error ? error.message : String(error));
+        setModels([]);
+      }
+    };
+
+    fetchModels();
+  }, []);
 
   return (
     <div className="w-full"> 
@@ -51,25 +89,48 @@ const Monitoring: React.FC<MonitoringProps> = ({ onClose }) => {
           </div>
         </div>
  
+        {loadError && (
+          <div className="rounded-lg bg-red-600/20 border border-red-600/40 text-red-200 text-xs px-3 py-2">
+            Ошибка загрузки списка моделей: {loadError}
+          </div>
+        )}
+
         <div className="grid grid-cols-2 gap-3">
-          {[1, 2, 3, 4, 5, 6].map((zone) => (
-            <div key={zone} className="flex-1 bg-gray-300 rounded-lg h-[120px] flex items-center justify-center">
-              <div className="w-full h-full bg-gray-200 rounded flex items-center justify-center">
-                <Image 
-                  src="/images/test_image.png"
-                  alt={`Зона ${zone}`}
-                  width={120}
-                  height={120}
-                  className="max-w-full max-h-full object-contain opacity-50"
-                  style={{ height: 'auto' }}
-                  onError={(e) => {
-                    const target = e.target as HTMLImageElement;
-                    target.style.display = 'none';
-                  }}
-                />
+          {models.length > 0 ? (
+            models.map((model, idx) => (
+              <button
+                key={`${model.path}-${idx}`}
+                type="button"
+                onClick={() => onSelectModel?.(model.path)}
+                className="relative flex-1 bg-gray-300 rounded-lg h-[120px] flex items-center justify-center hover:bg-gray-400 transition-colors"
+                title={`Загрузить модель: ${model.title}`}
+              >
+                <div className="w-full h-full bg-gray-200 rounded flex items-center justify-center">
+                  <Image 
+                    src="/images/test_image.png"
+                    alt={model.title}
+                    width={120}
+                    height={120}
+                    className="max-w-full max-h-full object-contain opacity-50"
+                    style={{ height: 'auto' }}
+                    onError={(e) => {
+                      const target = e.target as HTMLImageElement;
+                      target.style.display = 'none';
+                    }}
+                  />
+                </div>
+                <div className="absolute bottom-1 left-1 right-1 text-[10px] text-gray-700 bg-white/70 rounded px-2 py-0.5 truncate">
+                  {model.title}
+                </div>
+              </button>
+            ))
+          ) : (
+            <div className="col-span-2">
+              <div className="rounded-lg bg-gray-200 text-gray-700 text-xs px-3 py-2 border border-gray-300">
+                Список моделей пуст. Добавьте файлы в assets/big-models или проверьте API /api/big-models/list.
               </div>
             </div>
-          ))}
+          )}
         </div>
       </div>
     </div>