From 35a658ea5e3906cdc76e287e567350c64898014f Mon Sep 17 00:00:00 2001 From: Geoffrey Sautieres Date: Thu, 27 Feb 2025 21:28:24 +0100 Subject: [PATCH 1/3] feat(simulation): add the form to make the simulation --- packages/frontend/src/components/Form.tsx | 151 +++++++++++++++++-- packages/frontend/src/components/Results.tsx | 38 ++++- packages/frontend/src/queries/simulation.ts | 14 +- packages/types/simulations.ts | 33 +++- 4 files changed, 210 insertions(+), 26 deletions(-) diff --git a/packages/frontend/src/components/Form.tsx b/packages/frontend/src/components/Form.tsx index 5c14db3..4752e06 100644 --- a/packages/frontend/src/components/Form.tsx +++ b/packages/frontend/src/components/Form.tsx @@ -1,18 +1,145 @@ -import { getSimulation } from '@ensol-test/frontend/queries/simulation'; -import { SimulationResponse } from '@ensol-test/types/simulations'; -import { Button, Card, Stack } from '@mantine/core'; +import { getSimulation } from "@ensol-test/frontend/queries/simulation"; +import { + RoofInclination, + SimulationParameters, + SimulationResponse, +} from "@ensol-test/types/simulations"; +import { + Button, + Card, + Group, + NumberInput, + Select, + Stack, + TextInput, +} from "@mantine/core"; +import { useForm } from "@mantine/form"; type Props = { - onSubmit: (results: SimulationResponse) => void; + onSubmit: (results: SimulationResponse) => void; +}; + +type SimulationForm = { + latitude: string; + longitude: string; + monthlyBill: number; + roofInclination: number; + roofOrientation: string; }; export const Form = ({ onSubmit }: Props) => { - return ( - - Le formulaire doit être ici - - - ); + const form = useForm({ + initialValues: { + latitude: "", + longitude: "", + roofInclination: 0, + monthlyBill: 0, + roofOrientation: "", + }, + validate: { + latitude: (value) => { + if (!value) return "Latitude is required"; + const num = parseFloat(value); + if (isNaN(num)) return "Must be a valid number"; + if (num < -90 || num > 90) return "Must be between -90 and 90"; + return null; + }, + longitude: (value) => { + if (!value) return "Longitude is required"; + const num = parseFloat(value); + if (isNaN(num)) return "Must be a valid number"; + if (num < -180 || num > 180) + return "Must be between -180 and 180"; + return null; + }, + roofInclination: (value) => { + if (value === null || value === undefined) + return "Inclination is required"; + if (!Object.values(RoofInclination).includes(value)) + return "Invalid inclination value"; + return null; + }, + monthlyBill: (value) => { + if (value === null || value === undefined) + return "Monthly bill is required"; + if (value <= 0) return "Must be a positive number"; + return null; + }, + roofOrientation: (value) => { + if (!value) return "Orientation is required"; + if (!["W", "SW", "S", "SE"].includes(value)) + return "Must be one of: W, SW, S, SE"; + return null; + }, + }, + }); + + const handleSubmit = async (values: SimulationForm) => { + const results = await getSimulation({ + latitude: parseFloat(values.latitude), + longitude: parseFloat(values.longitude), + monthlyBill: values.monthlyBill, + roofInclination: values.roofInclination, + roofOrientation: + values.roofOrientation as SimulationParameters["roofOrientation"], + }); + onSubmit(results); + }; + return ( + + +
+ + + + + + + +