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

Started work on the facility cards.

parent 5a5067a6
......@@ -10,6 +10,7 @@
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<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.
It will be replaced with the URL of the `public` folder during the build.
......
import React from 'react'
import {withStyles} from 'material-ui/styles';
import FacilityCard from '../containers/FacilityCard'
import Grid from 'material-ui/Grid';
const CardContainer = ({classes,facilities}) => {
const CardContainer = ({classes, facilities}) => {
return (
<div className={classes.root}>
{facilities.map((item) =>{
return <FacilityCard key={item.slug} facility={item}/>
})}
</div>
<Grid container className={classes.root} spacing={24}>
{facilities.map(item =>
<Grid key={item.slug} item>
<FacilityCard facility={item}/>
</Grid>
)}
</Grid>
)
}
const styleSheet = {
root:{
width:'100%',
height:'100%',
display:'flex',
flexWrap:'wrap',
const styleSheet = {
root: {
width: '100%',
height: '100%',
display: 'flex',
flexWrap: 'wrap',
}
}
......
import React from 'react'
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 {connect} from 'react-redux'
import {setSidebar} from '../actions/ui'
import FacilityStatus from './FacilityStatus';
const FacilityCard = ({classes,facility,setSidebar}) => {
const FacilityCard = ({classes, facility, setSidebar}) => {
const handleClick = () => {
setSidebar(facility)
}
};
const removeBrackets = (name) => {
if(typeof(name) === "undefined"){
if (typeof(name) === "undefined") {
return ""
}
const openBracket = name.indexOf('[')
if(openBracket !== -1){
return name.substring(0,openBracket)
}
return name
}
return(
<Paper onClick={handleClick} className={classes.root}>
{removeBrackets(facility.facility_name)}
</Paper>
}
const openBracket = name.indexOf('[');
if (openBracket !== -1) {
return name.substring(0, openBracket)
}
return name
};
return (
<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)}
</Typography>
<FacilityStatus/>
<Typography type={'caption'} align={'center'} className={classes.location}>
{removeBrackets(facility.facility_location.building)}
</Typography>
</CardContent>
</Card>
)
}
const styleSheet = {
root:{
width:100,
height:100,
};
const styleSheet = {
root: {
width: 200,
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)
\ No newline at end of file
export default compose(connect(null, {setSidebar}), withStyles(styleSheet))(FacilityCard);
\ 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