Merge pull request #44 from GenerateNU/hifis-manual-bend-input

Hifis manual bend input
GenerateNU · Mar 28, 2024 · 5fc6d64 · 5fc6d64
2 parents 31d7b53 + 5decd2b
commit 5fc6d64
Show file tree

Hide file tree

Showing 11 changed files with 209 additions and 49 deletions.
diff --git a/frontend/src/components/BendSidebar.tsx b/frontend/src/components/BendSidebar.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+interface BendSidebarProps {
+  currentBendIndex: number;
+  bendCount: number;
+  onSelectBend: (index: number) => void;
+  onAddBend: () => void;
+}
+const BendSidebar: React.FC<BendSidebarProps> = ({
+  currentBendIndex,
+  bendCount,
+  onSelectBend,
+  onAddBend,
+}) => {
+  return (
+    <div className="sidebar flex flex-col font-semibold"> {/* Increased base font size for all child components */}
+      <ul className="list-none p-0">
+        {[...Array(bendCount)].map((_, index) => (
+          <li
+            key={index}
+            className={`mb-2 last:mb-0 ${index === currentBendIndex ? 'text-brand-blue-dark' : 'text-brand-light-grey'}
+                        text-center rounded-2xl py-3 px-2 cursor-pointer`} // Increased padding (py-3)
+            style={{ backgroundColor: index === currentBendIndex ? '#DBE4EF' : 'transparent' }}
+            onClick={() => onSelectBend(index)}
+          >
+            {`Bend ${index + 1}`}
+          </li>
+        ))}
+      </ul>
+      <button
+        className="mt-auto py-3 px-2 bg-transparent text-brand-blue-dark rounded-2xl cursor-pointer hover:bg-brand-temp-teal hover:text-brand-white" // Increased padding (py-3) and reaffirmed text size
+        onClick={onAddBend}
+      >
+        Add Bend
+      </button>
+    </div>
+  );
+};
+export default BendSidebar;
diff --git a/frontend/src/components/Button.tsx b/frontend/src/components/Button.tsx
@@ -1,10 +1,10 @@
 import React from "react";
 
