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

3
.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,
"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",
"firebase": "^5.5.1",
"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>

7
src/App.css
View File

@ -2,6 +2,11 @@ body {
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;
}

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 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';
@ -58,9 +58,9 @@ class SimpleTabs extends React.Component {
</AppBar>
{value === 0 && <Home/>}
{value === 1 && <Report/>}
{value === 2 && <Sighting/>}
{value === 2 && <SightingList/>}
{value === 3 && <Quiz/>}
{value === 4 && <Map/>}
{value === 4 && <ViewMap/>}
{value === 5 && <Info/>}
</div>
);

253
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 Grid from '@material-ui/core/Grid';
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 Button from '@material-ui/core/Button';
import firebase from '../firebase.js';
import GoogleMap from '../components/ReportMap';
/**
* Styles that the different
@ -22,6 +23,7 @@ const styles = theme => ({
marginRight: theme.spacing.unit,
marginTop: theme.spacing.unit * 2,
flexBasis: 280,
width: '90%'
},
button: {
marginLeft: theme.spacing.unit * 2,
@ -138,7 +140,9 @@ class ReportForm extends React.Component {
time: '00:00',
type: 'visual',
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.
* When the form is submitted,
@ -165,7 +183,9 @@ class ReportForm extends React.Component {
confidence: this.state.confidence,
date: this.state.date,
time: this.state.time,
desc: this.state.desc
desc: this.state.desc,
lat: this.state.lat,
lng: this.state.lng
}
sightingsRef.push(sighting);
this.setState({
@ -173,7 +193,9 @@ class ReportForm extends React.Component {
time: '00:00',
type: 'visual',
confidence: '1',
desc: ''
desc: '',
lat: '',
lng: ''
});
};
@ -188,118 +210,127 @@ class ReportForm extends React.Component {
* The actual form.
*/
return (
<form className={classes.container} autoComplete="off" onSubmit={this.handleSubmit}>
<Grid container spacing={8}>
<Grid item xs={12} xl={2}>
<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>
<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} xl={2}>
<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="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-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-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 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>
<Grid item xs={12}>
<Button variant="contained" type="submit" color="primary" className={classes.button}>
Submit
</Button>
</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 lng = e.latLng.lng();
console.log(`
latitude: ${lat}
longitude: ${lng}
`);
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
@ -78,6 +85,10 @@ export class MapContainer extends Component {
lat: 42.9634,
lng: 85.6681
},
markerLatLng: {
lat: 0,
lng: 0
},
showingInfoWindow: false,
activeMarker: {},
selectedPlace: {}
@ -85,12 +96,9 @@ export class MapContainer extends Component {
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 = "google-map-container">
<div className = "report-google-map-container">
<Map
style = { mapStyles }
google = { this.props.google }
@ -99,38 +107,15 @@ export class MapContainer extends Component {
defaultZoom = { 15 }
onClick = { this.onMapClick } >
<Marker
position = { this.state.markerLatLng }
/>
<Marker
position = { this.state.myLatLng }
onClick = { this.onMarkerClick }
title = { 'Marker One' }
name = { 'blah blah blah' }
// 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' }
title = { 'You are here' }
name = { '' }
/>
<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);
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 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>
);
}
}

3
src/pages/Report.js
View File

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