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

Merge branch 'master' of https://github.com/alDuncanson/marten-application into Sightings

This commit is contained in:
Joey Coscarelli 2018-10-04 20:47:59 -04:00
parent 26c87b92d3 f19d0361e3
commit 1f6aeb44b7
16 changed files with 2893 additions and 249 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

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

2591
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
package.json
View File

@ -4,8 +4,10 @@
"private": true, "private": true,
"dependencies": { "dependencies": {
"@material-ui/core": "^3.1.0", "@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", "google-maps-react": "^2.0.2",
"firebase": "^5.5.1",
"react": "^16.5.1", "react": "^16.5.1",
"react-dom": "^16.5.1", "react-dom": "^16.5.1",
"react-router": "^4.3.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. 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`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<!--<script>import flamelink from 'flamelink';</script>-->
<title>React App</title> <title>React App</title>
</head> </head>
<body> <body>

7
src/App.css
View File

@ -2,6 +2,11 @@ body {
margin: 0; margin: 0;
} }
.google-map-container > div { .report-google-map-container > div {
height: 92% !important;
width: 50% !important;
}
.sighting-google-map-container > div {
height: 92% !important; 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;

8
src/components/Main.js
View File

@ -6,9 +6,9 @@ import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab'; import Tab from '@material-ui/core/Tab';
import Typography from '@material-ui/core/Typography'; import Typography from '@material-ui/core/Typography';
import Home from '../pages/Home'; import Home from '../pages/Home';
import Map from '../pages/Map'; import ViewMap from '../pages/ViewMap';
import Quiz from '../pages/Quiz'; import Quiz from '../pages/Quiz';
import Sighting from '../pages/Sighting'; import SightingList from '../pages/SightingList';
import Report from '../pages/Report'; import Report from '../pages/Report';
import Info from '../pages/Info'; import Info from '../pages/Info';
@ -58,9 +58,9 @@ class SimpleTabs extends React.Component {
</AppBar> </AppBar>
{value === 0 && <Home/>} {value === 0 && <Home/>}
{value === 1 && <Report/>} {value === 1 && <Report/>}
{value === 2 && <Sighting/>} {value === 2 && <SightingList/>}
{value === 3 && <Quiz/>} {value === 3 && <Quiz/>}
{value === 4 && <Map/>} {value === 4 && <ViewMap/>}
{value === 5 && <Info/>} {value === 5 && <Info/>}
</div> </div>
); );

251
src/components/ReportForm.js
View File

@ -1,4 +1,4 @@
import React from 'react'; import React, {Fragment} from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import Grid from '@material-ui/core/Grid'; import Grid from '@material-ui/core/Grid';
import { withStyles } from '@material-ui/core/styles'; import { withStyles } from '@material-ui/core/styles';
@ -6,6 +6,7 @@ import MenuItem from '@material-ui/core/MenuItem';
import TextField from '@material-ui/core/TextField'; import TextField from '@material-ui/core/TextField';
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';
/** /**
* Styles that the different * Styles that the different
@ -22,6 +23,7 @@ const styles = theme => ({
marginRight: theme.spacing.unit, marginRight: theme.spacing.unit,
marginTop: theme.spacing.unit * 2, marginTop: theme.spacing.unit * 2,
flexBasis: 280, flexBasis: 280,
width: '90%'
}, },
button: { button: {
marginLeft: theme.spacing.unit * 2, marginLeft: theme.spacing.unit * 2,
@ -138,7 +140,9 @@ class ReportForm extends React.Component {
time: '00:00', time: '00:00',
type: 'visual', type: 'visual',
confidence: '1', confidence: '1',
desc: '' desc: '',
lat: '',
lng: ''
}; };
/** /**
@ -151,6 +155,20 @@ class ReportForm extends React.Component {
}); });
}; };
/*
* Get the coordinates
*
*/
getCoordinates = (lat,lng) => {
let latitude = lat;
let longitude = lng;
this.setState({
lat: latitude,
lng: longitude
});
}
/** /**
* Event listener for form. * Event listener for form.
* When the form is submitted, * When the form is submitted,
@ -165,7 +183,9 @@ class ReportForm extends React.Component {
confidence: this.state.confidence, confidence: this.state.confidence,
date: this.state.date, date: this.state.date,
time: this.state.time, time: this.state.time,
desc: this.state.desc desc: this.state.desc,
lat: this.state.lat,
lng: this.state.lng
} }
sightingsRef.push(sighting); sightingsRef.push(sighting);
this.setState({ this.setState({
@ -173,7 +193,9 @@ class ReportForm extends React.Component {
time: '00:00', time: '00:00',
type: 'visual', type: 'visual',
confidence: '1', confidence: '1',
desc: '' desc: '',
lat: '',
lng: ''
}); });
}; };
@ -188,118 +210,127 @@ class ReportForm extends React.Component {
* The actual form. * The actual form.
*/ */
return ( return (
<form className={classes.container} autoComplete="off" onSubmit={this.handleSubmit}> <Fragment>
<Grid container spacing={8}> <form className={classes.container} autoComplete="off" onSubmit={this.handleSubmit}>
<Grid item xs={12} xl={2}> <Grid container>
<TextField <Grid item xs={6}>
id="select-sighting-type" <Grid container spacing={8}>
select <Grid item xs={12}>
required <TextField
name="sighting-type" id="select-sighting-type"
label="Select" select
className={classes.textField} required
value={this.state.type} name="sighting-type"
onChange={this.handleChange('type')} label="Select"
SelectProps={{ className={classes.textField}
MenuProps: { value={this.state.type}
className: classes.menu, onChange={this.handleChange('type')}
}, SelectProps={{
}} MenuProps: {
helperText="Please select type of sighting" className: classes.menu,
> },
{sightingTypes.map(option => ( }}
<MenuItem key={option.value} value={option.value}> helperText="Please select type of sighting"
{option.label} >
</MenuItem> {sightingTypes.map(option => (
))} <MenuItem key={option.value} value={option.value}>
</TextField> {option.label}
</Grid> </MenuItem>
))}
</TextField>
</Grid>
<Grid item xs={12} xl={2}> <Grid item xs={12}>
<TextField <TextField
id="select-confidence" id="select-confidence"
select select
required required
name="sighting-confidence" name="sighting-confidence"
label="Select" label="Select"
className={classes.textField} className={classes.textField}
value={this.state.confidence} value={this.state.confidence}
onChange={this.handleChange('confidence')} onChange={this.handleChange('confidence')}
SelectProps={{ SelectProps={{
MenuProps: { MenuProps: {
className: classes.menu, className: classes.menu,
}, },
}} }}
helperText="Please select confidence in sighting" helperText="Please select confidence in sighting"
> >
{confidenceLevels.map(option => ( {confidenceLevels.map(option => (
<MenuItem key={option.value} value={option.value}> <MenuItem key={option.value} value={option.value}>
{option.label} {option.label}
</MenuItem> </MenuItem>
))} ))}
</TextField> </TextField>
</Grid> </Grid>
<Grid item xs={12}> <Grid item xs={12}>
<TextField <TextField
id="sighting-date" id="sighting-date"
required required
label="Sighting date" label="Sighting date"
name="sighting-date" name="sighting-date"
type="date" type="date"
value={this.state.date} value={this.state.date}
className={classes.textField} className={classes.textField}
onChange={this.handleChange('date')} onChange={this.handleChange('date')}
InputLabelProps={{ InputLabelProps={{
shrink: true, shrink: true,
}} }}
/> />
</Grid> </Grid>
<Grid item xs={12}> <Grid item xs={12}>
<TextField <TextField
id="sighting-time" id="sighting-time"
required required
label="Sighting time" label="Sighting time"
name="sighting-time" name="sighting-time"
type="time" type="time"
margin="normal" margin="normal"
value={this.state.time} value={this.state.time}
className={classes.textField} className={classes.textField}
onChange={this.handleChange('time')} onChange={this.handleChange('time')}
InputLabelProps={{ InputLabelProps={{
shrink: true, shrink: true,
}} }}
/> />
</Grid> </Grid>
<Grid item xs={12}> <Grid item xs={12}>
<TextField <TextField
id="sighting-description" id="sighting-description"
required required
label="Description" label="Description"
name="sighting-desc" name="sighting-desc"
multiline multiline
rows="5" rows="5"
placeholder="Describe the sighting to the best of your ability." placeholder="Describe the sighting to the best of your ability."
value={this.state.desc} value={this.state.desc}
className={classes.textField} className={classes.textField}
onChange={this.handleChange('desc')} onChange={this.handleChange('desc')}
margin="normal" margin="normal"
variant="outlined" variant="outlined"
InputLabelProps={{ InputLabelProps={{
shrink: true, shrink: true,
}} }}
/> />
</Grid> </Grid>
<Grid item xs={12}> <Grid item xs={12}>
<Button variant="contained" type="submit" color="primary" className={classes.button}> <Button variant="contained" type="submit" color="primary" className={classes.button}>
Submit Submit
</Button> </Button>
</Grid>
</Grid>
</Grid>
<Grid item xs={6}>
<GoogleMap onClick={this.getCoordinates}/>
</Grid>
</Grid> </Grid>
</Grid> </form>
</form> </Fragment>
); );
} }
} }

