Merge pull request #910 from hackforla/908-earned-points-progress-con…

…trol Add progress bar, shopping cart to sidebar
hackforla · Aug 25, 2021 · 9dc5842 · 9dc5842
2 parents b9b4dc8 + 745b24f
commit 9dc5842
Show file tree

Hide file tree

Showing 8 changed files with 409 additions and 47 deletions.
diff --git a/client/src/components/ProjectWizard/RuleStrategy/RuleStrategy.js b/client/src/components/ProjectWizard/RuleStrategy/RuleStrategy.js
@@ -149,9 +149,11 @@ const RuleStrategy = ({
             : null}
         </div>
         <div className={classes.points}>
-          {`${calcValue ? Math.round(calcValue * 100) / 100 : ""} ${
-            calculationUnits || ""
-          }`}
+          {`${
+            calcValue
+              ? Math.round(calcValue * 100) / 100 + " " + calculationUnits || ""
+              : ""
+          } `}
         </div>
       </React.Fragment>
     );

diff --git a/client/src/components/ProjectWizard/TdmCalculationWizard.js b/client/src/components/ProjectWizard/TdmCalculationWizard.js
@@ -159,6 +159,7 @@ const TdmCalculationWizard = props => {
             rules={rules}
             onViewChange={onViewChange}
             resultRules={resultRules}
+            strategyRules={strategyRules}
           />
         )}
         contentContainerRef={contentContainerRef}

