Today's hours now on cards.

src/components/FacilityStatus.js

@@ -15,10 +15,7 @@ const FacilityStatus = ({facility}) => {
         let label;
         let isOpen;
 
-        if (FacilityUtils.getFacilityActiveSchedule(facility).twenty_four_hours) {
-            label = 'OPEN 24/7';
-            isOpen = true;
-        } else if (FacilityUtils.isFacilityOpen(facility)) {
+        if (FacilityUtils.isFacilityOpen(facility)) {
             label = 'OPEN';
             isOpen = true;
         } else {

src/components/WeekHours.js

 import React from 'react'
 import Grid from 'material-ui/Grid';
+import FacilityUtils from '../utils/facilityUtils';
 
 const WeekHours = ({facility}) => {
-
-    const convert_am_pm = (time) => {
-        const timeArr = time
-            .split(":")
-            .map((item) => {
-                return Number(item)
-            });
-
-        let am_pm = "am"
-        if (timeArr[0] > 12) {
-            timeArr[0] = timeArr[0] - 12
-            am_pm = "pm"
-        }
-        if (timeArr[1] === 0) {
-            timeArr[1] = ""
-        } else {
-            timeArr[1] = ":" + timeArr[1]
-        }
-        return timeArr[0] + timeArr[1] + am_pm;
-    }
     const weekDays = [
         "Mon",
         "Tue",
@@ -30,43 +11,21 @@ const WeekHours = ({facility}) => {
         "Fri",
         "Sat",
         "Sun"
-    ]
+    ];
+
     let output = [];
-    try {
 
-        const schedule = facility.main_schedule.open_times;
+    try {
         for (let dayOfWeek = 0; dayOfWeek < 7; dayOfWeek++) {
-            let startDay,
-                endDay,
-                startTime,
-                endTime;
-            let hours = null;
-
-            for (let i = 0; i < schedule.length; i++) {
-                startDay = schedule[i].start_day;
-                endDay = schedule[i].end_day;
-                startTime = schedule[i].start_time;
-                endTime = schedule[i].end_time;
-                if (dayOfWeek === startDay) {
-                    hours = convert_am_pm(startTime) + "  -  " + convert_am_pm(endTime);
-                    break;
-                } else if (dayOfWeek > startDay && dayOfWeek < endDay) {
-                    hours = '24 hours';
-                    break;
-                }
-            }
-
-            if (hours === null) {
-                hours = 'Closed'
-            }
             output[dayOfWeek] = (
                 <Grid container key={facility.slug + dayOfWeek} className='week-hours-row'>
                     <Grid item xs={2} className='week-hours-day'>{weekDays[dayOfWeek]}</Grid>
-                    <Grid item className='week-hours-times'>{hours}</Grid>
+                    <Grid item className='week-hours-times'>{FacilityUtils.getHoursByDay(facility, dayOfWeek)}</Grid>
                 </Grid>
             )
         }
-    } catch (e) {}
+    } catch (e) {
+    }
 
     return (
         <div>

src/containers/FacilityCard.js

@@ -11,6 +11,7 @@ import LocationOnIcon from 'material-ui-icons/LocationOn';
 import {removeBrackets} from '../utils/nameUtils';
 import classnames from 'classnames';
 import FacilityDialog from '../components/FacilityDialog';
+import FacilityUtils from '../utils/facilityUtils';
 
 class FacilityCard extends React.Component {
 
@@ -45,6 +46,8 @@ class FacilityCard extends React.Component {
 
         const isSelected = selectedFacility.slug === facility.slug;
 
+        const dayOfWeek = [6, 0, 1, 2, 3, 4, 5][new Date().getDay()];
+
         return (
         <Card onClick={this.handleCardClick} className={classnames('fc-root', isSelected && 'fc-selected')}
               onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} raised>
@@ -70,6 +73,11 @@ class FacilityCard extends React.Component {
                     <Grid item className={'fc-small-grid-item-spacing'}>
                         <FacilityCategory category={facility.facility_category} />
                     </Grid>
+                    <Grid item className={'fc-small-grid-item-spacing'}>
+                        <Typography type={'body1'}>
+                            {"Today: " + FacilityUtils.getHoursByDay(facility, dayOfWeek)}
+                        </Typography>
+                    </Grid>
                 </Grid>
 
                 <Grid container justify={'space-around'} className={'fc-extra-info-wrapper'}>

src/styles/containers/facilityCard.scss

@@ -100,7 +100,7 @@
 @media screen and (min-width: map-get($breakpoints, lg)) and (max-width: map-get($breakpoints, xl)) {
   .fc-root {
     width: 250px * $fc-lg-scale;
-    height: 230px;
+    height: 250px;
   }
 
   .fc-small-grid-item-spacing {

src/utils/facilityUtils.js

@@ -202,6 +202,81 @@ const getActiveEntry = schedule => {
     return null;
 };
 
+/**
+ * Determines the entry based on the day of the week.
+ *
+ * @param schedule A schedule.
+ * @param dayOfWeek The day of the week
+ * @returns {*} A schedule entry for the specified day, null if no entries found for that day.
+ */
+const getEntryByDay = (schedule, dayOfWeek) => {
+    const openTimes = schedule.open_times;
+
+    for (let i = 0; i < openTimes.length; i++) {
+        const entry = openTimes[i];
+
+        const startDay = entry.start_day;
+        const endDay = entry.end_day;
+
+        if ((startDay <= endDay &&
+                dayOfWeek >= startDay &&
+                dayOfWeek <= endDay) ||
+
+            (startDay > endDay &&
+                dayOfWeek >= startDay ||
+                dayOfWeek <= endDay)
+        ) {
+            return entry;
+        }
+    }
+
+    return null;
+};
+
+
+const getHoursByDay = (facility, dayOfWeek) => {
+    const schedule = getFacilityActiveSchedule(facility);
+
+    if (schedule.twenty_four_hours) {
+        return 'All Day';
+    }
+
+    const entry = getEntryByDay(schedule, dayOfWeek);
+
+    if (entry === null) {
+        return 'Closed';
+    }
+
+    return convertToMeridiemTime(entry.start_time) + '  -  ' + convertToMeridiemTime(entry.end_time);
+
+};
+
+
+/**
+ * Converts military time to 12-hour time.
+ *
+ * @param time The time as military time
+ * @returns {string} The time as 12-hour time.
+ */
+const convertToMeridiemTime = (time) => {
+    const timeArr = time
+        .split(":")
+        .map((item) => {
+            return Number(item)
+        });
+
+    let am_pm = "am";
+    if (timeArr[0] > 12) {
+        timeArr[0] = timeArr[0] - 12;
+        am_pm = "pm";
+    }
+    if (timeArr[1] === 0) {
+        timeArr[1] = "";
+    } else {
+        timeArr[1] = ":" + timeArr[1]
+    }
+    return timeArr[0] + timeArr[1] + am_pm;
+};
 
 /**
  * Calculates the number of days between dayFrom and dayTo.
@@ -226,6 +301,7 @@ const daysTill = (dayFrom, dayTo) => {
 export default {
     getFacilityActiveSchedule: getFacilityActiveSchedule,
     isFacilityOpen: isFacilityOpen,
+    getHoursByDay: getHoursByDay,
     calcTimeTillOpen: calcTimeTillOpen,
     calcTimeTillClose: calcTimeTillClose
 }
\ No newline at end of file