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

map renders markers on click, sends lat and lng to firebase, yeet

This commit is contained in:
Al Duncanson 2018-10-02 14:51:26 -04:00
parent 603156def7
commit d0d9820699
5 changed files with 171 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
package-lock.json generated
View File

@ -4294,7 +4294,8 @@
}, },
"ansi-regex": { "ansi-regex": {
"version": "2.1.1", "version": "2.1.1",
"bundled": true "bundled": true,
"optional": true
}, },
"aproba": { "aproba": {
"version": "1.2.0", "version": "1.2.0",
@ -4659,7 +4660,8 @@
}, },
"safe-buffer": { "safe-buffer": {
"version": "5.1.1", "version": "5.1.1",
"bundled": true "bundled": true,
"optional": true
}, },
"safer-buffer": { "safer-buffer": {
"version": "2.1.2", "version": "2.1.2",
@ -4707,6 +4709,7 @@
"strip-ansi": { "strip-ansi": {
"version": "3.0.1", "version": "3.0.1",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"ansi-regex": "^2.0.0" "ansi-regex": "^2.0.0"
} }
@ -4745,11 +4748,13 @@
}, },
"wrappy": { "wrappy": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true "bundled": true,
"optional": true
}, },
"yallist": { "yallist": {
"version": "3.0.2", "version": "3.0.2",
"bundled": true "bundled": true,
"optional": true
} }
} }
}, },

1
src/App.css
View File

@ -4,4 +4,5 @@ body {
.google-map-container > div { .google-map-container > div {
height: 92% !important; height: 92% !important;
width: 50% !important;
} }

250
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 MapContainer from '../pages/Map';
/** /**
* Styles that the different * Styles that the different
@ -138,7 +139,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 +154,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 +182,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 +192,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 +209,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}>
<MapContainer onClick={this.getCoordinates}/>
</Grid>
</Grid> </Grid>
</Grid> </form>
</form> </Fragment>
); );
} }
} }

48
src/pages/Map.js
View File

@ -63,12 +63,17 @@ 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} this.props.onClick(lat,lng);
longitude: ${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 +83,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: {}
@ -99,11 +108,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 // FIXME: fix custom icon
// icon={{ // icon={{
// url: "../images/marten-icon.png", // url: "../images/marten-icon.png",
@ -112,27 +125,6 @@ export class MapContainer extends Component {
// }} // }}
/> />
<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
marker = { this.state.activeMarker } marker = { this.state.activeMarker }
visible = { this.state.showingInfoWindow } > visible = { this.state.showingInfoWindow } >

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>
); );
} }
} }