From bfbb27842ad8f23e6f490621ac84a5f31c38805f Mon Sep 17 00:00:00 2001 From: WildScotsmen Date: Wed, 31 Oct 2018 18:52:37 -0400 Subject: [PATCH 1/3] Cleaned up code according to what we decided on. Also formatted raw database data in SightingDetail component. Finally, ordered list in reverse order. --- src/components/Flamelink.js | 1 - src/components/Main.js | 8 +- src/components/QuizGame.js | 26 ++--- src/components/ReportForm.js | 6 +- src/components/ReportMap.js | 70 +++++++------- src/components/SightingDetail.js | 142 ++++++++++++++++++++++++++-- src/components/SightingDetailMap.js | 22 ++--- src/components/SightingMap.js | 41 ++++---- src/components/ViewSightings.js | 6 +- 9 files changed, 222 insertions(+), 100 deletions(-) diff --git a/src/components/Flamelink.js b/src/components/Flamelink.js index fd3187d..3958057 100644 --- a/src/components/Flamelink.js +++ b/src/components/Flamelink.js @@ -2,7 +2,6 @@ import { Component } from 'react'; class Flamelink extends Component { render() { - return(null); } } diff --git a/src/components/Main.js b/src/components/Main.js index be9617f..cfe31d7 100644 --- a/src/components/Main.js +++ b/src/components/Main.js @@ -83,7 +83,7 @@ class ResponsiveDrawer extends React.Component { nav = (text) => { this.setState({ key: text - }) + }); } render() { @@ -189,9 +189,9 @@ class ResponsiveDrawer extends React.Component { {this.state.key === 'Report' && } {this.state.key === 'Map' && } {this.state.key === 'List' && } - {this.state.key === 'Easy-Quiz' && } - {this.state.key === 'Medium-Quiz' && } - {this.state.key === 'Hard-Quiz' && } + {this.state.key === 'Easy-Quiz' && } + {this.state.key === 'Medium-Quiz' && } + {this.state.key === 'Hard-Quiz' && } ); diff --git a/src/components/QuizGame.js b/src/components/QuizGame.js index 1339978..88f8bbe 100644 --- a/src/components/QuizGame.js +++ b/src/components/QuizGame.js @@ -239,33 +239,33 @@ class QuizGame extends React.Component { * @param {*} difficulty The difficulty setting passed in. */ pickDifficulty = difficulty => { - let level + let level; switch (difficulty) { case 'Easy': - this.easy.questions = this.shuffleArray(this.easy.questions) - level = this.easy - break + this.easy.questions = this.shuffleArray(this.easy.questions); + level = this.easy; + break; case 'Medium': - this.medium.questions = this.shuffleArray(this.medium.questions) - level = this.medium - break + this.medium.questions = this.shuffleArray(this.medium.questions); + level = this.medium; + break; case 'Hard': - this.hard.questions = this.shuffleArray(this.hard.questions) - level = this.hard - break + this.hard.questions = this.shuffleArray(this.hard.questions); + level = this.hard; + break; default: - break + break; } - return level + return level; } // The state of the component. state = { difficulty: this.pickDifficulty(this.props.difficulty), key: Math.random() - } + }; // Renders the quiz component. render() { diff --git a/src/components/ReportForm.js b/src/components/ReportForm.js index 9068eec..d55625f 100644 --- a/src/components/ReportForm.js +++ b/src/components/ReportForm.js @@ -266,7 +266,7 @@ getMonth = date => { this.setState({ [name]: event.target.value, }); - }; + } /** * Handles closing the toast. @@ -277,7 +277,7 @@ getMonth = date => { } this.setState({ open: false }); - }; + } /* * Get the coordinates @@ -323,7 +323,7 @@ getMonth = date => { lng: '', open: true }); - }; + } /** diff --git a/src/components/ReportMap.js b/src/components/ReportMap.js index 882a49f..f4848ee 100644 --- a/src/components/ReportMap.js +++ b/src/components/ReportMap.js @@ -9,7 +9,7 @@ const API_KEY = 'AIzaSyAZ_0J01bA6wCbIPK4UBq2RUBC-hIqG4mM'; const mapStyles = { width: '100%', height: '100%' -} +}; export class MapContainer extends Component { @@ -18,22 +18,22 @@ export class MapContainer extends Component { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition((position) => { this.setState({ - myLatLng: { - lat: position.coords.latitude, - lng: position.coords.longitude - } + myLatLng: { + lat: position.coords.latitude, + lng: position.coords.longitude } + } ); }) } else { // If browser doesn't support geolocation or if user does not allow it, // center map on Grand Rapids, Michigan this.setState({ - myLatLng: { - lat: 42.9634, - lng: 85.6681 - } + myLatLng: { + lat: 42.9634, + lng: 85.6681 } + } ); } } @@ -52,7 +52,7 @@ export class MapContainer extends Component { showingInfoWindow: true }); } - + // When the user clicks on the map, if a info window is visible then close it // and 'unactive' that marker onMapClick = (props, map, e) => { @@ -68,13 +68,13 @@ export class MapContainer extends Component { lat: e.latLng.lat(), lng: e.latLng.lng() } - }) + }); let lat = e.latLng.lat(); - let lng = e.latLng.lng(); + let lng = e.latLng.lng(); if (this.props.onClick) { - this.props.onClick(lat,lng); + this.props.onClick(lat, lng); } } @@ -98,36 +98,36 @@ export class MapContainer extends Component { return ( // Render the Google Map, Marker, and InfoWindow components -
+
+ style={mapStyles} + google={this.props.google} + initialCenter={this.state.myLatLng} + center={this.state.myLatLng} + defaultZoom={15} + onClick={this.onMapClick} > - - + marker={this.state.activeMarker} + visible={this.state.showingInfoWindow} > - - { this.state.selectedPlace.title } + + {this.state.selectedPlace.title} - - { this.state.selectedPlace.name } + + {this.state.selectedPlace.name} @@ -138,6 +138,4 @@ export class MapContainer extends Component { } // Send the Google Map API Key with the MapContainer component -export default GoogleApiWrapper({ - apiKey: (API_KEY) -})(MapContainer) \ No newline at end of file +export default GoogleApiWrapper({ apiKey: (API_KEY) })(MapContainer); \ No newline at end of file diff --git a/src/components/SightingDetail.js b/src/components/SightingDetail.js index 73df886..01618b8 100644 --- a/src/components/SightingDetail.js +++ b/src/components/SightingDetail.js @@ -1,24 +1,154 @@ import React, { Component, Fragment } from 'react'; import Disqus from 'disqus-react'; +import moment from 'moment'; import SightingDetailMap from './SightingDetailMap'; +/** + * Types of sightings. Label is what is + * viewed in the application, value is + * what is stored in the database. + */ + const sightingTypes = [ + { + value: 'visual', + label: 'Visual', + }, + { + value: 'roadkill', + label: 'Roadkill', + }, + { + value: 'trapped', + label: 'Trapped', + }, + { + value: 'viewed_tracks', + label: 'Viewed Tracks', + }, + { + value: 'photo', + label: 'Photo', + }, + { + value: 'other', + label: 'Other', + }, +]; + +/** + * 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 + * what is stored in the database. +*/ +const confidenceLevels = [ + { + value: '1', + label: '1 - Strongly disagree', + }, + { + value: '2', + label: '2 - Disagree', + }, + { + value: '3', + label: '3 - Neutral', + }, + { + value: '4', + label: '4 - Agree', + }, + { + value: '5', + label: '5 - Strongly agree', + }, +]; + class SightingDetail extends Component { + /** + * Gets formatted type value. + */ + getType = item => { + 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; + } + } + + } + + formatDate = date => { + return (moment(date, "YYYY-MM").format("MMMM YYYY").toString()); + } + render() { const disqusShortname = 'https-marten-application-netlify-com'; const disqusConfig = { url: `http://localhost:3000/${this.props.detail.id}`, identifier: this.props.detail.id, title: this.props.detail.id - } + }; return ( - +
-

{`Confidence: ${this.props.detail.confidence}`}

-

{`When: ${this.props.detail.date}, ${this.props.detail.time}`}

-

{`Where: ${this.props.detail.lat} degrees N, and ${this.props.detail.lng} degrees E`}

+

Type: {this.getType(this.props.detail.type)}

+

When: {this.formatDate(this.props.detail.date)}, {this.getTime(this.props.detail.time)}

+

Where: {this.props.detail.lat} degrees N, and {this.props.detail.lng} degrees E

+

I am confident of my sighting: {this.getConfidence(this.props.detail.confidence)}

+

{`${this.props.detail.desc}`}

@@ -27,4 +157,4 @@ class SightingDetail extends Component { } } -export default SightingDetail; +export default SightingDetail; \ No newline at end of file diff --git a/src/components/SightingDetailMap.js b/src/components/SightingDetailMap.js index aaa4c50..775e7ee 100644 --- a/src/components/SightingDetailMap.js +++ b/src/components/SightingDetailMap.js @@ -8,23 +8,23 @@ const API_KEY = 'AIzaSyAZ_0J01bA6wCbIPK4UBq2RUBC-hIqG4mM'; const mapStyles = { width: '100%', height: '100%' -} +}; export class MapContainer extends Component { render() { return ( // Render the Google Map, Marker, and InfoWindow components -
+
+ style={mapStyles} + google={this.props.google} + initialCenter={{ lat: this.props.lat, lng: this.props.lng }} + center={{ lat: this.props.lat, lng: this.props.lng }} + defaultZoom={15}> -
@@ -33,6 +33,4 @@ export class MapContainer extends Component { } // Send the Google Map API Key with the MapContainer component -export default GoogleApiWrapper({ - apiKey: (API_KEY) -})(MapContainer) \ No newline at end of file +export default GoogleApiWrapper({ apiKey: (API_KEY) })(MapContainer); \ No newline at end of file diff --git a/src/components/SightingMap.js b/src/components/SightingMap.js index 2d00465..85b7410 100644 --- a/src/components/SightingMap.js +++ b/src/components/SightingMap.js @@ -1,6 +1,6 @@ import React, { Component, Fragment } from 'react'; import { Map, InfoWindow, Marker, GoogleApiWrapper } from 'google-maps-react'; -import moment from 'moment' +import moment from 'moment'; import Typography from '@material-ui/core/Typography'; import firebase from '../firebase.js'; @@ -11,7 +11,7 @@ const API_KEY = 'AIzaSyAZ_0J01bA6wCbIPK4UBq2RUBC-hIqG4mM'; const mapStyles = { width: '100%', height: '100%' -} +}; /** * Types of sightings. Label is what is @@ -81,23 +81,23 @@ const timeTypes = [ 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', }, ]; @@ -112,9 +112,8 @@ export class MapContainer extends Component { lat: position.coords.latitude, lng: position.coords.longitude } - } - ); - }) + }); + }); } else { // If browser doesn't support geolocation or if user does not allow it, // center map on Grand Rapids, Michigan @@ -123,8 +122,7 @@ export class MapContainer extends Component { lat: 42.9634, lng: 85.6681 } - } - ); + }); } } @@ -210,7 +208,7 @@ export class MapContainer extends Component { } formatDate = date => { - return (moment(date, "YYYY-MM").format("MMMM YYYY").toString()) + return (moment(date, "YYYY-MM").format("MMMM YYYY").toString()); } // Set the state of the component to contain user coordinates and initial @@ -224,7 +222,7 @@ export class MapContainer extends Component { activeMarker: {}, selectedPlace: {}, sightings: [] - } + }; render() { return ( @@ -236,7 +234,8 @@ export class MapContainer extends Component { initialCenter={this.state.myLatLng} center={this.state.myLatLng} defaultZoom={15} - onClick={this.onMapClick} > + onClick={this.onMapClick} + > Confidence: {this.getConfidence(sighting.confidence)}} date={Date: {this.formatDate(sighting.date)}} time={Time: {this.getTime(sighting.time)}} + confidence={I am confident of my sighting: {this.getConfidence(sighting.confidence)}} description={Description: {sighting.desc}} /> ) @@ -267,15 +266,15 @@ export class MapContainer extends Component { {this.state.selectedPlace.type} - - {this.state.selectedPlace.confidence} - {this.state.selectedPlace.date} {this.state.selectedPlace.time} + + {this.state.selectedPlace.confidence} + {this.state.selectedPlace.description} @@ -288,6 +287,4 @@ export class MapContainer extends Component { } // Send the Google Map API Key with the MapContainer component -export default GoogleApiWrapper({ - apiKey: (API_KEY) -})(MapContainer) \ No newline at end of file +export default GoogleApiWrapper({ apiKey: (API_KEY) })(MapContainer); \ No newline at end of file diff --git a/src/components/ViewSightings.js b/src/components/ViewSightings.js index e245e6b..ec5d3c2 100644 --- a/src/components/ViewSightings.js +++ b/src/components/ViewSightings.js @@ -16,7 +16,7 @@ class ViewSightings extends Component { let newState = []; for (let sighting in sightings) { - newState.push({ + newState.unshift({ id: sighting, lat: sightings[sighting].lat, lng: sightings[sighting].lng, @@ -62,7 +62,7 @@ class ViewSightings extends Component { time: null }, clicked: false - } + }; render() { return ( @@ -77,7 +77,7 @@ class ViewSightings extends Component { this.getDetail(sighting.id, sighting.lat, sighting.lng, sighting.desc, sighting.type, sighting.confidence, sighting.date, sighting.time)}> - ) + ); }) } From 3f36ee55a19c22eb5ca49328d0e1e1c95c88eb36 Mon Sep 17 00:00:00 2001 From: WildScotsmen Date: Wed, 31 Oct 2018 19:14:24 -0400 Subject: [PATCH 2/3] Set default key of the application to Home. It was set to blank, which meant that the application wasn't on any page when the user first visits the application. --- src/components/Main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Main.js b/src/components/Main.js index be9617f..d93ef62 100644 --- a/src/components/Main.js +++ b/src/components/Main.js @@ -68,7 +68,7 @@ const styles = theme => ({ class ResponsiveDrawer extends React.Component { state = { mobileOpen: false, - key: '', + key: 'Home', open: false }; From 4301a3d6cd338f51f26e46da636591551ff23f0a Mon Sep 17 00:00:00 2001 From: Al Duncanson Date: Wed, 31 Oct 2018 22:18:45 -0400 Subject: [PATCH 3/3] added report map tooltip --- src/components/ReportForm.js | 937 ++++++++++++++++++----------------- 1 file changed, 488 insertions(+), 449 deletions(-) diff --git a/src/components/ReportForm.js b/src/components/ReportForm.js index 9068eec..9057b89 100644 --- a/src/components/ReportForm.js +++ b/src/components/ReportForm.js @@ -11,6 +11,8 @@ import CloseIcon from '@material-ui/icons/Close'; import Button from '@material-ui/core/Button'; import firebase from '../firebase.js'; import GoogleMap from '../components/ReportMap'; +import Modal from '@material-ui/core/Modal'; +import Typography from '@material-ui/core/Typography'; /** * Styles that the different @@ -18,39 +20,46 @@ import GoogleMap from '../components/ReportMap'; * in. Mostly used for spacing. */ const styles = theme => ({ - container: { - display: 'flex', - flexWrap: 'wrap' - }, - textField: { - marginLeft: theme.spacing.unit * 2, - marginRight: theme.spacing.unit, - marginTop: theme.spacing.unit * 2, - flexBasis: 280, - width: '90%' - }, - button: { - marginLeft: theme.spacing.unit * 2, - marginRight: theme.spacing.unit, - marginTop: theme.spacing.unit * 2, - }, - dense: { - marginTop: 30, - }, - close: { - padding: theme.spacing.unit / 2, - }, - icon: { - fontSize: 20, - marginRight: theme.spacing.unit, - }, - message: { - display: 'flex', - alignItems: 'center', - }, - menu: { - width: 200, - }, + container: { + display: 'flex', + flexWrap: 'wrap' + }, + textField: { + marginLeft: theme.spacing.unit * 2, + marginRight: theme.spacing.unit, + marginTop: theme.spacing.unit * 2, + flexBasis: 280, + width: '90%' + }, + button: { + marginLeft: theme.spacing.unit * 2, + marginRight: theme.spacing.unit, + marginTop: theme.spacing.unit * 2, + }, + dense: { + marginTop: 30, + }, + close: { + padding: theme.spacing.unit / 2, + }, + icon: { + fontSize: 20, + marginRight: theme.spacing.unit, + }, + message: { + display: 'flex', + alignItems: 'center', + }, + menu: { + width: 200, + }, + paper: { + position: 'absolute', + width: theme.spacing.unit * 50, + backgroundColor: theme.palette.background.paper, + boxShadow: theme.shadows[5], + padding: theme.spacing.unit * 4, + } }); /** @@ -59,30 +68,30 @@ const styles = theme => ({ * what is stored in the database. */ const sightingTypes = [ - { - value: 'visual', - label: 'Visual', - }, - { - value: 'roadkill', - label: 'Roadkill', - }, - { - value: 'trapped', - label: 'Trapped', - }, - { - value: 'viewed_tracks', - label: 'Viewed Tracks', - }, - { - value: 'photo', - label: 'Photo', - }, - { - value: 'other', - label: 'Other', - }, + { + value: 'visual', + label: 'Visual', + }, + { + value: 'roadkill', + label: 'Roadkill', + }, + { + value: 'trapped', + label: 'Trapped', + }, + { + value: 'viewed_tracks', + label: 'Viewed Tracks', + }, + { + value: 'photo', + label: 'Photo', + }, + { + value: 'other', + label: 'Other', + }, ]; /** @@ -91,54 +100,54 @@ const sightingTypes = [ * 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', - }, + { + 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', + }, ]; /** @@ -147,26 +156,26 @@ const monthTypes = [ * 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', - }, + { + value: 'unknown', + label: 'Unknown', + }, + { + value: 'morning', + label: 'Morning', + }, + { + value: 'midday', + label: 'Midday', + }, + { + value: 'evening', + label: 'Evening', + }, + { + value: 'night', + label: 'Night', + }, ]; /** @@ -175,349 +184,379 @@ const timeTypes = [ * what is stored in the database. */ const confidenceLevels = [ - { - value: '1', - label: '1 - Strongly disagree', - }, - { - value: '2', - label: '2 - Disagree', - }, - { - value: '3', - label: '3 - Neutral', - }, - { - value: '4', - label: '4 - Agree', - }, - { - value: '5', - label: '5 - Strongly agree', - }, + { + value: '1', + label: '1 - Strongly disagree', + }, + { + value: '2', + label: '2 - Disagree', + }, + { + value: '3', + label: '3 - Neutral', + }, + { + value: '4', + label: '4 - Agree', + }, + { + value: '5', + label: '5 - Strongly agree', + }, ]; /** * The form component. */ class ReportForm extends React.Component { - /** - * Component contructor. Currently - * only used to bind event - * handlers. - */ - constructor() { - super(); - this.handleSubmit = this.handleSubmit.bind(this); - } - - /** - * 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() + 1; - - month = month.toString(); - - if (month.length === 1) { - month = "0" + month; - } - - return month; -} - - /** - * State of form components. - */ - state = { - month: this.getMonth(new Date()), - year: this.getYear(new Date()), - time: 'unknown', - type: 'visual', - confidence: '1', - desc: '', - lat: '', - lng: '', - open: false - }; - - /** - * Handles state change in form - * components. - */ - handleChange = name => event => { - this.setState({ - [name]: event.target.value, - }); - }; - - /** - * Handles closing the toast. - */ - handleClose = (event, reason) => { - if (reason === 'clickaway') { - return; + /** + * Component contructor. Currently + * only used to bind event + * handlers. + */ + constructor() { + super(); + this.handleSubmit = this.handleSubmit.bind(this); } - this.setState({ open: false }); - }; - - /* - * Get the coordinates - * - */ - getCoordinates = (lat, lng) => { - let latitude = lat; - let longitude = lng; - - this.setState({ - lat: latitude, - lng: longitude - }); - } - - /** - * Event listener for form. - * When the form is submitted, - * this function passes the - * data along to Firebase. - */ - handleSubmit(e) { - e.preventDefault(); - const sightingsRef = firebase.database().ref('sightings'); - const sighting = { - type: this.state.type, - confidence: this.state.confidence, - date: this.state.year + '-' + this.state.month, - time: this.state.time, - desc: this.state.desc, - lat: this.state.lat, - lng: this.state.lng - } - sightingsRef.push(sighting); - this.setState({ - year: this.getYear(new Date()), - month: this.getMonth(new Date()), - time: 'unknown', - type: 'visual', - confidence: '1', - desc: '', - lat: '', - lng: '', - open: true - }); - }; - - - /** - * The render method for this component. - */ - render() { - const { classes } = this.props; - /** - * The actual form. + * 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() + 1; + + month = month.toString(); + + if (month.length === 1) { + month = "0" + month; + } + + return month; + } + + /** + * State of form components. */ - return ( - -
- - - - - - {sightingTypes.map(option => ( - - {option.label} - - ))} - - + state = { + month: this.getMonth(new Date()), + year: this.getYear(new Date()), + time: 'unknown', + type: 'visual', + confidence: '1', + desc: '', + lat: '', + lng: '', + open: false, + openModal: false, + hasModalOpened: false + }; - - - {confidenceLevels.map(option => ( - - {option.label} - - ))} - - + handleModalOpen = () => !this.state.hasModalOpened ? this.setState({ openModal: true, hasModalOpened: true }) : null; - - - {timeTypes.map(option => ( - - {option.label} - - ))} - - + handleModalClose = () => { + this.setState({ openModal: false }); + }; - - - {monthTypes.map(option => ( - - {option.label} - - ))} - - + getModalStyle = () => { + return { + top: `25%`, + left: `75%`, + transform: `translate(-25%, -75%)`, + }; + } - - - + /** + * Handles state change in form + * components. + */ + handleChange = name => event => { + this.setState({ + [name]: event.target.value, + }); + }; - - - + /** + * Handles closing the toast. + */ + handleClose = (event, reason) => { + if (reason === 'clickaway') { + return; + } - - - - - - - - - -
- Report received.} - action={[ - - - , - ]} - /> - - ); - } + this.setState({ open: false }); + }; + + /* + * Get the coordinates + * + */ + getCoordinates = (lat, lng) => { + let latitude = lat; + let longitude = lng; + + this.setState({ + lat: latitude, + lng: longitude + }); + } + + /** + * Event listener for form. + * When the form is submitted, + * this function passes the + * data along to Firebase. + */ + handleSubmit(e) { + e.preventDefault(); + const sightingsRef = firebase.database().ref('sightings'); + const sighting = { + type: this.state.type, + confidence: this.state.confidence, + date: this.state.year + '-' + this.state.month, + time: this.state.time, + desc: this.state.desc, + lat: this.state.lat, + lng: this.state.lng + } + sightingsRef.push(sighting); + this.setState({ + year: this.getYear(new Date()), + month: this.getMonth(new Date()), + time: 'unknown', + type: 'visual', + confidence: '1', + desc: '', + lat: '', + lng: '', + open: true + }); + }; + + + /** + * The render method for this component. + */ + render() { + const { classes } = this.props; + + /** + * The actual form. + */ + return ( + +
+ + + + + + {sightingTypes.map(option => ( + + {option.label} + + ))} + + + + + + {confidenceLevels.map(option => ( + + {option.label} + + ))} + + + + + + {timeTypes.map(option => ( + + {option.label} + + ))} + + + + + + {monthTypes.map(option => ( + + {option.label} + + ))} + + + + + + + + + + + + + + + + + + +
+ + Need a little help? + + + Click on the map to drop a pin! + +
+ + + +
+ Report received.} + action={[ + + + , + ]} + /> + + ); + } } ReportForm.propTypes = { - classes: PropTypes.object.isRequired, + classes: PropTypes.object.isRequired, }; export default withStyles(styles)(ReportForm); \ No newline at end of file