From 8c69f5351aa89b431da8550e8fbf2c50997479c5 Mon Sep 17 00:00:00 2001 From: malfecient Date: Sun, 7 Oct 2018 23:14:57 -0400 Subject: [PATCH] Created a component for pulling in a single sighting. --- src/components/ViewSightings.js | 261 +++++++++++++++++++++++++------- 1 file changed, 204 insertions(+), 57 deletions(-) diff --git a/src/components/ViewSightings.js b/src/components/ViewSightings.js index 46da41a..4e62ace 100644 --- a/src/components/ViewSightings.js +++ b/src/components/ViewSightings.js @@ -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(){ + }; + 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. + */ + + +
+ + + + + + +
+ + + + Sighting + + + Type: {this.state.type} {
} + Confidence: {this.state.confidence} {
} + Date: {this.state.date} {
} + Time: {this.state.time} {
} + Latitude: {this.state.lat} {
} + Longitude: {this.state.lng} {
} + Description: {this.state.desc} + + + + + + ) } } -export default ViewSightings; \ No newline at end of file +ViewSightings.propTypes = { + classes: PropTypes.object.isRequired, + }; + +export default withStyles(styles)(ViewSightings); \ No newline at end of file