New api and zone management; highligh occlusion and highlighAll functionality; improved search in reports and alerts history + autofill; refactored alert panel

frontend/components/alerts/AlertsList.tsx

@@ -0,0 +1,145 @@
+import React, { useState, useMemo } from 'react'
+
+interface AlertItem {
+  id: number
+  type: string
+  message: string
+  timestamp: string
+  acknowledged: boolean
+  priority: string
+  detector_id?: string
+  detector_name?: string
+  location?: string
+  object?: string
+}
+
+interface AlertsListProps {
+  alerts: AlertItem[]
+  onAcknowledgeToggle: (alertId: number) => void
+  initialSearchTerm?: string
+}
+
+const AlertsList: React.FC<AlertsListProps> = ({ alerts, onAcknowledgeToggle, initialSearchTerm = '' }) => {
+  const [searchTerm, setSearchTerm] = useState(initialSearchTerm)
+
+  const filteredAlerts = useMemo(() => {
+    return alerts.filter(alert => { 
+      const matchesSearch = searchTerm === '' || alert.detector_id?.toString() === searchTerm
+      return matchesSearch 
+    })
+  }, [alerts, searchTerm])
+
+  const getStatusColor = (type: string) => {
+    switch (type) {
+      case 'critical': return '#b3261e'
+      case 'warning': return '#fd7c22'
+      case 'info': return '#00ff00'
+      default: return '#666'
+    }
+  }
+  
+  return (
+    <div className="space-y-6">
+      {/* Поиск */}
+      <div className="flex items-center justify-end gap-4 mb-6">
+        <div className="relative">
+          <input
+            type="text"
+            placeholder="Поиск по ID детектора..."
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            className="bg-[#161824] text-white placeholder-gray-400 px-4 py-2 rounded-lg border border-gray-600 focus:border-blue-500 focus:outline-none w-64"
+          />
+          <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>
+      </div>
+
+      {/* Таблица алертов */}
+      <div className="bg-[#161824] rounded-[20px] p-6">
+        <div className="mb-4 flex items-center justify-between">
+          <h2 className="text-xl font-semibold text-white">История тревог</h2>
+          <span className="text-sm text-gray-400">Всего: {filteredAlerts.length}</span>
+        </div>
+        <div className="overflow-x-auto">
+          <table className="w-full">
+            <thead>
+              <tr className="border-b border-gray-700">
+                <th className="text-left text-white font-medium py-3">Детектор</th>
+                <th className="text-left text-white font-medium py-3">Статус</th>
+                <th className="text-left text-white font-medium py-3">Сообщение</th>
+                <th className="text-left text-white font-medium py-3">Местоположение</th>
+                <th className="text-left text-white font-medium py-3">Приоритет</th>
+                <th className="text-left text-white font-medium py-3">Подтверждено</th>
+                <th className="text-left text-white font-medium py-3">Время</th>
+              </tr>
+            </thead>
+            <tbody>
+              {filteredAlerts.map((item) => (
+                <tr key={item.id} className="border-b border-gray-700 hover:bg-gray-800/50 transition-colors">
+                  <td className="py-4">
+                    <div className="text-sm font-medium text-white">{item.detector_name || 'Детектор'}</div>
+                    {item.detector_id ? (
+                      <div className="text-sm text-gray-400">ID: {item.detector_id}</div>
+                    ) : null}
+                  </td>
+                  <td className="py-4">
+                    <div className="flex items-center gap-2">
+                      <div 
+                        className="w-3 h-3 rounded-full"
+                        style={{ backgroundColor: getStatusColor(item.type) }}
+                      ></div>
+                      <span className="text-sm text-gray-300">
+                        {item.type === 'critical' ? 'Критический' : item.type === 'warning' ? 'Предупреждение' : 'Информация'}
+                      </span>
+                    </div>
+                  </td>
+                  <td className="py-4">
+                    <div className="text-sm text-white">{item.message}</div>
+                  </td>
+                  <td className="py-4">
+                    <div className="text-sm text-white">{item.location || '-'}</div>
+                  </td>
+                  <td className="py-4">
+                    <span 
+                      className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium text-white"
+                      style={{ backgroundColor: item.priority === 'high' ? '#b3261e' : item.priority === 'medium' ? '#fd7c22' : '#00ff00' }}
+                    >
+                      {item.priority === 'high' ? 'Высокий' : item.priority === 'medium' ? 'Средний' : 'Низкий'}
+                    </span>
+                  </td>
+                  <td className="py-4">
+                    <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
+                      item.acknowledged ? 'bg-green-600/20 text-green-300 ring-1 ring-green-600/40' : 'bg-red-600/20 text-red-300 ring-1 ring-red-600/40'
+                    }`}>
+                      {item.acknowledged ? 'Да' : 'Нет'}
+                    </span>
+                    <button
+                      onClick={() => onAcknowledgeToggle(item.id)}
+                      className="ml-2 inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-[#2a2e3e] text-white hover:bg-[#353a4d]"
+                    >
+                      {item.acknowledged ? 'Снять' : 'Подтвердить'}
+                    </button>
+                  </td>
+                  <td className="py-4">
+                    <div className="text-sm text-gray-300">{new Date(item.timestamp).toLocaleString('ru-RU')}</div>
+                  </td>
+                </tr>
+              ))}
+              {filteredAlerts.length === 0 && (
+                <tr>
+                  <td colSpan={7} className="py-8 text-center text-gray-400">
+                    Записей не найдено
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default AlertsList

frontend/components/alerts/DetectorList.tsx

@@ -31,18 +31,16 @@ interface RawDetector {
   }>
 }
 
-type FilterType = 'all' | 'critical' | 'warning' | 'normal'
-
 interface DetectorListProps {
   objectId?: string
   selectedDetectors: number[]
   onDetectorSelect: (detectorId: number, selected: boolean) => void
+  initialSearchTerm?: string
 }
 
-const DetectorList: React.FC<DetectorListProps> = ({ objectId, selectedDetectors, onDetectorSelect }) => {
+const DetectorList: React.FC<DetectorListProps> = ({ objectId, selectedDetectors, onDetectorSelect, initialSearchTerm = '' }) => {
   const [detectors, setDetectors] = useState<Detector[]>([])
-  const [selectedFilter, setSelectedFilter] = useState<FilterType>('all')
-  const [searchTerm, setSearchTerm] = useState<string>('')
+  const [searchTerm, setSearchTerm] = useState<string>(initialSearchTerm)
 
   useEffect(() => {
     const loadDetectors = async () => {
@@ -72,14 +70,8 @@ const DetectorList: React.FC<DetectorListProps> = ({ objectId, selectedDetectors
     loadDetectors()
   }, [objectId])
  
-  const filteredDetectors = detectors.filter(detector => {
-    const matchesSearch = detector.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-                         detector.location.toLowerCase().includes(searchTerm.toLowerCase())
-    
-    if (selectedFilter === 'all') return matchesSearch
-    if (selectedFilter === 'critical') return matchesSearch && detector.status === '#b3261e'
-    if (selectedFilter === 'warning') return matchesSearch && detector.status === '#fd7c22'
-    if (selectedFilter === 'normal') return matchesSearch && detector.status === '#00ff00'
+  const filteredDetectors = detectors.filter(detector => { 
+    const matchesSearch = searchTerm === '' || detector.detector_id.toString() === searchTerm
     
     return matchesSearch
   })
@@ -88,53 +80,13 @@ const DetectorList: React.FC<DetectorListProps> = ({ objectId, selectedDetectors
     <div className="space-y-6">
       <div className="flex items-center justify-between gap-4">
         <div className="flex items-center gap-3">
-          <button
-            onClick={() => setSelectedFilter('all')}
-            className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
-              selectedFilter === 'all'
-                ? 'bg-blue-600 text-white'
-                : 'bg-[#161824] text-gray-300 hover:bg-[#1f2937]'
-            }`}
-          >
-            Все ({detectors.length})
-          </button>
-          <button
-            onClick={() => setSelectedFilter('critical')}
-            className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
-              selectedFilter === 'critical'
-                ? 'bg-red-600 text-white'
-                : 'bg-[#161824] text-gray-300 hover:bg-[#1f2937]'
-            }`}
-          >
-            Критические ({detectors.filter(d => d.status === '#b3261e').length})
-          </button>
-          <button
-            onClick={() => setSelectedFilter('warning')}
-            className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
-              selectedFilter === 'warning'
-                ? 'bg-orange-600 text-white'
-                : 'bg-[#161824] text-gray-300 hover:bg-[#1f2937]'
-            }`}
-          >
-            Предупреждения ({detectors.filter(d => d.status === '#fd7c22').length})
-          </button>
-          <button
-            onClick={() => setSelectedFilter('normal')}
-            className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
-              selectedFilter === 'normal'
-                ? 'bg-green-600 text-white'
-                : 'bg-[#161824] text-gray-300 hover:bg-[#1f2937]'
-            }`}
-          >
-            Норма ({detectors.filter(d => d.status === '#00ff00').length})
-          </button>
         </div>
         
         <div className="flex items-center gap-3">
           <div className="relative">
             <input
               type="text"
-              placeholder="Поиск детекторов..."
+              placeholder="Поиск по ID детектора..."
               value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
               className="bg-[#161824] text-white placeholder-gray-400 px-4 py-2 rounded-lg border border-gray-600 focus:border-blue-500 focus:outline-none w-64"