Merge branch 'develop'

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 <FlameLinkCollectionComponentCreations schemaData={this[0]} schemaContent={this[1][num]} arr={arr3} key={num} />
+    }
+
+    render() {
+        return(
+            <div>
+                {this.getCollectionContent(this.props.schemaData)}
+            </div>
+        );
+    }
+}
+
+export default FlameLinkCollection;

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 <FlameLinkCollectionStructure schemaData={this[0]} schemaContent={this[1]} field={this[0][num]} type={this[0][num].type} key={this[0][num].key} />
+    }
+
+    render() {
+        return(
+                <Grid container>
+                    {this.createCollectionEntries(this.props.schemaData, this.props.schemaContent, this.props.arr)}
+                </Grid>
+        );
+    }
+}
+
+export default FlameLinkCollectionComponentCreations;

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  (
+                            <Typography variant='display4' id={key}>
+                                {content[key]}
+                            </Typography>
+                            )                
+                }
+                if(description === 'h2'){
+                    return  (
+                            <Typography variant='display3' id={key}>
+                                {content[key]}
+                            </Typography>
+                            )                
+                }
+                if(description === 'h3'){
+                    return  (
+                            <Typography variant='display2' id={key}>
+                                {content[key]}
+                            </Typography>
+                            )                
+                }
+                if(description === 'h4'){
+                    return  (
+                            <Typography variant='display1' id={key}>
+                                {content[key]}
+                            </Typography>
+                            )                
+                }
+                if(description === 'h5'){
+                    return  (
+                            <Typography variant='headline' id={key}>
+                                {content[key]}
+                            </Typography>
+                            )                
+                }
+                if(description === 'h6'){
+                    return  (
+                            <Typography variant='title' id={key}>
+                                {content[key]}
+                            </Typography>
+                            )                
+                }
+                else{
+                    return  (
+                            <Typography variant='body2' component="p" id={key}>
+                                {content[key]}
+                            </Typography>
+                            )
+                }
+            }
+            if(type === 'textarea'){
+                return  (
+                        <Typography variant='body2' component="p" id={key}>
+                            {content[key]}
+                        </Typography>
+                        )               
+            }
+            if (type === 'media'){
+                for (var val in content[key]){
+                    global.mediaID = content[key][val];
+                    return <FlameLinkImage/>
+                } 
+            }
+            if (type === 'fieldset'){
+                if(content === ''){
+                    return
+                }
+                else{
+                    return <FlameLinkFieldSet field={content[key]} field2={field.options}/>
+                }
+            }
+        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(
+            <Grid item lg={lg} md={md} sm={sm} xs={xs} className={classes.flamelinkItem}>
+                    {this.getContent(this.props.schemaContent, this.props.field, this.props.field.key, this.props.type, this.props.field.description)}
+            </Grid>
+        );
+    }
+}
+
+export default withStyles(styles)(FlameLinkCollectionStructure);

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 <FlameLinkStructure schemaData={this} field={this[num]} type={this[num].type} key={this[num].key} />
     }
 
+    createCollectionTypeSchemaComponents(schemaData){  
+        return <FlameLinkCollection schemaData={schemaData} />
+    }
+
     render() {
         return(
                 <Grid container>
-                    {this.getSchemaFieldData(this.props.schemaDetails)}
+                    {this.getSchemaFieldData(this.props.schemaDetails, this.props.schemaType)}
                 </Grid>
         );
     }

src/components/FlameLinkFieldSetContent.js

