Commit e532b2ac by Andrew Hrdy

Started working on new card design (WIP).

parent 0dc17849
 ... @@ -141,24 +141,34 @@ const FacilityStatus = ({classes, facility}) => { ... @@ -141,24 +141,34 @@ const FacilityStatus = ({classes, facility}) => { }; }; /** /** * Calculates and formats the time until the facility open or closes. * Generates the chip label * * * @param facility The facility to determine the message for. * @param facility The facility to determine the label for. * @returns {string} The formatted message of how long until a facility open or closes. * @returns {string} The label for the chip */ */ const timeTillMessage = facility => { const chipLabel = facility => { const schedule = facility.main_schedule; const schedule = facility.main_schedule; //TODO: Logic for "Special Schedule". I have no idea what this is. //TODO: Logic for "Special Schedule". I have no idea what this is. //Facility is open 24/7 //Facility is open 24/7 if (schedule.twenty_four_hours) { if (schedule.twenty_four_hours) { return "24/7" return "OPEN 24/7"; } } let time = facility.isOpen ? calcTimeTillClose(schedule) : calcTimeTillOpen(schedule); let time = facility.isOpen ? calcTimeTillClose(schedule) : calcTimeTillOpen(schedule); //TODO: May want to use Math.ceil instead of Math.round if (facility.isOpen && time > 60) { return "OPEN"; } else if (facility.isOpen && time <= 60) { return "CLOSING SOON"; } else if (!facility.isOpen && time > 60) { return "CLOSED"; } else { return "OPENING SOON"; } /*/TODO: May want to use Math.ceil instead of Math.round if (time < 60) { //Under one hour if (time < 60) { //Under one hour const roundedMins = Math.round(time); const roundedMins = Math.round(time); return `\${roundedMins} \${roundedMins === 1 ? "min" : "mins"}`; return `\${roundedMins} \${roundedMins === 1 ? "min" : "mins"}`; ... @@ -168,17 +178,14 @@ const FacilityStatus = ({classes, facility}) => { ... @@ -168,17 +178,14 @@ const FacilityStatus = ({classes, facility}) => { } else { //Over a day } else { //Over a day const roundedDays = Math.round(time / 1440); const roundedDays = Math.round(time / 1440); return `\${roundedDays} \${roundedDays === 1 ? "day" : "days"}`; return `\${roundedDays} \${roundedDays === 1 ? "day" : "days"}`; } }*/ }; }; return ( return (
{facility.isOpen ? "OPEN" : "CLOSED"} {chipLabel(facility)} {timeTillMessage(facility)}
} className={classes.chip} style={{backgroundColor: facility.isOpen ? green[500] : red[500]}}/> } className={classes.chip} style={{backgroundColor: facility.isOpen ? green[500] : red[500]}}/> ... @@ -186,22 +193,17 @@ const FacilityStatus = ({classes, facility}) => { ... @@ -186,22 +193,17 @@ const FacilityStatus = ({classes, facility}) => { }; }; const styleSheet = { const styleSheet = { chip: { chip: { margin: 'auto', position: 'absolute', height: '24px', left: '8px', borderRadius: '5px', bottom: '4px', opacity: .9, height: '28px' }, }, isOpenText: { isOpenText: { borderRight: '1px solid white', paddingRight: '5px', color: 'white', fontFamily: 'Nunito', display: 'inline' }, timeText: { paddingLeft: '5px', color: 'white', color: 'white', fontFamily: 'Nunito', fontFamily: 'Nunito', display: 'inline' fontWeight: 'bold', display: 'inline', } } }; }; ... ...
 ... @@ -46,8 +46,9 @@ const styleSheet = { ... @@ -46,8 +46,9 @@ const styleSheet = { top: '0px', top: '0px', right: '0px', right: '0px', color: yellow[600], color: yellow[600], height: '20px', height: '26px', width: '20px', width: '26px', padding: '4px', cursor: 'pointer', cursor: 'pointer', } } }; }; ... ...
 import React from 'react' import React from 'react' import {withStyles} from 'material-ui/styles'; import {withStyles} from 'material-ui/styles'; import Card, {CardContent} from 'material-ui/Card'; import Card, {CardContent, CardHeader, CardMedia} from 'material-ui/Card'; import Typography from 'material-ui/Typography'; import Typography from 'material-ui/Typography'; import Grid from 'material-ui/Grid'; import Grid from 'material-ui/Grid'; import Avatar from 'material-ui/Avatar'; import Avatar from 'material-ui/Avatar'; import FavoriteButton from '../components/FavoriteButton'; import FacilityStatus from '../components/FacilityStatus'; import Chip from 'material-ui/Chip' import {compose} from 'redux' import {compose} from 'redux' import {connect} from 'react-redux' import {connect} from 'react-redux' import {addFavoriteFacility, removeFavoriteFacility, setSidebar} from '../actions/ui' import {addFavoriteFacility, removeFavoriteFacility, setSidebar} from '../actions/ui' import FacilityStatus from '../components/FacilityStatus'; import RestaurantIcon from 'material-ui-icons/Restaurant'; import FavoriteButton from '../components/FavoriteButton'; import {removeBrackets} from '../utils/nameUtils'; import {removeBrackets} from '../utils/nameUtils'; import { import { ... @@ -108,32 +110,30 @@ const FacilityCard = ({classes, facility, favorites, addFavoriteFacility, remove ... @@ -108,32 +110,30 @@ const FacilityCard = ({classes, facility, favorites, addFavoriteFacility, remove return ( return ( {/**/} addFavoriteFacility={addFavoriteFacility} removeFavoriteFacility={removeFavoriteFacility}/> } title={'Dining'}/>