Разработка интерфейса фронт

frontend/components/navigation/DetectorMenu.tsx

@@ -0,0 +1,97 @@
+'use client'
+
+import React from 'react'
+
+interface DetectorType {
+  detector_id: number
+  name: string
+  object: string
+  status: string
+  checked: boolean
+  type: string
+  location: string
+  floor: number
+}
+
+interface DetectorMenuProps {
+  detector: DetectorType
+  isOpen: boolean
+  onClose: () => void
+  getStatusText: (status: string) => string
+}
+
+const DetectorMenu: React.FC<DetectorMenuProps> = ({ detector, isOpen, onClose, getStatusText }) => {
+  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">
+        {/* Header */}
+        <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>
+        
+        {/* Detector Information Table */}
+        <div className="space-y-0 border border-[rgb(30,31,36)] rounded-lg overflow-hidden">
+          <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>
+              <div className="text-white text-sm">{detector.name}</div>
+            </div>
+            <div className="flex-1 p-4">
+              <div className="text-[rgb(113,113,122)] text-sm font-medium mb-1">Тип детектора</div>
+              <div className="text-white text-sm">{detector.type}</div>
+            </div>
+          </div>
+          <div className="flex border-t border-[rgb(30,31,36)]">
+            <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>
+              <div className="text-white text-sm">{detector.location}</div>
+            </div>
+            <div className="flex-1 p-4">
+              <div className="text-[rgb(113,113,122)] text-sm font-medium mb-1">Статус</div>
+              <div className="text-white text-sm">{getStatusText(detector.status)}</div>
+            </div>
+          </div>
+          <div className="flex border-t border-[rgb(30,31,36)]">
+            <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>
+              <div className="text-white text-sm">Сегодня, 14:30</div>
+            </div>
+            <div className="flex-1 p-4">
+              <div className="text-white text-sm text-right">Вчера</div>
+            </div>
+          </div>
+        </div>
+        
+        {/* Close Button */}
+        <button 
+          onClick={onClose}
+          className="absolute top-4 right-4 text-gray-400 hover:text-white transition-colors"
+        >
+          <svg className="w-5 h-5" 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>
+  )
+}
+
+export default DetectorMenu

frontend/components/navigation/FloorNavigation.tsx