@@ -21,11 +21,11 @@ class FlameLinkFieldSetContent extends Component {
                         )
         }
         if(type === 'textarea'){
-            return  (
+                return  (
-                    <Typography variant='body2' component="p" id={this.props.field.key} gutterBottom>
+                        <Typography variant='body2' component="p" id={this.props.field.key} gutterBottom>
-                    {fieldsetContent[key]}
+                        {fieldsetContent[key]}
-                    </Typography>
+                        </Typography>
-                    )               
+                        ) 
         }
         if (type === 'media'){
             for (var val in fieldsetContent[key]){

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(
                 <Typography align='center'>
-                    <img src={this.state.mediaURL} width="70%" alt='' />
+                    <img src={this.state.mediaURL} className='flamelinkImage' alt='' />
                 </Typography>
         );
     }

src/components/FlameLinkStructure.js

@@ -31,78 +31,78 @@ class FlameLinkStructure extends Component {
       }
 
     getContent(schemaField, key, type, description){
-        if (type === 'text'){
+            if (type === 'text'){
-            if(description === 'h1'){
+                if(description === 'h1'){
-                return  (
+                    return  (
-                        <Typography variant='display4' id={key}>
+                            <Typography variant='display4' id={key}>
-                            {this.state.schemaContent[key]}
+                                {this.state.schemaContent[key]}
-                        </Typography>
+                            </Typography>
-                        )                
+                            )                
+                }
+                if(description === 'h2'){
+                    return  (
+                            <Typography variant='display3' id={key}>
+                                {this.state.schemaContent[key]}
+                            </Typography>
+                            )                
+                }
+                if(description === 'h3'){
+                    return  (
+                            <Typography variant='display2' id={key}>
+                                {this.state.schemaContent[key]}
+                            </Typography>
+                            )                
+                }
+                if(description === 'h4'){
+                    return  (
+                            <Typography variant='display1' id={key}>
+                                {this.state.schemaContent[key]}
+                            </Typography>
+                            )                
+                }
+                if(description === 'h5'){
+                    return  (
+                            <Typography variant='headline' id={key}>
+                                {this.state.schemaContent[key]}
+                            </Typography>
+                            )                
+                }
+                if(description === 'h6'){
+                    return  (
+                            <Typography variant='title' id={key}>
+                                {this.state.schemaContent[key]}
+                            </Typography>
+                            )                
+                }
+                else{
+                    return  (
+                            <Typography variant='body2' component="p" id={key}>
+                                {this.state.schemaContent[key]}
+                            </Typography>
+                            )
+                }
             }
-            if(description === 'h2'){
+            if(type === 'textarea'){
-                return  (
-                        <Typography variant='display3' id={key}>
-                            {this.state.schemaContent[key]}
-                        </Typography>
-                        )                
-            }
-            if(description === 'h3'){
-                return  (
-                        <Typography variant='display2' id={key}>
-                            {this.state.schemaContent[key]}
-                        </Typography>
-                        )                
-            }
-            if(description === 'h4'){
-                return  (
-                        <Typography variant='display1' id={key}>
-                            {this.state.schemaContent[key]}
-                        </Typography>
-                        )                
-            }
-            if(description === 'h5'){
-                return  (
-                        <Typography variant='headline' id={key}>
-                            {this.state.schemaContent[key]}
-                        </Typography>
-                        )                
-            }
-            if(description === 'h6'){
-                return  (
-                        <Typography variant='title' id={key}>
-                            {this.state.schemaContent[key]}
-                        </Typography>
-                        )                
-            }
-            else{
                 return  (
                         <Typography variant='body2' component="p" id={key}>
                             {this.state.schemaContent[key]}
                         </Typography>
                         )               
             }
-        }
+            if (type === 'media'){
-        if(type === 'textarea'){
+                for (var val in this.state.schemaContent[key]){
-            return  (
+                    global.mediaID = this.state.schemaContent[key][val];
-                    <Typography variant='body2' component="p" id={key}>
+                    return <FlameLinkImage/>
-                        {this.state.schemaContent[key]}
+                } 
-                    </Typography>
-                    )               
-        }
-        if (type === 'media'){
-            for (var val in this.state.schemaContent[key]){
-                global.mediaID = this.state.schemaContent[key][val];
-                return <FlameLinkImage/>
             }
-        }
+            if (type === 'fieldset'){
-        if (type === 'fieldset'){
+                if(this.state.schemaContent === ''){
-            if(this.state.schemaContent === ''){
+                    return
-                return
+                }
+                else{
+                    return <FlameLinkFieldSet field={this.state.schemaContent[key]} field2={schemaField.options}/>
+                }
             }
-            else{
-                return <FlameLinkFieldSet field={this.state.schemaContent[key]} field2={schemaField.options}/>
-            }
-        }
     }
 
     render() {

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' && <Report />}
                     {this.state.key === 'Map' && <ViewMap />}
                     {this.state.key === 'List' && <SightingList />}
-                    {this.state.key === 'About' && <Info />}
+                    {this.state.key === 'About' && <About />}
                     {this.state.key === 'Easy-Quiz' && <Quiz difficulty='Easy'/>}
                     {this.state.key === 'Intermediate-Quiz' && <Quiz difficulty='Intermediate'/>}
                     {this.state.key === 'Advanced-Quiz' && <Quiz difficulty='Advanced'/>}

src/css/FlameLinkImage.css

@@ -0,0 +1,4 @@
+.flamelinkImage {
+  width: 100%;
+  max-width: 500px;
+}

src/pages/About.js

@@ -0,0 +1,39 @@
+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
+        }))
+    }
+
+    render() {
+        
+        return (
+            <div>
+                <Fragment>
+                    <FlameLinkComponentCreations schemaDetails = {this.state.schemaDetails} schemaType = {this.state.schemaType}/>
+                </Fragment>
+            </div>
+        );
+    }
+}
+
+export default About;

src/pages/Home.js

@@ -10,12 +10,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 +30,7 @@ class Home extends Component {
 
     render() {
         return (
-            <FlameLinkComponentCreations schemaDetails={this.state.schemaDetails} />
+            <FlameLinkComponentCreations schemaDetails={this.state.schemaDetails} schemaType = {this.state.schemaType}/>
         );
     }
 }