map renders markers on click, sends lat and lng to firebase, yeet
This commit is contained in:
Al Duncanson
parent
603156def7
commit
d0d9820699
|
|
@ -4294,7 +4294,8 @@
|
|||
},
|
||||
"ansi-regex": {
|
||||
"version": "2.1.1",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"aproba": {
|
||||
"version": "1.2.0",
|
||||
|
|
@ -4659,7 +4660,8 @@
|
|||
},
|
||||
"safe-buffer": {
|
||||
"version": "5.1.1",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"safer-buffer": {
|
||||
"version": "2.1.2",
|
||||
|
|
@ -4707,6 +4709,7 @@
|
|||
"strip-ansi": {
|
||||
"version": "3.0.1",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"ansi-regex": "^2.0.0"
|
||||
}
|
||||
|
|
@ -4745,11 +4748,13 @@
|
|||
},
|
||||
"wrappy": {
|
||||
"version": "1.0.2",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"yallist": {
|
||||
"version": "3.0.2",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -4,4 +4,5 @@ body {
|
|||
|
||||
.google-map-container > div {
|
||||
height: 92% !important;
|
||||
width: 50% !important;
|
||||
}
|
||||
|
|
@ -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 MapContainer from '../pages/Map';
|
||||
|
||||
/**
|
||||
* Styles that the different
|
||||
|
|
@ -138,7 +139,9 @@ class ReportForm extends React.Component {
|
|||
time: '00:00',
|
||||
type: 'visual',
|
||||
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.
|
||||
* When the form is submitted,
|
||||
|
|
@ -165,7 +182,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 +192,9 @@ class ReportForm extends React.Component {
|
|||
time: '00:00',
|
||||
type: 'visual',
|
||||
confidence: '1',
|
||||
desc: ''
|
||||
desc: '',
|
||||
lat: '',
|
||||
lng: ''
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -188,118 +209,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}>
|
||||
<MapContainer 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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 lng = e.latLng.lng();
|
||||
console.log(`
|
||||
latitude: ${lat}
|
||||
longitude: ${lng}
|
||||
`);
|
||||
let lng = e.latLng.lng();
|
||||
|
||||
this.props.onClick(lat,lng);
|
||||
}
|
||||
|
||||
// Set the state of the component to contain user coordinates and initial
|
||||
|
|
@ -78,6 +83,10 @@ export class MapContainer extends Component {
|
|||
lat: 42.9634,
|
||||
lng: 85.6681
|
||||
},
|
||||
markerLatLng: {
|
||||
lat: 0,
|
||||
lng: 0
|
||||
},
|
||||
showingInfoWindow: false,
|
||||
activeMarker: {},
|
||||
selectedPlace: {}
|
||||
|
|
@ -99,11 +108,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' }
|
||||
title = { 'You are here' }
|
||||
name = { '' }
|
||||
// FIXME: fix custom icon
|
||||
// icon={{
|
||||
// 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
|
||||
marker = { this.state.activeMarker }
|
||||
visible = { this.state.showingInfoWindow } >
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue