Commit ed84dd70 authored by Andrew Hrdy's avatar Andrew Hrdy
Browse files

FacilityStatus change, prepare for responsive cards (WIP).

parent 333d78aa
...@@ -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 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 = ({facility}) => { const FacilityStatus = ({facility}) => {
...@@ -15,35 +13,30 @@ const FacilityStatus = ({facility}) => { ...@@ -15,35 +13,30 @@ const FacilityStatus = ({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={'facility-status-text'} style={{color: statusInfo.color}}> <Typography type={'caption'} className={classNames('facility-status-text', statusInfo.isOpen ? 'facility-status-open' : 'facility-status-closed')}>
{statusInfo.icon} {/*{statusInfo.icon}*/}
{statusInfo.label} {statusInfo.label}
</Typography> </Typography>
) )
......
...@@ -8,7 +8,7 @@ import FavoriteButton from '../components/FavoriteButton'; ...@@ -8,7 +8,7 @@ import FavoriteButton from '../components/FavoriteButton';
import FacilityCategory from '../components/FacilityCategory'; import FacilityCategory from '../components/FacilityCategory';
import {compose} from 'redux'; import {compose} from 'redux';
import {connect} from 'react-redux'; import {connect} from 'react-redux';
import {addFavoriteFacility, removeFavoriteFacility, setSidebar} from '../actions/ui'; import {addFavoriteFacility, removeFavoriteFacility, setSelectedFacility} from '../actions/ui';
import DirectionsWalkIcon from 'material-ui-icons/DirectionsWalk'; import DirectionsWalkIcon from 'material-ui-icons/DirectionsWalk';
import LocationOnIcon from 'material-ui-icons/LocationOn'; import LocationOnIcon from 'material-ui-icons/LocationOn';
import {removeBrackets} from '../utils/nameUtils'; import {removeBrackets} from '../utils/nameUtils';
...@@ -49,7 +49,7 @@ class FacilityCard extends React.Component { ...@@ -49,7 +49,7 @@ class FacilityCard extends React.Component {
} }
handleClick = () => { handleClick = () => {
this.props.setSidebar(this.props.facility) this.props.setSelectedFacility(this.props.facility);
}; };
/** /**
...@@ -130,10 +130,11 @@ class FacilityCard extends React.Component { ...@@ -130,10 +130,11 @@ class FacilityCard extends React.Component {
}; };
render() { render() {
const {facility, favorites, addFavoriteFacility, removeFavoriteFacility} = this.props; const {facility, favorites, selectedFacility, addFavoriteFacility, removeFavoriteFacility} = this.props;
return ( return (
<Card onClick={this.handleClick} className={'fc-root'} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} raised> <Card onClick={this.handleClick} className={classnames('fc-root', selectedFacility.slug === facility.slug && 'fc-selected')}
onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} raised>
<CardMedia className={'fc-media'} <CardMedia className={'fc-media'}
image={'https://gmucampus.files.wordpress.com/2010/09/00sothside2.jpg'}/> image={'https://gmucampus.files.wordpress.com/2010/09/00sothside2.jpg'}/>
...@@ -181,11 +182,12 @@ class FacilityCard extends React.Component { ...@@ -181,11 +182,12 @@ class FacilityCard extends React.Component {
} }
const mapStateToProps = state => ({ const mapStateToProps = state => ({
favorites: state.ui.favorites favorites: state.ui.favorites,
selectedFacility: state.ui.selectedFacility
}); });
export default connect(mapStateToProps, { export default connect(mapStateToProps, {
setSidebar, setSelectedFacility,
addFavoriteFacility, addFavoriteFacility,
removeFavoriteFacility removeFavoriteFacility
})(FacilityCard); })(FacilityCard);
\ No newline at end of file
...@@ -34,7 +34,7 @@ class Layout extends React.Component { ...@@ -34,7 +34,7 @@ class Layout extends React.Component {
}; };
render() { render() {
const {isSidebarOpen, isSidebarMapOpen, toggleSidebar, toggleSidebarMap, getFacilities, sidebarFacility} = this.props; const {isSidebarOpen, isSidebarMapOpen, toggleSidebar, toggleSidebarMap, getFacilities, selectedFacility} = this.props;
return ( return (
<div className={'layout-root'}> <div className={'layout-root'}>
<AppBar isOpen={false} handleMenuClick={() => { <AppBar isOpen={false} handleMenuClick={() => {
...@@ -57,7 +57,7 @@ class Layout extends React.Component { ...@@ -57,7 +57,7 @@ class Layout extends React.Component {
} }
</button> </button>
</div> </div>
<Sidebar facilities={this.props.facilities} facility={sidebarFacility} isSidebarOpen={isSidebarOpen} <Sidebar facilities={this.props.facilities} facility={selectedFacility} isSidebarOpen={isSidebarOpen}
isSidebarMapOpen={isSidebarMapOpen} toggleSidebarMap={toggleSidebarMap}/> isSidebarMapOpen={isSidebarMapOpen} toggleSidebarMap={toggleSidebarMap}/>
</div> </div>
</div> </div>
...@@ -71,7 +71,7 @@ function mapStateToProps(state) { ...@@ -71,7 +71,7 @@ function mapStateToProps(state) {
favorites: state.ui.favorites, favorites: state.ui.favorites,
searchTerm: state.ui.search.term, searchTerm: state.ui.search.term,
isLoading: state.facilities.isLoading, isLoading: state.facilities.isLoading,
sidebarFacility: state.ui.sidebar.facility, selectedFacility: state.ui.selectedFacility,
isSidebarOpen: state.ui.sidebar.isOpen, isSidebarOpen: state.ui.sidebar.isOpen,
isSidebarMapOpen: state.ui.sidebar.isMapOpen, isSidebarMapOpen: state.ui.sidebar.isMapOpen,
} }
......
import { import {
TOGGLE_SIDEBAR, SET_SIDEBAR, SET_SEARCH_TERM, SET_FILTERED_LIST, TOGGLE_SIDEBAR, SET_SELECTED_FACILITY, SET_SEARCH_TERM, SET_FILTERED_LIST,
ADD_FAVORITE_FACILITY, REMOVE_FAVORITE_FACILITY, SET_ALL_FAVORITES, TOGGLE_SIDEBAR_MAP ADD_FAVORITE_FACILITY, REMOVE_FAVORITE_FACILITY, SET_ALL_FAVORITES, TOGGLE_SIDEBAR_MAP
} from '../actions/action-types' } from '../actions/action-types'
const selectedFacility = (state = {}, action) => {
switch(action.type) {
case SET_SELECTED_FACILITY:
return Object.assign({}, action.facility);
default:
return state;
}
};
const sidebarDefault = { const sidebarDefault = {
facility:{},
isOpen:false, isOpen:false,
isMapOpen:true, isMapOpen:true,
} };
const sidebar = (state=sidebarDefault,action) => { const sidebar = (state=sidebarDefault,action) => {
switch(action.type){ switch(action.type){
case SET_SIDEBAR:
return Object.assign({},state,{},{
facility:action.facility
});
case TOGGLE_SIDEBAR: case TOGGLE_SIDEBAR:
return Object.assign({},state,{ return Object.assign({},state,{
isOpen:!state.isOpen isOpen:!state.isOpen
...@@ -68,6 +72,7 @@ const favorites = (state = [], action) => { ...@@ -68,6 +72,7 @@ const favorites = (state = [], action) => {
const ui = (state={},action) =>({ const ui = (state={},action) =>({
selectedFacility:selectedFacility(state.selectedFacility, action),
sidebar:sidebar(state.sidebar,action), sidebar:sidebar(state.sidebar,action),
search: search(state.search,state.facilities,action), search: search(state.search,state.facilities,action),
favorites: favorites(state.favorites, action), favorites: favorites(state.favorites, action),
......
//TODO: DRY violation w/ color.
.facility-status-text { .facility-status-text {
display: flex !important;
align-items: center; align-items: center;
border: 2px solid;
border-radius: 10px;
padding: 5px;
font-weight: bold !important;
&.facility-status-closed {
color: rgb(244, 67, 54);
border-color: rgb(244, 67, 54);
}
&.facility-status-open {
color: rgb(76, 175, 80);
border-color: rgb(76, 175, 80);
}
} }
\ No newline at end of file
...@@ -115,3 +115,15 @@ ...@@ -115,3 +115,15 @@
width: 20px !important; width: 20px !important;
} }
} }
@media screen and (max-width: 1023px) {
.fc-root {
&.fc-selected {
.fc-one-line-ellipsis {
white-space: normal;
overflow: inherit;
}
}
}
}
\ No newline at end of file
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