From 31a5887b7bf4bf25f4f093f2a38ca096d0e62070 Mon Sep 17 00:00:00 2001 From: ajmaley Date: Mon, 12 Nov 2018 19:03:00 -0500 Subject: [PATCH 01/13] 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/13] 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/13] 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/13] 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/13] 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/13] 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/13] 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/13] 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/13] 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/13] 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/13] 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/13] 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/13] 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 (