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

first

Browse Source
This commit is contained in:
Aliaksandr Shumski
2026-02-02 11:00:40 +03:00
parent 87a1a628d3
commit 2d0f236fa4
22 changed files with 1119 additions and 461 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
frontend/components/ui/Button.tsx
View File

@@ -12,21 +12,36 @@ const Button = ({
size = 'lg',
}: ButtonProps) => {
const sizeClasses = {
sm: 'h-10 text-sm',
md: 'h-12 text-base',
lg: 'h-14 text-xl',
sm: 'h-10 text-sm px-4',
md: 'h-12 text-base px-6',
lg: 'h-14 text-lg px-8',
}
return (
<button
onClick={onClick}
className={`cursor-pointer rounded-xl transition-all duration-500 hover:shadow-2xl ${sizeClasses[size]} ${className}`}
className={`
cursor-pointer
rounded-2xl
transition-all
duration-300
font-medium
shadow-lg
hover:shadow-2xl
hover:scale-105
active:scale-95
backdrop-blur-sm
${sizeClasses[size]}
${className}
`}
type={type}
>
{leftIcon && <span className="mr-2 flex items-center">{leftIcon}</span>}
{midIcon && <span className="flex items-center">{midIcon}</span>}
<span className="text-center font-normal">{text}</span>
{rightIcon && <span className="ml-2 flex items-center">{rightIcon}</span>}
<div className="flex items-center justify-center gap-2">
{leftIcon && <span className="flex items-center">{leftIcon}</span>}
{midIcon && <span className="flex items-center">{midIcon}</span>}
<span className="text-center">{text}</span>
{rightIcon && <span className="flex items-center">{rightIcon}</span>}
</div>
</button>
)
}

42
frontend/components/ui/LoadingSpinner.tsx
View File

