Commit 27ca9d4e authored by Andrew Hrdy's avatar Andrew Hrdy
Browse files

Added an open / close button for the facility map.

parent b1db454e
export const TOGGLE_SIDEBAR = 'TOGGLE_SIDEBAR'; export const TOGGLE_SIDEBAR = 'TOGGLE_SIDEBAR';
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_SIDEBAR = 'SET_SIDEBAR';
......
...@@ -4,6 +4,7 @@ import { ...@@ -4,6 +4,7 @@ import {
SET_SEARCH_TERM, SET_SEARCH_TERM,
SET_SIDEBAR, SET_SIDEBAR,
TOGGLE_SIDEBAR, TOGGLE_SIDEBAR,
TOGGLE_SIDEBAR_MAP,
SET_ALL_FAVORITES SET_ALL_FAVORITES
} from './action-types'; } from './action-types';
...@@ -11,6 +12,10 @@ export const toggleSidebar = () => ({ ...@@ -11,6 +12,10 @@ export const toggleSidebar = () => ({
type: TOGGLE_SIDEBAR, type: TOGGLE_SIDEBAR,
}); });
export const toggleSidebarMap = () => ({
type: TOGGLE_SIDEBAR_MAP,
});
export const setSidebar = (facility) => ({ export const setSidebar = (facility) => ({
type: SET_SIDEBAR, type: SET_SIDEBAR,
facility, facility,
......
...@@ -93,11 +93,11 @@ class FacilitiesMap extends React.Component { ...@@ -93,11 +93,11 @@ class FacilitiesMap extends React.Component {
render (){ render (){
const {facilities,facility,classes} = this.props const {facilities,facility,classes,isMapOpen} = this.props
const {position,positionReady,fitBounds,maxBounds,mappedRoute,fitBoundsOptions} = this.state const {position,positionReady,fitBounds,maxBounds,mappedRoute,fitBoundsOptions} = this.state
console.log(fitBounds) console.log(fitBounds)
return( return(
<div> <div className={classes.mapContainer} style={{'height': isMapOpen ? '400px' : 0}}>
<Map <Map
onStyleLoad={(map,e)=>{ onStyleLoad={(map,e)=>{
...@@ -105,8 +105,8 @@ class FacilitiesMap extends React.Component { ...@@ -105,8 +105,8 @@ class FacilitiesMap extends React.Component {
style="mapbox://styles/mapbox/streets-v9" style="mapbox://styles/mapbox/streets-v9"
movingMethod={'easeTo'} movingMethod={'easeTo'}
containerStyle={{ containerStyle={{
height: "400px", height: "100%",
width: "400px" width: "100%"
}} }}
fitBounds={fitBounds} fitBounds={fitBounds}
fitBoundsOptions={fitBoundsOptions} fitBoundsOptions={fitBoundsOptions}
...@@ -136,8 +136,10 @@ class FacilitiesMap extends React.Component { ...@@ -136,8 +136,10 @@ class FacilitiesMap extends React.Component {
} }
} }
const styleSheet = { const styleSheet = {
mapContainer: {
} transition: '250ms ease-in-out'
}
};
export default withStyles(styleSheet)(FacilitiesMap) export default withStyles(styleSheet)(FacilitiesMap)
\ No newline at end of file
...@@ -6,9 +6,10 @@ import Typography from 'material-ui/Typography' ...@@ -6,9 +6,10 @@ import Typography from 'material-ui/Typography'
import Divider from 'material-ui/Divider'; import Divider from 'material-ui/Divider';
import TextwTitle from '../components/TextwTitle' import TextwTitle from '../components/TextwTitle'
import FacilitiesMap from '../components/FacilitiesMap' import FacilitiesMap from '../components/FacilitiesMap'
import classNames from 'classnames' import classNames from 'classnames';
import Button from 'material-ui/Button';
const Sidebar = ({classes,facility,isSidebarOpen,facilities}) => { const Sidebar = ({classes,facility,isSidebarOpen,isSidebarMapOpen,toggleSidebarMap,facilities}) => {
const removeBrackets = (name) => { const removeBrackets = (name) => {
if(typeof(name) === "undefined"){ if(typeof(name) === "undefined"){
return "" return ""
...@@ -43,7 +44,9 @@ const Sidebar = ({classes,facility,isSidebarOpen,facilities}) => { ...@@ -43,7 +44,9 @@ const Sidebar = ({classes,facility,isSidebarOpen,facilities}) => {
</div> </div>
</div> </div>
<div className={classes.row2}> <div className={classes.row2}>
<FacilitiesMap facilities={facilities}facility={facility}/> <FacilitiesMap isMapOpen={isSidebarMapOpen} facilities={facilities} facility={facility}/>
<Button className={classes.toggleMapBtn} onClick={toggleSidebarMap}>{isSidebarMapOpen ? 'Close Map' : 'Open Map'}</Button>
</div> </div>
</Paper> </Paper>
) )
...@@ -52,7 +55,7 @@ const styleSheet = { ...@@ -52,7 +55,7 @@ const styleSheet = {
'@media screen and (max-width: 600px)': { '@media screen and (max-width: 600px)': {
root: { root: {
display: 'none !important' display: 'none !important'
} },
}, },
labelRow:{ labelRow:{
display:'flex', display:'flex',
...@@ -95,7 +98,12 @@ const styleSheet = { ...@@ -95,7 +98,12 @@ const styleSheet = {
alignItems:'center' alignItems:'center'
}, },
row2:{ row2:{
position: 'absolute',
bottom: '0px',
width: '100%'
},
toggleMapBtn: {
width: '100%'
} }
} }
......
...@@ -2,7 +2,7 @@ import React from 'react'; ...@@ -2,7 +2,7 @@ import React from 'react';
import {withStyles } from 'material-ui/styles'; import {withStyles } from 'material-ui/styles';
import {compose} from 'redux'; import {compose} from 'redux';
import {connect} from 'react-redux'; import {connect} from 'react-redux';
import {toggleSidebar,setAllFavorites} from '../actions/ui'; import {toggleSidebar,toggleSidebarMap,setAllFavorites} from '../actions/ui';
import AppBar from '../components/AppBar'; import AppBar from '../components/AppBar';
import Sidebar from '../components/Sidebar'; import Sidebar from '../components/Sidebar';
import { getFacilities, setFacilities } from '../actions/api'; import { getFacilities, setFacilities } from '../actions/api';
...@@ -74,7 +74,7 @@ class Layout extends React.Component { ...@@ -74,7 +74,7 @@ class Layout extends React.Component {
}; };
render() { render() {
const {classes, isSidebarOpen, toggleSidebar, getFacilities,sidebarFacility} = this.props; const {classes, isSidebarOpen, isSidebarMapOpen, toggleSidebar, toggleSidebarMap, getFacilities,sidebarFacility} = this.props;
return ( return (
<div className={classes.root}> <div className={classes.root}>
<AppBar isOpen={false} handleMenuClick={ ()=>{} }/> <AppBar isOpen={false} handleMenuClick={ ()=>{} }/>
...@@ -95,7 +95,7 @@ class Layout extends React.Component { ...@@ -95,7 +95,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={sidebarFacility} isSidebarOpen={isSidebarOpen} isSidebarMapOpen={isSidebarMapOpen} toggleSidebarMap={toggleSidebarMap}/>
</div> </div>
</div> </div>
) )
...@@ -163,7 +163,8 @@ function mapStateToProps(state) { ...@@ -163,7 +163,8 @@ function mapStateToProps(state) {
isLoading: state.facilities.isLoading, isLoading: state.facilities.isLoading,
sidebarFacility:state.ui.sidebar.facility, sidebarFacility:state.ui.sidebar.facility,
isSidebarOpen: state.ui.sidebar.isOpen, isSidebarOpen: state.ui.sidebar.isOpen,
isSidebarMapOpen: state.ui.sidebar.isMapOpen,
} }
} }
export default compose(connect(mapStateToProps,{toggleSidebar,getFacilities,setFacilities,setAllFavorites}), withStyles(styleSheet))(Layout); export default compose(connect(mapStateToProps,{toggleSidebar,toggleSidebarMap,getFacilities,setFacilities,setAllFavorites}), withStyles(styleSheet))(Layout);
import { import {
TOGGLE_SIDEBAR, SET_SIDEBAR, SET_SEARCH_TERM, SET_FILTERED_LIST, TOGGLE_SIDEBAR, SET_SIDEBAR, SET_SEARCH_TERM, SET_FILTERED_LIST,
ADD_FAVORITE_FACILITY, REMOVE_FAVORITE_FACILITY,SET_ALL_FAVORITES ADD_FAVORITE_FACILITY, REMOVE_FAVORITE_FACILITY, SET_ALL_FAVORITES, TOGGLE_SIDEBAR_MAP
} from '../actions/action-types' } from '../actions/action-types'
const sidebarDefault = { const sidebarDefault = {
facility:{}, facility:{},
isOpen:false, isOpen:false,
isMapOpen:true,
} }
const sidebar = (state=sidebarDefault,action) => { const sidebar = (state=sidebarDefault,action) => {
...@@ -18,6 +19,10 @@ const sidebar = (state=sidebarDefault,action) => { ...@@ -18,6 +19,10 @@ const sidebar = (state=sidebarDefault,action) => {
return Object.assign({},state,{ return Object.assign({},state,{
isOpen:!state.isOpen isOpen:!state.isOpen
}); });
case TOGGLE_SIDEBAR_MAP:
return Object.assign({}, state, {
isMapOpen: !state.isMapOpen
});
default: default:
return state; return state;
} }
......
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