@@ -0,0 +1,206 @@
+'use client'
+
+import React, { useState } from 'react'
+
+interface DetectorsDataType {
+  detectors: Record<string, DetectorType>
+}
+
+interface FloorNavigationProps {
+  objectId?: string
+  detectorsData: DetectorsDataType
+  onDetectorMenuClick: (detector: DetectorType) => void
+  onClose?: () => void
+}
+
+interface DetectorType {
+  detector_id: number
+  name: string
+  object: string
+  status: string
+  checked: boolean
+  type: string
+  location: string
+  floor: number
+  notifications: Array<{
+    id: number
+    type: string
+    message: string
+    timestamp: string
+    acknowledged: boolean
+    priority: string
+  }>
+}
+
+const FloorNavigation: React.FC<FloorNavigationProps> = ({ objectId, detectorsData, onDetectorMenuClick, onClose }) => {
+  const [expandedFloors, setExpandedFloors] = useState<Set<number>>(new Set())
+  const [searchTerm, setSearchTerm] = useState('')
+
+  // конвертация детекторов в array и фильтруем по objectId и тексту запроса
+  const detectorsArray = Object.values(detectorsData.detectors) as DetectorType[]
+  let filteredDetectors = objectId 
+    ? detectorsArray.filter(detector => detector.object === objectId)
+    : detectorsArray
+  
+  // Фильтр-поиск
+  if (searchTerm) {
+    filteredDetectors = filteredDetectors.filter(detector => 
+      detector.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      detector.location.toLowerCase().includes(searchTerm.toLowerCase())
+    )
+  }
+
+  // Группиовка детекторов по этажам
+  const detectorsByFloor = filteredDetectors.reduce((acc, detector) => {
+    const floor = detector.floor
+    if (!acc[floor]) {
+      acc[floor] = []
+    }
+    acc[floor].push(detector)
+    return acc
+  }, {} as Record<number, DetectorType[]>)
+
+  // Сортировка этажей
+  const sortedFloors = Object.keys(detectorsByFloor)
+    .map(Number)
+    .sort((a, b) => a - b)
+
+  const toggleFloor = (floor: number) => {
+    const newExpanded = new Set(expandedFloors)
+    if (newExpanded.has(floor)) {
+      newExpanded.delete(floor)
+    } else {
+      newExpanded.add(floor)
+    }
+    setExpandedFloors(newExpanded)
+  }
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case '#b3261e': return 'bg-red-500'
+      case '#fd7c22': return 'bg-orange-500'
+      case '#00ff00': return 'bg-green-500'
+      default: return 'bg-gray-500'
+    }
+  }
+
+  const getStatusText = (status: string) => {
+    switch (status) {
+      case '#b3261e': return 'Критический'
+      case '#fd7c22': return 'Предупреждение'
+      case '#00ff00': return 'Норма'
+      default: return 'Неизвестно'
+    }
+  }
+
+  const handleDetectorMenuClick = (detector: DetectorType) => {
+    onDetectorMenuClick(detector)
+  }
+
+  return (
+    <div className="w-full max-w-2xl"> 
+      <div className="bg-[rgb(22,24,36)] rounded-[12px] p-4 space-y-4">
+        <div className="flex items-center justify-between">
+          <h2 className="text-white text-2xl font-semibold">Навигация по этажам</h2>
+          {onClose && (
+            <button 
+              onClick={onClose}
+              className="text-white hover:text-gray-300 transition-colors"
+            >
+              <svg className="w-6 h-6" 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="flex items-center gap-3">
+          <div className="flex-1 relative">
+            <input
+              type="text"
+              placeholder="Поиск детекторов..."
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className="w-full bg-[rgb(27,30,40)] text-white placeholder-gray-400 px-4 py-2 rounded-lg border border-gray-600 focus:border-blue-500 focus:outline-none"
+            />
+            <svg className="absolute right-3 top-2.5 w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+            </svg>
+          </div>
+          <button className="bg-[rgb(27,29,41)] hover:bg-[rgb(37,39,51)] text-white px-4 py-2 rounded-lg 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 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4" />
+            </svg>
+            Фильтр
+          </button>
+        </div>
+ 
+        <div className="space-y-2">
+          {sortedFloors.map(floor => {
+            const floorDetectors = detectorsByFloor[floor]
+            const isExpanded = expandedFloors.has(floor)
+            
+            return (
+              <div key={floor} className="bg-[rgb(27,30,40)] rounded-lg overflow-hidden">
+                <button
+                  onClick={() => toggleFloor(floor)}
+                  className="w-full px-4 py-3 flex items-center justify-between hover:bg-[rgb(53,58,70)] transition-colors"
+                >
+                  <div className="flex items-center gap-3">
+                    <span className="text-white font-medium">{floor} этаж</span>
+                    <span className="text-gray-400 text-sm">({floorDetectors.length} детекторов)</span>
+                  </div>
+                  <svg 
+                    className={`w-5 h-5 text-gray-400 transition-transform ${
+                      isExpanded ? 'rotate-180' : ''
+                    }`} 
+                    fill="none" 
+                    stroke="currentColor" 
+                    viewBox="0 0 24 24"
+                  >
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                  </svg>
+                </button>
+
+                {/* суб-меню с детекторами */}
+                {isExpanded && (
+                  <div className="px-4 pb-3 space-y-2">
+                    {floorDetectors.map(detector => (
+                      <div 
+                        key={detector.detector_id} 
+                        className="bg-[rgb(53,58,70)] rounded-md p-3 flex items-center justify-between"
+                      >
+                        <div className="flex-1">
+                          <div className="text-white text-sm font-medium">{detector.name}</div>
+                          <div className="text-gray-400 text-xs">{detector.location}</div>
+                        </div>
+                        <div className="flex items-center gap-2">
+                          <div className={`w-3 h-3 rounded-full ${getStatusColor(detector.status)}`}></div>
+                          <span className="text-xs text-gray-300">{getStatusText(detector.status)}</span>
+                          {detector.checked && (
+                            <svg className="w-4 h-4 text-green-400" fill="currentColor" viewBox="0 0 20 20">
+                              <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                            </svg>
+                          )} 
+                          <button
+                            onClick={() => handleDetectorMenuClick(detector)}
+                            className="w-6 h-6 bg-[rgb(27,29,41)] hover:bg-[rgb(37,39,51)] rounded-full flex items-center justify-center transition-colors relative"
+                          >
+                            <div className="w-2 h-2 bg-white rounded-full"></div>
+                          </button>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            )
+          })}
+        </div>
+      </div>
+      
+    </div>
+  )
+}
+
+export default FloorNavigation

frontend/components/navigation/Monitoring.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import Image from 'next/image';
+
+interface MonitoringProps {
+  objectId?: string;
+  onClose?: () => void;
+}
+
+const Monitoring: React.FC<MonitoringProps> = ({ onClose }) => {
+  return (
+    <div className="w-full"> 
+      <div className="bg-[rgb(22,24,36)] rounded-[12px] p-4 space-y-4"> 
+        <div className="flex items-center justify-between">
+          <h2 className="text-white text-2xl font-semibold">Зоны мониторинга</h2>
+          {onClose && (
+            <button 
+              onClick={onClose}
+              className="text-white hover:text-gray-300 transition-colors"
+            >
+              <svg className="w-6 h-6" 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="bg-[rgb(158,168,183)] rounded-lg p-3 h-[200px] flex items-center justify-center">
+          <div className="w-full h-full bg-gray-300 rounded flex items-center justify-center">
+            <Image 
+              src="/images/test_image.png"
+              alt="Object Model"
+              width={200}
+              height={200}
+              className="max-w-full max-h-full object-contain"
+              style={{ height: 'auto' }}
+              onError={(e) => {
+                const target = e.target as HTMLImageElement;
+                target.style.display = 'none';
+              }}
+            />
+          </div>
+        </div>
+ 
+        <div className="grid grid-cols-2 gap-3">
+          {[1, 2, 3, 4, 5, 6].map((zone) => (
+            <div key={zone} className="flex-1 bg-gray-300 rounded-lg h-[120px] flex items-center justify-center">
+              <div className="w-full h-full bg-gray-200 rounded flex items-center justify-center">
+                <Image 
+                  src="/images/test_image.png"
+                  alt={`Зона ${zone}`}
+                  width={120}
+                  height={120}
+                  className="max-w-full max-h-full object-contain opacity-50"
+                  style={{ height: 'auto' }}
+                  onError={(e) => {
+                    const target = e.target as HTMLImageElement;
+                    target.style.display = 'none';
+                  }}
+                />
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Monitoring;