Skip to content

GitLab

Commit 0e4a6553 authored by Andrew Hrdy's avatar 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
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/components/FacilitiesMap.tsx → src/containers/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, IFacilityLocation } from '../models/facility.model';
import { IFacility, CampusRegion, FacilitiesByLocation } 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>
)}
{(facilityLocations.length > 0) && facilityLocations.map((item) => {
{(facilitiesByLocation.length > 0) && facilitiesByLocation.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', isSelected && 'fc-selected')}
<Card onClick={this.handleCardClick} className={classNames('fc-root', this.isFacilitySelected() && '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={isSelected}
<FacilityDialog facility={facility} facilities={facilities} isOpen={this.isFacilitySelected()}
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: 10px;
left: 10px;
top: 5px;
left: 5px;
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/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
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