diff --git a/client/src/components/ProjectWizard/WizardSidebar/EarnedPointsProgress.js b/client/src/components/ProjectWizard/WizardSidebar/EarnedPointsProgress.js
@@ -0,0 +1,217 @@
+import React, { useRef } from "react";
+import PropTypes from "prop-types";
+import { createUseStyles, useTheme } from "react-jss";
+import ToolTipIcon from "../../ToolTip/ToolTipIcon";
+import clsx from "clsx";
+
+/* 
+See https://css-tricks.com/building-progress-ring-quickly/
+
+for explanation of operation
+*/
+
+const DIAL_RADIUS = 95;
+const STROKE_WIDTH = 15;
+
+const useStyles = createUseStyles({
+  rotate: {
+    transform: "rotate(75deg)"
+  },
+  progress: {
+    transition: "stroke-dashoffset 18s"
+  },
+  tooltip: {
+    color: "rgb(30, 36, 63) !important",
+    padding: "15px",
+    minWidth: "200px",
+    maxWidth: "400px",
+    fontFamily: "Arial",
+    fontSize: 12,
+    lineHeight: "16px",
+    fontWeight: "bold",
+    boxShadow: "0px 0px 8px rgba(0, 46, 109, 0.2)",
+    borderRadius: 2,
+    "&.show": {
+      visibility: "visible !important",
+      opacity: "1 !important"
+    }
+  },
+  lowOpacity: {
+    opacity: 0.4
+  },
+  noDisplay: {
+    display: "none !important"
+  }
+});
+
+const EarnedPointsProgress = props => {
+  const theme = useTheme();
+  const classes = useStyles({ theme });
+  const controlRef = useRef(null);
+
+  const { rulesConfig } = props;
+  const radius = DIAL_RADIUS;
+  const stroke = STROKE_WIDTH;
+
+  const target = rulesConfig.targetPointsRule.value || 0;
+  const earned = rulesConfig.earnedPointsRule.value || 0;
+
+  const normalizedRadius = radius - stroke * 2;
+  const circumference = normalizedRadius * 2 * Math.PI;
+  const strokeDashoffset = Math.max(
+    0,
+    circumference - (earned / target) * 0.85 * circumference
+  );
+
+  return (
+    <div
+      ref={controlRef}
+      className={
+        target > 0
+          ? "tdm-calculation-progress"
+          : clsx("tdm-calculation-progress", classes.lowOpacity)
+      }
+      style={{
+        display: "grid",
+        gridTemplateColumns: "1fr",
+        gridTemplateRows: "1fr",
+        justifyContent: "center"
+      }}
+    >
+      <div
+        style={{
+          gridColumn: 1,
+          gridRow: 1,
+          zIndex: 4,
+          fontFamily: "Oswald",
+          fontSize: "48px",
+          fontWeight: "700",
+          color: "black",
+          justifySelf: "center",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          letter: "1%"
+        }}
+      >
+        <div>{earned}</div>
+        <div
+          style={{
+            fontSize: "16px",
+            fontWeight: "700",
+            lineHeight: "24px"
+          }}
+        >
+          EARNED
+        </div>
+      </div>
+      <div
+        style={{
+          gridColumn: 1,
+          gridRow: 1,
+          zIndex: 4,
+          fontFamily: "Oswald",
+          fontSize: "22px",
+          fontWeight: "700",
+          color: theme.colorDefault,
+          justifySelf: "center",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          marginLeft: "99px",
+          marginTop: "90px"
+        }}
+      >
+        <div>{target}</div>
+        <div
+          style={{
+            fontSize: "14px"
+          }}
+        >
+          TARGET
+        </div>
+      </div>
+      <div
+        data-tip={
+          "<p>" +
+          rulesConfig.earnedPointsRule.description +
+          "</p><p>" +
+          rulesConfig.targetPointsRule.description +
+          "</p>"
+        }
+        data-iscapture="true"
+        data-html="true"
+        data-class={
+          target > 0
+            ? classes.tooltip
+            : clsx(classes.tooltip, classes.noDisplay)
+        }
+        style={{
+          gridRow: 1,
+          gridColumn: 1,
+          zIndex: 10,
+          marginLeft: 170,
+          marginTop: 45
+        }}
+      >
+        <ToolTipIcon />
+      </div>
+      <svg
+        className={classes.rotate}
+        style={{
+          width: radius * 2,
+          height: radius * 2,
+          gridColumn: "1",
+          gridRow: "1",
+          overflow: "visible"
+        }}
+      >
+        <circle
+          stroke="#CFCFCF"
+          fill={theme.colorDefault}
+          strokeWidth={stroke}
+          r={normalizedRadius}
+          cx={radius}
+          cy={radius}
+        />
+        <circle
+          stroke={
+            earned / target >= 1
+              ? theme.colorPrimary
+              : earned / target >= 0.01
+              ? theme.colorEarnedPoints
+              : theme.colorDisabled
+          }
+          fill="transparent"
+          strokeWidth={stroke}
+          strokeDasharray={circumference + " " + circumference}
+          strokeLinecap="round"
+          style={{
+            strokeDashoffset
+          }}
+          r={normalizedRadius}
+          cx={radius}
+          cy={radius}
+        />
+        <circle
+          stroke={theme.colorPrimary}
+          fill={theme.colorPrimary}
+          r="28"
+          cx="154"
+          cy="61"
+          style={{
+            gridColumn: 1,
+            gridRow: 1,
+            zIndex: -1
+          }}
+        />
+      </svg>
+    </div>
+  );
+};
+
+EarnedPointsProgress.propTypes = {
+  rulesConfig: PropTypes.object
+};
+
+export default EarnedPointsProgress;
diff --git a/client/src/components/ProjectWizard/WizardSidebar/SidebarCart.js b/client/src/components/ProjectWizard/WizardSidebar/SidebarCart.js
@@ -0,0 +1,98 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { createUseStyles } from "react-jss";
+
+const useStyles = createUseStyles({
+  noDisplay: {
+    display: "none !important"
+  }
+});
+
+const SidebarCart = props => {
+  const { strategyRules } = props;
+  const classes = useStyles();
+  return (
+    <div width="100%">
+      <div
+        style={{
+          flexBasis: "100%",
+          width: "100%",
+          display: "flex",
+          flexDirection: "column"
+        }}
+      >
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            borderBottom: "2px solid black"
+          }}
+        >
+          <div style={{ fontSize: "16pt", weight: "bold", textAlign: "left" }}>
+            TDM MEASURES SELECTED
+          </div>
+          <div
+            style={{
+              fontSize: "12pt",
+              weight: "500",
+              textAlign: "right",
+              marginBottom: "2px"
+            }}
+          >
+            EARNED POINTS
+          </div>
+        </div>
+        <hr />
+
+        {strategyRules
+          .filter(r => r.calcValue > 0)
+          .map(rule => (
+            <div
+              key={rule.code}
+              style={{
+                display: "flex",
+                justifyContent: "space-between"
+              }}
+            >
+              <div
+                style={{
+                  fontSize: "16px",
+                  fontFamily: "Calibri",
+                  lineHeight: "18px",
+                  marginTop: "5px"
+                }}
+                classes={strategyRules ? "" : classes.noDisplay}
+              >
+                {rule.name}
+              </div>
+              <div style={{ textAlign: "right" }}>
+                <span
+                  style={{
+                    fontSize: "18px",
+                    fontFamily: "Oswald"
+                  }}
+                >
+                  {Math.round(rule.calcValue * 100) / 100}
+                </span>
+                <span
+                  style={{
+                    fontSize: "14px",
+                    fontFamily: "Calibri",
+                    marginBottom: "10px"
+                  }}
+                >
+                  &nbsp;pts
+                </span>
+              </div>
+            </div>
+          ))}
+      </div>
+    </div>
+  );
+};
+
+SidebarCart.propTypes = {
+  strategyRules: PropTypes.array
+};
+
+export default SidebarCart;