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';
export const TOGGLE_SIDEBAR_MAP = 'TOGGLE_SIDEBAR_MAP';
export const SET_FACILITIES = 'SET_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 ADD_FAVORITE_FACILITY = 'ADD_FAVORITE_FACILITY';
export const REMOVE_FAVORITE_FACILITY = 'REMOVE_FAVORITE_FACILITY';
......
......@@ -2,10 +2,9 @@ import {
ADD_FAVORITE_FACILITY,
REMOVE_FAVORITE_FACILITY,
SET_SEARCH_TERM,
SET_SIDEBAR,
TOGGLE_SIDEBAR,
TOGGLE_SIDEBAR_MAP,
SET_ALL_FAVORITES
SET_ALL_FAVORITES, SET_SELECTED_FACILITY
} from './action-types';
export const toggleSidebar = () => ({
......@@ -16,9 +15,9 @@ export const toggleSidebarMap = () => ({
type: TOGGLE_SIDEBAR_MAP,
});
export const setSidebar = (facility) => ({
type: SET_SIDEBAR,
facility,
export const setSelectedFacility = (facility) => ({
type: SET_SELECTED_FACILITY,
facility
});
export const setSearchTerm = (term) => ({
......
import React from 'react';
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 classNames from 'classnames';
const FacilityStatus = ({facility}) => {
......@@ -15,35 +13,30 @@ const FacilityStatus = ({facility}) => {
*/
const generateStatusInfo = facility => {
let label;
let color;
let icon;
let isOpen;
if (FacilityUtils.getFacilityActiveSchedule(facility).twenty_four_hours) {
label = 'OPEN 24/7';
color = green[500];
icon = <DoneIcon/>;
isOpen = true;
} else if (FacilityUtils.isFacilityOpen(facility)) {
label = 'OPEN';
color = green[500];
icon = <DoneIcon/>;
isOpen = true;
} else {
label = 'CLOSED';
color = red[500];
icon = <CloseIcon/>
isOpen = false;
}
return {
label: label,
color: color,
icon: icon,
isOpen: isOpen,
}
};
const statusInfo = generateStatusInfo(facility);
return (
<Typography type={'caption'} className={'facility-status-text'} style={{color: statusInfo.color}}>
{statusInfo.icon}
<Typography type={'caption'} className={classNames('facility-status-text', statusInfo.isOpen ? 'facility-status-open' : 'facility-status-closed')}>
{/*{statusInfo.icon}*/}
{statusInfo.label}
</Typography>
)
......
......@@ -8,7 +8,7 @@ import FavoriteButton from '../components/FavoriteButton';
import FacilityCategory from '../components/FacilityCategory';
import {compose} from '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 LocationOnIcon from 'material-ui-icons/LocationOn';
import {removeBrackets} from '../utils/nameUtils';
......@@ -49,7 +49,7 @@ class FacilityCard extends React.Component {
}
handleClick = () => {
this.props.setSidebar(this.props.facility)
this.props.setSelectedFacility(this.props.facility);
};
/**
......@@ -130,10 +130,11 @@ class FacilityCard extends React.Component {
};
render() {
const {facility, favorites, addFavoriteFacility, removeFavoriteFacility} = this.props;
const {facility, favorites, selectedFacility, addFavoriteFacility, removeFavoriteFacility} = this.props;
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'}
image={'https://gmucampus.files.wordpress.com/2010/09/00sothside2.jpg'}/>
......@@ -181,11 +182,12 @@ class FacilityCard extends React.Component {
}
const mapStateToProps = state => ({
favorites: state.ui.favorites
favorites: state.ui.favorites,
selectedFacility: state.ui.selectedFacility
});
export default connect(mapStateToProps, {
setSidebar,
setSelectedFacility,
addFavoriteFacility,
removeFavoriteFacility
})(FacilityCard);
\ No newline at end of file
......@@ -34,7 +34,7 @@ class Layout extends React.Component {
};
render() {
const {isSidebarOpen, isSidebarMapOpen, toggleSidebar, toggleSidebarMap, getFacilities, sidebarFacility} = this.props;
const {isSidebarOpen, isSidebarMapOpen, toggleSidebar, toggleSidebarMap, getFacilities, selectedFacility} = this.props;
return (
<div className={'layout-root'}>
<AppBar isOpen={false} handleMenuClick={() => {
......@@ -57,7 +57,7 @@ class Layout extends React.Component {
}
</button>
</div>
<Sidebar facilities={this.props.facilities} facility={sidebarFacility} isSidebarOpen={isSidebarOpen}
<Sidebar facilities={this.props.facilities} facility={selectedFacility} isSidebarOpen={isSidebarOpen}
isSidebarMapOpen={isSidebarMapOpen} toggleSidebarMap={toggleSidebarMap}/>
</div>
</div>
......@@ -71,7 +71,7 @@ function mapStateToProps(state) {
favorites: state.ui.favorites,
searchTerm: state.ui.search.term,
isLoading: state.facilities.isLoading,
sidebarFacility: state.ui.sidebar.facility,
selectedFacility: state.ui.selectedFacility,
isSidebarOpen: state.ui.sidebar.isOpen,
isSidebarMapOpen: state.ui.sidebar.isMapOpen,
}
......
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
} 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 = {
facility:{},
isOpen:false,
isMapOpen:true,
}
};
const sidebar = (state=sidebarDefault,action) => {
switch(action.type){
case SET_SIDEBAR:
return Object.assign({},state,{},{
facility:action.facility
});
case TOGGLE_SIDEBAR:
return Object.assign({},state,{
isOpen:!state.isOpen
......@@ -68,6 +72,7 @@ const favorites = (state = [], action) => {
const ui = (state={},action) =>({
selectedFacility:selectedFacility(state.selectedFacility, action),
sidebar:sidebar(state.sidebar,action),
search: search(state.search,state.facilities,action),
favorites: favorites(state.favorites, action),
......
//TODO: DRY violation w/ color.
.facility-status-text {
display: flex !important;
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 @@
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