diff --git a/.gitignore b/.gitignore index 417c6ce..d47c336 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ node_modules/ -.vscode/ \ No newline at end of file +.vscode/ +.netlify diff --git a/package-lock.json b/package-lock.json index 39adea6..ac8d216 100644 --- a/package-lock.json +++ b/package-lock.json @@ -392,6 +392,30 @@ "warning": "^4.0.1" } }, + "@material-ui/icons": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-3.0.1.tgz", + "integrity": "sha512-1kNcxYiIT1x8iDPEAlgmKrfRTIV8UyK6fLVcZ9kMHIKGWft9I451V5mvSrbCjbf7MX1TbLWzZjph0aVCRf9MqQ==", + "requires": { + "@babel/runtime": "7.0.0", + "recompose": "^0.29.0" + }, + "dependencies": { + "recompose": { + "version": "0.29.0", + "resolved": "https://registry.npmjs.org/recompose/-/recompose-0.29.0.tgz", + "integrity": "sha512-J/qLXNU4W+AeHCDR70ajW8eMd1uroqZaECTj6qqDLPMILz3y0EzpYlvrnxKB9DnqcngWrtGwjXY9JeXaW9kS1A==", + "requires": { + "@babel/runtime": "^7.0.0", + "change-emitter": "^0.1.2", + "fbjs": "^0.8.1", + "hoist-non-react-statics": "^2.3.1", + "react-lifecycles-compat": "^3.0.2", + "symbol-observable": "^1.0.4" + } + } + } + }, "@mrmlnc/readdir-enhanced": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz", @@ -6076,8 +6100,7 @@ }, "ansi-regex": { "version": "2.1.1", - "bundled": true, - "optional": true + "bundled": true }, "aproba": { "version": "1.2.0", @@ -6429,8 +6452,7 @@ }, "safe-buffer": { "version": "5.1.1", - "bundled": true, - "optional": true + "bundled": true }, "safer-buffer": { "version": "2.1.2", @@ -6477,7 +6499,6 @@ "strip-ansi": { "version": "3.0.1", "bundled": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -6516,13 +6537,11 @@ }, "wrappy": { "version": "1.0.2", - "bundled": true, - "optional": true + "bundled": true }, "yallist": { "version": "3.0.2", - "bundled": true, - "optional": true + "bundled": true } } }, @@ -9529,6 +9548,11 @@ "integrity": "sha512-9DITV2YEMcw7XojdfvGl3gDD8J9QjZTJ7ZOUuSAkP+F3T6rDbzMJuPktxptsdHYEvZcmXrCD3LMOhdSAEq6zKA==", "optional": true }, + "moment": { + "version": "2.22.2", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.22.2.tgz", + "integrity": "sha1-PCV/mDn8DpP/UxSWMiOeuQeD/2Y=" + }, "ms": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", @@ -11871,6 +11895,11 @@ "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" }, + "react-quiz-component": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/react-quiz-component/-/react-quiz-component-0.2.0.tgz", + "integrity": "sha512-oWUos0A4NtYNBNoSqAbjjpZC9ndEuw5SebYRDhX2EUv4I41iqWWVNMbY2Pu7qT6I7MuELfWHrpV+5p0XwaChaQ==" + }, "react-router": { "version": "4.3.1", "resolved": "https://registry.npmjs.org/react-router/-/react-router-4.3.1.tgz", diff --git a/package.json b/package.json index e2ef165..e45497e 100644 --- a/package.json +++ b/package.json @@ -4,12 +4,15 @@ "private": true, "dependencies": { "@material-ui/core": "^3.1.0", + "@material-ui/icons": "^3.0.1", "firebase": "^5.5.2", "firebase-admin": "^6.0.0", "flamelink": "^0.19.2", "google-maps-react": "^2.0.2", + "moment": "^2.22.2", "react": "^16.5.1", "react-dom": "^16.5.1", + "react-quiz-component": "0.2.0", "react-router": "^4.3.1", "react-router-dom": "^4.3.1", "react-scripts": "1.1.5" diff --git a/public/index.html b/public/index.html index ebb2c8a..d949bd5 100644 --- a/public/index.html +++ b/public/index.html @@ -1,6 +1,17 @@ + + + + + @@ -30,15 +41,16 @@ You need to enable JavaScript to run this app.
- + + diff --git a/public/quizimages/question1.jpg b/public/quizimages/question1.jpg new file mode 100644 index 0000000..8ce9a50 Binary files /dev/null and b/public/quizimages/question1.jpg differ diff --git a/public/quizimages/question2.jpg b/public/quizimages/question2.jpg new file mode 100644 index 0000000..8f6d931 Binary files /dev/null and b/public/quizimages/question2.jpg differ diff --git a/public/quizimages/question3.jpg b/public/quizimages/question3.jpg new file mode 100644 index 0000000..c518c5e Binary files /dev/null and b/public/quizimages/question3.jpg differ diff --git a/public/quizimages/question4.jpg b/public/quizimages/question4.jpg new file mode 100644 index 0000000..0e52c59 Binary files /dev/null and b/public/quizimages/question4.jpg differ diff --git a/public/quizimages/question5.jpg b/public/quizimages/question5.jpg new file mode 100644 index 0000000..c49d92f Binary files /dev/null and b/public/quizimages/question5.jpg differ diff --git a/src/App.css b/src/App.css index 9dd2624..9494272 100644 --- a/src/App.css +++ b/src/App.css @@ -2,11 +2,15 @@ body { margin: 0; } -.report-google-map-container > div { - height: 92% !important; - width: 50% !important; +@media (min-width: 600px) { + .sighting-google-map-container > div { + width: calc(100% - 240px) !important; + height: calc(100% - 64px) !important; + } } -.sighting-google-map-container > div { - height: 92% !important; +@media (min-width: 960px) { + .report-google-map-container > div { + width: calc(100% - 50% - 120px) !important; + } } \ No newline at end of file diff --git a/src/components/Main.js b/src/components/Main.js index 2259d17..62336af 100644 --- a/src/components/Main.js +++ b/src/components/Main.js @@ -1,75 +1,209 @@ import React from 'react'; import PropTypes from 'prop-types'; import { withStyles } from '@material-ui/core/styles'; +import Drawer from '@material-ui/core/Drawer'; import AppBar from '@material-ui/core/AppBar'; -import Tabs from '@material-ui/core/Tabs'; -import Tab from '@material-ui/core/Tab'; +import Toolbar from '@material-ui/core/Toolbar'; +import List from '@material-ui/core/List'; +import ListItem from '@material-ui/core/ListItem'; +import ListItemIcon from '@material-ui/core/ListItemIcon'; +import ListItemText from '@material-ui/core/ListItemText'; import Typography from '@material-ui/core/Typography'; +import IconButton from '@material-ui/core/IconButton'; +import Hidden from '@material-ui/core/Hidden'; +import Divider from '@material-ui/core/Divider'; +import MenuIcon from '@material-ui/icons/Menu'; +import HomeIcon from '@material-ui/icons/Home'; +import AssignmentIcon from '@material-ui/icons/Assignment'; +import MapIcon from '@material-ui/icons/Map'; +import ListIcon from '@material-ui/icons/List'; +import SlideshowIcon from '@material-ui/icons/Slideshow'; import Home from '../pages/Home'; import ViewMap from '../pages/ViewMap'; -import Quiz from '../pages/Quiz'; +import Quiz from '../pages/QuizPage'; import SightingList from '../pages/SightingList'; import Report from '../pages/Report'; -import Info from '../pages/Info'; +import CssBaseline from '@material-ui/core/CssBaseline'; +import ExpandLess from '@material-ui/icons/ExpandLess'; +import ExpandMore from '@material-ui/icons/ExpandMore'; +import Collapse from '@material-ui/core/Collapse'; -function TabContainer(props) { - return ( - - {props.children} - - ); -} - -TabContainer.propTypes = { - children: PropTypes.node.isRequired, -}; +const drawerWidth = 240; const styles = theme => ({ root: { + display: 'flex', + }, + drawer: { + [theme.breakpoints.up('sm')]: { + width: drawerWidth, + flexShrink: 0, + }, + }, + nested: { + paddingLeft: theme.spacing.unit * 4, + }, + appBar: { + marginLeft: drawerWidth, + [theme.breakpoints.up('sm')]: { + width: `calc(100% - ${drawerWidth}px)`, + }, + }, + menuButton: { + marginRight: 20, + [theme.breakpoints.up('sm')]: { + display: 'none', + }, + }, + toolbar: theme.mixins.toolbar, + drawerPaper: { + width: drawerWidth, + }, + content: { flexGrow: 1, - backgroundColor: theme.palette.background.paper, + width: '60%' }, }); -class SimpleTabs extends React.Component { +class ResponsiveDrawer extends React.Component { state = { - value: 0, + mobileOpen: false, + key: '', + open: false }; - handleChange = (event, value) => { - this.setState({ value }); - }; + handleDrawerToggle = () => { + this.setState(state => ({ mobileOpen: !state.mobileOpen })); + } + + handleClick = () => { + this.setState(state => ({ open: !state.open })); + } + + nav = (text) => { + this.setState({ + key: text + }) + } render() { - const { classes } = this.props; - const { value } = this.state; + const { classes, theme } = this.props; - return ( -
- - - - - - - - - - - {value === 0 && } - {value === 1 && } - {value === 2 && } - {value === 3 && } - {value === 4 && } - {value === 5 && } -
- ); + const drawer = ( +
+
+ + + this.nav('Home')}> + + + + this.nav('Report')}> + + + + this.nav('Map')}> + + + + this.nav('List')}> + + + + + + + + + {this.state.open ? : } + + + + this.nav('Easy-Quiz')}> + + + this.nav('Medium-Quiz')}> + + + this.nav('Hard-Quiz')}> + + + + + + +
+ ); + + return ( +
+ + + + + + + + The American Marten + + + + +
+
+ {this.state.key === 'Home' && } + {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' && } +
+
+ ); } } -SimpleTabs.propTypes = { +ResponsiveDrawer.propTypes = { classes: PropTypes.object.isRequired, + // Injected by the documentation to work in an iframe. + // You won't need it on your project. + container: PropTypes.object, + theme: PropTypes.object.isRequired, }; -export default withStyles(styles)(SimpleTabs); - +export default withStyles(styles, { withTheme: true })(ResponsiveDrawer); \ No newline at end of file diff --git a/src/components/QuizGame.js b/src/components/QuizGame.js new file mode 100644 index 0000000..1339978 --- /dev/null +++ b/src/components/QuizGame.js @@ -0,0 +1,297 @@ +import React, { Fragment } from 'react'; +import Grid from '@material-ui/core/Grid'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import Quiz from 'react-quiz-component'; +import { Typography } from '@material-ui/core'; +import Button from '@material-ui/core/Button'; +import RefreshIcon from '@material-ui/icons/Refresh'; + +// Style for the tabs. +const styles = theme => ({ + root: { + flexGrow: 1, + backgroundColor: theme.palette.background.paper, + }, + button: { + margin: theme.spacing.unit, + }, + rightIcon: { + marginLeft: theme.spacing.unit, + }, +}); + +class QuizGame extends React.Component { + + /** + * Shuffles a given array. + * @param {*} array The array passed in. + */ + shuffleArray = array => { + let shuffled = array; + + var j, x, i; + + for (i = shuffled.length - 1; i > 0; i--) { + j = Math.floor(Math.random() * (i + 1)); + x = shuffled[i]; + shuffled[i] = shuffled[j]; + shuffled[j] = x; + } + + return shuffled; + } + + reset = () => { + this.setState({ + difficulty: this.pickDifficulty(this.props.difficulty), + key: Math.random() + }); + } + + easy = { + "quizTitle": "Trail Cam Quiz: Easy", + "questions": [ + { + "question": What animal is this?

, + "questionType": "text", + "answers": [ + "Black bear", + "Common wombat", + "Raccoon", + "White-tailed deer" + ], + "correctAnswer": "1" + }, + { + "question": What animal is this?

, + "questionType": "text", + "answers": [ + "American beaver", + "Muskrat", + "Porcupine", + "Woodchuck" + ], + "correctAnswer": "3" + }, + { + "question": What animal is this?

, + "questionType": "text", + "answers": [ + "American badger", + "Raccoon", + "Striped skunk", + "Virginia opossum" + ], + "correctAnswer": "2" + }, + { + "question": What animal is this?

, + "questionType": "text", + "answers": [ + "Eastern fox squirrel", + "Eastern gray squirrel", + "Red squirrel", + "Southern flying squirrel" + ], + "correctAnswer": "3" + }, + { + "question": What animal is this?

, + "questionType": "text", + "answers": [ + "American Crow", + "Black Vulture", + "Turkey Vulture", + "Northern Raven" + ], + "correctAnswer": "3" + }, + ] + } + + medium = { + "quizTitle": "Trail Cam Quiz: Medium", + "questions": [ + { + "question": What animal is this?

, + "questionType": "text", + "answers": [ + "Black bear", + "Common wombat", + "Raccoon", + "White-tailed deer" + ], + "correctAnswer": "1" + }, + { + "question": What animal is this?

, + "questionType": "text", + "answers": [ + "American beaver", + "Muskrat", + "Porcupine", + "Woodchuck" + ], + "correctAnswer": "3" + }, + { + "question": What animal is this?

, + "questionType": "text", + "answers": [ + "American badger", + "Raccoon", + "Striped skunk", + "Virginia opossum" + ], + "correctAnswer": "2" + }, + { + "question": What animal is this?

, + "questionType": "text", + "answers": [ + "Eastern fox squirrel", + "Eastern gray squirrel", + "Red squirrel", + "Southern flying squirrel" + ], + "correctAnswer": "3" + }, + { + "question": What animal is this?

, + "questionType": "text", + "answers": [ + "American Crow", + "Black Vulture", + "Turkey Vulture", + "Northern Raven" + ], + "correctAnswer": "3" + }, + ] + } + + hard = { + "quizTitle": "Trail Cam Quiz: Hard", + "questions": [ + { + "question": What animal is this?

, + "questionType": "text", + "answers": [ + "Black bear", + "Common wombat", + "Raccoon", + "White-tailed deer" + ], + "correctAnswer": "1" + }, + { + "question": What animal is this?

, + "questionType": "text", + "answers": [ + "American beaver", + "Muskrat", + "Porcupine", + "Woodchuck" + ], + "correctAnswer": "3" + }, + { + "question": What animal is this?

, + "questionType": "text", + "answers": [ + "American badger", + "Raccoon", + "Striped skunk", + "Virginia opossum" + ], + "correctAnswer": "2" + }, + { + "question": What animal is this?

, + "questionType": "text", + "answers": [ + "Eastern fox squirrel", + "Eastern gray squirrel", + "Red squirrel", + "Southern flying squirrel" + ], + "correctAnswer": "3" + }, + { + "question": What animal is this?

, + "questionType": "text", + "answers": [ + "American Crow", + "Black Vulture", + "Turkey Vulture", + "Northern Raven" + ], + "correctAnswer": "3" + }, + ] + } + + /** + * This function returns the + * quiz data based on the difficulty + * level passed into it. + * @param {*} difficulty The difficulty setting passed in. + */ + pickDifficulty = difficulty => { + let level + + switch (difficulty) { + case 'Easy': + 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 + case 'Hard': + this.hard.questions = this.shuffleArray(this.hard.questions) + level = this.hard + break + default: + break + } + + return level + } + + // The state of the component. + state = { + difficulty: this.pickDifficulty(this.props.difficulty), + key: Math.random() + } + + // Renders the quiz component. + render() { + const { classes } = this.props; + + return ( + // Tabs +
+ + + + + + + + +
+ ); + } +} + +QuizGame.propTypes = { + classes: PropTypes.object.isRequired +}; + +export default withStyles(styles)(QuizGame); \ No newline at end of file diff --git a/src/components/ReportForm.js b/src/components/ReportForm.js index ac72000..7d50473 100644 --- a/src/components/ReportForm.js +++ b/src/components/ReportForm.js @@ -1,9 +1,13 @@ -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'; import MenuItem from '@material-ui/core/MenuItem'; import TextField from '@material-ui/core/TextField'; +import CheckCircleIcon from '@material-ui/icons/CheckCircle'; +import Snackbar from '@material-ui/core/Snackbar'; +import IconButton from '@material-ui/core/IconButton'; +import CloseIcon from '@material-ui/icons/Close'; import Button from '@material-ui/core/Button'; import firebase from '../firebase.js'; import GoogleMap from '../components/ReportMap'; @@ -16,7 +20,7 @@ import GoogleMap from '../components/ReportMap'; const styles = theme => ({ container: { display: 'flex', - flexWrap: 'wrap', + flexWrap: 'wrap' }, textField: { marginLeft: theme.spacing.unit * 2, @@ -33,6 +37,17 @@ const styles = theme => ({ dense: { marginTop: 30, }, + close: { + padding: theme.spacing.unit / 2, + }, + icon: { + fontSize: 20, + marginRight: theme.spacing.unit, + }, + message: { + display: 'flex', + alignItems: 'center', + }, menu: { width: 200, }, @@ -40,22 +55,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) { - 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 +98,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 * 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 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. @@ -136,13 +228,15 @@ 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: '', lat: '', - lng: '' + lng: '', + open: false }; /** @@ -155,17 +249,28 @@ class ReportForm extends React.Component { }); }; + /** + * Handles closing the toast. + */ + handleClose = (event, reason) => { + if (reason === 'clickaway') { + return; + } + + this.setState({ open: false }); + }; + /* * 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 +286,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,16 +294,18 @@ 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: '', lat: '', - lng: '' + lng: '', + open: true }); }; - + /** * The render method for this component. @@ -210,129 +317,184 @@ 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} + + ))} + + + + + + + + + + + + + + +
+ + + + + + + Report received.} + action={[ + + + , + ]} + /> + ); - } + } } ReportForm.propTypes = { diff --git a/src/components/SightingMap.js b/src/components/SightingMap.js index 6bfdbe2..98b609a 100644 --- a/src/components/SightingMap.js +++ b/src/components/SightingMap.js @@ -1,5 +1,6 @@ import React, { Component, Fragment } from 'react'; import { Map, InfoWindow, Marker, GoogleApiWrapper } from 'google-maps-react'; +import moment from 'moment' import Typography from '@material-ui/core/Typography'; import firebase from '../firebase.js'; @@ -12,6 +13,128 @@ const mapStyles = { height: '100%' } +/** + * 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 unconfident', + }, + { + value: '2', + label: '2 - Unconfident', + }, + { + value: '3', + label: '3 - Somewhat confident', + }, + { + value: '4', + label: '4 - Confident', + }, + { + value: '5', + label: '5 - Very confident', + }, +]; + +/** + * Gets formatted confidence value. + */ +function getConfidence(item) { + for (var i = 0; i < confidenceLevels.length; i++) { + if (confidenceLevels[i].value === item) { + return confidenceLevels[i].label; + } + } + +} + +/** + * Gets formatted time value. + */ +function getTime(item) { + for (var i = 0; i < timeTypes.length; i++) { + if (timeTypes[i].value === item) { + return timeTypes[i].label; + } + } +} + +/** + * Gets formatted type value. + */ +function getType(item) { + for (var i = 0; i < sightingTypes.length; i++) { + if (sightingTypes[i].value === item) { + return sightingTypes[i].label; + } + } +} + export class MapContainer extends Component { // Get the user's location using Google's geolocation @@ -19,22 +142,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 } + } ); } } @@ -85,6 +208,7 @@ export class MapContainer extends Component { } } +<<<<<<< HEAD sightingIcon = (type) => { let pinIcon @@ -106,6 +230,10 @@ export class MapContainer extends Component { } return pinIcon +======= + formatDate = date => { + return (moment(date, "YYYY-MM").format("MMMM YYYY").toString()) +>>>>>>> 48273519cbb4fe2cd134adbfa4e7814237f3021a } // Set the state of the component to contain user coordinates and initial @@ -126,21 +254,22 @@ 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} > - +<<<<<<< HEAD { this.state.sightings.map((sighting) => { let pinIcon = this.sightingIcon(sighting.type) @@ -160,29 +289,42 @@ export class MapContainer extends Component { anchor: new google.maps.Point(32,32), scaledSize: new google.maps.Size(32,32) }} +======= + {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}} +>>>>>>> 48273519cbb4fe2cd134adbfa4e7814237f3021a /> ) })} + marker={this.state.activeMarker} + visible={this.state.showingInfoWindow} > - - { this.state.selectedPlace.type } + + {this.state.selectedPlace.type} - - { this.state.selectedPlace.confidence } + + {this.state.selectedPlace.confidence} - - { this.state.selectedPlace.date } + + {this.state.selectedPlace.date} - - { this.state.selectedPlace.time } + + {this.state.selectedPlace.time} - - { this.state.selectedPlace.description } + + {this.state.selectedPlace.description} diff --git a/src/firebase.js b/src/firebase.js index 8d01e36..6e6b6b2 100644 --- a/src/firebase.js +++ b/src/firebase.js @@ -1,5 +1,6 @@ import firebase from 'firebase/app'; import 'firebase/database'; +import 'firebase/storage'; const config = { apiKey: "AIzaSyAYf9AbeYwLY892NRiQfn0AMtG9xIFAJbo", diff --git a/src/pages/Quiz.js b/src/pages/Quiz.js deleted file mode 100644 index 28b9f15..0000000 --- a/src/pages/Quiz.js +++ /dev/null @@ -1,14 +0,0 @@ -import React, { Component } from 'react'; -import Typography from '@material-ui/core/Typography'; - -class Quiz extends Component { - render() { - return ( - - Quiz - - ); - } -} - -export default Quiz; diff --git a/src/pages/QuizPage.js b/src/pages/QuizPage.js new file mode 100644 index 0000000..9422b7b --- /dev/null +++ b/src/pages/QuizPage.js @@ -0,0 +1,13 @@ +import React, { Component } from 'react'; +import QuizGame from '../components/QuizGame'; + + +class QuizPage extends Component { + render() { + return ( + + ); + } +} + +export default QuizPage;