edited categories and added translations

01-frontend/public/locales/de/translation.json

@@ -5,10 +5,12 @@
   "addToCart": "In den Warenkorb",
   "addedToCart": "Produkt wurde erfolgreich dem Warenkorb hinzugefügt",
   "almostSoldOut": "Fast ausverkauft",
+  "all": "Alle",
   "available": "Stück verfügbar",
   "backToHome": "Zurück zur Startseite",
   "cancel": "Abbrechen",
   "categories": "Kategorien",
+  "category": "Kategorie",
   "checkout": "Zur Kasse",
   "close": "Schließen",
   "contact": "Kontakt",
@@ -17,22 +19,28 @@
   "edit": "Bearbeiten",
   "email": "E-Mail",
   "freeShipping": "Kostenloser Versand ab 50 € Bestellwert",
+  "gardenSupplies": "Gartenzubehör",
   "inStock": "Verfügbar",
   "logout": "Ausloggen",
   "myAccount": "Mein Konto",
   "name": "Name",
   "orders": "Bestellungen",
+  "other": "Sonstiges",
   "outOfStock": "Ausverkauft",
   "pageDoesNotExist": "Ups! Diese Seite existiert nicht.",
   "phone": "Telefon",
+  "price": "Preis",
   "productDoesNotExist": "Dieses Produkt existiert nicht oder wurde bereits gelöscht.",
   "productNotFound": "Produkt nicht gefunden!",
   "quantity": "Anzahl",
   "rateThisProduct": "Dieses Produkt bewerten",
+  "rating": "Bewertung",
   "ratingFrom": "Bewertung vom",
   "review": "Produktrezension (optional)",
   "save": "Speichern",
   "search": "Suchen",
+  "seeds": "Saatgut",
   "submit": "Senden",
+  "technicalComponents": "Technik",
   "wrongTurn": "Ein falscher Weg wurde eingeschlagen. Zurück auf den richtigen Pfad."
 }

01-frontend/public/locales/en/translation.json

@@ -5,10 +5,12 @@
   "addToCart": "Add to cart",
   "addedToCart": "Product added to shopping cart successfully",
   "almostSoldOut": "Almost sold out",
+  "all": "Show all",
   "available": "items available",
   "backToHome": "Go back to home",
   "cancel": "Cancel",
   "categories": "Categories",
+  "category": "Category",
   "checkout": "Checkout",
   "close": "Close",
   "contact": "Contact",
@@ -17,22 +19,28 @@
   "edit": "Edit",
   "email": "Email",
   "freeShipping": "Free shipping for orders over 50 €",
+  "gardenSupplies": "Garden supplies",
   "inStock": "In stock",
   "logout": "Logout",
   "myAccount": "My Account",
   "name": "Name",
   "orders": "Orders",
+  "other": "Other",
   "outOfStock": "Out of stock",
   "pageDoesNotExist": "Oops! The page you're looking for doesn't exist.",
   "phone": "Phone number",
+  "price": "Price",
   "productDoesNotExist": "It seems you are locking for a product that doesn't exist or has been removed.",
   "productNotFound": "Product not found!",
   "quantity": "Quantity",
   "rateThisProduct": "Rate this product",
+  "rating": "Rating",
   "ratingFrom": "Rating from",
   "review": "Product review (optional)",
   "save": "Save",
   "search": "Search",
+  "seeds": "Seeds",
   "submit": "Submit",
+  "technicalComponents": "Technical components",
   "wrongTurn": "It seems you may have taken a wrong turn. Let's get you back on track."
 }

01-frontend/src/helper/homepage/FilterItem.tsx

@@ -1,9 +1,14 @@
 import { FormControl, FormControlLabel, Radio, RadioGroup, Rating } from "@mui/material";
 import React from "react";
 
+type FilterItemOption = {
+    value: string;
+    label: string;
+};
+
 type FilterItemProps = {
     filterName: string;
-    filterItems: any[];
+    filterItems: FilterItemOption[];
     value?: string | null;
     onChange?: (value: string) => void;
 };
