Added list of detectors and sensors sub-menus

2025-11-19 09:48:17 +03:00
parent 46045f0b0a
commit eba7585a5b
9 changed files with 814 additions and 19 deletions
--- a/frontend/app/(protected)/navigation/page.tsx
+++ b/frontend/app/(protected)/navigation/page.tsx
@@ -7,6 +7,9 @@ import useNavigationStore from '../../store/navigationStore'
 import Monitoring from '../../../components/navigation/Monitoring'
 import FloorNavigation from '../../../components/navigation/FloorNavigation'
 import DetectorMenu from '../../../components/navigation/DetectorMenu'
+import ListOfDetectors from '../../../components/navigation/ListOfDetectors'
+import Sensors from '../../../components/navigation/Sensors'
+import AlertMenu from '../../../components/navigation/AlertMenu'
 import Notifications from '../../../components/notifications/Notifications'
 import NotificationDetectorInfo from '../../../components/notifications/NotificationDetectorInfo'
 import dynamic from 'next/dynamic'
@@ -56,6 +59,20 @@ interface NotificationType {
  priority: string
 }

+interface AlertType {
+  id: number
+  detector_id: number
+  detector_name: string
+  type: string
+  status: string
+  message: string
+  timestamp: string
+  location: string
+  object: string
+  acknowledged: boolean
+  priority: string
+}
+
 const NavigationPage: React.FC = () => {
  const router = useRouter()
  const searchParams = useSearchParams()
@@ -65,17 +82,25 @@ const NavigationPage: React.FC = () => {
    showMonitoring,
    showFloorNavigation, 
    showNotifications,
+    showListOfDetectors,
+    showSensors,
    selectedDetector,
    showDetectorMenu,
    selectedNotification,
    showNotificationDetectorInfo,
+    selectedAlert,
+    showAlertMenu,
    closeMonitoring,
    closeFloorNavigation,
    closeNotifications,
+    closeListOfDetectors,
+    closeSensors,
    setSelectedDetector,
    setShowDetectorMenu,
    setSelectedNotification,
-    setShowNotificationDetectorInfo
+    setShowNotificationDetectorInfo,
+    setSelectedAlert,
+    setShowAlertMenu
  } = useNavigationStore()
  
  const [detectorsData, setDetectorsData] = useState<{ detectors: Record<string, DetectorType> }>({ detectors: {} })
@@ -181,6 +206,32 @@ const NavigationPage: React.FC = () => {
    setSelectedNotification(null)
  }

+  const closeAlertMenu = () => {
+    setShowAlertMenu(false)
+    setSelectedAlert(null)
+  }
+ 
+  const handleAlertClick = (alert: AlertType) => {
+    console.log('[NavigationPage] Alert clicked, focusing on detector in 3D scene:', alert)
+     
+    const detector = Object.values(detectorsData.detectors).find(
+      d => d.detector_id === alert.detector_id
+    )
+    
+    if (detector) {
+      console.log('[NavigationPage] Found detector for alert:', detector)
+       
+      setSelectedAlert(alert)
+      setShowAlertMenu(true)
+       
+      setSelectedDetector(detector)
+      
+      console.log('[NavigationPage] Showing AlertMenu for alert:', alert.detector_name)
+    } else {
+      console.warn('[NavigationPage] Could not find detector for alert:', alert.detector_id)
+    }
+  }
+
  const getStatusText = (status: string) => {
    const s = (status || '').toLowerCase()
    switch (s) {
@@ -253,6 +304,40 @@ const NavigationPage: React.FC = () => {
          </div>
        )}

+        {showListOfDetectors && (
+          <div className="absolute left-0 top-[73px] bottom-0 bg-[#161824] border-r border-gray-700 z-20 w-[500px]">
+            <div className="h-full overflow-auto p-4">
+              <ListOfDetectors 
+                objectId={objectId || undefined}
+                detectorsData={detectorsData}
+                onDetectorMenuClick={handleDetectorMenuClick}
+                onClose={closeListOfDetectors}
+                is3DReady={isModelReady && !modelError}
+              />
+              {detectorsError && (
+                <div className="mt-2 text-sm text-red-400">{detectorsError}</div>
+              )}
+            </div>
+          </div>
+        )}
+
+        {showSensors && (
+          <div className="absolute left-0 top-[73px] bottom-0 bg-[#161824] border-r border-gray-700 z-20 w-[500px]">
+            <div className="h-full overflow-auto p-4">
+              <Sensors 
+                objectId={objectId || undefined}
+                detectorsData={detectorsData}
+                onAlertClick={handleAlertClick}
+                onClose={closeSensors}
+                is3DReady={isModelReady && !modelError}
+              />
+              {detectorsError && (
+                <div className="mt-2 text-sm text-red-400">{detectorsError}</div>
+              )}
+            </div>
+          </div>
+        )}
+
        {showNotifications && showNotificationDetectorInfo && selectedNotification && (() => {
          const detectorData = Object.values(detectorsData.detectors).find(
            detector => detector.detector_id === selectedNotification.detector_id
@@ -334,18 +419,29 @@ const NavigationPage: React.FC = () => {
                modelPath={selectedModelPath}
                onModelLoaded={handleModelLoaded}
                onError={handleModelError}
-                focusSensorId={selectedDetector?.serial_number ?? null}
+                focusSensorId={selectedDetector?.serial_number ?? selectedAlert?.detector_id?.toString() ?? null}
                renderOverlay={({ anchor }) => (
-                  selectedDetector && showDetectorMenu && anchor ? (
-                    <DetectorMenu
-                      detector={selectedDetector}
-                      isOpen={true}
-                      onClose={closeDetectorMenu}
-                      getStatusText={getStatusText}
-                      compact={true}
-                      anchor={anchor}
-                    />
-                  ) : null
+                  <>
+                    {selectedAlert && showAlertMenu && anchor ? (
+                      <AlertMenu
+                        alert={selectedAlert}
+                        isOpen={true}
+                        onClose={closeAlertMenu}
+                        getStatusText={getStatusText}
+                        compact={true}
+                        anchor={anchor}
+                      />
+                    ) : selectedDetector && showDetectorMenu && anchor ? (
+                      <DetectorMenu
+                        detector={selectedDetector}
+                        isOpen={true}
+                        onClose={closeDetectorMenu}
+                        getStatusText={getStatusText}
+                        compact={true}
+                        anchor={anchor}
+                      />
+                    ) : null}
+                  </>
                )}
              />
            )}
--- a/frontend/app/store/navigationStore.ts
+++ b/frontend/app/store/navigationStore.ts
@@ -36,6 +36,20 @@ interface NotificationType {
  priority: string
 }

+interface AlertType {
+  id: number
+  detector_id: number
+  detector_name: string
+  type: string
+  status: string
+  message: string
+  timestamp: string
+  location: string
+  object: string
+  acknowledged: boolean
+  priority: string
+}
+
 export interface NavigationStore {
  currentObject: { id: string | undefined; title: string | undefined }
  navigationHistory: string[]
@@ -44,11 +58,15 @@ export interface NavigationStore {
  showMonitoring: boolean
  showFloorNavigation: boolean
  showNotifications: boolean
+  showListOfDetectors: boolean
+  showSensors: boolean
   
  selectedDetector: DetectorType | null
  showDetectorMenu: boolean
  selectedNotification: NotificationType | null
  showNotificationDetectorInfo: boolean
+  selectedAlert: AlertType | null
+  showAlertMenu: boolean
    
  setCurrentObject: (id: string | undefined, title: string | undefined) => void
  clearCurrentObject: () => void
@@ -64,11 +82,20 @@ export interface NavigationStore {
  closeFloorNavigation: () => void
  openNotifications: () => void
  closeNotifications: () => void
+  openListOfDetectors: () => void
+  closeListOfDetectors: () => void
+  openSensors: () => void
+  closeSensors: () => void
+  
+  // Close all menus and submenus
+  closeAllMenus: () => void
   
  setSelectedDetector: (detector: DetectorType | null) => void
  setShowDetectorMenu: (show: boolean) => void
  setSelectedNotification: (notification: NotificationType | null) => void
  setShowNotificationDetectorInfo: (show: boolean) => void
+  setSelectedAlert: (alert: AlertType | null) => void
+  setShowAlertMenu: (show: boolean) => void
   
  isOnNavigationPage: () => boolean
  getCurrentRoute: () => string | null
@@ -88,11 +115,15 @@ const useNavigationStore = create<NavigationStore>()(
      showMonitoring: false,
      showFloorNavigation: false,
      showNotifications: false,
+      showListOfDetectors: false,
+      showSensors: false,
       
      selectedDetector: null,
      showDetectorMenu: false,
      selectedNotification: null,
      showNotificationDetectorInfo: false,
+      selectedAlert: null,
+      showAlertMenu: false,
       
      setCurrentObject: (id: string | undefined, title: string | undefined) => 
        set({ currentObject: { id, title } }),
@@ -131,6 +162,7 @@ const useNavigationStore = create<NavigationStore>()(
        showMonitoring: true, 
        showFloorNavigation: false, 
        showNotifications: false,
+        showListOfDetectors: false,
        currentSubmenu: 'monitoring',
        showDetectorMenu: false,
        selectedDetector: null,
@@ -147,6 +179,7 @@ const useNavigationStore = create<NavigationStore>()(
        showFloorNavigation: true, 
        showMonitoring: false, 
        showNotifications: false,
+        showListOfDetectors: false,
        currentSubmenu: 'floors',
        showNotificationDetectorInfo: false,
        selectedNotification: null
@@ -163,6 +196,7 @@ const useNavigationStore = create<NavigationStore>()(
        showNotifications: true, 
        showMonitoring: false, 
        showFloorNavigation: false,
+        showListOfDetectors: false,
        currentSubmenu: 'notifications',
        showDetectorMenu: false,
        selectedDetector: null
@@ -174,11 +208,68 @@ const useNavigationStore = create<NavigationStore>()(
        selectedNotification: null,
        currentSubmenu: null 
      }),
+      
+      openListOfDetectors: () => set({ 
+        showListOfDetectors: true, 
+        showMonitoring: false, 
+        showFloorNavigation: false,
+        showNotifications: false,
+        currentSubmenu: 'detectors',
+        showDetectorMenu: false,
+        selectedDetector: null,
+        showNotificationDetectorInfo: false,
+        selectedNotification: null
+      }),
+      
+      closeListOfDetectors: () => set({ 
+        showListOfDetectors: false, 
+        showDetectorMenu: false,
+        selectedDetector: null,
+        currentSubmenu: null 
+      }),
+      
+      openSensors: () => set({ 
+        showSensors: true, 
+        showMonitoring: false, 
+        showFloorNavigation: false,
+        showNotifications: false,
+        showListOfDetectors: false,
+        currentSubmenu: 'sensors',
+        showDetectorMenu: false,
+        selectedDetector: null,
+        showNotificationDetectorInfo: false,
+        selectedNotification: null
+      }),
+      
+      closeSensors: () => set({ 
+        showSensors: false, 
+        showDetectorMenu: false,
+        selectedDetector: null,
+        currentSubmenu: null 
+      }),
+      
+      // Close all menus and submenus
+      closeAllMenus: () => set({
+        showMonitoring: false,
+        showFloorNavigation: false,
+        showNotifications: false,
+        showListOfDetectors: false,
+        showSensors: false,
+        showDetectorMenu: false,
+        selectedDetector: null,
+        showNotificationDetectorInfo: false,
+        selectedNotification: null,
+        showAlertMenu: false,
+        selectedAlert: null,
+        currentSubmenu: null
+      }),
       
      setSelectedDetector: (detector: DetectorType | null) => set({ selectedDetector: detector }),
      setShowDetectorMenu: (show: boolean) => set({ showDetectorMenu: show }),
      setSelectedNotification: (notification: NotificationType | null) => set({ selectedNotification: notification }),
      setShowNotificationDetectorInfo: (show: boolean) => set({ showNotificationDetectorInfo: show }),
+      setSelectedAlert: (alert: AlertType | null) => set({ selectedAlert: alert }),
+      setShowAlertMenu: (show: boolean) => set({ showAlertMenu: show }),
 
      isOnNavigationPage: () => {
        const { navigationHistory } = get()
@@ -192,10 +283,12 @@ const useNavigationStore = create<NavigationStore>()(
      },
      
      getActiveSidebarItem: () => {
-        const { showMonitoring, showFloorNavigation, showNotifications } = get()
+        const { showMonitoring, showFloorNavigation, showNotifications, showListOfDetectors, showSensors } = get()
        if (showMonitoring) return 3 // Зоны Мониторинга
        if (showFloorNavigation) return 4 // Навигация по этажам
        if (showNotifications) return 5 // Уведомления
+        if (showListOfDetectors) return 7 // Список датчиков
+        if (showSensors) return 8 // Сенсоры
        return 2 // Навигация (базовая)
      }
    }),