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

better form ui

Browse Source
This commit is contained in:
Joshua Hsueh 2021-04-10 21:18:17 -04:00
parent 8ea818a39a
commit 643aea4340
2 changed files with 204 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
src/components/CreateGroup.tsx
View File

@ -1,43 +1,76 @@
import { useCallback } from 'react'; import { useCallback } from 'react';
import { makeAPIPostCall } from '../api/utils';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import { useState, useEffect } from 'react';
import CloudUploadIcon from '@material-ui/icons/CloudUpload';
const useStyles = makeStyles((theme) => ({
root: {
maxWidth: 345,
},
media: {
height: 140,
},
button: {
margin: theme.spacing(1),
},
}));
const CreateGroup = () => { const CreateGroup = () => {
const onSubmit = useCallback<React.FormEventHandler<HTMLFormElement>>((e) => { const [title, setTitle] = useState('No Title');
e.preventDefault(); const classes = useStyles();
useEffect(() => {}, []);
fetch(`${process.env.REACT_APP_API_ENDPOINT}/createPool`) const onClick = () => {
.then((response) => response.json()) console.log({
.then((data) => { title: title,
console.log(data); });
}); makeAPIPostCall('/group', {
}, []); title,
});
};
return ( return (
<div <div className="container">
className="bg-dark" <Card
style={{ minHeight: '100vh', fontFamily: 'Courier New' }} className={classes.root + 'd-inline-flex'}
> style={{ margin: '0.5rem', background: '#F3F5F4' }}
<div
className="container card card-body text-left "
style={{ backgroundColor: '#F1EAE8' }}
> >
<form onSubmit={onSubmit}> <CardContent>
<div className="form-group"> <Typography gutterBottom variant="h5" component="h2"></Typography>
<h1 className="form-title" style={{ fontFamily: 'Impact' }}> <Typography variant="body2" color="textSecondary" component="p">
Create Group <form>
</h1> <div className="form-group">
<label className="" htmlFor="title"> <h1 className="form-title" style={{ fontFamily: 'Impact' }}>
Group Title:{' '} Create Group
</label> </h1>
<input <label className="" htmlFor="title">
type="text" Group Title:{' '}
id="title" </label>
name="title" <input
className="form-control d-flex" type="text"
placeholder="Enter title here..." id="title"
/> name="title"
</div> className="form-control d-flex"
</form> placeholder="Enter title here..."
</div> onChange={(event) => setTitle(event.target.value)}
/>
</div>
<Button
variant="contained"
color="primary"
className={classes.button}
onClick={onClick}
startIcon={<CloudUploadIcon />}
>
Submit
</Button>
</form>
</Typography>
</CardContent>
</Card>
</div> </div>
); );
}; };

256
src/components/CreatePool.tsx
View File

