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

194
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 Grid from '@material-ui/core/Grid';
import { withStyles } from '@material-ui/core/styles';
@ -40,22 +40,15 @@ 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.
* year as a string that
* Material UI can use.
* @param {*} date, Date passed in.
*/
function formatDate(date) {
function getYear(date) {
var d = new Date(date),
month = '' + (d.getMonth() + 1),
day = '' + d.getDate(),
year = d.getFullYear();
if (month.length < 2) month = '0' + month;
if (day.length < 2) day = '0' + day;
return [year, month, day].join('-');
return year;
}
/**
@ -90,6 +83,90 @@ 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
* viewed in the application, value is
@ -98,25 +175,25 @@ const sightingTypes = [
const confidenceLevels = [
{
value: '1',
label: '1 - Strongly unconfident',
label: '1 - Strongly disagree',
},
{
value: '2',
label: '2 - Unconfident',
label: '2 - Disagree',
},
{
value: '3',
label: '3 - Somewhat confident',
label: '3 - Neutral',
},
{
value: '4',
label: '4 - Confident',
label: '4 - Agree',
},
{
value: '5',
label: '5 - Very confident',
label: '5 - Strongly agree',
},
];
];
/**
* The form component.
@ -136,8 +213,9 @@ class ReportForm extends React.Component {
* State of form components.
*/
state = {
date: formatDate(new Date()),
time: '00:00',
month: '01',
year: getYear(new Date()),
time: 'unknown',
type: 'visual',
confidence: '1',
desc: '',
@ -159,7 +237,7 @@ class ReportForm extends React.Component {
* Get the coordinates
*
*/
getCoordinates = (lat,lng) => {
getCoordinates = (lat, lng) => {
let latitude = lat;
let longitude = lng;
@ -181,7 +259,7 @@ class ReportForm extends React.Component {
const sighting = {
type: this.state.type,
confidence: this.state.confidence,
date: this.state.date,
date: this.state.year + '-' + this.state.month,
time: this.state.time,
desc: this.state.desc,
lat: this.state.lat,
@ -189,8 +267,9 @@ class ReportForm extends React.Component {
}
sightingsRef.push(sighting);
this.setState({
date: formatDate(new Date()),
time: '00:00',
year: getYear(new Date()),
month: '01',
time: 'unknown',
type: 'visual',
confidence: '1',
desc: '',
@ -255,7 +334,7 @@ class ReportForm extends React.Component {
className: classes.menu,
},
}}
helperText="Please select confidence in sighting"
helperText="I am confident of my marten sighting"
>
{confidenceLevels.map(option => (
<MenuItem key={option.value} value={option.value}>
@ -267,31 +346,62 @@ class ReportForm extends React.Component {
<Grid item xs={12}>
<TextField
id="sighting-date"
id="sighting-time"
select
required
label="Sighting date"
name="sighting-date"
type="date"
value={this.state.date}
label="Sighting time"
name="sighting-time"
className={classes.textField}
onChange={this.handleChange('date')}
InputLabelProps={{
shrink: true,
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-time"
id="sighting-month"
select
required
label="Sighting time"
name="sighting-time"
type="time"
margin="normal"
value={this.state.time}
label="Sighting month"
name="sighting-month"
className={classes.textField}
onChange={this.handleChange('time')}
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,
}}
@ -326,7 +436,7 @@ class ReportForm extends React.Component {
</Grid>
</Grid>
<Grid item xs={6}>
<GoogleMap onClick={this.getCoordinates}/>
<GoogleMap onClick={this.getCoordinates} />
</Grid>
</Grid>
</form>