Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
SRCT
whats-open-web
Commits
09a3da6e
Commit
09a3da6e
authored
Mar 13, 2018
by
Andrew Hrdy
Browse files
Refactored FacilitiesMap and MapDialog to keep adhere to DRY.
parent
04151bbf
Pipeline
#2190
passed with stage
in 1 minute and 42 seconds
Changes
5
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
src/components/FacilitiesMap.js
View file @
09a3da6e
import
React
from
'
react
'
;
import
ReactMapboxGl
,
{
Marker
}
from
'
react-mapbox-gl
'
;
import
{
withStyles
}
from
'
material-ui/styles
'
;
import
{
getMaxBounds
}
from
'
../utils/mapboxUtils
'
;
import
M
ap
Dialog
from
'
./MapDialog
'
;
import
m
ap
boxgl
from
'
mapbox-gl
'
;
const
mapboxToken
=
'
pk.eyJ1IjoibWR1ZmZ5OCIsImEiOiJjaXk2a2lxODQwMDdyMnZzYTdyb3M4ZTloIn0.mSocl7zUnZBO6-CV9cvmnA
'
;
const
Map
=
ReactMapboxGl
({
accessToken
:
mapboxToken
,
interactive
:
false
,
attributionControl
:
false
});
const
Mark
=
{
backgroundColor
:
'
#e74c3c
'
,
borderRadius
:
'
50%
'
,
...
...
@@ -20,39 +13,32 @@ const Mark = {
border
:
'
3px solid #EAA29B
'
};
class
FacilitiesMap
extends
React
.
Component
{
constructor
(
props
)
{
super
(
props
);
const
maxBounds
=
getMaxBounds
(
props
.
campusRegion
);
// const southWestBounds = [-77.321649, 38.823919]; //Coordinates for the south-west bound
// const northEastBounds = [-77.295213, 38.835720]; //Coordinates for the north-east bound
const
{
campusRegion
,
interactive
=
true
}
=
this
.
props
;
const
maxBounds
=
getMaxBounds
(
campusRegion
);
const
southWestBounds
=
maxBounds
[
0
];
//Coordinates for the south-west bound
const
northEastBounds
=
maxBounds
[
1
];
//Coordinates for the north-east bound
this
.
Map
=
ReactMapboxGl
({
accessToken
:
mapboxToken
,
interactive
:
interactive
,
attributionControl
:
false
});
this
.
state
=
{
positionReady
:
false
,
position
:
{
longitude
:
0
,
latitude
:
0
},
mappedRoute
:
false
,
fitBounds
:
[
southWestBounds
,
northEastBounds
],
maxBounds
:
maxBounds
,
fitBoundsOptions
:
{},
mapDialogOpen
:
false
fitBoundsOptions
:
{}
};
}
handleRequestClose
=
()
=>
{
this
.
setState
({
mapDialogOpen
:
false
});
};
render
()
{
const
{
facilities
,
facility
,
classes
}
=
this
.
props
;
const
{
fitBounds
,
maxBounds
,
fitBoundsOptions
,
mapDialogOpen
}
=
this
.
state
;
const
{
facilities
,
facility
,
interactive
=
true
}
=
this
.
props
;
const
{
fitBounds
,
maxBounds
,
fitBoundsOptions
}
=
this
.
state
;
let
center
,
zoom
;
try
{
...
...
@@ -64,60 +50,46 @@ class FacilitiesMap extends React.Component {
}
return
(
<
div
className
=
{
classes
.
mapContainer
}
>
<
Map
animationOptions
=
{{
animate
:
false
}}
onClick
=
{()
=>
{
this
.
setState
({
mapDialogOpen
:
true
});
}}
style
=
"
mapbox://styles/mduffy8/cjbcdxi3v73hp2spiyhxbkjde
"
movingMethod
=
{
'
easeTo
'
}
containerStyle
=
{{
height
:
'
200px
'
,
width
:
'
380px
'
,
margin
:
'
10px
'
,
borderRadius
:
'
3px
'
,
cursor
:
'
pointer
'
}}
center
=
{
center
}
fitBounds
=
{
fitBounds
}
fitBoundsOptions
=
{
fitBoundsOptions
}
zoom
=
{
zoom
}
maxBounds
=
{
maxBounds
}
>
{(
facilities
.
length
>
0
)
&&
facilities
.
map
((
item
)
=>
{
return
(
<
Marker
key
=
{
item
.
slug
}
coordinates
=
{
item
.
facility_location
.
coordinate_location
.
coordinates
}
anchor
=
"
bottom
"
>
<
div
style
=
{
Mark
}
/
>
<
/Marker
>
);
})}
<
/Map
>
<
MapDialog
open
=
{
mapDialogOpen
}
facilities
=
{
facilities
}
maxBounds
=
{
maxBounds
}
zoom
=
{
zoom
}
center
=
{
center
}
onClose
=
{
this
.
handleRequestClose
}
/
>
<
/div
>
<
this
.
Map
onStyleLoad
=
{(
map
)
=>
{
if
(
interactive
)
{
map
.
addControl
(
new
mapboxgl
.
GeolocateControl
({
positionOptions
:
{
enableHighAccuracy
:
true
},
trackUserLocation
:
true
}));
}
}}
animationOptions
=
{{
animate
:
false
}}
style
=
"
mapbox://styles/mduffy8/cjbcdxi3v73hp2spiyhxbkjde
"
movingMethod
=
{
'
easeTo
'
}
containerStyle
=
{{
height
:
'
100%
'
,
width
:
'
100%
'
,
borderRadius
:
'
5px
'
,
cursor
:
'
pointer
'
}}
center
=
{
center
}
fitBounds
=
{
fitBounds
}
fitBoundsOptions
=
{
fitBoundsOptions
}
zoom
=
{
zoom
}
maxBounds
=
{
maxBounds
}
>
{(
facilities
.
length
>
0
)
&&
facilities
.
map
((
item
)
=>
{
return
(
<
Marker
key
=
{
item
.
slug
}
coordinates
=
{
item
.
facility_location
.
coordinate_location
.
coordinates
}
anchor
=
"
bottom
"
>
<
div
style
=
{
Mark
}
/
>
<
/Marker
>
);
})}
<
/this.Map
>
);
}
}
const
styleSheet
=
{
mapContainer
:
{
transition
:
'
250ms ease-in-out
'
,
width
:
'
100%
'
}
};
export
default
withStyles
(
styleSheet
)(
FacilitiesMap
);
\ No newline at end of file
export
default
FacilitiesMap
;
\ No newline at end of file
src/components/FacilityDialog.js
View file @
09a3da6e
...
...
@@ -10,7 +10,6 @@ import MapDialog from './MapDialog';
import
CloseIcon
from
'
material-ui-icons/Close
'
;
import
IconButton
from
'
material-ui/IconButton
'
;
import
LocationOnIcon
from
'
material-ui-icons/LocationOn
'
;
// import {getMaxBounds} from '../utils/mapboxUtils';
import
{
removeBrackets
}
from
'
../utils/nameUtils
'
;
class
FacilityDialog
extends
React
.
Component
{
...
...
@@ -19,13 +18,11 @@ class FacilityDialog extends React.Component {
super
(
props
);
this
.
state
=
{
isMapOpen
:
false
,
maxBounds
:
props
.
maxBounds
,
isMapOpen
:
false
};
}
toggleMap
=
(
e
)
=>
{
e
.
stopPropagation
();
toggleMap
=
()
=>
{
this
.
setState
({
isMapOpen
:
!
this
.
state
.
isMapOpen
});
...
...
@@ -33,16 +30,8 @@ class FacilityDialog extends React.Component {
render
()
{
const
{
facility
,
facilities
,
isOpen
,
onClose
}
=
this
.
props
;
const
{
isMapOpen
,
maxBounds
}
=
this
.
state
;
const
{
isMapOpen
}
=
this
.
state
;
let
mapCenter
,
mapZoom
;
try
{
mapCenter
=
facility
.
facility_location
.
coordinate_location
.
coordinates
;
mapZoom
=
[
17
];
}
catch
(
e
)
{
mapCenter
=
[(
maxBounds
[
0
][
0
]
+
maxBounds
[
1
][
0
])
/
2
,
(
maxBounds
[
0
][
1
]
+
maxBounds
[
1
][
1
])
/
2
];
mapZoom
=
[
13
];
}
return
(
<
Dialog
classes
=
{{
...
...
@@ -91,9 +80,8 @@ class FacilityDialog extends React.Component {
<
MapDialog
open
=
{
isMapOpen
}
facilities
=
{
facilities
}
maxBounds
=
{
maxBounds
}
zoom
=
{
mapZoom
}
center
=
{
mapCenter
}
facility
=
{
facility
}
campusRegion
=
{
facility
.
facility_location
.
campus_region
}
onClose
=
{
this
.
toggleMap
}
/
>
<
/Dialog
>
...
...
src/components/MapDialog.js
View file @
09a3da6e
import
React
from
'
react
'
;
import
ReactMapboxGl
,
{
Marker
}
from
'
react-mapbox-gl
'
;
import
mapboxgl
from
'
mapbox-gl
'
;
import
PropTypes
from
'
prop-types
'
;
import
Dialog
from
'
material-ui/Dialog
'
;
const
mapboxToken
=
'
pk.eyJ1IjoibWR1ZmZ5OCIsImEiOiJjaXk2a2lxODQwMDdyMnZzYTdyb3M4ZTloIn0.mSocl7zUnZBO6-CV9cvmnA
'
;
const
Map
=
ReactMapboxGl
({
accessToken
:
mapboxToken
,
attributionControl
:
false
});
import
FacilitiesMap
from
'
./FacilitiesMap
'
;
class
MapDialog
extends
React
.
Component
{
handleRequestClose
=
()
=>
{
...
...
@@ -17,48 +9,21 @@ class MapDialog extends React.Component {
};
render
()
{
const
{
facilit
ies
,
zoom
,
center
,
maxBounds
,
...
other
}
=
this
.
props
;
const
{
facilit
y
,
facilities
,
campusRegion
,
open
}
=
this
.
props
;
return
(
<
Dialog
onClose
=
{
this
.
handleRequestClose
}
{...
other
}
>
<
Map
onStyleLoad
=
{(
map
)
=>
{
map
.
addControl
(
new
mapboxgl
.
GeolocateControl
({
positionOptions
:
{
enableHighAccuracy
:
true
},
trackUserLocation
:
true
}));
}}
onClick
=
{()
=>
{
this
.
setState
({
mapDialogOpen
:
true
});
}}
style
=
"
mapbox://styles/mduffy8/cjbcdxi3v73hp2spiyhxbkjde
"
movingMethod
=
{
'
easeTo
'
}
containerStyle
=
{{
height
:
'
500px
'
,
width
:
'
600px
'
,
borderRadius
:
'
5px
'
}}
center
=
{
center
}
zoom
=
{
zoom
}
maxBounds
=
{
maxBounds
}
>
{(
facilities
.
length
>
0
)
&&
facilities
.
map
((
item
)
=>
{
return
(
<
Marker
key
=
{
item
.
slug
}
coordinates
=
{
item
.
facility_location
.
coordinate_location
.
coordinates
}
anchor
=
"
bottom
"
>
<
img
style
=
{{
objectFit
:
'
contain
'
}}
height
=
{
40
}
width
=
{
40
}
src
=
{
item
.
logo
}
/
>
<
/Marker
>
);
})}
<
/Map
>
<
Dialog
onClose
=
{
this
.
handleRequestClose
}
open
=
{
open
}
>
<
div
style
=
{{
height
:
'
500px
'
,
width
:
'
600px
'
}}
>
<
FacilitiesMap
facilities
=
{
facilities
}
facility
=
{
facility
}
interactive
=
{
true
}
campusRegion
=
{
campusRegion
}
/
>
<
/div
>
<
/Dialog
>
);
}
...
...
src/components/Sidebar.js
View file @
09a3da6e
...
...
@@ -5,6 +5,7 @@ import Typography from 'material-ui/Typography';
import
Divider
from
'
material-ui/Divider
'
;
import
TextwTitle
from
'
../components/TextwTitle
'
;
import
FacilitiesMap
from
'
../components/FacilitiesMap
'
;
import
MapDialog
from
'
../components/MapDialog
'
;
import
classNames
from
'
classnames
'
;
import
WeekHours
from
'
./WeekHours
'
;
import
FacilityLabels
from
'
./FacilityLabels
'
;
...
...
@@ -13,48 +14,86 @@ import IconButton from 'material-ui/IconButton';
import
{
removeBrackets
}
from
'
../utils/nameUtils
'
;
import
phoneFormatter
from
'
phone-formatter
'
;
c
onst
Sidebar
=
({
facility
,
isSidebarOpen
,
facilities
,
setSidebar
,
setSelectedFacility
,
campusRegion
})
=>
{
c
lass
Sidebar
extends
React
.
Component
{
const
handleSidebarClose
=
()
=>
{
setSelectedFacility
(
null
);
setSidebar
(
false
);
constructor
(
props
)
{
super
(
props
);
this
.
state
=
{
mapDialogOpen
:
false
};
}
handleSidebarClose
=
()
=>
{
this
.
props
.
setSelectedFacility
(
null
);
this
.
props
.
setSidebar
(
false
);
};
handleMapDialogClose
=
()
=>
{
this
.
setState
({
mapDialogOpen
:
false
});
};
return
(
<
div
className
=
{
classNames
([
'
card-container-offset
'
,
(
isSidebarOpen
&&
'
card-container-offset-open
'
),
(
!
isSidebarOpen
&&
'
card-container-offset-closed
'
)])}
>
<
meta
><
/meta
>
<
Paper
className
=
{
classNames
([
'
sidebar-root
'
,
(
isSidebarOpen
&&
'
sidebar-open
'
),
(
!
isSidebarOpen
&&
'
sidebar-closed
'
)])}
>
<
IconButton
className
=
{
'
sidebar-close-btn
'
}
onClick
=
{
handleSidebarClose
}
>
<
CloseIcon
/>
<
/IconButton
>
<
div
className
=
{
'
sidebar-row1
'
}
>
<
Avatar
className
=
{
'
sidebar-avatar
'
}
src
=
{
facility
.
logo
}
/
>
<
div
className
=
{
'
sidebar-title
'
}
>
<
Typography
type
=
"
display1
"
>
{
removeBrackets
(
facility
.
facility_name
)}
<
/Typography
>
render
()
{
const
{
facility
,
isSidebarOpen
,
facilities
,
campusRegion
}
=
this
.
props
;
const
{
mapDialogOpen
}
=
this
.
state
;
return
(
<
div
className
=
{
classNames
([
'
card-container-offset
'
,
(
isSidebarOpen
&&
'
card-container-offset-open
'
),
(
!
isSidebarOpen
&&
'
card-container-offset-closed
'
)])}
>
<
meta
><
/meta
>
<
Paper
className
=
{
classNames
([
'
sidebar-root
'
,
(
isSidebarOpen
&&
'
sidebar-open
'
),
(
!
isSidebarOpen
&&
'
sidebar-closed
'
)])}
>
<
IconButton
className
=
{
'
sidebar-close-btn
'
}
onClick
=
{
this
.
handleSidebarClose
}
>
<
CloseIcon
/>
<
/IconButton
>
<
div
className
=
{
'
sidebar-row1
'
}
>
<
Avatar
className
=
{
'
sidebar-avatar
'
}
src
=
{
facility
.
logo
}
/
>
<
div
className
=
{
'
sidebar-title
'
}
>
<
Typography
type
=
"
display1
"
>
{
removeBrackets
(
facility
.
facility_name
)}
<
/Typography
>
<
/div
>
<
/div
>
<
/div
>
<
Divider
className
=
{
'
sidebar-
divider
'
}
/
>
<
div
className
=
{
'
sidebar-
scroll
'
}
>
<
div
className
=
{
'
sidebar-label-holder
'
}
>
<
TextwTitle
label
=
"
B
uilding
"
content
=
{
facility
.
facility_location
&&
facility
.
facility_location
.
building
}
/
>
<
TextwTitle
label
=
"
A
ddress
"
content
=
{
facility
.
facility_location
&&
facility
.
facility_location
.
address
}
/
>
<
TextwTitle
label
=
"
P
hone
N
umber
"
content
=
{
f
acility
.
phone_number
?
phoneFormatter
.
format
(
facility
.
phone_number
,
"
(NNN) NNN-NNNN
"
)
:
'
Unknown
'
}
/
>
<
TextwTitle
label
=
"
Label
s
"
content
=
{
<
FacilityLabel
s
facility
=
{
facility
}
/>} /
>
<
TextwTitle
label
=
"
Hours
"
content
=
{
<
WeekHours
facility
=
{
facility
}
/>} /
>
<
Divider
className
=
{
'
sidebar-divider
'
}
/
>
<
div
className
=
{
'
sidebar-
scroll
'
}
>
<
div
className
=
{
'
sidebar-
label-holder
'
}
>
<
TextwTitle
label
=
"
Building
"
content
=
{
facility
.
facility_location
&&
facility
.
facility_location
.
b
uilding
}
/
>
<
TextwTitle
label
=
"
Address
"
content
=
{
facility
.
facility_location
&&
facility
.
facility_location
.
a
ddress
}
/
>
<
TextwTitle
label
=
"
Phone Number
"
content
=
{
facility
.
phone_number
?
phoneFormatter
.
format
(
facility
.
p
hone
_n
umber
,
'
(NNN) NNN-NNNN
'
)
:
'
Unknown
'
}
/
>
<
TextwTitle
label
=
"
Labels
"
content
=
{
<
F
acility
Labels
facility
=
{
facility
}
/>
} /
>
<
TextwTitle
label
=
"
Hour
s
"
content
=
{
<
WeekHour
s
facility
=
{
facility
}
/>} /
>
<
/div
>
<
/div
>
<
/div
>
<
div
className
=
{
'
sidebar-row2
'
}
>
<
FacilitiesMap
facilities
=
{
facilities
}
facility
=
{
facility
}
campusRegion
=
{
campusRegion
}
/
>
<
/div
>
<
/Paper
>
<
/div
>
);
};
export
default
Sidebar
;
<
div
className
=
{
'
sidebar-row2
'
}
>
<
div
className
=
{
'
sidebar-map-container
'
}
onClick
=
{()
=>
{
this
.
setState
({
mapDialogOpen
:
true
});
}}
>
<
FacilitiesMap
facilities
=
{
facilities
}
facility
=
{
facility
}
interactive
=
{
false
}
campusRegion
=
{
campusRegion
}
/
>
<
/div
>
<
MapDialog
open
=
{
mapDialogOpen
}
facilities
=
{
facilities
}
facility
=
{
facility
}
campusRegion
=
{
campusRegion
}
height
=
{
'
500px
'
}
width
=
{
'
600px
'
}
onClose
=
{
this
.
handleMapDialogClose
}
/
>
<
/div
>
<
/Paper
>
<
/div
>
);
}
}
export
default
Sidebar
;
\ No newline at end of file
src/styles/components/sidebar.scss
View file @
09a3da6e
...
...
@@ -93,6 +93,14 @@
width
:
100%
;
}
.sidebar-map-container
{
transition
:
250ms
ease-in-out
;
width
:
100%
;
height
:
200px
;
padding
:
10px
;
box-sizing
:
border-box
;
}
.sidebar-toggle-map-btn
{
width
:
100%
;
}
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment