add sloper table of contents

samepant · Mar 14, 2024 · b28a3ea · b28a3ea
1 parent 3614431
commit b28a3ea
Show file tree

Hide file tree

Showing 2 changed files with 157 additions and 9 deletions.
diff --git a/src/components/sloper/index.tsx b/src/components/sloper/index.tsx
@@ -68,12 +68,14 @@ const Sloper: React.FC = () => {
         <div className={classes.header}>
           <h3>Sloper</h3>
         </div>
-        <div className={classes.content}>
-          {!sloper && (
+        {!sloper && (
+          <div className={classes.content}>
             <SloperIntro setSloper={setSloper} storedSlopers={storedSlopers} />
-          )}
-          {sloper && (
-            <>
+          </div>
+        )}
+        {sloper && (
+          <div className={classes.activeLayout}>
+            <div className={classes.content}>
               <img
                 src={`/references/${steps[currentStep].measurement.referenceImage}`}
               />
@@ -130,9 +132,103 @@ const Sloper: React.FC = () => {
                   </div>
                 </div>
               </div>
-            </>
-          )}
-        </div>
+            </div>
+
+            <div className={classes.measurementTable}>
+              <h4>Upper Body</h4>
+              <ul>
+                {Object.keys(sloper.measurements)
+                  .filter((name) => {
+                    const measurement =
+                      sloper.measurements[name as keyof Measurements];
+                    return (
+                      measurement.category === MeasurementCategory.UpperBody
+                    );
+                  })
+                  .map((name) => (
+                    <li
+                      key={name}
+                      className={clsx(
+                        classes.tableItem,
+                        steps[currentStep].name === name &&
+                          classes.activeTableItem,
+                        sloper.measurements[name as keyof Measurements].value &&
+                          classes.complete
+                      )}
+                      onClick={() => {
+                        setCurrentStep(
+                          steps.findIndex((step) => step.name === name)
+                        );
+                        inputRef.current?.focus();
+                      }}
+                    >
+                      <span>{formatCamelCaseWithSpaces(name)}</span>
+                    </li>
+                  ))}
+              </ul>
+              <h4>Arm</h4>
+              <ul>
+                {Object.keys(sloper.measurements)
+                  .filter((name) => {
+                    const measurement =
+                      sloper.measurements[name as keyof Measurements];
+                    return measurement.category === MeasurementCategory.Arm;
+                  })
+                  .map((name) => (
+                    <li
+                      key={name}
+                      className={clsx(
+                        classes.tableItem,
+                        steps[currentStep].name === name &&
+                          classes.activeTableItem,
+                        sloper.measurements[name as keyof Measurements].value &&
+                          classes.complete
+                      )}
+                      onClick={() => {
+                        setCurrentStep(
+                          steps.findIndex((step) => step.name === name)
+                        );
+                        inputRef.current?.focus();
+                      }}
+                    >
+                      <span>{formatCamelCaseWithSpaces(name)}</span>
+                    </li>
+                  ))}
+              </ul>
+              <h4>Lower Body</h4>
+              <ul>
+                {Object.keys(sloper.measurements)
+                  .filter((name) => {
+                    const measurement =
+                      sloper.measurements[name as keyof Measurements];
+                    return (
+                      measurement.category === MeasurementCategory.LowerBody
+                    );
+                  })
+                  .map((name) => (
+                    <li
+                      key={name}
+                      className={clsx(
+                        classes.tableItem,
+                        steps[currentStep].name === name &&
+                          classes.activeTableItem,
+                        sloper.measurements[name as keyof Measurements].value &&
+                          classes.complete
+                      )}
+                      onClick={() => {
+                        setCurrentStep(
+                          steps.findIndex((step) => step.name === name)
+                        );
+                        inputRef.current?.focus();
+                      }}
+                    >
+                      <span>{formatCamelCaseWithSpaces(name)}</span>
+                    </li>
+                  ))}
+              </ul>
+            </div>
+          </div>
+        )}
         {sloper && (
           <div className={classes.footer}>
             <div className={classes.labeledInput}>

diff --git a/src/components/sloper/sloper.module.css b/src/components/sloper/sloper.module.css
@@ -15,7 +15,7 @@
   border: 1px solid rgba(255, 255, 255, 0.2);
 
   box-sizing: border-box;
-  max-width: 600px;
+  max-width: 700px;
   max-height: 400px;
   height: 100%;
   width: 100%;
@@ -123,3 +123,55 @@
   gap: 7px;
   overflow: scroll;
 }
+
+.activeLayout {
+  display: flex;
+  overflow: hidden;
+}
+
+.activeLayout .content {
+  width: 80%;
+}
+
+.measurementTable {
+  width: 20%;
+  overflow-y: scroll;
+  border-left: 1px solid rgba(255, 255, 255, 0.2);
+  padding: 6px 0;
+  font-size: 10px;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.measurementTable h4 {
+  padding: 0 4px 2px 4px;
+  margin-bottom: 4px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.measurementTable h4:not(:first-child) {
+  margin-top: 10px;
+}
+
+.tableItem {
+  cursor: pointer;
+  padding: 0 0 0 15px;
+  position: relative;
+  overflow-x: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.tableItem:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.tableItem.activeTableItem {
+  background: rgba(255, 255, 255, 0.1);
+}
+.tableItem.complete::before {
+  content: "✓";
+  color: green;
+  position: absolute;
+  left: 2px;
+  top: 0;
+}