Разработка интерфейса фронт

2025-09-05 03:16:17 +03:00
parent 6c2ea027a4
commit 4d6b7b48d7
35 changed files with 3806 additions and 276 deletions
--- a/frontend/app/(protected)/alerts/page.tsx
+++ b/frontend/app/(protected)/alerts/page.tsx
@@ -0,0 +1,103 @@
+'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