-function Button(props: { label: string, handleClick: () => void, disabled?: boolean, alt?: boolean }) {
-    const colors = props.alt ? ' disabled:bg-error-red text-brand-blue hover:bg-brand-white' : 'bg-brand-blue disabled:bg-error-red text-brand-white hover:bg-brand-blue-light'
+function Button(props: { label: string, handleClick: () => void, disabled?: boolean, alt?: boolean, customColors?:string }) {
+    const colors = props.customColors || (props.alt ? ' disabled:bg-error-red text-brand-blue hover:bg-brand-white' : 'bg-brand-blue disabled:bg-error-red text-brand-white hover:bg-brand-blue-light')
     return (
         <button disabled={props.disabled} onClick={props.handleClick} className={` ${colors} w-52 h-12 flex justify-center items-center rounded-xl`}><h3 className="text-center font-semibold text-sm">{props.label}</h3></button>
     );
 }
 
-export default Button;
+export default Button;
diff --git a/frontend/src/components/FileUploader.tsx b/frontend/src/components/FileUploader.tsx
@@ -32,7 +32,9 @@ const FileUploader: React.FC = () => {
 
   return (
     <div>
-      <Button label='Upload CAD File' handleClick={handleOpenFileDialog} />
+      <Button label='Upload CAD File'
+       handleClick={handleOpenFileDialog}
+       customColors='bg-brand-temp-teal text-brand-white hover:bg-opacity-75' />
     </div>
   );
 };

diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx
@@ -1,14 +1,15 @@
 import React from 'react';
-import GrayBoxImage from '../images/box';
 import { Link } from 'react-router-dom';
+import LogoSVG from '../images/LogoSVG';
+import Wordmark from '../images/Wordmark';
 
 const Navbar = () => {
   return (
     <div className="w-full fixed top-0 left-0 bg-off-white p-4 flex justify-between items-center" style={{ paddingLeft: '20px', paddingRight: '20px' }}>
     <div style={{ display: 'flex', alignItems: 'center', marginLeft: '40px', marginTop: '20px' }}>
-      <GrayBoxImage/>
-      <Link to="/create" style={{ fontSize: '14px', textDecoration: 'none', marginLeft: '10px', color: 'inherit' }}>
-        tubender
+      <LogoSVG></LogoSVG>
+      <Link to="/create" className='font-gothic text-brand-blue-dark text-sm' style={{textDecoration: 'none', marginLeft: '10px'}}>
+        <Wordmark></Wordmark>
       </Link>
     </div>
   </div>

diff --git a/frontend/src/enums.tsx b/frontend/src/enums.tsx
@@ -10,8 +10,10 @@ export enum MeasurementUnit {
   }  
 
 export enum BendFields {
+  straightTubeBefore = 'straightTubeBefore',
+  direction = 'direction',
   radius = 'radius',
   arcLength = 'arcLength',
   extrusion = 'extrusion',
-  straightTube = 'straightTube',
-}
+  straightTubeAfter = 'straightTubeAfter',
+}
diff --git a/frontend/src/images/LogoSVG.tsx b/frontend/src/images/LogoSVG.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+const LogoSVG = () => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.8256 2.3102C10.1119 2.3161 9.88329 0.329392 7.57944 0.00575389C7.22409 -0.0438549 6.90665 0.233718 6.90665 0.59161V10.5854H12.8291V2.3102C12.8291 2.3102 12.8268 2.3102 12.8256 2.3102Z" fill="#2D3243"/>
+<path d="M8.7912 7.53955H18.2281C21.0235 7.53955 23.2906 9.79911 23.2906 12.5878V18.9496C23.2906 21.7371 21.0247 23.9978 18.2281 23.9978H12.1469V18.092H16.3057C16.892 18.092 17.367 17.6184 17.367 17.0337V14.506C17.367 13.9214 16.892 13.4477 16.3057 13.4477H8.8907" fill="#00ADB5"/>
+<path d="M12.7486 24H11.7074C9.01151 24 6.82611 21.8207 6.82611 19.1324V13.4463H12.7486V24Z" fill="#2D3243"/>
+<path d="M2.31673 7.54309C2.32265 10.2491 0.330323 10.4771 0.00577017 12.7745C-0.0439788 13.1288 0.234377 13.4454 0.59328 13.4454H10.6153V7.53955H2.31673C2.31673 7.53955 2.31673 7.54191 2.31673 7.54309Z" fill="#00ADB5"/>
+</svg>
+);
+
+export default LogoSVG;
diff --git a/frontend/src/images/Wordmark.tsx b/frontend/src/images/Wordmark.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+const Wordmark = () => (
+    <svg width="90" height="16" viewBox="0 0 90 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.23053 15.26C1.87053 15.26 0.270527 13.94 0.270527 11.26V1.62H2.17053V5.12H7.61053V6.86H2.17053V11.26C2.17053 12.82 2.99053 13.5 4.23053 13.5C5.47053 13.5 6.31053 12.84 6.31053 11.26V11.04H8.19053V11.26C8.19053 13.94 6.59053 15.26 4.23053 15.26ZM14.6427 15.26C11.7227 15.26 9.76271 13.58 9.76271 10.28V5.12H11.6627V10.28C11.6627 12.42 12.8427 13.5 14.6427 13.5C16.4427 13.5 17.6227 12.42 17.6227 10.28V5.12H19.5227V10.28C19.5227 13.56 17.5627 15.26 14.6427 15.26ZM26.7415 15.26C23.6815 15.26 21.4815 13.2 21.4815 9.98V0.799999H23.3815V6.86C24.1015 5.58 25.4615 4.86 27.0615 4.86C29.6415 4.86 32.0815 6.72 32.0815 10C32.0815 13.1 29.8815 15.26 26.7415 15.26ZM26.7615 13.5C28.8015 13.5 30.1615 12.06 30.1615 10.06C30.1615 8.06 28.8015 6.62 26.7615 6.62C24.7415 6.62 23.3815 8.06 23.3815 10.06C23.3815 12.06 24.7415 13.5 26.7615 13.5ZM38.5694 15.26C35.4494 15.26 33.2494 13.06 33.2494 10.06C33.2494 7.06 35.4494 4.86 38.5694 4.86C41.6894 4.86 43.8494 7.06 43.8494 10.06V10.76H35.2494C35.5294 12.52 36.8494 13.5 38.5694 13.5C39.8494 13.5 40.7494 13.1 41.3294 12.24H43.4294C42.6694 14.08 40.8694 15.26 38.5694 15.26ZM35.3094 9.06H41.8494C41.4694 7.48 40.1694 6.62 38.5694 6.62C36.9294 6.62 35.6894 7.5 35.3094 9.06ZM45.4072 15V9.86C45.4072 6.56 47.3672 4.86 50.2872 4.86C53.2072 4.86 55.1672 6.54 55.1672 9.86V15H53.2672V9.86C53.2672 7.72 52.0872 6.62 50.2872 6.62C48.4872 6.62 47.3072 7.72 47.3072 9.86V15H45.4072ZM62.066 15.26C58.926 15.26 56.726 13.1 56.726 10C56.726 6.72 59.166 4.86 61.746 4.86C63.346 4.86 64.706 5.58 65.426 6.86V0.799999H67.326V9.98C67.326 13.2 65.126 15.26 62.066 15.26ZM62.046 13.5C64.066 13.5 65.426 12.06 65.426 10.06C65.426 8.06 64.066 6.62 62.046 6.62C60.006 6.62 58.646 8.06 58.646 10.06C58.646 12.06 60.006 13.5 62.046 13.5ZM74.214 15.26C71.094 15.26 68.894 13.06 68.894 10.06C68.894 7.06 71.094 4.86 74.214 4.86C77.334 4.86 79.494 7.06 79.494 10.06V10.76H70.894C71.174 12.52 72.494 13.5 74.214 13.5C75.494 13.5 76.394 13.1 76.974 12.24H79.074C78.314 14.08 76.514 15.26 74.214 15.26ZM70.954 9.06H77.494C77.114 7.48 75.814 6.62 74.214 6.62C72.574 6.62 71.334 7.5 70.954 9.06ZM81.0518 15V9.18C81.0518 6.26 82.7718 4.86 85.3118 4.86C87.8318 4.86 89.5518 6.26 89.5518 9.2V9.3H87.6718V9.18C87.6718 7.36 86.7118 6.62 85.3118 6.62C83.8918 6.62 82.9518 7.36 82.9518 9.18V15H81.0518Z" fill="#353A4E"/>
+</svg>
+);
+
+export default Wordmark;
diff --git a/frontend/src/pages/CreateDesign.tsx b/frontend/src/pages/CreateDesign.tsx
@@ -3,18 +3,24 @@ import { Link } from "react-router-dom";
 import Button from "../components/Button";
 import FileUploader from "../components/FileUploader";
 import StepWrapper from "../components/StepWrapper";
+import Navbar from "../components/Navbar";
 
 function CreateDesign() {
     return (
+        <>
+        <Navbar/>
         <div className='w-full h-screen bg-off-white flex flex-col justify-center items-center gap-4'>
             <StepWrapper title="Welcome">
                 <Link to="/create/custom">
-                    <Button label='Create Custom Bend' handleClick={() => console.log('button')} />
+                    <Button label='Create Custom Bend'
+                     handleClick={() => console.log('button')}
+                     customColors='bg-brand-temp-teal text-brand-white hover:bg-opacity-75' />
                 </Link>
                     <FileUploader />
             </StepWrapper>
         </div>
+        </>
     );
 }
 
-export default CreateDesign;
+export default CreateDesign;