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

Added ability to parse fieldset data. Added some basic stylings for content. Cleaned up code.

Browse Source
This commit is contained in:
ajmaley 2018-11-01 20:59:47 -04:00
parent ce0d5d2e1e
commit 6ecf626659
7 changed files with 148 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Layout.js → src/components/FlameLinkComponentCreations.js
View File

@ -2,7 +2,7 @@ import React, { Component} from 'react';
import FlameLinkStructure from './FlameLinkStructure';
import Grid from '@material-ui/core/Grid';
class Layout extends Component {
class FlameLinkComponentCreations extends Component {
getSchemaFieldData(schemaData){
var arr = [];
@ -13,7 +13,7 @@ class Layout extends Component {
}
createComponents(num){
return <FlameLinkStructure field={this[num]} type={this[num].type} key={this[num].key}/>
return <FlameLinkStructure schemaData={this} field={this[num]} type={this[num].type} key={this[num].key} />
}
render() {
@ -25,4 +25,4 @@ class Layout extends Component {
}
}
export default Layout;
export default FlameLinkComponentCreations;

31
src/components/FlameLinkFieldSet.js Normal file
View File

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

43
src/components/FlameLinkFieldSetContent.js Normal file
View File

@ -0,0 +1,43 @@
import React, { Component} from 'react';
import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
import FlameLinkImage from './FlameLinkImage';
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 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}>
{this.getContent(this.props.fieldKey, this.props.type, this.props.field.description, this.props.data)}
</Grid>
);
}
}
export default FlameLinkFieldSetContent;

2
src/components/FlameLinkImage.js
View File

