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

Merge pull request #33 from alDuncanson/refactor/report-form 

Updated report form to sponsor's specifications.
This commit is contained in:
Jacob McCloughan 2018-10-19 22:13:22 -04:00 committed by GitHub
parent a7ca249d1e 204f3d2a7a
commit de484052f7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 275 additions and 165 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

440
src/components/ReportForm.js
View File

@ -1,4 +1,4 @@
import React, {Fragment} from 'react'; import React, { Fragment } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import Grid from '@material-ui/core/Grid'; import Grid from '@material-ui/core/Grid';
import { withStyles } from '@material-ui/core/styles'; import { withStyles } from '@material-ui/core/styles';
@ -40,22 +40,15 @@ const styles = theme => ({
/** /**
* Function for formatting the * Function for formatting the
* date as a string that * year as a string that
* Material UI can use. We'll * Material UI can use.
* also store the date like
* this string in the database.
* @param {*} date, Date passed in. * @param {*} date, Date passed in.
*/ */
function formatDate(date) { function getYear(date) {
var d = new Date(date), var d = new Date(date),
month = '' + (d.getMonth() + 1), year = d.getFullYear();
day = '' + d.getDate(),
year = d.getFullYear();
if (month.length < 2) month = '0' + month; return year;
if (day.length < 2) day = '0' + day;
return [year, month, day].join('-');
} }
/** /**
@ -90,33 +83,117 @@ const sightingTypes = [
}, },
]; ];
/**
* Types of sightings. Label is what is
* viewed in the application, value is
* what is stored in the database.
*/
const monthTypes = [
{
value: '01',
label: 'January',
},
{
value: '02',
label: 'February',
},
{
value: '03',
label: 'March',
},
{
value: '04',
label: 'April',
},
{
value: '05',
label: 'May',
},
{
value: '06',
label: 'June',
},
{
value: '07',
label: 'July',
},
{
value: '08',
label: 'August',
},
{
value: '09',
label: 'September',
},
{
value: '10',
label: 'October',
},
{
value: '11',
label: 'November',
},
{
value: '12',
label: 'December',
},
];
/**
* Types of sightings. Label is what is
* viewed in the application, value is
* what is stored in the database.
*/
const timeTypes = [
{
value: 'unknown',
label: 'Unknown',
},
{
value: 'morning',
label: 'Morning',
},
{
value: 'midday',
label: 'Midday',
},
{
value: 'evening',
label: 'Evening',
},
{
value: 'night',
label: 'Night',
},
];
/** /**
* Levels of confidence. Label is what is * Levels of confidence. Label is what is
* viewed in the application, value is * viewed in the application, value is
* what is stored in the database. * what is stored in the database.
*/ */
const confidenceLevels = [ const confidenceLevels = [
{ {
value: '1', value: '1',
label: '1 - Strongly unconfident', label: '1 - Strongly disagree',
}, },
{ {
value: '2', value: '2',
label: '2 - Unconfident', label: '2 - Disagree',
}, },
{ {
value: '3', value: '3',
label: '3 - Somewhat confident', label: '3 - Neutral',
}, },
{ {
value: '4', value: '4',
label: '4 - Confident', label: '4 - Agree',
}, },
{ {
value: '5', value: '5',
label: '5 - Very confident', label: '5 - Strongly agree',
}, },
]; ];
/** /**
* The form component. * The form component.
@ -136,8 +213,9 @@ class ReportForm extends React.Component {
* State of form components. * State of form components.
*/ */
state = { state = {
date: formatDate(new Date()), month: '01',
time: '00:00', year: getYear(new Date()),
time: 'unknown',
type: 'visual', type: 'visual',
confidence: '1', confidence: '1',
desc: '', desc: '',
@ -159,13 +237,13 @@ class ReportForm extends React.Component {
* Get the coordinates * Get the coordinates
* *
*/ */
getCoordinates = (lat,lng) => { getCoordinates = (lat, lng) => {
let latitude = lat; let latitude = lat;
let longitude = lng; let longitude = lng;
this.setState({ this.setState({
lat: latitude, lat: latitude,
lng: longitude lng: longitude
}); });
} }
@ -181,7 +259,7 @@ class ReportForm extends React.Component {
const sighting = { const sighting = {
type: this.state.type, type: this.state.type,
confidence: this.state.confidence, confidence: this.state.confidence,
date: this.state.date, date: this.state.year + '-' + this.state.month,
time: this.state.time, time: this.state.time,
desc: this.state.desc, desc: this.state.desc,
lat: this.state.lat, lat: this.state.lat,
@ -189,8 +267,9 @@ class ReportForm extends React.Component {
} }
sightingsRef.push(sighting); sightingsRef.push(sighting);
this.setState({ this.setState({
date: formatDate(new Date()), year: getYear(new Date()),
time: '00:00', month: '01',
time: 'unknown',
type: 'visual', type: 'visual',
confidence: '1', confidence: '1',
desc: '', desc: '',
@ -198,7 +277,7 @@ class ReportForm extends React.Component {
lng: '' lng: ''
}); });
}; };
/** /**
* The render method for this component. * The render method for this component.
@ -210,129 +289,160 @@ class ReportForm extends React.Component {
* The actual form. * The actual form.
*/ */
return ( return (
<Fragment> <Fragment>
<form className={classes.container} autoComplete="off" onSubmit={this.handleSubmit}> <form className={classes.container} autoComplete="off" onSubmit={this.handleSubmit}>
<Grid container> <Grid container>
<Grid item xs={6}> <Grid item xs={6}>
<Grid container spacing={8}> <Grid container spacing={8}>
<Grid item xs={12}> <Grid item xs={12}>
<TextField <TextField
id="select-sighting-type" id="select-sighting-type"
select select
required required
name="sighting-type" name="sighting-type"
label="Select" label="Select"
className={classes.textField} className={classes.textField}
value={this.state.type} value={this.state.type}
onChange={this.handleChange('type')} onChange={this.handleChange('type')}
SelectProps={{ SelectProps={{
MenuProps: { MenuProps: {
className: classes.menu, className: classes.menu,
}, },
}} }}
helperText="Please select type of sighting" helperText="Please select type of sighting"
> >
{sightingTypes.map(option => ( {sightingTypes.map(option => (
<MenuItem key={option.value} value={option.value}> <MenuItem key={option.value} value={option.value}>
{option.label} {option.label}
</MenuItem> </MenuItem>
))} ))}
</TextField> </TextField>
</Grid>
<Grid item xs={12}>
<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>
<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>
<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."
value={this.state.desc}
className={classes.textField}
onChange={this.handleChange('desc')}
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>
</Grid>
<Grid item xs={6}>
<GoogleMap onClick={this.getCoordinates}/>
</Grid>
</Grid> </Grid>
</form>
</Fragment> <Grid item xs={12}>
<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="I am confident of my marten sighting"
>
{confidenceLevels.map(option => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
</Grid>
<Grid item xs={12}>
<TextField
id="sighting-time"
select
required
label="Sighting time"
name="sighting-time"
className={classes.textField}
value={this.state.time}
onChange={this.handleChange('time')}
SelectProps={{
MenuProps: {
className: classes.menu,
},
}}
>
{timeTypes.map(option => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
</Grid>
<Grid item xs={12}>
<TextField
id="sighting-month"
select
required
label="Sighting month"
name="sighting-month"
className={classes.textField}
value={this.state.month}
onChange={this.handleChange('month')}
SelectProps={{
MenuProps: {
className: classes.menu,
},
}}
>
{monthTypes.map(option => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
</Grid>
<Grid item xs={12}>
<TextField
id="sighting-year"
required
label="Sighting year"
name="sighting-year"
value={this.state.year}
type="number"
className={classes.textField}
onChange={this.handleChange('year')}
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."
value={this.state.desc}
className={classes.textField}
onChange={this.handleChange('desc')}
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>
</Grid>
<Grid item xs={6}>
<GoogleMap onClick={this.getCoordinates} />
</Grid>
</Grid>
</form>
</Fragment>
); );
} }
} }
ReportForm.propTypes = { ReportForm.propTypes = {