Commit 0e4a6553 authored by Andrew Hrdy's avatar Andrew Hrdy

Resolved ui bugs from prior dependency bump, cleaned some code.

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