@ -15,7 +15,7 @@ class FlameLinkImage extends Component {
.then(url => this.setState({
mediaURL: url
}))
return <img src={this.state.mediaURL} width="100%" alt='' />
return <img src={this.state.mediaURL} width='100%' alt='' />
}
render() {

71
src/components/FlameLinkStructure.js
View File

@ -1,9 +1,18 @@
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() {
@ -13,55 +22,99 @@ class FlameLinkStructure extends Component {
schemaContent: '',
}
flamelinkApp.content.get('martenSchemaDemo')
flamelinkApp.content.get(global.schemaName)
.then(result => this.setState({
schemaContent: result
}))
}
getContent(key, type, description){
getContent(schemaField, key, type, description){
if (type === 'text'){
if(description === 'h1'){
return (
<Typography variant="display2" id={this.props.field.key}>
<Typography variant='display4' id={key}>
{this.state.schemaContent[key]}
</Typography>
)
}
if(description === 'h2'){
return (
<Typography variant="display3" id={this.props.field.key}>
<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 component="p" id={this.props.field.key}>
<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]){
return <FlameLinkImage content={this.state.schemaContent[key][val]}/>
}
}
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}>
{this.getContent(this.props.field.key, this.props.type, this.props.field.description)}
<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 FlameLinkStructure;
export default withStyles(styles)(FlameLinkStructure);

12
src/keys/marten-application-firebase-adminsdk-zvjmp-c177ac648f.json
View File

@ -1,12 +0,0 @@
{
"type": "service_account",
"project_id": "marten-application",
"private_key_id": "c177ac648f803d7e5e4398e4d7302ea4e6972c79",
"private_key": "-----BEGIN PRIVATE KEY-----\nMIIEvgIBADANBgkqhkiG9w0BAQEFAASCBKgwggSkAgEAAoIBAQDygOhbLLjSDLAd\n9B29umgVUrAn4/a1lGE04j6aQrjbgLa/NjU9u12dRiiOFDLX3QjEWFBcLYrU4Eb9\ncD48TJug+/Nc0nFjFk2GATmzlFnMzOaMCbH844TBX34h0UEgPt+iQh7g3cEH685a\nm0zlDXGOh88POvcTtez8S+2UMU6J+6mNh/ErRli3lTuD4zTGpZA3SyX8Us8aoFaG\njaC7P9T10M5kZWmGZMg6DiywX9xnjWPCI5hp1XE3SkyRQ1vpsA9lCPZPxb5QS2yM\nTYBd4Qh90kbEA0jVPIjIt8JwboFAV9UCuG4SQ44WnoSikvVYhU4esBIsmsKRD7bj\nrFATV5hxAgMBAAECggEABkfsVL22mwKm/lyd91W8V8aKr1rQP1Vcs+1i9pUBM5a8\nrPzNAdiAMQhR2TW42CZWgXrh2HRZxOAa+JobU42ep4uVCt+8vfa0OvL9zQrb7VH2\ni/SdlH2qWOWVt0+jnJ+iRFIq+XMm6nMLJwXAFuvrZ7gY5uWlpAAdl26KRJEHHive\niPK2Ri0bFqZ/xSSaNYmPKa4xRNKgpvarNcJPuiOdpzVq1G3S1TC7/DcYeWHxxHry\nPh/9RKPX5H5zzaObBw8jTMqFouh/BPw1CU5QLoHe1ApVvQ4ypkWf377/2eQArc77\ndGl0S0OI64UTb5ZQ5vE8KEVTdE/bjUhlJknQhZhZwQKBgQD6rtZEjMps0smTwfEY\nDmjuSjx6AbjiBtv1c8L3A5nmS3qz/hSqLoWp7EWvQyHRywV1nAXZJB1LNNUaFuio\nfgeC4xPgkd2Eurdj5VkAMeHpaX+Y5tBmm+U04lNjh6JsRFQYMMxgdGiySgbBFfjq\nddg67yK4uTMKlhETS1xzq+MzsQKBgQD3pahufZFdA47hEwmr0CqnwLhzXT2otNFo\ncit6rgdycEynCh2egq8Cj7cPoHmx1IRtiiNORetYb1A/6j6zDm3uXo+4Mxb13Ipe\ncgXMmLBkZurA4iNdq8wOSjHLj27IWfoG3hhmTQ2SJVRdi4bhkfWrDmAPtZ9otKgZ\nlwQ/A2+gwQKBgADNop4hnVxv6Hlyu6UKFsf8sOjrLH586yOENXG5LzsPrtr4y3Qo\nJgF/YlHHc0pKzj+sOlCRzw44ox4sSJ6RmNCQjbXAgec0+fV1/K0Fe+XVkrUYuD47\n7aYXu5CsFJcoOOTC80Sz2soHdrITsfJ+Yiz+KyxQW5uDE5buPOOZ/2ZhAoGBALdF\nxMnIaeyxNmtBgJXDn924FYljBr+02Yj3fU/0PRSnIUM5jEQDqOs3Wp3ZAFbn1P2Q\nDqLdwdcXwgcbHz26Pwb6ulfyj1py1YAh2ELa+SfEtpT6hnvLKV+l7wYb5zukwxGU\nCfCjs5hlwfLc0HxdXbczE0ps+kUt9X3CsmTD8TfBAoGBAJWU+HjJgSAOQBBy7Akw\nYY0sFrRoGlzZHFudLSloarH8csMVxWmLsz4CET6lMRmJbYipEQd5FKxhkfXJvcEn\nTc7x0+5fyAe3zBW4NgchxjWHFLjCNFX+gy4hZFpCbgSg/5EOgNzfKexqgcZR+nzv\nVjcQAU5jOlcZ6MFpDJJNK30k\n-----END PRIVATE KEY-----\n",
"client_email": "firebase-adminsdk-zvjmp@marten-application.iam.gserviceaccount.com",
"client_id": "100533957773437883097",
"auth_uri": "https://accounts.google.com/o/oauth2/auth",
"token_uri": "https://oauth2.googleapis.com/token",
"auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
"client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/firebase-adminsdk-zvjmp%40marten-application.iam.gserviceaccount.com"
}

8
src/pages/Info.js
View File

@ -1,17 +1,19 @@
import React, { Component, Fragment } from 'react';
import Typography from '@material-ui/core/Typography';
import Layout from '../components/Layout';
import FlameLinkComponentCreations from '../components/FlameLinkComponentCreations';
import flamelinkApp from '../flamelink.js';
class Info extends Component {
constructor() {
super();
global.schemaName = 'martenSchemaDemo';
this.state = {
schemaDetails: '',
}
flamelinkApp.schemas.getFields('martenSchemaDemo', { fields: [ 'title', 'key', 'type', 'gridColumns', 'description' ] })
flamelinkApp.schemas.getFields(global.schemaName, { fields: [ 'title', 'key', 'type', 'gridColumns', 'description', 'options' ] })
.then(result => this.setState({
schemaDetails: result
}))
@ -27,7 +29,7 @@ class Info extends Component {
</Typography>
<Fragment>
<Layout schemaDetails = {this.state.schemaDetails}/>
<FlameLinkComponentCreations schemaDetails = {this.state.schemaDetails}/>
</Fragment>
</div>