Linking backend data to frontend

frontend/app/(protected)/navigation/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { useEffect, useCallback } from 'react'
+import React, { useEffect, useCallback, useState } from 'react'
 import { useRouter, useSearchParams } from 'next/navigation' 
 import Sidebar from '../../../components/ui/Sidebar'
 import useNavigationStore from '../../store/navigationStore'
@@ -9,8 +9,16 @@ import FloorNavigation from '../../../components/navigation/FloorNavigation'
 import DetectorMenu from '../../../components/navigation/DetectorMenu'
 import Notifications from '../../../components/notifications/Notifications'
 import NotificationDetectorInfo from '../../../components/notifications/NotificationDetectorInfo'
-import ModelViewer from '../../../components/model/ModelViewer'
-import detectorsData from '../../../data/detectors.json'
+import dynamic from 'next/dynamic'
+
+const ModelViewer = dynamic(() => import('../../../components/model/ModelViewer'), {
+  ssr: false,
+  loading: () => (
+    <div className="w-full h-full flex items-center justify-center bg-[#0e111a]">
+      <div className="text-gray-300 animate-pulse">Загрузка 3D-модуля…</div>
+    </div>
+  ),
+})
 
 interface DetectorType {
   detector_id: number
@@ -66,7 +74,10 @@ const NavigationPage: React.FC = () => {
     setSelectedNotification,
     setShowNotificationDetectorInfo
   } = useNavigationStore()
-   
+  
+  const [detectorsData, setDetectorsData] = useState<{ detectors: Record<string, DetectorType> }>({ detectors: {} })
+  const [detectorsError, setDetectorsError] = useState<string | null>(null)
+  
   const urlObjectId = searchParams.get('objectId')
   const urlObjectTitle = searchParams.get('objectTitle')
   const objectId = currentObject.id || urlObjectId
@@ -85,6 +96,27 @@ const NavigationPage: React.FC = () => {
     }
   }, [urlObjectId, urlObjectTitle, currentObject.id, setCurrentObject])
 
+  useEffect(() => {
+    const loadDetectors = async () => {
+      try {
+        setDetectorsError(null)
+        const res = await fetch('/api/get-detectors', { cache: 'no-store' })
+        const text = await res.text()
+        let payload: any
+        try { payload = JSON.parse(text) } catch { payload = text }
+        console.log('[NavigationPage] GET /api/get-detectors', { status: res.status, payload })
+        if (!res.ok) throw new Error(typeof payload === 'string' ? payload : (payload?.error || 'Не удалось получить детекторов'))
+        const data = payload?.data ?? payload
+        const detectors = (data?.detectors ?? {}) as Record<string, DetectorType>
+        setDetectorsData({ detectors })
+      } catch (e: any) {
+        console.error('Ошибка загрузки детекторов:', e)
+        setDetectorsError(e?.message || 'Ошибка при загрузке детекторов')
+      }
+    }
+    loadDetectors()
+  }, [])
+
   const handleBackClick = () => {
     router.push('/dashboard')
   }
@@ -170,6 +202,9 @@ const NavigationPage: React.FC = () => {
                 onNotificationClick={handleNotificationClick}
                 onClose={closeNotifications}
               />
+              {detectorsError && (
+                <div className="mt-2 text-sm text-red-400">{detectorsError}</div>
+              )}
             </div>
           </div>
         )}
@@ -225,7 +260,7 @@ const NavigationPage: React.FC = () => {
         <div className="flex-1 overflow-hidden">
           <div className="h-full">
             <ModelViewer 
-              modelPath='/models/AerBIM-Monitor_ASM-HT-Viewer_Expo2017Astana_20250908_L_+1430.glb'
+              modelPath='/static-models/AerBIM_Monitor_ASM_HT_Viewer_Expo2017Astana_Level_+1430_custom_prop.glb'
               onModelLoaded={handleModelLoaded}
               onError={handleModelError}
             />