fixed merge conflicts
This commit is contained in:
Al Duncanson
commit
545db78a66
File diff suppressed because it is too large
Load Diff
|
|
@ -5,11 +5,15 @@
|
|||
"dependencies": {
|
||||
"@material-ui/core": "^3.1.0",
|
||||
"@material-ui/icons": "^3.0.1",
|
||||
"ajv": "^6.0.0",
|
||||
"disqus-react": "^1.0.5",
|
||||
"firebase": "^5.5.2",
|
||||
"firebase-admin": "^6.0.0",
|
||||
"firebase-admin": "^6.1.0",
|
||||
"flamelink": "^0.19.2",
|
||||
"google-maps-react": "^2.0.2",
|
||||
"grpc": "^1.15.1",
|
||||
"material-ui": "^1.0.0-beta.16",
|
||||
"material-ui-icons": "^1.0.0-beta.36",
|
||||
"moment": "^2.22.2",
|
||||
"react": "^16.5.1",
|
||||
"react-dom": "^16.5.1",
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
|
|
@ -3,6 +3,10 @@ import Main from './components/Main';
|
|||
import './App.css';
|
||||
|
||||
class App extends Component {
|
||||
componentDidMount() {
|
||||
document.title = 'Marten Tracker';
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,28 @@
|
|||
import React, { Component} from 'react';
|
||||
import FlameLinkStructure from './FlameLinkStructure';
|
||||
import Grid from '@material-ui/core/Grid';
|
||||
|
||||
class FlameLinkComponentCreations extends Component {
|
||||
|
||||
getSchemaFieldData(schemaData){
|
||||
var arr = [];
|
||||
for (var val in schemaData){
|
||||
arr.push(val);
|
||||
}
|
||||
return arr.map(this.createComponents, schemaData);
|
||||
}
|
||||
|
||||
createComponents(num){
|
||||
return <FlameLinkStructure schemaData={this} field={this[num]} type={this[num].type} key={this[num].key} />
|
||||
}
|
||||
|
||||
render() {
|
||||
return(
|
||||
<Grid container>
|
||||
{this.getSchemaFieldData(this.props.schemaDetails)}
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default FlameLinkComponentCreations;
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
import React, { Component} from 'react';
|
||||
import Grid from '@material-ui/core/Grid';
|
||||
import FlameLinkFieldSetContent from './FlameLinkFieldSetContent';
|
||||
|
||||
|
||||
class FlameLinkFieldSet extends Component {
|
||||
|
||||
|
||||
getFieldSetContent(content1, content2){
|
||||
var arr = [];
|
||||
for (var val in content2){
|
||||
arr.push(val);
|
||||
}
|
||||
var arrContent = [content1, content2];
|
||||
return arr.map(this.createFieldSetComponents, arrContent);
|
||||
}
|
||||
|
||||
createFieldSetComponents(num){
|
||||
return <FlameLinkFieldSetContent field={this[1][num]} type={this[1][num].type} key={this[1][num].key} fieldKey={this[1][num].key} data={this[0]}/>
|
||||
}
|
||||
|
||||
render() {
|
||||
return(
|
||||
<Grid item xs={12}>
|
||||
{this.getFieldSetContent(this.props.field, this.props.field2)}
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default FlameLinkFieldSet;
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
import React, { Component} from 'react';
|
||||
import Grid from '@material-ui/core/Grid';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import { withStyles } from '@material-ui/core/styles';
|
||||
import FlameLinkImage from './FlameLinkImage';
|
||||
|
||||
const styles = theme => ({
|
||||
flamelinkFieldSetItem: {
|
||||
paddingBottom: 10,
|
||||
},
|
||||
});
|
||||
|
||||
class FlameLinkFieldSetContent extends Component {
|
||||
|
||||
getContent(key, type, description, fieldsetContent){
|
||||
if (type === 'text'){
|
||||
return (
|
||||
<Typography variant='body2' component="p" id={this.props.field.key}>
|
||||
{fieldsetContent[key]}
|
||||
</Typography>
|
||||
)
|
||||
}
|
||||
if(type === 'textarea'){
|
||||
return (
|
||||
<Typography variant='body2' component="p" id={this.props.field.key} gutterBottom>
|
||||
{fieldsetContent[key]}
|
||||
</Typography>
|
||||
)
|
||||
}
|
||||
if (type === 'media'){
|
||||
for (var val in fieldsetContent[key]){
|
||||
return <FlameLinkImage content={fieldsetContent[key][val]}/>
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { classes } = this.props;
|
||||
|
||||
const lg = this.props.field.gridColumns.lg;
|
||||
const md = this.props.field.gridColumns.md;
|
||||
const sm = this.props.field.gridColumns.sm;
|
||||
const xs = this.props.field.gridColumns.xs;
|
||||
return(
|
||||
<Grid item lg={lg} md={md} sm={sm} xs={xs} className={classes.flamelinkFieldSetItem}>
|
||||
{this.getContent(this.props.fieldKey, this.props.type, this.props.field.description, this.props.data)}
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withStyles(styles)(FlameLinkFieldSetContent);
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
import React, { Component } from 'react';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import flamelinkApp from '../flamelink.js';
|
||||
|
||||
|
||||
class FlameLinkImage extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
this.state = {
|
||||
mediaURL: '',
|
||||
}
|
||||
|
||||
flamelinkApp.storage.getURL(global.mediaID)
|
||||
.then(url => this.setState({
|
||||
mediaURL: url
|
||||
}))
|
||||
}
|
||||
|
||||
render() {
|
||||
return(
|
||||
<Typography align='center'>
|
||||
<img src={this.state.mediaURL} width="70%" alt='' />
|
||||
</Typography>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default FlameLinkImage;
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
import React, { Component} from 'react';
|
||||
import Grid from '@material-ui/core/Grid';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import { withStyles } from '@material-ui/core/styles';
|
||||
import flamelinkApp from '../flamelink.js';
|
||||
import FlameLinkImage from './FlameLinkImage';
|
||||
import FlameLinkFieldSet from './FlameLinkFieldSet';
|
||||
|
||||
const styles = theme => ({
|
||||
flamelinkItem: {
|
||||
paddingRight: 20,
|
||||
paddingLeft: 20,
|
||||
paddingTop: 20,
|
||||
},
|
||||
});
|
||||
|
||||
class FlameLinkStructure extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
global.mediaID = '';
|
||||
|
||||
this.state = {
|
||||
schemaContent: '',
|
||||
}
|
||||
|
||||
flamelinkApp.content.get(global.schemaName)
|
||||
.then(result => this.setState({
|
||||
schemaContent: result
|
||||
}))
|
||||
}
|
||||
|
||||
getContent(schemaField, key, type, description){
|
||||
if (type === 'text'){
|
||||
if(description === 'h1'){
|
||||
return (
|
||||
<Typography variant='display4' id={key}>
|
||||
{this.state.schemaContent[key]}
|
||||
</Typography>
|
||||
)
|
||||
}
|
||||
if(description === 'h2'){
|
||||
return (
|
||||
<Typography variant='display3' id={key}>
|
||||
{this.state.schemaContent[key]}
|
||||
</Typography>
|
||||
)
|
||||
}
|
||||
if(description === 'h3'){
|
||||
return (
|
||||
<Typography variant='display2' id={key}>
|
||||
{this.state.schemaContent[key]}
|
||||
</Typography>
|
||||
)
|
||||
}
|
||||
if(description === 'h4'){
|
||||
return (
|
||||
<Typography variant='display1' id={key}>
|
||||
{this.state.schemaContent[key]}
|
||||
</Typography>
|
||||
)
|
||||
}
|
||||
if(description === 'h5'){
|
||||
return (
|
||||
<Typography variant='headline' id={key}>
|
||||
{this.state.schemaContent[key]}
|
||||
</Typography>
|
||||
)
|
||||
}
|
||||
if(description === 'h6'){
|
||||
return (
|
||||
<Typography variant='title' id={key}>
|
||||
{this.state.schemaContent[key]}
|
||||
</Typography>
|
||||
)
|
||||
}
|
||||
else{
|
||||
return (
|
||||
<Typography variant='body2' component="p" id={key}>
|
||||
{this.state.schemaContent[key]}
|
||||
</Typography>
|
||||
)
|
||||
}
|
||||
}
|
||||
if(type === 'textarea'){
|
||||
return (
|
||||
<Typography variant='body2' component="p" id={key}>
|
||||
{this.state.schemaContent[key]}
|
||||
</Typography>
|
||||
)
|
||||
}
|
||||
if (type === 'media'){
|
||||
for (var val in this.state.schemaContent[key]){
|
||||
global.mediaID = this.state.schemaContent[key][val];
|
||||
return <FlameLinkImage/>
|
||||
}
|
||||
}
|
||||
if (type === 'fieldset'){
|
||||
if(this.state.schemaContent === ''){
|
||||
return
|
||||
}
|
||||
else{
|
||||
return <FlameLinkFieldSet field={this.state.schemaContent[key]} field2={schemaField.options}/>
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { classes } = this.props;
|
||||
|
||||
const lg = this.props.field.gridColumns.lg;
|
||||
const md = this.props.field.gridColumns.md;
|
||||
const sm = this.props.field.gridColumns.sm;
|
||||
const xs = this.props.field.gridColumns.xs;
|
||||
return(
|
||||
<Grid item lg={lg} md={md} sm={sm} xs={xs} className={classes.flamelinkItem}>
|
||||
{this.getContent(this.props.field, this.props.field.key, this.props.type, this.props.field.description)}
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withStyles(styles)(FlameLinkStructure);
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
import { Component } from 'react';
|
||||
|
||||
class Flamelink extends Component {
|
||||
render() {
|
||||
|
||||
return(null);
|
||||
}
|
||||
}
|
||||
|
||||
export default Flamelink;
|
||||
|
|
@ -16,10 +16,12 @@ import MenuIcon from '@material-ui/icons/Menu';
|
|||
import HomeIcon from '@material-ui/icons/Home';
|
||||
import AssignmentIcon from '@material-ui/icons/Assignment';
|
||||
import MapIcon from '@material-ui/icons/Map';
|
||||
import InfoIcon from '@material-ui/icons/Info';
|
||||
import ListIcon from '@material-ui/icons/List';
|
||||
import SlideshowIcon from '@material-ui/icons/Slideshow';
|
||||
import Home from '../pages/Home';
|
||||
import ViewMap from '../pages/ViewMap';
|
||||
import Info from '../pages/Info';
|
||||
import Quiz from '../pages/QuizPage';
|
||||
import SightingList from '../pages/SightingList';
|
||||
import Report from '../pages/Report';
|
||||
|
|
@ -68,7 +70,7 @@ const styles = theme => ({
|
|||
class ResponsiveDrawer extends React.Component {
|
||||
state = {
|
||||
mobileOpen: false,
|
||||
key: '',
|
||||
key: 'Home',
|
||||
open: false
|
||||
};
|
||||
|
||||
|
|
@ -83,7 +85,7 @@ class ResponsiveDrawer extends React.Component {
|
|||
nav = (text) => {
|
||||
this.setState({
|
||||
key: text
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
|
|
@ -110,6 +112,10 @@ class ResponsiveDrawer extends React.Component {
|
|||
<ListItemIcon><ListIcon /></ListItemIcon>
|
||||
<ListItemText primary='List' />
|
||||
</ListItem>
|
||||
<ListItem button key='About' onClick={() => this.nav('About')}>
|
||||
<ListItemIcon><InfoIcon /></ListItemIcon>
|
||||
<ListItemText primary='About' />
|
||||
</ListItem>
|
||||
<ListItem button onClick={this.handleClick}>
|
||||
<ListItemIcon>
|
||||
<SlideshowIcon />
|
||||
|
|
@ -189,6 +195,7 @@ class ResponsiveDrawer extends React.Component {
|
|||
{this.state.key === 'Report' && <Report />}
|
||||
{this.state.key === 'Map' && <ViewMap />}
|
||||
{this.state.key === 'List' && <SightingList />}
|
||||
{this.state.key === 'About' && <Info />}
|
||||
{this.state.key === 'Easy-Quiz' && <Quiz difficulty='Easy'/>}
|
||||
{this.state.key === 'Medium-Quiz' && <Quiz difficulty='Medium'/>}
|
||||
{this.state.key === 'Hard-Quiz' && <Quiz difficulty='Hard'/>}
|
||||
|
|
|
|||
|
|
@ -239,33 +239,33 @@ class QuizGame extends React.Component {
|
|||
* @param {*} difficulty The difficulty setting passed in.
|
||||
*/
|
||||
pickDifficulty = difficulty => {
|
||||
let level
|
||||
let level;
|
||||
|
||||
switch (difficulty) {
|
||||
case 'Easy':
|
||||
this.easy.questions = this.shuffleArray(this.easy.questions)
|
||||
level = this.easy
|
||||
break
|
||||
this.easy.questions = this.shuffleArray(this.easy.questions);
|
||||
level = this.easy;
|
||||
break;
|
||||
case 'Medium':
|
||||
this.medium.questions = this.shuffleArray(this.medium.questions)
|
||||
level = this.medium
|
||||
break
|
||||
this.medium.questions = this.shuffleArray(this.medium.questions);
|
||||
level = this.medium;
|
||||
break;
|
||||
case 'Hard':
|
||||
this.hard.questions = this.shuffleArray(this.hard.questions)
|
||||
level = this.hard
|
||||
break
|
||||
this.hard.questions = this.shuffleArray(this.hard.questions);
|
||||
level = this.hard;
|
||||
break;
|
||||
default:
|
||||
break
|
||||
break;
|
||||
}
|
||||
|
||||
return level
|
||||
return level;
|
||||
}
|
||||
|
||||
// The state of the component.
|
||||
state = {
|
||||
difficulty: this.pickDifficulty(this.props.difficulty),
|
||||
key: Math.random()
|
||||
}
|
||||
};
|
||||
|
||||
// Renders the quiz component.
|
||||
render() {
|
||||
|
|
|
|||
|
|
@ -11,6 +11,8 @@ import CloseIcon from '@material-ui/icons/Close';
|
|||
import Button from '@material-ui/core/Button';
|
||||
import firebase from '../firebase.js';
|
||||
import GoogleMap from '../components/ReportMap';
|
||||
import Modal from '@material-ui/core/Modal';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
|
||||
/**
|
||||
* Styles that the different
|
||||
|
|
@ -18,39 +20,46 @@ import GoogleMap from '../components/ReportMap';
|
|||
* 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,
|
||||
width: '90%'
|
||||
},
|
||||
button: {
|
||||
marginLeft: theme.spacing.unit * 2,
|
||||
marginRight: theme.spacing.unit,
|
||||
marginTop: theme.spacing.unit * 2,
|
||||
},
|
||||
dense: {
|
||||
marginTop: 30,
|
||||
},
|
||||
close: {
|
||||
padding: theme.spacing.unit / 2,
|
||||
},
|
||||
icon: {
|
||||
fontSize: 20,
|
||||
marginRight: theme.spacing.unit,
|
||||
},
|
||||
message: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
},
|
||||
menu: {
|
||||
width: 200,
|
||||
},
|
||||
container: {
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap'
|
||||
},
|
||||
textField: {
|
||||
marginLeft: theme.spacing.unit * 2,
|
||||
marginRight: theme.spacing.unit,
|
||||
marginTop: theme.spacing.unit * 2,
|
||||
flexBasis: 280,
|
||||
width: '90%'
|
||||
},
|
||||
button: {
|
||||
marginLeft: theme.spacing.unit * 2,
|
||||
marginRight: theme.spacing.unit,
|
||||
marginTop: theme.spacing.unit * 2,
|
||||
},
|
||||
dense: {
|
||||
marginTop: 30,
|
||||
},
|
||||
close: {
|
||||
padding: theme.spacing.unit / 2,
|
||||
},
|
||||
icon: {
|
||||
fontSize: 20,
|
||||
marginRight: theme.spacing.unit,
|
||||
},
|
||||
message: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
},
|
||||
menu: {
|
||||
width: 200,
|
||||
},
|
||||
paper: {
|
||||
position: 'absolute',
|
||||
width: theme.spacing.unit * 50,
|
||||
backgroundColor: theme.palette.background.paper,
|
||||
boxShadow: theme.shadows[5],
|
||||
padding: theme.spacing.unit * 4,
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
|
|
@ -59,30 +68,30 @@ const styles = theme => ({
|
|||
* 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',
|
||||
},
|
||||
{
|
||||
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',
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
|
|
@ -91,54 +100,54 @@ const sightingTypes = [
|
|||
* what is stored in the database.
|
||||
*/
|
||||
const monthTypes = [
|
||||
{
|
||||
value: '01',
|
||||
label: 'January',
|
||||
},
|
||||
{
|
||||
value: '02',
|
||||
label: 'February',
|
||||
},
|
||||
{
|
||||
value: '03',
|
||||
label: 'March',
|
||||
},
|
||||
{
|
||||
value: '04',
|
||||
label: 'April',
|
||||
},
|
||||
{
|
||||
value: '05',
|
||||
label: 'May',
|
||||
},
|
||||
{
|
||||
value: '06',
|
||||
label: 'June',
|
||||
},
|
||||
{
|
||||
value: '07',
|
||||
label: 'July',
|
||||
},
|
||||
{
|
||||
value: '08',
|
||||
label: 'August',
|
||||
},
|
||||
{
|
||||
value: '09',
|
||||
label: 'September',
|
||||
},
|
||||
{
|
||||
value: '10',
|
||||
label: 'October',
|
||||
},
|
||||
{
|
||||
value: '11',
|
||||
label: 'November',
|
||||
},
|
||||
{
|
||||
value: '12',
|
||||
label: 'December',
|
||||
},
|
||||
{
|
||||
value: '01',
|
||||
label: 'January',
|
||||
},
|
||||
{
|
||||
value: '02',
|
||||
label: 'February',
|
||||
},
|
||||
{
|
||||
value: '03',
|
||||
label: 'March',
|
||||
},
|
||||
{
|
||||
value: '04',
|
||||
label: 'April',
|
||||
},
|
||||
{
|
||||
value: '05',
|
||||
label: 'May',
|
||||
},
|
||||
{
|
||||
value: '06',
|
||||
label: 'June',
|
||||
},
|
||||
{
|
||||
value: '07',
|
||||
label: 'July',
|
||||
},
|
||||
{
|
||||
value: '08',
|
||||
label: 'August',
|
||||
},
|
||||
{
|
||||
value: '09',
|
||||
label: 'September',
|
||||
},
|
||||
{
|
||||
value: '10',
|
||||
label: 'October',
|
||||
},
|
||||
{
|
||||
value: '11',
|
||||
label: 'November',
|
||||
},
|
||||
{
|
||||
value: '12',
|
||||
label: 'December',
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
|
|
@ -147,26 +156,26 @@ const monthTypes = [
|
|||
* 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',
|
||||
},
|
||||
{
|
||||
value: 'unknown',
|
||||
label: 'Unknown',
|
||||
},
|
||||
{
|
||||
value: 'morning',
|
||||
label: 'Morning',
|
||||
},
|
||||
{
|
||||
value: 'midday',
|
||||
label: 'Midday',
|
||||
},
|
||||
{
|
||||
value: 'evening',
|
||||
label: 'Evening',
|
||||
},
|
||||
{
|
||||
value: 'night',
|
||||
label: 'Night',
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
|
|
@ -175,349 +184,379 @@ const timeTypes = [
|
|||
* 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',
|
||||
},
|
||||
{
|
||||
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',
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
* 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);
|
||||
}
|
||||
|
||||
/**
|
||||
* Function for formatting the
|
||||
* year as a string that
|
||||
* Material UI can use.
|
||||
* @param {*} date, Date passed in.
|
||||
*/
|
||||
getYear = date => {
|
||||
var d = new Date(date),
|
||||
year = d.getFullYear();
|
||||
|
||||
return year;
|
||||
}
|
||||
|
||||
/**
|
||||
* Function for formatting the
|
||||
* month as a string that
|
||||
* Material UI can use.
|
||||
* @param {*} date, Date passed in.
|
||||
*/
|
||||
getMonth = date => {
|
||||
var d = new Date(date),
|
||||
month = d.getMonth() + 1;
|
||||
|
||||
month = month.toString();
|
||||
|
||||
if (month.length === 1) {
|
||||
month = "0" + month;
|
||||
}
|
||||
|
||||
return month;
|
||||
}
|
||||
|
||||
/**
|
||||
* State of form components.
|
||||
*/
|
||||
state = {
|
||||
month: this.getMonth(new Date()),
|
||||
year: this.getYear(new Date()),
|
||||
time: 'unknown',
|
||||
type: 'visual',
|
||||
confidence: '1',
|
||||
desc: '',
|
||||
lat: '',
|
||||
lng: '',
|
||||
open: false
|
||||
};
|
||||
|
||||
/**
|
||||
* Handles state change in form
|
||||
* components.
|
||||
*/
|
||||
handleChange = name => event => {
|
||||
this.setState({
|
||||
[name]: event.target.value,
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Handles closing the toast.
|
||||
*/
|
||||
handleClose = (event, reason) => {
|
||||
if (reason === 'clickaway') {
|
||||
return;
|
||||
/**
|
||||
* Component contructor. Currently
|
||||
* only used to bind event
|
||||
* handlers.
|
||||
*/
|
||||
constructor() {
|
||||
super();
|
||||
this.handleSubmit = this.handleSubmit.bind(this);
|
||||
}
|
||||
|
||||
this.setState({ open: false });
|
||||
};
|
||||
|
||||
/*
|
||||
* Get the coordinates
|
||||
*
|
||||
*/
|
||||
getCoordinates = (lat, lng) => {
|
||||
let latitude = lat;
|
||||
let longitude = lng;
|
||||
|
||||
this.setState({
|
||||
lat: latitude,
|
||||
lng: longitude
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 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.year + '-' + this.state.month,
|
||||
time: this.state.time,
|
||||
desc: this.state.desc,
|
||||
lat: this.state.lat,
|
||||
lng: this.state.lng
|
||||
}
|
||||
sightingsRef.push(sighting);
|
||||
this.setState({
|
||||
year: this.getYear(new Date()),
|
||||
month: this.getMonth(new Date()),
|
||||
time: 'unknown',
|
||||
type: 'visual',
|
||||
confidence: '1',
|
||||
desc: '',
|
||||
lat: '',
|
||||
lng: '',
|
||||
open: true
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* The render method for this component.
|
||||
*/
|
||||
render() {
|
||||
const { classes } = this.props;
|
||||
|
||||
/**
|
||||
* The actual form.
|
||||
* Function for formatting the
|
||||
* year as a string that
|
||||
* Material UI can use.
|
||||
* @param {*} date, Date passed in.
|
||||
*/
|
||||
getYear = date => {
|
||||
var d = new Date(date),
|
||||
year = d.getFullYear();
|
||||
|
||||
return year;
|
||||
}
|
||||
|
||||
/**
|
||||
* Function for formatting the
|
||||
* month as a string that
|
||||
* Material UI can use.
|
||||
* @param {*} date, Date passed in.
|
||||
*/
|
||||
getMonth = date => {
|
||||
var d = new Date(date),
|
||||
month = d.getMonth() + 1;
|
||||
|
||||
month = month.toString();
|
||||
|
||||
if (month.length === 1) {
|
||||
month = "0" + month;
|
||||
}
|
||||
|
||||
return month;
|
||||
}
|
||||
|
||||
/**
|
||||
* State of form components.
|
||||
*/
|
||||
return (
|
||||
<Fragment>
|
||||
<form className={classes.container} autoComplete="off" onSubmit={this.handleSubmit}>
|
||||
<Grid container>
|
||||
<Grid item xs={12} md={6}>
|
||||
<Grid container spacing={8}>
|
||||
<Grid item xs={12}>
|
||||
<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>
|
||||
state = {
|
||||
month: this.getMonth(new Date()),
|
||||
year: this.getYear(new Date()),
|
||||
time: 'unknown',
|
||||
type: 'visual',
|
||||
confidence: '1',
|
||||
desc: '',
|
||||
lat: '',
|
||||
lng: '',
|
||||
open: false,
|
||||
openModal: false,
|
||||
hasModalOpened: false
|
||||
};
|
||||
|
||||
<Grid item xs={12}>
|
||||
<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="I am confident of my marten sighting"
|
||||
>
|
||||
{confidenceLevels.map(option => (
|
||||
<MenuItem key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</MenuItem>
|
||||
))}
|
||||
</TextField>
|
||||
</Grid>
|
||||
handleModalOpen = () => !this.state.hasModalOpened ? this.setState({ openModal: true, hasModalOpened: true }) : null;
|
||||
|
||||
<Grid item xs={12}>
|
||||
<TextField
|
||||
id="sighting-time"
|
||||
select
|
||||
required
|
||||
label="Sighting time"
|
||||
name="sighting-time"
|
||||
className={classes.textField}
|
||||
value={this.state.time}
|
||||
onChange={this.handleChange('time')}
|
||||
SelectProps={{
|
||||
MenuProps: {
|
||||
className: classes.menu,
|
||||
},
|
||||
}}
|
||||
>
|
||||
{timeTypes.map(option => (
|
||||
<MenuItem key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</MenuItem>
|
||||
))}
|
||||
</TextField>
|
||||
</Grid>
|
||||
handleModalClose = () => {
|
||||
this.setState({ openModal: false });
|
||||
};
|
||||
|
||||
<Grid item xs={12}>
|
||||
<TextField
|
||||
id="sighting-month"
|
||||
select
|
||||
required
|
||||
label="Sighting month"
|
||||
name="sighting-month"
|
||||
className={classes.textField}
|
||||
value={this.state.month}
|
||||
onChange={this.handleChange('month')}
|
||||
SelectProps={{
|
||||
MenuProps: {
|
||||
className: classes.menu,
|
||||
},
|
||||
}}
|
||||
>
|
||||
{monthTypes.map(option => (
|
||||
<MenuItem key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</MenuItem>
|
||||
))}
|
||||
</TextField>
|
||||
</Grid>
|
||||
getModalStyle = () => {
|
||||
return {
|
||||
top: `25%`,
|
||||
left: `75%`,
|
||||
transform: `translate(-25%, -75%)`,
|
||||
};
|
||||
}
|
||||
|
||||
<Grid item xs={12}>
|
||||
<TextField
|
||||
id="sighting-year"
|
||||
required
|
||||
label="Sighting year"
|
||||
name="sighting-year"
|
||||
value={this.state.year}
|
||||
type="number"
|
||||
className={classes.textField}
|
||||
onChange={this.handleChange('year')}
|
||||
InputLabelProps={{
|
||||
shrink: true,
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
/**
|
||||
* Handles state change in form
|
||||
* components.
|
||||
*/
|
||||
handleChange = name => event => {
|
||||
this.setState({
|
||||
[name]: event.target.value,
|
||||
});
|
||||
};
|
||||
|
||||
<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>
|
||||
/**
|
||||
* Handles closing the toast.
|
||||
*/
|
||||
handleClose = (event, reason) => {
|
||||
if (reason === 'clickaway') {
|
||||
return;
|
||||
}
|
||||
|
||||
<Grid item xs={12}>
|
||||
<Button variant="contained" type="submit" color="primary" className={classes.button}>
|
||||
Submit
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={6}>
|
||||
<GoogleMap onClick={this.getCoordinates} />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</form>
|
||||
<Snackbar
|
||||
anchorOrigin={{
|
||||
vertical: 'bottom',
|
||||
horizontal: 'left',
|
||||
}}
|
||||
open={this.state.open}
|
||||
autoHideDuration={6000}
|
||||
onClose={this.handleClose}
|
||||
ContentProps={{
|
||||
'aria-describedby': 'message-id',
|
||||
}}
|
||||
message={<span id="message-id" className={classes.message}><CheckCircleIcon className={classes.icon} />Report received.</span>}
|
||||
action={[
|
||||
<IconButton
|
||||
key="close"
|
||||
aria-label="Close"
|
||||
color="inherit"
|
||||
className={classes.close}
|
||||
onClick={this.handleClose}
|
||||
>
|
||||
<CloseIcon />
|
||||
</IconButton>,
|
||||
]}
|
||||
/>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
this.setState({ open: false });
|
||||
};
|
||||
|
||||
/*
|
||||
* Get the coordinates
|
||||
*
|
||||
*/
|
||||
getCoordinates = (lat, lng) => {
|
||||
let latitude = lat;
|
||||
let longitude = lng;
|
||||
|
||||
this.setState({
|
||||
lat: latitude,
|
||||
lng: longitude
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 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.year + '-' + this.state.month,
|
||||
time: this.state.time,
|
||||
desc: this.state.desc,
|
||||
lat: this.state.lat,
|
||||
lng: this.state.lng
|
||||
}
|
||||
sightingsRef.push(sighting);
|
||||
this.setState({
|
||||
year: this.getYear(new Date()),
|
||||
month: this.getMonth(new Date()),
|
||||
time: 'unknown',
|
||||
type: 'visual',
|
||||
confidence: '1',
|
||||
desc: '',
|
||||
lat: '',
|
||||
lng: '',
|
||||
open: true
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* The render method for this component.
|
||||
*/
|
||||
render() {
|
||||
const { classes } = this.props;
|
||||
|
||||
/**
|
||||
* The actual form.
|
||||
*/
|
||||
return (
|
||||
<Fragment>
|
||||
<form className={classes.container} autoComplete="off" onSubmit={this.handleSubmit}>
|
||||
<Grid container>
|
||||
<Grid item xs={12} md={6}>
|
||||
<Grid container spacing={8}>
|
||||
<Grid item xs={12}>
|
||||
<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}>
|
||||
<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="I am confident of my marten sighting"
|
||||
>
|
||||
{confidenceLevels.map(option => (
|
||||
<MenuItem key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</MenuItem>
|
||||
))}
|
||||
</TextField>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12}>
|
||||
<TextField
|
||||
id="sighting-time"
|
||||
select
|
||||
required
|
||||
label="Sighting time"
|
||||
name="sighting-time"
|
||||
className={classes.textField}
|
||||
value={this.state.time}
|
||||
onChange={this.handleChange('time')}
|
||||
SelectProps={{
|
||||
MenuProps: {
|
||||
className: classes.menu,
|
||||
},
|
||||
}}
|
||||
>
|
||||
{timeTypes.map(option => (
|
||||
<MenuItem key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</MenuItem>
|
||||
))}
|
||||
</TextField>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12}>
|
||||
<TextField
|
||||
id="sighting-month"
|
||||
select
|
||||
required
|
||||
label="Sighting month"
|
||||
name="sighting-month"
|
||||
className={classes.textField}
|
||||
value={this.state.month}
|
||||
onChange={this.handleChange('month')}
|
||||
SelectProps={{
|
||||
MenuProps: {
|
||||
className: classes.menu,
|
||||
},
|
||||
}}
|
||||
>
|
||||
{monthTypes.map(option => (
|
||||
<MenuItem key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</MenuItem>
|
||||
))}
|
||||
</TextField>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12}>
|
||||
<TextField
|
||||
id="sighting-year"
|
||||
required
|
||||
label="Sighting year"
|
||||
name="sighting-year"
|
||||
value={this.state.year}
|
||||
type="number"
|
||||
className={classes.textField}
|
||||
onChange={this.handleChange('year')}
|
||||
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>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={6} onMouseEnter={this.handleModalOpen}>
|
||||
<GoogleMap onClick={this.getCoordinates}/>
|
||||
<Modal
|
||||
aria-labelledby="simple-modal-title"
|
||||
aria-describedby="simple-modal-description"
|
||||
open={this.state.openModal}
|
||||
onClose={this.handleModalClose}
|
||||
>
|
||||
<div style={this.getModalStyle()} className={classes.paper}>
|
||||
<Typography variant="title" id="modal-title">
|
||||
Need a little help?
|
||||
</Typography>
|
||||
<Typography variant="subheading" id="simple-modal-description">
|
||||
Click on the map to drop a pin!
|
||||
</Typography>
|
||||
</div>
|
||||
</Modal>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</form>
|
||||
<Snackbar
|
||||
anchorOrigin={{
|
||||
vertical: 'bottom',
|
||||
horizontal: 'left',
|
||||
}}
|
||||
open={this.state.open}
|
||||
autoHideDuration={6000}
|
||||
onClose={this.handleClose}
|
||||
ContentProps={{
|
||||
'aria-describedby': 'message-id',
|
||||
}}
|
||||
message={<span id="message-id" className={classes.message}><CheckCircleIcon className={classes.icon} />Report received.</span>}
|
||||
action={[
|
||||
<IconButton
|
||||
key="close"
|
||||
aria-label="Close"
|
||||
color="inherit"
|
||||
className={classes.close}
|
||||
onClick={this.handleClose}
|
||||
>
|
||||
<CloseIcon />
|
||||
</IconButton>,
|
||||
]}
|
||||
/>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReportForm.propTypes = {
|
||||
classes: PropTypes.object.isRequired,
|
||||
classes: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
export default withStyles(styles)(ReportForm);
|
||||
|
|
@ -9,7 +9,7 @@ const API_KEY = 'AIzaSyAZ_0J01bA6wCbIPK4UBq2RUBC-hIqG4mM';
|
|||
const mapStyles = {
|
||||
width: '100%',
|
||||
height: '100%'
|
||||
}
|
||||
};
|
||||
|
||||
export class MapContainer extends Component {
|
||||
|
||||
|
|
@ -18,22 +18,22 @@ export class MapContainer extends Component {
|
|||
if (navigator.geolocation) {
|
||||
navigator.geolocation.getCurrentPosition((position) => {
|
||||
this.setState({
|
||||
myLatLng: {
|
||||
lat: position.coords.latitude,
|
||||
lng: position.coords.longitude
|
||||
}
|
||||
myLatLng: {
|
||||
lat: position.coords.latitude,
|
||||
lng: position.coords.longitude
|
||||
}
|
||||
}
|
||||
);
|
||||
})
|
||||
} else {
|
||||
// If browser doesn't support geolocation or if user does not allow it,
|
||||
// center map on Grand Rapids, Michigan
|
||||
this.setState({
|
||||
myLatLng: {
|
||||
lat: 42.9634,
|
||||
lng: 85.6681
|
||||
}
|
||||
myLatLng: {
|
||||
lat: 42.9634,
|
||||
lng: 85.6681
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -52,7 +52,7 @@ export class MapContainer extends Component {
|
|||
showingInfoWindow: true
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// When the user clicks on the map, if a info window is visible then close it
|
||||
// and 'unactive' that marker
|
||||
onMapClick = (props, map, e) => {
|
||||
|
|
@ -68,13 +68,13 @@ export class MapContainer extends Component {
|
|||
lat: e.latLng.lat(),
|
||||
lng: e.latLng.lng()
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
let lat = e.latLng.lat();
|
||||
let lng = e.latLng.lng();
|
||||
let lng = e.latLng.lng();
|
||||
|
||||
if (this.props.onClick) {
|
||||
this.props.onClick(lat,lng);
|
||||
this.props.onClick(lat, lng);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -98,36 +98,36 @@ export class MapContainer extends Component {
|
|||
|
||||
return (
|
||||
// Render the Google Map, Marker, and InfoWindow components
|
||||
<div className = "report-google-map-container">
|
||||
<div className="report-google-map-container">
|
||||
<Map
|
||||
style = { mapStyles }
|
||||
google = { this.props.google }
|
||||
initialCenter = { this.state.myLatLng }
|
||||
center = { this.state.myLatLng }
|
||||
defaultZoom = { 15 }
|
||||
onClick = { this.onMapClick } >
|
||||
style={mapStyles}
|
||||
google={this.props.google}
|
||||
initialCenter={this.state.myLatLng}
|
||||
center={this.state.myLatLng}
|
||||
defaultZoom={15}
|
||||
onClick={this.onMapClick} >
|
||||
|
||||
<Marker
|
||||
position = { this.state.markerLatLng }
|
||||
<Marker
|
||||
position={this.state.markerLatLng}
|
||||
/>
|
||||
|
||||
<Marker
|
||||
position = { this.state.myLatLng }
|
||||
onClick = { this.onMarkerClick }
|
||||
title = { 'You are here' }
|
||||
name = { '' }
|
||||
<Marker
|
||||
position={this.state.myLatLng}
|
||||
onClick={this.onMarkerClick}
|
||||
title={'You are here'}
|
||||
name={''}
|
||||
/>
|
||||
|
||||
<InfoWindow
|
||||
marker = { this.state.activeMarker }
|
||||
visible = { this.state.showingInfoWindow } >
|
||||
marker={this.state.activeMarker}
|
||||
visible={this.state.showingInfoWindow} >
|
||||
|
||||
<Fragment>
|
||||
<Typography variant = "display1" gutterBottom>
|
||||
{ this.state.selectedPlace.title }
|
||||
<Typography variant="display1" gutterBottom>
|
||||
{this.state.selectedPlace.title}
|
||||
</Typography>
|
||||
<Typography variant = "subheading" gutterBottom>
|
||||
{ this.state.selectedPlace.name }
|
||||
<Typography variant="subheading" gutterBottom>
|
||||
{this.state.selectedPlace.name}
|
||||
</Typography>
|
||||
</Fragment>
|
||||
</InfoWindow>
|
||||
|
|
@ -138,6 +138,4 @@ export class MapContainer extends Component {
|
|||
}
|
||||
|
||||
// Send the Google Map API Key with the MapContainer component
|
||||
export default GoogleApiWrapper({
|
||||
apiKey: (API_KEY)
|
||||
})(MapContainer)
|
||||
export default GoogleApiWrapper({ apiKey: (API_KEY) })(MapContainer);
|
||||
|
|
@ -1,24 +1,154 @@
|
|||
import React, { Component, Fragment } from 'react';
|
||||
import Disqus from 'disqus-react';
|
||||
import moment from 'moment';
|
||||
import SightingDetailMap from './SightingDetailMap';
|
||||
|
||||
/**
|
||||
* 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 = 'https-marten-application-netlify-com';
|
||||
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}/>
|
||||
<SightingDetailMap lat={this.props.detail.lat} lng={this.props.detail.lng} />
|
||||
<div className='sighting-details-content'>
|
||||
<p>{`Confidence: ${this.props.detail.confidence}`}</p>
|
||||
<p>{`When: ${this.props.detail.date}, ${this.props.detail.time}`}</p>
|
||||
<p>{`Where: ${this.props.detail.lat} degrees N, and ${this.props.detail.lng} degrees E`}</p>
|
||||
<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} />
|
||||
|
|
@ -27,4 +157,4 @@ class SightingDetail extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
export default SightingDetail;
|
||||
export default SightingDetail;
|
||||
|
|
@ -8,23 +8,23 @@ const API_KEY = 'AIzaSyAZ_0J01bA6wCbIPK4UBq2RUBC-hIqG4mM';
|
|||
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">
|
||||
<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 }>
|
||||
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 }}
|
||||
<Marker
|
||||
position={{ lat: this.props.lat, lng: this.props.lng }}
|
||||
/>
|
||||
</Map>
|
||||
</div>
|
||||
|
|
@ -33,6 +33,4 @@ export class MapContainer extends Component {
|
|||
}
|
||||
|
||||
// Send the Google Map API Key with the MapContainer component
|
||||
export default GoogleApiWrapper({
|
||||
apiKey: (API_KEY)
|
||||
})(MapContainer)
|
||||
export default GoogleApiWrapper({ apiKey: (API_KEY) })(MapContainer);
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import React, { Component, Fragment } from 'react';
|
||||
import { Map, InfoWindow, Marker, GoogleApiWrapper } from 'google-maps-react';
|
||||
import moment from 'moment'
|
||||
import moment from 'moment';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import firebase from '../firebase.js';
|
||||
|
||||
|
|
@ -11,7 +11,7 @@ const API_KEY = 'AIzaSyAZ_0J01bA6wCbIPK4UBq2RUBC-hIqG4mM';
|
|||
const mapStyles = {
|
||||
width: '100%',
|
||||
height: '100%'
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Types of sightings. Label is what is
|
||||
|
|
@ -81,23 +81,23 @@ const timeTypes = [
|
|||
const confidenceLevels = [
|
||||
{
|
||||
value: '1',
|
||||
label: '1 - Strongly unconfident',
|
||||
label: '1 - Strongly disagree',
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: '2 - Unconfident',
|
||||
label: '2 - Disagree',
|
||||
},
|
||||
{
|
||||
value: '3',
|
||||
label: '3 - Somewhat confident',
|
||||
label: '3 - Neutral',
|
||||
},
|
||||
{
|
||||
value: '4',
|
||||
label: '4 - Confident',
|
||||
label: '4 - Agree',
|
||||
},
|
||||
{
|
||||
value: '5',
|
||||
label: '5 - Very confident',
|
||||
label: '5 - Strongly agree',
|
||||
},
|
||||
];
|
||||
|
||||
|
|
@ -112,9 +112,8 @@ export class MapContainer extends Component {
|
|||
lat: position.coords.latitude,
|
||||
lng: position.coords.longitude
|
||||
}
|
||||
}
|
||||
);
|
||||
})
|
||||
});
|
||||
});
|
||||
} else {
|
||||
// If browser doesn't support geolocation or if user does not allow it,
|
||||
// center map on Grand Rapids, Michigan
|
||||
|
|
@ -123,8 +122,7 @@ export class MapContainer extends Component {
|
|||
lat: 42.9634,
|
||||
lng: 85.6681
|
||||
}
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -209,6 +207,42 @@ export class MapContainer extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Determines marker icon based on the
|
||||
* sighting type.
|
||||
*/
|
||||
sightingIcon = (type) => {
|
||||
let pinIcon;
|
||||
|
||||
switch(type) {
|
||||
case 'visual':
|
||||
pinIcon = '/mapicons/marten-icon.png';
|
||||
break;
|
||||
case 'roadkill':
|
||||
pinIcon = '/mapicons/tire-icon.png';
|
||||
break;
|
||||
case 'viewed_tracks':
|
||||
pinIcon = '/mapicons/paws.png';
|
||||
break;
|
||||
case 'trapped':
|
||||
pinIcon = '/mapicons/cage.png';
|
||||
break;
|
||||
case 'photo':
|
||||
pinIcon = '/mapicons/photo-icon.png';
|
||||
break;
|
||||
case 'other':
|
||||
pinIcon = '/mapicons/other-icon.png';
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
return pinIcon;
|
||||
}
|
||||
|
||||
/**
|
||||
* Formats date using Moment.js.
|
||||
*/
|
||||
formatDate = date => {
|
||||
return (moment(date, "YYYY-MM").format("MMMM YYYY").toString())
|
||||
}
|
||||
|
|
@ -224,9 +258,11 @@ export class MapContainer extends Component {
|
|||
activeMarker: {},
|
||||
selectedPlace: {},
|
||||
sightings: []
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const {google} = this.props;
|
||||
|
||||
return (
|
||||
// Render the Google Map, Marker, and InfoWindow components
|
||||
<div className="sighting-google-map-container">
|
||||
|
|
@ -235,9 +271,15 @@ export class MapContainer extends Component {
|
|||
google={this.props.google}
|
||||
initialCenter={this.state.myLatLng}
|
||||
center={this.state.myLatLng}
|
||||
<<<<<<< HEAD
|
||||
minZoom={6}
|
||||
zoom={6}
|
||||
onClick={this.onMapClick} >
|
||||
=======
|
||||
defaultZoom={15}
|
||||
onClick={this.onMapClick}
|
||||
>
|
||||
>>>>>>> 80a73145f79c96ee62e901f94528550ad8761cca
|
||||
|
||||
<Marker
|
||||
position={this.state.myLatLng}
|
||||
|
|
@ -246,16 +288,24 @@ export class MapContainer extends Component {
|
|||
/>
|
||||
|
||||
{this.state.sightings.map((sighting) => {
|
||||
|
||||
let pinIcon = this.sightingIcon(sighting.type)
|
||||
|
||||
return (
|
||||
<Marker
|
||||
key={sighting.id}
|
||||
position={{ lat: sighting.lat, lng: sighting.lng }}
|
||||
onClick={this.onMarkerClick}
|
||||
type={'Type: ' + this.getType(sighting.type)}
|
||||
confidence={<Fragment><b>Confidence:</b> {this.getConfidence(sighting.confidence)}</Fragment>}
|
||||
date={<Fragment><b>Date:</b> {this.formatDate(sighting.date)}</Fragment>}
|
||||
time={<Fragment><b>Time:</b> {this.getTime(sighting.time)}</Fragment>}
|
||||
confidence={<Fragment><b>I am confident of my sighting:</b> {this.getConfidence(sighting.confidence)}</Fragment>}
|
||||
description={<Fragment><b>Description:</b> {sighting.desc}</Fragment>}
|
||||
icon={{
|
||||
url: pinIcon,
|
||||
anchor: new google.maps.Point(32,32),
|
||||
scaledSize: new google.maps.Size(32,32)
|
||||
}}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
|
|
@ -268,15 +318,15 @@ export class MapContainer extends Component {
|
|||
<Typography variant="display1" gutterBottom>
|
||||
{this.state.selectedPlace.type}
|
||||
</Typography>
|
||||
<Typography variant="subheading" gutterBottom>
|
||||
{this.state.selectedPlace.confidence}
|
||||
</Typography>
|
||||
<Typography variant="subheading" gutterBottom>
|
||||
{this.state.selectedPlace.date}
|
||||
</Typography>
|
||||
<Typography variant="subheading" gutterBottom>
|
||||
{this.state.selectedPlace.time}
|
||||
</Typography>
|
||||
<Typography variant="subheading" gutterBottom>
|
||||
{this.state.selectedPlace.confidence}
|
||||
</Typography>
|
||||
<Typography variant="subheading" gutterBottom>
|
||||
{this.state.selectedPlace.description}
|
||||
</Typography>
|
||||
|
|
@ -289,6 +339,4 @@ export class MapContainer extends Component {
|
|||
}
|
||||
|
||||
// Send the Google Map API Key with the MapContainer component
|
||||
export default GoogleApiWrapper({
|
||||
apiKey: (API_KEY)
|
||||
})(MapContainer)
|
||||
export default GoogleApiWrapper({ apiKey: (API_KEY) })(MapContainer);
|
||||
|
|
@ -16,7 +16,7 @@ class ViewSightings extends Component {
|
|||
let newState = [];
|
||||
|
||||
for (let sighting in sightings) {
|
||||
newState.push({
|
||||
newState.unshift({
|
||||
id: sighting,
|
||||
lat: sightings[sighting].lat,
|
||||
lng: sightings[sighting].lng,
|
||||
|
|
@ -62,7 +62,7 @@ class ViewSightings extends Component {
|
|||
time: null
|
||||
},
|
||||
clicked: false
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
|
|
@ -77,7 +77,7 @@ class ViewSightings extends Component {
|
|||
<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>
|
||||
|
|
|
|||
|
|
@ -6,4 +6,6 @@ import registerServiceWorker from './registerServiceWorker';
|
|||
|
||||
ReactDOM.render(<App/>, document.getElementById('root'));
|
||||
|
||||
document.title = "Marten Tracker | Home";
|
||||
|
||||
registerServiceWorker();
|
||||
|
|
|
|||
|
|
@ -1,15 +1,30 @@
|
|||
import React, { Component } from 'react';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import FlameLinkComponentCreations from '../components/FlameLinkComponentCreations';
|
||||
import flamelinkApp from '../flamelink';
|
||||
|
||||
class Home extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
global.schemaName = 'martenHome';
|
||||
|
||||
this.state = {
|
||||
schemaDetails: '',
|
||||
}
|
||||
|
||||
flamelinkApp.schemas.getFields(global.schemaName, { fields: ['title', 'key', 'type', 'gridColumns', 'description', 'options'] })
|
||||
.then(result => this.setState({
|
||||
schemaDetails: result
|
||||
}))
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
document.title = 'Marten Tracker | Home';
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<Typography variant='display1' align='center' gutterBottom>
|
||||
Home
|
||||
</Typography>
|
||||
</div>
|
||||
<FlameLinkComponentCreations schemaDetails={this.state.schemaDetails} />
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,18 +1,35 @@
|
|||
import React, { Component } from 'react';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import Flamelink from '../components/Flamelink';
|
||||
import React, { Component, Fragment } from 'react';
|
||||
import FlameLinkComponentCreations from '../components/FlameLinkComponentCreations';
|
||||
import flamelinkApp from '../flamelink.js';
|
||||
|
||||
class Info extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
global.schemaName = 'martenSchemaDemo';
|
||||
|
||||
this.state = {
|
||||
schemaDetails: '',
|
||||
}
|
||||
|
||||
flamelinkApp.schemas.getFields(global.schemaName, { fields: ['title', 'key', 'type', 'gridColumns', 'description', 'options'] })
|
||||
.then(result => this.setState({
|
||||
schemaDetails: result
|
||||
}))
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
document.title = 'Marten Tracker | Info';
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Flamelink flamelinkApp={this.props.flamelinkApp}/>
|
||||
<Typography variant='display1' align='center' gutterBottom>
|
||||
Info
|
||||
</Typography>
|
||||
<p id="flamelinkDemo"></p>
|
||||
|
||||
<Fragment>
|
||||
<FlameLinkComponentCreations schemaDetails={this.state.schemaDetails} />
|
||||
</Fragment>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,10 @@ import QuizGame from '../components/QuizGame';
|
|||
|
||||
|
||||
class QuizPage extends Component {
|
||||
componentDidMount() {
|
||||
document.title = 'Marten Tracker | Quiz';
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<QuizGame difficulty={this.props.difficulty}/>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,10 @@ import React, { Component } from 'react';
|
|||
import ReportForm from '../components/ReportForm';
|
||||
|
||||
class Report extends Component {
|
||||
componentDidMount() {
|
||||
document.title = 'Marten Tracker | Report';
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<ReportForm/>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,10 @@ import React, { Component } from 'react';
|
|||
import ViewSightings from '../components/ViewSightings.js';
|
||||
|
||||
class Sighting extends Component {
|
||||
componentDidMount() {
|
||||
document.title = 'Marten Tracker | List';
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<ViewSightings/>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,10 @@ import React, { Component } from 'react';
|
|||
import GoogleMap from '../components/SightingMap';
|
||||
|
||||
class Sighting extends Component {
|
||||
componentDidMount() {
|
||||
document.title = 'Marten Tracker | Map';
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className='sighting-map'>
|
||||
|
|
|
|||
Loading…
Reference in New Issue