rushilwiz/wheelshare-frontend
1
0
Fork 0
mirror of https://github.com/myfatemi04/wheelshare-frontend.git synced 2025-04-21 11:20:17 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

aesthetics

Browse Source
This commit is contained in:
Joshua Hsueh 2021-04-11 01:53:08 -04:00
parent 42dd311cdc
commit 705279d958
1 changed files with 175 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

345
src/components/CreatePool.tsx
View File

@ -60,117 +60,121 @@ const CreatePool = () => {
}; };
useEffect(() => {}, []); useEffect(() => {}, []);
return ( return (
<div className="container"> <div
<Card className=""
className={classes.root + 'd-inline-flex'} style={{ minHeight: '100vh', backgroundColor: '#F1EAE8' }}
style={{ margin: '0.5rem', background: '#F3F5F4' }} >
> <div className="container">
<CardContent> <Card
<div className="form-group"> className={classes.root + 'd-inline-flex'}
<h1 className="form-title">Create Pool</h1> style={{ margin: '0', background: '#F3F5F4' }}
<label className="" htmlFor="title"> >
Pool Title:{' '} <CardContent>
</label> <div className="form-group">
<input <h1 className="form-title">Create Pool</h1>
type="text" <label className="" htmlFor="title">
id="title" Pool Title:{' '}
name="title" </label>
className="form-control d-flex" <input
placeholder="Enter title here..." type="text"
onChange={(event) => setTitle(event.target.value)} id="title"
></input> name="title"
</div> className="form-control d-flex"
<div className="form-group"> placeholder="Enter title here..."
<label className="" htmlFor="capacity"> onChange={(event) => setTitle(event.target.value)}
Pool Capacity: ></input>
</label> </div>
<input <div className="form-group">
type="number" <label className="" htmlFor="capacity">
id="capacity" Pool Capacity:
name="capacity" </label>
className="form-control d-flex" <input
placeholder="0" type="number"
onChange={(event) => setCapacity(parseInt(event.target.value))} id="capacity"
></input> name="capacity"
</div> className="form-control d-flex"
<div className="form-group"> placeholder="0"
<label className="" htmlFor="pool_start"> onChange={(event) => setCapacity(parseInt(event.target.value))}
Start Time: ></input>
</label> </div>
<input <div className="form-group">
type="datetime-local" <label className="" htmlFor="pool_start">
id="pool_start" Start Time:
name="pool_start" </label>
className="form-control" <input
placeholder="" type="datetime-local"
onChange={(event) => setStart(event.target.value)} id="pool_start"
></input> name="pool_start"
</div> className="form-control"
<div className="form-group"> placeholder=""
<label className="" htmlFor="pool_end"> onChange={(event) => setStart(event.target.value)}
End Time: ></input>
</label> </div>
<input <div className="form-group">
type="datetime-local" <label className="" htmlFor="pool_end">
id="pool_end" End Time:
name="pool_end" </label>
className="form-control" <input
placeholder="Enter text here..." type="datetime-local"
onChange={(event) => setEnd(event.target.value)} id="pool_end"
></input> name="pool_end"
</div> className="form-control"
<div className="form-group"> placeholder="Enter text here..."
<label className="" htmlFor="pool_direction"> onChange={(event) => setEnd(event.target.value)}
Direction: ></input>
</label> </div>
<select <div className="form-group">
id="direction" <label className="" htmlFor="pool_direction">
name="direction" Direction:
onChange={(event) => setDirection(event.target.value)} </label>
> <select
<option value="pickup">Picking Up</option> id="direction"
<option value="dropoff">Dropping Off</option> name="direction"
</select> onChange={(event) => setDirection(event.target.value)}
</div> >
<div className="form-group"> <option value="pickup">Picking Up</option>
<label className="" htmlFor="pool_type"> <option value="dropoff">Dropping Off</option>
Type: </select>
</label> </div>
<select <div className="form-group">
id="type" <label className="" htmlFor="pool_type">
name="type" Type:
onChange={(event) => setType(event.target.value)} </label>
> <select
<option value="offer">Offering carpool</option> id="type"
<option value="request">Requesting carpool</option> name="type"
</select> onChange={(event) => setType(event.target.value)}
</div> >
<div className="form-group"> <option value="offer">Offering carpool</option>
<label className="" htmlFor="title"> <option value="request">Requesting carpool</option>
Pool Description: </select>
</label> </div>
<textarea <div className="form-group">
onChange={(event) => setDescription(event.target.value)} <label className="" htmlFor="title">
id="Pool-text" Pool Description:
name="Pool-text" </label>
style={{ height: '200px' }} <textarea
className="form-control" onChange={(event) => setDescription(event.target.value)}
placeholder="Enter text here..." id="Pool-text"
/> name="Pool-text"
</div> style={{ height: '200px' }}
<div className="form-group"> className="form-control"
<label className="" htmlFor="pool_start"> placeholder="Enter text here..."
Group: />
</label> </div>
<input <div className="form-group">
type="text" <label className="" htmlFor="pool_start">
className="form-control" Group:
placeholder="" </label>
onChange={(event) => setGroup(event.target.value)} <input
></input> type="text"
</div> className="form-control"
<div className="form-group"> placeholder=""
{/* <label className="" htmlFor="location"> onChange={(event) => setGroup(event.target.value)}
></input>
</div>
<div className="form-group">
{/* <label className="" htmlFor="location">
Location: Location:
</label> </label>
<input <input
@ -190,66 +194,67 @@ const CreatePool = () => {
> >
Search Search
</button> */} </button> */}
<PlacesAutocomplete <PlacesAutocomplete
value={address} value={address}
onChange={handleChange} onChange={handleChange}
onSelect={handleSelect} onSelect={handleSelect}
> >
{({ {({
getInputProps, getInputProps,
suggestions, suggestions,
getSuggestionItemProps, getSuggestionItemProps,
loading, loading,
}) => ( }) => (
<div> <div>
<label className="" htmlFor="address"> <label className="" htmlFor="address">
Address: Address:
</label> </label>
<input <input
name="address" name="address"
id="address" id="address"
{...getInputProps({ {...getInputProps({
placeholder: 'Search Places ...', placeholder: 'Search Places ...',
className: 'location-search-input form-control', className: 'location-search-input form-control',
})} })}
/> />
<div className="autocomplete-dropdown-container"> <div className="autocomplete-dropdown-container">
{loading && <div>Loading...</div>} {loading && <div>Loading...</div>}
{suggestions.map((suggestion) => { {suggestions.map((suggestion) => {
const className = suggestion.active const className = suggestion.active
? 'suggestion-item--active' ? 'suggestion-item--active'
: 'suggestion-item'; : 'suggestion-item';
// inline style for demonstration purpose // inline style for demonstration purpose
const style = suggestion.active const style = suggestion.active
? { backgroundColor: '#fafafa', cursor: 'pointer' } ? { backgroundColor: '#fafafa', cursor: 'pointer' }
: { backgroundColor: '#ffffff', cursor: 'pointer' }; : { backgroundColor: '#ffffff', cursor: 'pointer' };
return ( return (
<div <div
{...getSuggestionItemProps(suggestion, { {...getSuggestionItemProps(suggestion, {
className, className,
style, style,
})} })}
> >
<span>{suggestion.description}</span> <span>{suggestion.description}</span>
</div> </div>
); );
})} })}
</div>
</div> </div>
</div> )}
)} </PlacesAutocomplete>
</PlacesAutocomplete> </div>
</div> <Button
<Button variant="contained"
variant="contained" color="primary"
color="primary" className={classes.button}
className={classes.button} onClick={onClick}
onClick={onClick} startIcon={<CloudUploadIcon />}
startIcon={<CloudUploadIcon />} >
> Submit
Submit </Button>
</Button> </CardContent>
</CardContent> </Card>
</Card> </div>
</div> </div>
); );
}; };