sysadminix/aerbim-ht-monitor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
iv_vuytsik
2025-12-25 03:10:21 +03:00
parent 31030f2997
commit ce7e39debf
36 changed files with 1562 additions and 472 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
frontend/components/alerts/DetectorList.tsx
View File

@@ -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"