85 lines
4.3 KiB
TypeScript
85 lines
4.3 KiB
TypeScript
import React from 'react';
|
||
import { useWindStore } from '@/store/appStore';
|
||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
|
||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||
import { Slider } from '@/components/ui/slider';
|
||
import { Badge } from '@/components/ui/badge';
|
||
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
|
||
import type { PermeabilityCase } from '@/lib/internal-pressure';
|
||
|
||
export const CpiSettingsCard: React.FC = () => {
|
||
const {
|
||
permeabilityCase,
|
||
cpiRatio,
|
||
cpi,
|
||
setPermeabilityCase,
|
||
setCpiRatio,
|
||
} = useWindStore();
|
||
|
||
return (
|
||
<Card className="shadow-sm border-border">
|
||
<CardHeader className="pb-2">
|
||
<CardTitle className="text-base">Pressão Interna (Cpi)</CardTitle>
|
||
<CardDescription className="text-xs">
|
||
Coeficiente de pressão interna (sec. 6.3)
|
||
</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4">
|
||
<div className="space-y-1">
|
||
<Tooltip>
|
||
<TooltipTrigger asChild>
|
||
<label className="text-xs font-medium text-foreground cursor-help underline decoration-dashed decoration-muted-foreground underline-offset-4">Caso de Permeabilidade</label>
|
||
</TooltipTrigger>
|
||
<TooltipContent side="right">
|
||
<p className="text-sm">Baseado na <b>NBR 6123, Seção 6.3</b> (Coeficiente de pressão interna).<br/>Permeabilidade afeta a diferença de pressão total na estrutura.</p>
|
||
</TooltipContent>
|
||
</Tooltip>
|
||
<Select value={permeabilityCase} onValueChange={(val) => setPermeabilityCase(val as PermeabilityCase)}>
|
||
<SelectTrigger className="w-full text-xs h-8">
|
||
<SelectValue placeholder="Selecione" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="two-opposite-permeable">Duas faces opostas permeáveis</SelectItem>
|
||
<SelectItem value="four-equally-permeable">Quatro faces igualmente permeáveis</SelectItem>
|
||
<SelectItem value="dominant-windward">Abertura dominante — barlavento</SelectItem>
|
||
<SelectItem value="dominant-leeward">Abertura dominante — sotavento</SelectItem>
|
||
<SelectItem value="dominant-lateral">Abertura dominante — lateral</SelectItem>
|
||
<SelectItem value="airtight">Edificação estanque</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
|
||
{(permeabilityCase === 'dominant-windward' || permeabilityCase === 'dominant-lateral') && (
|
||
<div className="space-y-2">
|
||
<div className="flex justify-between items-center">
|
||
<Tooltip>
|
||
<TooltipTrigger asChild>
|
||
<label className="text-xs font-medium text-foreground cursor-help underline decoration-dashed decoration-muted-foreground underline-offset-4">Razão de áreas</label>
|
||
</TooltipTrigger>
|
||
<TooltipContent side="right">
|
||
<p className="text-sm">A razão entre a área das aberturas na face dominante<br/>e as demais determina o valor limite do Cpi (Figura 2 / Sec. 6.3).</p>
|
||
</TooltipContent>
|
||
</Tooltip>
|
||
<span className="text-xs text-muted-foreground font-mono">{cpiRatio.toFixed(2)}</span>
|
||
</div>
|
||
<Slider min={0.1} max={5} step={0.05} value={[cpiRatio]} onValueChange={(vals) => setCpiRatio(vals[0])} className="py-1 cursor-pointer" />
|
||
<p className="text-[10px] leading-tight text-muted-foreground">
|
||
Razão entre a área da abertura dominante e a área total das demais aberturas.
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
<div className="rounded-md border bg-muted/40 p-2">
|
||
<div className="flex justify-between items-center">
|
||
<span className="text-xs font-medium">Cpi calculado:</span>
|
||
<Badge variant="default" className="font-mono text-sm">{cpi.toFixed(2)}</Badge>
|
||
</div>
|
||
<p className="text-[10px] leading-tight text-muted-foreground mt-1">
|
||
Limitado a ±0,9 conforme norma. A pressão final é p = q · (Cpe − Cpi).
|
||
</p>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
);
|
||
};
|