61
src/pages/Map.js → src/components/ReportMap.js
View File

@ -63,12 +63,19 @@ export class MapContainer extends Component {
}); });
} }
this.setState({
markerLatLng: {
lat: e.latLng.lat(),
lng: e.latLng.lng()
}
})
let lat = e.latLng.lat(); let lat = e.latLng.lat();
let lng = e.latLng.lng(); let lng = e.latLng.lng();
console.log(`
latitude: ${lat} if (this.props.onClick) {
longitude: ${lng} this.props.onClick(lat,lng);
`); }
} }
// Set the state of the component to contain user coordinates and initial // Set the state of the component to contain user coordinates and initial
@ -78,6 +85,10 @@ export class MapContainer extends Component {
lat: 42.9634, lat: 42.9634,
lng: 85.6681 lng: 85.6681
}, },
markerLatLng: {
lat: 0,
lng: 0
},
showingInfoWindow: false, showingInfoWindow: false,
activeMarker: {}, activeMarker: {},
selectedPlace: {} selectedPlace: {}
@ -85,12 +96,9 @@ export class MapContainer extends Component {
render() { render() {
// TODO: This line is used by the custom marker icon
//const { google } = this.props;
return ( return (
// Render the Google Map, Marker, and InfoWindow components // Render the Google Map, Marker, and InfoWindow components
<div className = "google-map-container"> <div className = "report-google-map-container">
<Map <Map
style = { mapStyles } style = { mapStyles }
google = { this.props.google } google = { this.props.google }
@ -99,38 +107,15 @@ export class MapContainer extends Component {
defaultZoom = { 15 } defaultZoom = { 15 }
onClick = { this.onMapClick } > onClick = { this.onMapClick } >
<Marker
position = { this.state.markerLatLng }
/>
<Marker <Marker
position = { this.state.myLatLng } position = { this.state.myLatLng }
onClick = { this.onMarkerClick } onClick = { this.onMarkerClick }
title = { 'Marker One' } title = { 'You are here' }
name = { 'blah blah blah' } 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)
// }}
/>
<Marker
position = {{ lat: 42.755011162859724, lng: -84.57320350394787 }}
onClick = { this.onMarkerClick }
title = { 'Marker Two' }
name = { 'yay another marker' }
/>
<Marker
position = {{ lat: 43.548480610783194, lng: -84.28206580863537 }}
onClick = { this.onMarkerClick }
title = { 'Marker Three' }
name = { 'three markers :D' }
/>
<Marker
position = {{ lat: 42.24878276258738, lng: -85.72127479301037 }}
onClick = { this.onMarkerClick }
title = { 'Marker Four' }
name = { 'YEET' }
/> />
<InfoWindow <InfoWindow

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)

1
src/firebase.js
View File

@ -11,4 +11,5 @@ const config = {
}; };
firebase.initializeApp(config); firebase.initializeApp(config);
export default firebase; 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;

13
src/pages/Info.js
View File

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

3
src/pages/Report.js
View File

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

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;