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

Fixed merge conflict.

This commit is contained in:
wildscotsmen 2018-11-04 21:50:16 -05:00
parent 5182b92b82 d926c107c0
commit 0a8120e826
13 changed files with 955 additions and 767 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
package-lock.json generated
View File

@ -3051,6 +3051,16 @@
"sha.js": "^2.4.8" "sha.js": "^2.4.8"
} }
}, },
"create-react-class": {
"version": "15.6.3",
"resolved": "https://registry.npmjs.org/create-react-class/-/create-react-class-15.6.3.tgz",
"integrity": "sha512-M+/3Q6E6DLO6Yx3OwrWjwHBnvfXXYA7W+dFjt/ZDBemHO1DDZhsalX/NUtnTYclN6GfnBDRh4qRHjcDHmlJBJg==",
"requires": {
"fbjs": "^0.8.9",
"loose-envify": "^1.3.1",
"object-assign": "^4.1.1"
}
},
"cross-spawn": { "cross-spawn": {
"version": "5.1.0", "version": "5.1.0",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
@ -3567,6 +3577,40 @@
} }
} }
}, },
"disqus-react": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/disqus-react/-/disqus-react-1.0.5.tgz",
"integrity": "sha1-go6hhr0kHF4qbf66tRNeUqLZHRE=",
"requires": {
"react": "^15.6.1",
"react-dom": "^15.6.1"
},
"dependencies": {
"react": {
"version": "15.6.2",
"resolved": "https://registry.npmjs.org/react/-/react-15.6.2.tgz",
"integrity": "sha1-26BDSrQ5z+gvEI8PURZjkIF5qnI=",
"requires": {
"create-react-class": "^15.6.0",
"fbjs": "^0.8.9",
"loose-envify": "^1.1.0",
"object-assign": "^4.1.0",
"prop-types": "^15.5.10"
}
},
"react-dom": {
"version": "15.6.2",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-15.6.2.tgz",
"integrity": "sha1-Qc+t9pO3V/rycIRDodH9WgK+9zA=",
"requires": {
"fbjs": "^0.8.9",
"loose-envify": "^1.1.0",
"object-assign": "^4.1.0",
"prop-types": "^15.5.10"
}
}
}
},
"dns-equal": { "dns-equal": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz", "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",

1
package.json
View File

@ -5,6 +5,7 @@
"dependencies": { "dependencies": {
"@material-ui/core": "^3.1.0", "@material-ui/core": "^3.1.0",
"@material-ui/icons": "^3.0.1", "@material-ui/icons": "^3.0.1",
"disqus-react": "^1.0.5",
"firebase": "^5.5.2", "firebase": "^5.5.2",
"firebase-admin": "^6.0.0", "firebase-admin": "^6.0.0",
"flamelink": "^0.19.2", "flamelink": "^0.19.2",

34
src/App.css
View File

@ -13,4 +13,38 @@ body {
.report-google-map-container > div { .report-google-map-container > div {
width: calc(100% - 50% - 120px) !important; width: calc(100% - 50% - 120px) !important;
} }
}
#disqus_thread {
width: 89% !important;
margin: 0 auto;
}
.sighting-list {
height: calc(50vh - 64px);
overflow-y: scroll;
}
@media (min-width: 960px) {
.sighting-list {
height: calc(100vh - 64px);
overflow-y: scroll;
}
}
.sighting-details-content {
width: 89%;
margin: 330px auto 0 auto;
}
.sighting-detail-google-map-container > div {
width: 100% !important;
height: 300px !important;
}
@media (min-width: 960px) {
.sighting-detail-google-map-container > div {
width: calc(100% - 50% - 120px) !important;
height: 300px !important;
}
} }

1
src/components/Flamelink.js
View File

@ -2,7 +2,6 @@ import { Component } from 'react';
class Flamelink extends Component { class Flamelink extends Component {
render() { render() {
return(null); return(null);
} }
} }

12
src/components/Main.js
View File

@ -68,7 +68,7 @@ const styles = theme => ({
class ResponsiveDrawer extends React.Component { class ResponsiveDrawer extends React.Component {
state = { state = {
mobileOpen: false, mobileOpen: false,
key: '', key: 'Home',
open: false open: false
}; };
@ -83,7 +83,7 @@ class ResponsiveDrawer extends React.Component {
nav = (text) => { nav = (text) => {
this.setState({ this.setState({
key: text key: text
}) });
} }
render() { render() {
@ -149,7 +149,7 @@ class ResponsiveDrawer extends React.Component {
<MenuIcon /> <MenuIcon />
</IconButton> </IconButton>
<Typography variant="title" color="inherit" noWrap> <Typography variant="title" color="inherit" noWrap>
The American Marten Marten Tracker
</Typography> </Typography>
</Toolbar> </Toolbar>
</AppBar> </AppBar>
@ -189,9 +189,9 @@ class ResponsiveDrawer extends React.Component {
{this.state.key === 'Report' && <Report />} {this.state.key === 'Report' && <Report />}
{this.state.key === 'Map' && <ViewMap />} {this.state.key === 'Map' && <ViewMap />}
{this.state.key === 'List' && <SightingList />} {this.state.key === 'List' && <SightingList />}
{this.state.key === 'Easy-Quiz' && <Quiz difficulty='Easy'/>} {this.state.key === 'Easy-Quiz' && <Quiz difficulty='Easy' />}
{this.state.key === 'Medium-Quiz' && <Quiz difficulty='Medium'/>} {this.state.key === 'Medium-Quiz' && <Quiz difficulty='Medium' />}
{this.state.key === 'Hard-Quiz' && <Quiz difficulty='Hard'/>} {this.state.key === 'Hard-Quiz' && <Quiz difficulty='Hard' />}
</main> </main>
</div> </div>
); );

26
src/components/QuizGame.js
View File

@ -239,33 +239,33 @@ class QuizGame extends React.Component {
* @param {*} difficulty The difficulty setting passed in. * @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) 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) 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) this.hard.questions = this.shuffleArray(this.hard.questions);
level = this.hard level = this.hard;
break break;
default: default:
break break;
} }
return level return level;
} }
// The state of the component. // The state of the component.
state = { state = {
difficulty: this.pickDifficulty(this.props.difficulty), difficulty: this.pickDifficulty(this.props.difficulty),
key: Math.random() key: Math.random()
} };
// Renders the quiz component. // Renders the quiz component.
render() { render() {

918
src/components/ReportForm.js
View File

@ -11,6 +11,8 @@ 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';
import Modal from '@material-ui/core/Modal';
import Typography from '@material-ui/core/Typography';
/** /**
* Styles that the different * Styles that the different
@ -18,84 +20,78 @@ import GoogleMap from '../components/ReportMap';
* in. Mostly used for spacing. * in. Mostly used for spacing.
*/ */
const styles = theme => ({ const styles = theme => ({
container: { container: {
display: 'flex', display: 'flex',
flexWrap: 'wrap' flexWrap: 'wrap'
}, },
textField: { textField: {
marginLeft: theme.spacing.unit * 2, marginLeft: theme.spacing.unit * 2,
marginRight: theme.spacing.unit, marginRight: theme.spacing.unit,
marginTop: theme.spacing.unit * 2, marginTop: theme.spacing.unit * 2,
flexBasis: 280, flexBasis: 280,
width: '90%' width: '90%'
}, },
button: { button: {
marginLeft: theme.spacing.unit * 2, marginLeft: theme.spacing.unit * 2,
marginRight: theme.spacing.unit, marginRight: theme.spacing.unit,
marginTop: theme.spacing.unit * 2, marginTop: theme.spacing.unit * 2,
}, },
dense: { dense: {
marginTop: 30, marginTop: 30,
}, },
close: { close: {
padding: theme.spacing.unit / 2, padding: theme.spacing.unit / 2,
}, },
icon: { icon: {
fontSize: 20, fontSize: 20,
marginRight: theme.spacing.unit, marginRight: theme.spacing.unit,
}, },
message: { message: {
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
}, },
menu: { menu: {
width: 200, width: 200,
}, },
paper: {
position: 'absolute',
width: theme.spacing.unit * 50,
backgroundColor: theme.palette.background.paper,
boxShadow: theme.shadows[5],
padding: theme.spacing.unit * 4,
}
}); });
/**
* 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 * Types of sightings. Label is what is
* viewed in the application, value is * viewed in the application, value is
* what is stored in the database. * what is stored in the database.
*/ */
const sightingTypes = [ const sightingTypes = [
{ {
value: 'visual', value: 'visual',
label: 'Visual', label: 'Visual',
}, },
{ {
value: 'roadkill', value: 'roadkill',
label: 'Roadkill', label: 'Roadkill',
}, },
{ {
value: 'trapped', value: 'trapped',
label: 'Trapped', label: 'Trapped',
}, },
{ {
value: 'viewed_tracks', value: 'viewed_tracks',
label: 'Viewed Tracks', label: 'Viewed Tracks',
}, },
{ {
value: 'photo', value: 'photo',
label: 'Photo', label: 'Photo',
}, },
{ {
value: 'other', value: 'other',
label: 'Other', label: 'Other',
}, },
]; ];
/** /**
@ -104,54 +100,54 @@ const sightingTypes = [
* what is stored in the database. * what is stored in the database.
*/ */
const monthTypes = [ const monthTypes = [
{ {
value: '01', value: '01',
label: 'January', label: 'January',
}, },
{ {
value: '02', value: '02',
label: 'February', label: 'February',
}, },
{ {
value: '03', value: '03',
label: 'March', label: 'March',
}, },
{ {
value: '04', value: '04',
label: 'April', label: 'April',
}, },
{ {
value: '05', value: '05',
label: 'May', label: 'May',
}, },
{ {
value: '06', value: '06',
label: 'June', label: 'June',
}, },
{ {
value: '07', value: '07',
label: 'July', label: 'July',
}, },
{ {
value: '08', value: '08',
label: 'August', label: 'August',
}, },
{ {
value: '09', value: '09',
label: 'September', label: 'September',
}, },
{ {
value: '10', value: '10',
label: 'October', label: 'October',
}, },
{ {
value: '11', value: '11',
label: 'November', label: 'November',
}, },
{ {
value: '12', value: '12',
label: 'December', label: 'December',
}, },
]; ];
/** /**
@ -160,26 +156,26 @@ const monthTypes = [
* what is stored in the database. * what is stored in the database.
*/ */
const timeTypes = [ const timeTypes = [
{ {
value: 'unknown', value: 'unknown',
label: 'Unknown', label: 'Unknown',
}, },
{ {
value: 'morning', value: 'morning',
label: 'Morning', label: 'Morning',
}, },
{ {
value: 'midday', value: 'midday',
label: 'Midday', label: 'Midday',
}, },
{ {
value: 'evening', value: 'evening',
label: 'Evening', label: 'Evening',
}, },
{ {
value: 'night', value: 'night',
label: 'Night', label: 'Night',
}, },
]; ];
/** /**
@ -188,317 +184,379 @@ const timeTypes = [
* what is stored in the database. * what is stored in the database.
*/ */
const confidenceLevels = [ const confidenceLevels = [
{ {
value: '1', value: '1',
label: '1 - Strongly disagree', label: '1 - Strongly disagree',
}, },
{ {
value: '2', value: '2',
label: '2 - Disagree', label: '2 - Disagree',
}, },
{ {
value: '3', value: '3',
label: '3 - Neutral', label: '3 - Neutral',
}, },
{ {
value: '4', value: '4',
label: '4 - Agree', label: '4 - Agree',
}, },
{ {
value: '5', value: '5',
label: '5 - Strongly agree', label: '5 - Strongly agree',
}, },
]; ];
/** /**
* The form component. * The form component.
*/ */
class ReportForm extends React.Component { class ReportForm extends React.Component {
/** /**
* Component contructor. Currently * Component contructor. Currently
* only used to bind event * only used to bind event
* handlers. * handlers.
*/ */
constructor() { constructor() {
super(); super();
this.handleSubmit = this.handleSubmit.bind(this); this.handleSubmit = this.handleSubmit.bind(this);
}
/**
* State of form components.
*/
state = {
month: '01',
year: 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;
} }
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: getYear(new Date()),
month: '01',
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 ( state = {
<Fragment> month: this.getMonth(new Date()),
<form className={classes.container} autoComplete="off" onSubmit={this.handleSubmit}> year: this.getYear(new Date()),
<Grid container> time: 'unknown',
<Grid item xs={12} md={6}> type: 'visual',
<Grid container spacing={8}> confidence: '1',
<Grid item xs={12}> desc: '',
<TextField lat: '',
id="select-sighting-type" lng: '',
select open: false,
required openModal: false,
name="sighting-type" hasModalOpened: false
label="Select" };
className={classes.textField}
value={this.state.type}
onChange={this.handleChange('type')}
SelectProps={{
MenuProps: {
className: classes.menu,
},
}}
helperText="Please select type of sighting"
>
{sightingTypes.map(option => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
</Grid>
<Grid item xs={12}> handleModalOpen = () => !this.state.hasModalOpened ? this.setState({ openModal: true, hasModalOpened: true }) : null;
<TextField
id="select-confidence"
select
required
name="sighting-confidence"
label="Select"
className={classes.textField}
value={this.state.confidence}
onChange={this.handleChange('confidence')}
SelectProps={{
MenuProps: {
className: classes.menu,
},
}}
helperText="I am confident of my marten sighting"
>
{confidenceLevels.map(option => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
</Grid>
<Grid item xs={12}> handleModalClose = () => {
<TextField this.setState({ openModal: false });
id="sighting-time" };
select
required
label="Sighting time"
name="sighting-time"
className={classes.textField}
value={this.state.time}
onChange={this.handleChange('time')}
SelectProps={{
MenuProps: {
className: classes.menu,
},
}}
>
{timeTypes.map(option => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
</Grid>
<Grid item xs={12}> getModalStyle = () => {
<TextField return {
id="sighting-month" top: `25%`,
select left: `75%`,
required transform: `translate(-25%, -75%)`,
label="Sighting month" };
name="sighting-month" }
className={classes.textField}
value={this.state.month}
onChange={this.handleChange('month')}
SelectProps={{
MenuProps: {
className: classes.menu,
},
}}
>
{monthTypes.map(option => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
</Grid>
<Grid item xs={12}> /**
<TextField * Handles state change in form
id="sighting-year" * components.
required */
label="Sighting year" handleChange = name => event => {
name="sighting-year" this.setState({
value={this.state.year} [name]: event.target.value,
type="number" });
className={classes.textField} };
onChange={this.handleChange('year')}
InputLabelProps={{
shrink: true,
}}
/>
</Grid>
<Grid item xs={12}> /**
<TextField * Handles closing the toast.
id="sighting-description" */
required handleClose = (event, reason) => {
label="Description" if (reason === 'clickaway') {
name="sighting-desc" return;
multiline }
rows="5"
placeholder="Describe the sighting to the best of your ability."
value={this.state.desc}
className={classes.textField}
onChange={this.handleChange('desc')}
margin="normal"
variant="outlined"
InputLabelProps={{
shrink: true,
}}
/>
</Grid>
<Grid item xs={12}> this.setState({ open: false });
<Button variant="contained" type="submit" color="primary" className={classes.button}> };
Submit
</Button> /*
</Grid> * Get the coordinates
</Grid> *
</Grid> */
<Grid item xs={12} md={6}> getCoordinates = (lat, lng) => {
<GoogleMap onClick={this.getCoordinates} /> let latitude = lat;
</Grid> let longitude = lng;
</Grid>
</form> this.setState({
<Snackbar lat: latitude,
anchorOrigin={{ lng: longitude
vertical: 'bottom', });
horizontal: 'left', }
}}
open={this.state.open} /**
autoHideDuration={6000} * Event listener for form.
onClose={this.handleClose} * When the form is submitted,
ContentProps={{ * this function passes the
'aria-describedby': 'message-id', * data along to Firebase.
}} */
message={<span id="message-id" className={classes.message}><CheckCircleIcon className={classes.icon}/>Report received.</span>} handleSubmit(e) {
action={[ e.preventDefault();
<IconButton const sightingsRef = firebase.database().ref('sightings');
key="close" const sighting = {
aria-label="Close" type: this.state.type,
color="inherit" confidence: this.state.confidence,
className={classes.close} date: this.state.year + '-' + this.state.month,
onClick={this.handleClose} time: this.state.time,
> desc: this.state.desc,
<CloseIcon /> lat: this.state.lat,
</IconButton>, lng: this.state.lng
]} }
/> sightingsRef.push(sighting);
</Fragment> 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 (
<Fragment>
<form className={classes.container} autoComplete="off" onSubmit={this.handleSubmit}>
<Grid container>
<Grid item xs={12} md={6}>
<Grid container spacing={8}>
<Grid item xs={12}>
<TextField
id="select-sighting-type"
select
required
name="sighting-type"
label="Select"
className={classes.textField}
value={this.state.type}
onChange={this.handleChange('type')}
SelectProps={{
MenuProps: {
className: classes.menu,
},
}}
helperText="Please select type of sighting"
>
{sightingTypes.map(option => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
</Grid>
<Grid item xs={12}>
<TextField
id="select-confidence"
select
required
name="sighting-confidence"
label="Select"
className={classes.textField}
value={this.state.confidence}
onChange={this.handleChange('confidence')}
SelectProps={{
MenuProps: {
className: classes.menu,
},
}}
helperText="I am confident of my marten sighting"
>
{confidenceLevels.map(option => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
</Grid>
<Grid item xs={12}>
<TextField
id="sighting-time"
select
required
label="Sighting time"
name="sighting-time"
className={classes.textField}
value={this.state.time}
onChange={this.handleChange('time')}
SelectProps={{
MenuProps: {
className: classes.menu,
},
}}
>
{timeTypes.map(option => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
</Grid>
<Grid item xs={12}>
<TextField
id="sighting-month"
select
required
label="Sighting month"
name="sighting-month"
className={classes.textField}
value={this.state.month}
onChange={this.handleChange('month')}
SelectProps={{
MenuProps: {
className: classes.menu,
},
}}
>
{monthTypes.map(option => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
</Grid>
<Grid item xs={12}>
<TextField
id="sighting-year"
required
label="Sighting year"
name="sighting-year"
value={this.state.year}
type="number"
className={classes.textField}
onChange={this.handleChange('year')}
InputLabelProps={{
shrink: true,
}}
/>
</Grid>
<Grid item xs={12}>
<TextField
id="sighting-description"
required
label="Description"
name="sighting-desc"
multiline
rows="5"
placeholder="Describe the sighting to the best of your ability."
value={this.state.desc}
className={classes.textField}
onChange={this.handleChange('desc')}
margin="normal"
variant="outlined"
InputLabelProps={{
shrink: true,
}}
/>
</Grid>
<Grid item xs={12}>
<Button variant="contained" type="submit" color="primary" className={classes.button}>
Submit
</Button>
</Grid>
</Grid>
</Grid>
<Grid item xs={12} md={6} onMouseEnter={this.handleModalOpen}>
<GoogleMap onClick={this.getCoordinates}/>
<Modal
aria-labelledby="simple-modal-title"
aria-describedby="simple-modal-description"
open={this.state.openModal}
onClose={this.handleModalClose}
>
<div style={this.getModalStyle()} className={classes.paper}>
<Typography variant="title" id="modal-title">
Need a little help?
</Typography>
<Typography variant="subheading" id="simple-modal-description">
Click on the map to drop a pin!
</Typography>
</div>
</Modal>
</Grid>
</Grid>
</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>
);
}
} }
ReportForm.propTypes = { ReportForm.propTypes = {
classes: PropTypes.object.isRequired, classes: PropTypes.object.isRequired,
}; };
export default withStyles(styles)(ReportForm); export default withStyles(styles)(ReportForm);

70
src/components/ReportMap.js
View File

@ -9,7 +9,7 @@ const API_KEY = 'AIzaSyAZ_0J01bA6wCbIPK4UBq2RUBC-hIqG4mM';
const mapStyles = { const mapStyles = {
width: '100%', width: '100%',
height: '100%' height: '100%'
} };
export class MapContainer extends Component { export class MapContainer extends Component {
@ -18,22 +18,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
}
} }
}
); );
} }
} }
@ -52,7 +52,7 @@ export class MapContainer extends Component {
showingInfoWindow: true showingInfoWindow: true
}); });
} }
// When the user clicks on the map, if a info window is visible then close it // When the user clicks on the map, if a info window is visible then close it
// and 'unactive' that marker // and 'unactive' that marker
onMapClick = (props, map, e) => { onMapClick = (props, map, e) => {
@ -68,13 +68,13 @@ export class MapContainer extends Component {
lat: e.latLng.lat(), lat: e.latLng.lat(),
lng: e.latLng.lng() lng: e.latLng.lng()
} }
}) });
let lat = e.latLng.lat(); let lat = e.latLng.lat();
let lng = e.latLng.lng(); let lng = e.latLng.lng();
if (this.props.onClick) { if (this.props.onClick) {
this.props.onClick(lat,lng); this.props.onClick(lat, lng);
} }
} }
@ -98,36 +98,36 @@ export class MapContainer extends Component {
return ( return (
// Render the Google Map, Marker, and InfoWindow components // Render the Google Map, Marker, and InfoWindow components
<div className = "report-google-map-container"> <div className="report-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.markerLatLng } position={this.state.markerLatLng}
/> />
<Marker <Marker
position = { this.state.myLatLng } position={this.state.myLatLng}
onClick = { this.onMarkerClick } onClick={this.onMarkerClick}
title = { 'You are here' } title={'You are here'}
name = { '' } name={''}
/> />
<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.title } {this.state.selectedPlace.title}
</Typography> </Typography>
<Typography variant = "subheading" gutterBottom> <Typography variant="subheading" gutterBottom>
{ this.state.selectedPlace.name } {this.state.selectedPlace.name}
</Typography> </Typography>
</Fragment> </Fragment>
</InfoWindow> </InfoWindow>
@ -138,6 +138,4 @@ export class MapContainer extends Component {
} }
// Send the Google Map API Key with the MapContainer component // Send the Google Map API Key with the MapContainer component
export default GoogleApiWrapper({ export default GoogleApiWrapper({ apiKey: (API_KEY) })(MapContainer);
apiKey: (API_KEY)
})(MapContainer)

160
src/components/SightingDetail.js Normal file
View File

@ -0,0 +1,160 @@
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 (
<Fragment>
<SightingDetailMap lat={this.props.detail.lat} lng={this.props.detail.lng} />
<div className='sighting-details-content'>
<p><b>Type:</b> {this.getType(this.props.detail.type)}</p>
<p><b>When:</b> {this.formatDate(this.props.detail.date)}, {this.getTime(this.props.detail.time)}</p>
<p><b>Where:</b> {this.props.detail.lat} degrees N, and {this.props.detail.lng} degrees E</p>
<p><b>I am confident of my sighting:</b> {this.getConfidence(this.props.detail.confidence)}</p>
<hr/>
<p>{`${this.props.detail.desc}`}</p>
</div>
<Disqus.DiscussionEmbed shortname={disqusShortname} config={disqusConfig} />
</Fragment>
);
}
}
export default SightingDetail;

36
src/components/SightingDetailMap.js Normal file
View File

@ -0,0 +1,36 @@
import React, { Component } from 'react';
import { Map, Marker, GoogleApiWrapper } from 'google-maps-react';
// Google Maps API Key
const API_KEY = 'AIzaSyAZ_0J01bA6wCbIPK4UBq2RUBC-hIqG4mM';
// Map container styles
const mapStyles = {
width: '100%',
height: '100%'
};
export class MapContainer extends Component {
render() {
return (
// Render the Google Map, Marker, and InfoWindow components
<div className="sighting-detail-google-map-container">
<Map
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}>
<Marker
position={{ lat: this.props.lat, lng: this.props.lng }}
/>
</Map>
</div>
);
}
}
// Send the Google Map API Key with the MapContainer component
export default GoogleApiWrapper({ apiKey: (API_KEY) })(MapContainer);

132
src/components/SightingMap.js
View File

@ -1,6 +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 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';
@ -11,7 +11,7 @@ const API_KEY = 'AIzaSyAZ_0J01bA6wCbIPK4UBq2RUBC-hIqG4mM';
const mapStyles = { const mapStyles = {
width: '100%', width: '100%',
height: '100%' height: '100%'
} };
/** /**
* Types of sightings. Label is what is * Types of sightings. Label is what is
@ -81,60 +81,26 @@ const timeTypes = [
const confidenceLevels = [ const confidenceLevels = [
{ {
value: '1', value: '1',
label: '1 - Strongly unconfident', label: '1 - Strongly disagree',
}, },
{ {
value: '2', value: '2',
label: '2 - Unconfident', label: '2 - Disagree',
}, },
{ {
value: '3', value: '3',
label: '3 - Somewhat confident', label: '3 - Neutral',
}, },
{ {
value: '4', value: '4',
label: '4 - Confident', label: '4 - Agree',
}, },
{ {
value: '5', value: '5',
label: '5 - Very confident', label: '5 - Strongly agree',
}, },
]; ];
/**
* 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
@ -146,9 +112,8 @@ export class MapContainer extends Component {
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
@ -157,11 +122,45 @@ export class MapContainer extends Component {
lat: 42.9634, lat: 42.9634,
lng: 85.6681 lng: 85.6681
} }
} });
);
} }
} }
/**
* 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;
}
}
}
// When the component has mounted to the DOM, get the user's location // When the component has mounted to the DOM, get the user's location
componentDidMount() { componentDidMount() {
this.getLocation(); this.getLocation();
@ -231,7 +230,6 @@ export class MapContainer extends Component {
default: default:
break break
} }
return pinIcon return pinIcon
} }
@ -250,7 +248,7 @@ export class MapContainer extends Component {
activeMarker: {}, activeMarker: {},
selectedPlace: {}, selectedPlace: {},
sightings: [] sightings: []
} };
render() { render() {
const {google} = this.props; const {google} = this.props;
@ -264,27 +262,29 @@ export class MapContainer extends Component {
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) => {
let pinIcon = this.sightingIcon(sighting.type)
{this.state.sightings.map((sighting) => {
let pinIcon = this.sightingIcon(sighting.type)
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: ' + getType(sighting.type)} type={'Type: ' + this.getType(sighting.type)}
confidence = {<Fragment><b>Confidence:</b> {getConfidence(sighting.confidence)}</Fragment>} date={<Fragment><b>Date:</b> {this.formatDate(sighting.date)}</Fragment>}
date = {<Fragment><b>Date:</b> {this.formatDate(sighting.date)}</Fragment>} time={<Fragment><b>Time:</b> {this.getTime(sighting.time)}</Fragment>}
time = {<Fragment><b>Time:</b> {getTime(sighting.time)}</Fragment>} confidence={<Fragment><b>I am confident of my sighting:</b> {this.getConfidence(sighting.confidence)}</Fragment>}
description = {<Fragment><b>Description:</b> {sighting.desc}</Fragment>} description={<Fragment><b>Description:</b> {sighting.desc}</Fragment>}
icon={{ icon={{
url: pinIcon, url: pinIcon,
anchor: new google.maps.Point(32,32), anchor: new google.maps.Point(32,32),
@ -302,15 +302,15 @@ export class MapContainer extends Component {
<Typography variant="display1" gutterBottom> <Typography variant="display1" gutterBottom>
{this.state.selectedPlace.type} {this.state.selectedPlace.type}
</Typography> </Typography>
<Typography variant="subheading" gutterBottom>
{this.state.selectedPlace.confidence}
</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>
{this.state.selectedPlace.confidence}
</Typography>
<Typography variant="subheading" gutterBottom> <Typography variant="subheading" gutterBottom>
{this.state.selectedPlace.description} {this.state.selectedPlace.description}
</Typography> </Typography>
@ -323,6 +323,4 @@ export class MapContainer extends Component {
} }
// Send the Google Map API Key with the MapContainer component // Send the Google Map API Key with the MapContainer component
export default GoogleApiWrapper({ export default GoogleApiWrapper({ apiKey: (API_KEY) })(MapContainer);
apiKey: (API_KEY)
})(MapContainer)

283
src/components/ViewSightings.js
View File

@ -1,232 +1,95 @@
import React, {Fragment} from 'react'; import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';
import Grid from '@material-ui/core/Grid'; import Grid from '@material-ui/core/Grid';
import TextField from '@material-ui/core/TextField'
import Button from '@material-ui/core/Button'
import Paper from '@material-ui/core/Paper'
import { withStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import firebase from '../firebase.js'; import firebase from '../firebase.js';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import SightingDetail from './SightingDetail';
const styles = theme => ({ class ViewSightings extends Component {
root: {
...theme.mixins.gutters(),
paddingTop: theme.spacing.unit * 2,
paddingBottom: theme.spacing.unit * 2,
},
container: {
display: 'flex',
flexWrap: 'wrap',
},
textField: {
marginLeft: theme.spacing.unit * 2,
marginRight: theme.spacing.unit * 2,
marginTop: theme.spacing.unit * 2,
flexBasis: 280,
},
button: {
marginLeft: theme.spacing.unit * 3,
marginRight: theme.spacing.unit * 3,
marginTop: theme.spacing.unit * 3,
},
paper: {
marginLeft: theme.spacing.unit * 2,
marginRight: theme.spacing.unit,
marginTop: theme.spacing.unit * 2,
},
});
/** componentDidMount() {
* Types of sightings. Label is what is const sightingsRef = firebase.database().ref('sightings');
* 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',
},
];
/**
* 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',
},
];
/** sightingsRef.on('value', (snapshot) => {
* Gets formatted confidence value. let sightings = snapshot.val();
*/ let newState = [];
function getConfidence(item) {
for (var i = 0; i < confidenceLevels.length; i++) { for (let sighting in sightings) {
if (confidenceLevels[i].value === item) { newState.unshift({
return confidenceLevels[i].label; id: sighting,
lat: sightings[sighting].lat,
lng: sightings[sighting].lng,
desc: sightings[sighting].desc,
type: sightings[sighting].type,
confidence: sightings[sighting].confidence,
date: sightings[sighting].date,
time: sightings[sighting].time
});
} }
} this.setState({
sightings: newState
});
});
} }
/** getDetail = (id, lat, lng, desc, type, confidence, date, time) => {
* Gets formatted type value. this.setState({
*/ selectedSighting: {
function getType(item) { id: id,
for (var i = 0; i < sightingTypes.length; i++) { lat: lat,
if (sightingTypes[i].value === item) { lng: lng,
return sightingTypes[i].label; desc: desc,
} type: type,
} confidence: confidence,
} date: date,
time: time
class ViewSightings extends React.Component { },
constructor(props){ clicked: true
super(props); })
this.handleSubmit = this.handleSubmit.bind(this);
} }
state = { state = {
id: '', sightings: [],
type: 'N/A', selectedSighting: {
confidence: 'N/A', id: null,
date: 'N/A', lat: null,
time: 'N/A', lng: null,
desc: 'N/A', desc: null,
lat: 'N/A', type: null,
lng: 'N/A' confidence: null,
}; date: null,
time: null
},
/** clicked: false
* Handles state change.
*/
handleChange = name => event => {
this.setState({
[name]: event.target.value,
});
}; };
/** render() {
* Handles submit on search.
*/
handleSubmit(e){
e.preventDefault();
const itemSighting = firebase.database().ref("sightings/" + this.state.id);
itemSighting.once("value").then((snapshot) => {
// Die if there's no data for that ID.
if (!snapshot.exists()) {
return;
}
let data = snapshot.val();
this.setState({
date: data.date,
time: data.time,
type: getType(data.type),
confidence: getConfidence(data.confidence),
desc: data.desc,
lat: data.lat,
lng: data.lng
});
});
};
render(){
const { classes } = this.props;
return ( return (
/**
* The below houses the search
* and submit button along with
* the sighting information
* it pulls.
*/
<Fragment> <Fragment>
<Grid container justify="center"> <Grid container>
<form className={classes.container} onSubmit={this.handleSubmit}> <Grid item xs={12} md={6} className='sighting-list'>
<Grid item xs={6}> <Fragment>
<TextField <List>
id="sighting-id" {
name="sighting-id" this.state.sightings.map((sighting) => {
label="Input ID" return (
value={this.state.id} <ListItem button key={ sighting.id } onClick={() => this.getDetail(sighting.id, sighting.lat, sighting.lng, sighting.desc, sighting.type, sighting.confidence, sighting.date, sighting.time)}>
margin="normal" <ListItemText primary={`${sighting.desc}`}/>
onChange={this.handleChange('id')} </ListItem>
/> );
})
}
</List>
</Fragment>
</Grid> </Grid>
<Grid item xs={6}> <Grid item xs={12} md={6} className='sighting-details'>
<Button variant="contained" type="submit" color="primary" className={classes.button}> {this.state.clicked === true && <SightingDetail detail={ this.state.selectedSighting }/>}
Submit
</Button>
</Grid>
</form>
<Grid item xs={12}>
<Paper elevation={2}>
<Typography variant="headline" component="h3">
Sighting
</Typography>
<Typography component="p">
<b>Type:</b> {this.state.type} {<br/>}
<b>Confidence:</b> {this.state.confidence} {<br/>}
<b>Date:</b> {this.state.date} {<br/>}
<b>Time:</b> {this.state.time} {<br/>}
<b>Latitude:</b> {this.state.lat} {<br/>}
<b>Longitude:</b> {this.state.lng} {<br/>}
<b>Description:</b> {this.state.desc}
</Typography>
</Paper>
</Grid> </Grid>
</Grid> </Grid>
</Fragment> </Fragment>
) );
} }
} }
ViewSightings.propTypes = { export default ViewSightings;
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(ViewSightings);

5
src/pages/SightingList.js
View File

@ -1,13 +1,10 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import ViewSightings from '../components/ViewSightings.js'; import ViewSightings from '../components/ViewSightings.js';
import Typography from '@material-ui/core/Typography';
class Sighting extends Component { class Sighting extends Component {
render() { render() {
return ( return (
<Typography variant='display1' align='center' gutterBottom> <ViewSightings/>
<ViewSightings/>
</Typography>
); );
} }
} }