diff --git a/package-lock.json b/package-lock.json index d358b66..885ea64 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3961,6 +3961,11 @@ "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.0.4.tgz", "integrity": "sha512-ZIzRpLJrOj7jjP2miAtgqIfmzbxa4ZOr5jJc601zklsfEx9oTzmmj2nVpIPRpNlRTIh8lc1kyViIY7BWSGNmKw==" }, + "detect-passive-events": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/detect-passive-events/-/detect-passive-events-1.0.4.tgz", + "integrity": "sha1-btR35uW863kHlzXc01d4nTf5qRo=" + }, "detect-port-alt": { "version": "1.1.6", "resolved": "https://registry.npmjs.org/detect-port-alt/-/detect-port-alt-1.1.6.tgz", @@ -4246,6 +4251,11 @@ "minimalistic-crypto-utils": "^1.0.0" } }, + "emailjs-com": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/emailjs-com/-/emailjs-com-2.3.2.tgz", + "integrity": "sha512-dI6vjLGHDNTOOY0vNx6HZm95ey1aKCtkdOPLC2UYkCgV8QSJCuMY/JlxjXD3BXOvu4X4qn+XCN3DTUz1OiewAg==" + }, "emoji-regex": { "version": "6.5.1", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-6.5.1.tgz", @@ -5651,7 +5661,7 @@ }, "core-js": { "version": "2.5.5", - "resolved": "http://registry.npmjs.org/core-js/-/core-js-2.5.5.tgz", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.5.tgz", "integrity": "sha1-sU3ek2xkDAV5prUMq8wTLdYSfjs=" }, "firebase": { @@ -9686,6 +9696,11 @@ "lodash._reinterpolate": "~3.0.0" } }, + "lodash.throttle": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz", + "integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=" + }, "lodash.uniq": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz", @@ -12550,6 +12565,18 @@ "resolved": "https://registry.npmjs.org/react-flow-types/-/react-flow-types-0.2.0-beta.6.tgz", "integrity": "sha512-I4f8oJFGxVJYrJLxG4sCPW7vWedNB8Eee1U2v+xBzRPlF7X5IBelqaDIKxBDLzDFb++AzpoU+uu1jFaKy1QssQ==" }, + "react-image-gallery": { + "version": "0.8.12", + "resolved": "https://registry.npmjs.org/react-image-gallery/-/react-image-gallery-0.8.12.tgz", + "integrity": "sha512-jkrsEhRZ3JPxFhLznrwPyAVy/n6HiM204tKBJ1W5z1a8QnWLVVi+j/UXsMETvks4rnSIkAQbW3WPHbrS19nNMQ==", + "requires": { + "lodash.debounce": "^4.0.8", + "lodash.throttle": "^4.1.1", + "prop-types": "^15.5.8", + "react-swipeable": "^4.2.2", + "resize-observer-polyfill": "^1.5.0" + } + }, "react-jss": { "version": "8.6.1", "resolved": "https://registry.npmjs.org/react-jss/-/react-jss-8.6.1.tgz", @@ -12695,6 +12722,15 @@ } } }, + "react-swipeable": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/react-swipeable/-/react-swipeable-4.3.0.tgz", + "integrity": "sha512-L21VMbcDvG+AOVF4ZIbQ8sICGIgiKB/plGKWBMw6dkxt5neS7x74ZlTbJ39U8slz798MZBv/uIoE9Vzgp3PODQ==", + "requires": { + "detect-passive-events": "^1.0.4", + "prop-types": "^15.5.8" + } + }, "react-transition-group": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.4.0.tgz", @@ -13277,6 +13313,11 @@ "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=" }, + "resize-observer-polyfill": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.0.tgz", + "integrity": "sha512-M2AelyJDVR/oLnToJLtuDJRBBWUGUvvGigj1411hXhAdyFWqMaqHp7TixW3FpiLuVaikIcR1QL+zqoJoZlOgpg==" + }, "resolve": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.6.0.tgz", diff --git a/package.json b/package.json index c98fd28..13674b8 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "@material-ui/icons": "^3.0.1", "ajv": "^6.0.0", "disqus-react": "^1.0.5", + "emailjs-com": "^2.3.2", "firebase": "^5.5.2", "firebase-admin": "^6.1.0", "flamelink": "^0.19.6", @@ -17,6 +18,7 @@ "moment": "^2.22.2", "react": "^16.5.1", "react-dom": "^16.5.1", + "react-image-gallery": "^0.8.12", "react-quiz-component": "0.2.0", "react-router": "^4.3.1", "react-router-dom": "^4.3.1", diff --git a/readme.md b/readme.md index f5db757..97519ac 100644 --- a/readme.md +++ b/readme.md @@ -1,25 +1,28 @@ # Marten Application ### Background -Given some recent research into the American marten, there is a need for a web application that is able to document marten sightings. Graduate research has produced a model that predicts habitat suitability for the northern Lower Peninsula, but a lack of anything besides anecdotal evidence makes testing the model difficult. This application would allow for "citizen science". This is the outsourcing of research efforts to the public. This would allow people to log marten sightings for research purposes. The project will be a web platform and certain groups including hunters, hunting club members, wildlife managers and state park personnel will be targeted for citizen science. This application will hopefully help bolster research efforts for the American marten. +Given recent research into the American marten, there was a need for a web application that is able to document marten sightings. Graduate research has produced a model that predicts habitat suitability for the northern Lower Peninsula, but a lack of anything besides anecdotal evidence makes testing the model difficult. This application allows for "citizen science". This is the outsourcing of research efforts to the public. This would allow people to log marten sightings for research purposes. The project is a public web application and certain groups including hunters, hunting club members, wildlife managers and state park personnel will be targeted for citizen science. This application will hopefully help bolster research efforts for the American marten. -The application will allow for users to post marten sightings. They can attach photos and make comments on said photos. They also can include the location where the sighting occurred and rank their confidence in the sighting. This will all be stored in some type of database that can be queried for research purposes. We also will integrate a map API to allow for users to see where marten sightings have occurred. +The application allows for users to post marten sightings. They can attach photos and make comments on said photos using Disqus. They also can include the location where the sighting occurred and rank their confidence in the sighting. This is all stored in Google Firebase. We additionally utilize Google Maps, which allows for users to see where marten sightings have occurred. A trail-cam quiz with multiple difficulty settings incentivizes participation in the application. There is also information concerning martens and photo galleries with pictures of them built using the Flamelink CMS. ### URL -[Marten Tracker](https://marten-application.netlify.com/ "Click here to see the application in action.") +[Marten Tracker](https://marten-tracker.netlify.com/ "Click here to see the application in action.") -### Intended Features +### Features * Ability to log marten sightings. -* Include type of sighting on marten sighting post. -* Attach photos to marten sighting post. +* Metadata on marten sighting posts. * A map per sighting post for location of marten sighting. -* Map for all marten sighting posts. -* Comments on photos. +* State-wide map for all marten sighting posts. +* Disqus threads on marten sighting posts. * Quiz game for learning more about martens. +* Information section on martens. +* Photo galleries of martens. ### Technologies * ReactJS * Firebase +* Material-UI * Google API * Netlify * Flamelink CMS +* EmailJS diff --git a/src/App.css b/src/App.css index b5b1e22..d1e1bd6 100644 --- a/src/App.css +++ b/src/App.css @@ -42,6 +42,11 @@ body { height: 300px !important; } +.contact-form { + max-width: 100%; + overflow: hidden; +} + @media (min-width: 960px) { .sighting-detail-google-map-container > div { width: calc(100% - 50% - 120px) !important; diff --git a/src/components/ContactForm.js b/src/components/ContactForm.js new file mode 100644 index 0000000..b009805 --- /dev/null +++ b/src/components/ContactForm.js @@ -0,0 +1,227 @@ +import React, { Fragment } from 'react'; +import PropTypes from 'prop-types'; +import Grid from '@material-ui/core/Grid'; +import emailjs from '../emailjs.js' +import { withStyles } from '@material-ui/core/styles'; +import TextField from '@material-ui/core/TextField'; +import CheckCircleIcon from '@material-ui/icons/CheckCircle'; +import Snackbar from '@material-ui/core/Snackbar'; +import IconButton from '@material-ui/core/IconButton'; +import CloseIcon from '@material-ui/icons/Close'; +import Button from '@material-ui/core/Button'; +import { Typography } from '@material-ui/core'; + +/** + * Styles that the different + * Material UI components pull + * in. Mostly used for spacing. + */ +const styles = theme => ({ + container: { + display: 'flex', + flexWrap: 'wrap' + }, + textField: { + marginLeft: theme.spacing.unit, + marginRight: theme.spacing.unit, + marginTop: theme.spacing.unit, + flexBasis: 280, + width: '90%' + }, + button: { + marginLeft: theme.spacing.unit, + marginRight: theme.spacing.unit, + marginTop: theme.spacing.unit, + }, + 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, + } +}); + +/** + * The form component. + */ +class ContactForm extends React.Component { + + /** + * State of form components. + */ + state = { + name: "", + email: "", + comments: "", + 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; + } + + this.setState({ open: false }); + }; + + /** + * Event listener for form. + * When the form is submitted, + * this function passes the + * data along to EmailJS. + */ + handleSubmit = e => { + e.preventDefault(); + + const templateParams = { + from_name: this.state.name, + from_email: this.state.email, + message_html: this.state.comments + }; + + emailjs.send('default_service', 'template_XaKOJGSf', templateParams); + + this.setState({ + name: "", + email: "", + comments: "", + open: true + }); + }; + + /** + * The render method for this component. + */ + render() { + const { classes } = this.props; + + /** + * The actual form. + */ + return ( + + + {
} + Send us an email! + +
+ + + + + + + + + + + + + + +
+ + Message sent.} + action={[ + + + , + ]} + /> + + ); + } +} + +ContactForm.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(ContactForm); diff --git a/src/components/FlameLinkCollection.js b/src/components/FlameLinkCollection.js new file mode 100644 index 0000000..ecb1b2b --- /dev/null +++ b/src/components/FlameLinkCollection.js @@ -0,0 +1,47 @@ +import React, { Component} from 'react'; +import flamelinkApp from '../flamelink.js'; +import FlameLinkCollectionComponentCreations from './FlameLinkCollectionComponentCreations'; + +class FlameLinkCollection extends Component { + constructor() { + super(); + + global.mediaID = ''; + + this.state = { + schemaContent: '', + } + + flamelinkApp.content.get(global.schemaName) + .then(result => this.setState({ + schemaContent: result + })) + } + + getCollectionContent(schemaData){ + var arr2 = []; + var collectionInfo = [schemaData, this.state.schemaContent]; + for (var val in this.state.schemaContent){ + arr2.push(val); + } + return arr2.map(this.getCollectionComponentInfo, collectionInfo); + } + + getCollectionComponentInfo(num){ + var arr3 = []; + for (var val in this[0]){ + arr3.push(val); + } + return + } + + render() { + return( +
+ {this.getCollectionContent(this.props.schemaData)} +
+ ); + } +} + +export default FlameLinkCollection; \ No newline at end of file diff --git a/src/components/FlameLinkCollectionComponentCreations.js b/src/components/FlameLinkCollectionComponentCreations.js new file mode 100644 index 0000000..1611c80 --- /dev/null +++ b/src/components/FlameLinkCollectionComponentCreations.js @@ -0,0 +1,25 @@ +import React, { Component} from 'react'; +import Grid from '@material-ui/core/Grid'; +import FlameLinkCollectionStructure from './FlameLinkCollectionStructure'; + +class FlameLinkCollectionComponentCreations extends Component { + + createCollectionEntries(schemaData, schemaContent, arr){ + var collectionInfo = [schemaData, schemaContent]; + return arr.map(this.createCollectionComponents, collectionInfo); + } + + createCollectionComponents(num){ + return + } + + render() { + return( + + {this.createCollectionEntries(this.props.schemaData, this.props.schemaContent, this.props.arr)} + + ); + } +} + +export default FlameLinkCollectionComponentCreations; \ No newline at end of file diff --git a/src/components/FlameLinkCollectionGallery.js b/src/components/FlameLinkCollectionGallery.js new file mode 100644 index 0000000..77860ea --- /dev/null +++ b/src/components/FlameLinkCollectionGallery.js @@ -0,0 +1,123 @@ +import React, { Component } from 'react'; +import Typography from '@material-ui/core/Typography'; +import Grid from '@material-ui/core/Grid'; +import { withStyles } from '@material-ui/core/styles'; +import RenderGallery from './RenderGallery'; +import flamelinkApp from '../flamelink.js'; +import FlameLinkCollectionGalleryContent from './FlameLinkCollectionGalleryContent'; +import "react-image-gallery/styles/css/image-gallery.css"; +import '../css/FlameLink.css'; + +const styles = theme => ({ + flamelinkItem: { + marginRight: 20, + marginLeft: 20, + marginTop: 20, + }, + + flamelinkGallery: { + marginRight: "auto", + marginLeft: "auto", + }, + + flamelinkGalleryContainer: { + backgroundColor: 'black', + marginTop: 20, + }, +}); + +class FlameLinkCollectionGallery extends Component { + getPageTitle = galleryName => { + switch (galleryName) { + case 'martensAndKits': + document.title = 'Marten Tracker | Martens and Kits'; + break; + case 'martensAtNight': + document.title = 'Marten Tracker | Martens at Night'; + break; + case 'martensBeingMartens': + document.title = 'Marten Tracker | Martens Being Martens'; + break; + default: + document.title = 'Marten Tracker | Galleries'; + break; + } + } + + constructor(props) { + super(props); + + this.state = { + schemaDetails: '', + schemaContent: '', + schemaDescription: '', + } + + flamelinkApp.schemas.getFields(this.props.galleryName, { fields: ['title', 'key', 'type', 'gridColumns', 'description', 'options'] }) + .then(result => this.setState({ + schemaDetails: result + })) + + flamelinkApp.content.get(this.props.galleryName) + .then(result => this.setState({ + schemaContent: result + })) + + if (this.props.showTitle === false) { + } else { + flamelinkApp.schemas.get(this.props.galleryName) + .then(result => this.setState({ + schemaDescription: result.title + })) + } + + this.getPageTitle(this.props.galleryName); + } + + getGalleryInfo(schemaDetails, schemaContent) { + var key; + var mediaNums = []; + var mediaIDs = []; + + for (var val in schemaDetails) { + key = schemaDetails[val].key + } + for (var val1 in schemaContent) { + for (var val2 in schemaContent[val1][key]) { + mediaIDs.push(schemaContent[val1][key][val2]); + } + } + for (var val3 in mediaIDs) { + mediaNums.push(val3) + } + + return mediaNums.map(this.createGallery, mediaIDs); + } + + createGallery(num) { + if (num === '0') { + global.galleryImages = []; + } + return ; + } + + render() { + const { classes } = this.props; + + return ( + + {this.getGalleryInfo(this.state.schemaDetails, this.state.schemaContent)} + + {this.state.schemaDescription} + + + + + + + + ); + } +} + +export default withStyles(styles)(FlameLinkCollectionGallery); \ No newline at end of file diff --git a/src/components/FlameLinkCollectionGalleryContent.js b/src/components/FlameLinkCollectionGalleryContent.js new file mode 100644 index 0000000..ceeba0f --- /dev/null +++ b/src/components/FlameLinkCollectionGalleryContent.js @@ -0,0 +1,38 @@ +import { Component } from 'react'; +import flamelinkApp from '../flamelink.js'; +import '../css/FlameLink.css'; + +class FlameLinkCollectionGalleryContent extends Component { + constructor(props) { + super(props); + + global.galleryImages = []; + + this.state = { + mediaURL: '', + } + + flamelinkApp.storage.getURL(this.props.mediaIDs[this.props.num]) + .then(url => this.setState({ + mediaURL: url + })) + } + + addURLs = () => { + if (this.state.mediaURL === '') { + } + else { + var element = {} + element.original = this.state.mediaURL; + global.galleryImages.push(element); + } + + return null; + } + + render() { + return this.addURLs(); + } +} + +export default FlameLinkCollectionGalleryContent; \ No newline at end of file diff --git a/src/components/FlameLinkCollectionStructure.js b/src/components/FlameLinkCollectionStructure.js new file mode 100644 index 0000000..ba963cd --- /dev/null +++ b/src/components/FlameLinkCollectionStructure.js @@ -0,0 +1,128 @@ +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 FlameLinkCollectionStructure extends Component { + constructor() { + super(); + + global.mediaID = ''; + + this.state = { + schemaContent: '', + } + + flamelinkApp.content.get(global.schemaName) + .then(result => this.setState({ + schemaContent: result + })) + } + + getContent(content, field, key, type, description){ + if (type === 'text'){ + if(description === 'h1'){ + return ( + + {content[key]} + + ) + } + if(description === 'h2'){ + return ( + + {content[key]} + + ) + } + if(description === 'h3'){ + return ( + + {content[key]} + + ) + } + if(description === 'h4'){ + return ( + + {content[key]} + + ) + } + if(description === 'h5'){ + return ( + + {content[key]} + + ) + } + if(description === 'h6'){ + return ( + + {content[key]} + + ) + } + else{ + return ( + + {content[key]} + + ) + } + } + if(type === 'textarea'){ + return ( + + {content[key]} + + ) + } + if (type === 'media'){ + for (var val in content[key]){ + global.mediaID = content[key][val]; + return + } + } + if (type === 'fieldset'){ + if(content === ''){ + return + } + else{ + return + } + } + console.log('Content: ', content) + console.log('Field: ', field) + console.log('Key: ', key) + console.log('Type: ', type) + console.log('Description: ', description) + } + + 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( + + {this.getContent(this.props.schemaContent, this.props.field, this.props.field.key, this.props.type, this.props.field.description)} + + ); + } +} + +export default withStyles(styles)(FlameLinkCollectionStructure); \ No newline at end of file diff --git a/src/components/FlameLinkComponentCreations.js b/src/components/FlameLinkComponentCreations.js index 34ee9f4..88ae4bf 100644 --- a/src/components/FlameLinkComponentCreations.js +++ b/src/components/FlameLinkComponentCreations.js @@ -1,25 +1,39 @@ import React, { Component} from 'react'; import FlameLinkStructure from './FlameLinkStructure'; +import FlameLinkCollection from './FlameLinkCollection'; import Grid from '@material-ui/core/Grid'; class FlameLinkComponentCreations extends Component { - - getSchemaFieldData(schemaData){ + + getSchemaFieldData(schemaData, schemaType){ var arr = []; for (var val in schemaData){ arr.push(val); } - return arr.map(this.createComponents, schemaData); + + if(schemaType === 'single'){ + return arr.map(this.createSingleTypeSchemaComponents, schemaData); + } + if(schemaType === 'collection'){ + return this.createCollectionTypeSchemaComponents(schemaData); + } + else{ + return + } } - createComponents(num){ + createSingleTypeSchemaComponents(num){ return } + createCollectionTypeSchemaComponents(schemaData){ + return + } + render() { return( - {this.getSchemaFieldData(this.props.schemaDetails)} + {this.getSchemaFieldData(this.props.schemaDetails, this.props.schemaType)} ); } diff --git a/src/components/FlameLinkImage.js b/src/components/FlameLinkImage.js index 0a474f4..acad0e6 100644 --- a/src/components/FlameLinkImage.js +++ b/src/components/FlameLinkImage.js @@ -1,7 +1,7 @@ import React, { Component } from 'react'; import Typography from '@material-ui/core/Typography'; import flamelinkApp from '../flamelink.js'; -import '../css/FlameLinkImage.css'; +import '../css/FlameLink.css'; class FlameLinkImage extends Component { constructor() { diff --git a/src/components/FlameLinkStructure.js b/src/components/FlameLinkStructure.js index 470a592..93e391d 100644 --- a/src/components/FlameLinkStructure.js +++ b/src/components/FlameLinkStructure.js @@ -31,78 +31,78 @@ class FlameLinkStructure extends Component { } getContent(schemaField, key, type, description){ - if (type === 'text'){ - if(description === 'h1'){ - return ( - - {this.state.schemaContent[key]} - - ) + if (type === 'text'){ + if(description === 'h1'){ + return ( + + {this.state.schemaContent[key]} + + ) + } + if(description === 'h2'){ + return ( + + {this.state.schemaContent[key]} + + ) + } + if(description === 'h3'){ + return ( + + {this.state.schemaContent[key]} + + ) + } + if(description === 'h4'){ + return ( + + {this.state.schemaContent[key]} + + ) + } + if(description === 'h5'){ + return ( + + {this.state.schemaContent[key]} + + ) + } + if(description === 'h6'){ + return ( + + {this.state.schemaContent[key]} + + ) + } + else{ + return ( + + {this.state.schemaContent[key]} + + ) + } } - if(description === 'h2'){ - return ( - - {this.state.schemaContent[key]} - - ) - } - if(description === 'h3'){ - return ( - - {this.state.schemaContent[key]} - - ) - } - if(description === 'h4'){ - return ( - - {this.state.schemaContent[key]} - - ) - } - if(description === 'h5'){ - return ( - - {this.state.schemaContent[key]} - - ) - } - if(description === 'h6'){ - return ( - - {this.state.schemaContent[key]} - - ) - } - else{ + if(type === 'textarea'){ return ( {this.state.schemaContent[key]} - ) + ) } - } - if(type === 'textarea'){ - return ( - - {this.state.schemaContent[key]} - - ) - } - if (type === 'media'){ - for (var val in this.state.schemaContent[key]){ - global.mediaID = this.state.schemaContent[key][val]; - return - } - } - if (type === 'fieldset'){ - if(this.state.schemaContent === ''){ - return + if (type === 'media'){ + for (var val in this.state.schemaContent[key]){ + global.mediaID = this.state.schemaContent[key][val]; + return + } } - else{ - return + if (type === 'fieldset'){ + if(this.state.schemaContent === ''){ + return + } + else{ + return + } } - } } render() { diff --git a/src/components/Main.js b/src/components/Main.js index 1c3ae0e..d3bde39 100644 --- a/src/components/Main.js +++ b/src/components/Main.js @@ -14,6 +14,8 @@ import Hidden from '@material-ui/core/Hidden'; import Divider from '@material-ui/core/Divider'; import MenuIcon from '@material-ui/icons/Menu'; import HomeIcon from '@material-ui/icons/Home'; +import EmailIcon from '@material-ui/icons/Email'; +import PhotoLibraryIcon from '@material-ui/icons/PhotoLibrary'; import AssignmentIcon from '@material-ui/icons/Assignment'; import MapIcon from '@material-ui/icons/Map'; import InfoIcon from '@material-ui/icons/Info'; @@ -23,12 +25,14 @@ import Home from '../pages/Home'; import ViewMap from '../pages/ViewMap'; import About from '../pages/About'; import Quiz from '../pages/QuizPage'; +import Contact from '../pages/Contact'; import SightingList from '../pages/SightingList'; import Report from '../pages/Report'; import CssBaseline from '@material-ui/core/CssBaseline'; import ExpandLess from '@material-ui/icons/ExpandLess'; import ExpandMore from '@material-ui/icons/ExpandMore'; import Collapse from '@material-ui/core/Collapse'; +import FlameLinkCollectionGallery from '../components/FlameLinkCollectionGallery'; const drawerWidth = 240; @@ -71,7 +75,8 @@ class ResponsiveDrawer extends React.Component { state = { mobileOpen: false, key: 'Home', - open: false + open: false, + open2: false, }; handleDrawerToggle = () => { @@ -82,6 +87,10 @@ class ResponsiveDrawer extends React.Component { this.setState(state => ({ open: !state.open })); } + handleClick2 = () => { + this.setState(state => ({ open2: !state.open2 })); + } + nav = (text) => { this.setState({ key: text @@ -112,10 +121,6 @@ class ResponsiveDrawer extends React.Component { - this.nav('About')}> - - - @@ -136,6 +141,37 @@ class ResponsiveDrawer extends React.Component { + this.nav('Contact')}> + + + + this.nav('About')}> + + + + + + + + + {this.state.open2 ? : } + + + + this.nav('Gallery1')}> + + + this.nav('Gallery2')}> + + + this.nav('Gallery3')}> + + + this.nav('Gallery4')}> + + + + @@ -196,9 +232,14 @@ class ResponsiveDrawer extends React.Component { {this.state.key === 'Map' && } {this.state.key === 'List' && } {this.state.key === 'About' && } + {this.state.key === 'Contact' && } {this.state.key === 'Easy-Quiz' && } {this.state.key === 'Intermediate-Quiz' && } {this.state.key === 'Advanced-Quiz' && } + {this.state.key === 'Gallery1' && } + {this.state.key === 'Gallery2' && } + {this.state.key === 'Gallery3' && } + {this.state.key === 'Gallery4' && } ); diff --git a/src/components/RenderGallery.js b/src/components/RenderGallery.js new file mode 100644 index 0000000..ce87837 --- /dev/null +++ b/src/components/RenderGallery.js @@ -0,0 +1,39 @@ +import React, { Component } from 'react'; +import ImageGallery from 'react-image-gallery'; +import "react-image-gallery/styles/css/image-gallery.css"; +import '../css/FlameLink.css'; + +class RenderGallery extends Component { + constructor() { + super(); + + this.state = { + showThumbnails: false, + showIndex: true, + showBullets: true, + mounted: false, + } + } + + componentDidMount() { + this.setState({ mounted: true }) + } + + _onImageLoad = event => { + console.debug('loaded image', event.target.src); + } + + render() { + return ( + + ); + } +} + +export default RenderGallery; \ No newline at end of file diff --git a/src/components/SightingMap.js b/src/components/SightingMap.js index 0f9bc0e..bf3aafa 100644 --- a/src/components/SightingMap.js +++ b/src/components/SightingMap.js @@ -272,9 +272,8 @@ export class MapContainer extends Component { initialCenter={this.state.myLatLng} center={this.state.myLatLng} minZoom={6} - zoom={6} + zoom={7} onClick={this.onMapClick} - defaultZoom={15} > this.setState({ schemaDetails: result })) - } + + flamelinkApp.schemas.get(global.schemaName) + .then(result => this.setState({ + schemaType: result.type + })) + } + + componentDidMount() { + document.title = 'Marten Tracker | About'; + } render() { return (
- + -
); } diff --git a/src/pages/Contact.js b/src/pages/Contact.js new file mode 100644 index 0000000..20d4407 --- /dev/null +++ b/src/pages/Contact.js @@ -0,0 +1,14 @@ +import React, { Component } from 'react'; +import ContactForm from '../components/ContactForm.js' + +class Contact extends Component { + componentDidMount() { + document.title = 'Marten Tracker | Contact'; + } + + render() { + return ; + } +} + +export default Contact; diff --git a/src/pages/Home.js b/src/pages/Home.js index e8b56b2..53844f9 100644 --- a/src/pages/Home.js +++ b/src/pages/Home.js @@ -1,6 +1,8 @@ import React, { Component } from 'react'; import FlameLinkComponentCreations from '../components/FlameLinkComponentCreations'; +import FlameLinkCollectionGallery from '../components/FlameLinkCollectionGallery'; import flamelinkApp from '../flamelink'; +import Grid from '@material-ui/core/Grid'; class Home extends Component { constructor() { @@ -10,12 +12,18 @@ class Home extends Component { this.state = { schemaDetails: '', + schemaType: '', } - flamelinkApp.schemas.getFields(global.schemaName, { fields: ['title', 'key', 'type', 'gridColumns', 'description', 'options'] }) + flamelinkApp.schemas.getFields(global.schemaName, { fields: [ 'title', 'key', 'type', 'gridColumns', 'description', 'options'] }) .then(result => this.setState({ schemaDetails: result })) + + flamelinkApp.schemas.get(global.schemaName) + .then(result => this.setState({ + schemaType: result.type + })) } componentDidMount() { @@ -24,7 +32,10 @@ class Home extends Component { render() { return ( - + + + + ); } }