@@ -14,12 +19,14 @@ export default function FilterItem({
     value,
     onChange
 }: FilterItemProps) {
-    if(!value) {
+    if (!value && filterItems.length > 0) {
-        value = filterItems[0];
+        value = filterItems[0].value;
     }
 
     const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-        value = (event.target.value);
+        if (onChange) {
+            onChange(event.target.value);
+        }
     };
 
     return (
@@ -30,13 +37,13 @@ export default function FilterItem({
                     {filterItems.map((item, idx) => (
                         <FormControlLabel
                             key={idx}
-                            value={item}
+                            value={item.value}
                             control={<Radio />}
                             label={
-                                filterName === "Rating" ? (
+                                /^[1-5]$/.test(item.value) ? (
-                                    <Rating readOnly value={Number(item)} precision={1} size="small" />
+                                    <Rating readOnly value={Number(item.value)} precision={1} size="small" />
                                 ) : (
-                                    item
+                                    item.label
                                 )
                             }
                         />

01-frontend/src/pages/Category.tsx

@@ -5,33 +5,36 @@ import SpaIcon from "@mui/icons-material/Spa";
 import { Box, Card, CardActionArea, CardContent, Grid, Typography } from "@mui/material";
 import { useNavigate } from "react-router-dom";
 import "./pages.css";
-
+import {useTranslation} from "react-i18next";
-const categories = [
-    {
-        name: "Seeds",
-        icon: <SpaIcon sx={{ fontSize: 48, color: "#388e3c" }} />,
-        filter: "Seeds"
-    },
-    {
-        name: "Fertilizers",
-        icon: <ScienceIcon sx={{ fontSize: 48, color: "#fbc02d" }} />,
-        filter: "Fertilizers"
-    },
-    {
-        name: "Technical Components",
-        icon: <PrecisionManufacturingIcon sx={{ fontSize: 48, color: "#1976d2" }} />,
-        filter: "Technical Components"
-    },
-    {
-        name: "Sonstiges",
-        icon: <CategoryIcon sx={{ fontSize: 48, color: "#757575" }} />,
-        filter: "Other"
-    }
-];
 
 export default function Category() {
+
+    const { t } = useTranslation();
     const navigate = useNavigate();
 
+    const categories = [
+        {
+            name: t('seeds'),
+            icon: <SpaIcon sx={{ fontSize: 48, color: "#388e3c" }} />,
+            filter: "Seeds",
+        },
+        {
+            name: t('gardenSupplies'),
+            icon: <ScienceIcon sx={{ fontSize: 48, color: "#fbc02d" }} />,
+            filter: "GardenSupplies"
+        },
+        {
+            name: t('technicalComponents'),
+            icon: <PrecisionManufacturingIcon sx={{ fontSize: 48, color: "#1976d2" }} />,
+            filter: "TechnicalComponents"
+        },
+        {
+            name: t('other'),
+            icon: <CategoryIcon sx={{ fontSize: 48, color: "#757575" }} />,
+            filter: "Other"
+        }
+    ];
+
     const handleCategoryClick = (filter: string) => {
         // Navigiere zur Home-Seite und übergebe die gewählte Kategorie als Query-Parameter
         navigate(`/?category=${encodeURIComponent(filter)}`);
@@ -39,11 +42,11 @@ export default function Category() {
 
     return (
         <Box className="page-background" sx={{ minHeight: "100vh", pt: 4 }}>
-            <Typography variant="h4" align="center" gutterBottom>
+            <Typography variant="h3" align="center" gutterBottom>
-                Kategorien entdecken
+                {t('categories')}
             </Typography>
             <Typography variant="subtitle1" align="center" sx={{ mb: 4 }}>
-                Wähle eine Kategorie, um passende Produkte zu entdecken.
+                ...
             </Typography>
             <Grid container spacing={4} justifyContent="center">
                 {categories.map((cat) => (

01-frontend/src/pages/Home.tsx

@@ -5,8 +5,12 @@ import FilterItem from "../helper/homepage/FilterItem";
 import ItemCard from "../helper/homepage/ItemCard";
 import "./pages.css"; // Import der CSS-Datei
 import { useLocation } from "react-router-dom";
+import {useTranslation} from "react-i18next";
 
 export default function Home() {
+
+    const { t } = useTranslation();
+
     const items: Item[] = [
         {
             id: "1",
@@ -131,28 +135,42 @@ export default function Home() {
         // Weitere Items hinzufügen
     ];
 
-    const categoriesFilter: string[] = [
+    const categoriesFilter = [
-        "Seeds",
+        { value: "", label: t("all") },
-        "Fertilizers",
+        { value: "Seeds", label: t("seeds") },
-        "Technical Components"
+        { value: "GardenSupplies", label: t("gardenSupplies") },
+        { value: "TechnicalComponents", label: t("technicalComponents") },
+        { value: "Other", label: t("other") }
     ];
-    const priceFilter: string[] = [
+
-        "< 10",
+    const priceFilter = [
-        "< 20",
+        { value: "", label: t("all") },
-        "> 20"
+        { value: "< 10", label: "< 10" },
+        { value: "< 20", label: "< 20" },
+        { value: ">= 20", label: ">= 20" }
+    ];
+
+    const ratingFilter = [
+        { value: "", label: t("all") },
+        ...[5, 4, 3, 2, 1].map(value => ({
+            value: value.toString(),
+            label: value.toString()
+        }))
     ];
-    const ratingFilter: number[] = [1, 2, 3, 4, 5];
 
     const [currentPage, setCurrentPage] = useState(1); // Zustand für die aktuelle Seite
     const [itemsPerPage, setItemsPerPage] = useState(9); // Dynamische Anzahl der Items pro Seite
     const [visibleItems, setVisibleItems] = useState<Item[]>([]); // Zustand für die sichtbaren Items
     const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
+    const [selectedPrice, setSelectedPrice] = useState<string | null>(null);
+    const [selectedRating, setSelectedRating] = useState<string | null>(null);
 
     const location = useLocation();
+
     useEffect(() => {
         const params = new URLSearchParams(location.search);
         const category = params.get("category");
-        if (category && categoriesFilter.includes(category)) {
+        if (category && categoriesFilter.some(filter => filter.value === category)) {
             setSelectedCategory(category);
         }
     }, [location.search]);
@@ -163,7 +181,6 @@ export default function Home() {
         // navigate(`/?category=${encodeURIComponent(category)}`);
     };
 
-
     // Handler für die Pagination
     const handlePageChange = (event: React.ChangeEvent<unknown>, page: number) => {
         setCurrentPage(page);
@@ -197,13 +214,23 @@ export default function Home() {
         <div className="home-page-background">
             <div className="filter-container">
                 <FilterItem
-                    filterName="Category"
+                    filterName={t('category')}
                     filterItems={categoriesFilter}
                     value={selectedCategory}
                     onChange={handleCategoryChange}
                 />
-                <FilterItem filterName="Price" filterItems={priceFilter} />
+                <FilterItem
-                <FilterItem filterName="Rating" filterItems={ratingFilter} />
+                    filterName={t('price')}
+                    filterItems={priceFilter}
+                    value={selectedPrice}
+                    onChange={setSelectedPrice}
+                />
+                <FilterItem
+                    filterName={t('rating')}
+                    filterItems={ratingFilter}
+                    value={selectedRating}
+                    onChange={setSelectedRating}
+                />
             </div>
             <div className="page-background">
                 <Box className="cardgrid">