Skip to content

Commit

Permalink
website changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@nourtawfik04
nourtawfik04 committed Feb 25, 2024
1 parent 23687cf commit 21d91f6
Show file tree
Hide file tree
Showing 9 changed files with 602 additions and 101 deletions.
Binary file added frontend/public/images/graybox.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added frontend/public/images/progress1.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added frontend/public/images/progress2.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added frontend/public/images/progress3.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion frontend/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ function App() {
return (
<Router>
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/" element={<CreateDesign />} />
<Route path="/main" element={<MainPage />} />
<Route path="/about" element={<AboutPage />} />
<Route path="/persuasive" element={<PersuasivePage />} />
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/pages/CreateDesign.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,4 +17,4 @@ function CreateDesign() {
);
}

export default CreateDesign;
export default CreateDesign;
240 changes: 151 additions & 89 deletions frontend/src/pages/InputForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,10 @@ function InputForm() {
console.log(data)
}

const resetToFirstPage = () => {
setPageNumber(0);
};

const incrementPage = () => {
if (pageNumber < pages.length + (getValues("bendCount") || 0)) {
setPageNumber(pageNumber + 1);
Expand All @@ -38,6 +42,26 @@ function InputForm() {
}
}

const customInputStyle = {
backgroundColor: 'white',
borderRadius: '16px',
'& .MuiOutlinedInput-notchedOutline': {
borderColor: 'white',
},
'&:hover .MuiOutlinedInput-notchedOutline': {
borderColor: 'white',
},
'&.Mui-focused .MuiOutlinedInput-notchedOutline': {
borderColor: 'white',
},
};

const nextButtonStyle = {
backgroundColor: '#2D3142',
color: 'white',
borderRadius: 'px',
};

const pages = [
<StepWrapper title='What material is the tube?'>
<Controller
Expand All @@ -47,91 +71,110 @@ function InputForm() {
required: true,
}}
render={({ field }) => (
<Select
{...field}
error={errors.material !== undefined}
placeholder='Select Material'
fullWidth
>
<MenuItem value={MaterialEnum.nickel}>Nickel</MenuItem>
<MenuItem value={MaterialEnum.brass}>Brass</MenuItem>
<MenuItem value={MaterialEnum.copper}>Copper</MenuItem>
</Select>
)
}
<>
<Select
{...field}
error={errors.material !== undefined}
placeholder='Select Material'
fullWidth
style={customInputStyle}
>
<MenuItem value={MaterialEnum.nickel}>Nickel</MenuItem>
<MenuItem value={MaterialEnum.brass}>Brass</MenuItem>
<MenuItem value={MaterialEnum.copper}>Copper</MenuItem>
</Select>
<img src="/images/progress1.png" style={{ marginTop: '50px', width: '17%' }} />
</>
)}
/>
</StepWrapper>,
<StepWrapper title='What length is the tube?'>
<div className=' flex flex-row gap-4 w-full'>
<div className=' w-3/5'>
<Controller
key='length-value'
control={control}
name="length.value"
rules={{
required: true,
min: 0,
}}
render={({ field }) => (
<TextField placeholder="Length"
key='length-value'
type='number'
{...field}
error={errors.length?.value !== undefined}
label={errors.length?.value ? 'Please enter a positive number' : ''}
onChange={(event) => field.onChange(+event.target.value)}
fullWidth
></TextField>
)}
/></div>
<div className=' w-2/5'>
<Controller
key='length-unit'
control={control}
name="length.unit"
rules={{
required: true,
}}
render={({ field }) => (
<Select
key='length-unit'
{...field}
error={errors.length?.unit !== undefined}
label={errors.length?.unit ? 'Please select a valid option' : ''}
fullWidth
>
<MenuItem value={MeasurementUnit.inches}>Inches</MenuItem>
<MenuItem value={MeasurementUnit.millimeters}>Millimeters</MenuItem>
</Select>
)
}
/></div></div>
</StepWrapper>,
<StepWrapper title='How many bends does the tube have?'>
<Controller
<div className='flex flex-row gap-4 w-full'>
<div className='w-3/5'>
<Controller
key='length-value'
control={control}
name="length.value"
rules={{
required: true,
min: 0,
}}
render={({ field }) => (
<TextField placeholder="Length"
key='length-value'
type='number'
{...field}
error={errors.length?.value !== undefined}
label={errors.length?.value ? 'Please enter a positive number' : ''}
onChange={(event) => field.onChange(+event.target.value)}
fullWidth
variant='outlined'
style={customInputStyle}
></TextField>
)}
/>
</div>
<div className='w-2/5'>
<Controller
key='length-unit'
control={control}
name="length.unit"
rules={{
required: true,
}}
render={({ field }) => (
<Select
key='length-unit'
{...field}
error={errors.length?.unit !== undefined}
label={errors.length?.unit ? 'Please select a valid option' : ''}
fullWidth
style={customInputStyle}
>
<MenuItem value={MeasurementUnit.inches}>Inches</MenuItem>
<MenuItem value={MeasurementUnit.millimeters}>Millimeters</MenuItem>
</Select>
)}
/>
</div>
</div>
<img src="/images/progress2.png" style={{ marginTop: '50px', width: '17%' }} />
</StepWrapper>,
<StepWrapper title='How many bends does the tube have?'>
<div style={{ width: '100%'}}></div>
<Controller
key='bend-count'
control={control}
name="bendCount"
rules={{
required: true,
min: 1,
validate: {
integer: v => Number.isInteger(v),
}
}}
render={({ field }) => (
<TextField
placeholder="Bends"
key='bend-count'
control={control}
name="bendCount"
rules={{
required: true,
min: 1,
validate: {
integer: v => Number.isInteger(v),
}
type='number'
error={errors.bendCount !== undefined}
label={errors.bendCount ? 'Please enter a positive integer' : ''}
{...field}
onChange={(event) => field.onChange(+event.target.value)}

InputProps={{
style: {
backgroundColor: 'white',
borderRadius: '16px',
},
}}
render={({ field }) => (
<TextField placeholder="Bends"
key='bend-count'
type='number'
error={errors.bendCount !== undefined}
label={errors.bendCount ? 'Please enter a positive integer' : ''}
{...field}
fullWidth
onChange={(event) => field.onChange(+event.target.value)}
></TextField>
)}
style={customInputStyle}
/>
</StepWrapper>
)}
/>
<img src="/images/progress3.png" style={{ marginTop: '50px', width: '17%' }} />
</StepWrapper>,
]

const deleteBend = () => {
Expand Down Expand Up @@ -189,18 +232,18 @@ function InputForm() {
<TextField placeholder={'0'}
key={`bends-${bendIndex}-${value.key}`}
fullWidth
variant="filled"
type='number'
error={errors.bends?.[bendIndex]?.[value.key] !== undefined}
{...field}
onChange={(event) => field.onChange(+event.target.value)}
style={customInputStyle}
></TextField>
)}
/></div></div>
</div>
)}
</div>
<button onClick={deleteBend} className=' text-error-red'>Delete Bend</button>
<button onClick={deleteBend} className=' text-error-red'>X delete bend</button>
</StepWrapper>
}

