Added ability to parse fieldset data. Added some basic stylings for content. Cleaned up code.
This commit is contained in:
parent
ce0d5d2e1e
commit
6ecf626659
|
@ -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;
|
|
@ -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;
|
|
@ -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;
|
|
@ -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() {
|
||||
|
|
|
@ -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}>
|
||||
{this.state.schemaContent[key]}
|
||||
<Typography variant='display4' id={key}>
|
||||
{this.state.schemaContent[key]}
|
||||
</Typography>
|
||||
)
|
||||
}
|
||||
if(description === 'h2'){
|
||||
return (
|
||||
<Typography variant="display3" id={this.props.field.key}>
|
||||
{this.state.schemaContent[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}>
|
||||
{this.state.schemaContent[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);
|
|
@ -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"
|
||||
}
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue