feat(): add bootstrap

ijash · Sep 22, 2022 · 29fd7e9 · 29fd7e9
1 parent 45b5a37
commit 29fd7e9
Show file tree

Hide file tree

Showing 15 changed files with 497 additions and 65 deletions.
diff --git a/.gitignore b/.gitignore
@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.package-lock.json
diff --git a/package.json b/package.json
@@ -10,9 +10,11 @@
     "@types/node": "^16.11.59",
     "@types/react": "^18.0.20",
     "@types/react-dom": "^18.0.6",
+    "bootstrap": "^5.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
+    "sass": "^1.55.0",
     "typescript": "^4.8.3",
     "web-vitals": "^2.1.4"
   },

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,50 +1,188 @@
-import React from 'react';
-import './App.css';
-import {As568Data} from './data/values';
+import React, { useState, useEffect } from "react";
+import "./App.css";
+import { As568Data } from "./data/values";
+import { TableComponent } from "./components/table";
+import { MeasurementUnit, IDataFilter } from "./data/IData";
+
 function App() {
-  const as568 = As568Data
+  const as568 = As568Data;
+  const [filterTerm, setFilterTerm] = useState<IDataFilter>({});
+  useEffect(() => {
+    console.log(filterTerm);
+  }, [filterTerm]);
   return (
-    <div className="App">
-      <h1>O-Ring Size Finder</h1>
-      <h2>AS568 Standard</h2>
-      <table>
-        <thead>
-          {as568.headers.map(h=>{
-            return <th>{h}</th>
-          })}
-        </thead>
+    <div className="App container">
+      <h1 className="h1">O-Ring Size Finder</h1>
+
+      <div className="input-group-sm mb-1">
+        <div className="container row">
+          <div className="col">
+            <label className="form-label" htmlFor="measurementUnit">
+              Unit
+            </label>
+            <select
+              className="form-select"
+              name="Unit"
+              id="measurementUnit"
+              onChange={(event) => {
+                setFilterTerm({
+                  ...filterTerm,
+                  unit: event.target.value as MeasurementUnit,
+                });
+              }}
+            >
+              <option value={MeasurementUnit.MM}>Metric (mm)</option>
+              <option value={MeasurementUnit.INCH}>Imperial (Inch)</option>
+            </select>
+          </div>
+          <div className="col">
+            <label className="form-label" htmlFor="ringCode">
+              Ring Code
+            </label>
+            <input
+              className="form-control"
+              type="text"
+              name="Ring Code"
+              placeholder="Code"
+              id="ringCode"
+              onChange={(event) => {
+                setFilterTerm({ ...filterTerm, code: event.target.value });
+              }}
+            />
+          </div>
+        </div>
+
+        <div className="container row">
+          <div className="col">
+            <label className="form-label" htmlFor="IDMin">
+              Min ID
+            </label>
+            <input
+              className="form-control"
+              type="number"
+              step="0.01"
+              min="0"
+              name="Min ID "
+              placeholder="Min ID"
+              id="IDMin"
+              onChange={(event) => {
+                setFilterTerm({
+                  ...filterTerm,
+                  minId: parseFloat(event.target.value) || 0,
+                });
+              }}
+            />{" "}
+          </div>
+          <div className="col">
+            <label className="form-label" htmlFor="IDMax">
+              Max ID
+            </label>
+            <input
+              className="form-control"
+              type="number"
+              step="0.01"
+              min="0"
+              name="Max ID "
+              placeholder="Max ID"
+              id="IDMax"
+              onChange={(event) => {
+                setFilterTerm({
+                  ...filterTerm,
+                  maxId: parseFloat(event.target.value) || 0,
+                });
+              }}
+            />{" "}
+          </div>
+        </div>
+
+        <div className="container row">
+          <div className="col">
+            <label className="form-label" htmlFor="CSMin">
+              Min CS
+            </label>
+            <input
+              className="form-control"
+              type="number"
+              step="0.01"
+              min="0"
+              name="Min CS "
+              placeholder="Min CS"
+              id="CSMin"
+              onChange={(event) => {
+                setFilterTerm({
+                  ...filterTerm,
+                  minCs: parseFloat(event.target.value) || 0,
+                });
+              }}
+            />{" "}
+          </div>
+          <div className="col">
+            <label className="form-label" htmlFor="CSMax">
+              Max CS{" "}
+            </label>
+            <input
+              className="form-control"
+              type="number"
+              step="0.01"
+              min="0"
+              name="Max CS "
+              placeholder="Max CS"
+              id="CSMax"
+              onChange={(event) => {
+                setFilterTerm({
+                  ...filterTerm,
+                  maxCs: parseFloat(event.target.value) || 0,
+                });
+              }}
+            />{" "}
+          </div>
+        </div>
 
-        <tbody>
-          {as568.getValues().map((row,i)=>{
-            let rowColor = 'white'
-            if (i%2===0) rowColor= `lightgrey`
-            return <tr  style={{'background':rowColor}}>
-              <td style={{color:'darkBlue'}}>
-                {row.code}
-              </td>
-              <td>
-                {row.mmId}
-              </td>
-              <td>
-                {row.mmOd}
-              </td>
-              <td>
-                {row.mmCs}
-              </td>
-              <td>
-                {row.inchId}
-              </td>
-              <td>
-                {row.inchId}
-              </td>
-              <td>
-                {row.inchOd}
-              </td>
-            </tr>
-          })
-          }
-        </tbody>
-      </table>
+        <div className="container row">
+          <div className="col">
+            <label className="form-label" htmlFor="ODMin">
+              Min OD
+            </label>
+            <input
+              className="form-control"
+              type="number"
+              step="0.01"
+              min="0"
+              name="Min OD "
+              placeholder="Min OD"
+              id="ODMin"
+              onChange={(event) => {
+                setFilterTerm({
+                  ...filterTerm,
+                  minOd: parseFloat(event.target.value) || 0,
+                });
+              }}
+            />{" "}
+          </div>
+          <div className="col">
+            <label className="form-label" htmlFor="ODMax">
+              Max OD
+            </label>
+            <input
+              className="form-control"
+              type="number"
+              step="0.01"
+              min="0"
+              name="Max OD "
+              placeholder="Max OD"
+              id="ODMax"
+              onChange={(event) => {
+                setFilterTerm({
+                  ...filterTerm,
+                  maxOd: parseFloat(event.target.value) || 0,
+                });
+              }}
+            />{" "}
+          </div>
+        </div>
+      </div>
+      <h2 className="h2">AS568 Standard</h2>
+      {TableComponent(as568, filterTerm)}
     </div>
   );
 }

diff --git a/src/components/table.tsx b/src/components/table.tsx
@@ -0,0 +1,62 @@
+import { IData, IDataFilter, MeasurementUnit, Standard } from "../data/IData";
+
+export function TableComponent(data: IData, filter?: IDataFilter) {
+  return (
+    <table className="sizeTable table">
+      <thead>
+        {data.headers.map((h) => {
+          return <th>{h}</th>;
+        })}
+      </thead>
+
+      <tbody>
+        {data
+          .getValues()
+          .filter((row) => {
+            if (filter) {
+              const unitMm = filter.unit === MeasurementUnit.MM;
+              if (unitMm) {
+                if (filter.minCs && row.mmCs < filter.minCs) return false;
+                if (filter.maxCs && row.mmCs > filter.maxCs) return false;
+                if (filter.minId && row.mmId < filter.minId) return false;
+                if (filter.maxId && row.mmId > filter.maxId) return false;
+                if (filter.minOd && row.mmOd < filter.minOd) return false;
+                if (filter.maxOd && row.mmOd > filter.maxOd) return false;
+              } else {
+                if (filter.minCs && row.inchCs < filter.minCs) return false;
+                if (filter.maxCs && row.inchCs > filter.maxCs) return false;
+                if (filter.minId && row.inchId < filter.minId) return false;
+                if (filter.maxId && row.inchId > filter.maxId) return false;
+                if (filter.minOd && row.inchOd < filter.minOd) return false;
+                if (filter.maxOd && row.inchOd > filter.maxOd) return false;
+              }
+              if (filter.code && !row.code.includes(filter.code)) return false;
+              if (
+                filter.standard &&
+                !filter.standard.includes(row.standard as Standard)
+              )
+                return false;
+              return true;
+            } else return true;
+          })
+          .map((row, i) => {
+            let rowColor = "table-secondary";
+            if (i % 2 === 0) rowColor = ``;
+
+            const result = (
+              <tr className={rowColor}>
+                <td>{row.code}</td>
+                <td>{row.mmId}</td>
+                <td>{row.mmOd}</td>
+                <td>{row.mmCs}</td>
+                <td>{row.inchId}</td>
+                <td>{row.inchOd}</td>
+                <td>{row.inchCs}</td>
+              </tr>
+            );
+            return result;
+          })}
+      </tbody>
+    </table>
+  );
+}
diff --git a/src/css/_borders.scss b/src/css/_borders.scss
@@ -0,0 +1,5 @@
+// Customize border Radius
+$border-radius-sm: 0.3rem;
+$border-radius: 0.4rem;
+$border-radius-lg: 0.8rem;
+$border-radius-pill: 50rem;
diff --git a/src/css/_breadcrumb.scss b/src/css/_breadcrumb.scss
@@ -0,0 +1,12 @@
+.breadcrumb-item {
+    + .breadcrumb-item {
+        &::before {
+            font-family: "FontAwesome";
+            font-weight: 700;
+            content: "\f054" !important;
+        }
+    }
+}
+
+$breadcrumb-active-color: $black;
+$breadcrumb-divider-color: $gray-600;
diff --git a/src/css/_cards.scss b/src/css/_cards.scss
@@ -0,0 +1 @@
+$card-height: 100%;