[ADD] more pages

src/components/common/Base.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import { Helmet } from 'react-helmet'
 import Topbar from './Topbar'
 import Sidebar from './Sidebar'
+import Typography from 'material-ui/Typography'
 import { withStyles } from 'material-ui/styles'
 
 const styles = theme => ({
@@ -12,12 +13,15 @@ const styles = theme => ({
         position: 'relative',
         display: 'flex'
     },
-    toolbar: theme.mixins.toolbar,
     content: {
         flexGrow: 1,
         backgroundColor: theme.palette.background.default,
         padding: theme.spacing.unit * 3,
         minWidth: 0
+    },
+    toolbar: theme.mixins.toolbar,
+    header: {
+        marginBottom: 25
     }
 })
 
@@ -25,8 +29,6 @@ class Base extends Component {
     render() {
         const { classes } = this.props
 
-        console.log(this.props)
-
         return (
             <div className={classes.root}>
                 <Helmet>
@@ -36,6 +38,7 @@ class Base extends Component {
                 <Sidebar />
                 <main className={classes.content}>
                     <div className={classes.toolbar}></div>
+                    <Typography variant='headline' color='primary' className={classes.header}>{this.props.title}</Typography>
                     {this.props.children}
                 </main>
             </div>
@@ -43,4 +46,4 @@ class Base extends Component {
     }
 }
 
-export default withStyles(styles)(Base)
+export default withStyles(styles)(Base)

src/components/common/Sidebar.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import Drawer from 'material-ui/Drawer'
 import ListSubheader from 'material-ui/List/ListSubheader'
 import List, { ListItem, ListItemIcon, ListItemText } from 'material-ui/List'
+import { Link } from 'react-router-dom'
 import FactoryIcon from '../icons/FactoryIcon'
 import TaskIcon from '../icons/TaskIcon'
 import DockerIcon from '../icons/DockerIcon'
@@ -10,6 +11,7 @@ import PermissionIcon from '../icons/PermissionIcon'
 import AboutIcon from '../icons/AboutIcon'
 import { withStyles } from 'material-ui/styles'
 
+
 const drawerWidth = 265
 
 const styles = theme => ({
@@ -29,39 +31,39 @@ class Sidebar extends Component {
                 <div className={classes.toolbar} />
                 <List component="nav">
                     <ListSubheader>Sistemas</ListSubheader>
-                    <ListItem button>
+                    <ListItem button component={Link} to='/containers'>
                         <ListItemIcon>
                             <DockerIcon />
                         </ListItemIcon>
                         <ListItemText primary="Contenedores" />
                     </ListItem>
-                    <ListItem button>
+                    <ListItem button component={Link} to='/mytasks'>
                         <ListItemIcon>
                             <TaskIcon />
                         </ListItemIcon>
                         <ListItemText primary="Mis tareas" />
                     </ListItem>
-                    <ListItem button>
+                    <ListItem button component={Link} to='/tasks'>
                         <ListItemIcon>
                             <FactoryIcon />
                         </ListItemIcon>
                         <ListItemText primary="Tareas automatizadas" />
                     </ListItem>
                     <ListSubheader>Administración</ListSubheader>
-                    <ListItem button>
+                    <ListItem button component={Link} to='/users'>
                         <ListItemIcon>
                             <UserIcon />
                         </ListItemIcon>
                         <ListItemText primary="Usuarios" />
                     </ListItem>
-                    <ListItem button>
+                    <ListItem button component={Link} to='/permissions'>
                         <ListItemIcon>
                             <PermissionIcon />
                         </ListItemIcon>
                         <ListItemText primary="Permisos" />
                     </ListItem>
                     <ListSubheader>Ayuda</ListSubheader>
-                    <ListItem button>
+                    <ListItem button component={Link} to='/about'>
                         <ListItemIcon>
                             <AboutIcon />
                         </ListItemIcon>

src/components/pages/401.js

@@ -0,0 +1,12 @@
+import React, { Component } from 'react'
+import Base from '../common/Base'
+
+class Page401 extends Component {
+    render() {
+        return (
+            <Base title='Recurso no autorizado'></Base>
+        )
+    }
+}
+
+export default Page401

src/components/pages/404.js

@@ -0,0 +1,12 @@
+import React, { Component } from 'react'
+import Base from '../common/Base'
+
+class Page404 extends Component {
+    render() {
+        return (
+            <Base title='Recurso no encontrado'></Base>
+        )
+    }
+}
+
+export default Page404

src/components/pages/About.js

@@ -0,0 +1,12 @@
+import React, { Component } from 'react'
+import Base from '../common/Base'
+
+class About extends Component {
+    render() {
+        return (
+            <Base title='Acerca de'></Base>
+        )
+    }
+}
+
+export default About

src/components/pages/Dashboard.js

@@ -1,12 +1,11 @@
 import React, { Component } from 'react'
 import Base from '../common/Base'
-import Typography from 'material-ui/Typography'
 
 class Dashboard extends Component {
     render() {
         return (
             <Base title="Dashboard">
-                <Typography>Dashboard</Typography>
+                
             </Base>
         )
     }

src/components/pages/MyTasksList.js

@@ -0,0 +1,12 @@
+import React, { Component } from 'react'
+import Base from '../common/Base'
+
+class MyTasksList extends Component {
+    render() {
+        return (
+            <Base title='Mis tareas'></Base>
+        )
+    }
+}
+
+export default MyTasksList

src/components/pages/PermissionsList.js

@@ -0,0 +1,12 @@
+import React, { Component } from 'react'
+import Base from '../common/Base'
+
+class PermissionsList extends Component {
+    render() {
+        return (
+            <Base title='Permisos'></Base>
+        )
+    }
+}
+
+export default PermissionsList

src/components/pages/TasksList.js

@@ -0,0 +1,12 @@
+import React, { Component } from 'react'
+import Base from '../common/Base'
+
+class TasksList extends Component {
+    render() {
+        return (
+            <Base title='Tareas automatizadas'></Base>
+        )
+    }
+}
+
+export default TasksList

src/components/pages/UsersList.js

@@ -0,0 +1,12 @@
+import React, { Component } from 'react'
+import Base from '../common/Base'
+
+class UsersList extends Component {
+    render() {
+        return (
+            <Base title='Usuarios'></Base>
+        )
+    }
+}
+
+export default UsersList

src/routes/index.js

@@ -1,14 +1,58 @@
 import Dashboard from '../components/pages/Dashboard'
 import ContainersList from '../components/pages/ContainersList'
+import MyTasksList from '../components/pages/MyTasksList'
+import TasksList from '../components/pages/TasksList'
+import UsersList from '../components/pages/UsersList'
+import PermissionsList from '../components/pages/PermissionsList'
+import About from '../components/pages/About'
+import Page404 from '../components/pages/404'
+
+// import DockerIcon from '../components/icons/DockerIcon'
+// import TaskIcon from '../components/icons/TaskIcon'
+// import FactoryIcon from '../components/icons/FactoryIcon'
+// import UserIcon from '../components/icons/UserIcon'
+// import PermissionIcon from '../components/icons/PermissionIcon'
+// import AboutIcon from '../components/icons/AboutIcon'
 
 const routes = [
     {
         path: '/dashboard',
-        component: Dashboard
+        component: Dashboard,
+        title: 'Dashboard',
     },
     {
         path: '/containers',
-        component: ContainersList
+        component: ContainersList,
+        title: 'Contenedores'
+    },
+    {
+        path: '/mytasks',
+        component: MyTasksList,
+        title: 'Mis tareas'
+    },
+    {
+        path: '/tasks',
+        component: TasksList,
+        title: 'Tareas Automatizadas'
+    },
+    {
+        path: '/users',
+        component: UsersList,
+        title: 'Usuarios'
+    },
+    {
+        path: '/permissions',
+        component: PermissionsList,
+        title: 'Permisos'
+    },
+    {
+        path: '/about',
+        component: About,
+        title: 'Acerca de'
+    },
+    {
+        component: Page404,
+        title: 'Recurso no encontrado'
     }
 ]