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