Linked backend data to detectors' meshes.

frontend/components/navigation/DetectorMenu.tsx

@@ -5,6 +5,7 @@ import React from 'react'
 interface DetectorType {
   detector_id: number
   name: string
+  serial_number: string
   object: string
   status: string
   checked: boolean
@@ -18,36 +19,50 @@ interface DetectorMenuProps {
   isOpen: boolean
   onClose: () => void
   getStatusText: (status: string) => string
+  compact?: boolean
+  anchor?: { left: number; top: number } | null
 }
 
-const DetectorMenu: React.FC<DetectorMenuProps> = ({ detector, isOpen, onClose, getStatusText }) => {
+const DetectorMenu: React.FC<DetectorMenuProps> = ({ detector, isOpen, onClose, getStatusText, compact = false, anchor = null }) => {
   if (!isOpen) return null
 
-  return (
-    <div className="absolute left-[500px] top-0 bg-[#161824] border-r border-gray-700 z-30 w-[454px]" style={{height: 'calc(100% - 73px)', top: '73px'}}>
-      <div className="h-full overflow-auto p-5">
-        <div className="flex items-center justify-between mb-4">
-          <h3 className="text-white text-lg font-medium">
-            Датч.{detector.name}
-          </h3>
-          <div className="flex items-center gap-2">
-            <button className="bg-[rgb(27,29,41)] hover:bg-[rgb(37,39,51)] text-white px-3 py-2 rounded-[10px] text-sm font-medium transition-colors flex items-center gap-2">
-              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-              </svg>
-              Отчет
-            </button>
-            <button className="bg-[rgb(27,29,41)] hover:bg-[rgb(37,39,51)] text-white px-3 py-2 rounded-[10px] text-sm font-medium transition-colors flex items-center gap-2">
-              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
-              </svg>
-              История
-            </button>
+  const DetailsSection: React.FC<{ compact?: boolean }> = ({ compact = false }) => (
+    <div className={compact ? 'mt-2 space-y-1' : 'space-y-0 border border-[rgb(30,31,36)] rounded-lg overflow-hidden'}>
+      {compact ? (
+        <>
+          <div className="grid grid-cols-2 gap-2">
+            <div>
+              <div className="text-[rgb(113,113,122)] text-[11px]">Маркировка по проекту</div>
+              <div className="text-white text-xs truncate">{detector.name}</div>
+            </div>
+            <div>
+              <div className="text-[rgb(113,113,122)] text-[11px]">Тип детектора</div>
+              <div className="text-white text-xs truncate">{detector.type}</div>
+            </div>
           </div>
-        </div>
-        
-        {/* Таблица детекторов */}
-        <div className="space-y-0 border border-[rgb(30,31,36)] rounded-lg overflow-hidden">
+          <div className="grid grid-cols-2 gap-2">
+            <div>
+              <div className="text-[rgb(113,113,122)] text-[11px]">Местоположение</div>
+              <div className="text-white text-xs truncate">{detector.location}</div>
+            </div>
+            <div>
+              <div className="text-[rgb(113,113,122)] text-[11px]">Статус</div>
+              <div className="text-white text-xs truncate">{getStatusText(detector.status)}</div>
+            </div>
+          </div>
+          <div className="grid grid-cols-2 gap-2">
+            <div>
+              <div className="text-[rgb(113,113,122)] text-[11px]">Временная метка</div>
+              <div className="text-white text-xs truncate">Сегодня, 14:30</div>
+            </div>
+            <div>
+              <div className="text-[rgb(113,113,122)] text-[11px]">Этаж</div>
+              <div className="text-white text-xs truncate">{detector.floor}</div>
+            </div>
+          </div>
+        </>
+      ) : (
+        <>
           <div className="flex">
             <div className="flex-1 p-4 border-r border-[rgb(30,31,36)]">
               <div className="text-[rgb(113,113,122)] text-sm font-medium mb-1">Маркировка по проекту</div>
@@ -77,8 +92,71 @@ const DetectorMenu: React.FC<DetectorMenuProps> = ({ detector, isOpen, onClose,
               <div className="text-white text-sm text-right">Вчера</div>
             </div>
           </div>
+        </>
+      )}
+    </div>
+  )
+
+  if (compact && anchor) {
+    return (
+      <div className="absolute z-40" style={{ left: anchor.left, top: anchor.top }}>
+        <div className="rounded-[10px] bg-black/80 text-white text-xs px-3 py-2 shadow-xl min-w-[240px] max-w-[300px]">
+          <div className="flex items-start justify-between gap-3">
+            <div className="flex-1">
+              <div className="font-semibold truncate">Датч.{detector.name}</div>
+              <div className="opacity-80">{getStatusText(detector.status)}</div>
+            </div>
+            <button onClick={onClose} className="text-gray-300 hover:text-white transition-colors">
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+          <div className="mt-2 grid grid-cols-2 gap-2">
+            <button className="bg-[rgb(27,29,41)] hover:bg-[rgb(37,39,51)] text-white px-2 py-1 rounded-[8px] text-xs font-medium transition-colors flex items-center gap-1">
+              <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+              </svg>
+              Отчет
+            </button>
+            <button className="bg-[rgb(27,29,41)] hover:bg-[rgb(37,39,51)] text-white px-2 py-1 rounded-[8px] text-xs font-medium transition-colors flex items-center gap-1">
+              <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+              История
+            </button>
+          </div>
+          <DetailsSection compact={true} />
         </div>
-         
+      </div>
+    )
+  }
+
+  return (
+    <div className="absolute left-[500px] top-0 bg-[#161824] border-r border-gray-700 z-30 w-[454px]" style={{height: 'calc(100% - 73px)', top: '73px'}}>
+      <div className="h-full overflow-auto p-5">
+        <div className="flex items-center justify-between mb-4">
+          <h3 className="text-white text-lg font-medium">
+            Датч.{detector.name}
+          </h3>
+          <div className="flex items-center gap-2">
+            <button className="bg-[rgb(27,29,41)] hover:bg-[rgb(37,39,51)] text-white px-3 py-2 rounded-[10px] text-sm font-medium transition-colors flex items-center gap-2">
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+              </svg>
+              Отчет
+            </button>
+            <button className="bg-[rgb(27,29,41)] hover:bg-[rgb(37,39,51)] text-white px-3 py-2 rounded-[10px] text-sm font-medium transition-colors flex items-center gap-2">
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+              История
+            </button>
+          </div>
+        </div>
+
+        <DetailsSection />
+        
         <button 
           onClick={onClose}
           className="absolute top-4 right-4 text-gray-400 hover:text-white transition-colors"