Linking backend data to frontend

2025-10-15 19:49:19 +03:00
parent ea1f50c1b8
commit 2b19ed246b
28 changed files with 959 additions and 385 deletions
--- a/frontend/app/(protected)/alerts/page.tsx
+++ b/frontend/app/(protected)/alerts/page.tsx
@@ -6,12 +6,28 @@ import Sidebar from '../../../components/ui/Sidebar'
 import useNavigationStore from '../../store/navigationStore'
 import DetectorList from '../../../components/alerts/DetectorList'
 import ExportMenu from '../../../components/ui/ExportMenu'
+import { useSession } from 'next-auth/react'

 const AlertsPage: React.FC = () => {
  const router = useRouter()
  const searchParams = useSearchParams()
  const { currentObject, setCurrentObject } = useNavigationStore()
  const [selectedDetectors, setSelectedDetectors] = useState<number[]>([])
+  const { data: session } = useSession()
+
+  type AlertItem = {
+    id: number
+    type: string
+    message: string
+    timestamp: string
+    acknowledged: boolean
+    priority: string
+    detector_id?: number
+    detector_name?: string
+    location?: string
+    object?: string
+  }
+  const [alerts, setAlerts] = useState<AlertItem[]>([])

  const urlObjectId = searchParams.get('objectId')
  const urlObjectTitle = searchParams.get('objectTitle')
@@ -24,6 +40,30 @@ const AlertsPage: React.FC = () => {
    }
  }, [urlObjectId, urlObjectTitle, currentObject.id, setCurrentObject])

+  useEffect(() => {
+    const loadAlerts = async () => {
+      try {
+        const params = new URLSearchParams()
+        if (currentObject.id) params.set('objectId', currentObject.id)
+        const res = await fetch(`/api/get-alerts?${params.toString()}`, { cache: 'no-store' })
+        if (!res.ok) return
+        const payload = await res.json()
+        console.log('[AlertsPage] GET /api/get-alerts', {
+          url: `/api/get-alerts?${params.toString()}`,
+          status: res.status,
+          payload,
+        })
+        const data = Array.isArray(payload?.data) ? payload.data : (payload?.data?.alerts || [])
+        console.log('[AlertsPage] parsed alerts:', data)
+        setAlerts(data as AlertItem[])
+      } catch (e) {
+        console.error('Failed to load alerts:', e)
+      }
+    }
+    loadAlerts()
+
+  }, [currentObject.id])
+
  const handleBackClick = () => {
    router.push('/dashboard')
  }
@@ -36,13 +76,39 @@ const AlertsPage: React.FC = () => {
    }
  }

-  const handleExport = (format: 'csv' | 'pdf') => {
-    // TODO: добавить функционал по экспорту
-    console.log(`Exporting ${selectedDetectors.length} items as ${format}`)
+  const handleExport = async (format: 'csv' | 'pdf', hours: number) => {
+    try {
+      const res = await fetch(`/api/get-reports`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          ...(session?.accessToken ? { Authorization: `Bearer ${session.accessToken}` } : {}),
+        },
+        body: JSON.stringify({ format: format, hours }),
+        credentials: 'include',
+      })
+      if (!res.ok) {
+        const errText = await res.text()
+        throw new Error(`Export failed: ${res.status} ${errText}`)
+      }
+      const blob = await res.blob()
+      const contentDisposition = res.headers.get('Content-Disposition') || res.headers.get('content-disposition')
+      const filenameMatch = contentDisposition?.match(/filename="(.+)"/)
+      const timestamp = new Date().toISOString().replace(/[:.]/g, '-').replace(/T/g, '_')
+      const filename = filenameMatch ? filenameMatch[1] : `alerts_report_${timestamp}.${format}`
+      const url = window.URL.createObjectURL(blob)
+      const link = document.createElement('a')
+      link.href = url
+      link.download = filename
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link)
+      window.URL.revokeObjectURL(url)
+    } catch (error) {
+      console.error('Error:', error)
+    }
  }