@ -1,7 +1,23 @@
import { FormEventHandler } from 'react'; import { FormEventHandler } from 'react';
import { makeAPIPostCall } from '../api/utils'; import { makeAPIPostCall } from '../api/utils';
import React, { useState, useEffect } from 'react'; import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import CloudUploadIcon from '@material-ui/icons/CloudUpload';
import { useState, useEffect } from 'react';
const useStyles = makeStyles((theme) => ({
root: {
maxWidth: 345,
},
media: {
height: 140,
},
button: {
margin: theme.spacing(1),
},
}));
const CreatePool = () => { const CreatePool = () => {
const [title, setTitle] = useState('No Title'); const [title, setTitle] = useState('No Title');
const [capacity, setCapacity] = useState(0); const [capacity, setCapacity] = useState(0);
@ -10,16 +26,8 @@ const CreatePool = () => {
const [direction, setDirection] = useState('pickup'); const [direction, setDirection] = useState('pickup');
const [type, setType] = useState('offer'); const [type, setType] = useState('offer');
const [description, setDescription] = useState(''); const [description, setDescription] = useState('');
const classes = useStyles();
const onSubmit: FormEventHandler<HTMLFormElement> = (e) => {
e.preventDefault();
fetch(`${process.env.REACT_APP_API_ENDPOINT}/createPool`)
.then((response) => response.json())
.then((data) => {
console.log(data);
});
};
const onClick = () => { const onClick = () => {
console.log({ console.log({
title: title, title: title,
@ -42,116 +50,126 @@ const CreatePool = () => {
}; };
useEffect(() => {}, []); useEffect(() => {}, []);
return ( return (
<div <div className="container">
className="bg-dark" <Card
style={{ minHeight: '100vh', fontFamily: 'Courier New' }} className={classes.root + 'd-inline-flex'}
> style={{ margin: '0.5rem', background: '#F3F5F4' }}
<div
className="container card card-body text-left "
style={{ backgroundColor: '#F1EAE8' }}
> >
<form onSubmit={onSubmit}> <CardContent>
<div className="form-group"> <Typography gutterBottom variant="h5" component="h2"></Typography>
<h1 className="form-title" style={{ fontFamily: 'Impact' }}> <Typography variant="body2" color="textSecondary" component="p">
Create Pool <form>
</h1> <div className="form-group">
<label className="" htmlFor="title"> <h1 className="form-title" style={{ fontFamily: 'Impact' }}>
Pool Title:{' '} Create Pool
</label> </h1>
<input <label className="" htmlFor="title">
type="text" Pool Title:{' '}
id="title" </label>
name="title" <input
className="form-control d-flex" type="text"
placeholder="Enter title here..." id="title"
onChange={(event) => setTitle(event.target.value)} name="title"
></input> className="form-control d-flex"
</div> placeholder="Enter title here..."
<div className="form-group"> onChange={(event) => setTitle(event.target.value)}
<label className="" htmlFor="capacity"> ></input>
Pool Capacity: </div>
</label> <div className="form-group">
<input <label className="" htmlFor="capacity">
type="number" Pool Capacity:
id="capacity" </label>
name="capacity" <input
className="form-control d-flex" type="number"
placeholder="0" id="capacity"
onChange={(event) => setCapacity(parseInt(event.target.value))} name="capacity"
></input> className="form-control d-flex"
</div> placeholder="0"
<div className="form-group"> onChange={(event) =>
<label className="" htmlFor="pool_start"> setCapacity(parseInt(event.target.value))
Start Time: }
</label> ></input>
<input </div>
type="datetime-local" <div className="form-group">
id="pool_start" <label className="" htmlFor="pool_start">
name="pool_start" Start Time:
className="form-control" </label>
placeholder="" <input
onChange={(event) => setStart(event.target.value)} type="datetime-local"
></input> id="pool_start"
</div> name="pool_start"
<div className="form-group"> className="form-control"
<label className="" htmlFor="pool_end"> placeholder=""
End Time: onChange={(event) => setStart(event.target.value)}
</label> ></input>
<input </div>
type="datetime-local" <div className="form-group">
id="pool_end" <label className="" htmlFor="pool_end">
name="pool_end" End Time:
className="form-control" </label>
placeholder="Enter text here..." <input
onChange={(event) => setEnd(event.target.value)} type="datetime-local"
></input> id="pool_end"
</div> name="pool_end"
<div className="form-group"> className="form-control"
<label className="" htmlFor="pool_direction"> placeholder="Enter text here..."
Direction: onChange={(event) => setEnd(event.target.value)}
</label> ></input>
<select </div>
id="direction" <div className="form-group">
name="direction" <label className="" htmlFor="pool_direction">
onChange={(event) => setDirection(event.target.value)} Direction:
> </label>
<option value="pickup">Picking Up</option> <select
<option value="dropoff">Dropping Off</option> id="direction"
</select> name="direction"
</div> onChange={(event) => setDirection(event.target.value)}
<div className="form-group"> >
<label className="" htmlFor="pool_type"> <option value="pickup">Picking Up</option>
Type: <option value="dropoff">Dropping Off</option>
</label> </select>
<select </div>
id="type" <div className="form-group">
name="type" <label className="" htmlFor="pool_type">
onChange={(event) => setType(event.target.value)} Type:
> </label>
<option value="offer">Offering carpool</option> <select
<option value="request">Requesting carpooll</option> id="type"
</select> name="type"
</div> onChange={(event) => setType(event.target.value)}
<div className="form-group"> >
<label className="" htmlFor="title"> <option value="offer">Offering carpool</option>
Pool Description: <option value="request">Requesting carpooll</option>
</label> </select>
<textarea </div>
onChange={(event) => setDescription(event.target.value)} <div className="form-group">
id="Pool-text" <label className="" htmlFor="title">
name="Pool-text" Pool Description:
style={{ height: '200px' }} </label>
className="form-control" <textarea
placeholder="Enter text here..." onChange={(event) => setDescription(event.target.value)}
/> id="Pool-text"
</div> name="Pool-text"
style={{ height: '200px' }}
className="form-control"
placeholder="Enter text here..."
/>
</div>
<button className="btn btn-success text-left" onClick={onClick}> <Button
Submit variant="contained"
</button> color="primary"
<br /> className={classes.button}
</form> onClick={onClick}
</div> startIcon={<CloudUploadIcon />}
>
Submit
</Button>
<br />
</form>
</Typography>
</CardContent>
</Card>
</div> </div>
); );
}; };