resolve merge conflicts
This commit is contained in:
Al Duncanson
commit
ee0404a82b
|
|
@ -5,6 +5,7 @@
|
|||
"dependencies": {
|
||||
"@material-ui/core": "^3.1.0",
|
||||
"google-maps-react": "^2.0.2",
|
||||
"firebase": "^5.5.1",
|
||||
"react": "^16.5.1",
|
||||
"react-dom": "^16.5.1",
|
||||
"react-router": "^4.3.1",
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ import Home from '../pages/Home';
|
|||
import Map from '../pages/Map';
|
||||
import Quiz from '../pages/Quiz';
|
||||
import Sighting from '../pages/Sighting';
|
||||
import Report from '../pages/Report';
|
||||
import Info from '../pages/Info';
|
||||
|
||||
function TabContainer(props) {
|
||||
|
|
@ -43,24 +44,26 @@ class SimpleTabs extends React.Component {
|
|||
const { classes } = this.props;
|
||||
const { value } = this.state;
|
||||
|
||||
return (
|
||||
<div className={classes.root}>
|
||||
<AppBar position="static">
|
||||
<Tabs value={value} onChange={this.handleChange} centered>
|
||||
<Tab label="Home" />
|
||||
<Tab label="Sightings" />
|
||||
<Tab label="Trail-Cam Quiz" />
|
||||
<Tab label="View Map" />
|
||||
<Tab label="Marten Info" />
|
||||
</Tabs>
|
||||
</AppBar>
|
||||
{value === 0 && <Home/>}
|
||||
{value === 1 && <Sighting/>}
|
||||
{value === 2 && <Quiz/>}
|
||||
{value === 3 && <Map/>}
|
||||
{value === 4 && <Info/>}
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className={classes.root}>
|
||||
<AppBar position="static">
|
||||
<Tabs value={value} onChange={this.handleChange} centered>
|
||||
<Tab label="Home" />
|
||||
<Tab label="Report a Sighting"/>
|
||||
<Tab label="Sightings" />
|
||||
<Tab label="Trail-Cam Quiz" />
|
||||
<Tab label="View Map" />
|
||||
<Tab label="Marten Info" />
|
||||
</Tabs>
|
||||
</AppBar>
|
||||
{value === 0 && <Home/>}
|
||||
{value === 1 && <Report/>}
|
||||
{value === 2 && <Sighting/>}
|
||||
{value === 3 && <Quiz/>}
|
||||
{value === 4 && <Map/>}
|
||||
{value === 5 && <Info/>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,311 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import Grid from '@material-ui/core/Grid';
|
||||
import { withStyles } from '@material-ui/core/styles';
|
||||
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';
|
||||
|
||||
/**
|
||||
* Styles that the different
|
||||
* Material UI components pull
|
||||
* in. Mostly used for spacing.
|
||||
*/
|
||||
const styles = theme => ({
|
||||
container: {
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
},
|
||||
textField: {
|
||||
marginLeft: theme.spacing.unit * 2,
|
||||
marginRight: theme.spacing.unit,
|
||||
marginTop: theme.spacing.unit * 2,
|
||||
flexBasis: 280,
|
||||
},
|
||||
button: {
|
||||
marginLeft: theme.spacing.unit * 2,
|
||||
marginRight: theme.spacing.unit,
|
||||
marginTop: theme.spacing.unit * 2,
|
||||
},
|
||||
dense: {
|
||||
marginTop: 30,
|
||||
},
|
||||
menu: {
|
||||
width: 200,
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* Function for formatting the
|
||||
* date as a string that
|
||||
* Material UI can use. We'll
|
||||
* also store the date like
|
||||
* this string in the database.
|
||||
* @param {*} date, Date passed in.
|
||||
*/
|
||||
function formatDate(date) {
|
||||
var d = new Date(date),
|
||||
month = '' + (d.getMonth() + 1),
|
||||
day = '' + d.getDate(),
|
||||
year = d.getFullYear();
|
||||
|
||||
if (month.length < 2) month = '0' + month;
|
||||
if (day.length < 2) day = '0' + day;
|
||||
|
||||
return [year, month, day].join('-');
|
||||
}
|
||||
|
||||
/**
|
||||
* Types of sightings. Label is what is
|
||||
* viewed in the application, value is
|
||||
* what is stored in the database.
|
||||
*/
|
||||
const sightingTypes = [
|
||||
{
|
||||
value: 'visual',
|
||||
label: 'Visual',
|
||||
},
|
||||
{
|
||||
value: 'roadkill',
|
||||
label: 'Roadkill',
|
||||
},
|
||||
{
|
||||
value: 'trapped',
|
||||
label: 'Trapped',
|
||||
},
|
||||
{
|
||||
value: 'viewed_tracks',
|
||||
label: 'Viewed Tracks',
|
||||
},
|
||||
{
|
||||
value: 'photo',
|
||||
label: 'Photo',
|
||||
},
|
||||
{
|
||||
value: 'other',
|
||||
label: 'Other',
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
* Levels of confidence. Label is what is
|
||||
* viewed in the application, value is
|
||||
* what is stored in the database.
|
||||
*/
|
||||
const confidenceLevels = [
|
||||
{
|
||||
value: '1',
|
||||
label: '1 - Strongly unconfident',
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: '2 - Unconfident',
|
||||
},
|
||||
{
|
||||
value: '3',
|
||||
label: '3 - Somewhat confident',
|
||||
},
|
||||
{
|
||||
value: '4',
|
||||
label: '4 - Confident',
|
||||
},
|
||||
{
|
||||
value: '5',
|
||||
label: '5 - Very confident',
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
* The form component.
|
||||
*/
|
||||
class ReportForm extends React.Component {
|
||||
/**
|
||||
* Component contructor. Currently
|
||||
* only used to bind event
|
||||
* handlers.
|
||||
*/
|
||||
constructor() {
|
||||
super();
|
||||
this.handleSubmit = this.handleSubmit.bind(this);
|
||||
}
|
||||
|
||||
/**
|
||||
* State of form components.
|
||||
*/
|
||||
state = {
|
||||
date: formatDate(new Date()),
|
||||
time: '00:00',
|
||||
type: 'visual',
|
||||
confidence: '1',
|
||||
desc: ''
|
||||
};
|
||||
|
||||
/**
|
||||
* Handles state change in form
|
||||
* components.
|
||||
*/
|
||||
handleChange = name => event => {
|
||||
this.setState({
|
||||
[name]: event.target.value,
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 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.date,
|
||||
time: this.state.time,
|
||||
desc: this.state.desc
|
||||
}
|
||||
sightingsRef.push(sighting);
|
||||
this.setState({
|
||||
date: formatDate(new Date()),
|
||||
time: '00:00',
|
||||
type: 'visual',
|
||||
confidence: '1',
|
||||
desc: ''
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* The render method for this component.
|
||||
*/
|
||||
render() {
|
||||
const { classes } = this.props;
|
||||
|
||||
/**
|
||||
* 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>
|
||||
|
||||
<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="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-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>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReportForm.propTypes = {
|
||||
classes: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
export default withStyles(styles)(ReportForm);
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import firebase from 'firebase/app';
|
||||
import 'firebase/database';
|
||||
|
||||
const config = {
|
||||
apiKey: "AIzaSyAYf9AbeYwLY892NRiQfn0AMtG9xIFAJbo",
|
||||
authDomain: "marten-application.firebaseapp.com",
|
||||
databaseURL: "https://marten-application.firebaseio.com",
|
||||
projectId: "marten-application",
|
||||
storageBucket: "marten-application.appspot.com",
|
||||
messagingSenderId: "659856510832"
|
||||
};
|
||||
|
||||
firebase.initializeApp(config);
|
||||
export default firebase;
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Report;
|
||||
Loading…
Reference in New Issue