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

added report map tooltip

Browse Source
This commit is contained in:
Al Duncanson 2018-10-31 22:18:45 -04:00
parent a9bf3aa5e4
commit 4301a3d6cd
1 changed files with 488 additions and 449 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

937
src/components/ReportForm.js
View File

@ -11,6 +11,8 @@ import CloseIcon from '@material-ui/icons/Close';
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'; import GoogleMap from '../components/ReportMap';
import Modal from '@material-ui/core/Modal';
import Typography from '@material-ui/core/Typography';
/** /**
* Styles that the different * Styles that the different
@ -18,39 +20,46 @@ import GoogleMap from '../components/ReportMap';
* in. Mostly used for spacing. * in. Mostly used for spacing.
*/ */
const styles = theme => ({ const styles = theme => ({
container: { container: {
display: 'flex', display: 'flex',
flexWrap: 'wrap' flexWrap: 'wrap'
}, },
textField: { textField: {
marginLeft: theme.spacing.unit * 2, marginLeft: theme.spacing.unit * 2,
marginRight: theme.spacing.unit, marginRight: theme.spacing.unit,
marginTop: theme.spacing.unit * 2, marginTop: theme.spacing.unit * 2,
flexBasis: 280, flexBasis: 280,
width: '90%' width: '90%'
}, },
button: { button: {
marginLeft: theme.spacing.unit * 2, marginLeft: theme.spacing.unit * 2,
marginRight: theme.spacing.unit, marginRight: theme.spacing.unit,
marginTop: theme.spacing.unit * 2, marginTop: theme.spacing.unit * 2,
}, },
dense: { dense: {
marginTop: 30, marginTop: 30,
}, },
close: { close: {
padding: theme.spacing.unit / 2, padding: theme.spacing.unit / 2,
}, },
icon: { icon: {
fontSize: 20, fontSize: 20,
marginRight: theme.spacing.unit, marginRight: theme.spacing.unit,
}, },
message: { message: {
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
}, },
menu: { menu: {
width: 200, width: 200,
}, },
paper: {
position: 'absolute',
width: theme.spacing.unit * 50,
backgroundColor: theme.palette.background.paper,
boxShadow: theme.shadows[5],
padding: theme.spacing.unit * 4,
}
}); });
/** /**
@ -59,30 +68,30 @@ const styles = theme => ({
* what is stored in the database. * what is stored in the database.
*/ */
const sightingTypes = [ const sightingTypes = [
{ {
value: 'visual', value: 'visual',
label: 'Visual', label: 'Visual',
}, },
{ {
value: 'roadkill', value: 'roadkill',
label: 'Roadkill', label: 'Roadkill',
}, },
{ {
value: 'trapped', value: 'trapped',
label: 'Trapped', label: 'Trapped',
}, },
{ {
value: 'viewed_tracks', value: 'viewed_tracks',
label: 'Viewed Tracks', label: 'Viewed Tracks',
}, },
{ {
value: 'photo', value: 'photo',
label: 'Photo', label: 'Photo',
}, },
{ {
value: 'other', value: 'other',
label: 'Other', label: 'Other',
}, },
]; ];
/** /**
@ -91,54 +100,54 @@ const sightingTypes = [
* what is stored in the database. * what is stored in the database.
*/ */
const monthTypes = [ const monthTypes = [
{ {
value: '01', value: '01',
label: 'January', label: 'January',
}, },
{ {
value: '02', value: '02',
label: 'February', label: 'February',
}, },
{ {
value: '03', value: '03',
label: 'March', label: 'March',
}, },
{ {
value: '04', value: '04',
label: 'April', label: 'April',
}, },
{ {
value: '05', value: '05',
label: 'May', label: 'May',
}, },
{ {
value: '06', value: '06',
label: 'June', label: 'June',
}, },
{ {
value: '07', value: '07',
label: 'July', label: 'July',
}, },
{ {
value: '08', value: '08',
label: 'August', label: 'August',
}, },
{ {
value: '09', value: '09',
label: 'September', label: 'September',
}, },
{ {
value: '10', value: '10',
label: 'October', label: 'October',
}, },
{ {
value: '11', value: '11',
label: 'November', label: 'November',
}, },
{ {
value: '12', value: '12',
label: 'December', label: 'December',
}, },
]; ];
/** /**
@ -147,26 +156,26 @@ const monthTypes = [
* what is stored in the database. * what is stored in the database.
*/ */
const timeTypes = [ const timeTypes = [
{ {
value: 'unknown', value: 'unknown',
label: 'Unknown', label: 'Unknown',
}, },
{ {
value: 'morning', value: 'morning',
label: 'Morning', label: 'Morning',
}, },
{ {
value: 'midday', value: 'midday',
label: 'Midday', label: 'Midday',
}, },
{ {
value: 'evening', value: 'evening',
label: 'Evening', label: 'Evening',
}, },
{ {
value: 'night', value: 'night',
label: 'Night', label: 'Night',
}, },
]; ];
/** /**
@ -175,349 +184,379 @@ const timeTypes = [
* what is stored in the database. * what is stored in the database.
*/ */
const confidenceLevels = [ const confidenceLevels = [
{ {
value: '1', value: '1',
label: '1 - Strongly disagree', label: '1 - Strongly disagree',
}, },
{ {
value: '2', value: '2',
label: '2 - Disagree', label: '2 - Disagree',
}, },
{ {
value: '3', value: '3',
label: '3 - Neutral', label: '3 - Neutral',
}, },
{ {
value: '4', value: '4',
label: '4 - Agree', label: '4 - Agree',
}, },
{ {
value: '5', value: '5',
label: '5 - Strongly agree', label: '5 - Strongly agree',
}, },
]; ];
/** /**
* The form component. * The form component.
*/ */
class ReportForm extends React.Component { class ReportForm extends React.Component {
/** /**
* Component contructor. Currently * Component contructor. Currently
* only used to bind event * only used to bind event
* handlers. * handlers.
*/ */
constructor() { constructor() {
super(); super();
this.handleSubmit = this.handleSubmit.bind(this); this.handleSubmit = this.handleSubmit.bind(this);
}
/**
* Function for formatting the
* year as a string that
* Material UI can use.
* @param {*} date, Date passed in.
*/
getYear = date => {
var d = new Date(date),
year = d.getFullYear();
return year;
}
/**
* Function for formatting the
* month as a string that
* Material UI can use.
* @param {*} date, Date passed in.
*/
getMonth = date => {
var d = new Date(date),
month = d.getMonth() + 1;
month = month.toString();
if (month.length === 1) {
month = "0" + month;
}
return month;
}
/**
* State of form components.
*/
state = {
month: this.getMonth(new Date()),
year: this.getYear(new Date()),
time: 'unknown',
type: 'visual',
confidence: '1',
desc: '',
lat: '',
lng: '',
open: false
};
/**
* Handles state change in form
* components.
*/
handleChange = name => event => {
this.setState({
[name]: event.target.value,
});
};
/**
* Handles closing the toast.
*/
handleClose = (event, reason) => {
if (reason === 'clickaway') {
return;
} }
this.setState({ open: false });
};
/*
* 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.year + '-' + this.state.month,
time: this.state.time,
desc: this.state.desc,
lat: this.state.lat,
lng: this.state.lng
}
sightingsRef.push(sighting);
this.setState({
year: this.getYear(new Date()),
month: this.getMonth(new Date()),
time: 'unknown',
type: 'visual',
confidence: '1',
desc: '',
lat: '',
lng: '',
open: true
});
};
/**
* The render method for this component.
*/
render() {
const { classes } = this.props;
/** /**
* The actual form. * Function for formatting the
* year as a string that
* Material UI can use.
* @param {*} date, Date passed in.
*/
getYear = date => {
var d = new Date(date),
year = d.getFullYear();
return year;
}
/**
* Function for formatting the
* month as a string that
* Material UI can use.
* @param {*} date, Date passed in.
*/
getMonth = date => {
var d = new Date(date),
month = d.getMonth() + 1;
month = month.toString();
if (month.length === 1) {
month = "0" + month;
}
return month;
}
/**
* State of form components.
*/ */
return ( state = {
<Fragment> month: this.getMonth(new Date()),
<form className={classes.container} autoComplete="off" onSubmit={this.handleSubmit}> year: this.getYear(new Date()),
<Grid container> time: 'unknown',
<Grid item xs={12} md={6}> type: 'visual',
<Grid container spacing={8}> confidence: '1',
<Grid item xs={12}> desc: '',
<TextField lat: '',
id="select-sighting-type" lng: '',
select open: false,
required openModal: false,
name="sighting-type" hasModalOpened: false
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}> handleModalOpen = () => !this.state.hasModalOpened ? this.setState({ openModal: true, hasModalOpened: true }) : null;
<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="I am confident of my marten sighting"
>
{confidenceLevels.map(option => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
</Grid>
<Grid item xs={12}> handleModalClose = () => {
<TextField this.setState({ openModal: false });
id="sighting-time" };
select
required
label="Sighting time"
name="sighting-time"
className={classes.textField}
value={this.state.time}
onChange={this.handleChange('time')}
SelectProps={{
MenuProps: {
className: classes.menu,
},
}}
>
{timeTypes.map(option => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
</Grid>
<Grid item xs={12}> getModalStyle = () => {
<TextField return {
id="sighting-month" top: `25%`,
select left: `75%`,
required transform: `translate(-25%, -75%)`,
label="Sighting month" };
name="sighting-month" }
className={classes.textField}
value={this.state.month}
onChange={this.handleChange('month')}
SelectProps={{
MenuProps: {
className: classes.menu,
},
}}
>
{monthTypes.map(option => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
</Grid>
<Grid item xs={12}> /**
<TextField * Handles state change in form
id="sighting-year" * components.
required */
label="Sighting year" handleChange = name => event => {
name="sighting-year" this.setState({
value={this.state.year} [name]: event.target.value,
type="number" });
className={classes.textField} };
onChange={this.handleChange('year')}
InputLabelProps={{
shrink: true,
}}
/>
</Grid>
<Grid item xs={12}> /**
<TextField * Handles closing the toast.
id="sighting-description" */
required handleClose = (event, reason) => {
label="Description" if (reason === 'clickaway') {
name="sighting-desc" return;
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}> this.setState({ open: false });
<Button variant="contained" type="submit" color="primary" className={classes.button}> };
Submit
</Button> /*
</Grid> * Get the coordinates
</Grid> *
</Grid> */
<Grid item xs={12} md={6}> getCoordinates = (lat, lng) => {
<GoogleMap onClick={this.getCoordinates} /> let latitude = lat;
</Grid> let longitude = lng;
</Grid>
</form> this.setState({
<Snackbar lat: latitude,
anchorOrigin={{ lng: longitude
vertical: 'bottom', });
horizontal: 'left', }
}}
open={this.state.open} /**
autoHideDuration={6000} * Event listener for form.
onClose={this.handleClose} * When the form is submitted,
ContentProps={{ * this function passes the
'aria-describedby': 'message-id', * data along to Firebase.
}} */
message={<span id="message-id" className={classes.message}><CheckCircleIcon className={classes.icon} />Report received.</span>} handleSubmit(e) {
action={[ e.preventDefault();
<IconButton const sightingsRef = firebase.database().ref('sightings');
key="close" const sighting = {
aria-label="Close" type: this.state.type,
color="inherit" confidence: this.state.confidence,
className={classes.close} date: this.state.year + '-' + this.state.month,
onClick={this.handleClose} time: this.state.time,
> desc: this.state.desc,
<CloseIcon /> lat: this.state.lat,
</IconButton>, lng: this.state.lng
]} }
/> sightingsRef.push(sighting);
</Fragment> this.setState({
); year: this.getYear(new Date()),
} month: this.getMonth(new Date()),
time: 'unknown',
type: 'visual',
confidence: '1',
desc: '',
lat: '',
lng: '',
open: true
});
};
/**
* 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={12} md={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="I am confident of my marten sighting"
>
{confidenceLevels.map(option => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
</Grid>
<Grid item xs={12}>
<TextField
id="sighting-time"
select
required
label="Sighting time"
name="sighting-time"
className={classes.textField}
value={this.state.time}
onChange={this.handleChange('time')}
SelectProps={{
MenuProps: {
className: classes.menu,
},
}}
>
{timeTypes.map(option => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
</Grid>
<Grid item xs={12}>
<TextField
id="sighting-month"
select
required
label="Sighting month"
name="sighting-month"
className={classes.textField}
value={this.state.month}
onChange={this.handleChange('month')}
SelectProps={{
MenuProps: {
className: classes.menu,
},
}}
>
{monthTypes.map(option => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
</Grid>
<Grid item xs={12}>
<TextField
id="sighting-year"
required
label="Sighting year"
name="sighting-year"
value={this.state.year}
type="number"
className={classes.textField}
onChange={this.handleChange('year')}
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={12} md={6} onMouseEnter={this.handleModalOpen}>
<GoogleMap onClick={this.getCoordinates}/>
<Modal
aria-labelledby="simple-modal-title"
aria-describedby="simple-modal-description"
open={this.state.openModal}
onClose={this.handleModalClose}
>
<div style={this.getModalStyle()} className={classes.paper}>
<Typography variant="title" id="modal-title">
Need a little help?
</Typography>
<Typography variant="subheading" id="simple-modal-description">
Click on the map to drop a pin!
</Typography>
</div>
</Modal>
</Grid>
</Grid>
</form>
<Snackbar
anchorOrigin={{
vertical: 'bottom',
horizontal: 'left',
}}
open={this.state.open}
autoHideDuration={6000}
onClose={this.handleClose}
ContentProps={{
'aria-describedby': 'message-id',
}}
message={<span id="message-id" className={classes.message}><CheckCircleIcon className={classes.icon} />Report received.</span>}
action={[
<IconButton
key="close"
aria-label="Close"
color="inherit"
className={classes.close}
onClick={this.handleClose}
>
<CloseIcon />
</IconButton>,
]}
/>
</Fragment>
);
}
} }
ReportForm.propTypes = { ReportForm.propTypes = {
classes: PropTypes.object.isRequired, classes: PropTypes.object.isRequired,
}; };
export default withStyles(styles)(ReportForm); export default withStyles(styles)(ReportForm);