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

Merge pull request #24 from alDuncanson/develop 

Develop into master
This commit is contained in:
Jacob McCloughan 2018-10-04 19:29:07 -04:00 committed by GitHub
parent a144e9f805 25bbe3088d
commit 664d4dc926
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 3885 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -1 +1,2 @@
node_modules/
node_modules/
.vscode/

3149
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
package.json
View File

@ -4,6 +4,10 @@
"private": true,
"dependencies": {
"@material-ui/core": "^3.1.0",
"firebase": "^5.5.2",
"firebase-admin": "^6.0.0",
"flamelink": "^0.19.2",
"google-maps-react": "^2.0.2",
"react": "^16.5.1",
"react-dom": "^16.5.1",
"react-router": "^4.3.1",

3
public/index.html
View File

@ -20,6 +20,9 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<!--<script>import flamelink from 'flamelink';</script>-->
<title>React App</title>
</head>
<body>

9
src/App.css
View File

@ -1,3 +1,12 @@
body {
margin: 0;
}
.report-google-map-container > div {
height: 92% !important;
width: 50% !important;
}
.sighting-google-map-container > div {
height: 92% !important;
}

10
src/components/Flamelink.js Normal file
View File

@ -0,0 +1,10 @@
import { Component } from 'react';
class Flamelink extends Component {
render() {
return(null);
}
}
export default Flamelink;

19
src/components/Main.js
View File

@ -6,9 +6,10 @@ import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import Typography from '@material-ui/core/Typography';
import Home from '../pages/Home';
import Map from '../pages/Map';
import ViewMap from '../pages/ViewMap';
import Quiz from '../pages/Quiz';
import Sighting from '../pages/Sighting';
import SightingList from '../pages/SightingList';
import Report from '../pages/Report';
import Info from '../pages/Info';
function TabContainer(props) {
@ -40,14 +41,15 @@ class SimpleTabs extends React.Component {
};
render() {
const { classes } = this.props;
const { value } = this.state;
const { classes } = this.props;
const { value } = this.state;
return (
<div className={classes.root}>
<AppBar position="static">
<Tabs value={value} onChange={this.handleChange} centered>
<Tab label="Home" />
<Tab label="Report a Sighting"/>
<Tab label="Sightings" />
<Tab label="Trail-Cam Quiz" />
<Tab label="View Map" />
@ -55,10 +57,11 @@ class SimpleTabs extends React.Component {
</Tabs>
</AppBar>
{value === 0 && <Home/>}
{value === 1 && <Sighting/>}
{value === 2 && <Quiz/>}
{value === 3 && <Map/>}
{value === 4 && <Info/>}
{value === 1 && <Report/>}
{value === 2 && <SightingList/>}
{value === 3 && <Quiz/>}
{value === 4 && <ViewMap/>}
{value === 5 && <Info/>}
</div>
);
}

342
src/components/ReportForm.js Normal file
View File

@ -0,0 +1,342 @@
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 Button from '@material-ui/core/Button';
import firebase from '../firebase.js';
import GoogleMap from '../components/ReportMap';
/**
* Styles that the different
* Material UI components pull
* in. Mostly used for spacing.
*/
const styles = theme => ({
container: {
display: 'flex',
flexWrap: 'wrap',
},
textField: {
marginLeft: theme.spacing.unit * 2,
marginRight: theme.spacing.unit,
marginTop: theme.spacing.unit * 2,
flexBasis: 280,
width: '90%'
},
button: {
marginLeft: theme.spacing.unit * 2,
marginRight: theme.spacing.unit,
marginTop: theme.spacing.unit * 2,
},
dense: {
marginTop: 30,
},
menu: {
width: 200,
},
});
/**
* 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.
* @param {*} date, Date passed in.
*/
function formatDate(date) {
var d = new Date(date),
month = '' + (d.getMonth() + 1),
day = '' + d.getDate(),
year = d.getFullYear();
if (month.length < 2) month = '0' + month;
if (day.length < 2) day = '0' + day;
return [year, month, day].join('-');
}
/**
* 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',
},
];
/**
* 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',
},
];
/**
* The form component.
*/
class ReportForm extends React.Component {
/**
* Component contructor. Currently
* only used to bind event
* handlers.
*/
constructor() {
super();
this.handleSubmit = this.handleSubmit.bind(this);
}
/**
* State of form components.
*/
state = {
date: formatDate(new Date()),
time: '00:00',
type: 'visual',
confidence: '1',
desc: '',
lat: '',
lng: ''
};
/**
* Handles state change in form
* components.
*/
handleChange = name => event => {
this.setState({
[name]: event.target.value,
});
};
/*
* 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.date,
time: this.state.time,
desc: this.state.desc,
lat: this.state.lat,
lng: this.state.lng
}
sightingsRef.push(sighting);
this.setState({
date: formatDate(new Date()),
time: '00:00',
type: 'visual',
confidence: '1',
desc: '',
lat: '',
lng: ''
});
};
/**
* 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={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="Please select confidence in sighting"
>
{confidenceLevels.map(option => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
</Grid>
<Grid item xs={12}>
<TextField
id="sighting-date"
required
label="Sighting date"
name="sighting-date"
type="date"
value={this.state.date}
className={classes.textField}
onChange={this.handleChange('date')}
InputLabelProps={{
shrink: true,
}}
/>
</Grid>
<Grid item xs={12}>
<TextField
id="sighting-time"
required
label="Sighting time"
name="sighting-time"
type="time"
margin="normal"
value={this.state.time}
className={classes.textField}
onChange={this.handleChange('time')}
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={6}>
<GoogleMap onClick={this.getCoordinates}/>
</Grid>
</Grid>
</form>
</Fragment>
);
}
}
ReportForm.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(ReportForm);

152
src/components/ReportMap.js Normal file
View File

@ -0,0 +1,152 @@
import React, { Component, Fragment } from 'react';
import { Map, InfoWindow, Marker, GoogleApiWrapper } from 'google-maps-react';
import Typography from '@material-ui/core/Typography';
// Google Maps API Key
const API_KEY = 'AIzaSyAZ_0J01bA6wCbIPK4UBq2RUBC-hIqG4mM';
// Map container styles
const mapStyles = {
width: '100%',
height: '100%'
}
export class MapContainer extends Component {
// Get the user's location using Google's geolocation
getLocation = () => {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition((position) => {
this.setState({
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
}
}
);
}
}
// When the component has mounted to the DOM, get the user's location
componentDidMount() {
this.getLocation();
}
// When the user clicks on a marker, pass the props related to that marker
// and show the related info window
onMarkerClick = (props, marker) => {
this.setState({
selectedPlace: props,
activeMarker: marker,
showingInfoWindow: true
});
}
// When the user clicks on the map, if a info window is visible then close it
// and 'unactive' that marker
onMapClick = (props, map, e) => {
if (this.state.showingInfoWindow) {
this.setState({
showingInfoWindow: false,
activeMarker: null
});
}
this.setState({
markerLatLng: {
lat: e.latLng.lat(),
lng: e.latLng.lng()
}
})
let lat = e.latLng.lat();
let lng = e.latLng.lng();
if (this.props.onClick) {
this.props.onClick(lat,lng);
}
}
// Set the state of the component to contain user coordinates and initial
// marker and info window information
state = {
myLatLng: {
lat: 42.9634,
lng: 85.6681
},
markerLatLng: {
lat: 0,
lng: 0
},
showingInfoWindow: false,
activeMarker: {},
selectedPlace: {}
}
render() {
// TODO: This line is used by the custom marker icon
//const { google } = this.props;
return (
// Render the Google Map, Marker, and InfoWindow components
<div className = "report-google-map-container">
<Map
style = { mapStyles }
google = { this.props.google }
initialCenter = { this.state.myLatLng }
center = { this.state.myLatLng }
defaultZoom = { 15 }
onClick = { this.onMapClick } >
<Marker
position = { this.state.markerLatLng }
/>
<Marker
position = { this.state.myLatLng }
onClick = { this.onMarkerClick }
title = { 'You are here' }
name = { '' }
// FIXME: fix custom icon
// icon={{
// url: "../images/marten-icon.png",
// anchor: new google.maps.Point(32,32),
// scaledSize: new google.maps.Size(64,64)
// }}
/>
<InfoWindow
marker = { this.state.activeMarker }
visible = { this.state.showingInfoWindow } >
<Fragment>
<Typography variant = "display1" gutterBottom>
{ this.state.selectedPlace.title }
</Typography>
<Typography variant = "subheading" gutterBottom>
{ this.state.selectedPlace.name }
</Typography>
</Fragment>
</InfoWindow>
</Map>
</div>
);
}
}
// Send the Google Map API Key with the MapContainer component
export default GoogleApiWrapper({
apiKey: (API_KEY)
})(MapContainer)

165
src/components/SightingMap.js Normal file
View File

@ -0,0 +1,165 @@
import React, { Component, Fragment } from 'react';
import { Map, InfoWindow, Marker, GoogleApiWrapper } from 'google-maps-react';
import Typography from '@material-ui/core/Typography';
import firebase from '../firebase.js';
// Google Maps API Key
const API_KEY = 'AIzaSyAZ_0J01bA6wCbIPK4UBq2RUBC-hIqG4mM';
// Map container styles
const mapStyles = {
width: '100%',
height: '100%'
}
export class MapContainer extends Component {
// Get the user's location using Google's geolocation
getLocation = () => {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition((position) => {
this.setState({
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
}
}
);
}
}
// When the component has mounted to the DOM, get the user's location
componentDidMount() {
this.getLocation();
const sightingsRef = firebase.database().ref('sightings');
sightingsRef.on('value', (snapshot) => {
let sightings = snapshot.val();
let newState = [];
for (let sighting in sightings) {
newState.push({
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
});
});
}
// When the user clicks on a marker, pass the props related to that marker
// and show the related info window
onMarkerClick = (props, marker) => {
this.setState({
selectedPlace: props,
activeMarker: marker,
showingInfoWindow: true
});
}
onMapClick = (props, map, e) => {
if (this.state.showingInfoWindow) {
this.setState({
showingInfoWindow: false,
activeMarker: null
});
}
}
// Set the state of the component to contain user coordinates and initial
// marker and info window information
state = {
myLatLng: {
lat: 42.9634,
lng: 85.6681
},
showingInfoWindow: false,
activeMarker: {},
selectedPlace: {},
sightings: []
}
render() {
return (
// Render the Google Map, Marker, and InfoWindow components
<div className = "sighting-google-map-container">
<Map
style = { mapStyles }
google = { this.props.google }
initialCenter = { this.state.myLatLng }
center = { this.state.myLatLng }
defaultZoom = { 15 }
onClick = { this.onMapClick } >
<Marker
position = { this.state.myLatLng }
onClick = { this.onMarkerClick }
type = { 'You are here' }
/>
{ this.state.sightings.map((sighting) => {
return (
<Marker
key={ sighting.id }
position={{ lat: sighting.lat, lng:sighting.lng }}
onClick = { this.onMarkerClick }
type = { 'Type: ' + sighting.type }
confidence = { 'Confidence: ' + sighting.confidence }
date = { 'Date: ' + sighting.date }
time = { 'Time: ' + sighting.time }
description = { 'Description: ' + sighting.desc }
/>
)
})}
<InfoWindow
marker = { this.state.activeMarker }
visible = { this.state.showingInfoWindow } >
<Fragment>
<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.description }
</Typography>
</Fragment>
</InfoWindow>
</Map>
</div>
);
}
}
// Send the Google Map API Key with the MapContainer component
export default GoogleApiWrapper({
apiKey: (API_KEY)
})(MapContainer)

15
src/firebase.js Normal file
View File

@ -0,0 +1,15 @@
import firebase from 'firebase/app';
import 'firebase/database';
const config = {
apiKey: "AIzaSyAYf9AbeYwLY892NRiQfn0AMtG9xIFAJbo",
authDomain: "marten-application.firebaseapp.com",
databaseURL: "https://marten-application.firebaseio.com",
projectId: "marten-application",
storageBucket: "marten-application.appspot.com",
messagingSenderId: "659856510832"
};
firebase.initializeApp(config);
export default firebase;

6
src/flamelink.js Normal file
View File

@ -0,0 +1,6 @@
import firebaseApp from './firebase.js';
import flamelink from 'flamelink';
const flamelinkApp = flamelink({ firebaseApp });
export default flamelinkApp;

BIN
src/images/marten-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
src/images/tire-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 72 KiB

13
src/pages/Info.js
View File

@ -1,12 +1,19 @@
import React, { Component } from 'react';
import Typography from '@material-ui/core/Typography';
import Flamelink from '../components/Flamelink';
class Info extends Component {
render() {
return (
<Typography variant='display1' align='center' gutterBottom>
Info
</Typography>
<div>
<Flamelink flamelinkApp={this.props.flamelinkApp}/>
<Typography variant='display1' align='center' gutterBottom>
Info
</Typography>
<p id="flamelinkDemo"></p>
</div>
);
}
}

14
src/pages/Map.js
View File

@ -1,14 +0,0 @@
import React, { Component } from 'react';
import Typography from '@material-ui/core/Typography';
class Map extends Component {
render() {
return (
<Typography variant='display1' align='center' gutterBottom>
Map
</Typography>
);
}
}
export default Map;

12
src/pages/Report.js Normal file
View File

@ -0,0 +1,12 @@
import React, { Component } from 'react';
import ReportForm from '../components/ReportForm';
class Report extends Component {
render() {
return (
<ReportForm/>
);
}
}
export default Report;

0
src/pages/Sighting.js → src/pages/SightingList.js
View File

14
src/pages/ViewMap.js Normal file
View File

@ -0,0 +1,14 @@
import React, { Component } from 'react';
import GoogleMap from '../components/SightingMap';
class Sighting extends Component {
render() {
return (
<div className='sighting-map'>
<GoogleMap/>
</div>
);
}
}
export default Sighting;