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

переделана логика загрузки модели, замена страницы Объекты на другой внешний вид, добавление в меню пункта Объекты

Browse Source
This commit is contained in:
Aliaksandr Shumski
2026-02-03 19:00:02 +03:00
parent 458222817e
commit 5e58f6ef76
24 changed files with 3514 additions and 1161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

329
frontend/components/alerts/DetectorList.tsx — копия 2 Normal file
View File

@@ -0,0 +1,329 @@
'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 w-12">
<input
type="checkbox"
checked={selectedDetectors.length === currentDetectors.length && currentDetectors.length > 0}
onChange={(e) => {
if (e.target.checked) {
currentDetectors.forEach(detector => {
if (!selectedDetectors.includes(detector.detector_id)) {
onDetectorSelect(detector.detector_id, true)
}
})
} else {
currentDetectors.forEach(detector => {
if (selectedDetectors.includes(detector.detector_id)) {
onDetectorSelect(detector.detector_id, false)
}
})
}
}}
className="w-4 h-4 text-blue-600 bg-gray-700 border-gray-600 rounded focus:ring-blue-500 focus:ring-2"
/>
</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>
{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">
<input
type="checkbox"
checked={isSelected}
onChange={(e) => onDetectorSelect(detector.detector_id, e.target.checked)}
className="w-4 h-4 text-blue-600 bg-gray-700 border-gray-600 rounded focus:ring-blue-500 focus:ring-2"
/>
</td>
<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