Merge branch 'master' of https://github.com/SRN-SE-Fall24/CookSmart

SRN-SE-Fall24 · Oct 31, 2024 · c9c9310 · c9c9310
2 parents 7b5230d + 1f9ae49
commit c9c9310
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 8 deletions.
diff --git a/Code/frontend/package.json b/Code/frontend/package.json
@@ -3,9 +3,6 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@chakra-ui/react": "^2.10.3",
-    "@emotion/react": "^11.13.3",
-    "@emotion/styled": "^11.13.0",
     "@chakra-ui/react": "^2.10.3",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
@@ -16,8 +13,7 @@
     "bootstrap": "^5.1.1",
     "firebase": "^11.0.1",
     "framer-motion": "^11.11.10",
-    "firebase": "^11.0.1",
-    "framer-motion": "^11.11.10",
+    "jspdf": "^2.5.2",
     "react": "^18.2.0",
     "react-bootstrap-validation": "^0.1.11",
     "react-dom": "^18.2.0",

diff --git a/Code/frontend/src/components/Navbar.js b/Code/frontend/src/components/Navbar.js
@@ -45,7 +45,7 @@ export default function Nav(props) {
   const { isOpen, onOpen, onClose } = useDisclosure()
 
   return (
-    <Box color={"black"} mb={5} px={4}>
+    <Box bg="#D3D3D3" color={"black"} mb={5} px={4}>
       <Flex h={16} alignItems={"center"} justifyContent={"space-between"}>
         <Box pl={5}>
           <div style={{ display: 'flex', alignItems: 'center', columnGap: 10 }}>

diff --git a/Code/frontend/src/components/SearchBlock.js b/Code/frontend/src/components/SearchBlock.js
@@ -5,6 +5,7 @@ import RecipeImage from "./RecipeImage";
 import { LuClock4 } from "react-icons/lu";
 import './css/misc.css';
 import Tag from "./Tag";
+import jsPDF from 'jspdf';
 import { Oval } from "react-loader-spinner";
 
 
@@ -82,10 +83,32 @@ const SearchBlock = (props) => {
             ingredients: items[index].ingredients,
         };
         const response = await axios.post('https://get-detailed-recipe-3rhjd2q7dq-uc.a.run.app', data);
-        console.log(response.data);
+        const allIngredients = response.data.ingredients.split('\n').map(ingredient => ingredient.trim());
+        response.data.ingredients = allIngredients;
         setDetailedItem(response.data);
     }
 
+    const generatePDF = () => {
+        const recipeName = detailedItem.name;
+        const ingredients = String(detailedItem.ingredients).split(',').map(ingredient => ingredient.trim());
+        const doc = new jsPDF();
+        doc.setFontSize(16);
+        doc.text("Shopping List", 20, 20);
+
+        doc.setFontSize(14);
+        doc.text(`Recipe: ${recipeName}`, 20, 40);
+
+        doc.setFontSize(12);
+        let yOffset = 50;
+        console.log("inside generating pdf:"+ ingredients);
+        ingredients.forEach((ingredient, index) => {
+            doc.text(`${index + 1}. ${ingredient}`, 20, yOffset);
+            yOffset += 10;
+        });
+
+        doc.save(`${recipeName}-shopping-list.pdf`);
+    };
+
     return (
         <div style={{ width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
             <SearchBar onChange={onChange} onIngredientAdded={onIngredientAdded} />
@@ -145,6 +168,7 @@ const SearchBlock = (props) => {
                             <div>{detailedItem.name}</div>
                             <div>{detailedItem.time}</div>
                         </div>
+
                         <div style={{ display: 'flex', marginTop: 5 }}>
                             {detailedItem.tags.map((tag, index) => {
                                 return <Tag key={index}>{tag}</Tag>;
@@ -159,12 +183,25 @@ const SearchBlock = (props) => {
                         <div style={{ marginTop: 30 }}>Steps</div>
                         <div style={{ display: 'flex', flexDirection: 'column', rowGap: 20, marginTop: 10 }}>
                             {detailedItem.process.map((step, index) => {
-                                return <div key={index} style={{ width: '95%', display: 'flex', background: '#eee', borderRadius: 10, overflow: 'hidden' }}>
+                                return <div key={index} style={{ display: 'flex', background: '#eee', borderRadius: 10, overflow: 'hidden' }}>
                                     <div style={{ display: 'flex', alignItems: 'center', padding: 20, background: '#ddd' }}>{index + 1}</div>
                                     <div style={{ padding: 10, display: 'flex', alignItems: 'center' }}>{step.replace(/[0-9]*\./, '')}</div>
                                 </div>;
                             })}
                         </div>
+                        {detailedItem && (
+                            <div style={{ display: 'flex', flexDirection: 'column', boxShadow: '0 2px 5px rgba(0, 0, 0, 0.1)', margin: '20px', padding: '20px', alignItems: 'center', }}>
+                                <p>Need a quick shopping list of ingredients? Here's a PDF you can download!</p>
+                                <button
+                                    onClick={() => generatePDF(detailedItem.name, detailedItem.ingredients)}
+                                    style={{ padding: '10px 20px', fontSize: '16px', backgroundColor: '#A9A9A9', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer', transition: 'background-color 0.3s', marginTop: '10px' }}
+                                    onMouseOver={(e) => e.currentTarget.style.backgroundColor = '#808080'}
+                                    onMouseOut={(e) => e.currentTarget.style.backgroundColor = '#A9A9A9'}
+                                >
+                                    Download Shopping List
+                                </button>
+                            </div>
+                        )}
                         <div style={{ height: 100 }}></div>
                     </div>
                     ))