Commit 4168d6eb authored by Andrew Hrdy's avatar Andrew Hrdy
Browse files

Now uses two API calls for facilities (open and closed). Small visual changes.

parent 871d906d
import { CALL_API,SET_FACILITIES,GET_FACILITIES } from './action-types' import {GET_FACILITIES, SET_FACILITIES} from './action-types'
export const apiTest = () =>{ export const apiTest = () => {
return (dispatch) =>{ return (dispatch) => {
return fetch('/api/facilities',{'method':'get'}).then((res)=>{ return fetch('/api/facilities', {'method': 'get'}).then((res) => {
return res.json() return res.json()
},(error)=>{console.log(error)}).then(json =>{ }, (error) => {
console.log(json[0]) console.log(error)
}) }).then(json => {
console.log(json[0])
})
} }
} };
export const getFacilities = () => dispatch => { export const getFacilities = () => dispatch => {
// var url = new URL('https://localhost:3000/api/facilities')
// url.searchParams.append('format','json')
dispatch({ dispatch({
type:GET_FACILITIES type: GET_FACILITIES
}) });
const request = new Request('https://api.srct.gmu.edu/whatsopen/v2/facilities/', {
method: 'GET', //A request for all the open facilities
}) const requestOpen = new Request('https://api.srct.gmu.edu/whatsopen/v2/facilities/?open_now=True&format=json', {
console.log(request) method: 'GET'
return fetch(request).then((res)=>{ });
if (res.status < 200 || res.status >= 300) {
throw new Error(res.statusText); //A request for all the closed facilities
} const requestClosed = new Request('https://api.srct.gmu.edu/whatsopen/v2/facilities/?closed_now=True&format=json', {
return res.json() method: 'GET'
}).then((json) => { });
dispatch(setFacilities(JSON.stringify(json)))
}) /**
} * Merges the two promises (returned from the fetch operations) in order to dispatch only when both the
* open and closed requests are completed.
*/
return Promise.all([
fetch(requestOpen)
.then(res => {
if (res.status < 200 || res.status >= 300) {
throw new Error(res.statusText);
}
return res.json();
}),
fetch(requestClosed)
.then(res => {
if (res.status < 200 || res.status >= 300) {
throw new Error(res.statusText);
}
return res.json();
})])
.then(facilitiesByStatus => { //facilitiesByStatus is in the format: [[openFacilities], [closedFacilities]]
/**
* Iterates over the open and closed facility arrays and adds the isOpen property which drives styling
* in the view.
*/
facilitiesByStatus[0].forEach(openFacility => {
openFacility.isOpen = true;
});
facilitiesByStatus[1].forEach(closedFacility => {
closedFacility.isOpen = false;
});
//Merges the two facility status arrays and sorts by alphabetical order.
const allFacilities = facilitiesByStatus[0].concat(facilitiesByStatus[1])
.sort((a, b) => a.facility_name > b.facility_name ? 1 : -1);
dispatch(setFacilities(JSON.stringify(allFacilities)));
});
};
export const setFacilities = (facilities) => { export const setFacilities = (facilities) => {
localStorage.setItem('facilities',facilities) localStorage.setItem('facilities', facilities);
return { return {
type:SET_FACILITIES, type: SET_FACILITIES,
facilities:JSON.parse(facilities) facilities: JSON.parse(facilities)
} }
} };
\ No newline at end of file \ No newline at end of file
...@@ -62,10 +62,11 @@ const FacilityCard = ({classes, facility, setSidebar}) => { ...@@ -62,10 +62,11 @@ const FacilityCard = ({classes, facility, setSidebar}) => {
let words = removeBrackets(name).split(/[ -]+/); //TODO: Add case change to the regex (ex. IndAroma should be IA, not I). let words = removeBrackets(name).split(/[ -]+/); //TODO: Add case change to the regex (ex. IndAroma should be IA, not I).
/* /*
Words that start with ( must be removed. TODO: Probably want this to be a regex test and remove any useless word / symbol (ex. the, and, &, etc.)
Words that are empty or start with ( must be removed.
Example: 'Recreation and Athletic Complex (RAC)' will result in the initials 'R(' without the filter. Example: 'Recreation and Athletic Complex (RAC)' will result in the initials 'R(' without the filter.
*/ */
words = words.filter(word => !word.startsWith("(")); words = words.filter(word => word && !word.startsWith("("));
if (words.length === 0) { if (words.length === 0) {
return ""; return "";
...@@ -115,9 +116,9 @@ const FacilityCard = ({classes, facility, setSidebar}) => { ...@@ -115,9 +116,9 @@ const FacilityCard = ({classes, facility, setSidebar}) => {
}; };
return ( return (
<Card onClick={handleClick} className={classes.root}> <Card onClick={handleClick} className={classes.root} raised>
{/*<CardMedia className={classes.media} image={require('../images/chipotleLogo.png')}/>*/} {/*<CardMedia className={classes.media} image={require('../images/chipotleLogo.png')}/>*/}
<CardContent className={classes.cardContent}> <CardContent>
<Grid container> <Grid container>
<Grid item xs={4} className={classes.avatarContainer}> <Grid item xs={4} className={classes.avatarContainer}>
<Avatar className={classes.avatar} <Avatar className={classes.avatar}
...@@ -125,15 +126,21 @@ const FacilityCard = ({classes, facility, setSidebar}) => { ...@@ -125,15 +126,21 @@ const FacilityCard = ({classes, facility, setSidebar}) => {
</Grid> </Grid>
<Grid item xs={8}> <Grid item xs={8}>
<Typography type={'title'} align={'center'} className={classes.title} noWrap> <Grid container direction={'column'} spacing={8}>
{removeBrackets(facility.facility_name)} <Grid item>
</Typography> <Typography type={'title'} align={'center'} className={classes.title} noWrap>
{removeBrackets(facility.facility_name)}
<FacilityStatus facility={facility}/> </Typography>
</Grid>
<Typography type={'caption'} align={'center'} className={classes.location} noWrap> <Grid item>
{removeBrackets(facility.facility_location.building)} <FacilityStatus facility={facility}/>
</Typography> </Grid>
<Grid item>
<Typography type={'caption'} align={'center'} className={classes.location} noWrap>
{removeBrackets(facility.facility_location.building)}
</Typography>
</Grid>
</Grid>
</Grid> </Grid>
</Grid> </Grid>
</CardContent> </CardContent>
...@@ -143,7 +150,7 @@ const FacilityCard = ({classes, facility, setSidebar}) => { ...@@ -143,7 +150,7 @@ const FacilityCard = ({classes, facility, setSidebar}) => {
const styleSheet = { const styleSheet = {
root: { root: {
width: 250, width: 250,
height: 100, borderRadius: '5px'
}, },
/**media: { /**media: {
flex: 1, flex: 1,
......
...@@ -5,18 +5,17 @@ import Typography from 'material-ui/Typography'; ...@@ -5,18 +5,17 @@ import Typography from 'material-ui/Typography';
import {green, red} from 'material-ui/colors' import {green, red} from 'material-ui/colors'
const FacilityStatus = ({classes, facility}) => { const FacilityStatus = ({classes, facility}) => {
const isOpen = facility => {
//TODO
return true;
};
return ( return (
<Chip label={ <Chip label={
<div> <div>
<Typography type={'caption'} className={classes.isOpenText}>OPEN</Typography> <Typography type={'caption'} className={classes.isOpenText}>
<Typography type={'caption'} className={classes.timeText}>~18 Hrs</Typography> {facility.isOpen ? "OPEN" : "CLOSED"}
</Typography>
<Typography type={'caption'} className={classes.timeText}>
~18 Hrs
</Typography>
</div> </div>
} className={classes.chip} style={{backgroundColor: isOpen(facility) ? green[500] : red[500]}}/> } className={classes.chip} style={{backgroundColor: facility.isOpen ? green[500] : red[500]}}/>
) )
}; };
const styleSheet = { const styleSheet = {
......
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