edited categories and added translations

2025-05-25 15:18:08 +02:00
parent 419554748f
commit 893ee1873a
5 changed files with 101 additions and 48 deletions
--- a/01-frontend/public/locales/de/translation.json
+++ b/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."
 }
--- a/01-frontend/public/locales/en/translation.json
+++ b/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."
 }
--- a/01-frontend/src/helper/homepage/FilterItem.tsx
+++ b/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) {
-        value = filterItems[0];
+    if (!value && filterItems.length > 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" ? (
-                                    <Rating readOnly value={Number(item)} precision={1} size="small" />
+                                /^[1-5]$/.test(item.value) ? (
+                                    <Rating readOnly value={Number(item.value)} precision={1} size="small" />
                                ) : (
-                                    item
+                                    item.label
                                )
                            }
                        />
--- a/01-frontend/src/pages/Category.tsx
+++ b/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";
+
+export default function Category() {
+
+    const { t } = useTranslation();
+    const navigate = useNavigate();

    const categories = [
        {
-        name: "Seeds",
+            name: t('seeds'),
            icon: <SpaIcon sx={{ fontSize: 48, color: "#388e3c" }} />,
-        filter: "Seeds"
+            filter: "Seeds",
        },
        {
-        name: "Fertilizers",
+            name: t('gardenSupplies'),
            icon: <ScienceIcon sx={{ fontSize: 48, color: "#fbc02d" }} />,
-        filter: "Fertilizers"
+            filter: "GardenSupplies"
        },
        {
-        name: "Technical Components",
+            name: t('technicalComponents'),
            icon: <PrecisionManufacturingIcon sx={{ fontSize: 48, color: "#1976d2" }} />,
            filter: "TechnicalComponents"
        },
        {
-        name: "Sonstiges",
+            name: t('other'),
            icon: <CategoryIcon sx={{ fontSize: 48, color: "#757575" }} />,
            filter: "Other"
        }
    ];

-export default function Category() {
-    const navigate = useNavigate();
-
    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>
-                Kategorien entdecken
+            <Typography variant="h3" align="center" gutterBottom>
+                {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) => (
--- a/01-frontend/src/pages/Home.tsx
+++ b/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[] = [
-        "Seeds",
-        "Fertilizers",
-        "Technical Components"
+    const categoriesFilter = [
+        { value: "", label: t("all") },
+        { value: "Seeds", label: t("seeds") },
+        { value: "GardenSupplies", label: t("gardenSupplies") },
+        { value: "TechnicalComponents", label: t("technicalComponents") },
+        { value: "Other", label: t("other") }
    ];
-    const priceFilter: string[] = [
-        "< 10",
-        "< 20",
-        "> 20"
+
+    const priceFilter = [
+        { value: "", label: t("all") },
+        { 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 filterName="Rating" filterItems={ratingFilter} />
+                <FilterItem
+                    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">