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
0e4a6553
Commit
0e4a6553
authored
Feb 20, 2019
by
Andrew Hrdy
Browse files
Resolved ui bugs from prior dependency bump, cleaned some code.
parent
4de8da0f
Pipeline
#3959
passed with stage
in 1 minute and 44 seconds
Changes
14
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
src/components/CardContainer.tsx
View file @
0e4a6553
...
...
@@ -5,13 +5,10 @@ import FacilityCard from '../containers/FacilityCard';
import
Grid
from
'
@material-ui/core/Grid
'
;
class
CardContainer
extends
React
.
Component
<
CardContainerProps
,
CardContainerState
>
{
class
CardContainer
extends
React
.
Component
<
CardContainerProps
>
{
constructor
(
props
:
CardContainerProps
)
{
super
(
props
);
this
.
state
=
{
selectedSlug
:
null
};
}
filterCards
=
(
facility
:
IFacility
)
=>
{
...
...
@@ -40,25 +37,15 @@ class CardContainer extends React.Component<CardContainerProps, CardContainerSta
facilityCategory
.
includes
(
lSearchTerm
)
||
hasTag
||
friendlyName
.
includes
(
lSearchTerm
);
}
handleFacilityClick
=
(
slug
:
string
)
=>
{
const
newValue
=
(
slug
!==
this
.
state
.
selectedSlug
)
?
slug
:
null
;
this
.
setState
({
selectedSlug
:
newValue
});
}
render
()
{
const
{
facilities
}
=
this
.
props
;
return
(
<
Grid
container
=
{
true
}
className
=
{
'
card-container-root
'
}
spacing
=
{
24
}
justify
=
{
'
center
'
}
alignItems
=
{
'
flex-end
'
}
>
{
facilities
.
filter
(
this
.
filterCards
).
map
((
item
)
=>
{
const
isSelected
=
(
item
.
slug
===
this
.
state
.
selectedSlug
);
return
(
<
Grid
key
=
{
item
.
slug
}
item
=
{
true
}
>
<
FacilityCard
facility
=
{
item
}
facilities
=
{
facilities
}
isSelected
=
{
isSelected
}
setSelected
=
{
this
.
handleFacilityClick
}
/>
<
FacilityCard
facility
=
{
item
}
facilities
=
{
facilities
}
/>
</
Grid
>
);
})
}
...
...
@@ -73,8 +60,4 @@ export interface CardContainerProps {
campusRegion
:
CampusRegion
;
}
export
interface
CardContainerState
{
selectedSlug
:
string
;
}
export
default
CardContainer
;
\ No newline at end of file
src/components/MapDialog.tsx
View file @
0e4a6553
import
*
as
React
from
'
react
'
;
import
{
IFacility
}
from
'
../models/facility.model
'
;
import
FacilitiesMap
from
'
./FacilitiesMap
'
;
import
FacilitiesMap
from
'
.
./containers
/FacilitiesMap
'
;
import
Dialog
from
'
@material-ui/core/Dialog
'
;
import
IconButton
from
'
@material-ui/core/IconButton
'
;
...
...
src/components/Sidebar.tsx
View file @
0e4a6553
...
...
@@ -4,7 +4,7 @@ import * as phoneFormatter from 'phone-formatter';
import
{
IFacility
}
from
'
../models/facility.model
'
;
import
TextwTitle
from
'
./TextwTitle
'
;
import
FacilitiesMap
from
'
./FacilitiesMap
'
;
import
FacilitiesMap
from
'
.
./containers
/FacilitiesMap
'
;
import
MapDialog
from
'
./MapDialog
'
;
import
WeekHours
from
'
./WeekHours
'
;
...
...
src/co
mponent
s/FacilitiesMap.tsx
→
src/co
ntainer
s/FacilitiesMap.tsx
View file @
0e4a6553
...
...
@@ -3,12 +3,14 @@ import ReactMapboxGl, { Marker, Popup } from 'react-mapbox-gl';
import
{
getMaxBounds
,
getCenterOfCampusRegion
}
from
'
../utils/mapboxUtils
'
;
import
*
as
mapboxgl
from
'
mapbox-gl
'
;
import
{
removeBrackets
}
from
'
../utils/nameUtils
'
;
import
{
IFacility
,
CampusRegion
,
I
FacilityLocation
}
from
'
../models/facility.model
'
;
import
{
IFacility
,
CampusRegion
,
Facilit
iesB
yLocation
}
from
'
../models/facility.model
'
;
import
MenuItem
from
'
@material-ui/core/MenuItem
'
;
import
Select
from
'
@material-ui/core/Select
'
;
import
FormControl
from
'
@material-ui/core/FormControl
'
;
import
Typography
from
'
@material-ui/core/Typography
'
;
import
{
ApplicationState
}
from
'
../store
'
;
import
{
connect
}
from
'
react-redux
'
;
const
mapboxToken
=
'
pk.eyJ1IjoibWR1ZmZ5OCIsImEiOiJjaXk2a2lxODQwMDdyMnZzYTdyb3M4ZTloIn0.mSocl7zUnZBO6-CV9cvmnA
'
;
...
...
@@ -40,7 +42,6 @@ class FacilitiesMap extends React.Component<FacilitiesMapProps, FacilitiesMapSta
campusRegion
:
campusRegion
,
zoom
:
[
17
],
center
:
facility
&&
facility
.
facility_location
?
facility
.
facility_location
.
coordinate_location
.
coordinates
:
getCenterOfCampusRegion
(
campusRegion
),
facilityLocations
:
[],
selectedLocation
:
null
,
isLoaded
:
false
};
...
...
@@ -51,10 +52,6 @@ class FacilitiesMap extends React.Component<FacilitiesMapProps, FacilitiesMapSta
const
campusRegion
=
facility
&&
facility
.
facility_location
?
facility
.
facility_location
.
campus_region
:
CampusRegion
.
Fairfax
;
this
.
changeRegion
(
campusRegion
,
facility
);
if
(
this
.
state
.
facilityLocations
.
length
===
0
)
{
this
.
generateLocationArray
(
facilities
);
}
}
changeRegion
=
(
campusRegion
:
CampusRegion
,
facility
:
IFacility
=
this
.
props
.
facility
)
=>
{
...
...
@@ -71,27 +68,7 @@ class FacilitiesMap extends React.Component<FacilitiesMapProps, FacilitiesMapSta
},
100
);
}
generateLocationArray
=
(
facilities
:
IFacility
[])
=>
{
const
locations
:
FacilityMapLocation
[]
=
[];
facilities
.
forEach
((
facility
)
=>
{
const
location
=
locations
.
find
((
loc
)
=>
loc
.
location
.
id
===
facility
.
facility_location
.
id
);
if
(
location
)
{
location
.
facilities
.
push
(
facility
);
}
else
{
locations
.
push
({
location
:
facility
.
facility_location
,
facilities
:
[
facility
]
});
}
});
this
.
setState
({
facilityLocations
:
locations
});
}
selectLocation
=
(
location
:
FacilityMapLocation
)
=>
{
selectLocation
=
(
location
:
FacilitiesByLocation
)
=>
{
const
{
interactive
=
true
}
=
this
.
props
;
const
oldSelectedLocation
=
this
.
state
.
selectedLocation
;
...
...
@@ -107,8 +84,8 @@ class FacilitiesMap extends React.Component<FacilitiesMapProps, FacilitiesMapSta
}
render
()
{
const
{
interactive
=
true
}
=
this
.
props
;
const
{
maxBounds
,
facilityLocations
,
selectedLocation
,
center
,
zoom
}
=
this
.
state
;
const
{
interactive
=
true
,
facilitiesByLocation
}
=
this
.
props
;
const
{
maxBounds
,
selectedLocation
,
center
,
zoom
}
=
this
.
state
;
return
(
<
this
.
Map
onStyleLoad
=
{
(
map
:
any
)
=>
{
...
...
@@ -144,7 +121,7 @@ class FacilitiesMap extends React.Component<FacilitiesMapProps, FacilitiesMapSta
<
Select
disableUnderline
=
{
true
}
value
=
{
this
.
state
.
campusRegion
}
onChange
=
{
(
e
)
=>
this
.
changeRegion
(
(
CampusRegion
as
any
)[
e
.
target
.
value
]
)
}
>
onChange
=
{
(
e
)
=>
this
.
changeRegion
(
e
.
target
.
value
as
CampusRegion
)
}
>
<
MenuItem
value
=
{
CampusRegion
.
Fairfax
}
>
Fairfax
</
MenuItem
>
<
MenuItem
value
=
{
CampusRegion
.
Arlington
}
>
Arlington
</
MenuItem
>
<
MenuItem
value
=
{
CampusRegion
.
PrinceWilliam
}
>
SciTech
</
MenuItem
>
...
...
@@ -153,7 +130,7 @@ class FacilitiesMap extends React.Component<FacilitiesMapProps, FacilitiesMapSta
</
FormControl
>
)
}
{
(
facilityLocation
s
.
length
>
0
)
&&
facilityLocation
s
.
map
((
item
)
=>
{
{
(
facilit
iesB
yLocation
.
length
>
0
)
&&
facilit
iesB
yLocation
.
map
((
item
)
=>
{
const
location
=
item
.
location
;
return
(
...
...
@@ -196,12 +173,7 @@ export interface FacilitiesMapProps {
facility
:
IFacility
;
facilities
:
IFacility
[];
interactive
:
boolean
;
}
interface
FacilityMapLocation
{
location
:
IFacilityLocation
;
facilities
:
IFacility
[];
facilitiesByLocation
:
FacilitiesByLocation
[];
}
export
interface
FacilitiesMapState
{
...
...
@@ -209,9 +181,12 @@ export interface FacilitiesMapState {
campusRegion
:
CampusRegion
;
zoom
:
number
[];
center
:
number
[];
facilityLocations
:
FacilityMapLocation
[];
selectedLocation
:
FacilityMapLocation
;
selectedLocation
:
FacilitiesByLocation
;
isLoaded
:
boolean
;
}
export
default
FacilitiesMap
;
\ No newline at end of file
const
mapStateToProps
=
(
state
:
ApplicationState
)
=>
({
facilitiesByLocation
:
state
.
facilities
.
facilitiesByLocation
||
[]
});
export
default
connect
(
mapStateToProps
)(
FacilitiesMap
);
\ No newline at end of file
src/containers/FacilityCard.tsx
View file @
0e4a6553
...
...
@@ -32,25 +32,27 @@ class FacilityCard extends React.Component<FacilityCardProps, FacilityCardState>
}
shouldComponentUpdate
=
(
nextProps
:
FacilityCardProps
)
=>
{
if
(
this
.
props
.
isSelected
!==
nextProps
.
isSelected
)
{
if
(
this
.
isFacilitySelected
()
!==
(
nextProps
.
selectedFacility
.
slug
===
this
.
props
.
facility
.
slug
))
{
return
true
;
}
const
dateModified
=
nextProps
.
facility
.
modified
;
if
(
dateModified
!==
this
.
state
.
modified
)
{
this
.
setState
({
modified
:
dateModified
});
return
true
;
}
return
false
;
}
handleCardClick
=
()
=>
{
this
.
props
.
setSelected
(
this
.
props
.
facility
.
slug
);
isFacilitySelected
=
():
boolean
=>
this
.
props
.
selectedFacility
.
slug
===
this
.
props
.
facility
.
slug
;
const
newState
=
!
this
.
props
.
isSelected
;
handleCardClick
=
()
=>
{
const
newState
=
!
this
.
isFacilitySelected
();
trackPiwikEvent
(
'
card-action
'
,
'
click
'
);
...
...
@@ -60,9 +62,8 @@ class FacilityCard extends React.Component<FacilityCardProps, FacilityCardState>
},
0
);
}
render
()
{
const
{
facility
,
facilities
,
favorites
,
addFavoriteFacility
,
removeFavoriteFacility
,
isSelected
}
=
this
.
props
;
const
{
facility
,
facilities
,
favorites
,
addFavoriteFacility
,
removeFavoriteFacility
}
=
this
.
props
;
const
dayOfWeek
=
[
6
,
0
,
1
,
2
,
3
,
4
,
5
][
new
Date
().
getDay
()];
...
...
@@ -86,17 +87,13 @@ class FacilityCard extends React.Component<FacilityCardProps, FacilityCardState>
facility
.
facility_location
.
friendly_building
:
facility
.
facility_location
.
building
;
return
(
<
Card
onClick
=
{
this
.
handleCardClick
}
className
=
{
classNames
(
'
fc-root
'
,
is
Selected
&&
'
fc-selected
'
)
}
<
Card
onClick
=
{
this
.
handleCardClick
}
className
=
{
classNames
(
'
fc-root
'
,
this
.
isFacility
Selected
()
&&
'
fc-selected
'
)
}
elevation
=
{
3
}
>
{
/*<CardMedia className={'fc-media'}
image={'https://gmucampus.files.wordpress.com/2010/09/00southside2.jpg'} />*/
}
<
div
className
=
{
'
fc-logo-container
'
}
>
<
img
className
=
{
'
fc-logo
'
}
alt
=
{
facility
.
slug
}
src
=
{
facility
.
logo
}
/>
</
div
>
<
FavoriteButton
slug
=
{
facility
.
slug
}
initialState
=
{
favorites
.
includes
(
facility
.
slug
)
}
addFavoriteFacility
=
{
addFavoriteFacility
}
removeFavoriteFacility
=
{
removeFavoriteFacility
}
/>
...
...
@@ -110,9 +107,11 @@ class FacilityCard extends React.Component<FacilityCardProps, FacilityCardState>
{
removeBrackets
(
facility
.
facility_name
)
}
</
Typography
>
</
Grid
>
<
Grid
item
=
{
true
}
className
=
{
'
fc-small-grid-item-spacing
'
}
>
<
FacilityCategory
category
=
{
facility
.
facility_category
}
/>
</
Grid
>
<
Grid
item
=
{
true
}
className
=
{
'
fc-small-grid-item-spacing fc-display-hours
'
}
>
<
Typography
variant
=
{
'
body1
'
}
>
{
`Today:
${
getDisplayHours
()}
`
}
...
...
@@ -137,7 +136,7 @@ class FacilityCard extends React.Component<FacilityCardProps, FacilityCardState>
</
Grid
>
</
CardContent
>
<
FacilityDialog
facility
=
{
facility
}
facilities
=
{
facilities
}
isOpen
=
{
is
Selected
}
<
FacilityDialog
facility
=
{
facility
}
facilities
=
{
facilities
}
isOpen
=
{
this
.
isFacility
Selected
()
}
onClose
=
{
this
.
handleCardClick
}
/>
</
Card
>
);
...
...
@@ -147,10 +146,8 @@ class FacilityCard extends React.Component<FacilityCardProps, FacilityCardState>
export
interface
FacilityCardProps
{
facility
:
IFacility
;
facilities
:
IFacility
[];
isSelected
:
boolean
;
favorites
:
string
[];
selectedFacility
:
IFacility
;
setSelected
:
(
slug
:
string
)
=>
void
;
setSelectedFacility
:
(
facility
:
IFacility
)
=>
void
;
addFavoriteFacility
:
(
slug
:
string
)
=>
void
;
removeFavoriteFacility
:
(
slug
:
string
)
=>
void
;
...
...
src/containers/SearchBar.tsx
View file @
0e4a6553
...
...
@@ -42,8 +42,7 @@ class SearchBar extends React.Component<SearchBarProps, SearchBarState> {
handleRegionChange
=
(
e
:
React
.
ChangeEvent
<
HTMLSelectElement
>
)
=>
{
trackPiwikEvent
(
'
change-campus
'
,
e
.
target
.
value
);
const
campusRegion
=
(
CampusRegion
as
any
)[
e
.
target
.
value
];
const
campusRegion
:
CampusRegion
=
e
.
target
.
value
as
CampusRegion
;
this
.
setState
({
campus
:
campusRegion
});
...
...
src/models/facility.model.ts
View file @
0e4a6553
...
...
@@ -62,4 +62,9 @@ export interface IFacilityScheduleEntry {
end_day
:
number
;
start_time
:
string
;
end_time
:
string
;
}
export
interface
FacilitiesByLocation
{
location
:
IFacilityLocation
;
facilities
:
IFacility
[];
}
\ No newline at end of file
src/store/facility/facility.reducer.ts
View file @
0e4a6553
import
{
IFacility
}
from
'
../../models/facility.model
'
;
import
{
IFacility
,
FacilitiesByLocation
}
from
'
../../models/facility.model
'
;
import
{
FacilityAction
,
FacilityActionTypes
}
from
'
./facility.action-types
'
;
import
{
generateFacilitiesByLocation
}
from
'
../../utils/mapboxUtils
'
;
export
interface
FacilityState
{
isFetching
:
boolean
;
facilities
:
IFacility
[];
facilitiesByLocation
:
FacilitiesByLocation
[];
}
export
const
facilityReducer
=
(
state
:
FacilityState
=
{
isFetching
:
false
,
facilities
:
[]},
action
:
FacilityAction
)
=>
{
export
const
facilityReducer
=
(
state
:
FacilityState
=
{
isFetching
:
false
,
facilities
:
[],
facilitiesByLocation
:
[]},
action
:
FacilityAction
)
=>
{
switch
(
action
.
type
)
{
case
FacilityActionTypes
.
FETCH_FACILITIES
:
{
return
{
...
...
@@ -18,7 +20,8 @@ export const facilityReducer = (state: FacilityState = {isFetching: false, facil
return
{
...
state
,
isFetching
:
false
,
facilities
:
action
.
facilities
facilities
:
action
.
facilities
,
facilitiesByLocation
:
generateFacilitiesByLocation
(
action
.
facilities
)
};
}
default
:
...
...
src/styles/components/mapDialog.scss
View file @
0e4a6553
.map-dialog-close-btn
{
position
:
absolute
!
important
;
z-index
:
100
;
top
:
10
px
;
left
:
10
px
;
top
:
5
px
;
left
:
5
px
;
width
:
30px
!
important
;
height
:
30px
!
important
;
background-color
:
white
!
important
;
border-radius
:
5px
!
important
;
box-shadow
:
0
0
0
2px
rgba
(
0
,
0
,
0
,
0
.1
);
padding
:
4px
!
important
;
}
\ No newline at end of file
src/styles/containers/alertContainer.scss
View file @
0e4a6553
...
...
@@ -10,6 +10,7 @@
.alert-container-close-btn
{
width
:
20px
!
important
;
height
:
20px
!
important
;
padding
:
0
!
important
;
}
.alert-container-close-icon
{
...
...
src/styles/co
mponent
s/facilitiesMap.scss
→
src/styles/co
ntainer
s/facilitiesMap.scss
View file @
0e4a6553
File moved
src/styles/containers/facilityCard.scss
View file @
0e4a6553
...
...
@@ -9,12 +9,12 @@
//Above lg
@media
screen
and
(
min-width
:
map-get
(
$breakpoints
,
lg
))
{
.fc-root
:hover
{
.favorite-button-heart
{
color
:
grey
;
}
.fc-root
:hover
{
.favorite-button-heart
{
color
:
grey
;
}
}
}
.fc-card-content
{
padding
:
8px
4px
0
!
important
;
...
...
@@ -101,88 +101,46 @@
}
}
/**
//Between lg and xl
@media screen and (min-width: map-get($breakpoints, lg)) and (max-width: map-get($breakpoints, xl)) {
.fc-root {
width: 250px * $fc-lg-scale;
height: 250px;
}
.fc-small-grid-item-spacing {
padding: 0 8px !important;
}
.fc-media {
height: 115px * $fc-lg-scale;
}
.fc-logo-container {
width: 100px * $fc-lg-scale;
height: 100px * $fc-lg-scale;
margin-top: -60px * $fc-lg-scale;
border-radius: 50%;
border: 5px * $fc-lg-scale solid white;
}
.fc-logo {
width: 100px * $fc-lg-scale;
height: 100px * $fc-lg-scale;
}
.fc-extra-info {
font-size: 11px;
}
.fc-card-map-marker-icon {
height: 20px !important;
width: 20px !important;
}
.fc-root
{
width
:
270px
!
important
;
display
:
flex
!
important
;
align-items
:
center
!
important
;
}
**/
//@media screen and (max-width: map-get($breakpoints, lg) - 1px) {
.fc-root
{
width
:
270px
!
important
;
display
:
flex
!
important
;
align-items
:
center
!
important
;
}
.fc-card-content
{
flex
:
1
;
min-width
:
0
;
}
.fc-card-content
{
flex
:
1
;
min-width
:
0
;
}
.fc-media
{
display
:
none
!
important
;
}
.fc-media
{
display
:
none
!
important
;
}
.fc-title-container
{
width
:
90%
;
}
.fc-title-container
{
width
:
90%
;
}
.fc-extra-info
{
max-width
:
100%
!
important
;
width
:
100%
!
important
;
padding
:
2px
0
!
important
;
justify-content
:
center
;
font-size
:
11px
;
}
.fc-extra-info
{
max-width
:
100%
!
important
;
width
:
100%
!
important
;
padding
:
2px
0
!
important
;
justify-content
:
center
;
font-size
:
11px
;
}
.fc-small-grid-item-spacing
{
padding
:
0
8px
!
important
;
}
.fc-small-grid-item-spacing
{
padding
:
0
8px
!
important
;
}
.fc-logo-container
{
margin
:
0
0
0
5px
!
important
;
}
.fc-logo-container
{
margin
:
0
0
0
5px
!
important
;
}
.fc-logo
{
margin
:
5px
;
}
.fc-logo
{
margin
:
5px
;
}
.fc-card-map-marker-icon
{
height
:
20px
!
important
;
width
:
20px
!
important
;
}
//}
\ No newline at end of file
.fc-card-map-marker-icon
{
height
:
20px
!
important
;
width
:
20px
!
important
;
}
\ No newline at end of file
src/styles/whatsOpen.scss
View file @
0e4a6553
...
...
@@ -4,7 +4,6 @@
@import
'./components/alert'
;
@import
'./components/appBar'
;
@import
'./components/cardContainer'
;
@import
'./components/facilitiesMap'
;
@import
'./components/facilityCategory'
;
@import
'./components/facilityDialog'
;
@import
'./components/facilityStatus'
;
...
...
@@ -15,6 +14,7 @@
@import
'./components/weekHours'
;
/* Containers */
@import
'./containers/alertContainer'
;
@import
'./containers/facilitiesMap'
;
@import
'./containers/facilityCard'
;
@import
'./containers/layout'
;
@import
'./containers/searchBar'
;
...
...
src/utils/mapboxUtils.ts
View file @
0e4a6553
import
{
CampusRegion
}
from
'
../models/facility.model
'
;
import
{
CampusRegion
,
IFacility
,
FacilitiesByLocation
}
from
'
../models/facility.model
'
;
const
campusBounds
=
{
fairfax
:
[
...
...
@@ -95,4 +95,22 @@ const getCenterOfCampusRegion = (campus: CampusRegion) => {
return
[(
maxBounds
[
0
][
0
]
+
maxBounds
[
1
][
0
])
/
2
,
(
maxBounds
[
0
][
1
]
+
maxBounds
[
1
][
1
])
/
2
];
};
export
{
addRoute
,
getGeoLine
,
getMaxBounds
,
getCenterOfCampusRegion
};
\ No newline at end of file
const
generateFacilitiesByLocation
=
(
facilities
:
IFacility
[]):
FacilitiesByLocation
[]
=>
{
const
locations
:
FacilitiesByLocation
[]
=
[];
facilities
.
forEach
((
facility
)
=>
{
const
location
=
locations
.
find
((
loc
)
=>
loc
.
location
.
id
===
facility
.
facility_location
.
id
);
if
(
location
)
{
location
.
facilities
.
push
(
facility
);
}
else
{
locations
.
push
({
location
:
facility
.
facility_location
,
facilities
:
[
facility
]
});
}
});
return
locations
;
};
export
{
addRoute
,
getGeoLine
,
getMaxBounds
,
getCenterOfCampusRegion
,
generateFacilitiesByLocation
};
\ No newline at end of file
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