Created a component for pulling in a single sighting.
This commit is contained in:
malfecient
parent
1f6aeb44b7
commit
8c69f5351a
|
|
@ -1,80 +1,227 @@
|
|||
import React from 'react';
|
||||
import React, {Fragment} from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import Grid from '@material-ui/core/Grid';
|
||||
import TextField from '@material-ui/core/TextField'
|
||||
import Button from '@material-ui/core/Button'
|
||||
import Paper from '@material-ui/core/Paper'
|
||||
import { withStyles } from '@material-ui/core/styles';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import firebase from '../firebase.js';
|
||||
|
||||
class ViewSightings extends React.Component {
|
||||
const styles = theme => ({
|
||||
root: {
|
||||
...theme.mixins.gutters(),
|
||||
paddingTop: theme.spacing.unit * 2,
|
||||
paddingBottom: theme.spacing.unit * 2,
|
||||
},
|
||||
container: {
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
},
|
||||
textField: {
|
||||
marginLeft: theme.spacing.unit * 2,
|
||||
marginRight: theme.spacing.unit * 2,
|
||||
marginTop: theme.spacing.unit * 2,
|
||||
flexBasis: 280,
|
||||
},
|
||||
button: {
|
||||
marginLeft: theme.spacing.unit * 3,
|
||||
marginRight: theme.spacing.unit * 3,
|
||||
marginTop: theme.spacing.unit * 3,
|
||||
},
|
||||
paper: {
|
||||
marginLeft: theme.spacing.unit * 2,
|
||||
marginRight: theme.spacing.unit,
|
||||
marginTop: theme.spacing.unit * 2,
|
||||
},
|
||||
});
|
||||
|
||||
/*TODO:
|
||||
* Constructor in case functions
|
||||
* need to be state bound
|
||||
*/
|
||||
/**
|
||||
* 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',
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
* Gets formatted confidence value.
|
||||
*/
|
||||
function getConfidence(item) {
|
||||
for (var i = 0; i < confidenceLevels.length; i++) {
|
||||
if (confidenceLevels[i].value === item) {
|
||||
return confidenceLevels[i].label;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets formatted type value.
|
||||
*/
|
||||
function getType(item) {
|
||||
for (var i = 0; i < sightingTypes.length; i++) {
|
||||
if (sightingTypes[i].value === item) {
|
||||
return sightingTypes[i].label;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class ViewSightings extends React.Component {
|
||||
constructor(props){
|
||||
super(props);
|
||||
this.state = {
|
||||
type:[],
|
||||
confidence: [],
|
||||
date: [],
|
||||
time: [],
|
||||
desc: [],
|
||||
items: []
|
||||
};
|
||||
|
||||
this.handleChange = this.handleChange.bind(this);
|
||||
// this.handleSubmit = this.handleSubmit.bind(this);
|
||||
this.handleSubmit = this.handleSubmit.bind(this);
|
||||
}
|
||||
|
||||
handleChange(e) {
|
||||
state = {
|
||||
id: '',
|
||||
type: 'N/A',
|
||||
confidence: 'N/A',
|
||||
date: 'N/A',
|
||||
time: 'N/A',
|
||||
desc: 'N/A',
|
||||
lat: 'N/A',
|
||||
lng: 'N/A'
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Handles state change in form
|
||||
* components.
|
||||
*/
|
||||
handleChange = name => event => {
|
||||
this.setState({
|
||||
[e.target.name]: e.target.value
|
||||
[name]: event.target.value,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
//FIXME: Do I Need this function?
|
||||
// handleSubmit(e){
|
||||
// e.preventDefault();
|
||||
// const itemsRef = firebase.database().ref('items').orderByKey();
|
||||
// const item = {
|
||||
// type: this.state.type,
|
||||
// confidence: this.state.confidence,
|
||||
// date: this.state.date,
|
||||
// time: this.state.time,
|
||||
// desc: this.state.desc
|
||||
// }
|
||||
// itemsRef.push(item);
|
||||
// }
|
||||
|
||||
componentDidMount(){
|
||||
const itemsRef = firebase.database().ref('items').orderByKey();
|
||||
|
||||
itemsRef.on('value', (snapshot) => {
|
||||
let items = snapshot.val();
|
||||
let newState = [];
|
||||
for (let item in items) {
|
||||
newState.push({
|
||||
id: item,
|
||||
type: items[item].type,
|
||||
confidence: items[item].confidence,
|
||||
date: items[item].date,
|
||||
time: items[item].time,
|
||||
desc: items[item].desc
|
||||
});
|
||||
}
|
||||
/**
|
||||
* Handles submit on search.
|
||||
*/
|
||||
handleSubmit(e){
|
||||
e.preventDefault();
|
||||
const itemSighting = firebase.database().ref("sightings/" + this.state.id);
|
||||
itemSighting.once("value").then((snapshot) => {
|
||||
let data = snapshot.val();
|
||||
this.setState({
|
||||
items: newState
|
||||
date: data.date,
|
||||
time: data.time,
|
||||
type: getType(data.type),
|
||||
confidence: getConfidence(data.confidence),
|
||||
desc: data.desc,
|
||||
lat: data.lat,
|
||||
lng: data.lng
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
}
|
||||
render(){
|
||||
|
||||
const { classes } = this.props;
|
||||
return (
|
||||
console.log("hello"),
|
||||
null
|
||||
);
|
||||
/**
|
||||
* The below houses the search
|
||||
* and submit button along with
|
||||
* the sighting information
|
||||
* it pulls.
|
||||
*/
|
||||
<Fragment>
|
||||
<Grid container justify="center">
|
||||
<form className={classes.container} onSubmit={this.handleSubmit}>
|
||||
<Grid item xs={6}>
|
||||
<TextField
|
||||
id="sighting-id"
|
||||
name="sighting-id"
|
||||
label="Input ID"
|
||||
value={this.state.id}
|
||||
margin="normal"
|
||||
onChange={this.handleChange('id')}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<Button variant="contained" type="submit" color="primary" className={classes.button}>
|
||||
Submit
|
||||
</Button>
|
||||
</Grid>
|
||||
</form>
|
||||
<Grid item xs={12}>
|
||||
<Paper elevation={2}>
|
||||
<Typography variant="headline" component="h3">
|
||||
Sighting
|
||||
</Typography>
|
||||
<Typography component="p">
|
||||
<b>Type:</b> {this.state.type} {<br/>}
|
||||
<b>Confidence:</b> {this.state.confidence} {<br/>}
|
||||
<b>Date:</b> {this.state.date} {<br/>}
|
||||
<b>Time:</b> {this.state.time} {<br/>}
|
||||
<b>Latitude:</b> {this.state.lat} {<br/>}
|
||||
<b>Longitude:</b> {this.state.lng} {<br/>}
|
||||
<b>Description:</b> {this.state.desc}
|
||||
</Typography>
|
||||
</Paper>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Fragment>
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default ViewSightings;
|
||||
ViewSightings.propTypes = {
|
||||
classes: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
export default withStyles(styles)(ViewSightings);
|
||||
Loading…
Reference in New Issue