diff --git a/app/filter-window/page.tsx b/app/filter-window/page.tsx new file mode 100644 index 0000000..362b2f0 --- /dev/null +++ b/app/filter-window/page.tsx @@ -0,0 +1,60 @@ +"use client"; +// AllergiesPage.tsx +// AllergiesPage.tsx +import React, { useState, useEffect } from "react"; + +const AllergiesPage: React.FC<{ updateCheckedAllergies: (allergies: { [key: string]: boolean }) => void }> = ({ updateCheckedAllergies }) => { + const [allergies, setAllergies] = useState([ + "Egg", + "Fish", + "Gluten Friendly", + "Milk", + "Peanut", + "Soy", + "Tree Nut", + "Alcohol", + "Vegan", + "Vegetarian", + "Pork", + "Beef", + "Halal", + "Shellfish", + "Sesame", + ]); + + const [checkedAllergies, setCheckedAllergies] = useState<{ [key: string]: boolean }>(() => { + const savedAllergies = localStorage.getItem("checkedAllergies"); + return savedAllergies ? JSON.parse(savedAllergies) : {}; + }); + + useEffect(() => { + localStorage.setItem("checkedAllergies", JSON.stringify(checkedAllergies)); + updateCheckedAllergies(checkedAllergies); // Update parent state + }, [checkedAllergies]); + + const handleCheckboxChange = (allergy: string) => { + setCheckedAllergies(prevState => ({ ...prevState, [allergy]: !prevState[allergy] })); + }; + + return ( +
+

Allergies

+ +
+ ); +}; + +export default AllergiesPage; diff --git a/app/global_search/page.tsx b/app/global_search/page.tsx index 01563b2..718cef4 100644 --- a/app/global_search/page.tsx +++ b/app/global_search/page.tsx @@ -1,11 +1,38 @@ "use client"; +// BarebonesComponent.tsx import React, { useState, useEffect } from "react"; import axios from "axios"; +import AllergiesPage from "../filter-window/page"; + interface Food { name: string; + allergies?: { [key: string]: string }; } +const allergyImages: { [key: string]: string } = { + + + alchohol: "app/images/alcohol.JPEG", + beef: "app/images/beef.JPEG", + eggs: "app/images/egg.JPEG", + fish: "app/images/fish.JPEG", + gluten: "app/images/gluten_friendly.JPEG", + halal: "app/images/halal.JPEG", + milk: "app/images/milk.JPEG", + nuts: "app/images/peanut.JPEG", + pork: "app/images/pork.JPEG", + sesame: "app/images/sesame.JPEG", + shellfish: "app/images/shellfish.JPEG", + soy: "app/images/soy.JPEG", + treenut: "app/images/tree_nut.JPEG", + vegan: "app/images/vegan.JPEG", + veggie: "app/images/vegetarian.JPEG", + + + // Add more allergy-image mappings as needed +}; + interface subCategory { name: string; foods: Array; @@ -29,6 +56,7 @@ const BarebonesComponent = () => { >([]); const [showSearchResults, setShowSearchResults] = useState(false); const [noFoodsFound, setNoFoodsFound] = useState(false); + const [checkedAllergies, setCheckedAllergies] = useState<{ [key: string]: boolean }>({}); useEffect(() => { axios @@ -48,6 +76,10 @@ const BarebonesComponent = () => { setSearchInput(event.target.value); }; + // const openFilterWindow = () => { + // window.open("filter-window", "Allergies Filter", "width=400,height=400"); + // }; + const handleSearch = () => { const allFoods: { food: Food; dhName: string; categoryName: string }[] = []; dhs.forEach((dh) => { @@ -63,26 +95,40 @@ const BarebonesComponent = () => { }); }); }); - - const filtered = allFoods.filter(({ food }) => - food.name.toLowerCase().includes(searchInput.toLowerCase()), - ); - + + const filtered = allFoods.filter(({ food }) => { + console.log("Food Allergies:", food.allergies); + // console.log("Checked Allergies:", checkedAllergies); + + const hasSearchInput = food.name.toLowerCase().includes(searchInput.toLowerCase()); + const hasAllergies = !food.allergies || !(Object.keys(checkedAllergies).some(allergy => { + const hasAllergy = Object.keys(food.allergies).includes(allergy) && checkedAllergies[allergy]; + // console.log("Allergy:", allergy); + // console.log("Has Allergy:", hasAllergy); + return hasAllergy; + })); + + return hasSearchInput && hasAllergies; + }); + + setNoFoodsFound(filtered.length === 0); setFilteredFoods(filtered); setShowSearchResults(true); }; + + return (
{/* Title */}

Welcome to Hungry Slugs!

