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
e532b2ac
Commit
e532b2ac
authored
Sep 29, 2017
by
Andrew Hrdy
Browse files
Started working on new card design (WIP).
parent
0dc17849
Changes
3
Hide whitespace changes
Inline
Side-by-side
src/components/FacilityStatus.js
View file @
e532b2ac
...
...
@@ -141,24 +141,34 @@ const FacilityStatus = ({classes, facility}) => {
};
/**
*
Calculates and formats the time until the facility open or closes.
*
Generates the chip label
*
* @param facility The facility to determine the
message
for.
* @returns {string} The
formatted message of how long until a facility open or closes.
* @param facility The facility to determine the
label
for.
* @returns {string} The
label for the chip
*/
const
timeTillMessage
=
facility
=>
{
const
chipLabel
=
facility
=>
{
const
schedule
=
facility
.
main_schedule
;
//TODO: Logic for "Special Schedule". I have no idea what this is.
//Facility is open 24/7
if
(
schedule
.
twenty_four_hours
)
{
return
"
24/7
"
return
"
OPEN
24/7
"
;
}
let
time
=
facility
.
isOpen
?
calcTimeTillClose
(
schedule
)
:
calcTimeTillOpen
(
schedule
);
//TODO: May want to use Math.ceil instead of Math.round
if
(
facility
.
isOpen
&&
time
>
60
)
{
return
"
OPEN
"
;
}
else
if
(
facility
.
isOpen
&&
time
<=
60
)
{
return
"
CLOSING SOON
"
;
}
else
if
(
!
facility
.
isOpen
&&
time
>
60
)
{
return
"
CLOSED
"
;
}
else
{
return
"
OPENING SOON
"
;
}
/*/TODO: May want to use Math.ceil instead of Math.round
if (time < 60) { //Under one hour
const roundedMins = Math.round(time);
return `${roundedMins} ${roundedMins === 1 ? "min" : "mins"}`;
...
...
@@ -168,17 +178,14 @@ const FacilityStatus = ({classes, facility}) => {
} else { //Over a day
const roundedDays = Math.round(time / 1440);
return `${roundedDays} ${roundedDays === 1 ? "day" : "days"}`;
}
}
*/
};
return
(
<
Chip
label
=
{
<
div
>
<
Typography
type
=
{
'
caption
'
}
className
=
{
classes
.
isOpenText
}
>
{
facility
.
isOpen
?
"
OPEN
"
:
"
CLOSED
"
}
<
/Typography
>
<
Typography
type
=
{
'
caption
'
}
className
=
{
classes
.
timeText
}
>
{
timeTillMessage
(
facility
)}
{
chipLabel
(
facility
)}
<
/Typography
>
<
/div
>
}
className
=
{
classes
.
chip
}
style
=
{{
backgroundColor
:
facility
.
isOpen
?
green
[
500
]
:
red
[
500
]}}
/
>
...
...
@@ -186,22 +193,17 @@ const FacilityStatus = ({classes, facility}) => {
};
const
styleSheet
=
{
chip
:
{
margin
:
'
auto
'
,
height
:
'
24px
'
,
borderRadius
:
'
5px
'
,
position
:
'
absolute
'
,
left
:
'
8px
'
,
bottom
:
'
4px
'
,
opacity
:
.
9
,
height
:
'
28px
'
},
isOpenText
:
{
borderRight
:
'
1px solid white
'
,
paddingRight
:
'
5px
'
,
color
:
'
white
'
,
fontFamily
:
'
Nunito
'
,
display
:
'
inline
'
},
timeText
:
{
paddingLeft
:
'
5px
'
,
color
:
'
white
'
,
fontFamily
:
'
Nunito
'
,
display
:
'
inline
'
fontWeight
:
'
bold
'
,
display
:
'
inline
'
,
}
};
...
...
src/components/FavoriteButton.js
View file @
e532b2ac
...
...
@@ -46,8 +46,9 @@ const styleSheet = {
top
:
'
0px
'
,
right
:
'
0px
'
,
color
:
yellow
[
600
],
height
:
'
20px
'
,
width
:
'
20px
'
,
height
:
'
26px
'
,
width
:
'
26px
'
,
padding
:
'
4px
'
,
cursor
:
'
pointer
'
,
}
};
...
...
src/containers/FacilityCard.js
View file @
e532b2ac
import
React
from
'
react
'
import
{
withStyles
}
from
'
material-ui/styles
'
;
import
Card
,
{
CardContent
}
from
'
material-ui/Card
'
;
import
Card
,
{
CardContent
,
CardHeader
,
CardMedia
}
from
'
material-ui/Card
'
;
import
Typography
from
'
material-ui/Typography
'
;
import
Grid
from
'
material-ui/Grid
'
;
import
Avatar
from
'
material-ui/Avatar
'
;
import
FavoriteButton
from
'
../components/FavoriteButton
'
;
import
FacilityStatus
from
'
../components/FacilityStatus
'
;
import
Chip
from
'
material-ui/Chip
'
import
{
compose
}
from
'
redux
'
import
{
connect
}
from
'
react-redux
'
import
{
addFavoriteFacility
,
removeFavoriteFacility
,
setSidebar
}
from
'
../actions/ui
'
import
FacilityStatus
from
'
../components/FacilityStatus
'
;
import
FavoriteButton
from
'
../components/FavoriteButton
'
;
import
RestaurantIcon
from
'
material-ui-icons/Restaurant
'
;
import
{
removeBrackets
}
from
'
../utils/nameUtils
'
;
import
{
...
...
@@ -108,32 +110,30 @@ const FacilityCard = ({classes, facility, favorites, addFavoriteFacility, remove
return
(
<
Card
onClick
=
{
handleClick
}
className
=
{
classes
.
root
}
raised
>
{
/*<CardMedia className={classes.media} image={require('../images/chipotleLogo.png')}/>*/
}
<
FavoriteButton
facility
=
{
facility
}
isFavorite
=
{
favorites
.
includes
(
facility
.
slug
)}
addFavoriteFacility
=
{
addFavoriteFacility
}
removeFavoriteFacility
=
{
removeFavoriteFacility
}
/
>
<
CardHeader
classes
=
{{
root
:
classes
.
header
,
avatar
:
classes
.
avatarContainer
,
title
:
classes
.
headerTitle
}}
avatar
=
{
<
Avatar
className
=
{
classes
.
avatar
}
>
<
RestaurantIcon
className
=
{
classes
.
icon
}
/
>
<
/Avatar>} title={'Dining'}/
>
<
div
className
=
{
classes
.
mediaContainer
}
>
<
CardMedia
className
=
{
classes
.
media
}
image
=
{
'
https://gmucampus.files.wordpress.com/2010/09/00sothside2.jpg
'
}
/
>
<
FacilityStatus
facility
=
{
facility
}
/
>
<
/div
>
<
CardContent
className
=
{
classes
.
cardContent
}
>
<
Grid
container
>
<
Grid
item
xs
=
{
4
}
className
=
{
classes
.
avatarContainer
}
>
<
Avatar
className
=
{
classes
.
avatar
}
style
=
{{
backgroundColor
:
materialColorFromSlug
(
facility
.
slug
)}}
>
{
getInitials
(
facility
.
facility_name
)}
<
/Avatar
>
<
Grid
container
direction
=
{
'
column
'
}
className
=
{
classes
.
smallGridContainerSpacing
}
>
<
Grid
item
className
=
{
classes
.
smallGridItemSpacing
}
>
<
Typography
type
=
{
'
title
'
}
className
=
{
classes
.
title
}
noWrap
>
{
removeBrackets
(
facility
.
facility_name
)}
<
/Typography
>
<
/Grid
>
<
Grid
item
xs
=
{
8
}
>
<
Grid
container
direction
=
{
'
column
'
}
>
<
Grid
item
className
=
{
classes
.
smallGridItemSpacing
}
>
<
Typography
type
=
{
'
title
'
}
align
=
{
'
center
'
}
className
=
{
classes
.
title
}
noWrap
>
{
removeBrackets
(
facility
.
facility_name
)}
<
/Typography
>
<
/Grid
>
<
Grid
item
className
=
{
classes
.
smallGridItemSpacing
}
>
<
FacilityStatus
facility
=
{
facility
}
/
>
<
/Grid
>
<
Grid
item
className
=
{
classes
.
smallGridItemSpacing
}
>
<
Typography
type
=
{
'
caption
'
}
align
=
{
'
center
'
}
className
=
{
classes
.
location
}
noWrap
>
{
removeBrackets
(
facility
.
facility_location
.
building
)}
<
/Typography
>
<
/Grid
>
<
/Grid
>
<
Grid
item
className
=
{
classes
.
smallGridItemSpacing
}
>
<
Typography
type
=
{
'
caption
'
}
className
=
{
classes
.
location
}
noWrap
>
{
removeBrackets
(
facility
.
facility_location
.
building
)}
<
/Typography
>
<
/Grid
>
<
/Grid
>
<
/CardContent
>
...
...
@@ -146,25 +146,41 @@ const styleSheet = {
borderRadius
:
'
5px
'
,
position
:
'
relative
'
},
header
:
{
padding
:
'
4px
'
},
headerTitle
:
{
fontFamily
:
'
Nunito
'
},
cardContent
:
{
paddingBottom
:
'
16px !important
'
padding
:
'
8px 4px 16px 4px !important
'
},
smallGridContainerSpacing
:
{
margin
:
'
-2px -8px !important
'
},
smallGridItemSpacing
:
{
padding
:
'
2px !important
'
padding
:
'
2px
8px
!important
'
},
/**
media: {
media
:
{
flex
:
1
,
width: 200,
height: 100,
resizeMode: 'cover',
},**/
margin
:
'
0 4px
'
,
height
:
'
100px
'
,
},
mediaContainer
:
{
position
:
'
relative
'
},
avatarContainer
:
{
display
:
'
fle
x
'
,
marginRight
:
'
8p
x
'
},
avatar
:
{
margin
:
'
auto
'
,
width
:
'
50px
'
,
height
:
'
50px
'
width
:
'
auto !important
'
,
height
:
'
auto !important
'
,
backgroundColor
:
red
[
500
],
},
icon
:
{
width
:
'
18px !important
'
,
height
:
'
18px !important
'
,
padding
:
'
4px !important
'
},
title
:
{
//TODO: Should the fonts be added here or in the muitheme (index.js)?
fontFamily
:
'
Nunito
'
,
...
...
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