Fixed minor bug with theme swap and restructured components folder.
This commit is contained in:
wildscotsmen
172
src/components/list/SightingDetail.js
Normal file
172
src/components/list/SightingDetail.js
Normal file
@@ -0,0 +1,172 @@
|
||||
import React, { Component, Fragment } from 'react';
|
||||
import Disqus from 'disqus-react';
|
||||
import moment from 'moment';
|
||||
import SightingDetailMap from './SightingDetailMap';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import { withStyles } from '@material-ui/core/styles';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const styles = theme => ({
|
||||
});
|
||||
|
||||
/**
|
||||
* 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',
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
* Types of sightings. Label is what is
|
||||
* viewed in the application, value is
|
||||
* what is stored in the database.
|
||||
*/
|
||||
const timeTypes = [
|
||||
{
|
||||
value: 'unknown',
|
||||
label: 'Unknown',
|
||||
},
|
||||
{
|
||||
value: 'morning',
|
||||
label: 'Morning',
|
||||
},
|
||||
{
|
||||
value: 'midday',
|
||||
label: 'Midday',
|
||||
},
|
||||
{
|
||||
value: 'evening',
|
||||
label: 'Evening',
|
||||
},
|
||||
{
|
||||
value: 'night',
|
||||
label: 'Night',
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
* 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 disagree',
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: '2 - Disagree',
|
||||
},
|
||||
{
|
||||
value: '3',
|
||||
label: '3 - Neutral',
|
||||
},
|
||||
{
|
||||
value: '4',
|
||||
label: '4 - Agree',
|
||||
},
|
||||
{
|
||||
value: '5',
|
||||
label: '5 - Strongly agree',
|
||||
},
|
||||
];
|
||||
|
||||
class SightingDetail extends Component {
|
||||
|
||||
/**
|
||||
* Gets formatted type value.
|
||||
*/
|
||||
getType = item => {
|
||||
for (var i = 0; i < sightingTypes.length; i++) {
|
||||
if (sightingTypes[i].value === item) {
|
||||
return sightingTypes[i].label;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Gets formatted time value.
|
||||
*/
|
||||
getTime = item => {
|
||||
for (var i = 0; i < timeTypes.length; i++) {
|
||||
if (timeTypes[i].value === item) {
|
||||
return timeTypes[i].label;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets formatted confidence value.
|
||||
*/
|
||||
getConfidence = item => {
|
||||
for (var i = 0; i < confidenceLevels.length; i++) {
|
||||
if (confidenceLevels[i].value === item) {
|
||||
return confidenceLevels[i].label;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
formatDate = date => {
|
||||
return (moment(date, "YYYY-MM").format("MMMM YYYY").toString());
|
||||
}
|
||||
|
||||
render() {
|
||||
const disqusShortname = 'marten-tracker';
|
||||
const disqusConfig = {
|
||||
url: `http://localhost:3000/${this.props.detail.id}`,
|
||||
identifier: this.props.detail.id,
|
||||
title: this.props.detail.id
|
||||
};
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<SightingDetailMap lat={this.props.detail.lat} lng={this.props.detail.lng} />
|
||||
<Typography component="div">
|
||||
<div className='sighting-details-content'>
|
||||
<p><b>Type:</b> {this.getType(this.props.detail.type)}</p>
|
||||
<p><b>When:</b> {this.formatDate(this.props.detail.date)}, {this.getTime(this.props.detail.time)}</p>
|
||||
<p><b>Where:</b> {this.props.detail.lat} degrees N, and {this.props.detail.lng} degrees E</p>
|
||||
<p><b>I am confident of my sighting:</b> {this.getConfidence(this.props.detail.confidence)}</p>
|
||||
<hr />
|
||||
<p>{`${this.props.detail.desc}`}</p>
|
||||
</div>
|
||||
<Disqus.DiscussionEmbed shortname={disqusShortname} config={disqusConfig} />
|
||||
</Typography>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
SightingDetail.propTypes = {
|
||||
classes: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
export default withStyles(styles)(SightingDetail);
|
||||
36
src/components/list/SightingDetailMap.js
Normal file
36
src/components/list/SightingDetailMap.js
Normal file
@@ -0,0 +1,36 @@
|
||||
import React, { Component } from 'react';
|
||||
import { Map, Marker, GoogleApiWrapper } from 'google-maps-react';
|
||||
|
||||
// Google Maps API Key
|
||||
const API_KEY = 'AIzaSyAZ_0J01bA6wCbIPK4UBq2RUBC-hIqG4mM';
|
||||
|
||||
// Map container styles
|
||||
const mapStyles = {
|
||||
width: '100%',
|
||||
height: '100%'
|
||||
};
|
||||
|
||||
export class MapContainer extends Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
// Render the Google Map, Marker, and InfoWindow components
|
||||
<div className="sighting-detail-google-map-container">
|
||||
<Map
|
||||
style={mapStyles}
|
||||
google={this.props.google}
|
||||
initialCenter={{ lat: this.props.lat, lng: this.props.lng }}
|
||||
center={{ lat: this.props.lat, lng: this.props.lng }}
|
||||
defaultZoom={15}>
|
||||
|
||||
<Marker
|
||||
position={{ lat: this.props.lat, lng: this.props.lng }}
|
||||
/>
|
||||
</Map>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Send the Google Map API Key with the MapContainer component
|
||||
export default GoogleApiWrapper({ apiKey: (API_KEY) })(MapContainer);
|
||||
113
src/components/list/ViewSightings.js
Normal file
113
src/components/list/ViewSightings.js
Normal file
@@ -0,0 +1,113 @@
|
||||
import React, { Component, Fragment } from 'react';
|
||||
import Grid from '@material-ui/core/Grid';
|
||||
import firebase from '../../firebase.js';
|
||||
import List from '@material-ui/core/List';
|
||||
import ListItem from '@material-ui/core/ListItem';
|
||||
import ListItemText from '@material-ui/core/ListItemText';
|
||||
import SightingDetail from './SightingDetail';
|
||||
|
||||
class ViewSightings extends Component {
|
||||
|
||||
componentDidMount() {
|
||||
const sightingsRef = firebase.database().ref('sightings');
|
||||
|
||||
sightingsRef.on('value', (snapshot) => {
|
||||
let sightings = snapshot.val();
|
||||
let newState = [];
|
||||
|
||||
for (let sighting in sightings) {
|
||||
newState.unshift({
|
||||
id: sighting,
|
||||
lat: sightings[sighting].lat,
|
||||
lng: sightings[sighting].lng,
|
||||
desc: sightings[sighting].desc,
|
||||
type: sightings[sighting].type,
|
||||
confidence: sightings[sighting].confidence,
|
||||
date: sightings[sighting].date,
|
||||
time: sightings[sighting].time
|
||||
});
|
||||
}
|
||||
this.setState({
|
||||
sightings: newState
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
getDetail = (id, lat, lng, desc, type, confidence, date, time) => {
|
||||
this.setState({
|
||||
selectedSighting: {
|
||||
id: id,
|
||||
lat: lat,
|
||||
lng: lng,
|
||||
desc: desc,
|
||||
type: type,
|
||||
confidence: confidence,
|
||||
date: date,
|
||||
time: time
|
||||
},
|
||||
clicked: true
|
||||
})
|
||||
}
|
||||
|
||||
state = {
|
||||
sightings: [],
|
||||
selectedSighting: {
|
||||
id: null,
|
||||
lat: null,
|
||||
lng: null,
|
||||
desc: null,
|
||||
type: null,
|
||||
confidence: null,
|
||||
date: null,
|
||||
time: null
|
||||
},
|
||||
clicked: false
|
||||
};
|
||||
|
||||
componentDidUpdate(props) {
|
||||
if (this.props.themeName !== props.themeName) {
|
||||
this.setState({
|
||||
selectedSighting: {
|
||||
id: null,
|
||||
lat: null,
|
||||
lng: null,
|
||||
desc: null,
|
||||
type: null,
|
||||
confidence: null,
|
||||
date: null,
|
||||
time: null
|
||||
},
|
||||
clicked: false
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Fragment>
|
||||
<Grid container>
|
||||
<Grid item xs={12} md={6} className='sighting-list'>
|
||||
<Fragment>
|
||||
<List>
|
||||
{
|
||||
this.state.sightings.map((sighting) => {
|
||||
return (
|
||||
<ListItem button key={sighting.id} onClick={() => this.getDetail(sighting.id, sighting.lat, sighting.lng, sighting.desc, sighting.type, sighting.confidence, sighting.date, sighting.time)}>
|
||||
<ListItemText primary={`${sighting.desc}`} />
|
||||
</ListItem>
|
||||
);
|
||||
})
|
||||
}
|
||||
</List>
|
||||
</Fragment>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={6} className='sighting-details'>
|
||||
{this.state.clicked === true && <SightingDetail detail={this.state.selectedSighting} />}
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default ViewSightings;
|
||||
Reference in New Issue
Block a user