+ Milk + {/* Search bar */}
- {" "} - {/* Adjust margin as needed */} { />
+ {/* Filter button */} +
+ {/* */} +
+ {/* Allergies page */} + {/* Display search results if button clicked */} {showSearchResults && (

Search Results:

    - {filteredFoods.map(({ food, dhName, categoryName }, index) => ( -
  • - {food.name} - {categoryName} ({dhName}) -
    • - ))} + {filteredFoods.map(({ food, dhName, categoryName }, index) => ( +
  • + + {food.name} - {categoryName} ({dhName}) + + {/* Iterate over the keys of the food.allergies object */} + {Object.keys(food.allergies).map((allergy, index) => ( + // Check if the allergy is present in checkedAllergies and has a value of true + checkedAllergies[allergy] && ( + // Render an image for each allergy + {allergy} + ) + ))} +
    • +))} +
)} diff --git a/app/global_search/styles.css b/app/global_search/styles.css new file mode 100644 index 0000000..1fddec0 --- /dev/null +++ b/app/global_search/styles.css @@ -0,0 +1,32 @@ +.main-container { + display: flex; + flex-direction: column; + align-items: center; + } + + .search-bar { + display: flex; + margin-top: 20px; + } + + .filter-box { + cursor: pointer; + margin-top: 10px; + border: 1px solid #000; + padding: 10px; + } + + .filter-window { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: #fff; + border: 1px solid #000; + padding: 20px; + } + + .filter-content { + text-align: center; + } + \ No newline at end of file diff --git a/app/test_image/alcohol.PNG b/app/test_image/alcohol.PNG new file mode 100644 index 0000000..d02ae29 Binary files /dev/null and b/app/test_image/alcohol.PNG differ diff --git a/app/test_image/beef.JPEG b/app/test_image/beef.JPEG new file mode 100644 index 0000000..ebc9754 Binary files /dev/null and b/app/test_image/beef.JPEG differ diff --git a/app/test_image/egg.JPEG b/app/test_image/egg.JPEG new file mode 100644 index 0000000..d7bfea0 Binary files /dev/null and b/app/test_image/egg.JPEG differ diff --git a/app/test_image/fish.JPEG b/app/test_image/fish.JPEG new file mode 100644 index 0000000..4cf613b Binary files /dev/null and b/app/test_image/fish.JPEG differ diff --git a/app/test_image/gluten_friendly.JPEG b/app/test_image/gluten_friendly.JPEG new file mode 100644 index 0000000..3f85dde Binary files /dev/null and b/app/test_image/gluten_friendly.JPEG differ diff --git a/app/test_image/halal.JPEG b/app/test_image/halal.JPEG new file mode 100644 index 0000000..ed345b5 Binary files /dev/null and b/app/test_image/halal.JPEG differ diff --git a/app/test_image/milk.GIF b/app/test_image/milk.GIF new file mode 100644 index 0000000..539188c Binary files /dev/null and b/app/test_image/milk.GIF differ diff --git a/app/test_image/milk.webp b/app/test_image/milk.webp new file mode 100644 index 0000000..d30958a Binary files /dev/null and b/app/test_image/milk.webp differ diff --git a/app/test_image/peanut.JPEG b/app/test_image/peanut.JPEG new file mode 100644 index 0000000..4449bca Binary files /dev/null and b/app/test_image/peanut.JPEG differ diff --git a/app/test_image/pork.JPEG b/app/test_image/pork.JPEG new file mode 100644 index 0000000..cd49df8 Binary files /dev/null and b/app/test_image/pork.JPEG differ diff --git a/app/test_image/sesame.JPEG b/app/test_image/sesame.JPEG new file mode 100644 index 0000000..5361c4d Binary files /dev/null and b/app/test_image/sesame.JPEG differ diff --git a/app/test_image/shellfish.JPEG b/app/test_image/shellfish.JPEG new file mode 100644 index 0000000..a8f8832 Binary files /dev/null and b/app/test_image/shellfish.JPEG differ diff --git a/app/test_image/soy.JPEG b/app/test_image/soy.JPEG new file mode 100644 index 0000000..d76db2d Binary files /dev/null and b/app/test_image/soy.JPEG differ diff --git a/app/test_image/tree_nut.JPEG b/app/test_image/tree_nut.JPEG new file mode 100644 index 0000000..3ec8ee1 Binary files /dev/null and b/app/test_image/tree_nut.JPEG differ diff --git a/app/test_image/vegan.JPEG b/app/test_image/vegan.JPEG new file mode 100644 index 0000000..8569db3 Binary files /dev/null and b/app/test_image/vegan.JPEG differ diff --git a/app/test_image/vegetarian.JPEG b/app/test_image/vegetarian.JPEG new file mode 100644 index 0000000..e421283 Binary files /dev/null and b/app/test_image/vegetarian.JPEG differ diff --git a/backend/webscraper/food.py b/backend/webscraper/food.py index c46c69a..ea0e9c0 100644 --- a/backend/webscraper/food.py +++ b/backend/webscraper/food.py @@ -27,4 +27,4 @@ def __str__(self) -> str: def to_dict(self) -> dict: # foodObj = {self.name: self.allergies} - return {"name": self.name, self.name: self.allergies} + return {"name": self.name, "allergies": self.allergies}