Skip to content
This repository has been archived by the owner on May 7, 2021. It is now read-only.

Commit

Permalink
Add workout day banner (minor)
Browse files Browse the repository at this point in the history
  • Loading branch information
Jorge Cuadra committed Sep 2, 2018
1 parent 73bbf4c commit 3886f4c
Showing 1 changed file with 103 additions and 89 deletions.
192 changes: 103 additions & 89 deletions src/plan/Plan.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,101 +27,115 @@ function Plan({
}) {
const macros = isWorkoutDay ? macrosWorkout : macrosRest;
return (
<Grid>
<GridCell span="6" mobile="12">
<Card outlined>
<div className="flex justify-between px-4 py-6 items-center">
<Typography use="headline5">
{numeral(tracker.calories).format('0,0')} /{' '}
{numeral(macros.calories).format('0,0')} cal
</Typography>
<Button onClick={() => handleTracker({ action: 'reset' })}>
Reset
</Button>
</div>
<ListDivider />
<div>
{isWorkoutDay && (
<div className="banner text-center">
<Typography use="subtitle1" theme="onSecondary">
Workout Day
</Typography>
</div>
)}
<Grid>
<GridCell span="6" mobile="12">
<Card outlined>
<div className="flex justify-between px-4 py-6 items-center">
<Typography use="headline5">
{numeral(tracker.calories).format('0,0')} /{' '}
{numeral(macros.calories).format('0,0')} cal
</Typography>
<Button onClick={() => handleTracker({ action: 'reset' })}>
Reset
</Button>
</div>
<ListDivider />

<MacrosRings
calories={{ total: tracker.calories, target: macros.calories }}
carbs={{ total: tracker.carbs, target: macros.carbs }}
fat={{ total: tracker.fat, target: macros.fat }}
protein={{ total: tracker.protein, target: macros.protein }}
/>
<MacrosRings
calories={{ total: tracker.calories, target: macros.calories }}
carbs={{ total: tracker.carbs, target: macros.carbs }}
fat={{ total: tracker.fat, target: macros.fat }}
protein={{ total: tracker.protein, target: macros.protein }}
/>

<Macro
increment={10}
name="carbs"
target={macros.carbs}
total={tracker.carbs}
onAction={handleTracker}
/>
<Macro
increment={5}
name="protein"
target={macros.protein}
total={tracker.protein}
onAction={handleTracker}
/>
<Macro
increment={5}
name="fat"
target={macros.fat}
total={tracker.fat}
onAction={handleTracker}
/>
</Card>
</GridCell>
<GridCell span="6" mobile="12">
<Card outlined>
<div className="flex justify-between p-4 items-center">
<Typography use="headline5">
{menu.length > 0 && `${menu.length} servings`}
</Typography>
<Fab
onClick={handleMenuGenerate}
icon="autorenew"
label="combine"
<Macro
increment={10}
name="carbs"
target={macros.carbs}
total={tracker.carbs}
onAction={handleTracker}
/>
<Macro
increment={5}
name="protein"
target={macros.protein}
total={tracker.protein}
onAction={handleTracker}
/>
</div>
<Macro
increment={5}
name="fat"
target={macros.fat}
total={tracker.fat}
onAction={handleTracker}
/>
</Card>
</GridCell>
<GridCell span="6" mobile="12">
<Card outlined>
<div className="flex justify-between p-4 items-center">
<Typography use="headline5">
{menu.length > 0 && `${menu.length} servings`}
</Typography>
<Fab
onClick={handleMenuGenerate}
icon="autorenew"
label="combine"
/>
</div>

<ListDivider />
<ListDivider />

{recipes.size < RECIPES_MINIMUM && (
<Typography
use="headline5"
theme="text-secondary-on-background"
className="px-4 my-2"
>
Need {RECIPES_MINIMUM - recipes.size} more recipes to be able to
calculate. <Link href="/recipes">Add more recipes</Link>
</Typography>
)}
<List twoLine dense>
{!menu.length && (
<div className="text-center">
<Typography
use="headline6"
tag="div"
className="flex justify-center p-4"
>
Randomly generate a menu plan for the day
</Typography>
<Button onClick={handleMenuGenerate}>Generate</Button>
</div>
)}
{menu.map(
({ _key, name, Calories, Protein, Carbs, Fat }, index) => (
<SimpleListItem
key={_key + index}
text={name}
secondaryText={`${Calories}cal | Protein ${Protein}g | Carbs ${Carbs}g | Fat ${Fat}g | 1 serving`}
/>
),
{recipes.size < RECIPES_MINIMUM && (
<Typography
use="headline5"
theme="text-secondary-on-background"
className="px-4 my-2"
>
Need {RECIPES_MINIMUM - recipes.size} more recipes to be able to
calculate. <Link href="/recipes">Add more recipes</Link>
</Typography>
)}
</List>
</Card>
</GridCell>
</Grid>
<List twoLine dense>
{!menu.length && (
<div className="text-center">
<Typography
use="headline6"
tag="div"
className="flex justify-center p-4"
>
Randomly generate a menu plan for the day
</Typography>
<Button onClick={handleMenuGenerate}>Generate</Button>
</div>
)}
{menu.map(
({ _key, name, Calories, Protein, Carbs, Fat }, index) => (
<SimpleListItem
key={_key + index}
text={name}
secondaryText={`${Calories}cal | Protein ${Protein}g | Carbs ${Carbs}g | Fat ${Fat}g | 1 serving`}
/>
),
)}
</List>
</Card>
</GridCell>
</Grid>
<style jsx>{`
.banner {
background-color: var(--mdc-theme-secondary);
}
`}</style>
</div>
);
}

Expand Down

0 comments on commit 3886f4c

Please sign in to comment.