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