Merge branch 'master' of https://github.com/alDuncanson/marten-application
This commit is contained in:
ajmaley
commit
305f405468
|
|
@ -12513,9 +12513,9 @@
|
|||
}
|
||||
},
|
||||
"react-cookie": {
|
||||
"version": "3.0.7",
|
||||
"resolved": "https://registry.npmjs.org/react-cookie/-/react-cookie-3.0.7.tgz",
|
||||
"integrity": "sha512-c4lGOqIPC54kUocE7kbuqZNeIdXtZGzXQMA7BSWhaJ/5tWeoW5fJ7mF/pR+rU5fYDF9kktTHCIbovwSsNYblOg==",
|
||||
"version": "3.0.8",
|
||||
"resolved": "https://registry.npmjs.org/react-cookie/-/react-cookie-3.0.8.tgz",
|
||||
"integrity": "sha512-Gdop2Cf2pBFA0r4L9l5DRghKsPVMNKRM3x2aeyJ4JSaENpWWPP4v9LJvvtxXs3AboOGCuMj19oUw04Z9cVQQTg==",
|
||||
"requires": {
|
||||
"@types/hoist-non-react-statics": "^3.0.1",
|
||||
"hoist-non-react-statics": "^3.0.0",
|
||||
|
|
@ -12523,9 +12523,9 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"hoist-non-react-statics": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.2.0.tgz",
|
||||
"integrity": "sha512-3IascCRfaEkbmHjJnUxWSspIUE1okLPjGTMVXW8zraUo1t3yg1BadKAxAGILHwgoBzmMnzrgeeaDGBvpuPz6dA==",
|
||||
"version": "3.2.1",
|
||||
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.2.1.tgz",
|
||||
"integrity": "sha512-TFsu3TV3YLY+zFTZDrN8L2DTFanObwmBLpWvJs1qfUuEQ5bTAdFcwfx2T/bsCXfM9QHSLvjfP+nihEl0yvozxw==",
|
||||
"requires": {
|
||||
"react-is": "^16.3.2"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
"material-ui-icons": "^1.0.0-beta.36",
|
||||
"moment": "^2.22.2",
|
||||
"react": "^16.5.1",
|
||||
"react-cookie": "^3.0.7",
|
||||
"react-cookie": "^3.0.8",
|
||||
"react-dom": "^16.5.1",
|
||||
"react-image-gallery": "^0.8.12",
|
||||
"react-quiz-component": "0.2.0",
|
||||
|
|
|
|||
|
|
@ -40,7 +40,6 @@
|
|||
You need to enable JavaScript to run this app.
|
||||
</noscript>
|
||||
<div id="root"></div>
|
||||
<!-- Hotjar Tracking Code for https://marten-application.netlify.com/ -->
|
||||
<!-- Hotjar Tracking Code for https://marten-tracker.netlify.com/ -->
|
||||
<script>
|
||||
(function(h,o,t,j,a,r){
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 73 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 71 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 63 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.1 KiB After Width: | Height: | Size: 96 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 91 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 72 KiB After Width: | Height: | Size: 366 KiB |
|
|
@ -34,8 +34,14 @@ import ExpandMore from '@material-ui/icons/ExpandMore';
|
|||
import Collapse from '@material-ui/core/Collapse';
|
||||
import FlameLinkCollectionGallery from '../components/flamelink/FlameLinkCollectionGallery';
|
||||
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
|
||||
import Switch from '@material-ui/core/Switch';
|
||||
import ThemeSwitch from '@material-ui/core/Switch';
|
||||
import { withCookies, Cookies } from 'react-cookie';
|
||||
import {
|
||||
BrowserRouter as Router,
|
||||
Route,
|
||||
Link,
|
||||
Switch
|
||||
} from 'react-router-dom';
|
||||
|
||||
const drawerWidth = 240;
|
||||
|
||||
|
|
@ -121,7 +127,6 @@ class ResponsiveDrawer extends React.Component {
|
|||
|
||||
this.setState({
|
||||
mobileOpen: false,
|
||||
key: 'Home',
|
||||
open: false,
|
||||
open2: false,
|
||||
theme: newTheme,
|
||||
|
|
@ -142,12 +147,6 @@ class ResponsiveDrawer extends React.Component {
|
|||
this.setState(state => ({ open2: !state.open2, open: false }));
|
||||
}
|
||||
|
||||
nav = (text) => {
|
||||
this.setState({
|
||||
key: text
|
||||
});
|
||||
}
|
||||
|
||||
handleChange = name => event => {
|
||||
const { cookies } = this.props;
|
||||
|
||||
|
|
@ -189,28 +188,35 @@ class ResponsiveDrawer extends React.Component {
|
|||
|
||||
render() {
|
||||
const { classes } = this.props;
|
||||
|
||||
const drawer = (
|
||||
<Typography component="div">
|
||||
<div className={classes.toolbar} />
|
||||
<Divider />
|
||||
<List>
|
||||
<ListItem button key='Home' onClick={() => this.nav('Home')}>
|
||||
<ListItemIcon><HomeIcon /></ListItemIcon>
|
||||
<ListItemText primary='Home' />
|
||||
</ListItem>
|
||||
<ListItem button key='Report' onClick={() => this.nav('Report')}>
|
||||
<ListItemIcon><AssignmentIcon /></ListItemIcon>
|
||||
<ListItemText primary='Report' />
|
||||
</ListItem>
|
||||
<ListItem button key='Map' onClick={() => this.nav('Map')}>
|
||||
<ListItemIcon><MapIcon /></ListItemIcon>
|
||||
<ListItemText primary='Map' />
|
||||
</ListItem>
|
||||
<ListItem button key='List' onClick={() => this.nav('List')}>
|
||||
<ListItemIcon><ListIcon /></ListItemIcon>
|
||||
<ListItemText primary='List' />
|
||||
</ListItem>
|
||||
<Link to='/'>
|
||||
<ListItem button>
|
||||
<ListItemIcon><HomeIcon /></ListItemIcon>
|
||||
<ListItemText primary='Home' />
|
||||
</ListItem>
|
||||
</Link>
|
||||
<Link to='/report'>
|
||||
<ListItem button>
|
||||
<ListItemIcon><AssignmentIcon /></ListItemIcon>
|
||||
<ListItemText primary='Report' />
|
||||
</ListItem>
|
||||
</Link>
|
||||
<Link to='/view-map'>
|
||||
<ListItem button>
|
||||
<ListItemIcon><MapIcon /></ListItemIcon>
|
||||
<ListItemText primary='Map' />
|
||||
</ListItem>
|
||||
</Link>
|
||||
<Link to='/sighting-list'>
|
||||
<ListItem button>
|
||||
<ListItemIcon><ListIcon /></ListItemIcon>
|
||||
<ListItemText primary='List' />
|
||||
</ListItem>
|
||||
</Link>
|
||||
<ListItem button onClick={this.handleClick}>
|
||||
<ListItemIcon>
|
||||
<SlideshowIcon />
|
||||
|
|
@ -220,25 +226,35 @@ class ResponsiveDrawer extends React.Component {
|
|||
</ListItem>
|
||||
<Collapse in={this.state.open} timeout="auto" unmountOnExit>
|
||||
<List component="div" disablePadding>
|
||||
<ListItem button className={classes.nested} onClick={() => this.nav('Easy-Quiz')}>
|
||||
<ListItemText inset primary="Easy" />
|
||||
</ListItem>
|
||||
<ListItem button className={classes.nested} onClick={() => this.nav('Intermediate-Quiz')}>
|
||||
<ListItemText inset primary="Intermediate" />
|
||||
</ListItem>
|
||||
<ListItem button className={classes.nested} onClick={() => this.nav('Advanced-Quiz')}>
|
||||
<ListItemText inset primary="Advanced" />
|
||||
</ListItem>
|
||||
<Link to={{ pathname: '/quiz-easy', state: { difficulty: 'Easy' } }}>
|
||||
<ListItem button className={classes.nested}>
|
||||
<ListItemText inset primary="Easy" />
|
||||
</ListItem>
|
||||
</Link>
|
||||
<Link to={{ pathname: '/quiz-intermediate', state: { difficulty: 'Intermediate' } }}>
|
||||
<ListItem button className={classes.nested}>
|
||||
<ListItemText inset primary="Intermediate" />
|
||||
</ListItem>
|
||||
</Link>
|
||||
<Link to={{ pathname: '/quiz-advanced', state: { difficulty: 'Advanced' } }}>
|
||||
<ListItem button className={classes.nested}>
|
||||
<ListItemText inset primary="Advanced" />
|
||||
</ListItem>
|
||||
</Link>
|
||||
</List>
|
||||
</Collapse>
|
||||
<ListItem button key='Contact' onClick={() => this.nav('Contact')}>
|
||||
<ListItemIcon><EmailIcon /></ListItemIcon>
|
||||
<ListItemText primary='Contact' />
|
||||
</ListItem>
|
||||
<ListItem button key='About' onClick={() => this.nav('About')}>
|
||||
<ListItemIcon><InfoIcon /></ListItemIcon>
|
||||
<ListItemText primary='About' />
|
||||
</ListItem>
|
||||
<Link to='/contact'>
|
||||
<ListItem button>
|
||||
<ListItemIcon><EmailIcon /></ListItemIcon>
|
||||
<ListItemText primary='Contact' />
|
||||
</ListItem>
|
||||
</Link>
|
||||
<Link to='/about'>
|
||||
<ListItem button>
|
||||
<ListItemIcon><InfoIcon /></ListItemIcon>
|
||||
<ListItemText primary='About' />
|
||||
</ListItem>
|
||||
</Link>
|
||||
<ListItem button onClick={this.handleClick2}>
|
||||
<ListItemIcon>
|
||||
<PhotoLibraryIcon />
|
||||
|
|
@ -248,18 +264,26 @@ class ResponsiveDrawer extends React.Component {
|
|||
</ListItem>
|
||||
<Collapse in={this.state.open2} timeout="auto" unmountOnExit>
|
||||
<List component="div" disablePadding>
|
||||
<ListItem button className={classes.nested} onClick={() => this.nav('Gallery1')}>
|
||||
<ListItemText inset primary="Martens and Kits" />
|
||||
</ListItem>
|
||||
<ListItem button className={classes.nested} onClick={() => this.nav('Gallery2')}>
|
||||
<ListItemText inset primary="Martens at Night" />
|
||||
</ListItem>
|
||||
<ListItem button className={classes.nested} onClick={() => this.nav('Gallery3')}>
|
||||
<ListItemText inset primary="Martens Being Martens" />
|
||||
</ListItem>
|
||||
<ListItem button className={classes.nested} onClick={() => this.nav('Gallery4')}>
|
||||
<ListItemText inset primary="Species Similar to Martens" />
|
||||
</ListItem>
|
||||
<Link to={{ pathname: 'galleries-martens-and-kits', state: { galleryName: 'martensAndKits' } }}>
|
||||
<ListItem button className={classes.nested}>
|
||||
<ListItemText inset primary="Martens and Kits" />
|
||||
</ListItem>
|
||||
</Link>
|
||||
<Link to={{ pathname: 'galleries-martens-at-night', state: { galleryName: 'martensAtNight' } }}>
|
||||
<ListItem button className={classes.nested}>
|
||||
<ListItemText inset primary="Martens at Night" />
|
||||
</ListItem>
|
||||
</Link>
|
||||
<Link to={{ pathname: 'galleries-martens-by-day', state: { galleryName: 'martensBeingMartens' } }}>
|
||||
<ListItem button className={classes.nested}>
|
||||
<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>
|
||||
|
|
@ -268,78 +292,82 @@ class ResponsiveDrawer extends React.Component {
|
|||
);
|
||||
|
||||
return (
|
||||
<MuiThemeProvider theme={this.state.theme}>
|
||||
<div className={classes.root}>
|
||||
<CssBaseline />
|
||||
<AppBar position="fixed" color="primary" className={classes.appBar}>
|
||||
<Toolbar>
|
||||
<IconButton
|
||||
color="inherit"
|
||||
aria-label="Open drawer"
|
||||
onClick={this.handleDrawerToggle}
|
||||
className={classes.menuButton}
|
||||
>
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
<Typography variant="title" color="inherit" noWrap>
|
||||
Marten Tracker
|
||||
<Router>
|
||||
<MuiThemeProvider theme={this.state.theme}>
|
||||
<div className={classes.root}>
|
||||
<CssBaseline />
|
||||
<AppBar position="fixed" color="primary" className={classes.appBar}>
|
||||
<Toolbar>
|
||||
<IconButton
|
||||
color="inherit"
|
||||
aria-label="Open drawer"
|
||||
onClick={this.handleDrawerToggle}
|
||||
className={classes.menuButton}
|
||||
>
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
<Typography variant="title" color="inherit" noWrap>
|
||||
Marten Tracker
|
||||
</Typography>
|
||||
<Switch
|
||||
checked={this.state.themeChecked}
|
||||
onChange={this.handleChange('themeChecked')}
|
||||
value="themeChecked"
|
||||
color="default"
|
||||
/>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
<nav className={classes.drawer}>
|
||||
<Hidden smUp implementation="css">
|
||||
<Drawer
|
||||
container={this.props.container}
|
||||
variant="temporary"
|
||||
anchor={this.state.theme.direction === 'rtl' ? 'right' : 'left'}
|
||||
open={this.state.mobileOpen}
|
||||
onClose={this.handleDrawerToggle}
|
||||
classes={{
|
||||
paper: classes.drawerPaper,
|
||||
}}
|
||||
ModalProps={{
|
||||
keepMounted: true, // Better open performance on mobile.
|
||||
}}
|
||||
>
|
||||
{drawer}
|
||||
</Drawer>
|
||||
</Hidden>
|
||||
<Hidden xsDown implementation="css">
|
||||
<Drawer
|
||||
classes={{
|
||||
paper: classes.drawerPaper,
|
||||
}}
|
||||
variant="permanent"
|
||||
open
|
||||
>
|
||||
{drawer}
|
||||
</Drawer>
|
||||
</Hidden>
|
||||
</nav>
|
||||
<main className={classes.content}>
|
||||
<div className={classes.toolbar} />
|
||||
{this.state.key === 'Home' && <Home />}
|
||||
{this.state.key === 'Report' && <Report />}
|
||||
{this.state.key === 'Map' && <ViewMap />}
|
||||
{this.state.key === 'List' && <SightingList themeName={this.state.themeName} />}
|
||||
{this.state.key === 'About' && <About />}
|
||||
{this.state.key === 'Contact' && <Contact />}
|
||||
{this.state.key === 'Easy-Quiz' && <Quiz difficulty='Easy' />}
|
||||
{this.state.key === 'Intermediate-Quiz' && <Quiz difficulty='Intermediate' />}
|
||||
{this.state.key === 'Advanced-Quiz' && <Quiz difficulty='Advanced' />}
|
||||
{this.state.key === 'Gallery1' && <FlameLinkCollectionGallery galleryName={'martensAndKits'} />}
|
||||
{this.state.key === 'Gallery2' && <FlameLinkCollectionGallery galleryName={'martensAtNight'} />}
|
||||
{this.state.key === 'Gallery3' && <FlameLinkCollectionGallery galleryName={'martensBeingMartens'} />}
|
||||
{this.state.key === 'Gallery4' && <FlameLinkCollectionGallery galleryName={'similarSpecies'} />}
|
||||
</main>
|
||||
</div>
|
||||
</MuiThemeProvider>
|
||||
<ThemeSwitch
|
||||
checked={this.state.themeChecked}
|
||||
onChange={this.handleChange('themeChecked')}
|
||||
value="themeChecked"
|
||||
color="default"
|
||||
/>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
<nav className={classes.drawer}>
|
||||
<Hidden smUp implementation="css">
|
||||
<Drawer
|
||||
container={this.props.container}
|
||||
variant="temporary"
|
||||
anchor={this.state.theme.direction === 'rtl' ? 'right' : 'left'}
|
||||
open={this.state.mobileOpen}
|
||||
onClose={this.handleDrawerToggle}
|
||||
classes={{
|
||||
paper: classes.drawerPaper,
|
||||
}}
|
||||
ModalProps={{
|
||||
keepMounted: true, // Better open performance on mobile.
|
||||
}}
|
||||
>
|
||||
{drawer}
|
||||
</Drawer>
|
||||
</Hidden>
|
||||
<Hidden xsDown implementation="css">
|
||||
<Drawer
|
||||
classes={{
|
||||
paper: classes.drawerPaper,
|
||||
}}
|
||||
variant="permanent"
|
||||
open
|
||||
>
|
||||
{drawer}
|
||||
</Drawer>
|
||||
</Hidden>
|
||||
</nav>
|
||||
<main className={classes.content}>
|
||||
<div className={classes.toolbar} />
|
||||
<Switch>
|
||||
<Route path="/" component={Home} exact={true} />
|
||||
<Route path="/report" component={Report} />
|
||||
<Route path="/view-map" component={ViewMap} />
|
||||
<Route path="/sighting-list" component={SightingList} key={this.state.themeName} />
|
||||
<Route path="/about" component={About} />
|
||||
<Route path="/contact" component={Contact} />
|
||||
<Route path="/quiz-easy" component={Quiz} key={"Easy"} />
|
||||
<Route path="/quiz-intermediate" component={Quiz} key={"Intermediate"} />
|
||||
<Route path="/quiz-advanced" component={Quiz} key={"Advanced"} />
|
||||
<Route path="/galleries-martens-and-kits" component={FlameLinkCollectionGallery} key={"martensAndKits"} />
|
||||
<Route path="/galleries-martens-at-night" component={FlameLinkCollectionGallery} key={"martensAtNight"} />
|
||||
<Route path="/galleries-martens-by-day" component={FlameLinkCollectionGallery} key={"martensByDay"} />
|
||||
<Route path="/galleries-species-similar-to-martens" component={FlameLinkCollectionGallery} key={"similarSpecies"} />
|
||||
</Switch>
|
||||
</main>
|
||||
</div>
|
||||
</MuiThemeProvider>
|
||||
</Router>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,55 +1,61 @@
|
|||
import React, { Component} from 'react';
|
||||
import React, { Component } from 'react';
|
||||
import flamelinkApp from '../../utilities/flamelink.js';
|
||||
import Grid from '@material-ui/core/Grid';
|
||||
import FlameLinkCollectionComponentCreations from './FlameLinkCollectionComponentCreations';
|
||||
|
||||
class FlameLinkCollection extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
schemaContent: '',
|
||||
}
|
||||
|
||||
flamelinkApp.content.get(global.schemaName)
|
||||
flamelinkApp.content.get(this.props.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){
|
||||
arr2[this.state.schemaContent[val]['order']] = val;
|
||||
for (var val in this.state.schemaContent) {
|
||||
if ( this.state.schemaContent[val].hasOwnProperty('order') ) {
|
||||
arr2[this.state.schemaContent[val]['order']] = val;
|
||||
}
|
||||
else{
|
||||
arr2.push(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(
|
||||
<div>
|
||||
return (
|
||||
<Grid container>
|
||||
{this.getCollectionContent(this.props.schemaData)}
|
||||
</div>
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,25 +1,48 @@
|
|||
import React, { Component} from 'react';
|
||||
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 {
|
||||
|
||||
createCollectionEntries(schemaData, schemaContent, arr){
|
||||
createCollectionEntries(schemaData, schemaContent, arr) {
|
||||
var collectionInfo = [schemaData, schemaContent];
|
||||
return arr.map(this.createCollectionComponents, collectionInfo);
|
||||
}
|
||||
|
||||
createCollectionComponents(num){
|
||||
return <FlameLinkCollectionStructure schemaData={this[0]} schemaContent={this[1]} field={this[0][num]} type={this[0][num].type} key={this[0][num].key} />
|
||||
createCollectionComponents(num) {
|
||||
return (
|
||||
<FlameLinkCollectionStructure schemaData={this[0]} schemaContent={this[1]} field={this[0][num]} type={this[0][num].type} key={this[0][num].key} />
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
return(
|
||||
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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default FlameLinkCollectionComponentCreations;
|
||||
FlameLinkCollectionComponentCreations.propTypes = {
|
||||
classes: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
export default withStyles(styles)(FlameLinkCollectionComponentCreations);
|
||||
|
|
@ -41,51 +41,52 @@ const styles = theme => ({
|
|||
});
|
||||
|
||||
class FlameLinkCollectionGallery extends Component {
|
||||
getPageTitle = galleryName => {
|
||||
switch (galleryName) {
|
||||
case 'martensAndKits':
|
||||
document.title = 'Marten Tracker | Martens and Kits';
|
||||
break;
|
||||
case 'martensAtNight':
|
||||
document.title = 'Marten Tracker | Martens at Night';
|
||||
break;
|
||||
case 'martensBeingMartens':
|
||||
document.title = 'Marten Tracker | Martens Being Martens';
|
||||
break;
|
||||
default:
|
||||
document.title = 'Marten Tracker | Galleries';
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
var galleryName, showTitle;
|
||||
|
||||
if (this.props.galleryName !== undefined) {
|
||||
galleryName = this.props.galleryName;
|
||||
} else {
|
||||
galleryName = this.props.location.state.galleryName;
|
||||
}
|
||||
|
||||
if (this.props.showTitle !== undefined) {
|
||||
showTitle = this.props.showTitle;
|
||||
} else {
|
||||
showTitle = this.props.location.state.showTitle;
|
||||
}
|
||||
|
||||
this.state = {
|
||||
galleryName: galleryName,
|
||||
showTitle: showTitle,
|
||||
schemaDetails: '',
|
||||
schemaContent: '',
|
||||
schemaDescription: '',
|
||||
};
|
||||
|
||||
flamelinkApp.schemas.getFields(this.props.galleryName, { fields: ['title', 'key', 'type', 'gridColumns', 'description', 'options'] })
|
||||
flamelinkApp.schemas.getFields(this.state.galleryName, { fields: ['title', 'key', 'type', 'gridColumns', 'description', 'options'] })
|
||||
.then(result => this.setState({
|
||||
schemaDetails: result
|
||||
}))
|
||||
|
||||
flamelinkApp.content.get(this.props.galleryName)
|
||||
flamelinkApp.content.get(this.state.galleryName)
|
||||
.then(result => this.setState({
|
||||
schemaContent: result
|
||||
}))
|
||||
|
||||
if (this.props.showTitle === false) {
|
||||
if (this.state.showTitle === false) {
|
||||
} else {
|
||||
flamelinkApp.schemas.get(this.props.galleryName)
|
||||
flamelinkApp.schemas.get(this.state.galleryName)
|
||||
.then(result => this.setState({
|
||||
schemaDescription: result.title
|
||||
}))
|
||||
}
|
||||
}
|
||||
|
||||
this.getPageTitle(this.props.galleryName);
|
||||
componentDidMount() {
|
||||
document.title = 'Marten Tracker | Galleries';
|
||||
}
|
||||
|
||||
getGalleryInfo(schemaDetails, schemaContent) {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -130,7 +130,7 @@ class ContactForm extends React.Component {
|
|||
<Fragment>
|
||||
<Typography variant="headline" align="center">
|
||||
{<br/>}
|
||||
Send us an email!
|
||||
Feel free to contact us if you have any questions about American martens,{<br/>}encountered any difficulties with the website, or if you have any ideas for future marten research.
|
||||
|
||||
<form className={classes.container} autoComplete="off" onSubmit={this.handleSubmit}>
|
||||
<Grid container className="contact-form">
|
||||
|
|
|
|||
|
|
@ -64,28 +64,10 @@ class ViewSightings extends Component {
|
|||
clicked: false
|
||||
};
|
||||
|
||||
componentDidUpdate(props) {
|
||||
if (this.props.themeName !== props.themeName) {
|
||||
this.setState({
|
||||
selectedSighting: {
|
||||
id: null,
|
||||
lat: null,
|
||||
lng: null,
|
||||
desc: null,
|
||||
type: null,
|
||||
confidence: null,
|
||||
date: null,
|
||||
time: null
|
||||
},
|
||||
clicked: false
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Fragment>
|
||||
<Grid container>
|
||||
<Grid container className='sighting-container'>
|
||||
<Grid item xs={12} md={6} className='sighting-list'>
|
||||
<Fragment>
|
||||
<List>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,14 @@ body {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.sighting-google-map-container > div {
|
||||
height: calc(100% - 64px) !important;
|
||||
}
|
||||
|
||||
@media (min-width: 600px) {
|
||||
.sighting-google-map-container > div {
|
||||
width: calc(100% - 240px) !important;
|
||||
|
|
@ -9,15 +17,9 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
.report-google-map-container > div {
|
||||
width: calc(100% - 50% - 120px) !important;
|
||||
}
|
||||
}
|
||||
|
||||
#disqus_thread {
|
||||
width: 89% !important;
|
||||
margin: 0 auto;
|
||||
margin: 0 auto 0 auto;
|
||||
}
|
||||
|
||||
#disqus_thread a,
|
||||
|
|
@ -30,18 +32,42 @@ body {
|
|||
.sighting-list {
|
||||
height: calc(50vh - 64px);
|
||||
overflow-y: scroll;
|
||||
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
|
||||
.sighting-container {
|
||||
height: calc(100vh - 64px);
|
||||
}
|
||||
|
||||
.sighting-list {
|
||||
height: calc(100vh - 64px);
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.sighting-details {
|
||||
height: calc(100vh - 64px);
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.report-google-map-container > div {
|
||||
height: calc(100% - 64px) !important;
|
||||
width: calc(100% - 50% - 120px) !important;
|
||||
}
|
||||
|
||||
.sighting-detail-google-map-container > div {
|
||||
height: 300px !important;
|
||||
}
|
||||
|
||||
.sighting-detail-google-map-container {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.sighting-details-content {
|
||||
width: 89%;
|
||||
margin: 330px auto 0 auto;
|
||||
margin: 320px auto 0 auto;
|
||||
}
|
||||
|
||||
.sighting-detail-google-map-container > div {
|
||||
|
|
@ -53,10 +79,3 @@ body {
|
|||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
.sighting-detail-google-map-container > div {
|
||||
width: calc(100% - 50% - 120px) !important;
|
||||
height: 300px !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,5 @@
|
|||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import './css/index.css';
|
||||
import App from './App.js';
|
||||
import registerServiceWorker from './registerServiceWorker';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,43 +1,89 @@
|
|||
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 = {
|
||||
summarySchemaName: 'martenAboutSummary',
|
||||
researcherSchemaName: 'martenAbout',
|
||||
developerSchemaName: 'martenAboutDevelopers',
|
||||
summarySchemaDetails: '',
|
||||
summarySchemaType: '',
|
||||
researcherSchemaDetails: '',
|
||||
researcherSchemaType: '',
|
||||
developerSchemaDetails: '',
|
||||
developerSchemaType: ''
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
document.title = 'Marten Tracker | About';
|
||||
|
||||
|
||||
// Pulling in schema details for summary
|
||||
flamelinkApp.schemas.getFields(this.state.summarySchemaName, { fields: ['title', 'key', 'type', 'gridColumns', 'description', 'options'] })
|
||||
.then(result => this.setState({
|
||||
summarySchemaDetails: result
|
||||
}))
|
||||
|
||||
flamelinkApp.schemas.get(this.state.summarySchemaName)
|
||||
.then(result => this.setState({
|
||||
summarySchemaType: result.type
|
||||
}))
|
||||
|
||||
|
||||
// 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}>Introduction</Typography>
|
||||
<FlameLinkComponentCreations schemaDetails={this.state.summarySchemaDetails} schemaType={this.state.summarySchemaType} schemaName={this.state.summarySchemaName} />
|
||||
<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);
|
||||
|
|
|
|||
|
|
@ -3,13 +3,14 @@ import QuizGame from '../components/QuizGame';
|
|||
|
||||
|
||||
class QuizPage extends Component {
|
||||
componentDidMount() {
|
||||
componentWillMount() {
|
||||
document.title = 'Marten Tracker | Quiz';
|
||||
this.setState({difficulty: this.props.location.state.difficulty});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<QuizGame difficulty={this.props.difficulty}/>
|
||||
<QuizGame difficulty={this.state.difficulty}/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -111,7 +111,7 @@ const advancedQuiz = {
|
|||
"Eastern gray squirrel",
|
||||
"Red squirrel"
|
||||
],
|
||||
"correctAnswer": "1"
|
||||
"correctAnswer": "3"
|
||||
},
|
||||
{
|
||||
"question": <Fragment>What animal is this?<br /><br /><img src="/quiz-images/advanced/question11.jpg" alt=""></img></Fragment>,
|
||||
|
|
|
|||
|
|
@ -100,7 +100,7 @@ const intermediateQuiz = {
|
|||
"Common Grackle",
|
||||
"Common Raven"
|
||||
],
|
||||
"correctAnswer": "1"
|
||||
"correctAnswer": "4"
|
||||
},
|
||||
{
|
||||
"question": <Fragment>What animal is this?<br /><br /><img src="/quiz-images/intermediate/question10.jpg" alt=""></img></Fragment>,
|
||||
|
|
|
|||
Loading…
Reference in New Issue