Fixed theme.js file, changed font from Nunito to Roboto, FacilityStatus now...

Fixed theme.js file, changed font from Nunito to Roboto, FacilityStatus now supports special schedules.

public/index.html

@@ -11,6 +11,7 @@
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
     <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Nunito" />
+    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

src/components/FacilityCategory.js

@@ -86,7 +86,7 @@ const FacilityCategory = ({classes, category}) => {
     return (
         <div className={classes.categoryWrapper}>
             {generateAvatar()}
-            <Typography type={'body1'} className={classes.nunito} noWrap>
+            <Typography type={'body1'} noWrap>
                 {category.name}
             </Typography>
         </div>
@@ -108,9 +108,6 @@ const styleSheet = {
         height: 'auto !important',
         marginRight: '8px'
     },
-    nunito: {
-        fontFamily: 'Nunito'
-    }
 };
 
 export default withStyles(styleSheet)(FacilityCategory);
\ No newline at end of file

src/components/FacilityStatus.js

@@ -147,9 +147,33 @@ const FacilityStatus = ({classes, facility}) => {
      * @returns {number} The time in minutes until a facility open / closes. -1 if 24/7.
      */
     const timeTill = facility => {
-        const schedule = facility.main_schedule;
+        let schedule = facility.main_schedule;
+        const curDateTime = new Date();
+
+        for (let i = 0; i < facility.special_schedules; i++) {
+            const specialSchedule = facility.special_schedules[i];
+
+            const startInParts = specialSchedule.valid_start.split('-');
+            const endInParts = specialSchedule.valid_end.split('-');
+
+            const startDate = new Date(startInParts[0], startInParts[1], startInParts[2]);
+            const endDate = new Date(endInParts[0], endInParts[1], endInParts[2]);
 
-        //TODO: Logic for "Special Schedule". I have no idea what this is.
+            /*
+                TODO: Possible issues may arise by only checking date and not time
+                    valid_start and valid_end come as dates without times. If a facility,
+                    such as Southside, closes are 2 am the day a special schedule is in use,
+                    a user checking between 12am and 2am would receive incorrect information.
+                    Possible solutions:
+                        - API valid_start and valid_end are in the format yyyy-mm-dd-hh-mm-ss (preferred)
+                        - Iterate over all schedules, find active schedule for current day of week,
+                          then add the time to startDate and endDate before the date checking.
+             */
+            if (startDate < curDateTime && endDate > curDateTime) {
+                schedule = specialSchedule;
+                break;
+            }
+        }
 
         //Facility is open 24/7
         if (schedule.twenty_four_hours) {
@@ -173,7 +197,7 @@ const FacilityStatus = ({classes, facility}) => {
 
         if (isOpen && time > 60) {
             return "OPEN";
-        } else if (isOpen && time <= 60) {
+        } else if (isOpen && time <= 30) {
             return "CLOSING SOON";
         } else if (!isOpen && time > 15) {
             return "CLOSED";
@@ -196,7 +220,7 @@ const FacilityStatus = ({classes, facility}) => {
 
         if (isOpen && time > 60) {
             return green[500];
-        } else if (isOpen && time <= 60) {
+        } else if (isOpen && time <= 30) {
             return orange[500];
         } else if (!isOpen && time > 15) {
             return red[500];
@@ -219,17 +243,11 @@ const FacilityStatus = ({classes, facility}) => {
 };
 const styleSheet = {
     chip: {
-        //position: 'absolute',
-        //left: '8px',
-        //bottom: '4px',
-        //opacity: .9,
         height: '28px',
         borderRadius: '4px',
     },
     isOpenText: {
         color: 'white',
-        fontFamily: 'Nunito',
-        fontWeight: 'bold',
         display: 'inline',
     }
 };

src/containers/FacilityCard.js

@@ -133,7 +133,7 @@ const FacilityCard = ({classes, facility, favorites, addFavoriteFacility, remove
             <CardContent className={classes.cardContent}>
                 <Grid container align={'center'} direction={'column'} className={classes.smallGridContainerSpacing}>
                     <Grid item className={classes.smallGridItemSpacing}>
-                        <Typography type={'title'} align={'center'} className={classnames(classes.title, twoLineEllipsis)}>
+                        <Typography type={'title'} align={'center'} className={twoLineEllipsis}>
                             {removeBrackets(facility.facility_name)}
                         </Typography>
                     </Grid>
@@ -176,12 +176,6 @@ const styleSheet = {
         borderRadius: '5px',
         position: 'relative'
     },
-    header: {
-        padding: '4px'
-    },
-    headerTitle: {
-        fontFamily: 'Nunito'
-    },
     cardContent: {
         padding: '8px 4px !important'
     },
@@ -195,9 +189,6 @@ const styleSheet = {
         flex: 1,
         height: '115px',
     },
-    mediaContainer: {
-        position: 'relative'
-    },
     logoContainer: {
         width: '100px',
         height: '100px',
@@ -218,13 +209,6 @@ const styleSheet = {
         alignItems: 'center',
         maxWidth: '50%'
     },
-    title: {
-      fontFamily: 'Nunito',
-      fontWeight: 'bold',
-    },
-    nunito: {
-        fontFamily: 'Nunito'
-    },
     twoLineEllipsis: {
         position: 'relative',
         lineHeight: '1em',

src/index.js

 import React from 'react';
 import ReactDOM from 'react-dom';
-import { createStore, applyMiddleware, compose } from 'redux';
+import {applyMiddleware, compose, createStore} from 'redux';
 import './index.css';
 import Layout from './containers/Layout';
 import registerServiceWorker from './registerServiceWorker';
 import createHistory from 'history/createBrowserHistory'
-import { ConnectedRouter, routerMiddleware} from 'react-router-redux'
-import { Provider } from 'react-redux';
+import {ConnectedRouter, routerMiddleware} from 'react-router-redux'
+import {Provider} from 'react-redux';
 import ReduxThunk from 'redux-thunk';
 import reducers from './reducers/index';
-import { MuiThemeProvider,createMuiTheme,createPalette } from 'material-ui/styles';
-import  blue  from 'material-ui/colors/blue';
-// import  fullWhite  from 'material-ui/colors/common';
-// import  grey  from 'material-ui/colors/grey';
-import  amber  from 'material-ui/colors/amber';
-import red from 'material-ui/colors/red';
-import green from 'material-ui/colors/green';
+import {MuiThemeProvider} from 'material-ui/styles';
+import theme from './theme';
+
 // Create a history of your choosing (we're using a browser history in this case)
 const history = createHistory();
 const extension = window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__();
 
 let enhance;
 
-if(extension) {
+if (extension) {
     enhance = compose(
-        applyMiddleware(ReduxThunk,routerMiddleware(history))
-        ,extension);
+        applyMiddleware(ReduxThunk, routerMiddleware(history))
+        , extension);
 } else {
     enhance = compose(
-        applyMiddleware(ReduxThunk,routerMiddleware(history)));
+        applyMiddleware(ReduxThunk, routerMiddleware(history)));
 }
 
-const store = createStore(reducers,enhance);
-
-const theme = createMuiTheme({
-    palette: {primary:blue,secondary:green,warn:amber,error:red,type:'light'}
-});
-
+const store = createStore(reducers, enhance);
 
 ReactDOM.render(
     <Provider store={store}>
         <ConnectedRouter history={history}>
             <MuiThemeProvider theme={theme}>
-                <Layout />
+                <Layout/>
             </MuiThemeProvider>
         </ConnectedRouter>
     </Provider>