From 31a5887b7bf4bf25f4f093f2a38ca096d0e62070 Mon Sep 17 00:00:00 2001 From: ajmaley Date: Mon, 12 Nov 2018 19:03:00 -0500 Subject: [PATCH 01/16] Removed Info.js and replaced with About.js for clarity. Also added some stylings for FlameLink images using css. --- src/components/FlameLinkFieldSetContent.js | 10 +++---- src/components/FlameLinkImage.js | 4 +-- src/components/Main.js | 4 +-- src/css/FlameLinkImage.css | 4 +++ src/pages/About.js | 34 ++++++++++++++++++++++ 5 files changed, 47 insertions(+), 9 deletions(-) create mode 100644 src/css/FlameLinkImage.css create mode 100644 src/pages/About.js diff --git a/src/components/FlameLinkFieldSetContent.js b/src/components/FlameLinkFieldSetContent.js index 61db810..b8b4514 100644 --- a/src/components/FlameLinkFieldSetContent.js +++ b/src/components/FlameLinkFieldSetContent.js @@ -21,11 +21,11 @@ class FlameLinkFieldSetContent extends Component { ) } if(type === 'textarea'){ - return ( - - {fieldsetContent[key]} - - ) + return ( + + {fieldsetContent[key]} + + ) } if (type === 'media'){ for (var val in fieldsetContent[key]){ diff --git a/src/components/FlameLinkImage.js b/src/components/FlameLinkImage.js index aede55f..0a474f4 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'; class FlameLinkImage extends Component { constructor() { @@ -20,7 +20,7 @@ class FlameLinkImage extends Component { render() { return( - + ); } diff --git a/src/components/Main.js b/src/components/Main.js index 8ecb20a..d64d8bf 100644 --- a/src/components/Main.js +++ b/src/components/Main.js @@ -21,7 +21,7 @@ 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 About from '../pages/About'; import Quiz from '../pages/QuizPage'; import SightingList from '../pages/SightingList'; import Report from '../pages/Report'; @@ -195,7 +195,7 @@ class ResponsiveDrawer extends React.Component { {this.state.key === 'Report' && } {this.state.key === 'Map' && } {this.state.key === 'List' && } - {this.state.key === 'About' && } + {this.state.key === 'About' && } {this.state.key === 'Easy-Quiz' && } {this.state.key === 'Medium-Quiz' && } {this.state.key === 'Hard-Quiz' && } diff --git a/src/css/FlameLinkImage.css b/src/css/FlameLinkImage.css new file mode 100644 index 0000000..7abf189 --- /dev/null +++ b/src/css/FlameLinkImage.css @@ -0,0 +1,4 @@ +.flamelinkImage { + width: 100%; + max-width: 500px; +} diff --git a/src/pages/About.js b/src/pages/About.js new file mode 100644 index 0000000..1eb02c6 --- /dev/null +++ b/src/pages/About.js @@ -0,0 +1,34 @@ +import React, { Component, Fragment } from 'react'; +import FlameLinkComponentCreations from '../components/FlameLinkComponentCreations'; +import flamelinkApp from '../flamelink.js'; + +class About 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 + })) + } + + render() { + + return ( +
+ + + + +
+ ); + } +} + +export default About; From 598f3bd0a0e340d44dba7a5c43a831fc6b5c7af6 Mon Sep 17 00:00:00 2001 From: ajmaley Date: Fri, 23 Nov 2018 13:07:42 -0500 Subject: [PATCH 02/16] Added ability to handle collection type schemas --- src/components/FlameLinkCollection.js | 47 +++++++ .../FlameLinkCollectionComponentCreations.js | 25 ++++ .../FlameLinkCollectionStructure.js | 128 ++++++++++++++++++ src/components/FlameLinkComponentCreations.js | 24 +++- src/components/FlameLinkStructure.js | 128 +++++++++--------- src/pages/About.js | 13 +- src/pages/Home.js | 10 +- 7 files changed, 300 insertions(+), 75 deletions(-) create mode 100644 src/components/FlameLinkCollection.js create mode 100644 src/components/FlameLinkCollectionComponentCreations.js create mode 100644 src/components/FlameLinkCollectionStructure.js 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/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/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/pages/About.js b/src/pages/About.js index 1eb02c6..1b57406 100644 --- a/src/pages/About.js +++ b/src/pages/About.js @@ -6,26 +6,31 @@ class About extends Component { constructor() { super(); - global.schemaName = 'martenSchemaDemo'; + global.schemaName = 'martenAbout'; this.state = { schemaDetails: '', + schemaType: '', } 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 + })) + } render() { return (
- + -
); } diff --git a/src/pages/Home.js b/src/pages/Home.js index 60633cc..840a5f6 100644 --- a/src/pages/Home.js +++ b/src/pages/Home.js @@ -10,17 +10,23 @@ 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 + })) } render() { return ( - + ); } } From 212bca8d35db45eabcebdbe28083abcf62bea0eb Mon Sep 17 00:00:00 2001 From: ajmaley Date: Sat, 24 Nov 2018 21:26:40 -0500 Subject: [PATCH 03/16] Progress so far converting a collection schema filled with single media entries into a gallery --- package-lock.json | 38 +++++++- package.json | 1 + src/components/FlameLinkCollectionGallery.js | 87 +++++++++++++++++++ .../FlameLinkCollectionGalleryContent.js | 37 ++++++++ src/components/FlameLinkImage.js | 2 +- src/components/Main.js | 27 +++++- src/css/{FlameLinkImage.css => FlameLink.css} | 2 +- src/pages/Home.js | 8 +- 8 files changed, 197 insertions(+), 5 deletions(-) create mode 100644 src/components/FlameLinkCollectionGallery.js create mode 100644 src/components/FlameLinkCollectionGalleryContent.js rename src/css/{FlameLinkImage.css => FlameLink.css} (96%) diff --git a/package-lock.json b/package-lock.json index d358b66..ab6693c 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", @@ -5651,7 +5656,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 +9691,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 +12560,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 +12717,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 +13308,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..3322cad 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,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/src/components/FlameLinkCollectionGallery.js b/src/components/FlameLinkCollectionGallery.js new file mode 100644 index 0000000..6d85244 --- /dev/null +++ b/src/components/FlameLinkCollectionGallery.js @@ -0,0 +1,87 @@ +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 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, + }, + }); + +class FlameLinkCollectionGallery extends Component { + constructor() { + super(); + + global.mediaURLs = []; + global.mediaIDs = []; + global.galleryImages = []; + + this.state = { + schemaDetails: '', + schemaContent: '', + schemaDescription: '', + showThumbnails: false, + showIndex: true, + } + + flamelinkApp.schemas.getFields(global.galleryName, { fields: [ 'title', 'key', 'type', 'gridColumns', 'description', 'options'] }) + .then(result => this.setState({ + schemaDetails: result + })) + + flamelinkApp.content.get(global.galleryName) + .then(result => this.setState({ + schemaContent: result + })) + + flamelinkApp.schemas.get(global.galleryName) + .then(result => this.setState({ + schemaDescription: result.title + })) + } + + getGalleryInfo(schemaDetails, schemaContent){ + var key; + var mediaNums = [] + for (var val in schemaDetails){ + key = schemaDetails[val].key + } + for (var val1 in schemaContent){ + for (var val2 in schemaContent[val1][key]){ + global.mediaIDs.push(schemaContent[val1][key][val2]); + } + } + console.log('Global Media IDs: ', global.mediaIDs) + for (var val3 in global.mediaIDs){ + mediaNums.push(val3) + } + return mediaNums.map(this.createGallery); + } + + createGallery(num){ + return + } + + render() { + const { classes } = this.props; + + return( + + + {this.state.schemaDescription} + + {this.getGalleryInfo(this.state.schemaDetails, this.state.schemaContent)} + {console.log('Gallery Images: ', global.galleryImages)} + + ); + } +} + +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..99c60a4 --- /dev/null +++ b/src/components/FlameLinkCollectionGalleryContent.js @@ -0,0 +1,37 @@ +import { Component } from 'react'; +import flamelinkApp from '../flamelink.js'; +import '../css/FlameLink.css'; + +class FlameLinkCollectionGalleryContent extends Component { + constructor() { + super(); + + this.state = { + mediaURL: '', + } + } + + componentDidMount(){ + flamelinkApp.storage.getURL(global.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/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/Main.js b/src/components/Main.js index 1c3ae0e..0c3b38a 100644 --- a/src/components/Main.js +++ b/src/components/Main.js @@ -71,7 +71,8 @@ class ResponsiveDrawer extends React.Component { state = { mobileOpen: false, key: 'Home', - open: false + open: false, + open2: false, }; handleDrawerToggle = () => { @@ -82,6 +83,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 @@ -136,6 +141,26 @@ class ResponsiveDrawer extends React.Component { + + + + + + {this.state.open2 ? : } + + + + this.nav('Easy-Quiz')}> + + + this.nav('Intermediate-Quiz')}> + + + this.nav('Advanced-Quiz')}> + + + + diff --git a/src/css/FlameLinkImage.css b/src/css/FlameLink.css similarity index 96% rename from src/css/FlameLinkImage.css rename to src/css/FlameLink.css index 7abf189..ab1877c 100644 --- a/src/css/FlameLinkImage.css +++ b/src/css/FlameLink.css @@ -1,4 +1,4 @@ .flamelinkImage { width: 100%; max-width: 500px; -} +} \ No newline at end of file diff --git a/src/pages/Home.js b/src/pages/Home.js index 02a2b29..1906b03 100644 --- a/src/pages/Home.js +++ b/src/pages/Home.js @@ -1,12 +1,15 @@ 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() { super(); global.schemaName = 'martenHome'; + global.galleryName = 'martenGallery'; this.state = { schemaDetails: '', @@ -30,7 +33,10 @@ class Home extends Component { render() { return ( - + + + + ); } } From a61a8811261f5d7afbe3100d3cd79ce659946b62 Mon Sep 17 00:00:00 2001 From: ajmaley Date: Sat, 24 Nov 2018 21:41:45 -0500 Subject: [PATCH 04/16] Galleries are pulling from FlameLink now. Just have to finish up a few more things before this can be moved to production --- src/components/FlameLinkCollectionGallery.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/src/components/FlameLinkCollectionGallery.js b/src/components/FlameLinkCollectionGallery.js index 6d85244..62aa835 100644 --- a/src/components/FlameLinkCollectionGallery.js +++ b/src/components/FlameLinkCollectionGallery.js @@ -2,6 +2,7 @@ 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 ImageGallery from 'react-image-gallery'; import flamelinkApp from '../flamelink.js'; import FlameLinkCollectionGalleryContent from './FlameLinkCollectionGalleryContent'; import "react-image-gallery/styles/css/image-gallery.css"; @@ -72,6 +73,21 @@ class FlameLinkCollectionGallery extends Component { render() { const { classes } = this.props; + const images = [ + { + original: 'http://lorempixel.com/1000/600/nature/1/', + thumbnail: 'http://lorempixel.com/250/150/nature/1/', + }, + { + original: 'http://lorempixel.com/1000/600/nature/2/', + thumbnail: 'http://lorempixel.com/250/150/nature/2/' + }, + { + original: 'http://lorempixel.com/1000/600/nature/3/', + thumbnail: 'http://lorempixel.com/250/150/nature/3/' + } + ] + return( @@ -79,6 +95,7 @@ class FlameLinkCollectionGallery extends Component { {this.getGalleryInfo(this.state.schemaDetails, this.state.schemaContent)} {console.log('Gallery Images: ', global.galleryImages)} + ); } From 00a3566decfb8e4b1e91e1d9331efd3bf43df9ab Mon Sep 17 00:00:00 2001 From: ajmaley Date: Sun, 25 Nov 2018 11:28:23 -0500 Subject: [PATCH 05/16] Set up Galleries to use flamelink images. Set up to use collection schema type only. There is one bug I need to address. Gallery doesn't render when the webpage is loaded but works otherwise. --- src/components/FlameLinkCollectionGallery.js | 49 ++++++++----------- .../FlameLinkCollectionGalleryContent.js | 10 ++-- src/components/Main.js | 13 +++-- src/components/RenderGallery.js | 40 +++++++++++++++ src/pages/Home.js | 3 +- 5 files changed, 75 insertions(+), 40 deletions(-) create mode 100644 src/components/RenderGallery.js diff --git a/src/components/FlameLinkCollectionGallery.js b/src/components/FlameLinkCollectionGallery.js index 62aa835..0756c23 100644 --- a/src/components/FlameLinkCollectionGallery.js +++ b/src/components/FlameLinkCollectionGallery.js @@ -2,7 +2,7 @@ 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 ImageGallery from 'react-image-gallery'; +import RenderGallery from './RenderGallery'; import flamelinkApp from '../flamelink.js'; import FlameLinkCollectionGalleryContent from './FlameLinkCollectionGalleryContent'; import "react-image-gallery/styles/css/image-gallery.css"; @@ -14,35 +14,38 @@ const styles = theme => ({ marginLeft: 20, marginTop: 20, }, + + flamelinkGallery: { + marginRight: "auto", + marginLeft: "auto", + marginTop: 20, + }, }); class FlameLinkCollectionGallery extends Component { - constructor() { - super(); + constructor(props) { + super(props); global.mediaURLs = []; global.mediaIDs = []; - global.galleryImages = []; this.state = { schemaDetails: '', schemaContent: '', schemaDescription: '', - showThumbnails: false, - showIndex: true, } - flamelinkApp.schemas.getFields(global.galleryName, { fields: [ 'title', 'key', 'type', 'gridColumns', 'description', 'options'] }) + flamelinkApp.schemas.getFields(this.props.galleryName, { fields: [ 'title', 'key', 'type', 'gridColumns', 'description', 'options'] }) .then(result => this.setState({ schemaDetails: result })) - flamelinkApp.content.get(global.galleryName) + flamelinkApp.content.get(this.props.galleryName) .then(result => this.setState({ schemaContent: result })) - flamelinkApp.schemas.get(global.galleryName) + flamelinkApp.schemas.get(this.props.galleryName) .then(result => this.setState({ schemaDescription: result.title })) @@ -73,29 +76,17 @@ class FlameLinkCollectionGallery extends Component { render() { const { classes } = this.props; - const images = [ - { - original: 'http://lorempixel.com/1000/600/nature/1/', - thumbnail: 'http://lorempixel.com/250/150/nature/1/', - }, - { - original: 'http://lorempixel.com/1000/600/nature/2/', - thumbnail: 'http://lorempixel.com/250/150/nature/2/' - }, - { - original: 'http://lorempixel.com/1000/600/nature/3/', - thumbnail: 'http://lorempixel.com/250/150/nature/3/' - } - ] - return( - - + + {this.getGalleryInfo(this.state.schemaDetails, this.state.schemaContent)} + {this.state.schemaDescription} - {this.getGalleryInfo(this.state.schemaDetails, this.state.schemaContent)} - {console.log('Gallery Images: ', global.galleryImages)} - + + + + + ); } diff --git a/src/components/FlameLinkCollectionGalleryContent.js b/src/components/FlameLinkCollectionGalleryContent.js index 99c60a4..4222da8 100644 --- a/src/components/FlameLinkCollectionGalleryContent.js +++ b/src/components/FlameLinkCollectionGalleryContent.js @@ -3,20 +3,20 @@ import flamelinkApp from '../flamelink.js'; import '../css/FlameLink.css'; class FlameLinkCollectionGalleryContent extends Component { - constructor() { - super(); + constructor(props) { + super(props); + + global.galleryImages = []; this.state = { mediaURL: '', } - } - componentDidMount(){ flamelinkApp.storage.getURL(global.mediaIDs[this.props.num]) .then(url => this.setState({ mediaURL: url })) - } + } addURLs(){ if(this.state.mediaURL === ''){ diff --git a/src/components/Main.js b/src/components/Main.js index 0c3b38a..d757123 100644 --- a/src/components/Main.js +++ b/src/components/Main.js @@ -14,6 +14,7 @@ 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 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'; @@ -29,6 +30,7 @@ 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; @@ -143,20 +145,20 @@ class ResponsiveDrawer extends React.Component { - + {this.state.open2 ? : } - this.nav('Easy-Quiz')}> + this.nav('Gallery1')}> - this.nav('Intermediate-Quiz')}> + this.nav('Gallery2')}> - this.nav('Advanced-Quiz')}> + this.nav('Gallery3')}> @@ -224,6 +226,9 @@ class ResponsiveDrawer extends React.Component { {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' && } ); diff --git a/src/components/RenderGallery.js b/src/components/RenderGallery.js new file mode 100644 index 0000000..19c8af6 --- /dev/null +++ b/src/components/RenderGallery.js @@ -0,0 +1,40 @@ +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/pages/Home.js b/src/pages/Home.js index 1906b03..7e249a8 100644 --- a/src/pages/Home.js +++ b/src/pages/Home.js @@ -9,7 +9,6 @@ class Home extends Component { super(); global.schemaName = 'martenHome'; - global.galleryName = 'martenGallery'; this.state = { schemaDetails: '', @@ -34,7 +33,7 @@ class Home extends Component { render() { return ( - + ); From 477a8d264ccc1ed311715eb805bc24726d68194d Mon Sep 17 00:00:00 2001 From: ajmaley Date: Sun, 25 Nov 2018 12:32:12 -0500 Subject: [PATCH 06/16] Handles displaying titles of galleries --- src/components/FlameLinkCollectionGallery.js | 13 ++++++++----- src/components/Main.js | 12 ++++++------ src/pages/Home.js | 2 +- 3 files changed, 15 insertions(+), 12 deletions(-) diff --git a/src/components/FlameLinkCollectionGallery.js b/src/components/FlameLinkCollectionGallery.js index 0756c23..7618ce7 100644 --- a/src/components/FlameLinkCollectionGallery.js +++ b/src/components/FlameLinkCollectionGallery.js @@ -44,11 +44,14 @@ class FlameLinkCollectionGallery extends Component { .then(result => this.setState({ schemaContent: result })) - - flamelinkApp.schemas.get(this.props.galleryName) - .then(result => this.setState({ - schemaDescription: result.title - })) + if(this.props.showTitle === false){ + } + else{ + flamelinkApp.schemas.get(this.props.galleryName) + .then(result => this.setState({ + schemaDescription: result.title + })) + } } getGalleryInfo(schemaDetails, schemaContent){ diff --git a/src/components/Main.js b/src/components/Main.js index d757123..f6140fe 100644 --- a/src/components/Main.js +++ b/src/components/Main.js @@ -153,13 +153,13 @@ class ResponsiveDrawer extends React.Component { this.nav('Gallery1')}> - + this.nav('Gallery2')}> - + this.nav('Gallery3')}> - + @@ -226,9 +226,9 @@ class ResponsiveDrawer extends React.Component { {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 === 'Gallery1' && } + {this.state.key === 'Gallery2' && } + {this.state.key === 'Gallery3' && } ); diff --git a/src/pages/Home.js b/src/pages/Home.js index 7e249a8..53844f9 100644 --- a/src/pages/Home.js +++ b/src/pages/Home.js @@ -33,7 +33,7 @@ class Home extends Component { render() { return ( - + ); From 73db7e5074d1893ab2da313a9aca5afcb2dcaa0f Mon Sep 17 00:00:00 2001 From: ajmaley Date: Sun, 25 Nov 2018 12:52:59 -0500 Subject: [PATCH 07/16] Added some styling got galleries --- src/components/FlameLinkCollectionGallery.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/FlameLinkCollectionGallery.js b/src/components/FlameLinkCollectionGallery.js index 7618ce7..adb1703 100644 --- a/src/components/FlameLinkCollectionGallery.js +++ b/src/components/FlameLinkCollectionGallery.js @@ -18,6 +18,10 @@ const styles = theme => ({ flamelinkGallery: { marginRight: "auto", marginLeft: "auto", + }, + + flamelinkGalleryContainer: { + backgroundColor: 'black', marginTop: 20, }, }); @@ -44,6 +48,7 @@ class FlameLinkCollectionGallery extends Component { .then(result => this.setState({ schemaContent: result })) + if(this.props.showTitle === false){ } else{ @@ -65,7 +70,6 @@ class FlameLinkCollectionGallery extends Component { global.mediaIDs.push(schemaContent[val1][key][val2]); } } - console.log('Global Media IDs: ', global.mediaIDs) for (var val3 in global.mediaIDs){ mediaNums.push(val3) } @@ -85,7 +89,7 @@ class FlameLinkCollectionGallery extends Component { {this.state.schemaDescription} - + From 95143d8034bd375769f4ce7e9413bf9083be749a Mon Sep 17 00:00:00 2001 From: wildscotsmen Date: Sun, 25 Nov 2018 13:19:43 -0500 Subject: [PATCH 08/16] Fixed startup issue. --- src/components/FlameLinkCollectionGallery.js | 85 ++++++++++---------- 1 file changed, 42 insertions(+), 43 deletions(-) diff --git a/src/components/FlameLinkCollectionGallery.js b/src/components/FlameLinkCollectionGallery.js index adb1703..a79d728 100644 --- a/src/components/FlameLinkCollectionGallery.js +++ b/src/components/FlameLinkCollectionGallery.js @@ -9,22 +9,22 @@ import "react-image-gallery/styles/css/image-gallery.css"; import '../css/FlameLink.css'; const styles = theme => ({ - flamelinkItem: { - marginRight: 20, - marginLeft: 20, - marginTop: 20, - }, + flamelinkItem: { + marginRight: 20, + marginLeft: 20, + marginTop: 20, + }, - flamelinkGallery: { - marginRight: "auto", - marginLeft: "auto", - }, + flamelinkGallery: { + marginRight: "auto", + marginLeft: "auto", + }, - flamelinkGalleryContainer: { - backgroundColor: 'black', - marginTop: 20, - }, - }); + flamelinkGalleryContainer: { + backgroundColor: 'black', + marginTop: 20, + }, +}); class FlameLinkCollectionGallery extends Component { constructor(props) { @@ -39,62 +39,61 @@ class FlameLinkCollectionGallery extends Component { schemaDescription: '', } - flamelinkApp.schemas.getFields(this.props.galleryName, { fields: [ 'title', 'key', 'type', 'gridColumns', 'description', 'options'] }) - .then(result => this.setState({ - schemaDetails: result - })) + 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 + schemaContent: result })) - if(this.props.showTitle === false){ - } - else{ + if (this.props.showTitle === false) { + } else { flamelinkApp.schemas.get(this.props.galleryName) .then(result => this.setState({ - schemaDescription: result.title + schemaDescription: result.title })) } } - getGalleryInfo(schemaDetails, schemaContent){ + getGalleryInfo(schemaDetails, schemaContent) { var key; var mediaNums = [] - for (var val in schemaDetails){ + for (var val in schemaDetails) { key = schemaDetails[val].key - } - for (var val1 in schemaContent){ - for (var val2 in schemaContent[val1][key]){ + } + for (var val1 in schemaContent) { + for (var val2 in schemaContent[val1][key]) { global.mediaIDs.push(schemaContent[val1][key][val2]); } } - for (var val3 in global.mediaIDs){ - mediaNums.push(val3) - } + for (var val3 in global.mediaIDs) { + mediaNums.push(val3) + } return mediaNums.map(this.createGallery); } - createGallery(num){ - return + createGallery(num) { + return } render() { const { classes } = this.props; - return( - - {this.getGalleryInfo(this.state.schemaDetails, this.state.schemaContent)} - - {this.state.schemaDescription} - - - - - + return ( + + {this.getGalleryInfo(this.state.schemaDetails, this.state.schemaContent)} + + {this.state.schemaDescription} + + + + + ); } } From da80aeabfde447375e2b65ca39ec479bedb67a80 Mon Sep 17 00:00:00 2001 From: wildscotsmen Date: Sun, 25 Nov 2018 13:42:59 -0500 Subject: [PATCH 09/16] Fixed styling. --- src/components/FlameLinkCollectionGallery.js | 6 ++- .../FlameLinkCollectionGalleryContent.js | 18 ++++----- src/components/RenderGallery.js | 37 +++++++++---------- 3 files changed, 31 insertions(+), 30 deletions(-) diff --git a/src/components/FlameLinkCollectionGallery.js b/src/components/FlameLinkCollectionGallery.js index a79d728..8f4910b 100644 --- a/src/components/FlameLinkCollectionGallery.js +++ b/src/components/FlameLinkCollectionGallery.js @@ -61,6 +61,7 @@ class FlameLinkCollectionGallery extends Component { getGalleryInfo(schemaDetails, schemaContent) { var key; var mediaNums = [] + for (var val in schemaDetails) { key = schemaDetails[val].key } @@ -72,10 +73,11 @@ class FlameLinkCollectionGallery extends Component { for (var val3 in global.mediaIDs) { mediaNums.push(val3) } + return mediaNums.map(this.createGallery); } - createGallery(num) { + createGallery = num => { return } @@ -85,7 +87,7 @@ class FlameLinkCollectionGallery extends Component { return ( {this.getGalleryInfo(this.state.schemaDetails, this.state.schemaContent)} - + {this.state.schemaDescription} diff --git a/src/components/FlameLinkCollectionGalleryContent.js b/src/components/FlameLinkCollectionGalleryContent.js index 4222da8..9e34d5e 100644 --- a/src/components/FlameLinkCollectionGalleryContent.js +++ b/src/components/FlameLinkCollectionGalleryContent.js @@ -9,23 +9,23 @@ class FlameLinkCollectionGalleryContent extends Component { global.galleryImages = []; this.state = { - mediaURL: '', + mediaURL: '', } flamelinkApp.storage.getURL(global.mediaIDs[this.props.num]) - .then(url => this.setState({ - mediaURL: url - })) - } + .then(url => this.setState({ + mediaURL: url + })) + } - addURLs(){ - if(this.state.mediaURL === ''){ - } - else{ + addURLs = () => { + if (this.state.mediaURL === '') { + } else { var element = {} element.original = this.state.mediaURL; global.galleryImages.push(element); } + return null; } diff --git a/src/components/RenderGallery.js b/src/components/RenderGallery.js index 19c8af6..ce87837 100644 --- a/src/components/RenderGallery.js +++ b/src/components/RenderGallery.js @@ -8,29 +8,28 @@ class RenderGallery extends Component { super(); this.state = { - showThumbnails: false, - showIndex: true, - showBullets: true, - mounted: false, + showThumbnails: false, + showIndex: true, + showBullets: true, + mounted: false, } - } - - componentDidMount(){ - this.setState({mounted: true}) } - - _onImageLoad(event) { - console.debug('loaded image', event.target.src); - } + + componentDidMount() { + this.setState({ mounted: true }) + } + + _onImageLoad = event => { + console.debug('loaded image', event.target.src); + } render() { - - return( - ); From 848961dc255e3ef2c8780f48d28ec702de1949b0 Mon Sep 17 00:00:00 2001 From: ajmaley Date: Sun, 25 Nov 2018 14:11:47 -0500 Subject: [PATCH 10/16] Dealt with duplicate key error messages and galleries re-rendering when selecting teh quiz or galleries dropdowns --- src/components/FlameLinkCollectionGallery.js | 17 +++++++++-------- .../FlameLinkCollectionGalleryContent.js | 2 +- 2 files changed, 10 insertions(+), 9 deletions(-) diff --git a/src/components/FlameLinkCollectionGallery.js b/src/components/FlameLinkCollectionGallery.js index 8f4910b..0e53917 100644 --- a/src/components/FlameLinkCollectionGallery.js +++ b/src/components/FlameLinkCollectionGallery.js @@ -31,7 +31,7 @@ class FlameLinkCollectionGallery extends Component { super(props); global.mediaURLs = []; - global.mediaIDs = []; + //global.mediaIDs = []; this.state = { schemaDetails: '', @@ -60,25 +60,26 @@ class FlameLinkCollectionGallery extends Component { getGalleryInfo(schemaDetails, schemaContent) { var key; - var mediaNums = [] + 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]) { - global.mediaIDs.push(schemaContent[val1][key][val2]); + mediaIDs.push(schemaContent[val1][key][val2]); } } - for (var val3 in global.mediaIDs) { + for (var val3 in mediaIDs) { mediaNums.push(val3) } - return mediaNums.map(this.createGallery); + return mediaNums.map(this.createGallery, mediaIDs); } - createGallery = num => { - return + createGallery(num) { + return } render() { @@ -92,7 +93,7 @@ class FlameLinkCollectionGallery extends Component { - + diff --git a/src/components/FlameLinkCollectionGalleryContent.js b/src/components/FlameLinkCollectionGalleryContent.js index 9e34d5e..d93c7de 100644 --- a/src/components/FlameLinkCollectionGalleryContent.js +++ b/src/components/FlameLinkCollectionGalleryContent.js @@ -12,7 +12,7 @@ class FlameLinkCollectionGalleryContent extends Component { mediaURL: '', } - flamelinkApp.storage.getURL(global.mediaIDs[this.props.num]) + flamelinkApp.storage.getURL(this.props.mediaIDs[this.props.num]) .then(url => this.setState({ mediaURL: url })) From 1bde733caef065770a610aab555455969bfdd4f7 Mon Sep 17 00:00:00 2001 From: ajmaley Date: Sun, 25 Nov 2018 14:36:46 -0500 Subject: [PATCH 11/16] Fixed a few more bugs --- src/components/FlameLinkCollectionGallery.js | 6 +++--- src/components/FlameLinkCollectionGalleryContent.js | 3 ++- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/FlameLinkCollectionGallery.js b/src/components/FlameLinkCollectionGallery.js index 0e53917..c413b4b 100644 --- a/src/components/FlameLinkCollectionGallery.js +++ b/src/components/FlameLinkCollectionGallery.js @@ -30,9 +30,6 @@ class FlameLinkCollectionGallery extends Component { constructor(props) { super(props); - global.mediaURLs = []; - //global.mediaIDs = []; - this.state = { schemaDetails: '', schemaContent: '', @@ -79,6 +76,9 @@ class FlameLinkCollectionGallery extends Component { } createGallery(num) { + if(num === '0'){ + global.galleryImages = []; + } return } diff --git a/src/components/FlameLinkCollectionGalleryContent.js b/src/components/FlameLinkCollectionGalleryContent.js index d93c7de..ceeba0f 100644 --- a/src/components/FlameLinkCollectionGalleryContent.js +++ b/src/components/FlameLinkCollectionGalleryContent.js @@ -20,7 +20,8 @@ class FlameLinkCollectionGalleryContent extends Component { addURLs = () => { if (this.state.mediaURL === '') { - } else { + } + else { var element = {} element.original = this.state.mediaURL; global.galleryImages.push(element); From 89762e4428fdba4ba77d5de41840e870660285e0 Mon Sep 17 00:00:00 2001 From: ajmaley Date: Sun, 25 Nov 2018 14:59:22 -0500 Subject: [PATCH 12/16] All bugs fixed. Good to move into production --- src/components/FlameLinkCollectionGallery.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/FlameLinkCollectionGallery.js b/src/components/FlameLinkCollectionGallery.js index c413b4b..00db9fb 100644 --- a/src/components/FlameLinkCollectionGallery.js +++ b/src/components/FlameLinkCollectionGallery.js @@ -75,7 +75,7 @@ class FlameLinkCollectionGallery extends Component { return mediaNums.map(this.createGallery, mediaIDs); } - createGallery(num) { + createGallery (num) { if(num === '0'){ global.galleryImages = []; } @@ -93,7 +93,7 @@ class FlameLinkCollectionGallery extends Component { - + From 970449fc5f255dd9a7bd13181bbc82906204dda6 Mon Sep 17 00:00:00 2001 From: WildScotsmen Date: Sun, 25 Nov 2018 16:37:26 -0500 Subject: [PATCH 13/16] Added titles to pages. --- package-lock.json | 2 +- src/components/FlameLinkCollectionGallery.js | 33 +++++++++++++++----- src/pages/About.js | 4 +++ 3 files changed, 31 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index ab6693c..88e437f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5656,7 +5656,7 @@ }, "core-js": { "version": "2.5.5", - "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.5.tgz", + "resolved": "http://registry.npmjs.org/core-js/-/core-js-2.5.5.tgz", "integrity": "sha1-sU3ek2xkDAV5prUMq8wTLdYSfjs=" }, "firebase": { diff --git a/src/components/FlameLinkCollectionGallery.js b/src/components/FlameLinkCollectionGallery.js index 00db9fb..77860ea 100644 --- a/src/components/FlameLinkCollectionGallery.js +++ b/src/components/FlameLinkCollectionGallery.js @@ -27,6 +27,23 @@ const styles = theme => ({ }); 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); @@ -53,13 +70,15 @@ class FlameLinkCollectionGallery extends Component { 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 } @@ -71,15 +90,15 @@ class FlameLinkCollectionGallery extends Component { for (var val3 in mediaIDs) { mediaNums.push(val3) } - + return mediaNums.map(this.createGallery, mediaIDs); } - createGallery (num) { - if(num === '0'){ - global.galleryImages = []; + createGallery(num) { + if (num === '0') { + global.galleryImages = []; } - return + return ; } render() { @@ -93,7 +112,7 @@ class FlameLinkCollectionGallery extends Component { - + diff --git a/src/pages/About.js b/src/pages/About.js index 1b57406..9b46421 100644 --- a/src/pages/About.js +++ b/src/pages/About.js @@ -24,6 +24,10 @@ class About extends Component { })) } + componentDidMount() { + document.title = 'Marten Tracker | About'; + } + render() { return ( From 7937ae1fb203b547b3a6e77b2110f57a50be9e6f Mon Sep 17 00:00:00 2001 From: Al Duncanson Date: Sun, 25 Nov 2018 16:50:17 -0500 Subject: [PATCH 14/16] fixed map --- src/components/SightingMap.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) 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} > Date: Sun, 25 Nov 2018 17:35:50 -0500 Subject: [PATCH 15/16] Updated readme.md --- readme.md | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/readme.md b/readme.md index f5db757..cdcb9fa 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 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. ### 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 From 6323458cb3b8f7593b7881e1c2c23be49033a628 Mon Sep 17 00:00:00 2001 From: Jacob McCloughan Date: Sun, 25 Nov 2018 17:38:06 -0500 Subject: [PATCH 16/16] Update readme.md --- readme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/readme.md b/readme.md index cdcb9fa..97519ac 100644 --- a/readme.md +++ b/readme.md @@ -2,7 +2,7 @@ ### Background 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 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 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. +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