diff --git a/src/components/ReportForm.js b/src/components/ReportForm.js index ac72000..1c84462 100644 --- a/src/components/ReportForm.js +++ b/src/components/ReportForm.js @@ -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'; @@ -46,16 +46,11 @@ const styles = theme => ({ * this string in the database. * @param {*} date, Date passed in. */ -function formatDate(date) { - var d = new Date(date), - month = '' + (d.getMonth() + 1), - day = '' + d.getDate(), - year = d.getFullYear(); +function getYear(date) { + var d = new Date(date), + 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,33 +85,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: 'morning', + label: 'Morning', + }, + { + value: 'midday', + label: 'Midday', + }, + { + value: 'evening', + label: 'Evening', + }, + { + value: 'night', + label: 'Night', + }, + { + value: 'unknown', + label: 'Unknown', + }, +]; + /** * Levels of confidence. Label is what is * viewed in the application, value is * what is stored in the database. */ const confidenceLevels = [ - { - value: '1', - label: '1 - Strongly unconfident', - }, - { - value: '2', - label: '2 - Unconfident', - }, - { - value: '3', - label: '3 - Somewhat confident', - }, - { - value: '4', - label: '4 - Confident', - }, - { - value: '5', - label: '5 - Very confident', - }, - ]; + { + value: '1', + label: '1 - Strongly unconfident', + }, + { + value: '2', + label: '2 - Unconfident', + }, + { + value: '3', + label: '3 - Somewhat confident', + }, + { + value: '4', + label: '4 - Confident', + }, + { + value: '5', + label: '5 - Very confident', + }, +]; /** * The form component. @@ -136,8 +215,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: 'morning', type: 'visual', confidence: '1', desc: '', @@ -159,13 +239,13 @@ class ReportForm extends React.Component { * Get the coordinates * */ - getCoordinates = (lat,lng) => { + getCoordinates = (lat, lng) => { let latitude = lat; let longitude = lng; this.setState({ - lat: latitude, - lng: longitude + lat: latitude, + lng: longitude }); } @@ -181,7 +261,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 +269,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: 'morning', type: 'visual', confidence: '1', desc: '', @@ -198,7 +279,7 @@ class ReportForm extends React.Component { lng: '' }); }; - + /** * The render method for this component. @@ -210,129 +291,161 @@ class ReportForm extends React.Component { * The actual form. */ return ( - -
- - - - - - {sightingTypes.map(option => ( - - {option.label} - - ))} - - - - - - {confidenceLevels.map(option => ( - - {option.label} - - ))} - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + {sightingTypes.map(option => ( + + {option.label} + + ))} + - - + + + + {confidenceLevels.map(option => ( + + {option.label} + + ))} + + + + + + {timeTypes.map(option => ( + + {option.label} + + ))} + + + + + + {monthTypes.map(option => ( + + {option.label} + + ))} + + + + + + + + + + + + + + +
+ + + + + + +
); - } + } } ReportForm.propTypes = {