feat: worksheet footer

brainchild-projects · Aug 9, 2021 · ac0fb34 · ac0fb34
1 parent 1ecf24b
commit ac0fb34
Show file tree

Hide file tree

Showing 3 changed files with 127 additions and 43 deletions.
diff --git a/src/components/WorksheetFooter.tsx b/src/components/WorksheetFooter.tsx
@@ -0,0 +1,69 @@
+import { makeStyles } from '@material-ui/core';
+import React from 'react';
+import { usePaperOptions } from './PaperOptionsProvider';
+
+const footerStyles = makeStyles(() => ({
+  footer: {
+    display: 'flex',
+    padding: '10mm 5mm 5mm 0',
+    width: '60%',
+    position: 'absolute',
+    bottom: 0,
+    right: 0,
+  },
+  footerName: {
+    flexGrow: 1,
+    display: 'flex',
+    paddingRight: '2em',
+  },
+  label: {
+    flexGrow: 0,
+    fontWeight: 'normal',
+    paddingRight: '0.3em',
+  },
+  footerDate: {
+    flexGrow: 1,
+    display: 'flex',
+  },
+  footerBlank: {
+    flexGrow: 1,
+    borderBottom: '1px solid black',
+  },
+}));
+
+interface WorksheetFooterProps {
+  itemCount: number;
+}
+
+const WorksheetFooter = ({ itemCount }: WorksheetFooterProps): JSX.Element => {
+  const { options } = usePaperOptions();
+  const classes = footerStyles();
+  return (
+    <>
+      <section
+        className={classes.footer}
+        style={{
+          bottom: options.margin,
+          right: options.margin,
+        }}
+      >
+        <div className={classes.footerName}>
+          <strong className={classes.label}>Score:</strong>
+          <span className={classes.footerBlank} />
+          <span>
+            out of
+            {' '}
+            { itemCount }
+          </span>
+        </div>
+        <div className={classes.footerDate}>
+          <strong className={classes.label}>Time:</strong>
+          <span className={classes.footerBlank} />
+          <span>minutes</span>
+        </div>
+      </section>
+    </>
+  );
+};
+
+export default WorksheetFooter;
diff --git a/src/components/WorksheetHeader.tsx b/src/components/WorksheetHeader.tsx
@@ -0,0 +1,54 @@
+import { makeStyles } from '@material-ui/core';
+import React from 'react';
+
+const headerStyles = makeStyles(() => ({
+  header: {
+    display: 'flex',
+  },
+  headerName: {
+    flexGrow: 4,
+    display: 'flex',
+    paddingRight: '2em',
+  },
+  label: {
+    flexGrow: 0,
+    fontWeight: 'normal',
+    paddingRight: '0.3em',
+  },
+  headerDate: {
+    flexGrow: 2,
+    display: 'flex',
+  },
+  headerBlank: {
+    flexGrow: 1,
+    borderBottom: '1px solid black',
+  },
+  instructions: {
+    marginBottom: 0,
+    marginTop: '10mm',
+    fontSize: '16px',
+  },
+}));
+
+const WorksheetHeader = (): JSX.Element => {
+  const classes = headerStyles();
+  return (
+    <>
+      <section className={classes.header}>
+        <div className={classes.headerName}>
+          <strong className={classes.label}>Name:</strong>
+          <span className={classes.headerBlank} />
+        </div>
+        <div className={classes.headerDate}>
+          <strong className={classes.label}>Date:</strong>
+          <span className={classes.headerBlank} />
+        </div>
+      </section>
+      <p className={classes.instructions}>
+        Complete the addition facts by filling in the blanks.
+      </p>
+    </>
+  );
+};
+
+export default WorksheetHeader;
diff --git a/src/pages/additionFillTheBlanks/PreviewAftb.tsx b/src/pages/additionFillTheBlanks/PreviewAftb.tsx
@@ -5,6 +5,8 @@ import NumberGenerator from '../../lib/NumberGenerator';
 import RandomNumberGenerator from '../../lib/RandomNumberGenerator';
 import AdditionSentence, { generateAdditionSentences } from './AdditionSentence';
 import AftbData from './AftbData';
+import WorksheetHeader from '../../components/WorksheetHeader';
+import WorksheetFooter from '../../components/WorksheetFooter';
 
 interface PreviewAftbProps {
   aftbData: AftbData;
@@ -14,32 +16,6 @@ interface PreviewAftbProps {
 const defaultGenerator = new RandomNumberGenerator(Math.random);
 
 const pageStyles = makeStyles(() => ({
-  header: {
-    display: 'flex',
-  },
-  headerName: {
-    flexGrow: 4,
-    display: 'flex',
-    paddingRight: '2em',
-  },
-  label: {
-    flexGrow: 0,
-    fontWeight: 'normal',
-    paddingRight: '0.3em',
-  },
-  headerDate: {
-    flexGrow: 2,
-    display: 'flex',
-  },
-  headerBlank: {
-    flexGrow: 1,
-    borderBottom: '1px solid black',
-  },
-  instructions: {
-    marginBottom: 0,
-    marginTop: '10mm',
-    fontSize: '16px',
-  },
   heading: {
     textAlign: 'center',
   },
@@ -80,23 +56,8 @@ const PreviewAftb = ({
   return (
     <>
       <MultiPaperPage
-        header={(
-          <>
-            <section className={classes.header}>
-              <div className={classes.headerName}>
-                <strong className={classes.label}>Name:</strong>
-                <span className={classes.headerBlank} />
-              </div>
-              <div className={classes.headerDate}>
-                <strong className={classes.label}>Date:</strong>
-                <span className={classes.headerBlank} />
-              </div>
-            </section>
-            <p className={classes.instructions}>
-              Complete the addition facts by filling in the blanks.
-            </p>
-          </>
-        )}
+        header={(<WorksheetHeader />)}
+        footer={(<WorksheetFooter itemCount={data.length} />)}
         contentWrapper="ol"
         contentWrapperClassName={`${classes.list} problems`}
         data={data}