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