300 lines
12 KiB
TypeScript
300 lines
12 KiB
TypeScript
'use client'
|
||
|
||
import React, { useState, useEffect } from 'react'
|
||
import * as statusColors from '../../lib/statusColors'
|
||
|
||
interface Detector {
|
||
detector_id: number
|
||
name: string
|
||
location: string
|
||
status: string
|
||
object: string
|
||
floor: number
|
||
checked: boolean
|
||
}
|
||
|
||
interface RawDetector {
|
||
detector_id: number
|
||
name: string
|
||
object: string
|
||
status: string
|
||
type: string
|
||
detector_type: string
|
||
location: string
|
||
floor: number
|
||
notifications: Array<{
|
||
id: number
|
||
type: string
|
||
message: string
|
||
timestamp: string
|
||
acknowledged: boolean
|
||
priority: string
|
||
}>
|
||
}
|
||
|
||
interface DetectorListProps {
|
||
objectId?: string
|
||
selectedDetectors: number[]
|
||
onDetectorSelect: (detectorId: number, selected: boolean) => void
|
||
initialSearchTerm?: string
|
||
}
|
||
|
||
// Функция для генерации умного диапазона страниц
|
||
function getPaginationRange(currentPage: number, totalPages: number): (number | string)[] {
|
||
if (totalPages <= 7) {
|
||
// Если страниц мало - показываем все
|
||
return Array.from({ length: totalPages }, (_, i) => i + 1)
|
||
}
|
||
|
||
// Всегда показываем первые 3 и последние 3
|
||
const start = [1, 2, 3]
|
||
const end = [totalPages - 2, totalPages - 1, totalPages]
|
||
|
||
if (currentPage <= 4) {
|
||
// Начало: 1 2 3 4 5 ... 11 12 13
|
||
return [1, 2, 3, 4, 5, '...', ...end]
|
||
}
|
||
|
||
if (currentPage >= totalPages - 3) {
|
||
// Конец: 1 2 3 ... 9 10 11 12 13
|
||
return [...start, '...', totalPages - 4, totalPages - 3, totalPages - 2, totalPages - 1, totalPages]
|
||
}
|
||
|
||
// Середина: 1 2 3 ... 6 7 8 ... 11 12 13
|
||
return [...start, '...', currentPage - 1, currentPage, currentPage + 1, '...', ...end]
|
||
}
|
||
|
||
const DetectorList: React.FC<DetectorListProps> = ({ objectId, selectedDetectors, onDetectorSelect, initialSearchTerm = '' }) => {
|
||
const [detectors, setDetectors] = useState<Detector[]>([])
|
||
const [searchTerm, setSearchTerm] = useState<string>(initialSearchTerm)
|
||
const [currentPage, setCurrentPage] = useState(1)
|
||
const itemsPerPage = 20
|
||
|
||
useEffect(() => {
|
||
const loadDetectors = async () => {
|
||
try {
|
||
const res = await fetch('/api/get-detectors', { cache: 'no-store' })
|
||
if (!res.ok) return
|
||
const payload = await res.json()
|
||
const detectorsData: Record<string, RawDetector> = payload?.data?.detectors ?? {}
|
||
const rawArray: RawDetector[] = Object.values(detectorsData).filter(
|
||
(detector) => (objectId ? detector.object === objectId : true)
|
||
)
|
||
const normalized: Detector[] = rawArray.map((d) => ({
|
||
detector_id: d.detector_id,
|
||
name: d.name,
|
||
location: d.location,
|
||
status: d.status,
|
||
object: d.object,
|
||
floor: d.floor,
|
||
checked: false,
|
||
}))
|
||
console.log('[DetectorList] Payload:', payload)
|
||
setDetectors(normalized)
|
||
} catch (e) {
|
||
console.error('Failed to load detectors:', e)
|
||
}
|
||
}
|
||
loadDetectors()
|
||
}, [objectId])
|
||
|
||
const filteredDetectors = detectors.filter(detector => {
|
||
const matchesSearch = searchTerm === '' || detector.detector_id.toString() === searchTerm
|
||
|
||
return matchesSearch
|
||
})
|
||
|
||
// Сброс на первую страницу при изменении поиска
|
||
useEffect(() => {
|
||
setCurrentPage(1)
|
||
}, [searchTerm])
|
||
|
||
// Пагинация
|
||
const totalPages = Math.ceil(filteredDetectors.length / itemsPerPage)
|
||
const startIndex = (currentPage - 1) * itemsPerPage
|
||
const endIndex = startIndex + itemsPerPage
|
||
const currentDetectors = filteredDetectors.slice(startIndex, endIndex)
|
||
const paginationRange = getPaginationRange(currentPage, totalPages)
|
||
|
||
const handlePageChange = (page: number) => {
|
||
setCurrentPage(page)
|
||
// Скролл наверх таблицы
|
||
window.scrollTo({ top: 0, behavior: 'smooth' })
|
||
}
|
||
|
||
return (
|
||
<div className="space-y-6">
|
||
<div className="flex items-center justify-between gap-4">
|
||
<div className="flex items-center gap-3">
|
||
</div>
|
||
|
||
<div className="flex items-center gap-3">
|
||
<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 text-sm font-medium"
|
||
style={{ fontFamily: 'Inter, sans-serif' }}
|
||
/>
|
||
<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>
|
||
|
||
{/* Таблица детекторов */}
|
||
<div className="bg-[#161824] rounded-[20px] p-6">
|
||
<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>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{currentDetectors.map((detector) => {
|
||
const isSelected = selectedDetectors.includes(detector.detector_id)
|
||
|
||
return (
|
||
<tr key={detector.detector_id} className="border-b border-gray-800">
|
||
<td className="py-3 text-white text-sm">{detector.name}</td>
|
||
<td className="py-3">
|
||
<div className="flex items-center gap-2">
|
||
<div
|
||
className="w-3 h-3 rounded-full"
|
||
style={{ backgroundColor: detector.status }}
|
||
></div>
|
||
<span className="text-sm text-gray-300">
|
||
{detector.status === statusColors.STATUS_COLOR_CRITICAL
|
||
? 'Критическое'
|
||
: detector.status === statusColors.STATUS_COLOR_WARNING
|
||
? 'Предупреждение'
|
||
: 'Норма'}
|
||
</span>
|
||
</div>
|
||
</td>
|
||
<td className="py-3 text-gray-400 text-sm">{detector.location}</td>
|
||
<td className="py-3">
|
||
{detector.checked ? (
|
||
<div className="flex items-center gap-1">
|
||
<svg className="w-4 h-4 text-green-500" 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>
|
||
<span className="text-sm text-green-500">Да</span>
|
||
</div>
|
||
) : (
|
||
<span className="text-sm text-gray-500">Нет</span>
|
||
)}
|
||
</td>
|
||
</tr>
|
||
)
|
||
})}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
{/* Пагинация */}
|
||
{totalPages > 1 && (
|
||
<div className="mt-6 flex flex-col items-center gap-4">
|
||
{/* Кнопки пагинации */}
|
||
<div className="flex items-center gap-2">
|
||
{/* Кнопка "Предыдущая" */}
|
||
<button
|
||
onClick={() => handlePageChange(currentPage - 1)}
|
||
disabled={currentPage === 1}
|
||
className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
|
||
currentPage === 1
|
||
? 'text-gray-600 cursor-not-allowed'
|
||
: 'text-gray-300 hover:text-white hover:bg-[#1E293B]'
|
||
}`}
|
||
>
|
||
← Предыдущая
|
||
</button>
|
||
|
||
{/* Номера страниц */}
|
||
{paginationRange.map((page, index) => {
|
||
if (page === '...') {
|
||
return (
|
||
<span key={`ellipsis-${index}`} className="px-3 py-2 text-gray-500">
|
||
...
|
||
</span>
|
||
)
|
||
}
|
||
|
||
const pageNumber = page as number
|
||
const isActive = pageNumber === currentPage
|
||
|
||
return (
|
||
<button
|
||
key={pageNumber}
|
||
onClick={() => handlePageChange(pageNumber)}
|
||
className={`min-w-[40px] px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
|
||
isActive
|
||
? 'bg-blue-500 text-white'
|
||
: 'text-gray-300 hover:text-white hover:bg-[#1E293B]'
|
||
}`}
|
||
>
|
||
{pageNumber}
|
||
</button>
|
||
)
|
||
})}
|
||
|
||
{/* Кнопка "Следующая" */}
|
||
<button
|
||
onClick={() => handlePageChange(currentPage + 1)}
|
||
disabled={currentPage === totalPages}
|
||
className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
|
||
currentPage === totalPages
|
||
? 'text-gray-600 cursor-not-allowed'
|
||
: 'text-gray-300 hover:text-white hover:bg-[#1E293B]'
|
||
}`}
|
||
>
|
||
Следующая →
|
||
</button>
|
||
</div>
|
||
|
||
{/* Счётчик */}
|
||
<div className="text-sm text-gray-400">
|
||
Показано {startIndex + 1}-{Math.min(endIndex, filteredDetectors.length)} из {filteredDetectors.length} датчиков
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Статы детекторов */}
|
||
<div className="mt-6 grid grid-cols-4 gap-4">
|
||
<div className="bg-[#161824] p-4 rounded-lg">
|
||
<div className="text-2xl font-bold text-white">{filteredDetectors.length}</div>
|
||
<div className="text-sm text-gray-400">Всего</div>
|
||
</div>
|
||
<div className="bg-[#161824] p-4 rounded-lg">
|
||
<div className="text-2xl font-bold text-green-500">{filteredDetectors.filter(d => d.status === statusColors.STATUS_COLOR_NORMAL).length}</div>
|
||
<div className="text-sm text-gray-400">Норма</div>
|
||
</div>
|
||
<div className="bg-[#161824] p-4 rounded-lg">
|
||
<div className="text-2xl font-bold text-orange-500">{filteredDetectors.filter(d => d.status === statusColors.STATUS_COLOR_WARNING).length}</div>
|
||
<div className="text-sm text-gray-400">Предупреждения</div>
|
||
</div>
|
||
<div className="bg-[#161824] p-4 rounded-lg">
|
||
<div className="text-2xl font-bold text-red-500">{filteredDetectors.filter(d => d.status === statusColors.STATUS_COLOR_CRITICAL).length}</div>
|
||
<div className="text-sm text-gray-400">Критические</div>
|
||
</div>
|
||
</div>
|
||
|
||
{filteredDetectors.length === 0 && (
|
||
<div className="text-center py-8">
|
||
<p className="text-gray-400">Детекторы не найдены</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default DetectorList
|