Expand All @@ -214,14 +257,33 @@ function InputForm() {
}

return (
<form onSubmit={handleSubmit(onSubmit)} className=' w-full h-screen bg-off-white flex flex-col justify-center items-center'>
{pageManager()}
<div className={` pb-32 w-1/2 flex flex-row ${pageNumber !== 0 ? 'justify-between' : 'justify-end'} place-content-end place-items-end`}>
{pageNumber !== 0 && <Button alt disabled={pageNumber === 0} handleClick={decrementPage} label='Back'></Button>}
{pageNumber === pages.length + getValues('bendCount') ? <Link to='/'><Button handleClick={() => console.log("home")} label='Go Home'></Button></Link> : <Button disabled={!isValid || pageNumber === pages.length + (getValues("bendCount") || 0)} handleClick={incrementPage} label='Next'></Button>}
<>
<div className="w-full fixed top-0 left-0 bg-off-white p-4 flex justify-between items-center" style={{ paddingLeft: '20px', paddingRight: '20px' }}>
<div style={{ display: 'flex', alignItems: 'center', marginLeft: '70px', marginTop: '30px' }}>
<img src="/images/graybox.png" alt="Gray Box" style={{ marginRight: '10px', width: '8%' }} />
<Link to="/create" style={{ fontSize: '14px', textDecoration: 'none', color: 'inherit' }}>
tubender
</Link>
</div>
</div>
</form>
)

<form onSubmit={handleSubmit(onSubmit)} className='w-full h-screen bg-off-white flex flex-col justify-center items-center pt-16'>
{pageManager()}
<div className={`pb-32 w-1/2 flex flex-row ${pageNumber !== 0 ? 'justify-between' : 'justify-end'} place-content-end place-items-end`}>
{pageNumber !== 0 && <Link to="#" onClick={decrementPage} className="text-lg font-normal text-current no-underline">Back</Link>}
{pageNumber < pages.length + getValues('bendCount') && (
<Button
label="Next"
handleClick={() => incrementPage()}
disabled={!isValid || pageNumber >= pages.length + getValues('bendCount')}
/>
)}
{pageNumber === pages.length + getValues('bendCount') && <Link to="/" className="text-lg font-normal text-current no-underline">Go Home</Link>}
</div>
</form>
</>
);

}

export default InputForm;
export default InputForm;
Loading

0 comments on commit 21d91f6

Please sign in to comment.