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

Added multiple schemas to home page, removed similar species gallery and added similar species images to correct home page section. Changed the Paper stylings for the About and Home sections for consistency.

This commit is contained in:
ajmaley 2018-12-16 14:04:02 -05:00
parent 305f405468
commit 4afa4395d7
6 changed files with 90 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/Main.js
View File

@ -279,11 +279,6 @@ class ResponsiveDrawer extends React.Component {
<ListItemText inset primary="Martens by Day" />
</ListItem>
</Link>
<Link to={{ pathname: 'galleries-species-similar-to-martens', state: { galleryName: 'similarSpecies' } }}>
<ListItem button className={classes.nested}>
<ListItemText inset primary="Species Similar to Martens" />
</ListItem>
</Link>
</List>
</Collapse>
</List>

23
src/components/flamelink/FlameLinkCollectionComponentCreations.js
View File

@ -1,19 +1,6 @@
import React, { Component } from 'react';
import Grid from '@material-ui/core/Grid';
import FlameLinkCollectionStructure from './FlameLinkCollectionStructure';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
const styles = theme => ({
root: {
...theme.mixins.gutters(),
margin: theme.spacing.unit * 2,
paddingTop: theme.spacing.unit * 2,
paddingBottom: theme.spacing.unit * 2,
width: '100%'
},
});
class FlameLinkCollectionComponentCreations extends Component {
@ -29,20 +16,12 @@ class FlameLinkCollectionComponentCreations extends Component {
}
render() {
const { classes } = this.props;
return (
<Paper className={classes.root} elevation={4}>
<Grid container>
{this.createCollectionEntries(this.props.schemaData, this.props.schemaContent, this.props.arr)}
</Grid>
</Paper>
);
}
}
FlameLinkCollectionComponentCreations.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(FlameLinkCollectionComponentCreations);
export default FlameLinkCollectionComponentCreations;

26
src/components/flamelink/FlameLinkComponentCreations.js
View File

@ -2,17 +2,33 @@ import React, { Component } from 'react';
import FlameLinkStructure from './FlameLinkStructure';
import FlameLinkCollection from './FlameLinkCollection';
import Grid from '@material-ui/core/Grid';
import { withStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
const styles = theme => ({
root: {
...theme.mixins.gutters(),
margin: theme.spacing.unit * 2,
paddingTop: theme.spacing.unit * 2,
paddingBottom: theme.spacing.unit * 2,
width: '100%'
},
});
class FlameLinkComponentCreations extends Component {
getSchemaFieldData(schemaData, schemaType) {
var arr = [];
var arr2 = [];
for (var val in schemaData) {
arr.push(val);
}
arr2.push(schemaData);
arr2.push(this.props.schemaName);
if (schemaType === 'single') {
return arr.map(this.createSingleTypeSchemaComponents, schemaData);
return arr.map(this.createSingleTypeSchemaComponents, arr2);
}
if (schemaType === 'collection') {
return this.createCollectionTypeSchemaComponents(schemaData);
@ -23,7 +39,7 @@ class FlameLinkComponentCreations extends Component {
}
createSingleTypeSchemaComponents(num) {
return <FlameLinkStructure schemaData={this} field={this[num]} type={this[num].type} key={this[num].key} />
return <FlameLinkStructure schemaName={this[1]} schemaData={this[0]} field={this[0][num]} type={this[0][num].type} key={this[0][num].key} />
}
createCollectionTypeSchemaComponents = schemaData => {
@ -31,12 +47,16 @@ class FlameLinkComponentCreations extends Component {
}
render() {
const { classes } = this.props;
return (
<Paper className={classes.root} elevation={4}>
<Grid container>
{this.getSchemaFieldData(this.props.schemaDetails, this.props.schemaType)}
</Grid>
</Paper>
);
}
}
export default FlameLinkComponentCreations;
export default withStyles(styles)(FlameLinkComponentCreations);

6
src/components/flamelink/FlameLinkStructure.js
View File

@ -15,8 +15,8 @@ const styles = theme => ({
});
class FlameLinkStructure extends Component {
constructor() {
super();
constructor(props) {
super(props);
global.mediaID = '';
@ -24,7 +24,7 @@ class FlameLinkStructure extends Component {
schemaContent: '',
}
flamelinkApp.content.get(global.schemaName)
flamelinkApp.content.get(this.props.schemaName)
.then(result => this.setState({
schemaContent: result
}))

71
src/pages/Home.js
View File

@ -3,26 +3,63 @@ import FlameLinkComponentCreations from '../components/flamelink/FlameLinkCompon
import FlameLinkCollectionGallery from '../components/flamelink/FlameLinkCollectionGallery';
import flamelinkApp from '../utilities/flamelink';
import Grid from '@material-ui/core/Grid';
import { Typography } from '@material-ui/core';
import { withStyles } from '@material-ui/core/styles';
const styles = theme => ({
header: {
paddingRight: 20,
paddingLeft: 20,
paddingTop: 20,
},
});
class Home extends Component {
constructor() {
super();
global.schemaName = 'martenHome';
constructor(props) {
super(props);
this.state = {
schemaDetails: '',
schemaType: '',
schemaNameHistory: 'martenHomeHistory',
schemaDetailsHistory: '',
schemaTypeHistory: '',
schemaNameInformation: 'martenHomeInformation',
schemaDetailsInformation: '',
schemaTypeInformation: '',
schemaNameSimilarSpecies: 'martenHomeSimilarSpecies',
schemaDetailsSimilarSpecies: '',
schemaTypeSimilarSpecies: '',
}
flamelinkApp.schemas.getFields(global.schemaName, { fields: [ 'title', 'key', 'type', 'gridColumns', 'description', 'options'] })
flamelinkApp.schemas.getFields(this.state.schemaNameHistory, { fields: [ 'title', 'key', 'type', 'gridColumns', 'description', 'options'] })
.then(result => this.setState({
schemaDetails: result
schemaDetailsHistory: result
}))
flamelinkApp.schemas.get(global.schemaName)
flamelinkApp.schemas.get(this.state.schemaNameHistory)
.then(result => this.setState({
schemaType: result.type
schemaTypeHistory: result.type
}))
flamelinkApp.schemas.getFields(this.state.schemaNameInformation, { fields: [ 'title', 'key', 'type', 'gridColumns', 'description', 'options'] })
.then(result => this.setState({
schemaDetailsInformation: result
}))
flamelinkApp.schemas.get(this.state.schemaNameInformation)
.then(result => this.setState({
schemaTypeInformation: result.type
}))
flamelinkApp.schemas.getFields(this.state.schemaNameSimilarSpecies, { fields: [ 'title', 'key', 'type', 'gridColumns', 'description', 'options'] })
.then(result => this.setState({
schemaDetailsSimilarSpecies: result
}))
flamelinkApp.schemas.get(this.state.schemaNameSimilarSpecies)
.then(result => this.setState({
schemaTypeSimilarSpecies: result.type
}))
}
@ -31,13 +68,23 @@ class Home extends Component {
}
render() {
const { classes } = this.props;
return (
<Grid container>
<FlameLinkCollectionGallery galleryName={'martenHomeGallery'} showTitle={false}/>
<FlameLinkComponentCreations schemaDetails={this.state.schemaDetails} schemaType = {this.state.schemaType}/>
<Typography variant="display1" className={classes.header}>History of martens in Michigan’s Lower Peninsula</Typography>
<FlameLinkComponentCreations schemaDetails={this.state.schemaDetailsHistory} schemaType={this.state.schemaTypeHistory} schemaName={this.state.schemaNameHistory} />
<Typography variant="display1" className={classes.header}>Marten information</Typography>
<FlameLinkComponentCreations schemaDetails={this.state.schemaDetailsInformation} schemaType={this.state.schemaTypeInformation} schemaName={this.state.schemaNameInformation} />
<Typography variant="display1" className={classes.header}>Similar species that might be confused with martens in Michigan</Typography>
<FlameLinkComponentCreations schemaDetails={this.state.schemaDetailsSimilarSpecies} schemaType={this.state.schemaTypeSimilarSpecies} schemaName={this.state.schemaNameSimilarSpecies} />
</Grid>
);
}
}
export default Home;
export default withStyles(styles)(Home);

38
src/pages/Info.js
View File

@ -1,38 +0,0 @@
import React, { Component, Fragment } from 'react';
import FlameLinkComponentCreations from '../components/flamelink/FlameLinkComponentCreations';
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
}))
}
componentDidMount() {
document.title = 'Marten Tracker | Info';
}
render() {
return (
<div>
<Fragment>
<FlameLinkComponentCreations schemaDetails={this.state.schemaDetails} />
</Fragment>
</div>
);
}
}
export default Info;