diff --git a/01-frontend/public/locales/de/translation.json b/01-frontend/public/locales/de/translation.json index f338b34..d5a4edf 100644 --- 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." } diff --git a/01-frontend/public/locales/en/translation.json b/01-frontend/public/locales/en/translation.json index a30203e..45d5c57 100644 --- 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." } diff --git a/01-frontend/src/helper/homepage/FilterItem.tsx b/01-frontend/src/helper/homepage/FilterItem.tsx index b940ea4..f5f1c06 100644 --- 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) => { - value = (event.target.value); + if (onChange) { + onChange(event.target.value); + } }; return ( @@ -30,13 +37,13 @@ export default function FilterItem({ {filterItems.map((item, idx) => ( } label={ - filterName === "Rating" ? ( - + /^[1-5]$/.test(item.value) ? ( + ) : ( - item + item.label ) } /> diff --git a/01-frontend/src/pages/Category.tsx b/01-frontend/src/pages/Category.tsx index 1bd40b7..01ff1ae 100644 --- 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"; - -const categories = [ - { - name: "Seeds", - icon: , - filter: "Seeds" - }, - { - name: "Fertilizers", - icon: , - filter: "Fertilizers" - }, - { - name: "Technical Components", - icon: , - filter: "Technical Components" - }, - { - name: "Sonstiges", - icon: , - filter: "Other" - } -]; +import {useTranslation} from "react-i18next"; export default function Category() { + + const { t } = useTranslation(); const navigate = useNavigate(); + const categories = [ + { + name: t('seeds'), + icon: , + filter: "Seeds", + }, + { + name: t('gardenSupplies'), + icon: , + filter: "GardenSupplies" + }, + { + name: t('technicalComponents'), + icon: , + filter: "TechnicalComponents" + }, + { + name: t('other'), + icon: , + 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 ( - - Kategorien entdecken + + {t('categories')} - Wähle eine Kategorie, um passende Produkte zu entdecken. + ... {categories.map((cat) => ( diff --git a/01-frontend/src/pages/Home.tsx b/01-frontend/src/pages/Home.tsx index 7eda3e6..ed7b566 100644 --- 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([]); // Zustand für die sichtbaren Items const [selectedCategory, setSelectedCategory] = useState(null); + const [selectedPrice, setSelectedPrice] = useState(null); + const [selectedRating, setSelectedRating] = useState(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, page: number) => { setCurrentPage(page); @@ -197,13 +214,23 @@ export default function Home() {
- - + +