GVSU/marten-application
GVSU
/
marten-application
1
0
Fork 0
Code Pull Requests Releases Activity

Merge branch 'develop'

This commit is contained in:
ajmaley 2018-11-23 13:42:01 -05:00
parent 137b78359b 886db4a12d
commit 559e7debfe
11 changed files with 343 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/components/FlameLinkCollection.js Normal file
View File

@ -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;

25
src/components/FlameLinkCollectionComponentCreations.js Normal file
View File

@ -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;

128
src/components/FlameLinkCollectionStructure.js Normal file
View File

@ -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);

24
src/components/FlameLinkComponentCreations.js
View File

@ -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>
);
}

10
src/components/FlameLinkFieldSetContent.js
View File

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

4
src/components/FlameLinkImage.js
View File

@ -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>
);
}

128
src/components/FlameLinkStructure.js
View File

@ -31,78 +31,78 @@ class FlameLinkStructure extends Component {
}
getContent(schemaField, key, type, description){
if (type === 'text'){
if(description === 'h1'){
return (
<Typography variant='display4' id={key}>
{this.state.schemaContent[key]}
</Typography>
)
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(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{
if(type === 'textarea'){
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
if (type === 'media'){
for (var val in this.state.schemaContent[key]){
global.mediaID = this.state.schemaContent[key][val];
return <FlameLinkImage/>
}
}
else{
return <FlameLinkFieldSet field={this.state.schemaContent[key]} field2={schemaField.options}/>
if (type === 'fieldset'){
if(this.state.schemaContent === ''){
return
}
else{
return <FlameLinkFieldSet field={this.state.schemaContent[key]} field2={schemaField.options}/>
}
}
}
}
render() {

4
src/components/Main.js
View File

@ -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'/>}

4
src/css/FlameLinkImage.css Normal file
View File

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

39
src/pages/About.js Normal file
View File

@ -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;

10
src/pages/Home.js
View File

@ -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}/>
);
}
}