Commit 026a4573 authored by Andrew Hrdy's avatar Andrew Hrdy
Browse files

Removed ETA via walking, replaced with open / closed status. Toned down color.

parent 8ac488a9
......@@ -3,14 +3,13 @@ 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';
import {red, blue, brown, grey, teal, deepOrange, lime} from 'material-ui/colors';
/*
Proposed Category Types:
......@@ -41,24 +40,19 @@ const FacilityCategory = ({classes, category}) => {
switch (category.id) {
case 1: //Dining Hall
color = amber[500];
icon = <RestaurantMenuIcon className={classes.categoryIcon}/>;
break;
case 2: //Restaurant
color = blue[500];
case 5: //Take out dining hall
color = red[400];
icon = <RestaurantIcon className={classes.categoryIcon}/>;
break;
case 3: //Convenience Store
color = purple[500];
color = blue[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}/>;
......
import React from 'react';
import {withStyles} from 'material-ui/styles';
import Chip from 'material-ui/Chip';
import Typography from 'material-ui/Typography';
import DoneIcon from 'material-ui-icons/Done';
import CloseIcon from 'material-ui-icons/Close';
import AlarmIcon from 'material-ui-icons/Alarm';
import {blue, green, orange, red} from 'material-ui/colors'
const FacilityStatus = ({classes, facility}) => {
......@@ -184,64 +186,68 @@ const FacilityStatus = ({classes, facility}) => {
};
/**
* Generates the chip label
* Generates information about the facility's status.
*
* @param isOpen True if the facility is open, otherwise false.
* @param time The time in minutes until the facility opens / closes.
* @returns {string} The label for the chip
* @returns {{label: string, color: *, icon: *}} Information about the facility.
*/
const chipLabel = (isOpen, time) => {
if (time === -1) {
return "OPEN 24/7"
}
const generateStatusInfo = (isOpen, time) => {
let label;
let color;
let icon;
if (isOpen && time > 60) {
return "OPEN";
if (time === -1) {
label = 'OPEN 24/7';
color = green[500];
icon = <DoneIcon/>;
} else if (isOpen && time > 60) {
label = 'OPEN';
color = green[500];
icon = <DoneIcon/>;
} else if (isOpen && time <= 30) {
return "CLOSING SOON";
label = 'CLOSING SOON';
color = orange[500];
icon = <AlarmIcon/>;
} else if (!isOpen && time > 15) {
return "CLOSED";
label = 'CLOSED';
color = red[500];
icon = <CloseIcon/>
} else {
return `OPENING IN ${Math.round(time)}m`;
label = `OPENS IN ${Math.round(time)}m`;
color = blue[500];
icon = <AlarmIcon/>
}
};
/**
* Generates the background color of the chip.
*
* @param isOpen True if the facility is open, otherwise false.
* @param time The time in minutes until the facility opens / closes.
* @returns {string} The background color of the chip.
*/
const backgroundColor = (isOpen, time) => {
if (time === -1) {
return green[500];
}
if (isOpen && time > 60) {
return green[500];
} else if (isOpen && time <= 30) {
return orange[500];
} else if (!isOpen && time > 15) {
return red[500];
} else {
return blue[500];
return {
label: label,
color: color,
icon: icon,
}
};
const time = timeTill(facility);
const statusInfo = generateStatusInfo(facility.isOpen, timeTill(facility));
return (
<Chip label={
<Typography type={'caption'} className={classes.statusText} style={{color: statusInfo.color}}>
{statusInfo.icon}
{statusInfo.label}
</Typography>
/*<Chip label={
<div>
<Typography type={'caption'} className={classes.isOpenText}>
{chipLabel(facility.isOpen, time)}
</Typography>
</div>
} className={classes.chip} style={{backgroundColor: backgroundColor(facility.isOpen, time)}}/>
} className={classes.chip} style={{backgroundColor: backgroundColor(facility.isOpen, time)}}/>*/
)
};
const styleSheet = {
statusText: {
display: 'flex',
alignItems: 'center'
},
chip: {
height: '28px',
borderRadius: '4px',
......
......@@ -137,9 +137,6 @@ const FacilityCard = ({classes, facility, favorites, addFavoriteFacility, remove
{removeBrackets(facility.facility_name)}
</Typography>
</Grid>
<Grid item className={classes.smallGridItemSpacing}>
<FacilityStatus facility={facility}/>
</Grid>
<Grid item className={classes.smallGridItemSpacing}>
<FacilityCategory category={facility.facility_category} />
</Grid>
......@@ -149,12 +146,7 @@ const FacilityCard = ({classes, facility, favorites, addFavoriteFacility, remove
<CardActions>
<Grid container justify={'space-around'}>
<Grid item className={classes.extraInfoWrapper}>
<Typography type={'caption'}>
<DirectionsWalkIcon/>
</Typography>
<Typography type={'caption'} align={'center'}>
3M
</Typography>
<FacilityStatus facility={facility}/>
</Grid>
<Grid item className={classes.extraInfoWrapper}>
......@@ -177,7 +169,7 @@ const styleSheet = {
position: 'relative'
},
cardContent: {
padding: '8px 4px !important'
padding: '8px 4px 0 4px !important'
},
smallGridContainerSpacing: {
margin: '-2px -8px !important'
......
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