diff --git a/package-lock.json b/package-lock.json index d358b66..88e437f 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", @@ -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/FlameLinkCollection.js b/src/components/FlameLinkCollection.js new file mode 100644 index 0000000..ecb1b2b --- /dev/null +++ b/src/components/FlameLinkCollection.js @@ -0,0 +1,47 @@ +import React, { Component} from 'react'; +import flamelinkApp from '../flamelink.js'; +import FlameLinkCollectionComponentCreations from './FlameLinkCollectionComponentCreations'; + +class FlameLinkCollection extends Component { + constructor() { + super(); + + global.mediaID = ''; + + this.state = { + schemaContent: '', + } + + flamelinkApp.content.get(global.schemaName) + .then(result => this.setState({ + schemaContent: result + })) + } + + getCollectionContent(schemaData){ + var arr2 = []; + var collectionInfo = [schemaData, this.state.schemaContent]; + for (var val in this.state.schemaContent){ + arr2.push(val); + } + return arr2.map(this.getCollectionComponentInfo, collectionInfo); + } + + getCollectionComponentInfo(num){ + var arr3 = []; + for (var val in this[0]){ + arr3.push(val); + } + return + } + + render() { + return( +
+ {this.getCollectionContent(this.props.schemaData)} +
+ ); + } +} + +export default FlameLinkCollection; \ No newline at end of file diff --git a/src/components/FlameLinkCollectionComponentCreations.js b/src/components/FlameLinkCollectionComponentCreations.js new file mode 100644 index 0000000..1611c80 --- /dev/null +++ b/src/components/FlameLinkCollectionComponentCreations.js @@ -0,0 +1,25 @@ +import React, { Component} from 'react'; +import Grid from '@material-ui/core/Grid'; +import FlameLinkCollectionStructure from './FlameLinkCollectionStructure'; + +class FlameLinkCollectionComponentCreations extends Component { + + createCollectionEntries(schemaData, schemaContent, arr){ + var collectionInfo = [schemaData, schemaContent]; + return arr.map(this.createCollectionComponents, collectionInfo); + } + + createCollectionComponents(num){ + return + } + + render() { + return( + + {this.createCollectionEntries(this.props.schemaData, this.props.schemaContent, this.props.arr)} + + ); + } +} + +export default FlameLinkCollectionComponentCreations; \ No newline at end of file diff --git a/src/components/FlameLinkCollectionGallery.js b/src/components/FlameLinkCollectionGallery.js new file mode 100644 index 0000000..77860ea --- /dev/null +++ b/src/components/FlameLinkCollectionGallery.js @@ -0,0 +1,123 @@ +import React, { Component } from 'react'; +import Typography from '@material-ui/core/Typography'; +import Grid from '@material-ui/core/Grid'; +import { withStyles } from '@material-ui/core/styles'; +import RenderGallery from './RenderGallery'; +import flamelinkApp from '../flamelink.js'; +import FlameLinkCollectionGalleryContent from './FlameLinkCollectionGalleryContent'; +import "react-image-gallery/styles/css/image-gallery.css"; +import '../css/FlameLink.css'; + +const styles = theme => ({ + flamelinkItem: { + marginRight: 20, + marginLeft: 20, + marginTop: 20, + }, + + flamelinkGallery: { + marginRight: "auto", + marginLeft: "auto", + }, + + flamelinkGalleryContainer: { + backgroundColor: 'black', + marginTop: 20, + }, +}); + +class FlameLinkCollectionGallery extends Component { + getPageTitle = galleryName => { + switch (galleryName) { + case 'martensAndKits': + document.title = 'Marten Tracker | Martens and Kits'; + break; + case 'martensAtNight': + document.title = 'Marten Tracker | Martens at Night'; + break; + case 'martensBeingMartens': + document.title = 'Marten Tracker | Martens Being Martens'; + break; + default: + document.title = 'Marten Tracker | Galleries'; + break; + } + } + + constructor(props) { + super(props); + + this.state = { + schemaDetails: '', + schemaContent: '', + schemaDescription: '', + } + + flamelinkApp.schemas.getFields(this.props.galleryName, { fields: ['title', 'key', 'type', 'gridColumns', 'description', 'options'] }) + .then(result => this.setState({ + schemaDetails: result + })) + + flamelinkApp.content.get(this.props.galleryName) + .then(result => this.setState({ + schemaContent: result + })) + + if (this.props.showTitle === false) { + } else { + flamelinkApp.schemas.get(this.props.galleryName) + .then(result => this.setState({ + schemaDescription: result.title + })) + } + + this.getPageTitle(this.props.galleryName); + } + + getGalleryInfo(schemaDetails, schemaContent) { + var key; + var mediaNums = []; + var mediaIDs = []; + + for (var val in schemaDetails) { + key = schemaDetails[val].key + } + for (var val1 in schemaContent) { + for (var val2 in schemaContent[val1][key]) { + mediaIDs.push(schemaContent[val1][key][val2]); + } + } + for (var val3 in mediaIDs) { + mediaNums.push(val3) + } + + return mediaNums.map(this.createGallery, mediaIDs); + } + + createGallery(num) { + if (num === '0') { + global.galleryImages = []; + } + return ; + } + + render() { + const { classes } = this.props; + + return ( + + {this.getGalleryInfo(this.state.schemaDetails, this.state.schemaContent)} + + {this.state.schemaDescription} + + + + + + + + ); + } +} + +export default withStyles(styles)(FlameLinkCollectionGallery); \ No newline at end of file diff --git a/src/components/FlameLinkCollectionGalleryContent.js b/src/components/FlameLinkCollectionGalleryContent.js new file mode 100644 index 0000000..ceeba0f --- /dev/null +++ b/src/components/FlameLinkCollectionGalleryContent.js @@ -0,0 +1,38 @@ +import { Component } from 'react'; +import flamelinkApp from '../flamelink.js'; +import '../css/FlameLink.css'; + +class FlameLinkCollectionGalleryContent extends Component { + constructor(props) { + super(props); + + global.galleryImages = []; + + this.state = { + mediaURL: '', + } + + flamelinkApp.storage.getURL(this.props.mediaIDs[this.props.num]) + .then(url => this.setState({ + mediaURL: url + })) + } + + addURLs = () => { + if (this.state.mediaURL === '') { + } + else { + var element = {} + element.original = this.state.mediaURL; + global.galleryImages.push(element); + } + + return null; + } + + render() { + return this.addURLs(); + } +} + +export default FlameLinkCollectionGalleryContent; \ No newline at end of file diff --git a/src/components/FlameLinkCollectionStructure.js b/src/components/FlameLinkCollectionStructure.js new file mode 100644 index 0000000..ba963cd --- /dev/null +++ b/src/components/FlameLinkCollectionStructure.js @@ -0,0 +1,128 @@ +import React, { Component} from 'react'; +import Grid from '@material-ui/core/Grid'; +import Typography from '@material-ui/core/Typography'; +import { withStyles } from '@material-ui/core/styles'; +import flamelinkApp from '../flamelink.js'; +import FlameLinkImage from './FlameLinkImage'; +import FlameLinkFieldSet from './FlameLinkFieldSet'; + +const styles = theme => ({ + flamelinkItem: { + paddingRight: 20, + paddingLeft: 20, + paddingTop: 20, + }, + }); + +class FlameLinkCollectionStructure extends Component { + constructor() { + super(); + + global.mediaID = ''; + + this.state = { + schemaContent: '', + } + + flamelinkApp.content.get(global.schemaName) + .then(result => this.setState({ + schemaContent: result + })) + } + + getContent(content, field, key, type, description){ + if (type === 'text'){ + if(description === 'h1'){ + return ( + + {content[key]} + + ) + } + if(description === 'h2'){ + return ( + + {content[key]} + + ) + } + if(description === 'h3'){ + return ( + + {content[key]} + + ) + } + if(description === 'h4'){ + return ( + + {content[key]} + + ) + } + if(description === 'h5'){ + return ( + + {content[key]} + + ) + } + if(description === 'h6'){ + return ( + + {content[key]} + + ) + } + else{ + return ( + + {content[key]} + + ) + } + } + if(type === 'textarea'){ + return ( + + {content[key]} + + ) + } + if (type === 'media'){ + for (var val in content[key]){ + global.mediaID = content[key][val]; + return + } + } + if (type === 'fieldset'){ + if(content === ''){ + return + } + else{ + return + } + } + console.log('Content: ', content) + console.log('Field: ', field) + console.log('Key: ', key) + console.log('Type: ', type) + console.log('Description: ', description) + } + + render() { + const { classes } = this.props; + + const lg = this.props.field.gridColumns.lg; + const md = this.props.field.gridColumns.md; + const sm = this.props.field.gridColumns.sm; + const xs = this.props.field.gridColumns.xs; + return( + + {this.getContent(this.props.schemaContent, this.props.field, this.props.field.key, this.props.type, this.props.field.description)} + + ); + } +} + +export default withStyles(styles)(FlameLinkCollectionStructure); \ No newline at end of file diff --git a/src/components/FlameLinkComponentCreations.js b/src/components/FlameLinkComponentCreations.js index 34ee9f4..88ae4bf 100644 --- a/src/components/FlameLinkComponentCreations.js +++ b/src/components/FlameLinkComponentCreations.js @@ -1,25 +1,39 @@ import React, { Component} from 'react'; import FlameLinkStructure from './FlameLinkStructure'; +import FlameLinkCollection from './FlameLinkCollection'; import Grid from '@material-ui/core/Grid'; class FlameLinkComponentCreations extends Component { - - getSchemaFieldData(schemaData){ + + getSchemaFieldData(schemaData, schemaType){ var arr = []; for (var val in schemaData){ arr.push(val); } - return arr.map(this.createComponents, schemaData); + + if(schemaType === 'single'){ + return arr.map(this.createSingleTypeSchemaComponents, schemaData); + } + if(schemaType === 'collection'){ + return this.createCollectionTypeSchemaComponents(schemaData); + } + else{ + return + } } - createComponents(num){ + createSingleTypeSchemaComponents(num){ return } + createCollectionTypeSchemaComponents(schemaData){ + return + } + render() { return( - {this.getSchemaFieldData(this.props.schemaDetails)} + {this.getSchemaFieldData(this.props.schemaDetails, this.props.schemaType)} ); } diff --git a/src/components/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..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/FlameLink.css'; class FlameLinkImage extends Component { constructor() { @@ -20,7 +20,7 @@ class FlameLinkImage extends Component { render() { return( - + ); } diff --git a/src/components/FlameLinkStructure.js b/src/components/FlameLinkStructure.js index 470a592..93e391d 100644 --- a/src/components/FlameLinkStructure.js +++ b/src/components/FlameLinkStructure.js @@ -31,78 +31,78 @@ class FlameLinkStructure extends Component { } getContent(schemaField, key, type, description){ - if (type === 'text'){ - if(description === 'h1'){ - return ( - - {this.state.schemaContent[key]} - - ) + if (type === 'text'){ + if(description === 'h1'){ + return ( + + {this.state.schemaContent[key]} + + ) + } + if(description === 'h2'){ + return ( + + {this.state.schemaContent[key]} + + ) + } + if(description === 'h3'){ + return ( + + {this.state.schemaContent[key]} + + ) + } + if(description === 'h4'){ + return ( + + {this.state.schemaContent[key]} + + ) + } + if(description === 'h5'){ + return ( + + {this.state.schemaContent[key]} + + ) + } + if(description === 'h6'){ + return ( + + {this.state.schemaContent[key]} + + ) + } + else{ + return ( + + {this.state.schemaContent[key]} + + ) + } } - if(description === 'h2'){ - return ( - - {this.state.schemaContent[key]} - - ) - } - if(description === 'h3'){ - return ( - - {this.state.schemaContent[key]} - - ) - } - if(description === 'h4'){ - return ( - - {this.state.schemaContent[key]} - - ) - } - if(description === 'h5'){ - return ( - - {this.state.schemaContent[key]} - - ) - } - if(description === 'h6'){ - return ( - - {this.state.schemaContent[key]} - - ) - } - else{ + if(type === 'textarea'){ return ( {this.state.schemaContent[key]} - ) + ) } - } - if(type === 'textarea'){ - return ( - - {this.state.schemaContent[key]} - - ) - } - if (type === 'media'){ - for (var val in this.state.schemaContent[key]){ - global.mediaID = this.state.schemaContent[key][val]; - return - } - } - if (type === 'fieldset'){ - if(this.state.schemaContent === ''){ - return + if (type === 'media'){ + for (var val in this.state.schemaContent[key]){ + global.mediaID = this.state.schemaContent[key][val]; + return + } } - else{ - return + if (type === 'fieldset'){ + if(this.state.schemaContent === ''){ + return + } + else{ + return + } } - } } render() { diff --git a/src/components/Main.js b/src/components/Main.js index 88b98f7..f6140fe 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'; @@ -21,7 +22,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'; @@ -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; @@ -71,7 +73,8 @@ class ResponsiveDrawer extends React.Component { state = { mobileOpen: false, key: 'Home', - open: false + open: false, + open2: false, }; handleDrawerToggle = () => { @@ -82,6 +85,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 +143,26 @@ class ResponsiveDrawer extends React.Component { + + + + + + {this.state.open2 ? : } + + + + this.nav('Gallery1')}> + + + this.nav('Gallery2')}> + + + this.nav('Gallery3')}> + + + + @@ -195,10 +222,13 @@ 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 === '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..ce87837 --- /dev/null +++ b/src/components/RenderGallery.js @@ -0,0 +1,39 @@ +import React, { Component } from 'react'; +import ImageGallery from 'react-image-gallery'; +import "react-image-gallery/styles/css/image-gallery.css"; +import '../css/FlameLink.css'; + +class RenderGallery extends Component { + constructor() { + super(); + + this.state = { + showThumbnails: false, + showIndex: true, + showBullets: true, + mounted: false, + } + } + + componentDidMount() { + this.setState({ mounted: true }) + } + + _onImageLoad = event => { + console.debug('loaded image', event.target.src); + } + + render() { + return ( + + ); + } +} + +export default RenderGallery; \ No newline at end of file diff --git a/src/css/FlameLink.css b/src/css/FlameLink.css new file mode 100644 index 0000000..ab1877c --- /dev/null +++ b/src/css/FlameLink.css @@ -0,0 +1,4 @@ +.flamelinkImage { + width: 100%; + max-width: 500px; +} \ No newline at end of file diff --git a/src/pages/About.js b/src/pages/About.js new file mode 100644 index 0000000..9b46421 --- /dev/null +++ b/src/pages/About.js @@ -0,0 +1,43 @@ +import React, { Component, Fragment } from 'react'; +import FlameLinkComponentCreations from '../components/FlameLinkComponentCreations'; +import flamelinkApp from '../flamelink.js'; + +class About extends Component { + constructor() { + super(); + + 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 + })) + } + + componentDidMount() { + document.title = 'Marten Tracker | About'; + } + + render() { + + return ( +
+ + + +
+ ); + } +} + +export default About; diff --git a/src/pages/Home.js b/src/pages/Home.js index e8b56b2..53844f9 100644 --- a/src/pages/Home.js +++ b/src/pages/Home.js @@ -1,6 +1,8 @@ import React, { Component } from 'react'; import FlameLinkComponentCreations from '../components/FlameLinkComponentCreations'; +import FlameLinkCollectionGallery from '../components/FlameLinkCollectionGallery'; import flamelinkApp from '../flamelink'; +import Grid from '@material-ui/core/Grid'; class Home extends Component { constructor() { @@ -10,12 +12,18 @@ class Home extends Component { this.state = { schemaDetails: '', + schemaType: '', } - flamelinkApp.schemas.getFields(global.schemaName, { fields: ['title', 'key', 'type', 'gridColumns', 'description', 'options'] }) + flamelinkApp.schemas.getFields(global.schemaName, { fields: [ 'title', 'key', 'type', 'gridColumns', 'description', 'options'] }) .then(result => this.setState({ schemaDetails: result })) + + flamelinkApp.schemas.get(global.schemaName) + .then(result => this.setState({ + schemaType: result.type + })) } componentDidMount() { @@ -24,7 +32,10 @@ class Home extends Component { render() { return ( - + + + + ); } }