Initial feature commit.
This commit is contained in:
wildscotsmen
parent
b3a819800c
commit
3feec479f2
|
|
@ -1,52 +1,49 @@
|
|||
import React, { Component} from 'react';
|
||||
import React, { Component } from 'react';
|
||||
import flamelinkApp from '../../utilities/flamelink.js';
|
||||
import FlameLinkCollectionComponentCreations from './FlameLinkCollectionComponentCreations';
|
||||
|
||||
class FlameLinkCollection extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
state = {
|
||||
schemaContent: '',
|
||||
}
|
||||
|
||||
this.state = {
|
||||
schemaContent: '',
|
||||
}
|
||||
componentDidMount() {
|
||||
flamelinkApp.content.get(this.props.schemaName)
|
||||
.then(result => this.setState({
|
||||
schemaContent: result
|
||||
}))
|
||||
}
|
||||
|
||||
flamelinkApp.content.get(global.schemaName)
|
||||
.then(result => this.setState({
|
||||
schemaContent: result
|
||||
}))
|
||||
}
|
||||
|
||||
getCollectionContent(schemaData){
|
||||
getCollectionContent(schemaData) {
|
||||
var arr2 = [];
|
||||
var collectionInfo = [schemaData, this.state.schemaContent];
|
||||
for (var val in this.state.schemaContent){
|
||||
for (var val in this.state.schemaContent) {
|
||||
arr2[this.state.schemaContent[val]['order']] = val;
|
||||
}
|
||||
return arr2.map(this.getCollectionComponentInfo, collectionInfo);
|
||||
}
|
||||
|
||||
getCollectionComponentInfo(num){
|
||||
getCollectionComponentInfo(num) {
|
||||
var arr3 = [];
|
||||
for (var val in this[0]){
|
||||
for (var val in this[0]) {
|
||||
arr3.push(val);
|
||||
}
|
||||
return <FlameLinkCollectionComponentCreations schemaData={this[0]} schemaContent={this[1][num]} arr={arr3} key={num} />
|
||||
}
|
||||
|
||||
countProperties(obj) {
|
||||
var count = 0;
|
||||
var count = 0;
|
||||
|
||||
for(var prop in obj) {
|
||||
if(obj.hasOwnProperty(prop))
|
||||
++count;
|
||||
for (var prop in obj) {
|
||||
if (obj.hasOwnProperty(prop))
|
||||
++count;
|
||||
}
|
||||
|
||||
return count;
|
||||
}
|
||||
|
||||
return count;
|
||||
}
|
||||
|
||||
render() {
|
||||
return(
|
||||
return (
|
||||
<div>
|
||||
{this.getCollectionContent(this.props.schemaData)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React, { Component} from 'react';
|
||||
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';
|
||||
|
|
@ -7,102 +7,100 @@ import FlameLinkImage from './FlameLinkImage';
|
|||
import FlameLinkFieldSet from './FlameLinkFieldSet';
|
||||
|
||||
const styles = theme => ({
|
||||
flamelinkItem: {
|
||||
paddingRight: 20,
|
||||
paddingLeft: 20,
|
||||
paddingTop: 20,
|
||||
},
|
||||
});
|
||||
flamelinkItem: {
|
||||
paddingRight: 20,
|
||||
paddingLeft: 20,
|
||||
paddingTop: 20,
|
||||
},
|
||||
});
|
||||
|
||||
class FlameLinkCollectionStructure extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
state = {
|
||||
schemaContent: '',
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
global.mediaID = '';
|
||||
|
||||
this.state = {
|
||||
schemaContent: '',
|
||||
flamelinkApp.content.get(this.props.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>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
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 === 'textarea'){
|
||||
return (
|
||||
<Typography variant='body2' component="p" id={key}>
|
||||
{content[key]}
|
||||
</Typography>
|
||||
)
|
||||
}
|
||||
if (type === 'fieldset') {
|
||||
if (content === '') {
|
||||
return
|
||||
}
|
||||
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}/>
|
||||
}
|
||||
else {
|
||||
return <FlameLinkFieldSet field={content[key]} field2={field.options} />
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
|
|
@ -112,9 +110,9 @@ class FlameLinkCollectionStructure extends Component {
|
|||
const md = this.props.field.gridColumns.md;
|
||||
const sm = this.props.field.gridColumns.sm;
|
||||
const xs = this.props.field.gridColumns.xs;
|
||||
return(
|
||||
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)}
|
||||
{this.getContent(this.props.schemaContent, this.props.field, this.props.field.key, this.props.type, this.props.field.description)}
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,40 +1,40 @@
|
|||
import React, { Component} from 'react';
|
||||
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, schemaType){
|
||||
|
||||
getSchemaFieldData(schemaData, schemaType) {
|
||||
var arr = [];
|
||||
for (var val in schemaData){
|
||||
for (var val in schemaData) {
|
||||
arr.push(val);
|
||||
}
|
||||
|
||||
if(schemaType === 'single'){
|
||||
if (schemaType === 'single') {
|
||||
return arr.map(this.createSingleTypeSchemaComponents, schemaData);
|
||||
}
|
||||
if(schemaType === 'collection'){
|
||||
if (schemaType === 'collection') {
|
||||
return this.createCollectionTypeSchemaComponents(schemaData);
|
||||
}
|
||||
else{
|
||||
else {
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
createSingleTypeSchemaComponents(num){
|
||||
createSingleTypeSchemaComponents(num) {
|
||||
return <FlameLinkStructure schemaData={this} field={this[num]} type={this[num].type} key={this[num].key} />
|
||||
}
|
||||
|
||||
createCollectionTypeSchemaComponents(schemaData){
|
||||
return <FlameLinkCollection schemaData={schemaData} />
|
||||
createCollectionTypeSchemaComponents = schemaData => {
|
||||
return <FlameLinkCollection schemaName={this.props.schemaName} schemaData={schemaData} />
|
||||
}
|
||||
|
||||
render() {
|
||||
return(
|
||||
<Grid container>
|
||||
{this.getSchemaFieldData(this.props.schemaDetails, this.props.schemaType)}
|
||||
</Grid>
|
||||
return (
|
||||
<Grid container>
|
||||
{this.getSchemaFieldData(this.props.schemaDetails, this.props.schemaType)}
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,43 +1,72 @@
|
|||
import React, { Component, Fragment } from 'react';
|
||||
import FlameLinkComponentCreations from '../components/flamelink/FlameLinkComponentCreations';
|
||||
import flamelinkApp from '../utilities/flamelink.js';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Typography } from '@material-ui/core';
|
||||
import { withStyles } from '@material-ui/core/styles';
|
||||
|
||||
const styles = theme => ({
|
||||
header: {
|
||||
paddingRight: 20,
|
||||
paddingLeft: 20,
|
||||
paddingTop: 20,
|
||||
},
|
||||
});
|
||||
|
||||
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
|
||||
}))
|
||||
state = {
|
||||
researcherSchemaName: 'martenAbout',
|
||||
developerSchemaName: 'martenAboutDev',
|
||||
researcherSchemaDetails: '',
|
||||
researcherSchemaType: '',
|
||||
developerSchemaDetails: '',
|
||||
developerSchemaType: ''
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
document.title = 'Marten Tracker | About';
|
||||
|
||||
|
||||
// Pulling in schema details for researchers
|
||||
flamelinkApp.schemas.getFields(this.state.researcherSchemaName, { fields: ['title', 'key', 'type', 'gridColumns', 'description', 'options'] })
|
||||
.then(result => this.setState({
|
||||
researcherSchemaDetails: result
|
||||
}))
|
||||
|
||||
flamelinkApp.schemas.get(this.state.researcherSchemaName)
|
||||
.then(result => this.setState({
|
||||
researcherSchemaType: result.type
|
||||
}))
|
||||
|
||||
|
||||
// Pulling in schema details for developers
|
||||
flamelinkApp.schemas.getFields(this.state.developerSchemaName, { fields: ['title', 'key', 'type', 'gridColumns', 'description', 'options'] })
|
||||
.then(result => this.setState({
|
||||
developerSchemaDetails: result
|
||||
}))
|
||||
|
||||
flamelinkApp.schemas.get(this.state.developerSchemaName)
|
||||
.then(result => this.setState({
|
||||
developerSchemaType: result.type
|
||||
}))
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
const { classes } = this.props;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Fragment>
|
||||
<FlameLinkComponentCreations schemaDetails = {this.state.schemaDetails} schemaType = {this.state.schemaType}/>
|
||||
</Fragment>
|
||||
</div>
|
||||
<Fragment>
|
||||
<Typography variant="display1" className={classes.header}>Researchers</Typography>
|
||||
<FlameLinkComponentCreations schemaDetails={this.state.researcherSchemaDetails} schemaType={this.state.researcherSchemaType} schemaName={this.state.researcherSchemaName} />
|
||||
<Typography variant="display1" className={classes.header}>Developers</Typography>
|
||||
<FlameLinkComponentCreations schemaDetails={this.state.developerSchemaDetails} schemaType={this.state.developerSchemaType} schemaName={this.state.developerSchemaName} />
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default About;
|
||||
About.propTypes = {
|
||||
classes: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
export default withStyles(styles)(About);
|
||||
|
|
|
|||
Loading…
Reference in New Issue