Commit cb862e9d authored by Andrew Hrdy's avatar Andrew Hrdy
Browse files

Started work on the facility cards.

parent 5a5067a6
...@@ -10,6 +10,7 @@ ...@@ -10,6 +10,7 @@
--> -->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json"> <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Nunito" />
<!-- <!--
Notice the use of %PUBLIC_URL% in the tags above. Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build. It will be replaced with the URL of the `public` folder during the build.
......
import React from 'react' import React from 'react'
import {withStyles} from 'material-ui/styles'; import {withStyles} from 'material-ui/styles';
import FacilityCard from '../containers/FacilityCard' import FacilityCard from '../containers/FacilityCard'
import Grid from 'material-ui/Grid';
const CardContainer = ({classes,facilities}) => { const CardContainer = ({classes, facilities}) => {
return ( return (
<div className={classes.root}> <Grid container className={classes.root} spacing={24}>
{facilities.map((item) =>{ {facilities.map(item =>
return <FacilityCard key={item.slug} facility={item}/> <Grid key={item.slug} item>
})} <FacilityCard facility={item}/>
</div> </Grid>
)}
</Grid>
) )
} }
const styleSheet = { const styleSheet = {
root:{ root: {
width:'100%', width: '100%',
height:'100%', height: '100%',
display:'flex', display: 'flex',
flexWrap:'wrap', flexWrap: 'wrap',
} }
} }
......
import React from 'react' import React from 'react'
import {withStyles} from 'material-ui/styles'; import {withStyles} from 'material-ui/styles';
import Paper from 'material-ui/Paper'; import Card, {CardContent, CardMedia} from 'material-ui/Card';
import Typography from 'material-ui/Typography';
import {compose} from 'redux' import {compose} from 'redux'
import {connect} from 'react-redux' import {connect} from 'react-redux'
import {setSidebar} from '../actions/ui' import {setSidebar} from '../actions/ui'
import FacilityStatus from './FacilityStatus';
const FacilityCard = ({classes,facility,setSidebar}) => {
const FacilityCard = ({classes, facility, setSidebar}) => {
const handleClick = () => { const handleClick = () => {
setSidebar(facility) setSidebar(facility)
} };
const removeBrackets = (name) => { const removeBrackets = (name) => {
if(typeof(name) === "undefined"){ if (typeof(name) === "undefined") {
return "" return ""
} }
const openBracket = name.indexOf('[') const openBracket = name.indexOf('[');
if(openBracket !== -1){ if (openBracket !== -1) {
return name.substring(0,openBracket) return name.substring(0, openBracket)
} }
return name return name
} };
return( return (
<Paper onClick={handleClick} className={classes.root}> <Card onClick={handleClick} className={classes.root}>
<CardMedia className={classes.media} image={require('../images/chipotleLogo.png')}/>
<CardContent>
<Typography type={'title'} align={'center'} className={classes.title} noWrap>
{removeBrackets(facility.facility_name)} {removeBrackets(facility.facility_name)}
</Paper> </Typography>
<FacilityStatus/>
<Typography type={'caption'} align={'center'} className={classes.location}>
{removeBrackets(facility.facility_location.building)}
</Typography>
</CardContent>
</Card>
) )
} };
const styleSheet = { const styleSheet = {
root:{ root: {
width:100, width: 200,
height:100, height: 200,
},
card: {
maxWidth: 345
},
media: {
flex: 1,
width: 200,
height: 100,
resizeMode: 'cover',
},
title: { //TODO: Should the fonts be added here or in the muitheme (index.js)?
fontFamily: 'Nunito',
fontWeight: 'Bold'
},
location: {
fontFamily: 'Nunito'
} }
} };
export default compose(connect(null,{setSidebar}),withStyles(styleSheet))(FacilityCard) export default compose(connect(null, {setSidebar}), withStyles(styleSheet))(FacilityCard);
\ No newline at end of file \ No newline at end of file
import React from 'react'
import {withStyles} from 'material-ui/styles';
import Chip from 'material-ui/Chip'
const FacilityStatus = ({classes, facility}) => {
return (
<Chip label={'Todo'} className={classes.chip} />
)
};
const styleSheet = {
chip: {
margin: 'auto',
height: '24px'
}
};
export default withStyles(styleSheet)(FacilityStatus);
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment