103 lines
3.8 KiB
TypeScript
103 lines
3.8 KiB
TypeScript
'use client'
|
||
|
||
import React, { useState, useEffect } from 'react'
|
||
import { useRouter, useSearchParams } from 'next/navigation'
|
||
import Sidebar from '../../../components/ui/Sidebar'
|
||
import useNavigationStore from '../../store/navigationStore'
|
||
import DetectorList from '../../../components/alerts/DetectorList'
|
||
import ExportMenu from '../../../components/ui/ExportMenu'
|
||
|
||
const AlertsPage: React.FC = () => {
|
||
const router = useRouter()
|
||
const searchParams = useSearchParams()
|
||
const { currentObject, setCurrentObject } = useNavigationStore()
|
||
const [selectedDetectors, setSelectedDetectors] = useState<number[]>([])
|
||
|
||
const urlObjectId = searchParams.get('objectId')
|
||
const urlObjectTitle = searchParams.get('objectTitle')
|
||
const objectId = currentObject.id || urlObjectId
|
||
const objectTitle = currentObject.title || urlObjectTitle
|
||
|
||
useEffect(() => {
|
||
if (urlObjectId && urlObjectTitle && (!currentObject.id || currentObject.id !== urlObjectId)) {
|
||
setCurrentObject(urlObjectId, urlObjectTitle)
|
||
}
|
||
}, [urlObjectId, urlObjectTitle, currentObject.id, setCurrentObject])
|
||
|
||
const handleBackClick = () => {
|
||
router.push('/dashboard')
|
||
}
|
||
|
||
const handleDetectorSelect = (detectorId: number, selected: boolean) => {
|
||
if (selected) {
|
||
setSelectedDetectors(prev => [...prev, detectorId])
|
||
} else {
|
||
setSelectedDetectors(prev => prev.filter(id => id !== detectorId))
|
||
}
|
||
}
|
||
|
||
const handleExport = (format: 'csv' | 'pdf') => {
|
||
// TODO: добавить функционал по экспорту
|
||
console.log(`Exporting ${selectedDetectors.length} items as ${format}`)
|
||
}
|
||
|
||
|
||
|
||
return (
|
||
<div className="flex h-screen bg-[#0e111a]">
|
||
<Sidebar
|
||
activeItem={8} // История тревог
|
||
/>
|
||
|
||
<div className="flex-1 flex flex-col">
|
||
<header className="bg-[#161824] border-b border-gray-700 px-6 py-4">
|
||
<div className="flex items-center gap-4">
|
||
<button
|
||
onClick={handleBackClick}
|
||
className="text-gray-400 hover:text-white transition-colors"
|
||
aria-label="Назад к дашборду"
|
||
>
|
||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
||
</svg>
|
||
</button>
|
||
<nav className="flex items-center gap-2 text-sm">
|
||
<span className="text-gray-400">Дашборд</span>
|
||
<span className="text-gray-600">/</span>
|
||
<span className="text-white">{objectTitle || 'Объект'}</span>
|
||
<span className="text-gray-600">/</span>
|
||
<span className="text-white">Уведомления</span>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<div className="flex-1 p-6 overflow-auto">
|
||
<div className="mb-6">
|
||
<div className="flex items-center justify-between mb-6">
|
||
<h1 className="text-white text-2xl font-semibold">Уведомления и тревоги</h1>
|
||
|
||
<div className="flex items-center gap-4">
|
||
{/* Кол-во выбранных объектов */}
|
||
{selectedDetectors.length > 0 && (
|
||
<span className="text-gray-300 text-sm">
|
||
Выбрано: <span className="text-white font-medium">{selectedDetectors.length}</span>
|
||
</span>
|
||
)}
|
||
|
||
<ExportMenu onExport={handleExport} />
|
||
</div>
|
||
</div>
|
||
|
||
<DetectorList
|
||
objectId={objectId || undefined}
|
||
selectedDetectors={selectedDetectors}
|
||
onDetectorSelect={handleDetectorSelect}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default AlertsPage |