Overhaul of the highlight system

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

@@ -1,5 +1,5 @@
 'use client'
-
+ 
 import React, { useEffect, useCallback, useState } from 'react'
 import { useRouter, useSearchParams } from 'next/navigation' 
 import Sidebar from '../../../components/ui/Sidebar'
@@ -14,7 +14,8 @@ import Notifications from '../../../components/notifications/Notifications'
 import NotificationDetectorInfo from '../../../components/notifications/NotificationDetectorInfo'
 import dynamic from 'next/dynamic'
 import type { ModelViewerProps } from '../../../components/model/ModelViewer'
-
+import * as statusColors from '../../../lib/statusColors'
+ 
 const ModelViewer = dynamic<ModelViewerProps>(() => import('../../../components/model/ModelViewer'), {
    ssr: false,
    loading: () => (
@@ -109,6 +110,15 @@ const NavigationPage: React.FC = () => {
   const [isModelReady, setIsModelReady] = useState(false)
   const [focusedSensorId, setFocusedSensorId] = useState<string | null>(null)
   const [highlightAllSensors, setHighlightAllSensors] = useState(false)
+  const sensorStatusMap = React.useMemo(() => {
+    const map: Record<string, string> = {}
+    Object.values(detectorsData.detectors).forEach(d => {
+      if (d.serial_number && d.status) {
+        map[String(d.serial_number).trim()] = d.status
+      }
+    })
+    return map
+  }, [detectorsData])
 
   useEffect(() => {
     if (selectedDetector === null && selectedAlert === null) {
@@ -353,13 +363,13 @@ const NavigationPage: React.FC = () => {
   const getStatusText = (status: string) => {
     const s = (status || '').toLowerCase()
     switch (s) {
-      case '#b3261e':
+      case statusColors.STATUS_COLOR_CRITICAL:
       case 'critical':
         return 'Критический'
-      case '#fd7c22':
+      case statusColors.STATUS_COLOR_WARNING:
       case 'warning':
         return 'Предупреждение'
-      case '#00ff00':
+      case statusColors.STATUS_COLOR_NORMAL:
       case 'normal':
         return 'Норма'
       default:
@@ -546,6 +556,7 @@ const NavigationPage: React.FC = () => {
                 activeMenu={showSensors ? 'sensors' : showFloorNavigation ? 'floor' : showListOfDetectors ? 'detectors' : null}
                 focusSensorId={focusedSensorId}
                 highlightAllSensors={highlightAllSensors}
+                sensorStatusMap={sensorStatusMap}
                 isSensorSelectionEnabled={showSensors || showFloorNavigation || showListOfDetectors}
                 onSensorPick={handleSensorSelection}
                 renderOverlay={({ anchor }) => (
@@ -580,4 +591,4 @@ const NavigationPage: React.FC = () => {
   )
 }
 
-export default NavigationPage
+export default NavigationPage