GVSU/marten-application
GVSU/marten-application
1
0
Fork 0
Code Pull Requests Releases Activity

merging

Browse Source
This commit is contained in:
Al Duncanson 2018-10-27 18:07:30 -04:00
parent 71b6ce9ad7
commit 94f5222c61
7 changed files with 312 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
package-lock.json generated
View File

@ -9592,6 +9592,11 @@
"integrity": "sha512-9DITV2YEMcw7XojdfvGl3gDD8J9QjZTJ7ZOUuSAkP+F3T6rDbzMJuPktxptsdHYEvZcmXrCD3LMOhdSAEq6zKA==", "integrity": "sha512-9DITV2YEMcw7XojdfvGl3gDD8J9QjZTJ7ZOUuSAkP+F3T6rDbzMJuPktxptsdHYEvZcmXrCD3LMOhdSAEq6zKA==",
"optional": true "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": { "ms": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",

1
package.json
View File

@ -10,6 +10,7 @@
"firebase-admin": "^6.0.0", "firebase-admin": "^6.0.0",
"flamelink": "^0.19.2", "flamelink": "^0.19.2",
"google-maps-react": "^2.0.2", "google-maps-react": "^2.0.2",
"moment": "^2.22.2",
"react": "^16.5.1", "react": "^16.5.1",
"react-dom": "^16.5.1", "react-dom": "^16.5.1",
"react-quiz-component": "0.2.0", "react-quiz-component": "0.2.0",

32
public/index.html
View File

@ -1,6 +1,17 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-128154616-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-128154616-1');
</script>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000"> <meta name="theme-color" content="#000000">
@ -30,15 +41,16 @@
You need to enable JavaScript to run this app. You need to enable JavaScript to run this app.
</noscript> </noscript>
<div id="root"></div> <div id="root"></div>
<!-- <!-- Hotjar Tracking Code for https://marten-application.netlify.com/ -->
This HTML file is a template. <script>
If you open it directly in the browser, you will see an empty page. (function(h,o,t,j,a,r){
h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
You can add webfonts, meta tags, or analytics to this file. h._hjSettings={hjid:1066756,hjsv:6};
The build step will place the bundled scripts into the <body> tag. a=o.getElementsByTagName('head')[0];
r=o.createElement('script');r.async=1;
To begin the development, run `npm start` or `yarn start`. r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
To create a production bundle, use `npm run build` or `yarn build`. a.appendChild(r);
--> })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
</script>
</body> </body>
</html> </html>

89
src/components/QuizGame.js
View File

@ -3,21 +3,9 @@ import Grid from '@material-ui/core/Grid';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles'; import { withStyles } from '@material-ui/core/styles';
import Quiz from 'react-quiz-component'; import Quiz from 'react-quiz-component';
import { Typography } from '@material-ui/core';
/** import Button from '@material-ui/core/Button';
* Shuffles a given array. import RefreshIcon from '@material-ui/icons/Refresh';
* @param {*} array The array passed in.
*/
function shuffleArray(array) {
var j, x, i;
for (i = array.length - 1; i > 0; i--) {
j = Math.floor(Math.random() * (i + 1));
x = array[i];
array[i] = array[j];
array[j] = x;
}
return array;
}
// Style for the tabs. // Style for the tabs.
const styles = theme => ({ const styles = theme => ({
@ -25,13 +13,45 @@ const styles = theme => ({
flexGrow: 1, flexGrow: 1,
backgroundColor: theme.palette.background.paper, backgroundColor: theme.palette.background.paper,
}, },
button: {
margin: theme.spacing.unit,
},
rightIcon: {
marginLeft: theme.spacing.unit,
},
}); });
class QuizGame extends React.Component { 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 = { easy = {
"quizTitle": "Trail Cam Quiz: Easy", "quizTitle": "Trail Cam Quiz: Easy",
"questions": shuffleArray([ "questions": [
{ {
"question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/question1.jpg" alt=""></img></Fragment>, "question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/question1.jpg" alt=""></img></Fragment>,
"questionType": "text", "questionType": "text",
@ -87,12 +107,12 @@ class QuizGame extends React.Component {
], ],
"correctAnswer": "3" "correctAnswer": "3"
}, },
]) ]
} }
medium = { medium = {
"quizTitle": "Trail Cam Quiz: Medium", "quizTitle": "Trail Cam Quiz: Medium",
"questions": shuffleArray([ "questions": [
{ {
"question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/question1.jpg" alt=""></img></Fragment>, "question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/question1.jpg" alt=""></img></Fragment>,
"questionType": "text", "questionType": "text",
@ -148,12 +168,12 @@ class QuizGame extends React.Component {
], ],
"correctAnswer": "3" "correctAnswer": "3"
}, },
]) ]
} }
hard = { hard = {
"quizTitle": "Trail Cam Quiz: Hard", "quizTitle": "Trail Cam Quiz: Hard",
"questions": shuffleArray([ "questions": [
{ {
"question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/question1.jpg" alt=""></img></Fragment>, "question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/question1.jpg" alt=""></img></Fragment>,
"questionType": "text", "questionType": "text",
@ -209,20 +229,29 @@ class QuizGame extends React.Component {
], ],
"correctAnswer": "3" "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 => { pickDifficulty = difficulty => {
let level let level
switch (difficulty) { switch (difficulty) {
case 'Easy': case 'Easy':
this.easy.questions = this.shuffleArray(this.easy.questions)
level = this.easy level = this.easy
break break
case 'Medium': case 'Medium':
this.medium.questions = this.shuffleArray(this.medium.questions)
level = this.medium level = this.medium
break break
case 'Hard': case 'Hard':
this.hard.questions = this.shuffleArray(this.hard.questions)
level = this.hard level = this.hard
break break
default: default:
@ -234,8 +263,8 @@ class QuizGame extends React.Component {
// The state of the component. // The state of the component.
state = { state = {
//difficulty: pickDifficulty(this.props.difficulty) difficulty: this.pickDifficulty(this.props.difficulty),
difficulty: this.pickDifficulty(this.props.difficulty) key: Math.random()
} }
// Renders the quiz component. // Renders the quiz component.
@ -245,9 +274,17 @@ class QuizGame extends React.Component {
return ( return (
// Tabs // Tabs
<div className={classes.root}> <div className={classes.root}>
<Grid container justify="center"> <Typography variant="headline" align="center">
<Quiz quiz={this.state.difficulty} /> <Grid container justify="center">
</Grid> <Quiz quiz={this.state.difficulty} key={this.state.key} />
</Grid>
</Typography>
<Typography align="center">
<Button variant="contained" color="default" className={classes.button} onClick={this.reset}>
Reset
<RefreshIcon className={classes.rightIcon} />
</Button>
</Typography>
</div> </div>
); );
} }

56
src/components/ReportForm.js
View File

@ -4,6 +4,10 @@ import Grid from '@material-ui/core/Grid';
import { withStyles } from '@material-ui/core/styles'; import { withStyles } from '@material-ui/core/styles';
import MenuItem from '@material-ui/core/MenuItem'; import MenuItem from '@material-ui/core/MenuItem';
import TextField from '@material-ui/core/TextField'; 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 Button from '@material-ui/core/Button';
import firebase from '../firebase.js'; import firebase from '../firebase.js';
import GoogleMap from '../components/ReportMap'; import GoogleMap from '../components/ReportMap';
@ -33,6 +37,17 @@ const styles = theme => ({
dense: { dense: {
marginTop: 30, marginTop: 30,
}, },
close: {
padding: theme.spacing.unit / 2,
},
icon: {
fontSize: 20,
marginRight: theme.spacing.unit,
},
message: {
display: 'flex',
alignItems: 'center',
},
menu: { menu: {
width: 200, width: 200,
}, },
@ -220,7 +235,8 @@ class ReportForm extends React.Component {
confidence: '1', confidence: '1',
desc: '', desc: '',
lat: '', lat: '',
lng: '' lng: '',
open: false
}; };
/** /**
@ -233,6 +249,17 @@ class ReportForm extends React.Component {
}); });
}; };
/**
* Handles closing the toast.
*/
handleClose = (event, reason) => {
if (reason === 'clickaway') {
return;
}
this.setState({ open: false });
};
/* /*
* Get the coordinates * Get the coordinates
* *
@ -274,7 +301,8 @@ class ReportForm extends React.Component {
confidence: '1', confidence: '1',
desc: '', desc: '',
lat: '', lat: '',
lng: '' lng: '',
open: true
}); });
}; };
@ -440,6 +468,30 @@ class ReportForm extends React.Component {
</Grid> </Grid>
</Grid> </Grid>
</form> </form>
<Snackbar
anchorOrigin={{
vertical: 'bottom',
horizontal: 'left',
}}
open={this.state.open}
autoHideDuration={6000}
onClose={this.handleClose}
ContentProps={{
'aria-describedby': 'message-id',
}}
message={<span id="message-id" className={classes.message}><CheckCircleIcon className={classes.icon}/>Report received.</span>}
action={[
<IconButton
key="close"
aria-label="Close"
color="inherit"
className={classes.close}
onClick={this.handleClose}
>
<CloseIcon />
</IconButton>,
]}
/>
</Fragment> </Fragment>
); );
} }

205
src/components/SightingMap.js
View File

@ -1,5 +1,6 @@
import React, { Component, Fragment } from 'react'; import React, { Component, Fragment } from 'react';
import { Map, InfoWindow, Marker, GoogleApiWrapper } from 'google-maps-react'; import { Map, InfoWindow, Marker, GoogleApiWrapper } from 'google-maps-react';
import moment from 'moment'
import Typography from '@material-ui/core/Typography'; import Typography from '@material-ui/core/Typography';
import firebase from '../firebase.js'; import firebase from '../firebase.js';
@ -12,6 +13,128 @@ const mapStyles = {
height: '100%' 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 { export class MapContainer extends Component {
// Get the user's location using Google's geolocation // Get the user's location using Google's geolocation
@ -19,22 +142,22 @@ export class MapContainer extends Component {
if (navigator.geolocation) { if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition((position) => { navigator.geolocation.getCurrentPosition((position) => {
this.setState({ this.setState({
myLatLng: { myLatLng: {
lat: position.coords.latitude, lat: position.coords.latitude,
lng: position.coords.longitude lng: position.coords.longitude
}
} }
}
); );
}) })
} else { } else {
// If browser doesn't support geolocation or if user does not allow it, // If browser doesn't support geolocation or if user does not allow it,
// center map on Grand Rapids, Michigan // center map on Grand Rapids, Michigan
this.setState({ this.setState({
myLatLng: { myLatLng: {
lat: 42.9634, lat: 42.9634,
lng: 85.6681 lng: 85.6681
}
} }
}
); );
} }
} }
@ -85,6 +208,10 @@ export class MapContainer extends Component {
} }
} }
formatDate = date => {
return (moment(date, "YYYY-MM").format("MMMM YYYY").toString())
}
// Set the state of the component to contain user coordinates and initial // Set the state of the component to contain user coordinates and initial
// marker and info window information // marker and info window information
state = { state = {
@ -101,55 +228,55 @@ export class MapContainer extends Component {
render() { render() {
return ( return (
// Render the Google Map, Marker, and InfoWindow components // Render the Google Map, Marker, and InfoWindow components
<div className = "sighting-google-map-container"> <div className="sighting-google-map-container">
<Map <Map
style = { mapStyles } style={mapStyles}
google = { this.props.google } google={this.props.google}
initialCenter = { this.state.myLatLng } initialCenter={this.state.myLatLng}
center = { this.state.myLatLng } center={this.state.myLatLng}
defaultZoom = { 15 } defaultZoom={15}
onClick = { this.onMapClick } > onClick={this.onMapClick} >
<Marker <Marker
position = { this.state.myLatLng } position={this.state.myLatLng}
onClick = { this.onMarkerClick } onClick={this.onMarkerClick}
type = { 'You are here' } type={'You are here'}
/> />
{ this.state.sightings.map((sighting) => { {this.state.sightings.map((sighting) => {
return ( return (
<Marker <Marker
key={ sighting.id } key = {sighting.id}
position={{ lat: sighting.lat, lng:sighting.lng }} position = {{ lat: sighting.lat, lng: sighting.lng }}
onClick = { this.onMarkerClick } onClick = {this.onMarkerClick}
type = { 'Type: ' + sighting.type } type = {'Type: ' + getType(sighting.type)}
confidence = { 'Confidence: ' + sighting.confidence } confidence = {<Fragment><b>Confidence:</b> {getConfidence(sighting.confidence)}</Fragment>}
date = { 'Date: ' + sighting.date } date = {<Fragment><b>Date:</b> {this.formatDate(sighting.date)}</Fragment>}
time = { 'Time: ' + sighting.time } time = {<Fragment><b>Time:</b> {getTime(sighting.time)}</Fragment>}
description = { 'Description: ' + sighting.desc } description = {<Fragment><b>Description:</b> {sighting.desc}</Fragment>}
/> />
) )
})} })}
<InfoWindow <InfoWindow
marker = { this.state.activeMarker } marker={this.state.activeMarker}
visible = { this.state.showingInfoWindow } > visible={this.state.showingInfoWindow} >
<Fragment> <Fragment>
<Typography variant = "display1" gutterBottom> <Typography variant="display1" gutterBottom>
{ this.state.selectedPlace.type } {this.state.selectedPlace.type}
</Typography> </Typography>
<Typography variant = "subheading" gutterBottom> <Typography variant="subheading" gutterBottom>
{ this.state.selectedPlace.confidence } {this.state.selectedPlace.confidence}
</Typography> </Typography>
<Typography variant = "subheading" gutterBottom> <Typography variant="subheading" gutterBottom>
{ this.state.selectedPlace.date } {this.state.selectedPlace.date}
</Typography> </Typography>
<Typography variant = "subheading" gutterBottom> <Typography variant="subheading" gutterBottom>
{ this.state.selectedPlace.time } {this.state.selectedPlace.time}
</Typography> </Typography>
<Typography variant = "subheading" gutterBottom> <Typography variant="subheading" gutterBottom>
{ this.state.selectedPlace.description } {this.state.selectedPlace.description}
</Typography> </Typography>
</Fragment> </Fragment>
</InfoWindow> </InfoWindow>

3
src/components/ViewSightings.js
View File

@ -3,9 +3,7 @@ import Grid from '@material-ui/core/Grid';
import firebase from '../firebase.js'; import firebase from '../firebase.js';
import List from '@material-ui/core/List'; import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem'; import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText'; import ListItemText from '@material-ui/core/ListItemText';
import HomeIcon from '@material-ui/icons/Home';
import SightingDetail from './SightingDetail'; import SightingDetail from './SightingDetail';
class ViewSightings extends Component { class ViewSightings extends Component {
@ -77,7 +75,6 @@ class ViewSightings extends Component {
this.state.sightings.map((sighting) => { this.state.sightings.map((sighting) => {
return ( return (
<ListItem button key={ sighting.id } onClick={() => this.getDetail(sighting.id, sighting.lat, sighting.lng, sighting.desc, sighting.type, sighting.confidence, sighting.date, sighting.time)}> <ListItem button key={ sighting.id } onClick={() => this.getDetail(sighting.id, sighting.lat, sighting.lng, sighting.desc, sighting.type, sighting.confidence, sighting.date, sighting.time)}>
<ListItemIcon><HomeIcon/></ListItemIcon>
<ListItemText primary={`${sighting.desc}`}/> <ListItemText primary={`${sighting.desc}`}/>
</ListItem> </ListItem>
) )