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

Merge branch 'master' into flamelink

Browse Source
This commit is contained in:
ajmaley 2018-11-03 15:32:18 -04:00
commit 8b7021684c
8 changed files with 709 additions and 544 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/Main.js
View File

@ -70,7 +70,7 @@ const styles = theme => ({
class ResponsiveDrawer extends React.Component {
state = {
mobileOpen: false,
key: '',
key: 'Home',
open: false
};
@ -85,7 +85,7 @@ class ResponsiveDrawer extends React.Component {
nav = (text) => {
this.setState({
key: text
})
});
}
render() {
@ -195,7 +195,10 @@ class ResponsiveDrawer extends React.Component {
{this.state.key === 'Report' && <Report />}
{this.state.key === 'Map' && <ViewMap />}
{this.state.key === 'List' && <SightingList />}
{this.state.key === 'Info' && <Info />}
{this.state.key === 'About' && <Info />}
{this.state.key === 'Easy-Quiz' && <Quiz difficulty='Easy'/>}
{this.state.key === 'Medium-Quiz' && <Quiz difficulty='Medium'/>}
{this.state.key === 'Hard-Quiz' && <Quiz difficulty='Hard'/>}
{this.state.key === 'Easy-Quiz' && <Quiz difficulty='Easy' />}
{this.state.key === 'Medium-Quiz' && <Quiz difficulty='Medium' />}
{this.state.key === 'Hard-Quiz' && <Quiz difficulty='Hard' />}

26
src/components/QuizGame.js
View File

@ -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() {

45
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 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
@ -51,6 +53,13 @@ const styles = theme => ({
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,
}
});
/**
@ -255,9 +264,25 @@ getMonth = date => {
desc: '',
lat: '',
lng: '',
open: false
open: false,
openModal: false,
hasModalOpened: false
};
handleModalOpen = () => !this.state.hasModalOpened ? this.setState({ openModal: true, hasModalOpened: true }) : null;
handleModalClose = () => {
this.setState({ openModal: false });
};
getModalStyle = () => {
return {
top: `25%`,
left: `75%`,
transform: `translate(-25%, -75%)`,
};
}
/**
* Handles state change in form
* components.
@ -474,7 +499,6 @@ getMonth = date => {
}}
/>
</Grid>
<Grid item xs={12}>
<Button variant="contained" type="submit" color="primary" className={classes.button}>
Submit
@ -482,8 +506,23 @@ getMonth = date => {
</Grid>
</Grid>
</Grid>
<Grid item xs={12} md={6}>
<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>

8
src/components/ReportMap.js
View File

@ -9,7 +9,7 @@ const API_KEY = 'AIzaSyAZ_0J01bA6wCbIPK4UBq2RUBC-hIqG4mM';
const mapStyles = {
width: '100%',
height: '100%'
}
};
export class MapContainer extends Component {
@ -68,7 +68,7 @@ export class MapContainer extends Component {
lat: e.latLng.lat(),
lng: e.latLng.lng()
}
})
});
let lat = e.latLng.lat();
let lng = e.latLng.lng();
@ -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)
export default GoogleApiWrapper({ apiKey: (API_KEY) })(MapContainer);

138
src/components/SightingDetail.js
View File

@ -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 (
<Fragment>
<SightingDetailMap lat={this.props.detail.lat} lng={this.props.detail.lng} />
<div className='sighting-details-content'>
<p>{`Confidence: ${this.props.detail.confidence}`}</p>
<p>{`When: ${this.props.detail.date}, ${this.props.detail.time}`}</p>
<p>{`Where: ${this.props.detail.lat} degrees N, and ${this.props.detail.lng} degrees E`}</p>
<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} />

6
src/components/SightingDetailMap.js
View File

@ -8,7 +8,7 @@ const API_KEY = 'AIzaSyAZ_0J01bA6wCbIPK4UBq2RUBC-hIqG4mM';
const mapStyles = {
width: '100%',
height: '100%'
}
};
export class MapContainer extends Component {
@ -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)
export default GoogleApiWrapper({ apiKey: (API_KEY) })(MapContainer);

41
src/components/SightingMap.js
View File

@ -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}
>
<Marker
position={this.state.myLatLng}
@ -251,9 +250,9 @@ export class MapContainer extends Component {
position={{ lat: sighting.lat, lng: sighting.lng }}
onClick={this.onMarkerClick}
type={'Type: ' + this.getType(sighting.type)}
confidence={<Fragment><b>Confidence:</b> {this.getConfidence(sighting.confidence)}</Fragment>}
date={<Fragment><b>Date:</b> {this.formatDate(sighting.date)}</Fragment>}
time={<Fragment><b>Time:</b> {this.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>}
/>
)
@ -267,15 +266,15 @@ export class MapContainer extends Component {
<Typography variant="display1" gutterBottom>
{this.state.selectedPlace.type}
</Typography>
<Typography variant="subheading" gutterBottom>
{this.state.selectedPlace.confidence}
</Typography>
<Typography variant="subheading" gutterBottom>
{this.state.selectedPlace.date}
</Typography>
<Typography variant="subheading" gutterBottom>
{this.state.selectedPlace.time}
</Typography>
<Typography variant="subheading" gutterBottom>
{this.state.selectedPlace.confidence}
</Typography>
<Typography variant="subheading" gutterBottom>
{this.state.selectedPlace.description}
</Typography>
@ -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)
export default GoogleApiWrapper({ apiKey: (API_KEY) })(MapContainer);

6
src/components/ViewSightings.js
View File

@ -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 {
<ListItem button key={ sighting.id } onClick={() => this.getDetail(sighting.id, sighting.lat, sighting.lng, sighting.desc, sighting.type, sighting.confidence, sighting.date, sighting.time)}>
<ListItemText primary={`${sighting.desc}`}/>
</ListItem>
)
);
})
}
</List>