Merge pull request #45 from alDuncanson/flamelink

Flamelink

package.json

@@ -5,11 +5,15 @@
   "dependencies": {
     "@material-ui/core": "^3.1.0",
     "@material-ui/icons": "^3.0.1",
+    "ajv": "^6.0.0",
     "disqus-react": "^1.0.5",
     "firebase": "^5.5.2",
-    "firebase-admin": "^6.0.0",
+    "firebase-admin": "^6.1.0",
     "flamelink": "^0.19.2",
     "google-maps-react": "^2.0.2",
+    "grpc": "^1.15.1",
+    "material-ui": "^1.0.0-beta.16",
+    "material-ui-icons": "^1.0.0-beta.36",
     "moment": "^2.22.2",
     "react": "^16.5.1",
     "react-dom": "^16.5.1",

src/components/FlameLinkComponentCreations.js

@@ -0,0 +1,28 @@
+import React, { Component} from 'react';
+import FlameLinkStructure from './FlameLinkStructure';
+import Grid from '@material-ui/core/Grid';
+
+class FlameLinkComponentCreations extends Component {
+
+    getSchemaFieldData(schemaData){
+        var arr = [];
+        for (var val in schemaData){
+            arr.push(val);
+        }
+        return arr.map(this.createComponents, schemaData);
+    }
+
+    createComponents(num){
+        return <FlameLinkStructure schemaData={this} field={this[num]} type={this[num].type} key={this[num].key} />
+    }
+
+    render() {
+        return(
+                <Grid container>
+                    {this.getSchemaFieldData(this.props.schemaDetails)}
+                </Grid>
+        );
+    }
+}
+
+export default FlameLinkComponentCreations;

src/components/FlameLinkFieldSet.js

@@ -0,0 +1,31 @@
+import React, { Component} from 'react';
+import Grid from '@material-ui/core/Grid';
+import FlameLinkFieldSetContent from './FlameLinkFieldSetContent';
+
+
+class FlameLinkFieldSet extends Component {
+
+
+    getFieldSetContent(content1, content2){
+        var arr = [];
+        for (var val in content2){
+            arr.push(val);
+        }  
+        var arrContent = [content1, content2];
+        return arr.map(this.createFieldSetComponents, arrContent);
+    }
+
+    createFieldSetComponents(num){
+        return <FlameLinkFieldSetContent field={this[1][num]} type={this[1][num].type} key={this[1][num].key} fieldKey={this[1][num].key} data={this[0]}/>
+    }
+
+    render() {
+        return(
+            <Grid item xs={12}>
+                    {this.getFieldSetContent(this.props.field, this.props.field2)}
+            </Grid>
+        );
+    }
+}
+
+export default FlameLinkFieldSet;

src/components/FlameLinkFieldSetContent.js

@@ -0,0 +1,52 @@
+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 FlameLinkImage from './FlameLinkImage';
+
+const styles = theme => ({
+        flamelinkFieldSetItem: {
+            paddingBottom: 10,
+        },
+    });
+
+class FlameLinkFieldSetContent extends Component {
+
+    getContent(key, type, description, fieldsetContent){
+        if (type === 'text'){
+                return  (
+                        <Typography variant='body2' component="p" id={this.props.field.key}>
+                        {fieldsetContent[key]}
+                        </Typography>
+                        )
+        }
+        if(type === 'textarea'){
+            return  (
+                    <Typography variant='body2' component="p" id={this.props.field.key} gutterBottom>
+                    {fieldsetContent[key]}
+                    </Typography>
+                    )               
+        }
+        if (type === 'media'){
+            for (var val in fieldsetContent[key]){
+                return <FlameLinkImage content={fieldsetContent[key][val]}/>
+            } 
+        }
+    }
+
+    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.flamelinkFieldSetItem}>
+                    {this.getContent(this.props.fieldKey, this.props.type, this.props.field.description, this.props.data)}
+            </Grid>
+        );
+    }
+}
+
+export default withStyles(styles)(FlameLinkFieldSetContent);

src/components/FlameLinkImage.js

@@ -0,0 +1,29 @@
+import React, { Component } from 'react';
+import Typography from '@material-ui/core/Typography';
+import flamelinkApp from '../flamelink.js';
+
+
+class FlameLinkImage extends Component {
+    constructor() {
+        super();
+
+        this.state = {
+          mediaURL: '',
+        }
+
+        flamelinkApp.storage.getURL(global.mediaID)
+                    .then(url => this.setState({
+                      mediaURL: url
+                    }))
+      }
+
+    render() {
+        return(
+                <Typography align='center'>
+                    <img src={this.state.mediaURL} width="70%" alt='' />
+                </Typography>
+        );
+    }
+}
+
+export default FlameLinkImage;

src/components/FlameLinkStructure.js

@@ -0,0 +1,123 @@
+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 FlameLinkStructure extends Component {
+    constructor() {
+        super();
+        
+        global.mediaID = '';
+
+        this.state = {
+          schemaContent: '',
+        }
+
+        flamelinkApp.content.get(global.schemaName)
+        .then(result => this.setState({
+          schemaContent: result
+        }))
+      }
+
+    getContent(schemaField, key, type, description){
+        if (type === 'text'){
+            if(description === 'h1'){
+                return  (
+                        <Typography variant='display4' id={key}>
+                            {this.state.schemaContent[key]}
+                        </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(type === 'textarea'){
+            return  (
+                    <Typography variant='body2' component="p" id={key}>
+                        {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(this.state.schemaContent === ''){
+                return
+            }
+            else{
+                return <FlameLinkFieldSet field={this.state.schemaContent[key]} field2={schemaField.options}/>
+            }
+        }
+    }
+
+    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.field, this.props.field.key, this.props.type, this.props.field.description)}
+            </Grid>
+        );
+    }
+}
+
+export default withStyles(styles)(FlameLinkStructure);

src/components/Flamelink.js

@@ -1,9 +0,0 @@
-import { Component } from 'react';
-
-class Flamelink extends Component {
-    render() {
-        return(null);
-    }
-}
-
-export default Flamelink;

src/components/Main.js

@@ -16,10 +16,12 @@ import MenuIcon from '@material-ui/icons/Menu';
 import HomeIcon from '@material-ui/icons/Home';
 import AssignmentIcon from '@material-ui/icons/Assignment';
 import MapIcon from '@material-ui/icons/Map';
+import InfoIcon from '@material-ui/icons/Info';
 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 Quiz from '../pages/QuizPage';
 import SightingList from '../pages/SightingList';
 import Report from '../pages/Report';
@@ -110,6 +112,10 @@ class ResponsiveDrawer extends React.Component {
                         <ListItemIcon><ListIcon /></ListItemIcon>
                         <ListItemText primary='List' />
                     </ListItem>
+                    <ListItem button key='About' onClick={() => this.nav('About')}>
+                        <ListItemIcon><InfoIcon /></ListItemIcon>
+                        <ListItemText primary='About' />
+                    </ListItem>
                     <ListItem button onClick={this.handleClick}>
                         <ListItemIcon>
                             <SlideshowIcon />
@@ -189,6 +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 === 'Easy-Quiz' && <Quiz difficulty='Easy'/>}
                     {this.state.key === 'Medium-Quiz' && <Quiz difficulty='Medium'/>}
                     {this.state.key === 'Hard-Quiz' && <Quiz difficulty='Hard'/>}

src/pages/Home.js

@@ -1,7 +1,23 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import Typography from '@material-ui/core/Typography';
+import FlameLinkComponentCreations from '../components/FlameLinkComponentCreations';
+import flamelinkApp from '../flamelink.js';
 
 class Home extends Component {
+    constructor() {
+        super();
+
+        global.schemaName = 'martenHome';
+
+        this.state = {
+          schemaDetails: '',
+        }
+
+        flamelinkApp.schemas.getFields(global.schemaName, { fields: [ 'title', 'key', 'type', 'gridColumns', 'description', 'options' ] })
+        .then(result => this.setState({
+          schemaDetails: result
+        }))
+      }
 
     render() {
         return (
@@ -9,6 +25,9 @@ class Home extends Component {
                 <Typography variant='display1' align='center' gutterBottom>
                     Home
                 </Typography>
+                <Fragment>
+                    <FlameLinkComponentCreations schemaDetails = {this.state.schemaDetails}/>
+                </Fragment>
             </div>
         );
     }

src/pages/Info.js

@@ -1,17 +1,30 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
-import Typography from '@material-ui/core/Typography';
+import FlameLinkComponentCreations from '../components/FlameLinkComponentCreations';
-import Flamelink from '../components/Flamelink';
+import flamelinkApp from '../flamelink.js';
 
 class Info 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 (
             <div>
-                <Flamelink flamelinkApp={this.props.flamelinkApp}/>
+                <Fragment>
-                <Typography variant='display1' align='center' gutterBottom>
+                    <FlameLinkComponentCreations schemaDetails = {this.state.schemaDetails}/>
-                    Info
+                </Fragment>
-                </Typography>
-                <p id="flamelinkDemo"></p>
           
             </div>
         );