@@ -11,8 +11,8 @@ interface LoadingSpinnerProps {
const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({
progress = 0,
size = 120,
strokeWidth = 8,
size = 140,
strokeWidth = 6,
className = ''
}) => {
const radius = (size - strokeWidth) / 2
@@ -22,47 +22,63 @@ const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({
return (
<div className={`flex flex-col items-center justify-center ${className}`}>
<div className="relative" style={{ width: size, height: size }}>
<div className="relative" style={{ width: size, height: size }}>
{/* Фоновый круг с градиентом */}
<svg
className="transform -rotate-90"
className="transform -rotate-90 drop-shadow-lg"
width={size}
height={size}
viewBox={`0 0 ${size} ${size}`}
>
<defs>
<linearGradient id="progressGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stopColor="#2563eb" />
<stop offset="100%" stopColor="#0891b2" />
</linearGradient>
</defs>
{/* Фоновый круг */}
<circle
cx={size / 2}
cy={size / 2}
r={radius}
stroke="rgba(255, 255, 255, 0.1)"
stroke="rgba(255, 255, 255, 0.08)"
strokeWidth={strokeWidth}
fill="transparent"
/>
{/* Прогресс круг с градиентом */}
<circle
cx={size / 2}
cy={size / 2}
r={radius}
stroke="#389ee8"
stroke="url(#progressGradient)"
strokeWidth={strokeWidth}
fill="transparent"
strokeDasharray={strokeDasharray}
strokeDashoffset={strokeDashoffset}
strokeLinecap="round"
className="transition-all duration-300 ease-out"
className="transition-all duration-500 ease-out filter drop-shadow-md"
/>
</svg>
{/* Процент в центре */}
<div className="absolute inset-0 flex items-center justify-center">
<span className="text-white text-xl font-semibold">
{Math.round(progress)}%
</span>
<div className="text-center">
<span className="text-white text-3xl font-bold bg-gradient-to-r from-blue-400 to-cyan-300 bg-clip-text text-transparent">
{Math.round(progress)}%
</span>
</div>
</div>
</div>
<div className="mt-4 text-white text-base font-medium">
Loading Model...
{/* Текст загрузки */}
<div className="mt-6 text-center">
<p className="text-white text-lg font-semibold">Загрузка модели…</p>
<p className="text-gray-400 text-sm mt-2">Пожалуйста, подождите</p>
</div>
</div>
)
}
export default LoadingSpinner
export default LoadingSpinner

59
frontend/components/ui/Sidebar.tsx
View File

@@ -185,19 +185,18 @@ const Sidebar: React.FC<SidebarProps> = ({
openMonitoring,
openFloorNavigation,
openNotifications,
openListOfDetectors,
openSensors,
openListOfDetectors,
closeSensors,
closeListOfDetectors,
closeMonitoring,
closeFloorNavigation,
closeNotifications,
closeListOfDetectors,
closeSensors,
closeAllMenus,
showMonitoring,
showFloorNavigation,
showNotifications,
showListOfDetectors,
showSensors
showSensors,
showListOfDetectors
} = useNavigationStore()
useEffect(() => {
@@ -229,14 +228,10 @@ const Sidebar: React.FC<SidebarProps> = ({
case 3: // Monitoring
if (pathname !== '/navigation') {
router.push('/navigation')
setTimeout(() => {
closeAllMenus()
openMonitoring()
}, 100)
setTimeout(() => openMonitoring(), 100)
} else if (showMonitoring) {
closeMonitoring()
} else {
closeAllMenus()
openMonitoring()
}
handled = true
@@ -244,14 +239,10 @@ const Sidebar: React.FC<SidebarProps> = ({
case 4: // Floor Navigation
if (pathname !== '/navigation') {
router.push('/navigation')
setTimeout(() => {
closeAllMenus()
openFloorNavigation()
}, 100)
setTimeout(() => openFloorNavigation(), 100)
} else if (showFloorNavigation) {
closeFloorNavigation()
} else {
closeAllMenus()
openFloorNavigation()
}
handled = true
@@ -259,14 +250,10 @@ const Sidebar: React.FC<SidebarProps> = ({
case 5: // Notifications
if (pathname !== '/navigation') {
router.push('/navigation')
setTimeout(() => {
closeAllMenus()
openNotifications()
}, 100)
setTimeout(() => openNotifications(), 100)
} else if (showNotifications) {
closeNotifications()
} else {
closeAllMenus()
openNotifications()
}
handled = true
@@ -274,29 +261,21 @@ const Sidebar: React.FC<SidebarProps> = ({
case 6: // Sensors
if (pathname !== '/navigation') {
router.push('/navigation')
setTimeout(() => {
closeAllMenus()
openSensors()
}, 100)
setTimeout(() => openSensors(), 100)
} else if (showSensors) {
closeSensors()
} else {
closeAllMenus()
openSensors()
}
handled = true
break
case 7: // List of Detectors
case 7: // Detector List
if (pathname !== '/navigation') {
router.push('/navigation')
setTimeout(() => {
closeAllMenus()
openListOfDetectors()
}, 100)
setTimeout(() => openListOfDetectors(), 100)
} else if (showListOfDetectors) {
closeListOfDetectors()
} else {
closeAllMenus()
openListOfDetectors()
}
handled = true
@@ -352,8 +331,8 @@ const Sidebar: React.FC<SidebarProps> = ({
return (
<li key={item.id} className="flex-col flex items-center relative self-stretch w-full" role="listitem">
<button
className={`gap-2 pt-2 pr-2 pb-2 pl-2 rounded-md flex h-9 items-center relative self-stretch w-full transition-colors duration-200 hover:bg-gray-700 focus:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-inset ${
isActive ? 'bg-gray-700' : ''
className={`gap-2 pt-2 pr-2 pb-2 pl-2 rounded-md flex h-9 items-center relative self-stretch w-full transition-all duration-200 hover:bg-gray-700 focus:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-inset ${
isActive ? 'bg-gradient-to-r from-blue-600 to-cyan-500 shadow-lg shadow-blue-500/30' : ''
}`}
onClick={() => handleItemClick(item.id)}
aria-current={isActive ? 'page' : undefined}
@@ -379,8 +358,6 @@ const Sidebar: React.FC<SidebarProps> = ({
closeMonitoring()
closeFloorNavigation()
closeNotifications()
closeListOfDetectors()
closeSensors()
}
toggleNavigationSubMenu()
}}
@@ -395,8 +372,6 @@ const Sidebar: React.FC<SidebarProps> = ({
closeMonitoring()
closeFloorNavigation()
closeNotifications()
closeListOfDetectors()
closeSensors()
}
toggleNavigationSubMenu()
}
@@ -426,8 +401,8 @@ const Sidebar: React.FC<SidebarProps> = ({
return (
<li key={subItem.id} className="flex-col flex h-8 items-center relative self-stretch w-full" role="listitem">
<button
className={`gap-2 pt-1.5 pr-2 pb-1.5 pl-2 rounded-md flex h-8 items-center relative self-stretch w-full transition-colors duration-200 hover:bg-gray-600 focus:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-inset ${
isSubActive ? 'bg-gray-600' : ''
className={`gap-2 pt-1.5 pr-2 pb-1.5 pl-2 rounded-md flex h-8 items-center relative self-stretch w-full transition-all duration-200 hover:bg-gray-600 focus:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-inset ${
isSubActive ? 'bg-gradient-to-r from-blue-600 to-cyan-500 shadow-lg shadow-blue-500/30' : ''
}`}
onClick={() => handleItemClick(subItem.id)}
aria-current={isSubActive ? 'page' : undefined}
@@ -461,8 +436,6 @@ const Sidebar: React.FC<SidebarProps> = ({
closeMonitoring()
closeFloorNavigation()
closeNotifications()
closeListOfDetectors()
closeSensors()
}
// Убираем сайд-бар
toggleSidebar()
@@ -511,7 +484,7 @@ const Sidebar: React.FC<SidebarProps> = ({
</div>
<button
className="!relative !w-8 !h-8 p-1.5 rounded-lg bg-gray-800/60 border border-gray-600/40 shadow-lg hover:shadow-xl hover:bg-gray-700 focus:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-200"
className="relative w-4 h-4 aspect-[1] p-1 rounded hover:bg-gray-700 focus:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-200"
aria-label="Logout"
title="Выйти"
type="button"