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

Merge pull request #74 from alDuncanson/homePageRedo 

Home page redo
This commit is contained in:
Alex Duncanson 2018-12-16 20:48:31 -05:00 committed by GitHub
parent f31d29f76c 4afa4395d7
commit 7b0b1de103
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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;