Commit 7f8a0cc9 authored by Mattias J Duffy's avatar Mattias J Duffy
Browse files

merging in new-card-design

parents d1a9fb89 ce4b9510
Pipeline #1770 passed with stage
in 1 minute and 41 seconds
...@@ -24,3 +24,4 @@ yarn-error.log* ...@@ -24,3 +24,4 @@ yarn-error.log*
#local dotfiles #local dotfiles
/.storybook /.storybook
/src/stories /src/stories
/src/styles/whatsOpen.css
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"dependencies": { "dependencies": {
"array-sort": "^0.1.4",
"autosuggest-highlight": "^3.1.0", "autosuggest-highlight": "^3.1.0",
"classnames": "^2.2.5", "classnames": "^2.2.5",
"fuzzysearch": "^1.0.3", "fuzzysearch": "^1.0.3",
...@@ -12,6 +13,8 @@ ...@@ -12,6 +13,8 @@
"mapbox-gl": "^0.40.1", "mapbox-gl": "^0.40.1",
"material-ui": "next", "material-ui": "next",
"material-ui-icons": "^1.0.0-alpha.19", "material-ui-icons": "^1.0.0-alpha.19",
"node-sass-chokidar": "^0.0.3",
"npm-run-all": "^4.1.1",
"prop-types": "^15.5.10", "prop-types": "^15.5.10",
"react": "^15.6.1", "react": "^15.6.1",
"react-autosuggest": "^9.3.2", "react-autosuggest": "^9.3.2",
...@@ -29,8 +32,12 @@ ...@@ -29,8 +32,12 @@
}, },
"proxy": "http://localhost:3001", "proxy": "http://localhost:3001",
"scripts": { "scripts": {
"start": "react-scripts start ", "build-css": "node-sass-chokidar src/styles/whatsOpen.scss -o src/styles/",
"build": "react-scripts build", "watch-css": "npm run build-css --watch --recursive",
"start-js": "react-scripts start",
"start": "npm-run-all -p watch-css start-js",
"build-js": "react-scripts build",
"build": "npm-run-all build-css build-js",
"test": "react-scripts test --env=jsdom", "test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject", "eject": "react-scripts eject",
"storybook": "start-storybook -p 9009 -s public", "storybook": "start-storybook -p 9009 -s public",
......
...@@ -2,7 +2,7 @@ export const TOGGLE_SIDEBAR = 'TOGGLE_SIDEBAR'; ...@@ -2,7 +2,7 @@ export const TOGGLE_SIDEBAR = 'TOGGLE_SIDEBAR';
export const TOGGLE_SIDEBAR_MAP = 'TOGGLE_SIDEBAR_MAP'; export const TOGGLE_SIDEBAR_MAP = 'TOGGLE_SIDEBAR_MAP';
export const SET_FACILITIES = 'SET_FACILITIES'; export const SET_FACILITIES = 'SET_FACILITIES';
export const GET_FACILITIES = 'GET_FACILITIES'; export const GET_FACILITIES = 'GET_FACILITIES';
export const SET_SIDEBAR = 'SET_SIDEBAR'; export const SET_SELECTED_FACILITY = 'SET_SELECTED_FACILITY';
export const SET_SEARCH_TERM = 'SET_SEARCH_TERM'; export const SET_SEARCH_TERM = 'SET_SEARCH_TERM';
export const ADD_FAVORITE_FACILITY = 'ADD_FAVORITE_FACILITY'; export const ADD_FAVORITE_FACILITY = 'ADD_FAVORITE_FACILITY';
export const REMOVE_FAVORITE_FACILITY = 'REMOVE_FAVORITE_FACILITY'; export const REMOVE_FAVORITE_FACILITY = 'REMOVE_FAVORITE_FACILITY';
......
...@@ -2,10 +2,9 @@ import { ...@@ -2,10 +2,9 @@ import {
ADD_FAVORITE_FACILITY, ADD_FAVORITE_FACILITY,
REMOVE_FAVORITE_FACILITY, REMOVE_FAVORITE_FACILITY,
SET_SEARCH_TERM, SET_SEARCH_TERM,
SET_SIDEBAR,
TOGGLE_SIDEBAR, TOGGLE_SIDEBAR,
TOGGLE_SIDEBAR_MAP, TOGGLE_SIDEBAR_MAP,
SET_ALL_FAVORITES SET_ALL_FAVORITES, SET_SELECTED_FACILITY
} from './action-types'; } from './action-types';
export const toggleSidebar = () => ({ export const toggleSidebar = () => ({
...@@ -16,9 +15,9 @@ export const toggleSidebarMap = () => ({ ...@@ -16,9 +15,9 @@ export const toggleSidebarMap = () => ({
type: TOGGLE_SIDEBAR_MAP, type: TOGGLE_SIDEBAR_MAP,
}); });
export const setSidebar = (facility) => ({ export const setSelectedFacility = (facility) => ({
type: SET_SIDEBAR, type: SET_SELECTED_FACILITY,
facility, facility
}); });
export const setSearchTerm = (term) => ({ export const setSearchTerm = (term) => ({
......
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types';
import {withStyles, withTheme} from 'material-ui/styles';
import AppBar from 'material-ui/AppBar'; import AppBar from 'material-ui/AppBar';
import Toolbar from 'material-ui/Toolbar'; import Toolbar from 'material-ui/Toolbar';
import Typography from 'material-ui/Typography'; import Typography from 'material-ui/Typography';
import Button from 'material-ui/Button'; import Button from 'material-ui/Button';
import IconButton from 'material-ui/IconButton'; import IconButton from 'material-ui/IconButton';
import MenuIcon from 'material-ui-icons/Menu'; import MenuIcon from 'material-ui-icons/Menu';
import {compose} from 'redux';
import classNames from 'classnames' import classNames from 'classnames'
class CustomAppBar extends React.Component { class CustomAppBar extends React.Component {
...@@ -29,25 +26,24 @@ class CustomAppBar extends React.Component { ...@@ -29,25 +26,24 @@ class CustomAppBar extends React.Component {
render() { render() {
return (<div> return (<div>
<AppBar position="absolute" className={this.props.classes.appBar}> <AppBar position="absolute" className={'app-bar'}>
<Toolbar className={this.props.classes.toolBar}> <Toolbar className={'app-bar-tool-bar'}>
<img src={require('../images/SRCT_square.svg')} className={this.props.classes.navbarLogo}/> <img src={require('../images/SRCT_square.svg')} className={'app-bar-logo'}/>
<Typography type="title" <Typography type="title" className={classNames('app-bar-title', 'app-bar-text-color')}>
className={classNames(this.props.classes.title, this.props.classes.navbarTextColor)}>
What's Open What's Open
</Typography> </Typography>
<IconButton onClick={this.toggleExpand} aria-label="Menu" <IconButton onClick={this.toggleExpand} aria-label="Menu"
className={classNames(this.props.classes.appBarMenuButton, this.props.classes.navbarTextColor)}> className={classNames('app-bar-menu-button', 'app-bar-text-color')}>
<MenuIcon/> <MenuIcon/>
</IconButton> </IconButton>
<div <div
className={classNames(this.props.classes.linkContainer, !this.state.isAppBarExpanded && this.props.classes.hide)}> className={classNames('app-bar-link-container', !this.state.isAppBarExpanded && 'app-bar-hide')}>
<Button <Button
className={classNames(this.props.classes.appBarLinkButton, this.props.classes.navbarTextColor)}> className={classNames('app-bar-link-button', 'app-bar-text-color')}>
About About
</Button> </Button>
<Button <Button
className={classNames(this.props.classes.appBarLinkButton, this.props.classes.navbarTextColor)}> className={classNames('app-bar-link-button', 'app-bar-text-color')}>
Feedback Feedback
</Button> </Button>
</div> </div>
...@@ -57,51 +53,4 @@ class CustomAppBar extends React.Component { ...@@ -57,51 +53,4 @@ class CustomAppBar extends React.Component {
}; };
} }
CustomAppBar.propTypes = { export default CustomAppBar;
classes: PropTypes.object.isRequired,
};
const styleSheet = {
'@media screen and (max-width: 600px)': {
appBarLinkButton: {
display: 'block',
padding: 0,
textAlign: 'left'
},
appBarMenuButton: {
display: 'inherit !important'
},
hide: {
maxHeight: '0 !important',
overflow: 'hidden'
},
toolBar: {
flexWrap: 'wrap',
},
linkContainer: {
display: 'block',
flexBasis: '100%',
transition: 'ease-in-out 2s'
}
},
appBar: {
backgroundColor: 'white',
boxShadow: '0px 1px 0px 0px rgba(0, 0, 0, 0.2)'
},
title: {
marginRight: 'auto',
},
appBarMenuButton: {
display: 'none'
},
navbarLogo: {
width: '30px',
height: '30px',
marginRight: '5px'
},
navbarTextColor: {
color: '#354052'
},
};
export default compose(withStyles(styleSheet), withTheme)(CustomAppBar);
...@@ -3,32 +3,22 @@ import {withStyles} from 'material-ui/styles'; ...@@ -3,32 +3,22 @@ import {withStyles} from 'material-ui/styles';
import FacilityCard from '../containers/FacilityCard' import FacilityCard from '../containers/FacilityCard'
import Grid from 'material-ui/Grid'; import Grid from 'material-ui/Grid';
const CardContainer = ({classes, searchTerm, facilities}) => { const CardContainer = ({searchTerm, facilities}) => {
const filterCards = (facility) => { const filterCards = (facility) => {
const name = facility.facility_name.toLowerCase() const name = facility.facility_name.toLowerCase()
return name.includes(searchTerm.toLowerCase()) return name.includes(searchTerm.toLowerCase())
} }
return ( return (
<Grid container className={classes.root} spacing={24} justify={'center'} align={'flex-end'}> <Grid container className={'card-container-root'} spacing={24} justify={'center'} align={'flex-end'}>
{facilities.filter(filterCards).map(item => { {facilities.filter(filterCards).map(item =>{
return ( return(
<Grid key={item.slug} item> <Grid key={item.slug} item>
<FacilityCard facility={item}/> <FacilityCard facility={item} facilities={facilities}/>
</Grid> </Grid>
) )
})} })}
</Grid> </Grid>
) )
} }
const styleSheet = {
root: { export default CardContainer;
// backgroundColor:'red', \ No newline at end of file
margin: 0,
width: '100%',
display: 'flex',
flexWrap: 'wrap',
},
}
export default withStyles(styleSheet)(CardContainer)
\ No newline at end of file
...@@ -66,30 +66,30 @@ class FacilitiesMap extends React.Component { ...@@ -66,30 +66,30 @@ class FacilitiesMap extends React.Component {
} }
} }
componentWillReceiveProps = (nextProps) =>{ // componentWillReceiveProps = (nextProps) =>{
try { // try {
const coordsArr = nextProps.facility.facility_location.coordinate_location.coordinates // const coordsArr = nextProps.facility.facility_location.coordinate_location.coordinates
const coordsObj = {latitude:coordsArr[1],longitude:coordsArr[0]} // const coordsObj = {latitude:coordsArr[1],longitude:coordsArr[0]}
if(this.state.positionReady){ // if(this.state.positionReady){
getGeoLine(client,this.state.position,coordsObj,()=>{}).then((route)=>{ // getGeoLine(client,this.state.position,coordsObj,()=>{}).then((route)=>{
const coords = route.geometry.coordinates // const coords = route.geometry.coordinates
const bounds = coords.reduce(function(bounds, coord) { // const bounds = coords.reduce(function(bounds, coord) {
return bounds.extend(coord); // return bounds.extend(coord);
}, new mapboxgl.LngLatBounds(coords[0], coords[0])); // }, new mapboxgl.LngLatBounds(coords[0], coords[0]));
const boundsArr = [[bounds._sw.lng,bounds._sw.lat],[bounds._ne.lng,bounds._ne.lat]] // const boundsArr = [[bounds._sw.lng,bounds._sw.lat],[bounds._ne.lng,bounds._ne.lat]]
console.log(bounds) // console.log(bounds)
console.log(boundsArr) // console.log(boundsArr)
this.setState({ // this.setState({
mappedRoute:coords, // mappedRoute:coords,
fitBounds:boundsArr, // fitBounds:boundsArr,
fitBoundsOptions:{padding:20}, // fitBoundsOptions:{padding:20},
}) // })
}) // })
} // }
}catch(e){ // }catch(e){
} // }
} // }
render (){ render (){
...@@ -100,7 +100,12 @@ class FacilitiesMap extends React.Component { ...@@ -100,7 +100,12 @@ class FacilitiesMap extends React.Component {
<div className={classes.mapContainer} style={{'height': isMapOpen ? '400px' : 0}}> <div className={classes.mapContainer} style={{'height': isMapOpen ? '400px' : 0}}>
<Map <Map
onStyleLoad={(map,e)=>{ onStyleLoad={(map,e)=>{
map.addControl(new mapboxgl.GeolocateControl({
positionOptions: {
enableHighAccuracy: true
},
trackUserLocation: true
}));
}} }}
style="mapbox://styles/mapbox/streets-v9" style="mapbox://styles/mapbox/streets-v9"
movingMethod={'easeTo'} movingMethod={'easeTo'}
...@@ -118,18 +123,12 @@ class FacilitiesMap extends React.Component { ...@@ -118,18 +123,12 @@ class FacilitiesMap extends React.Component {
key={item.slug} key={item.slug}
coordinates={item.facility_location.coordinate_location.coordinates} coordinates={item.facility_location.coordinate_location.coordinates}
anchor="bottom"> anchor="bottom">
{/* <img height={20} width={20} src={require('../images/starbucksSVG.svg')}/> */} <img height={20} width={20} src={require('../images/starbucksSVG.svg')}/>
<div style={Mark}></div> {/* <div style={Mark}></div> */}
</Marker> </Marker>
) )
})} })}
{<Layer
type="line"
layout={{"line-join": "round","line-cap": "round"}}
paint={{"line-color": "#888","line-width": 5}}
>
{mappedRoute && <Feature coordinates={mappedRoute}/>}
</Layer>}
</Map> </Map>
</div> </div>
) )
...@@ -137,9 +136,18 @@ class FacilitiesMap extends React.Component { ...@@ -137,9 +136,18 @@ class FacilitiesMap extends React.Component {
} }
const styleSheet = { const styleSheet = {
mapContainer: { mapContainer: {
transition: '250ms ease-in-out' transition: '250ms ease-in-out',
width: '100%'
} }
}; };
export default withStyles(styleSheet)(FacilitiesMap) export default withStyles(styleSheet)(FacilitiesMap)
\ No newline at end of file
// {<Layer
// type="line"
// layout={{"line-join": "round","line-cap": "round"}}
// paint={{"line-color": "#888","line-width": 5}}
// >
// {mappedRoute && <Feature coordinates={mappedRoute}/>}
// </Layer>}
\ No newline at end of file
...@@ -11,7 +11,7 @@ import FitnessCenterIcon from 'material-ui-icons/FitnessCenter'; ...@@ -11,7 +11,7 @@ import FitnessCenterIcon from 'material-ui-icons/FitnessCenter';
import ShoppingCartIcon from 'material-ui-icons/ShoppingCart' import ShoppingCartIcon from 'material-ui-icons/ShoppingCart'
import {red, blue, brown, grey, teal, deepOrange, lime} from 'material-ui/colors'; import {red, blue, brown, grey, teal, deepOrange, lime} from 'material-ui/colors';
const FacilityCategory = ({classes, category}) => { const FacilityCategory = ({category}) => {
const generateAvatar = () => { const generateAvatar = () => {
let color; let color;
...@@ -42,43 +42,43 @@ const FacilityCategory = ({classes, category}) => { ...@@ -42,43 +42,43 @@ const FacilityCategory = ({classes, category}) => {
case 2: //Restaurant case 2: //Restaurant
case 5: //Take out dining hall case 5: //Take out dining hall
color = red[400]; color = red[400];
icon = <RestaurantIcon className={classes.categoryIcon}/>; icon = <RestaurantIcon className={'facility-category-icon'}/>;
break; break;
case 3: //Convenience Store case 3: //Convenience Store
color = blue[500]; color = blue[500];
icon = <StoreIcon className={classes.categoryIcon}/>; icon = <StoreIcon className={'facility-category-icon'}/>;
break; break;
case 4: //Cafe case 4: //Cafe
color = brown[500]; color = brown[500];
icon = <LocalCafeIcon className={classes.categoryIcon}/>; icon = <LocalCafeIcon className={'facility-category-icon'}/>;
break; break;
case 6: //Athletic Facility case 6: //Athletic Facility
color = teal[500]; color = teal[500];
icon = <FitnessCenterIcon className={classes.categoryIcon}/>; icon = <FitnessCenterIcon className={'facility-category-icon'}/>;
break; break;
case 7: //TODO: Print Services - NOT IN API case 7: //TODO: Print Services - NOT IN API
color = grey[500]; color = grey[500];
icon = <LocalPrintShopIcon className={classes.categoryIcon} />; icon = <LocalPrintShopIcon className={'facility-category-icon'} />;
break; break;
case 8: //TODO Mailroom - NOT IN API case 8: //TODO Mailroom - NOT IN API
color = deepOrange[500]; color = deepOrange[500];
icon = <LocalPostOfficeIcon className={classes.categoryIcon}/>; icon = <LocalPostOfficeIcon className={'facility-category-icon'}/>;
break; break;
default: default:
color = lime[500]; color = lime[500];
icon = <ShoppingCartIcon className={classes.categoryIcon}/> icon = <ShoppingCartIcon className={'facility-category-icon'}/>
} }
return ( return (
<Avatar className={classes.avatar} style={{backgroundColor: color}}> <Avatar className={'facility-category-avatar'} style={{backgroundColor: color}}>
{icon} {icon}
</Avatar> </Avatar>
) )
}; };
return ( return (
<div className={classes.categoryWrapper}> <div className={'facility-category-wrapper'}>
{generateAvatar()} {/* {generateAvatar()} */}
<Typography type={'body1'} noWrap> <Typography type={'body1'} noWrap>
{category.name} {category.name}
</Typography> </Typography>
...@@ -86,21 +86,4 @@ const FacilityCategory = ({classes, category}) => { ...@@ -86,21 +86,4 @@ const FacilityCategory = ({classes, category}) => {
) )
}; };
const styleSheet = { export default FacilityCategory;
categoryWrapper: { \ No newline at end of file
display: 'flex',
alignItems: 'center'
},
categoryIcon: {
width: '14px !important',
height: '14px !important',
padding: '4px !important',
},
avatar: {
width: 'auto !important',
height: 'auto !important',
marginRight: '8px'
},
};
export default withStyles(styleSheet)(FacilityCategory);
\ No newline at end of file
import React from 'react'; import React from 'react';
import {withStyles} from 'material-ui/styles';
import Typography from 'material-ui/Typography'; import Typography from 'material-ui/Typography';
import DoneIcon from 'material-ui-icons/Done';
import CloseIcon from 'material-ui-icons/Close';
import {green, red} from 'material-ui/colors'
import FacilityUtils from '../utils/facilityUtils'; import FacilityUtils from '../utils/facilityUtils';
import classNames from 'classnames';
const FacilityStatus = ({classes, facility}) => { const FacilityStatus = ({facility}) => {
/** /**
* Generates information about the facility's status. * Generates information about the facility's status.
...@@ -16,52 +13,33 @@ const FacilityStatus = ({classes, facility}) => { ...@@ -16,52 +13,33 @@ const FacilityStatus = ({classes, facility}) => {
*/ */
const generateStatusInfo = facility => { const generateStatusInfo = facility => {
let label; let label;
let color; let isOpen;
let icon;
if (FacilityUtils.getFacilityActiveSchedule(facility).twenty_four_hours) { if (FacilityUtils.getFacilityActiveSchedule(facility).twenty_four_hours) {
label = 'OPEN 24/7'; label = 'OPEN 24/7';
color = green[500]; isOpen = true;
icon = <DoneIcon/>;
} else if (FacilityUtils.isFacilityOpen(facility)) { } else if (FacilityUtils.isFacilityOpen(facility)) {
label = 'OPEN'; label = 'OPEN';
color = green[500]; isOpen = true;
icon = <DoneIcon/>; } else {
}else {
label = 'CLOSED'; label = 'CLOSED';
color = red[500]; isOpen = false;
icon = <CloseIcon/>
} }
return { return {
label: label, label: label,
color: color, isOpen: isOpen,
icon: icon,
} }
}; };
const statusInfo = generateStatusInfo(facility); const statusInfo = generateStatusInfo(facility);
return ( return (
<Typography type={'caption'} className={classes.statusText} style={{color: statusInfo.color}}> <Typography type={'caption'} className={classNames('facility-status-text', statusInfo.isOpen ? '</