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
026a4573
Commit
026a4573
authored
Oct 07, 2017
by
Andrew Hrdy
Browse files
Removed ETA via walking, replaced with open / closed status. Toned down color.
parent
8ac488a9
Changes
3
Hide whitespace changes
Inline
Side-by-side
src/components/FacilityCategory.js
View file @
026a4573
...
...
@@ -3,14 +3,13 @@ import {withStyles} from 'material-ui/styles';
import
Avatar
from
'
material-ui/Avatar
'
;
import
Typography
from
'
material-ui/Typography
'
;
import
RestaurantIcon
from
'
material-ui-icons/Restaurant
'
;
import
RestaurantMenuIcon
from
'
material-ui-icons/RestaurantMenu
'
;
import
StoreIcon
from
'
material-ui-icons/Store
'
;
import
LocalCafeIcon
from
'
material-ui-icons/LocalCafe
'
;
import
LocalPrintShopIcon
from
'
material-ui-icons/LocalPrintshop
'
;
import
LocalPostOfficeIcon
from
'
material-ui-icons/LocalPostOffice
'
;
import
FitnessCenterIcon
from
'
material-ui-icons/FitnessCenter
'
;
import
ShoppingCartIcon
from
'
material-ui-icons/ShoppingCart
'
import
{
amber
,
purpl
e
,
brown
,
grey
,
teal
,
blue
,
deepOrange
,
lime
}
from
'
material-ui/colors
'
;
import
{
red
,
blu
e
,
brown
,
grey
,
teal
,
deepOrange
,
lime
}
from
'
material-ui/colors
'
;
/*
Proposed Category Types:
...
...
@@ -41,24 +40,19 @@ const FacilityCategory = ({classes, category}) => {
switch
(
category
.
id
)
{
case
1
:
//Dining Hall
color
=
amber
[
500
];
icon
=
<
RestaurantMenuIcon
className
=
{
classes
.
categoryIcon
}
/>
;
break
;
case
2
:
//Restaurant
color
=
blue
[
500
];
case
5
:
//Take out dining hall
color
=
red
[
400
];
icon
=
<
RestaurantIcon
className
=
{
classes
.
categoryIcon
}
/>
;
break
;
case
3
:
//Convenience Store
color
=
purpl
e
[
500
];
color
=
blu
e
[
500
];
icon
=
<
StoreIcon
className
=
{
classes
.
categoryIcon
}
/>
;
break
;
case
4
:
//Cafe
color
=
brown
[
500
];
icon
=
<
LocalCafeIcon
className
=
{
classes
.
categoryIcon
}
/>
;
break
;
//case 5: //Take out dining hall
//TODO: No idea for this icon...
//break;
case
6
:
//Athletic Facility
color
=
teal
[
500
];
icon
=
<
FitnessCenterIcon
className
=
{
classes
.
categoryIcon
}
/>
;
...
...
src/components/FacilityStatus.js
View file @
026a4573
import
React
from
'
react
'
;
import
{
withStyles
}
from
'
material-ui/styles
'
;
import
Chip
from
'
material-ui/Chip
'
;
import
Typography
from
'
material-ui/Typography
'
;
import
DoneIcon
from
'
material-ui-icons/Done
'
;
import
CloseIcon
from
'
material-ui-icons/Close
'
;
import
AlarmIcon
from
'
material-ui-icons/Alarm
'
;
import
{
blue
,
green
,
orange
,
red
}
from
'
material-ui/colors
'
const
FacilityStatus
=
({
classes
,
facility
})
=>
{
...
...
@@ -184,64 +186,68 @@ const FacilityStatus = ({classes, facility}) => {
};
/**
* Generates
the chip label
* Generates
information about the facility's status.
*
* @param isOpen True if the facility is open, otherwise false.
* @param time The time in minutes until the facility opens / closes.
* @returns {
string} The label for the chip
* @returns {
{label: string, color: *, icon: *}} Information about the facility.
*/
const
chipLabel
=
(
isOpen
,
time
)
=>
{
if
(
time
===
-
1
)
{
return
"
OPEN 24/7
"
}
const
generateStatusInfo
=
(
isOpen
,
time
)
=>
{
let
label
;
let
color
;
let
icon
;
if
(
isOpen
&&
time
>
60
)
{
return
"
OPEN
"
;
if
(
time
===
-
1
)
{
label
=
'
OPEN 24/7
'
;
color
=
green
[
500
];
icon
=
<
DoneIcon
/>
;
}
else
if
(
isOpen
&&
time
>
60
)
{
label
=
'
OPEN
'
;
color
=
green
[
500
];
icon
=
<
DoneIcon
/>
;
}
else
if
(
isOpen
&&
time
<=
30
)
{
return
"
CLOSING SOON
"
;
label
=
'
CLOSING SOON
'
;
color
=
orange
[
500
];
icon
=
<
AlarmIcon
/>
;
}
else
if
(
!
isOpen
&&
time
>
15
)
{
return
"
CLOSED
"
;
label
=
'
CLOSED
'
;
color
=
red
[
500
];
icon
=
<
CloseIcon
/>
}
else
{
return
`OPENING IN
${
Math
.
round
(
time
)}
m`
;
label
=
`OPENS IN
${
Math
.
round
(
time
)}
m`
;
color
=
blue
[
500
];
icon
=
<
AlarmIcon
/>
}
};
/**
* Generates the background color of the chip.
*
* @param isOpen True if the facility is open, otherwise false.
* @param time The time in minutes until the facility opens / closes.
* @returns {string} The background color of the chip.
*/
const
backgroundColor
=
(
isOpen
,
time
)
=>
{
if
(
time
===
-
1
)
{
return
green
[
500
];
}
if
(
isOpen
&&
time
>
60
)
{
return
green
[
500
];
}
else
if
(
isOpen
&&
time
<=
30
)
{
return
orange
[
500
];
}
else
if
(
!
isOpen
&&
time
>
15
)
{
return
red
[
500
];
}
else
{
return
blue
[
500
];
return
{
label
:
label
,
color
:
color
,
icon
:
icon
,
}
};
const
time
=
timeTill
(
facility
);
const
statusInfo
=
generateStatusInfo
(
facility
.
isOpen
,
timeTill
(
facility
)
)
;
return
(
<
Chip
label
=
{
<
Typography
type
=
{
'
caption
'
}
className
=
{
classes
.
statusText
}
style
=
{{
color
:
statusInfo
.
color
}}
>
{
statusInfo
.
icon
}
{
statusInfo
.
label
}
<
/Typography
>
/*<Chip label={
<div>
<Typography type={'caption'} className={classes.isOpenText}>
{chipLabel(facility.isOpen, time)}
</Typography>
</div>
}
className
=
{
classes
.
chip
}
style
=
{{
backgroundColor
:
backgroundColor
(
facility
.
isOpen
,
time
)}}
/
>
} className={classes.chip} style={{backgroundColor: backgroundColor(facility.isOpen, time)}}/>
*/
)
};
const
styleSheet
=
{
statusText
:
{
display
:
'
flex
'
,
alignItems
:
'
center
'
},
chip
:
{
height
:
'
28px
'
,
borderRadius
:
'
4px
'
,
...
...
src/containers/FacilityCard.js
View file @
026a4573
...
...
@@ -137,9 +137,6 @@ const FacilityCard = ({classes, facility, favorites, addFavoriteFacility, remove
{
removeBrackets
(
facility
.
facility_name
)}
<
/Typography
>
<
/Grid
>
<
Grid
item
className
=
{
classes
.
smallGridItemSpacing
}
>
<
FacilityStatus
facility
=
{
facility
}
/
>
<
/Grid
>
<
Grid
item
className
=
{
classes
.
smallGridItemSpacing
}
>
<
FacilityCategory
category
=
{
facility
.
facility_category
}
/
>
<
/Grid
>
...
...
@@ -149,12 +146,7 @@ const FacilityCard = ({classes, facility, favorites, addFavoriteFacility, remove
<
CardActions
>
<
Grid
container
justify
=
{
'
space-around
'
}
>
<
Grid
item
className
=
{
classes
.
extraInfoWrapper
}
>
<
Typography
type
=
{
'
caption
'
}
>
<
DirectionsWalkIcon
/>
<
/Typography
>
<
Typography
type
=
{
'
caption
'
}
align
=
{
'
center
'
}
>
3
M
<
/Typography
>
<
FacilityStatus
facility
=
{
facility
}
/
>
<
/Grid
>
<
Grid
item
className
=
{
classes
.
extraInfoWrapper
}
>
...
...
@@ -177,7 +169,7 @@ const styleSheet = {
position
:
'
relative
'
},
cardContent
:
{
padding
:
'
8px 4px !important
'
padding
:
'
8px 4px
0 4px
!important
'
},
smallGridContainerSpacing
:
{
margin
:
'
-2px -8px !important
'
...
...
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