Commit 84ce895b authored by Andrew Hrdy's avatar Andrew Hrdy
Browse files

Added logic to determine how long until a facility opens or closes. Small visual changes.

parent 4168d6eb
......@@ -31,6 +31,8 @@ import {
yellow
} from 'material-ui/colors';
const materialColors = [red, pink, purple, deepPurple, indigo, blue, lightBlue, cyan, teal, green,
lightGreen, lime, yellow, amber, orange, deepOrange, brown, grey, blueGrey];
const FacilityCard = ({classes, facility, setSidebar}) => {
......@@ -78,8 +80,6 @@ const FacilityCard = ({classes, facility, setSidebar}) => {
return words[0].substring(0, 1).toUpperCase() + words[words.length - 1].substring(0, 1).toUpperCase();
};
const materialColors = [red, pink, purple, deepPurple, indigo, blue, lightBlue, cyan, teal, green,
lightGreen, lime, yellow, amber, orange, deepOrange, brown, grey, blueGrey];
/**
* Gets a material color based off the facility's slug.
......@@ -118,7 +118,7 @@ const FacilityCard = ({classes, facility, setSidebar}) => {
return (
<Card onClick={handleClick} className={classes.root} raised>
{/*<CardMedia className={classes.media} image={require('../images/chipotleLogo.png')}/>*/}
<CardContent>
<CardContent className={classes.cardContent}>
<Grid container>
<Grid item xs={4} className={classes.avatarContainer}>
<Avatar className={classes.avatar}
......@@ -126,16 +126,16 @@ const FacilityCard = ({classes, facility, setSidebar}) => {
</Grid>
<Grid item xs={8}>
<Grid container direction={'column'} spacing={8}>
<Grid item>
<Grid container direction={'column'}>
<Grid item className={classes.smallGridItemSpacing}>
<Typography type={'title'} align={'center'} className={classes.title} noWrap>
{removeBrackets(facility.facility_name)}
</Typography>
</Grid>
<Grid item>
<Grid item className={classes.smallGridItemSpacing}>
<FacilityStatus facility={facility}/>
</Grid>
<Grid item>
<Grid item className={classes.smallGridItemSpacing}>
<Typography type={'caption'} align={'center'} className={classes.location} noWrap>
{removeBrackets(facility.facility_location.building)}
</Typography>
......@@ -152,6 +152,12 @@ const styleSheet = {
width: 250,
borderRadius: '5px'
},
cardContent: {
paddingBottom: '16px !important'
},
smallGridItemSpacing: {
padding: '2px !important'
},
/**media: {
flex: 1,
width: 200,
......
......@@ -5,14 +5,180 @@ import Typography from 'material-ui/Typography';
import {green, red} from 'material-ui/colors'
const FacilityStatus = ({classes, facility}) => {
/**
* Helper function to calculate the number days between dayFrom and dayTo.
*
* @param dayFrom The index of the start day (0-6)
* @param dayTo The index of the end day (0-6)
* @returns {number} The number of days between the two.
*/
const daysTill = (dayFrom, dayTo) => {
let days = 0;
while (dayFrom !== dayTo) {
days++;
if (++dayFrom > 6) {
dayFrom = 0;
}
}
return days;
};
/**
* Calculates the time until the facility is open.
* This function does not work correctly if the facility is open.
*
* @param schedule The active schedule for the facility.
* @return {number} The time (in minutes) until the facility opens.
*/
const calcTimeTillOpen = schedule => {
const curDateTime = new Date();
//Converts the JS day of week (0 is sunday), to the API day of week (0 is monday).
const dayOfWeek = [6, 0, 1, 2, 3, 4, 5][curDateTime.getDay()];
let timeTillOpen = null; //The time till the facility is open (in ms)
//Iterates over each schedule, setting the timeTillOpen to be the smallest it can be.
for (let i = 0; i < schedule.open_times.length; i++) {
const scheduleEntry = schedule.open_times[i];
let daysTillOpen = daysTill(dayOfWeek, scheduleEntry.start_day);
const timeInParts = scheduleEntry.start_time.split(':');
const openTime = new Date(
curDateTime.getFullYear(),
curDateTime.getMonth(),
curDateTime.getDate() + daysTillOpen,
timeInParts[0],
timeInParts[1],
timeInParts[2]);
const entryTillOpen = openTime - curDateTime;
if (!timeTillOpen || (entryTillOpen > 0 && entryTillOpen < timeTillOpen)) {
timeTillOpen = entryTillOpen;
}
}
return timeTillOpen / 60000; //Set to minutes
};
/**
* Calculates the time until the facility is closed.
* This function does not work correctly if the facility is closed.
*
* @param schedule The active schedule for the facility.
* @returns {number} The time (in minutes) until the facility closes.
*/
const calcTimeTillClose = schedule => {
const curDateTime = new Date();
//Converts the JS day of week (0 is sunday), to the API day of week (0 is monday).
const dayOfWeek = [6, 0, 1, 2, 3, 4, 5][curDateTime.getDay()];
let currentEntry;
//Finds the active entry for the schedule.
for (let i = 0; i < schedule.open_times.length; i++) {
const scheduleEntry = schedule.open_times[i];
const startTimeInParts = scheduleEntry.start_time.split(":");
const endTimeInParts = scheduleEntry.end_time.split(":");
/*
Only the times are being compared, therefore set the year, month, and date to 0.
*/
const curTime = new Date(0, 0, 0, curDateTime.getHours(), curDateTime.getMinutes(), curDateTime.getSeconds());
const startTime = new Date(0, 0, 0, startTimeInParts[0], startTimeInParts[1], startTimeInParts[2]);
const endTime = new Date(0, 0, 0, endTimeInParts[0], endTimeInParts[1], endTimeInParts[2]);
/*
First block accounts for entries where the end day is larger than the start day
ex. start day is Monday (0), end day is Tuesday (1)
Second block Accounts for entries where the end day is smaller than the start day
ex. start day is Sunday (6), end day is Monday (0)
*/
if ((scheduleEntry.start_day <= scheduleEntry.end_day &&
dayOfWeek >= scheduleEntry.start_day &&
dayOfWeek <= scheduleEntry.end_day) ||
(scheduleEntry.start_day > scheduleEntry.end_day &&
dayOfWeek >= scheduleEntry.start_day ||
dayOfWeek <= scheduleEntry.end_day)
) {
/*
This logic makes sure that if the current day is the start day / end day, the current time
is within the start / end times. This is important for cases such as Southside.
If this logic was not here, then example: if the day was Friday (4) at 18:00:00,
the schedule that starts on Thursday (3) at 07:00:00 and ends on Friday (4) at 02:00:00 would be
selected as it is the first to be iterated that either begins or ends on Friday (4)
This logic prevents this from occurring and instead selects starting on Friday (4) at 07:00:00 and
ending on Saturday (5) at 02:00:00
*/
if ((dayOfWeek === scheduleEntry.start_day && curTime > startTime) ||
(dayOfWeek === scheduleEntry.end_day && curTime <= endTime) ||
(dayOfWeek !== scheduleEntry.start_day && dayOfWeek !== scheduleEntry.end_day)) {
currentEntry = scheduleEntry;
break;
}
}
}
let daysTillClose = daysTill(dayOfWeek, currentEntry.end_day);
const timeInParts = currentEntry.end_time.split(':');
const closeTime = new Date(
curDateTime.getFullYear(),
curDateTime.getMonth(),
curDateTime.getDate() + daysTillClose,
timeInParts[0],
timeInParts[1],
timeInParts[2]);
return (closeTime - curDateTime) / 60000;
};
/**
* Calculates and formats the time until the facility open or closes.
*
* @param facility The facility to determine the message for.
* @returns {string} The formatted message of how long until a facility open or closes.
*/
const timeTillMessage = facility => {
const schedule = facility.main_schedule;
//TODO: Logic for "Special Schedule". I have no idea what this is.
//Facility is open 24/7
if (schedule.twenty_four_hours) {
return "24/7"
}
let time = facility.isOpen ? calcTimeTillClose(schedule) : calcTimeTillOpen(schedule);
//TODO: May want to use Math.ceil instead of Math.round
if (time < 60) { //Under one hour
const roundedMins = Math.round(time);
return `${roundedMins} ${roundedMins === 1 ? "min" : "mins"}`;
} else if (time < 1440) { //Under one day
const roundedHrs = Math.round(time / 60);
return `${roundedHrs} ${roundedHrs === 1 ? "hr" : "hrs"}`;
} else { //Over a day
const roundedDays = Math.round(time / 1440);
return `${roundedDays} ${roundedDays === 1 ? "day" : "days"}`;
}
};
return (
<Chip label={
<div>
<Typography type={'caption'} className={classes.isOpenText}>
{facility.isOpen ? "OPEN" : "CLOSED"}
</Typography>
</Typography>
<Typography type={'caption'} className={classes.timeText}>
~18 Hrs
{timeTillMessage(facility)}
</Typography>
</div>
} className={classes.chip} style={{backgroundColor: facility.isOpen ? green[500] : red[500]}}/>
......
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