Chart Section Created

client/html/index.html

@@ -22,9 +22,9 @@
       window.canvasApp = {
           sessionToken: '',
           executingAt: 'Master App',
-          visible: true,
+          visible: false,
           topMargin: 25,
-          urlPrefix: 'https://develop.advancedalgos.net/'   /* 'http://localhost:1337/'   */   /*  'https://develop.advancedalgos.net/'  */
+          urlPrefix: 'https://develop.advancedalgos.net/'  /* 'http://localhost:1337/'   */   /*  'https://develop.advancedalgos.net/'  */
       };
 
       loadAdvancedAlgosPlatform();

client/src/App.js

@@ -11,11 +11,11 @@ import { theme, globalStyles } from './styles'
 import { client } from './graphql/apollo'
 import Auth from './auth'
 
-import { Header, Footer, Home, Callback } from './views'
+import { Header, Footer, Home, Charts, Callback } from './views'
 
+import Users from '@advancedalgos/users-client'
 import Teams from '@advancedalgos/teams-client'
 import KeyVault from '@advancedalgos/key-vault-client'
-import Users from '@advancedalgos/users-client'
 
 export const auth = new Auth(
   result => console.log('Authentication successful.'),
@@ -27,30 +27,34 @@ export const MasterApp = () => (
     <ApolloProvider client={client}>
       <MuiThemeProvider theme={theme}>
         <CssBaseline />
-          <Header auth={auth} />
-          <Switch>
-            <Route exact path='/' component={Home} />
-            <Route
-              path='/callback'
-              render={props => {
-                auth.handleAuthentication(props)
-                return <Callback {...props} />
-              }}
+        <Header auth={auth} />
+        <Switch>
+          <Route exact path='/' component={Home} />
+          <Route
+            path='/callback'
+            render={props => {
+              auth.handleAuthentication(props)
+              return <Callback {...props} />
+            }}
             />
-            <Route
-              path='/teams'
-              render={props => <Teams {...props} auth={auth} />}
+          <Route
+            path='/charts'
+            render={props => <Charts {...props} auth={auth} />}
             />
-            <Route
-              path='/key-vault'
-              render={props => <KeyVault {...props} />}
+          <Route
+            path='/users'
+            render={props => <Users {...props} auth={auth} />}
             />
-            <Route
-              path='/users'
-              render={props => <Users {...props} auth={auth} />}
+          <Route
+            path='/teams'
+            render={props => <Teams {...props} auth={auth} />}
             />
-          </Switch>
-          <Footer />
+          <Route
+            path='/key-vault'
+            render={props => <KeyVault {...props} auth={auth} />}
+            />
+        </Switch>
+        <Footer />
       </MuiThemeProvider>
     </ApolloProvider>
   </BrowserRouter>

client/src/views/charts/index.js

@@ -0,0 +1,57 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+import CssBaseline from '@material-ui/core/CssBaseline'
+import Typography from '@material-ui/core/Typography'
+import { withStyles } from '@material-ui/core/styles'
+
+const styles = theme => ({
+  '@global': {
+    body: {
+      backgroundColor: theme.palette.common.white
+    }
+  },
+  layout: {
+    width: '100%',
+    height: '100%'
+  },
+  heroContent: {
+    textColor: theme.palette.common.white,
+    maxWidth: 600,
+    height: 800,
+    margin: '0 auto',
+    padding: `${theme.spacing.unit * 8}px 0 ${theme.spacing.unit * 6}px`
+  }
+})
+
+class Charts extends Component {
+
+  componentDidMount () {
+    window.canvasApp.visible = true
+    let body = document.getElementById('body')
+    body.style = 'margin: 0px; padding: 0px; border: 0px; overflow:hidden;'
+    window.SHOW_FOOTER = false
+    console.log('HIDDING FOOTER')
+  }
+
+  componentWillUnmount () {
+    window.canvasApp.visible = false
+    let body = document.getElementById('body')
+    body.style = ''
+    window.SHOW_FOOTER = true
+    console.log('SHOWING FOOTER')
+  }
+
+  render () {
+    const { classes } = this.props
+    return (
+      <React.Fragment />
+    )
+  }
+}
+
+Charts.propTypes = {
+  classes: PropTypes.object.isRequired
+}
+
+export default withStyles(styles)(Charts)

client/src/views/footer/index.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { NavLink } from 'react-router-dom'
 import { withStyles } from '@material-ui/core/styles'
@@ -38,111 +38,124 @@ const styles = theme => ({
   }
 })
 
-const Footer = ({ classes }) => {
-  if (window.HIDE_FOOTER !== true) {
-    return (<div />)
-  } else {
-    return (
-      <footer className={classNames(classes.footer, classes.layout)}>
-        <Grid
-          container
-          spacing={32}
-          justify='space-evenly'
-          className={classNames(classes.footerContainer)}
-      >
-          <Grid item xs>
-            <Typography variant='h6' color='textPrimary' gutterBottom>
-            Pages
-          </Typography>
-            <NavLink to='/' className={classNames(classes.footerLink)}>
-              <Typography variant='subtitle1' color='textSecondary'>
-              Home
-            </Typography>
-            </NavLink>
-            <NavLink to='/teams' className={classNames(classes.footerLink)}>
-              <Typography variant='subtitle1' color='textSecondary'>
-              Teams
-            </Typography>
-            </NavLink>
-            <NavLink to='/key-vault' className={classNames(classes.footerLink)}>
-              <Typography variant='subtitle1' color='textSecondary'>
-              Key Vault
-            </Typography>
-            </NavLink>
-          </Grid>
-          <Grid item xs>
-            <Typography variant='h6' color='textPrimary' gutterBottom>
-            Support
-          </Typography>
+class Footer extends Component {
 
-            <a
-              href='https://advancedalgos.net/documentation-quick-start.shtml'
-              target='_blank>'
-              className={classNames(classes.footerLink)}
-          >
-              <Typography variant='subtitle1' color='textSecondary'>
-              Documentation
+  componentDidMount () {
+    console.log('componentDidMount')
+  }
+
+  componentWillUnmount () {
+    console.log('componentWillUnmount')
+  }
+
+  render () {
+    let { classes } = this.props
+    console.log('SHOW_FOOTER', window.SHOW_FOOTER)
+    if (window.SHOW_FOOTER === false) {
+      return (<div />)
+    } else {
+      return (
+        <footer className={classNames(classes.footer, classes.layout)}>
+          <Grid
+            container
+            spacing={32}
+            justify='space-evenly'
+            className={classNames(classes.footerContainer)}
+        >
+            <Grid item xs>
+              <Typography variant='h6' color='textPrimary' gutterBottom>
+              Pages
             </Typography>
-            </a>
-            <a
-              href='https://t.me/advancedalgoscommunity'
-              target='_blank>'
-              className={classNames(classes.footerLink)}
-          >
-              <Typography variant='subtitle1' color='textSecondary'>
-              Telegram
+              <NavLink to='/' className={classNames(classes.footerLink)}>
+                <Typography variant='subtitle1' color='textSecondary'>
+                Home
+              </Typography>
+              </NavLink>
+              <NavLink to='/teams' className={classNames(classes.footerLink)}>
+                <Typography variant='subtitle1' color='textSecondary'>
+                Teams
+              </Typography>
+              </NavLink>
+              <NavLink to='/key-vault' className={classNames(classes.footerLink)}>
+                <Typography variant='subtitle1' color='textSecondary'>
+                Key Vault
+              </Typography>
+              </NavLink>
+            </Grid>
+            <Grid item xs>
+              <Typography variant='h6' color='textPrimary' gutterBottom>
+              Support
             </Typography>
-            </a>
+
+              <a
+                href='https://advancedalgos.net/documentation-quick-start.shtml'
+                target='_blank>'
+                className={classNames(classes.footerLink)}
+            >
+                <Typography variant='subtitle1' color='textSecondary'>
+                Documentation
+              </Typography>
+              </a>
+              <a
+                href='https://t.me/advancedalgoscommunity'
+                target='_blank>'
+                className={classNames(classes.footerLink)}
+            >
+                <Typography variant='subtitle1' color='textSecondary'>
+                Telegram
+              </Typography>
+              </a>
+            </Grid>
+            <Grid item xs>
+              <Typography variant='h6' color='textPrimary' gutterBottom>
+              Modules
+            </Typography>
+              <a
+                href='https://develop.advancedalgos.net'
+                target='_blank>'
+                className={classNames(classes.footerLink)}
+            >
+                <Typography variant='subtitle1' color='textSecondary'>
+                Platform
+              </Typography>
+              </a>
+              <a
+                href='https://users.advancedalgos.net'
+                target='_blank>'
+                className={classNames(classes.footerLink)}
+            >
+                <Typography variant='subtitle1' color='textSecondary'>
+                Users
+              </Typography>
+              </a>
+              <a
+                href='https://teams.advancedalgos.net'
+                target='_blank>'
+                className={classNames(classes.footerLink)}
+            >
+                <Typography variant='subtitle1' color='textSecondary'>
+                Teams
+              </Typography>
+              </a>
+              <a
+                href='https://keyvault.advancedalgos.net'
+                target='_blank>'
+                className={classNames(classes.footerLink)}
+            >
+                <Typography variant='subtitle1' color='textSecondary'>
+                Key Vault
+              </Typography>
+              </a>
+            </Grid>
+            <Grid item xs>
+              <NavLink to='/'>
+                <img alt='' src={aalogo} width={98} height={140} />
+              </NavLink>
+            </Grid>
           </Grid>
-          <Grid item xs>
-            <Typography variant='h6' color='textPrimary' gutterBottom>
-            Modules
-          </Typography>
-            <a
-              href='https://develop.advancedalgos.net'
-              target='_blank>'
-              className={classNames(classes.footerLink)}
-          >
-              <Typography variant='subtitle1' color='textSecondary'>
-              Platform
-            </Typography>
-            </a>
-            <a
-              href='https://users.advancedalgos.net'
-              target='_blank>'
-              className={classNames(classes.footerLink)}
-          >
-              <Typography variant='subtitle1' color='textSecondary'>
-              Users
-            </Typography>
-            </a>
-            <a
-              href='https://teams.advancedalgos.net'
-              target='_blank>'
-              className={classNames(classes.footerLink)}
-          >
-              <Typography variant='subtitle1' color='textSecondary'>
-              Teams
-            </Typography>
-            </a>
-            <a
-              href='https://keyvault.advancedalgos.net'
-              target='_blank>'
-              className={classNames(classes.footerLink)}
-          >
-              <Typography variant='subtitle1' color='textSecondary'>
-              Key Vault
-            </Typography>
-            </a>
-          </Grid>
-          <Grid item xs>
-            <NavLink to='/'>
-              <img alt='' src={aalogo} width={98} height={140} />
-            </NavLink>
-          </Grid>
-        </Grid>
-      </footer>
-    )
+        </footer>
+      )
+    }
   }
 }
 

client/src/views/header/index.js

@@ -22,6 +22,7 @@ import { LoggedOut } from './LoggedOut'
 
 import AALogo from '../../assets/advanced-algos/aa-logo-dark.svg'
 
+const ChartsLink = props => <Link to='/charts' {...props} />
 const UsersLink = props => <Link to='/users' {...props} />
 const TeamsLink = props => <Link to='/teams' {...props} />
 const KeyVaultLink = props => <Link to='/key-vault' {...props} />
@@ -104,6 +105,10 @@ class Header extends Component {
             >
               <HomeIcon />
             </IconButton>
+
+            <Button component={ChartsLink} color='inherit'>
+              Charts
+            </Button>
             <Button component={UsersLink} color='inherit'>
               Users
             </Button>

client/src/views/home/index.js

@@ -26,24 +26,33 @@ const styles = theme => ({
 
 class Home extends Component {
 
-  componentDidMount () {
-    window.canvasApp.visible = true
-    let body = document.getElementById('body')
-    body.style = 'margin: 0px; padding: 0px; border: 0px; overflow:hidden;'
-    window.HIDE_FOOTER = true
-  }
-
-  componentWillUnmount () {
-    window.canvasApp.visible = false
-    let body = document.getElementById('body')
-    body.style = ''
-    window.HIDE_FOOTER = false
-  }
-
   render () {
     const { classes } = this.props
     return (
-      <React.Fragment />
+      <React.Fragment>
+        <CssBaseline />
+        <main className={classes.layout}>
+          <div className={classes.heroContent}>
+            <Typography
+              variant='display3'
+              align='center'
+              color='textPrimary'
+              gutterBottom
+            >
+              Collaborate. Innovate. Evolve.
+            </Typography>
+            <Typography
+              variant='title'
+              align='center'
+              color='textSecondary'
+              component='h3'
+            >
+              Welcome to the Advanced Algos Platform
+            </Typography>
+          </div>
+        </main>
+
+      </React.Fragment>
     )
   }
 }

client/src/views/index.js

@@ -1,6 +1,7 @@
 import Header from './header'
 import Footer from './footer'
 import Home from './home'
+import Charts from './charts'
 import Callback from './callback'
 
-export { Header, Footer, Home, Callback }
+export { Header, Footer, Home, Charts, Callback }