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

frontend/app/api/get-detectors/route.ts

@@ -1,6 +1,7 @@
 import { NextResponse } from 'next/server'
 import { getServerSession } from 'next-auth'
 import { authOptions } from '@/lib/auth'
+import * as statusColors from '@/lib/statusColors'
 
 export async function GET() {
   try {
@@ -50,15 +51,15 @@ export async function GET() {
     }
 
     const statusToColor: Record<string, string> = {
-      critical: '#b3261e',
-      warning: '#fd7c22',
-      normal: '#00ff00',
+      critical: statusColors.STATUS_COLOR_CRITICAL,
+      warning: statusColors.STATUS_COLOR_WARNING,
+      normal: statusColors.STATUS_COLOR_NORMAL,
     }
 
     const transformedDetectors: Record<string, any> = {}
     const detectorsObj = detectorsPayload?.detectors ?? {}
     for (const [key, sensor] of Object.entries<any>(detectorsObj)) {
-      const color = statusToColor[sensor.status] ?? '#00ff00'
+      const color = statusToColor[sensor.status] ?? statusColors.STATUS_COLOR_NORMAL
       const objectId = titleToIdMap[sensor.object] || sensor.object
       transformedDetectors[key] = {
         ...sensor,
@@ -100,4 +101,4 @@ export async function GET() {
       { status: 500 }
     )
   }
-}
+}