358 lines
15 KiB
TypeScript
358 lines
15 KiB
TypeScript
import { FormControl, FormControlLabel, FormLabel, Grid, Radio, RadioGroup, TextField } from "@mui/material";
|
|
import React from "react";
|
|
|
|
interface FormValues {
|
|
eyes: string;
|
|
IntestinesBowls: string;
|
|
jointsBones:string;
|
|
allergies: string;
|
|
earsNoseMouth: string;
|
|
urinary: string;
|
|
skin: string;
|
|
psychological: string;
|
|
heart: string;
|
|
muscles: string;
|
|
internalOrgans: string;
|
|
gynecological: string;
|
|
lungsBreathing: string;
|
|
nerves: string;
|
|
blood: string;
|
|
prostate: string;
|
|
explanation:string;
|
|
}
|
|
|
|
export default function SystemReviewSection6(){
|
|
const [values, setValues] = React.useState<FormValues>({
|
|
eyes: '',
|
|
IntestinesBowls: '',
|
|
jointsBones:'',
|
|
allergies: '',
|
|
earsNoseMouth: '',
|
|
urinary: '',
|
|
skin: '',
|
|
psychological: '',
|
|
heart: '',
|
|
muscles: '',
|
|
internalOrgans: '',
|
|
gynecological: '',
|
|
lungsBreathing: '',
|
|
nerves: '',
|
|
blood: '',
|
|
prostate: '',
|
|
explanation:'',
|
|
});
|
|
return(
|
|
<>
|
|
<Grid item xs={12} className='collapsable-form-style '>
|
|
<FormLabel sx={{fontWeight:600}}>Please choose body areas or systems where you may have problems:</FormLabel>
|
|
</Grid>
|
|
<Grid container direction="row">
|
|
<Grid item xs={3} className='collapsable-form-style-radioButtons'>
|
|
<FormControl>
|
|
<FormLabel>Eyes</FormLabel>
|
|
<RadioGroup
|
|
name="painDuration"
|
|
sx={{display:'flex', flexDirection:'row'}}
|
|
onChange={(event) => {
|
|
setValues((prevValues) => ({
|
|
...prevValues,
|
|
eyes: event.target.value,
|
|
}));
|
|
}}
|
|
>
|
|
<FormControlLabel value="Yes" control={<Radio />} label="Yes" />
|
|
<FormControlLabel value="No" control={<Radio />} label="No" />
|
|
</RadioGroup>
|
|
</FormControl>
|
|
</Grid>
|
|
<Grid item xs={3} className='collapsable-form-style-radioButtons'>
|
|
<FormControl>
|
|
<FormLabel>Intestines/Bowls</FormLabel>
|
|
<RadioGroup
|
|
name="painDuration"
|
|
sx={{display:'flex', flexDirection:'row'}}
|
|
onChange={(event) => {
|
|
setValues((prevValues) => ({
|
|
...prevValues,
|
|
presentProblemBefore: event.target.value,
|
|
}));
|
|
}}
|
|
>
|
|
<FormControlLabel value="Yes" control={<Radio />} label="Yes" />
|
|
<FormControlLabel value="No" control={<Radio />} label="No" />
|
|
</RadioGroup>
|
|
</FormControl>
|
|
</Grid>
|
|
<Grid item xs={3} className='collapsable-form-style-radioButtons'>
|
|
<FormControl>
|
|
<FormLabel>Joints/Bones</FormLabel>
|
|
<RadioGroup
|
|
name="painDuration"
|
|
sx={{display:'flex', flexDirection:'row'}}
|
|
onChange={(event) => {
|
|
setValues((prevValues) => ({
|
|
...prevValues,
|
|
jointsBones: event.target.value,
|
|
}));
|
|
}}
|
|
>
|
|
<FormControlLabel value="Yes" control={<Radio />} label="Yes" />
|
|
<FormControlLabel value="No" control={<Radio />} label="No" />
|
|
</RadioGroup>
|
|
</FormControl>
|
|
</Grid>
|
|
<Grid item xs={3} className='collapsable-form-style-radioButtons'>
|
|
<FormControl>
|
|
<FormLabel>Allergies</FormLabel>
|
|
<RadioGroup
|
|
name="painDuration"
|
|
sx={{display:'flex', flexDirection:'row'}}
|
|
onChange={(event) => {
|
|
setValues((prevValues) => ({
|
|
...prevValues,
|
|
allergies: event.target.value,
|
|
}));
|
|
}}
|
|
>
|
|
<FormControlLabel value="Yes" control={<Radio />} label="Yes" />
|
|
<FormControlLabel value="No" control={<Radio />} label="No" />
|
|
</RadioGroup>
|
|
</FormControl>
|
|
</Grid>
|
|
<Grid item xs={3} className='collapsable-form-style-radioButtons'>
|
|
<FormControl>
|
|
<FormLabel>Ears, Nose, Mouth, Throat</FormLabel>
|
|
<RadioGroup
|
|
name="painDuration"
|
|
sx={{display:'flex', flexDirection:'row'}}
|
|
onChange={(event) => {
|
|
setValues((prevValues) => ({
|
|
...prevValues,
|
|
earsNoseMouth: event.target.value,
|
|
}));
|
|
}}
|
|
>
|
|
<FormControlLabel value="Yes" control={<Radio />} label="Yes" />
|
|
<FormControlLabel value="No" control={<Radio />} label="No" />
|
|
</RadioGroup>
|
|
</FormControl>
|
|
</Grid>
|
|
<Grid item xs={3} className='collapsable-form-style-radioButtons'>
|
|
<FormControl>
|
|
<FormLabel>Urinary</FormLabel>
|
|
<RadioGroup
|
|
name="painDuration"
|
|
sx={{display:'flex', flexDirection:'row'}}
|
|
onChange={(event) => {
|
|
setValues((prevValues) => ({
|
|
...prevValues,
|
|
urinary: event.target.value,
|
|
}));
|
|
}}
|
|
>
|
|
<FormControlLabel value="Yes" control={<Radio />} label="Yes" />
|
|
<FormControlLabel value="No" control={<Radio />} label="No" />
|
|
</RadioGroup>
|
|
</FormControl>
|
|
</Grid>
|
|
<Grid item xs={3} className='collapsable-form-style-radioButtons'>
|
|
<FormControl>
|
|
<FormLabel>Skin</FormLabel>
|
|
<RadioGroup
|
|
name="painDuration"
|
|
sx={{display:'flex', flexDirection:'row'}}
|
|
onChange={(event) => {
|
|
setValues((prevValues) => ({
|
|
...prevValues,
|
|
skin: event.target.value,
|
|
}));
|
|
}}
|
|
>
|
|
<FormControlLabel value="Yes" control={<Radio />} label="Yes" />
|
|
<FormControlLabel value="No" control={<Radio />} label="No" />
|
|
</RadioGroup>
|
|
</FormControl>
|
|
</Grid>
|
|
<Grid item xs={3} className='collapsable-form-style-radioButtons'>
|
|
<FormControl>
|
|
<FormLabel>Psychological/Emotional</FormLabel>
|
|
<RadioGroup
|
|
name="painDuration"
|
|
sx={{display:'flex', flexDirection:'row'}}
|
|
onChange={(event) => {
|
|
setValues((prevValues) => ({
|
|
...prevValues,
|
|
psychological: event.target.value,
|
|
}));
|
|
}}
|
|
>
|
|
<FormControlLabel value="Yes" control={<Radio />} label="Yes" />
|
|
<FormControlLabel value="No" control={<Radio />} label="No" />
|
|
</RadioGroup>
|
|
</FormControl>
|
|
</Grid>
|
|
<Grid item xs={3} className='collapsable-form-style-radioButtons'>
|
|
<FormControl>
|
|
<FormLabel>Heart</FormLabel>
|
|
<RadioGroup
|
|
name="painDuration"
|
|
sx={{display:'flex', flexDirection:'row'}}
|
|
onChange={(event) => {
|
|
setValues((prevValues) => ({
|
|
...prevValues,
|
|
heart: event.target.value,
|
|
}));
|
|
}}
|
|
>
|
|
<FormControlLabel value="Yes" control={<Radio />} label="Yes" />
|
|
<FormControlLabel value="No" control={<Radio />} label="No" />
|
|
</RadioGroup>
|
|
</FormControl>
|
|
</Grid>
|
|
<Grid item xs={3} className='collapsable-form-style-radioButtons'>
|
|
<FormControl>
|
|
<FormLabel>Muscles</FormLabel>
|
|
<RadioGroup
|
|
name="painDuration"
|
|
sx={{display:'flex', flexDirection:'row'}}
|
|
onChange={(event) => {
|
|
setValues((prevValues) => ({
|
|
...prevValues,
|
|
muscles: event.target.value,
|
|
}));
|
|
}}
|
|
>
|
|
<FormControlLabel value="Yes" control={<Radio />} label="Yes" />
|
|
<FormControlLabel value="No" control={<Radio />} label="No" />
|
|
</RadioGroup>
|
|
</FormControl>
|
|
</Grid>
|
|
<Grid item xs={3} className='collapsable-form-style-radioButtons'>
|
|
<FormControl>
|
|
<FormLabel>Internal Organs</FormLabel>
|
|
<RadioGroup
|
|
name="painDuration"
|
|
sx={{display:'flex', flexDirection:'row'}}
|
|
onChange={(event) => {
|
|
setValues((prevValues) => ({
|
|
...prevValues,
|
|
internalOrgans: event.target.value,
|
|
}));
|
|
}}
|
|
>
|
|
<FormControlLabel value="Yes" control={<Radio />} label="Yes" />
|
|
<FormControlLabel value="No" control={<Radio />} label="No" />
|
|
</RadioGroup>
|
|
</FormControl>
|
|
</Grid>
|
|
<Grid item xs={3} className='collapsable-form-style-radioButtons'>
|
|
<FormControl>
|
|
<FormLabel>Gynecological menstrual/Brest</FormLabel>
|
|
<RadioGroup
|
|
name="painDuration"
|
|
sx={{display:'flex', flexDirection:'row'}}
|
|
onChange={(event) => {
|
|
setValues((prevValues) => ({
|
|
...prevValues,
|
|
gynecological: event.target.value,
|
|
}));
|
|
}}
|
|
>
|
|
<FormControlLabel value="Yes" control={<Radio />} label="Yes" />
|
|
<FormControlLabel value="No" control={<Radio />} label="No" />
|
|
</RadioGroup>
|
|
</FormControl>
|
|
</Grid>
|
|
|
|
<Grid item xs={3} className='collapsable-form-style-radioButtons'>
|
|
<FormControl>
|
|
<FormLabel>Lungs/Breathing</FormLabel>
|
|
<RadioGroup
|
|
name="painDuration"
|
|
sx={{display:'flex', flexDirection:'row'}}
|
|
onChange={(event) => {
|
|
setValues((prevValues) => ({
|
|
...prevValues,
|
|
lungsBreathing: event.target.value,
|
|
}));
|
|
}}
|
|
>
|
|
<FormControlLabel value="Yes" control={<Radio />} label="Yes" />
|
|
<FormControlLabel value="No" control={<Radio />} label="No" />
|
|
</RadioGroup>
|
|
</FormControl>
|
|
</Grid>
|
|
<Grid item xs={3} className='collapsable-form-style-radioButtons'>
|
|
<FormControl>
|
|
<FormLabel>Nerves</FormLabel>
|
|
<RadioGroup
|
|
name="painDuration"
|
|
sx={{display:'flex', flexDirection:'row'}}
|
|
onChange={(event) => {
|
|
setValues((prevValues) => ({
|
|
...prevValues,
|
|
nerves: event.target.value,
|
|
}));
|
|
}}
|
|
>
|
|
<FormControlLabel value="Yes" control={<Radio />} label="Yes" />
|
|
<FormControlLabel value="No" control={<Radio />} label="No" />
|
|
</RadioGroup>
|
|
</FormControl>
|
|
</Grid>
|
|
<Grid item xs={3} className='collapsable-form-style-radioButtons'>
|
|
<FormControl>
|
|
<FormLabel>Blood</FormLabel>
|
|
<RadioGroup
|
|
name="painDuration"
|
|
sx={{display:'flex', flexDirection:'row'}}
|
|
onChange={(event) => {
|
|
setValues((prevValues) => ({
|
|
...prevValues,
|
|
blood: event.target.value,
|
|
}));
|
|
}}
|
|
>
|
|
<FormControlLabel value="Yes" control={<Radio />} label="Yes" />
|
|
<FormControlLabel value="No" control={<Radio />} label="No" />
|
|
</RadioGroup>
|
|
</FormControl>
|
|
</Grid>
|
|
<Grid item xs={3} className='collapsable-form-style-radioButtons'>
|
|
<FormControl>
|
|
<FormLabel>Prostate/Testicular/Penile</FormLabel>
|
|
<RadioGroup
|
|
name="painDuration"
|
|
sx={{display:'flex', flexDirection:'row'}}
|
|
onChange={(event) => {
|
|
setValues((prevValues) => ({
|
|
...prevValues,
|
|
prostate: event.target.value,
|
|
}));
|
|
}}
|
|
>
|
|
<FormControlLabel value="Yes" control={<Radio />} label="Yes" />
|
|
<FormControlLabel value="No" control={<Radio />} label="No" />
|
|
</RadioGroup>
|
|
</FormControl>
|
|
</Grid>
|
|
<Grid item xs={6} className='collapsable-form-style-multiline'>
|
|
<FormLabel>Please explain your check marks:</FormLabel>
|
|
<TextField
|
|
multiline
|
|
variant="outlined"
|
|
label=""
|
|
name='explanation'
|
|
onChange={(event:any) => {
|
|
setValues((prevValues) => ({
|
|
...prevValues,
|
|
explanation: event.target.value,
|
|
}));
|
|
}}
|
|
/>
|
|
</Grid>
|
|
|
|
</Grid>
|
|
</>
|
|
)
|
|
} |