Commit 21282d36 authored by Andrew Hrdy's avatar Andrew Hrdy
Browse files

Started working on FacilityCategory (The category icon).

parent d26d2804
import React from 'react';
import {withStyles} from 'material-ui/styles';
import Avatar from 'material-ui/Avatar';
import Typography from 'material-ui/Typography';
import RestaurantIcon from 'material-ui-icons/Restaurant';
import RestaurantMenuIcon from 'material-ui-icons/RestaurantMenu';
import StoreIcon from 'material-ui-icons/Store';
import LocalCafeIcon from 'material-ui-icons/LocalCafe';
import LocalPrintShopIcon from 'material-ui-icons/LocalPrintshop';
import LocalPostOfficeIcon from 'material-ui-icons/LocalPostOffice';
import FitnessCenterIcon from 'material-ui-icons/FitnessCenter';
import ShoppingCartIcon from 'material-ui-icons/ShoppingCart'
import {amber, purple, brown, grey, teal, blue, deepOrange, lime} from 'material-ui/colors';
/*
Proposed Category Types:
dining hall
convenience store
cafe
restaurant
food truck ???
athletic
mailroom
print services
retail
school offices
student centers
*/
const FacilityCategory = ({classes, category}) => {
const generateAvatar = () => {
let color;
let icon;
/*
TODO: May not want to hardcode the id's. Can be dynamically retrieved from /api/categories.
this wouldn't be of any use unless the API returns something to indicate the icon / color.
*/
switch (category.id) {
case 1: //Dining Hall
color = amber[500];
icon = <RestaurantMenuIcon className={classes.categoryIcon}/>;
break;
case 2: //Restaurant
color = blue[500];
icon = <RestaurantIcon className={classes.categoryIcon}/>;
break;
case 3: //Convenience Store
color = purple[500];
icon = <StoreIcon className={classes.categoryIcon}/>;
break;
case 4: //Cafe
color = brown[500];
icon = <LocalCafeIcon className={classes.categoryIcon}/>;
break;
//case 5: //Take out dining hall
//TODO: No idea for this icon...
//break;
case 6: //Athletic Facility
color = teal[500];
icon = <FitnessCenterIcon className={classes.categoryIcon}/>;
break;
case 7: //TODO: Print Services - NOT IN API
color = grey[500];
icon = <LocalPrintShopIcon className={classes.categoryIcon} />;
break;
case 8: //TODO Mailroom - NOT IN API
color = deepOrange[500];
icon = <LocalPostOfficeIcon className={classes.categoryIcon}/>;
break;
default:
color = lime[500];
icon = <ShoppingCartIcon className={classes.categoryIcon}/>
}
return (
<Avatar className={classes.avatar} style={{backgroundColor: color}}>
{icon}
</Avatar>
)
};
return (
<div className={classes.categoryWrapper}>
{generateAvatar()}
<Typography type={'body1'} className={classes.nunito} noWrap>
{category.name}
</Typography>
</div>
)
};
const styleSheet = {
categoryWrapper: {
display: 'flex',
alignItems: 'center'
},
categoryIcon: {
width: '14px !important',
height: '14px !important',
padding: '4px !important',
},
avatar: {
width: 'auto !important',
height: 'auto !important',
marginRight: '8px'
},
nunito: {
fontFamily: 'Nunito'
}
};
export default withStyles(styleSheet)(FacilityCategory);
\ No newline at end of file
......@@ -56,7 +56,7 @@ const FacilityStatus = ({classes, facility}) => {
timeInParts[2]);
const entryTillOpen = openTime - curDateTime;
if (!timeTillOpen || (entryTillOpen > 0 && entryTillOpen < timeTillOpen)) {
if (entryTillOpen > 0 && (!timeTillOpen || (entryTillOpen < timeTillOpen))) {
timeTillOpen = entryTillOpen;
}
}
......
......@@ -3,13 +3,12 @@ import {withStyles} from 'material-ui/styles';
import Card, {CardActions, CardContent, CardMedia} from 'material-ui/Card';
import Typography from 'material-ui/Typography';
import Grid from 'material-ui/Grid';
import Avatar from 'material-ui/Avatar';
import FacilityStatus from '../components/FacilityStatus';
import FavoriteButton from '../components/FavoriteButton';
import FacilityCategory from '../components/FacilityCategory';
import {compose} from 'redux';
import {connect} from 'react-redux';
import {addFavoriteFacility, removeFavoriteFacility, setSidebar} from '../actions/ui';
import RestaurantIcon from 'material-ui-icons/Restaurant';
import DirectionsWalkIcon from 'material-ui-icons/DirectionsWalk';
import LocationOnIcon from 'material-ui-icons/LocationOn';
import {removeBrackets} from '../utils/nameUtils';
......@@ -134,14 +133,7 @@ const FacilityCard = ({classes, facility, favorites, addFavoriteFacility, remove
<FacilityStatus facility={facility}/>
</Grid>
<Grid item className={classes.smallGridItemSpacing}>
<div className={classes.categoryWrapper}>
<Avatar className={classes.avatar}>
<RestaurantIcon className={classes.categoryIcon}/>
</Avatar>
<Typography type={'body1'} className={classes.nunito} noWrap>
{facility.facility_category.name}
</Typography>
</div>
<FacilityCategory category={facility.facility_category} />
</Grid>
</Grid>
</CardContent>
......@@ -198,24 +190,6 @@ const styleSheet = {
mediaContainer: {
position: 'relative'
},
avatarContainer: {
marginRight: '8px'
},
avatar: {
width: 'auto !important',
height: 'auto !important',
marginRight: '8px',
backgroundColor: red[500],
},
categoryWrapper: {
display: 'flex',
alignItems: 'center'
},
categoryIcon: {
width: '14px !important',
height: '14px !important',
padding: '4px !important',
},
logoContainer: {
width: '100px',
height: '100px',
......
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