Image displaying doesn't work yet, checkbox feature added that accura…

…tely marks which boxes are being checked, doesnt implement that within the filter though

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<string[]>([
+    "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 (
+    <div>
+      <h1>Allergies</h1>
+      <ul>
+        {allergies.map((allergy) => (
+          <li key={allergy}>
+            <label>
+              <input
+                type="checkbox"
+                checked={checkedAllergies[allergy] || false}
+                onChange={() => handleCheckboxChange(allergy)}
+              />
+              {allergy}
+            </label>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default AllergiesPage;

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<Food>;
@@ -29,6 +56,7 @@ const BarebonesComponent = () => {
   >([]);
   const [showSearchResults, setShowSearchResults] = useState<boolean>(false);
   const [noFoodsFound, setNoFoodsFound] = useState<boolean>(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 (
     <div
       style={{ display: "flex", flexDirection: "column", alignItems: "center" }}
     >
       {/* Title */}
       <h1 className="text-8xl">Welcome to Hungry Slugs!</h1>
+      <img src={'app/test_image/milk.webp'} alt="Milk" />
+
       {/* Search bar */}
       <div className="search-bar" style={{ marginTop: "20px" }}>
-        {" "}
-        {/* Adjust margin as needed */}
         <input
           type="text"
           placeholder="Search foods..."
@@ -91,16 +137,38 @@ const BarebonesComponent = () => {
         />
         <button onClick={handleSearch}>Search</button>
       </div>
+      {/* Filter button */}
+      <div>
+        {/* <button onClick={openFilterWindow}>Filter</button> */}
+      </div>
+      {/* Allergies page */}
+      <AllergiesPage updateCheckedAllergies={setCheckedAllergies} />
       {/* Display search results if button clicked */}
       {showSearchResults && (
         <div>
           <h3>Search Results:</h3>
           <ul>
-            {filteredFoods.map(({ food, dhName, categoryName }, index) => (
-              <li key={index}>
-                {food.name} - {categoryName} ({dhName})
-              </li>
-            ))}
+          {filteredFoods.map(({ food, dhName, categoryName }, index) => (
+  <li key={index}>
+    <span>
+      {food.name} - {categoryName} ({dhName})
+    </span>
+    {/* 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
+        <img 
+          key={allergy} 
+          src={allergyImages[allergy]} 
+          alt={allergy} 
+          style={{ marginLeft: '5px' }} // Adjust margin as needed
+        />
+      )
+    ))}
+  </li>
+))}
+
           </ul>
         </div>
       )}

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;
+  }
+

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}