GVSU/marten-application
GVSU
/
marten-application
1
0
Fork 0
Code Pull Requests Releases Activity

Improved layout of form. Actually got data sending over a GET form method.

This commit is contained in:
wildscotsmen 2018-09-21 16:38:20 -04:00
parent cf9e4d384a
commit c22bcae00d
2 changed files with 147 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

231
src/components/ReportForm.js
View File

@ -1,19 +1,31 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
// import classNames from 'classnames'; import Grid from '@material-ui/core/Grid';
import { withStyles } from '@material-ui/core/styles'; import { withStyles } from '@material-ui/core/styles';
import MenuItem from '@material-ui/core/MenuItem'; import MenuItem from '@material-ui/core/MenuItem';
import TextField from '@material-ui/core/TextField'; import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
/**
* Styles that the different
* Material UI components pull
* in. Mostly used for spacing.
*/
const styles = theme => ({ const styles = theme => ({
container: { container: {
display: 'flex', display: 'flex',
flexWrap: 'wrap', flexWrap: 'wrap',
}, },
textField: { textField: {
marginLeft: theme.spacing.unit, marginLeft: theme.spacing.unit * 2,
marginRight: theme.spacing.unit, marginRight: theme.spacing.unit,
marginTop: theme.spacing.unit, marginTop: theme.spacing.unit * 2,
flexBasis: 280,
},
button: {
marginLeft: theme.spacing.unit * 2,
marginRight: theme.spacing.unit,
marginTop: theme.spacing.unit * 2,
}, },
dense: { dense: {
marginTop: 30, marginTop: 30,
@ -23,6 +35,14 @@ const styles = theme => ({
}, },
}); });
/**
* Function for formatting the
* date as a string that
* Material UI can use. We'll
* also store the date like
* this string in the database.
* @param {*} date, Date passed in.
*/
function formatDate(date) { function formatDate(date) {
var d = new Date(date), var d = new Date(date),
month = '' + (d.getMonth() + 1), month = '' + (d.getMonth() + 1),
@ -95,109 +115,150 @@ const confidenceLevels = [
}, },
]; ];
/**
* The form compnent.
*/
class ReportForm extends React.Component { class ReportForm extends React.Component {
/**
* State of form components.
*/
state = { state = {
date: formatDate(new Date()), date: formatDate(new Date()),
time: '00:00', time: '00:00',
multiline: 'Controlled',
type: '', type: '',
confidence: '' confidence: ''
}; };
/**
* Handles state change in form
* components.
*/
handleChange = name => event => { handleChange = name => event => {
this.setState({ this.setState({
[name]: event.target.value, [name]: event.target.value,
}); });
}; };
/**
* The render method for this component.
*/
render() { render() {
const { classes } = this.props; const { classes } = this.props;
/**
* The actual form.
*/
return ( return (
<form className={classes.container} noValidate autoComplete="off"> <form className={classes.container} noValidate autoComplete="off" method='GET'>
<TextField <Grid container spacing={8}>
id="select-sighting-type" <Grid item xs={5} xl={2}>
select <TextField
label="Select" id="select-sighting-type"
className={classes.textField} select
value={this.state.type} required
onChange={this.handleChange('type')} name="sighting-type"
SelectProps={{ label="Select"
MenuProps: { className={classes.textField}
className: classes.menu, value={this.state.type}
}, onChange={this.handleChange('type')}
}} SelectProps={{
helperText="Please select type of sighting" MenuProps: {
margin="normal" className: classes.menu,
variant="outlined" },
> }}
{sightingTypes.map(option => ( helperText="Please select type of sighting"
<MenuItem key={option.value} value={option.value}> >
{option.label} {sightingTypes.map(option => (
</MenuItem> <MenuItem key={option.value} value={option.value}>
))} {option.label}
</TextField> </MenuItem>
))}
</TextField>
</Grid>
<TextField <Grid item xs={5} xl={2}>
id="select-confidence" <TextField
select id="select-confidence"
label="Select" select
className={classes.textField} required
value={this.state.confidence} name="sighting-confidence"
onChange={this.handleChange('confidence')} label="Select"
SelectProps={{ className={classes.textField}
MenuProps: { value={this.state.confidence}
className: classes.menu, onChange={this.handleChange('confidence')}
}, SelectProps={{
}} MenuProps: {
helperText="Please select confidence in sighting" className: classes.menu,
margin="normal" },
variant="outlined" }}
> helperText="Please select confidence in sighting"
{confidenceLevels.map(option => ( >
<MenuItem key={option.value} value={option.value}> {confidenceLevels.map(option => (
{option.label} <MenuItem key={option.value} value={option.value}>
</MenuItem> {option.label}
))} </MenuItem>
</TextField> ))}
</TextField>
</Grid>
<TextField <Grid item xs={12}>
id="sighting-date" <TextField
label="Sighting date" id="sighting-date"
type="date" required
value={this.state.date} label="Sighting date"
className={classes.textField} name="sighting-date"
onChange={this.handleChange('date')} type="date"
InputLabelProps={{ value={this.state.date}
shrink: true, className={classes.textField}
}} onChange={this.handleChange('date')}
/> InputLabelProps={{
shrink: true,
}}
/>
</Grid>
<TextField <Grid item xs={12}>
id="sighting-time" <TextField
label="Sighting time" id="sighting-time"
type="time" required
value={this.state.time} label="Sighting time"
className={classes.textField} name="sighting-time"
onChange={this.handleChange('time')} type="time"
InputLabelProps={{ margin="normal"
shrink: true, value={this.state.time}
}} className={classes.textField}
/> onChange={this.handleChange('time')}
<TextField InputLabelProps={{
id="sighting-description" shrink: true,
label="Description" }}
multiline />
rows="5" </Grid>
placeholder="Describe the sighting to the best of your ability."
defaultValue="" <Grid item xs={12}>
className={classes.textField} <TextField
margin="normal" id="sighting-description"
variant="outlined" required
InputLabelProps={{ label="Description"
shrink: true, name="sighting-desc"
}} multiline
/> rows="5"
placeholder="Describe the sighting to the best of your ability."
defaultValue=""
className={classes.textField}
margin="normal"
variant="outlined"
InputLabelProps={{
shrink: true,
}}
/>
</Grid>
<Grid item xs={12}>
<Button variant="contained" type="submit" color="primary" className={classes.button}>
Submit
</Button>
</Grid>
</Grid>
</form> </form>
); );
} }

2
src/pages/Report.js
View File

@ -5,7 +5,7 @@ import Typography from '@material-ui/core/Typography';
class Report extends Component { class Report extends Component {
render() { render() {
return ( return (
<Typography variant='display1' align='center' gutterBottom> <Typography variant='display1' align='left' gutterBottom>
<ReportForm/> <ReportForm/>
</Typography> </Typography>
); );