122 lines
3.9 KiB
TypeScript
122 lines
3.9 KiB
TypeScript
import {
|
||
AlertCircle,
|
||
Building2,
|
||
Calendar as CalendarIcon,
|
||
Droplets,
|
||
Gauge,
|
||
Settings,
|
||
Thermometer,
|
||
} from 'lucide-react'
|
||
import { Button } from 'shared/ui/button'
|
||
import { Card, CardContent } from 'shared/ui/card'
|
||
import { VerificationConditionsConfig } from './types'
|
||
|
||
interface VerificationConditionsPreviewProps {
|
||
config: VerificationConditionsConfig
|
||
onChange?: (config: VerificationConditionsConfig) => void
|
||
}
|
||
|
||
const ConditionSkeleton = ({
|
||
index,
|
||
icon: Icon,
|
||
name,
|
||
unit,
|
||
}: {
|
||
index: number
|
||
icon: any
|
||
name: string
|
||
unit: string
|
||
}) => (
|
||
<div className="flex items-center gap-2 rounded-md bg-muted/30 p-1.5 text-sm">
|
||
<div className="flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-primary/10">
|
||
<Icon className="h-2.5 w-2.5 text-primary" />
|
||
</div>
|
||
<div className="min-w-0 flex-1">
|
||
<div className="font-medium text-foreground">{name}</div>
|
||
</div>
|
||
<div className="h-5 shrink-0 rounded bg-muted px-2 py-0.5 text-xs text-muted-foreground">
|
||
— {unit}
|
||
</div>
|
||
</div>
|
||
)
|
||
|
||
// Моковые условия поверки
|
||
const mockConditions = [
|
||
{ name: 'Температура', unit: '°C', icon: Thermometer },
|
||
{ name: 'Влажность', unit: '%', icon: Droplets },
|
||
{ name: 'Давление', unit: 'кПа', icon: Gauge },
|
||
{ name: 'Освещенность', unit: 'лк', icon: AlertCircle },
|
||
{ name: 'Вибрация', unit: 'м/с²', icon: AlertCircle },
|
||
{ name: 'Магнитное поле', unit: 'А/м', icon: AlertCircle },
|
||
{ name: 'Электромагнитное поле', unit: 'В/м', icon: AlertCircle },
|
||
]
|
||
|
||
export function VerificationConditionsPreview({
|
||
config,
|
||
onChange,
|
||
}: VerificationConditionsPreviewProps) {
|
||
const conditionsToShow = mockConditions.slice(0, 7)
|
||
const selectedDate =
|
||
config.selectedDate || new Date().toISOString().split('T')[0]
|
||
|
||
if (!config.selectedLaboratoryId) {
|
||
return (
|
||
<Card className="border-dashed">
|
||
<CardContent className="p-3">
|
||
<div className="text-center text-muted-foreground">
|
||
<Building2 className="mx-auto mb-1 h-4 w-4 opacity-50" />
|
||
<p className="text-xs">Лаборатория не выбрана</p>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<div className="space-y-2">
|
||
<div className="space-y-2">
|
||
{/* Информация о лаборатории и дате */}
|
||
<div className="flex items-center gap-2 rounded-md bg-muted/20 p-2 text-sm">
|
||
<Building2 className="h-3.5 w-3.5 text-muted-foreground" />
|
||
<span className="font-medium text-muted-foreground">Лаборатория</span>
|
||
<div className="ml-auto flex items-center gap-1 text-xs text-muted-foreground">
|
||
<CalendarIcon className="h-3 w-3" />
|
||
<span>{new Date(selectedDate).toLocaleDateString('ru-RU')}</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Общий статус с кнопкой настроить */}
|
||
<div className="flex items-center justify-between px-2 text-xs">
|
||
<div className="flex items-center gap-1.5 text-orange-600">
|
||
<AlertCircle className="h-3.5 w-3.5" />
|
||
<span className="font-medium">Данные не внесены</span>
|
||
</div>
|
||
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
disabled
|
||
className="h-6 px-2 text-xs"
|
||
>
|
||
<Settings className="mr-1 h-3 w-3" />
|
||
Настроить
|
||
</Button>
|
||
</div>
|
||
|
||
{/* Моковые условия */}
|
||
<div className="space-y-1">
|
||
{conditionsToShow.map((condition, index) => (
|
||
<ConditionSkeleton
|
||
key={index}
|
||
index={index}
|
||
icon={condition.icon}
|
||
name={condition.name}
|
||
unit={condition.unit}
|
||
/>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|