-
-
  return (
    <div className="flex h-screen bg-[#0e111a]"> 
      <Sidebar 
@@ -77,7 +143,6 @@ const AlertsPage: React.FC = () => {
              <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>
@@ -93,6 +158,81 @@ const AlertsPage: React.FC = () => {
              selectedDetectors={selectedDetectors}
              onDetectorSelect={handleDetectorSelect}
            />
+
+            {/* История тревог */}
+            <div className="mt-6 bg-[#161824] rounded-[20px] p-6">
+              <div className="mb-4 flex items-center justify-between">
+                <h2 className="text-xl font-semibold text-white">История тревог</h2>
+                <span className="text-sm text-gray-400">Всего: {alerts.length}</span>
+              </div>
+              <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>
+                      <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>
+                    {alerts.map((item) => (
+                      <tr key={item.id} className="border-b border-gray-700 hover:bg-gray-800/50 transition-colors">
+                        <td className="py-4">
+                          <div className="text-sm font-medium text-white">{item.detector_name || 'Детектор'}</div>
+                          {item.detector_id ? (
+                            <div className="text-sm text-gray-400">ID: {item.detector_id}</div>
+                          ) : null}
+                        </td>
+                        <td className="py-4">
+                          <div className="flex items-center gap-2">
+                            <div 
+                              className="w-3 h-3 rounded-full"
+                              style={{ backgroundColor: item.type === 'critical' ? '#b3261e' : item.type === 'warning' ? '#fd7c22' : '#00ff00' }}
+                            ></div>
+                            <span className="text-sm text-gray-300">
+                              {item.type === 'critical' ? 'Критический' : item.type === 'warning' ? 'Предупреждение' : 'Информация'}
+                            </span>
+                          </div>
+                        </td>
+                        <td className="py-4">
+                          <div className="text-sm text-white">{item.message}</div>
+                        </td>
+                        <td className="py-4">
+                          <div className="text-sm text-white">{item.location || '-'}</div>
+                        </td>
+                        <td className="py-4">
+                          <span 
+                            className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium text-white"
+                            style={{ backgroundColor: item.priority === 'high' ? '#b3261e' : item.priority === 'medium' ? '#fd7c22' : '#00ff00' }}
+                          >
+                            {item.priority === 'high' ? 'Высокий' : item.priority === 'medium' ? 'Средний' : 'Низкий'}
+                          </span>
+                        </td>
+                        <td className="py-4">
+                          <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
+                            item.acknowledged ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
+                          }`}>
+                            {item.acknowledged ? 'Да' : 'Нет'}
+                          </span>
+                        </td>
+                        <td className="py-4">
+                          <div className="text-sm text-gray-300">{new Date(item.timestamp).toLocaleString('ru-RU')}</div>
+                        </td>
+                      </tr>
+                    ))}
+                    {alerts.length === 0 && (
+                      <tr>
+                        <td colSpan={7} className="py-8 text-center text-gray-400">Записей не найдено</td>
+                      </tr>
+                    )}
+                  </tbody>
+                </table>
+              </div>
+            </div>
          </div>
        </div>
      </div>
--- a/frontend/app/(protected)/navigation/page.tsx
+++ b/frontend/app/(protected)/navigation/page.tsx
@@ -1,6 +1,6 @@
 'use client'

-import React, { useEffect, useCallback } from 'react'
+import React, { useEffect, useCallback, useState } from 'react'
 import { useRouter, useSearchParams } from 'next/navigation' 
 import Sidebar from '../../../components/ui/Sidebar'
 import useNavigationStore from '../../store/navigationStore'
@@ -9,8 +9,16 @@ import FloorNavigation from '../../../components/navigation/FloorNavigation'
 import DetectorMenu from '../../../components/navigation/DetectorMenu'
 import Notifications from '../../../components/notifications/Notifications'
 import NotificationDetectorInfo from '../../../components/notifications/NotificationDetectorInfo'
-import ModelViewer from '../../../components/model/ModelViewer'
-import detectorsData from '../../../data/detectors.json'
+import dynamic from 'next/dynamic'
+
+const ModelViewer = dynamic(() => import('../../../components/model/ModelViewer'), {
+  ssr: false,
+  loading: () => (
+    <div className="w-full h-full flex items-center justify-center bg-[#0e111a]">
+      <div className="text-gray-300 animate-pulse">Загрузка 3D-модуля…</div>
+    </div>
+  ),
+})

 interface DetectorType {
  detector_id: number
@@ -66,7 +74,10 @@ const NavigationPage: React.FC = () => {
    setSelectedNotification,
    setShowNotificationDetectorInfo
  } = useNavigationStore()
-   
+  
+  const [detectorsData, setDetectorsData] = useState<{ detectors: Record<string, DetectorType> }>({ detectors: {} })
+  const [detectorsError, setDetectorsError] = useState<string | null>(null)
+  
  const urlObjectId = searchParams.get('objectId')
  const urlObjectTitle = searchParams.get('objectTitle')
  const objectId = currentObject.id || urlObjectId
@@ -85,6 +96,27 @@ const NavigationPage: React.FC = () => {
    }
  }, [urlObjectId, urlObjectTitle, currentObject.id, setCurrentObject])

+  useEffect(() => {
+    const loadDetectors = async () => {
+      try {
+        setDetectorsError(null)
+        const res = await fetch('/api/get-detectors', { cache: 'no-store' })
+        const text = await res.text()
+        let payload: any
+        try { payload = JSON.parse(text) } catch { payload = text }
+        console.log('[NavigationPage] GET /api/get-detectors', { status: res.status, payload })
+        if (!res.ok) throw new Error(typeof payload === 'string' ? payload : (payload?.error || 'Не удалось получить детекторов'))
+        const data = payload?.data ?? payload
+        const detectors = (data?.detectors ?? {}) as Record<string, DetectorType>
+        setDetectorsData({ detectors })
+      } catch (e: any) {
+        console.error('Ошибка загрузки детекторов:', e)
+        setDetectorsError(e?.message || 'Ошибка при загрузке детекторов')
+      }
+    }
+    loadDetectors()
+  }, [])
+
  const handleBackClick = () => {
    router.push('/dashboard')
  }
@@ -170,6 +202,9 @@ const NavigationPage: React.FC = () => {
                onNotificationClick={handleNotificationClick}
                onClose={closeNotifications}
              />
+              {detectorsError && (
+                <div className="mt-2 text-sm text-red-400">{detectorsError}</div>
+              )}
            </div>
          </div>
        )}
@@ -225,7 +260,7 @@ const NavigationPage: React.FC = () => {
        <div className="flex-1 overflow-hidden">
          <div className="h-full">
            <ModelViewer 
-              modelPath='/models/AerBIM-Monitor_ASM-HT-Viewer_Expo2017Astana_20250908_L_+1430.glb'
+              modelPath='/static-models/AerBIM_Monitor_ASM_HT_Viewer_Expo2017Astana_Level_+1430_custom_prop.glb'
              onModelLoaded={handleModelLoaded}
              onError={handleModelError}
            />
--- a/frontend/app/(protected)/objects/page.tsx
+++ b/frontend/app/(protected)/objects/page.tsx
@@ -4,39 +4,21 @@ 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 => {
+// Универсальная функция для преобразования объекта из бэкенда в ObjectData
+const transformRawToObjectData = (raw: any): ObjectData => {
+  const rawId = raw?.id ?? raw?.object_id ?? raw?.uuid ?? raw?.name
+  const object_id = typeof rawId === 'number' ? `object_${rawId}` : String(rawId ?? '')
  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'
+    object_id,
+    title: raw?.title ?? `Объект ${object_id}`,
+    description: raw?.description ?? `Описание объекта ${raw?.title ?? object_id}`,
+    image: raw?.image ?? '/images/test_image.png',
+    location: raw?.location ?? raw?.address ?? 'Не указано',
+    floors: Number(raw?.floors ?? 0),
+    area: String(raw?.area ?? ''),
+    type: raw?.type ?? 'object',
+    status: raw?.status ?? 'active',
  }
 }

@@ -47,21 +29,37 @@ const ObjectsPage: React.FC = () => {
  const [selectedObjectId, setSelectedObjectId] = useState<string | null>(null)

  useEffect(() => {
-    const loadData = () => {
+    const loadData = async () => {
+      setLoading(true)
+      setError(null)
      try {
-        setLoading(true)
-        
-        if (detectorsData.objects) {
-          const transformedObjects = Object.entries(detectorsData.objects).map(
-            ([objectId, objectData]) => transformObjectToObjectData(objectId, objectData)
-          )
-          setObjects(transformedObjects)
-        } else {
-          throw new Error('Не удалось получить данные объектов')
+        const url = '/api/get-objects'
+        const res = await fetch(url, { cache: 'no-store' })
+        const payloadText = await res.text()
+        let payload: any
+        try { payload = JSON.parse(payloadText) } catch { payload = payloadText }
+        console.log('[ObjectsPage] GET /api/get-objects', { status: res.status, payload })
+
+        if (!res.ok) {
+          throw new Error(typeof payload === 'string' ? payload : (payload?.error || 'Не удалось получить данные объектов'))
        }
-      } catch (err) {
-        console.error('Ошибка при загрузке данных:', err)
-        setError(err instanceof Error ? err.message : 'Произошла неизвестная ошибка')
+
+        const data = (payload?.data ?? payload) as any
+        let rawObjectsArray: any[] = []
+        if (Array.isArray(data)) {
+          rawObjectsArray = data
+        } else if (Array.isArray(data?.objects)) {
+          rawObjectsArray = data.objects
+        } else if (data && typeof data === 'object') {
+          // если приходит как map { id: obj }
+          rawObjectsArray = Object.values(data)
+        }
+
+        const transformedObjects = rawObjectsArray.map(transformRawToObjectData)
+        setObjects(transformedObjects)
+      } catch (err: any) {
+        console.error('Ошибка при загрузке данных объектов:', err)
+        setError(err?.message || 'Произошла неизвестная ошибка')
      } finally {
        setLoading(false)
      }
--- a/frontend/app/(protected)/reports/page.tsx
+++ b/frontend/app/(protected)/reports/page.tsx
@@ -1,18 +1,21 @@
 'use client'

-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useRouter, useSearchParams } from 'next/navigation'
 import Sidebar from '../../../components/ui/Sidebar'
 import useNavigationStore from '../../store/navigationStore'
 import ReportsList from '../../../components/reports/ReportsList'
 import ExportMenu from '../../../components/ui/ExportMenu'
-import detectorsData from '../../../data/detectors.json'
-import axios from 'axios'
+import { useSession } from 'next-auth/react'
+import DetectorList from '../../../components/alerts/DetectorList'

 const ReportsPage: React.FC = () => {
  const router = useRouter()
  const searchParams = useSearchParams()
+  const { data: session } = useSession()
  const { currentObject, setCurrentObject } = useNavigationStore()
+  const [selectedDetectors, setSelectedDetectors] = useState<number[]>([])
+  const [detectorsData, setDetectorsData] = useState<any>({ detectors: {} })

  const urlObjectId = searchParams.get('objectId')
  const urlObjectTitle = searchParams.get('objectTitle')
@@ -25,36 +28,70 @@ const ReportsPage: React.FC = () => {
    }
  }, [urlObjectId, urlObjectTitle, currentObject.id, setCurrentObject])

+  useEffect(() => {
+    const loadDetectors = async () => {
+      try {
+        const params = new URLSearchParams()
+        if (currentObject.id) params.set('objectId', currentObject.id)
+        const res = await fetch(`/api/get-detectors?${params.toString()}`, { cache: 'no-store' })
+        if (!res.ok) return
+        const payload = await res.json()
+        const data = payload?.data || { detectors: {} }
+        console.log('[ReportsPage] GET /api/get-detectors', {
+          url: `/api/get-detectors?${params.toString()}`,
+          status: res.status,
+          payload,
+          parsed: data,
+        })
+        setDetectorsData(data)
+      } catch (e) {
+        console.error('Failed to load detectors data:', e)
+      }
+    }
+    loadDetectors()
+    
+  }, [currentObject.id])
+
  const handleBackClick = () => {
    router.push('/dashboard')
  }

-  const handleExport = async (format: 'csv' | 'pdf') => {
-    try {
-      const response = await axios.post(
-        `${process.env.NEXT_PUBLIC_API_URL}/account/get-reports/`,
-        { report_format: format },
-        {
-          responseType: 'blob',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-        }
-      )
+  const handleDetectorSelect = (detectorId: number, selected: boolean) => {
+    if (selected) {
+      setSelectedDetectors(prev => [...prev, detectorId])
+    } else {
+      setSelectedDetectors(prev => prev.filter(id => id !== detectorId))
+    }
+  }

-      const contentDisposition = response.headers['content-disposition']
+  const handleExport = async (format: 'csv' | 'pdf', hours: number) => {
+    try {
+      const res = await fetch(`/api/get-reports`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          ...(session?.accessToken ? { Authorization: `Bearer ${session.accessToken}` } : {}),
+        },
+        body: JSON.stringify({ format: format, hours }),
+        credentials: 'include',
+      })
+      if (!res.ok) {
+        const errText = await res.text()
+        console.error('[ReportsPage] POST /api/get-reports failed', { status: res.status, body: errText })
+        throw new Error(`Export failed: ${res.status} ${errText}`)
+      }
+      console.log('[ReportsPage] POST /api/get-reports success', { status: res.status, headers: Object.fromEntries(res.headers.entries()) })
+      const blob = await res.blob()
+      const contentDisposition = res.headers.get('Content-Disposition') || res.headers.get('content-disposition')
      const filenameMatch = contentDisposition?.match(/filename="(.+)"/)
      const timestamp = new Date().toISOString().replace(/[:.]/g, '-').replace(/T/g, '_')
-      const filename = filenameMatch ? filenameMatch[1] : `alerts_report_${timestamp}.${format}`
-
-      const url = window.URL.createObjectURL(new Blob([response.data]))
+      const filename = filenameMatch ? filenameMatch[1] : `detectors_report_${timestamp}.${format}`
+      const url = window.URL.createObjectURL(blob)
      const link = document.createElement('a')
      link.href = url
      link.download = filename
-
      document.body.appendChild(link)
      link.click()
-
      document.body.removeChild(link)
      window.URL.revokeObjectURL(url)
    } catch (error) {
@@ -63,12 +100,12 @@ const ReportsPage: React.FC = () => {
  }

  return (
-    <div className="flex h-screen bg-[#0e111a]">
-      <Sidebar
-        activeItem={9} // Reports
+    <div className="flex h-screen bg-[#0e111a]"> 
+      <Sidebar 
+        activeItem={9} // Отчёты 
      />
-
-      <div className="flex flex-1 flex-col">
+      
+      <div className="flex-1 flex flex-col">
        <header className="border-b border-gray-700 bg-[#161824] px-6 py-4">
          <div className="flex items-center gap-4">
            <button
@@ -103,7 +140,15 @@ const ReportsPage: React.FC = () => {
              <ExportMenu onExport={handleExport} />
            </div>

-            <ReportsList objectId={objectId || undefined} detectorsData={detectorsData} />
+            {/* Selection table to choose detectors to include in the report */}
+            <div className="mb-6">
+              <DetectorList objectId={objectId || undefined} selectedDetectors={selectedDetectors} onDetectorSelect={handleDetectorSelect} />
+            </div>
+
+            {/* Existing notifications-based list */}
+            <div className="mt-6">
+              <ReportsList detectorsData={detectorsData} />
+            </div>
          </div>
        </div>
      </div>