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 PropTypes from 'prop-types';
|
||||||
import Grid from '@material-ui/core/Grid';
|
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';
|
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
|
* Types of sightings. Label is what is
|
||||||
* need to be state bound
|
* 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){
|
constructor(props){
|
||||||
super(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({
|
this.setState({
|
||||||
[e.target.name]: e.target.value
|
[name]: event.target.value,
|
||||||
});
|
});
|
||||||
}
|
};
|
||||||
|
|
||||||
//FIXME: Do I Need this function?
|
/**
|
||||||
// handleSubmit(e){
|
* Handles submit on search.
|
||||||
// e.preventDefault();
|
*/
|
||||||
// const itemsRef = firebase.database().ref('items').orderByKey();
|
handleSubmit(e){
|
||||||
// const item = {
|
e.preventDefault();
|
||||||
// type: this.state.type,
|
const itemSighting = firebase.database().ref("sightings/" + this.state.id);
|
||||||
// confidence: this.state.confidence,
|
itemSighting.once("value").then((snapshot) => {
|
||||||
// date: this.state.date,
|
let data = snapshot.val();
|
||||||
// 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
|
|
||||||
});
|
|
||||||
}
|
|
||||||
this.setState({
|
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(){
|
|
||||||
|
|
||||||
|
render(){
|
||||||
|
const { classes } = this.props;
|
||||||
return (
|
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