diff --git a/src/components/ReportForm.js b/src/components/ReportForm.js index 7d50473..b30952d 100644 --- a/src/components/ReportForm.js +++ b/src/components/ReportForm.js @@ -53,19 +53,6 @@ const styles = theme => ({ }, }); -/** - * Function for formatting the - * year as a string that - * Material UI can use. - * @param {*} date, Date passed in. - */ -function getYear(date) { - var d = new Date(date), - year = d.getFullYear(); - - return year; -} - /** * Types of sightings. Label is what is * viewed in the application, value is @@ -228,8 +215,8 @@ class ReportForm extends React.Component { * State of form components. */ state = { - month: '01', - year: getYear(new Date()), + month: this.getMonth(new Date()), + year: this.getYear(new Date()), time: 'unknown', type: 'visual', confidence: '1', @@ -249,6 +236,38 @@ class ReportForm extends React.Component { }); }; + /** + * Function for formatting the + * year as a string that + * Material UI can use. + * @param {*} date, Date passed in. + */ + getYear = date => { + var d = new Date(date), + year = d.getFullYear(); + + return year; + } + + /** + * Function for formatting the + * month as a string that + * Material UI can use. + * @param {*} date, Date passed in. + */ + getMonth = date => { + var d = new Date(date), + month = d.getMonth(); + + month = month.toString(); + + if (month.length == 1) { + month = "0" + month; + } + + return month; + } + /** * Handles closing the toast. */ @@ -294,8 +313,8 @@ class ReportForm extends React.Component { } sightingsRef.push(sighting); this.setState({ - year: getYear(new Date()), - month: '01', + year: this.getYear(new Date()), + month: this.getMonth(new Date()), time: 'unknown', type: 'visual', confidence: '1', @@ -479,7 +498,7 @@ class ReportForm extends React.Component { ContentProps={{ 'aria-describedby': 'message-id', }} - message={Report received.} + message={Report received.} action={[ { + for (var i = 0; i < sightingTypes.length; i++) { + if (sightingTypes[i].value === item) { + return sightingTypes[i].label; + } + } + } + + + /** + * Gets formatted time value. + */ + getTime = item => { + for (var i = 0; i < timeTypes.length; i++) { + if (timeTypes[i].value === item) { + return timeTypes[i].label; + } + } + } + + /** + * Gets formatted confidence value. + */ + getConfidence = item => { + for (var i = 0; i < confidenceLevels.length; i++) { + if (confidenceLevels[i].value === item) { + return confidenceLevels[i].label; + } + } + + } + // When the component has mounted to the DOM, get the user's location componentDidMount() { this.getLocation(); @@ -246,14 +247,14 @@ export class MapContainer extends Component { {this.state.sightings.map((sighting) => { return ( Confidence: {getConfidence(sighting.confidence)}} - date = {Date: {this.formatDate(sighting.date)}} - time = {Time: {getTime(sighting.time)}} - description = {Description: {sighting.desc}} + key={sighting.id} + position={{ lat: sighting.lat, lng: sighting.lng }} + onClick={this.onMarkerClick} + type={'Type: ' + this.getType(sighting.type)} + confidence={Confidence: {this.getConfidence(sighting.confidence)}} + date={Date: {this.formatDate(sighting.date)}} + time={Time: {this.getTime(sighting.time)}} + description={Description: {sighting.desc}} /> ) })}