Skip to content

GitLab

Commit 8ac488a9 authored by Andrew Hrdy's avatar Andrew Hrdy
Browse files

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.
parent 4526e385
Hide whitespace changes
Inline Side-by-side
public/index.html
View file @ 8ac488a9
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
<link rel="manifest" href="%PUBLIC_URL%/manifest.json"> <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Nunito" /> <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. Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build. It will be replaced with the URL of the `public` folder during the build.
......
src/components/FacilityCategory.js
View file @ 8ac488a9
...@@ -86,7 +86,7 @@ const FacilityCategory = ({classes, category}) => { ...@@ -86,7 +86,7 @@ const FacilityCategory = ({classes, category}) => {
return ( return (
<div className={classes.categoryWrapper}> <div className={classes.categoryWrapper}>
{generateAvatar()} {generateAvatar()}
<Typography type={'body1'} className={classes.nunito} noWrap> <Typography type={'body1'} noWrap>
{category.name} {category.name}
</Typography> </Typography>
</div> </div>
...@@ -108,9 +108,6 @@ const styleSheet = { ...@@ -108,9 +108,6 @@ const styleSheet = {
height: 'auto !important', height: 'auto !important',
marginRight: '8px' marginRight: '8px'
}, },
nunito: {
fontFamily: 'Nunito'
}
}; };
export default withStyles(styleSheet)(FacilityCategory); export default withStyles(styleSheet)(FacilityCategory);
\ No newline at end of file
src/components/FacilityStatus.js
View file @ 8ac488a9
...@@ -147,9 +147,33 @@ const FacilityStatus = ({classes, facility}) => { ...@@ -147,9 +147,33 @@ const FacilityStatus = ({classes, facility}) => {
* @returns {number} The time in minutes until a facility open / closes. -1 if 24/7. * @returns {number} The time in minutes until a facility open / closes. -1 if 24/7.
*/ */
const timeTill = facility => { 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 //Facility is open 24/7
if (schedule.twenty_four_hours) { if (schedule.twenty_four_hours) {
...@@ -173,7 +197,7 @@ const FacilityStatus = ({classes, facility}) => { ...@@ -173,7 +197,7 @@ const FacilityStatus = ({classes, facility}) => {
if (isOpen && time > 60) { if (isOpen && time > 60) {
return "OPEN"; return "OPEN";
} else if (isOpen && time <= 60) { } else if (isOpen && time <= 30) {
return "CLOSING SOON"; return "CLOSING SOON";
} else if (!isOpen && time > 15) { } else if (!isOpen && time > 15) {
return "CLOSED"; return "CLOSED";
...@@ -196,7 +220,7 @@ const FacilityStatus = ({classes, facility}) => { ...@@ -196,7 +220,7 @@ const FacilityStatus = ({classes, facility}) => {
if (isOpen && time > 60) { if (isOpen && time > 60) {
return green[500]; return green[500];
} else if (isOpen && time <= 60) { } else if (isOpen && time <= 30) {
return orange[500]; return orange[500];
} else if (!isOpen && time > 15) { } else if (!isOpen && time > 15) {
return red[500]; return red[500];
...@@ -219,17 +243,11 @@ const FacilityStatus = ({classes, facility}) => { ...@@ -219,17 +243,11 @@ const FacilityStatus = ({classes, facility}) => {
}; };
const styleSheet = { const styleSheet = {
chip: { chip: {
//position: 'absolute',
//left: '8px',
//bottom: '4px',
//opacity: .9,
height: '28px', height: '28px',
borderRadius: '4px', borderRadius: '4px',
}, },
isOpenText: { isOpenText: {
color: 'white', color: 'white',
fontFamily: 'Nunito',
fontWeight: 'bold',
display: 'inline', display: 'inline',
} }
}; };
......
src/containers/FacilityCard.js
View file @ 8ac488a9
...@@ -133,7 +133,7 @@ const FacilityCard = ({classes, facility, favorites, addFavoriteFacility, remove ...@@ -133,7 +133,7 @@ const FacilityCard = ({classes, facility, favorites, addFavoriteFacility, remove
<CardContent className={classes.cardContent}> <CardContent className={classes.cardContent}>
<Grid container align={'center'} direction={'column'} className={classes.smallGridContainerSpacing}> <Grid container align={'center'} direction={'column'} className={classes.smallGridContainerSpacing}>
<Grid item className={classes.smallGridItemSpacing}> <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)} {removeBrackets(facility.facility_name)}
</Typography> </Typography>
</Grid> </Grid>
...@@ -176,12 +176,6 @@ const styleSheet = { ...@@ -176,12 +176,6 @@ const styleSheet = {
borderRadius: '5px', borderRadius: '5px',
position: 'relative' position: 'relative'
}, },
header: {
padding: '4px'
},
headerTitle: {
fontFamily: 'Nunito'
},
cardContent: { cardContent: {
padding: '8px 4px !important' padding: '8px 4px !important'
}, },
...@@ -195,9 +189,6 @@ const styleSheet = { ...@@ -195,9 +189,6 @@ const styleSheet = {
flex: 1, flex: 1,
height: '115px', height: '115px',
}, },
mediaContainer: {
position: 'relative'
},
logoContainer: { logoContainer: {
width: '100px', width: '100px',
height: '100px', height: '100px',
...@@ -218,13 +209,6 @@ const styleSheet = { ...@@ -218,13 +209,6 @@ const styleSheet = {
alignItems: 'center', alignItems: 'center',
maxWidth: '50%' maxWidth: '50%'
}, },
title: {
fontFamily: 'Nunito',
fontWeight: 'bold',
},
nunito: {
fontFamily: 'Nunito'
},
twoLineEllipsis: { twoLineEllipsis: {
position: 'relative', position: 'relative',
lineHeight: '1em', lineHeight: '1em',
......
src/index.js
View file @ 8ac488a9
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import { createStore, applyMiddleware, compose } from 'redux'; import {applyMiddleware, compose, createStore} from 'redux';
import './index.css'; import './index.css';
import Layout from './containers/Layout'; import Layout from './containers/Layout';
import registerServiceWorker from './registerServiceWorker'; import registerServiceWorker from './registerServiceWorker';
import createHistory from 'history/createBrowserHistory' import createHistory from 'history/createBrowserHistory'
import { ConnectedRouter, routerMiddleware} from 'react-router-redux' import {ConnectedRouter, routerMiddleware} from 'react-router-redux'
import { Provider } from 'react-redux'; import {Provider} from 'react-redux';
import ReduxThunk from 'redux-thunk'; import ReduxThunk from 'redux-thunk';
import reducers from './reducers/index'; import reducers from './reducers/index';
import { MuiThemeProvider,createMuiTheme,createPalette } from 'material-ui/styles'; import {MuiThemeProvider} from 'material-ui/styles';
import blue from 'material-ui/colors/blue'; import theme from './theme';
// 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';
// Create a history of your choosing (we're using a browser history in this case) // Create a history of your choosing (we're using a browser history in this case)
const history = createHistory(); const history = createHistory();
const extension = window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(); const extension = window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__();
let enhance; let enhance;
if(extension) { if (extension) {
enhance = compose( enhance = compose(
applyMiddleware(ReduxThunk,routerMiddleware(history)) applyMiddleware(ReduxThunk, routerMiddleware(history))
,extension); , extension);
} else { } else {
enhance = compose( enhance = compose(
applyMiddleware(ReduxThunk,routerMiddleware(history))); applyMiddleware(ReduxThunk, routerMiddleware(history)));
} }
const store = createStore(reducers,enhance); const store = createStore(reducers, enhance);
const theme = createMuiTheme({
palette: {primary:blue,secondary:green,warn:amber,error:red,type:'light'}
});
ReactDOM.render( ReactDOM.render(
<Provider store={store}> <Provider store={store}>
<ConnectedRouter history={history}> <ConnectedRouter history={history}>
<MuiThemeProvider theme={theme}> <MuiThemeProvider theme={theme}>
<Layout /> <Layout/>
</MuiThemeProvider> </MuiThemeProvider>
</ConnectedRouter> </ConnectedRouter>
</Provider> </Provider>
......
src/theme.js
View file @ 8ac488a9
const theme = { import {createMuiTheme} from 'material-ui/styles';
const theme = createMuiTheme({
"direction": "ltr", "direction": "ltr",
"palette": { "palette": {
"common": { "common": {
"black": "#000", "black": "#000",
"white": "#fff", "white": "#fff",
"transparent": "rgba(0, 0, 0, 0)", "transparent": "rgba(0, 0, 0, 0)",
"fullBlack": "rgba(0, 0, 0, 1)", "fullBlack": "rgba(0, 0, 0, 1)",
"darkBlack": "rgba(0, 0, 0, 0.87)", "darkBlack": "rgba(0, 0, 0, 0.87)",
"lightBlack": "rgba(0, 0, 0, 0.54)", "lightBlack": "rgba(0, 0, 0, 0.54)",
"minBlack": "rgba(0, 0, 0, 0.26)", "minBlack": "rgba(0, 0, 0, 0.26)",
"faintBlack": "rgba(0, 0, 0, 0.12)", "faintBlack": "rgba(0, 0, 0, 0.12)",
"fullWhite": "rgba(255, 255, 255, 1)", "fullWhite": "rgba(255, 255, 255, 1)",
"darkWhite": "rgba(255, 255, 255, 0.87)", "darkWhite": "rgba(255, 255, 255, 0.87)",
"lightWhite": "rgba(255, 255, 255, 0.54)" "lightWhite": "rgba(255, 255, 255, 0.54)"
},
"type": "light",
"primary": {
"50": "#e3f2fd",
"100": "#bbdefb",
"200": "#90caf9",
"300": "#64b5f6",
"400": "#42a5f5",
"500": "#2196f3",
"600": "#1e88e5",
"700": "#1976d2",
"800": "#1565c0",
"900": "#0d47a1",
"A100": "#82b1ff",
"A200": "#448aff",
"A400": "#2979ff",
"A700": "#2962ff",
"contrastDefaultColor": "light"
},
"secondary": {
"50": "#fce4ec",
"100": "#f8bbd0",
"200": "#f48fb1",
"300": "#f06292",
"400": "#ec407a",
"500": "#e91e63",
"600": "#d81b60",
"700": "#c2185b",
"800": "#ad1457",
"900": "#880e4f",
"A100": "#ff80ab",
"A200": "#ff4081",
"A400": "#f50057",
"A700": "#c51162",
"contrastDefaultColor": "light"
},
"error": {
"50": "#ffebee",
"100": "#ffcdd2",
"200": "#ef9a9a",
"300": "#e57373",
"400": "#ef5350",
"500": "#f44336",
"600": "#e53935",
"700": "#d32f2f",
"800": "#c62828",
"900": "#b71c1c",
"A100": "#ff8a80",
"A200": "#ff5252",
"A400": "#ff1744",
"A700": "#d50000",
"contrastDefaultColor": "light"
},
"grey": {
"50": "#fafafa",
"100": "#f5f5f5",
"200": "#eeeeee",
"300": "#e0e0e0",
"400": "#bdbdbd",
"500": "#9e9e9e",
"600": "#757575",
"700": "#616161",
"800": "#424242",
"900": "#212121",
"A100": "#d5d5d5",
"A200": "#aaaaaa",
"A400": "#303030",
"A700": "#616161",
"contrastDefaultColor": "dark"
},
"shades": {
"dark": {
"text": {
"primary": "rgba(255, 255, 255, 1)",
"secondary": "rgba(255, 255, 255, 0.7)",
"disabled": "rgba(255, 255, 255, 0.5)",
"hint": "rgba(255, 255, 255, 0.5)",
"icon": "rgba(255, 255, 255, 0.5)",
"divider": "rgba(255, 255, 255, 0.12)",
"lightDivider": "rgba(255, 255, 255, 0.075)"
},
"input": {
"bottomLine": "rgba(255, 255, 255, 0.7)",
"helperText": "rgba(255, 255, 255, 0.7)",
"labelText": "rgba(255, 255, 255, 0.7)",
"inputText": "rgba(255, 255, 255, 1)",
"disabled": "rgba(255, 255, 255, 0.5)"
},
"action": {
"active": "rgba(255, 255, 255, 1)",
"disabled": "rgba(255, 255, 255, 0.3)"
},
"background": {
"default": "#303030",
"paper": "#424242",
"appBar": "#212121",
"contentFrame": "#212121",
"status": "#000"
}
}, },
"light": { "type": "light",
"text": { "primary": {
"50": "#e3f2fd",
"100": "#bbdefb",
"200": "#90caf9",
"300": "#64b5f6",
"400": "#42a5f5",
"500": "#2196f3",
"600": "#1e88e5",
"700": "#1976d2",
"800": "#1565c0",
"900": "#0d47a1",
"A100": "#82b1ff",
"A200": "#448aff",
"A400": "#2979ff",
"A700": "#2962ff",
"contrastDefaultColor": "light"
},
"secondary": {
"50": "#fce4ec",
"100": "#f8bbd0",
"200": "#f48fb1",
"300": "#f06292",
"400": "#ec407a",
"500": "#e91e63",
"600": "#d81b60",
"700": "#c2185b",
"800": "#ad1457",
"900": "#880e4f",
"A100": "#ff80ab",
"A200": "#ff4081",
"A400": "#f50057",
"A700": "#c51162",
"contrastDefaultColor": "light"
},
"error": {
"50": "#ffebee",
"100": "#ffcdd2",
"200": "#ef9a9a",
"300": "#e57373",
"400": "#ef5350",
"500": "#f44336",
"600": "#e53935",
"700": "#d32f2f",
"800": "#c62828",
"900": "#b71c1c",
"A100": "#ff8a80",
"A200": "#ff5252",
"A400": "#ff1744",
"A700": "#d50000",
"contrastDefaultColor": "light"
},
"grey": {
"50": "#fafafa",
"100": "#f5f5f5",
"200": "#eeeeee",
"300": "#e0e0e0",
"400": "#bdbdbd",
"500": "#9e9e9e",
"600": "#757575",
"700": "#616161",
"800": "#424242",
"900": "#212121",
"A100": "#d5d5d5",
"A200": "#aaaaaa",
"A400": "#303030",
"A700": "#616161",
"contrastDefaultColor": "dark"
},
"shades": {
"dark": {
"text": {
"primary": "rgba(255, 255, 255, 1)",
"secondary": "rgba(255, 255, 255, 0.7)",
"disabled": "rgba(255, 255, 255, 0.5)",
"hint": "rgba(255, 255, 255, 0.5)",
"icon": "rgba(255, 255, 255, 0.5)",
"divider": "rgba(255, 255, 255, 0.12)",
"lightDivider": "rgba(255, 255, 255, 0.075)"
},
"input": {
"bottomLine": "rgba(255, 255, 255, 0.7)",
"helperText": "rgba(255, 255, 255, 0.7)",
"labelText": "rgba(255, 255, 255, 0.7)",
"inputText": "rgba(255, 255, 255, 1)",
"disabled": "rgba(255, 255, 255, 0.5)"
},
"action": {
"active": "rgba(255, 255, 255, 1)",
"disabled": "rgba(255, 255, 255, 0.3)"
},
"background": {
"default": "#303030",
"paper": "#424242",
"appBar": "#212121",
"contentFrame": "#212121",
"status": "#000"
}
},
"light": {
"text": {
"primary": "rgba(0, 0, 0, 0.87)",
"secondary": "rgba(0, 0, 0, 0.54)",
"disabled": "rgba(0, 0, 0, 0.38)",
"hint": "rgba(0, 0, 0, 0.38)",
"icon": "rgba(0, 0, 0, 0.38)",
"divider": "rgba(0, 0, 0, 0.12)",
"lightDivider": "rgba(0, 0, 0, 0.075)"
},
"input": {
"bottomLine": "rgba(0, 0, 0, 0.42)",
"helperText": "rgba(0, 0, 0, 0.54)",
"labelText": "rgba(0, 0, 0, 0.54)",
"inputText": "rgba(0, 0, 0, 0.87)",
"disabled": "rgba(0, 0, 0, 0.42)"
},
"action": {
"active": "rgba(0, 0, 0, 0.54)",
"disabled": "rgba(0, 0, 0, 0.26)"
},
"background": {
"default": "#fafafa",
"paper": "#fff",
"appBar": "#f5f5f5",
"contentFrame": "#eeeeee"
}
}
},
"text": {
"primary": "rgba(0, 0, 0, 0.87)", "primary": "rgba(0, 0, 0, 0.87)",
"secondary": "rgba(0, 0, 0, 0.54)", "secondary": "rgba(0, 0, 0, 0.54)",
"disabled": "rgba(0, 0, 0, 0.38)", "disabled": "rgba(0, 0, 0, 0.38)",
...@@ -122,224 +152,196 @@ const theme = { ...@@ -122,224 +152,196 @@ const theme = {
"icon": "rgba(0, 0, 0, 0.38)", "icon": "rgba(0, 0, 0, 0.38)",
"divider": "rgba(0, 0, 0, 0.12)", "divider": "rgba(0, 0, 0, 0.12)",
"lightDivider": "rgba(0, 0, 0, 0.075)" "lightDivider": "rgba(0, 0, 0, 0.075)"
}, },
"input": { "input": {
"bottomLine": "rgba(0, 0, 0, 0.42)", "bottomLine": "rgba(0, 0, 0, 0.42)",
"helperText": "rgba(0, 0, 0, 0.54)", "helperText": "rgba(0, 0, 0, 0.54)",
"labelText": "rgba(0, 0, 0, 0.54)", "labelText": "rgba(0, 0, 0, 0.54)",
"inputText": "rgba(0, 0, 0, 0.87)", "inputText": "rgba(0, 0, 0, 0.87)",
"disabled": "rgba(0, 0, 0, 0.42)" "disabled": "rgba(0, 0, 0, 0.42)"
}, },
"action": { "action": {
"active": "rgba(0, 0, 0, 0.54)", "active": "rgba(0, 0, 0, 0.54)",
"disabled": "rgba(0, 0, 0, 0.26)" "disabled": "rgba(0, 0, 0, 0.26)"
}, },
"background": { "background": {
"default": "#fafafa", "default": "#fafafa",
"paper": "#fff", "paper": "#fff",
"appBar": "#f5f5f5", "appBar": "#f5f5f5",
"contentFrame": "#eeeeee" "contentFrame": "#eeeeee"
}
} }
},
"text": {
"primary": "rgba(0, 0, 0, 0.87)",
"secondary": "rgba(0, 0, 0, 0.54)",
"disabled": "rgba(0, 0, 0, 0.38)",
"hint": "rgba(0, 0, 0, 0.38)",
"icon": "rgba(0, 0, 0, 0.38)",
"divider": "rgba(0, 0, 0, 0.12)",
"lightDivider": "rgba(0, 0, 0, 0.075)"
},
"input": {
"bottomLine": "rgba(0, 0, 0, 0.42)",
"helperText": "rgba(0, 0, 0, 0.54)",
"labelText": "rgba(0, 0, 0, 0.54)",
"inputText": "rgba(0, 0, 0, 0.87)",
"disabled": "rgba(0, 0, 0, 0.42)"