126 lines
4.3 KiB
TypeScript
126 lines
4.3 KiB
TypeScript
'use client'
|
||
|
||
import React, { useState, useEffect } from 'react'
|
||
import ObjectGallery from '../../../components/objects/ObjectGallery'
|
||
import { ObjectData } from '../../../components/objects/ObjectCard'
|
||
import Sidebar from '../../../components/ui/Sidebar'
|
||
import detectorsData from '../../../data/detectors.json'
|
||
|
||
// Интерфейс для данных объекта из JSON
|
||
interface RawObjectData {
|
||
name: string
|
||
title: string
|
||
description: string
|
||
image?: string
|
||
location: string
|
||
address: string
|
||
floors: number
|
||
area: number
|
||
type?: string
|
||
status?: string
|
||
zones: Array<{
|
||
zone_id: string
|
||
name: string
|
||
detectors: number[]
|
||
}>
|
||
}
|
||
|
||
// Функция для преобразования данных объекта из JSON
|
||
const transformObjectToObjectData = (objectId: string, objectData: RawObjectData): ObjectData => {
|
||
return {
|
||
object_id: objectId,
|
||
title: objectData.title || `Объект ${objectId}`,
|
||
description: objectData.description || `Описание объекта ${objectData.title || objectId}`,
|
||
image: objectData.image || '/images/default-object.jpg',
|
||
location: objectData.location || 'Не указано',
|
||
floors: objectData.floors,
|
||
area: objectData.area.toString(),
|
||
type: objectData.type || 'object',
|
||
status: objectData.status || 'active'
|
||
}
|
||
}
|
||
|
||
const ObjectsPage: React.FC = () => {
|
||
const [objects, setObjects] = useState<ObjectData[]>([])
|
||
const [loading, setLoading] = useState(true)
|
||
const [error, setError] = useState<string | null>(null)
|
||
const [selectedObjectId, setSelectedObjectId] = useState<string | null>(null)
|
||
|
||
useEffect(() => {
|
||
const loadData = () => {
|
||
try {
|
||
setLoading(true)
|
||
|
||
if (detectorsData.objects) {
|
||
const transformedObjects = Object.entries(detectorsData.objects).map(
|
||
([objectId, objectData]) => transformObjectToObjectData(objectId, objectData)
|
||
)
|
||
setObjects(transformedObjects)
|
||
} else {
|
||
throw new Error('Не удалось получить данные объектов')
|
||
}
|
||
} catch (err) {
|
||
console.error('Ошибка при загрузке данных:', err)
|
||
setError(err instanceof Error ? err.message : 'Произошла неизвестная ошибка')
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}
|
||
|
||
loadData()
|
||
}, [])
|
||
|
||
const handleObjectSelect = (objectId: string) => {
|
||
console.log('Object selected:', objectId)
|
||
setSelectedObjectId(objectId)
|
||
}
|
||
|
||
if (loading) {
|
||
return (
|
||
<div className="flex items-center justify-center min-h-screen bg-[#0e111a]">
|
||
<div className="text-center">
|
||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mx-auto mb-4"></div>
|
||
<p className="text-white">Загрузка объектов...</p>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
if (error) {
|
||
return (
|
||
<div className="flex items-center justify-center min-h-screen bg-[#0e111a]">
|
||
<div className="text-center">
|
||
<div className="text-red-500 mb-4">
|
||
<svg className="w-12 h-12 mx-auto" fill="currentColor" viewBox="0 0 24 24">
|
||
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
|
||
</svg>
|
||
</div>
|
||
<h3 className="text-lg font-medium text-white mb-2">Ошибка загрузки</h3>
|
||
<p className="text-[#71717a] mb-4">{error}</p>
|
||
<button
|
||
onClick={() => window.location.reload()}
|
||
className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-[#3193f5] hover:bg-[#2563eb] focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition-colors duration-200"
|
||
>
|
||
Попробовать снова
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<div className="flex h-screen bg-[#0e111a]">
|
||
<Sidebar activeItem={null} />
|
||
<div className="flex-1 overflow-hidden">
|
||
<ObjectGallery
|
||
objects={objects}
|
||
title="Объекты"
|
||
onObjectSelect={handleObjectSelect}
|
||
selectedObjectId={selectedObjectId}
|
||
/>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default ObjectsPage |