feat: add wind speed discrepancy info modal and integrate warning triggers across UI tabs and isopletas map

This commit is contained in:
2026-07-10 15:01:55 +00:00
parent 884f90e988
commit 5e1b5cd1e9
4 changed files with 302 additions and 10 deletions
+45 -10
View File
@@ -16,6 +16,8 @@ import { Input } from '@/components/ui/input';
import { searchStations } from '@/lib/stations-lookup';
import { Settings2 } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { IsopletasModal } from '@/components/IsopletasModal';
import { InfoV0Modal } from '@/components/InfoV0Modal';
export function GlobalWindSettingsModal() {
const {
@@ -36,7 +38,15 @@ export function GlobalWindSettingsModal() {
} = useWindStore();
const [stationQuery, setStationQuery] = useState('');
const filteredStations = useMemo(() => searchStations(stationQuery), [stationQuery]);
const [v0Filter, setV0Filter] = useState<number | null>(null);
const filteredStations = useMemo(() => {
let stations = searchStations(stationQuery);
if (v0Filter !== null) {
stations = stations.filter((s) => s.v0 === v0Filter);
}
return stations;
}, [stationQuery, v0Filter]);
return (
<Dialog>
@@ -63,7 +73,10 @@ export function GlobalWindSettingsModal() {
<TabsContent value="norma" className="space-y-4 min-w-0">
<div className="space-y-2">
<div className="flex justify-between items-center">
<label className="text-xs font-medium text-foreground">Velocidade Básica (V)</label>
<div className="flex items-center gap-1">
<label className="text-xs font-medium text-foreground">Velocidade Básica (V)</label>
<InfoV0Modal variant="icon" />
</div>
<span className="text-xs text-muted-foreground font-mono">{v0} m/s</span>
</div>
<Slider min={25} max={55} step={1} value={[v0]} onValueChange={(vals) => setV0(vals[0])} className="py-1 cursor-pointer" />
@@ -74,7 +87,7 @@ export function GlobalWindSettingsModal() {
<Select value={s1.toString()} onValueChange={(val) => setS1(Number(val))}>
<SelectTrigger className="w-full text-xs h-8"><SelectValue placeholder="S₁" /></SelectTrigger>
<SelectContent>
<SelectItem value="0.9">0,9 (Vale profundo protegido)</SelectItem>
<SelectItem value="0.9">0,9 (Vale profissional protegido)</SelectItem>
<SelectItem value="1">1,0 (Terreno plano)</SelectItem>
<SelectItem value="1.1">1,1 (Talude)</SelectItem>
<SelectItem value="1.2">1,2 (Morro)</SelectItem>
@@ -128,12 +141,34 @@ export function GlobalWindSettingsModal() {
<TabsContent value="local" className="space-y-3 min-w-0">
<div className="space-y-2">
<Input
placeholder="Buscar cidade ou estação..."
value={stationQuery}
onChange={(e) => setStationQuery(e.target.value)}
className="h-8 text-xs"
/>
<div className="flex gap-1.5 items-center">
<Input
placeholder="Buscar cidade ou estação..."
value={stationQuery}
onChange={(e) => setStationQuery(e.target.value)}
className="h-8 text-xs flex-1"
/>
<InfoV0Modal variant="button" buttonText="Divergências?" />
<IsopletasModal />
</div>
<div className="flex items-center gap-1.5 py-1 overflow-x-auto no-scrollbar">
<span className="text-[10px] text-muted-foreground mr-1 shrink-0">Filtrar V:</span>
{[null, 30, 35, 40, 45, 50].map((val) => (
<button
key={val ?? 'todos'}
onClick={() => setV0Filter(val)}
className={`h-6 px-2.5 text-[10px] rounded-full border transition-all font-mono font-medium shrink-0 ${
v0Filter === val
? 'bg-primary text-primary-foreground border-primary shadow-sm'
: 'bg-background text-muted-foreground hover:text-foreground border-border hover:bg-muted/50'
}`}
>
{val ? `${val} m/s` : 'Todos'}
</button>
))}
</div>
<div className="max-h-[200px] overflow-y-auto rounded-md border divide-y">
{filteredStations.map((s) => (
<button
@@ -143,7 +178,7 @@ export function GlobalWindSettingsModal() {
>
<div className="flex justify-between items-center">
<span className="font-medium text-xs truncate max-w-[150px]">{s.nome}</span>
<Badge variant="outline" className="font-mono text-[10px] py-0 px-1">V = {s.v0} m/s</Badge>
<Badge variant="outline" className="font-mono text-[10px] py-0 px-1 font-semibold">V = {s.v0} m/s</Badge>
</div>
<div className="text-[10px] text-muted-foreground">{s.latitude} · {s.longitude} · {s.altitude} m</div>
</button>