Add remove grams button (minor)

vasco3 · Sep 21, 2018 · d284bc7 · d284bc7
1 parent 5b14257
commit d284bc7
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 24 deletions.
diff --git a/src/plan/Macro.js b/src/plan/Macro.js
@@ -1,42 +1,79 @@
 import React, { Component } from 'react';
 import numeral from 'numeral';
 import upperFirst from 'lodash/upperFirst';
+import css from 'styled-jsx/css';
 
 import { Fab } from 'rmwc/Fab';
-import { Typography } from 'rmwc';
+import { Typography, ListDivider } from 'rmwc';
 
 import MacroRing from './MacroRing';
 
 function formatNumber(number) {
   return numeral(number).format('0');
 }
+
+const { className, styles } = css.resolve`span {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}`;
+
 class Macro extends Component {
   state = {};
   render() {
-    const { increment, onAction, name, target, total } = this.props;
-    const percent = numeral(total / target).format('0 %');
+    const { decrement, increment, onAction, name, target, total } = this.props;
+    const percent = numeral(total / target).format('0%');
     return (
-      <div className="macro pr-4">
-        <MacroRing name={name} total={total} target={target} />
-        <div>
-          <Typography use="subtitle1">{upperFirst(name)}</Typography>{' '}
-          <Typography use="caption">{percent}</Typography>
-          <Typography use="body1" tag="div">
-            {formatNumber(target - total)} for {formatNumber(target)} g
-          </Typography>
+      <div>
+        <Typography use="overline" className="pl-4">
+          {upperFirst(name)}
+        </Typography>{' '}
+        <Typography use="body1">
+          {formatNumber(target - total)} to {formatNumber(target)}g
+        </Typography>
+        <ListDivider />
+        <div className="macro">
+          <div className="chart">
+            <MacroRing name={name} total={total} target={target} />
+
+            <Typography className={className} use="caption">
+              {percent}
+            </Typography>
+          </div>
+
+          <div>
+            <Fab
+              className="mr-4"
+              onClick={function handleMacroActionRemove() {
+                onAction({ action: 'subtract', macro: name, value: decrement });
+              }}
+              label={`${decrement}`}
+              icon="remove"
+            />
+            <Fab
+              className="mr-4"
+              onClick={function handleMacroActionAdd() {
+                onAction({ action: 'add', macro: name, value: increment });
+              }}
+              label={`${increment}`}
+              icon="add"
+            />
+          </div>
         </div>
-        <Fab
-          onClick={function handleMacroAction() {
-            onAction({ action: 'add', macro: name, value: increment });
-          }}
-          label={`${increment}g`}
-          icon="add"
-        />
+        {styles}
         <style jsx>{`
+          .chart {
+            position: relative;
+          }
           .macro {
-            display: grid;
-            grid-template-columns: auto 1fr auto;
-            grid-column-gap: 1rem;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
           }
         `}</style>
       </div>

diff --git a/src/plan/MacroRing.js b/src/plan/MacroRing.js
@@ -30,7 +30,8 @@ function calculateData({ name, total, target }) {
   ];
 }
 
-const dimension = 16 * 4;
+const REM = 16;
+const dimension = REM * 4;
 class MacroRing extends Component {
   state = {};
   render() {

diff --git a/src/plan/Plan.js b/src/plan/Plan.js
@@ -62,8 +62,8 @@ class Plan extends React.Component {
               <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
+                    {numeral(macros.calories - tracker.calories).format('0,0')}{' '}
+                    to {numeral(macros.calories).format('0,0')} cal
                   </Typography>
                   <Button onClick={() => handleTracker({ action: 'reset' })}>
                     Reset
@@ -82,20 +82,23 @@ class Plan extends React.Component {
                 />
 
                 <Macro
+                  decrement={1}
                   increment={10}
                   name="carbs"
                   target={macros.carbs}
                   total={tracker.carbs}
                   onAction={handleTracker}
                 />
                 <Macro
+                  decrement={1}
                   increment={5}
                   name="protein"
                   target={macros.protein}
                   total={tracker.protein}
                   onAction={handleTracker}
                 />
                 <Macro
+                  decrement={1}
                   increment={5}
                   name="fat"
                   target={macros.fat}