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 PropTypes from 'prop-types';
// import classNames from 'classnames';
import Grid from '@material-ui/core/Grid';
import { withStyles } from '@material-ui/core/styles';
import MenuItem from '@material-ui/core/MenuItem';
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 => ({
container: {
display: 'flex',
flexWrap: 'wrap',
},
textField: {
marginLeft: theme.spacing.unit,
marginLeft: theme.spacing.unit * 2,
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: {
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) {
var d = new Date(date),
month = '' + (d.getMonth() + 1),
@ -95,109 +115,150 @@ const confidenceLevels = [
},
];
/**
* The form compnent.
*/
class ReportForm extends React.Component {
/**
* State of form components.
*/
state = {
date: formatDate(new Date()),
time: '00:00',
multiline: 'Controlled',
type: '',
confidence: ''
};
/**
* Handles state change in form
* components.
*/
handleChange = name => event => {
this.setState({
[name]: event.target.value,
});
};
/**
* The render method for this component.
*/
render() {
const { classes } = this.props;
/**
* The actual form.
*/
return (
<form className={classes.container} noValidate autoComplete="off">
<TextField
id="select-sighting-type"
select
label="Select"
className={classes.textField}
value={this.state.type}
onChange={this.handleChange('type')}
SelectProps={{
MenuProps: {
className: classes.menu,
},
}}
helperText="Please select type of sighting"
margin="normal"
variant="outlined"
>
{sightingTypes.map(option => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
<form className={classes.container} noValidate autoComplete="off" method='GET'>
<Grid container spacing={8}>
<Grid item xs={5} xl={2}>
<TextField
id="select-sighting-type"
select
required
name="sighting-type"
label="Select"
className={classes.textField}
value={this.state.type}
onChange={this.handleChange('type')}
SelectProps={{
MenuProps: {
className: classes.menu,
},
}}
helperText="Please select type of sighting"
>
{sightingTypes.map(option => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
</Grid>
<TextField
id="select-confidence"
select
label="Select"
className={classes.textField}
value={this.state.confidence}
onChange={this.handleChange('confidence')}
SelectProps={{
MenuProps: {
className: classes.menu,
},
}}
helperText="Please select confidence in sighting"
margin="normal"
variant="outlined"
>
{confidenceLevels.map(option => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
<Grid item xs={5} xl={2}>
<TextField
id="select-confidence"
select
required
name="sighting-confidence"
label="Select"
className={classes.textField}
value={this.state.confidence}
onChange={this.handleChange('confidence')}
SelectProps={{
MenuProps: {
className: classes.menu,
},
}}
helperText="Please select confidence in sighting"
>
{confidenceLevels.map(option => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
</Grid>
<TextField
id="sighting-date"
label="Sighting date"
type="date"
value={this.state.date}
className={classes.textField}
onChange={this.handleChange('date')}
InputLabelProps={{
shrink: true,
}}
/>
<Grid item xs={12}>
<TextField
id="sighting-date"
required
label="Sighting date"
name="sighting-date"
type="date"
value={this.state.date}
className={classes.textField}
onChange={this.handleChange('date')}
InputLabelProps={{
shrink: true,
}}
/>
</Grid>
<TextField
id="sighting-time"
label="Sighting time"
type="time"
value={this.state.time}
className={classes.textField}
onChange={this.handleChange('time')}
InputLabelProps={{
shrink: true,
}}
/>
<TextField
id="sighting-description"
label="Description"
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 item xs={12}>
<TextField
id="sighting-time"
required
label="Sighting time"
name="sighting-time"
type="time"
margin="normal"
value={this.state.time}
className={classes.textField}
onChange={this.handleChange('time')}
InputLabelProps={{
shrink: true,
}}
/>
</Grid>
<Grid item xs={12}>
<TextField
id="sighting-description"
required
label="Description"
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>
);
}

2
src/pages/Report.js
View File

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