Improved layout of form. Actually got data sending over a GET form method.
This commit is contained in:
wildscotsmen
parent
cf9e4d384a
commit
c22bcae00d
|
|
@ -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,29 +115,48 @@ 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">
|
||||
<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}
|
||||
|
|
@ -128,8 +167,6 @@ class ReportForm extends React.Component {
|
|||
},
|
||||
}}
|
||||
helperText="Please select type of sighting"
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
>
|
||||
{sightingTypes.map(option => (
|
||||
<MenuItem key={option.value} value={option.value}>
|
||||
|
|
@ -137,10 +174,14 @@ class ReportForm extends React.Component {
|
|||
</MenuItem>
|
||||
))}
|
||||
</TextField>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={5} xl={2}>
|
||||
<TextField
|
||||
id="select-confidence"
|
||||
select
|
||||
required
|
||||
name="sighting-confidence"
|
||||
label="Select"
|
||||
className={classes.textField}
|
||||
value={this.state.confidence}
|
||||
|
|
@ -151,8 +192,6 @@ class ReportForm extends React.Component {
|
|||
},
|
||||
}}
|
||||
helperText="Please select confidence in sighting"
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
>
|
||||
{confidenceLevels.map(option => (
|
||||
<MenuItem key={option.value} value={option.value}>
|
||||
|
|
@ -160,10 +199,14 @@ class ReportForm extends React.Component {
|
|||
</MenuItem>
|
||||
))}
|
||||
</TextField>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12}>
|
||||
<TextField
|
||||
id="sighting-date"
|
||||
required
|
||||
label="Sighting date"
|
||||
name="sighting-date"
|
||||
type="date"
|
||||
value={this.state.date}
|
||||
className={classes.textField}
|
||||
|
|
@ -172,11 +215,16 @@ class ReportForm extends React.Component {
|
|||
shrink: true,
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<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')}
|
||||
|
|
@ -184,9 +232,14 @@ class ReportForm extends React.Component {
|
|||
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."
|
||||
|
|
@ -198,6 +251,14 @@ class ReportForm extends React.Component {
|
|||
shrink: true,
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12}>
|
||||
<Button variant="contained" type="submit" color="primary" className={classes.button}>
|
||||
Submit
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue