Added more detectors to DB

frontend/components/navigation/Monitoring.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import Image from 'next/image';
 
 interface MonitoringProps {
@@ -12,6 +12,13 @@ const Monitoring: React.FC<MonitoringProps> = ({ onClose, onSelectModel }) => {
   const [models, setModels] = useState<{ title: string; path: string }[]>([]);
   const [loadError, setLoadError] = useState<string | null>(null);
 
+  const handleSelectModel = useCallback((modelPath: string) => { 
+    console.log(`[NavigationPage] Model selected: ${modelPath}`);
+    onSelectModel?.(modelPath);
+  }, [onSelectModel]);
+
+  console.log('[Monitoring] Models:', models, 'Error:', loadError);
+
   // Загружаем список доступных моделей из assets/big-models через API
   useEffect(() => {
     const fetchModels = async () => {
@@ -64,53 +71,29 @@ const Monitoring: React.FC<MonitoringProps> = ({ onClose, onSelectModel }) => {
           )}
         </div>
  
-        <div className="bg-[rgb(158,168,183)] rounded-lg p-3 h-[200px] flex items-center justify-center">
-          <div className="w-full h-full bg-gray-300 rounded flex items-center justify-center">
-            {objectImageError ? (
-              <div className="text-center p-4">
-                <div className="text-gray-600 text-sm font-semibold mb-2">
-                  Предпросмотр 3D недоступен
-                </div>
-                <div className="text-gray-500 text-xs">
-                  Изображение модели не найдено
-                </div>
-              </div>
-            ) : (
-              <Image 
-                src="/images/test_image.png"
-                alt="Object Model"
-                width={200}
-                height={200}
-                className="max-w-full max-h-full object-contain"
-                style={{ height: 'auto' }}
-                onError={() => setObjectImageError(true)}
-              />
-            )}
-          </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">
-          {models.length > 0 ? (
-            models.map((model, idx) => (
+        {models.length > 0 && (
+          <>
+            {/* Большая панорамная карточка для приоритетной модели */}
+            {models[0] && (
               <button
-                key={`${model.path}-${idx}`}
+                key={`${models[0].path}-panorama`}
                 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}`}
+                onClick={() => handleSelectModel(models[0].path)}
+                className="w-full bg-gray-300 rounded-lg h-[200px] flex items-center justify-center hover:bg-gray-400 transition-colors mb-4"
+                title={`Загрузить модель: ${models[0].title}`}
               >
-                <div className="w-full h-full bg-gray-200 rounded flex items-center justify-center">
+                <div className="w-full h-full bg-gray-200 rounded flex flex-col items-center justify-center relative">
                   <Image 
                     src="/images/test_image.png"
-                    alt={model.title}
-                    width={120}
-                    height={120}
+                    alt={models[0].title}
+                    width={200}
+                    height={200}
                     className="max-w-full max-h-full object-contain opacity-50"
                     style={{ height: 'auto' }}
                     onError={(e) => {
@@ -118,20 +101,57 @@ const Monitoring: React.FC<MonitoringProps> = ({ onClose, onSelectModel }) => {
                       target.style.display = 'none';
                     }}
                   />
+                  <div className="absolute bottom-2 left-2 right-2 text-sm text-gray-700 bg-white/80 rounded px-3 py-1 truncate">
+                    {models[0].title}
+                  </div>
                 </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.
+            )}
+
+            {/* Сетка маленьких карточек для остальных моделей */}
+            {models.length > 1 && (
+              <div className="grid grid-cols-2 gap-3">
+                {models.slice(1).map((model, idx) => (
+                  <button
+                    key={`${model.path}-${idx}`}
+                    type="button"
+                    onClick={() => handleSelectModel(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 flex-col items-center justify-center relative">
+                      <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 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>
+                    </div>
+
+                  </button>
+                ))}
               </div>
+            )}
+          </>
+        )}
+
+        {models.length === 0 && (
+          <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>
   );