Merge remote-tracking branch 'origin/main'

# Conflicts:
#	01-frontend/package-lock.json
#	01-frontend/package.json

01-frontend/package.json

@@ -13,8 +13,8 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@mui/icons-material": "^7.1.0",
+    "@mui/icons-material": "^7.0.2",
-    "@mui/material": "^7.1.0",
+    "@mui/material": "^7.0.2",
     "i18next": "^25.2.0",
     "i18next-browser-languagedetector": "^8.1.0",
     "i18next-http-backend": "^3.0.2",
@@ -22,8 +22,7 @@
     "react": "^19.0.0",
     "react-dom": "^19.1.0",
     "react-i18next": "^15.5.1",
-    "react-router-dom": "^7.5.3",
+    "react-router-dom": "^7.5.3"
-    "webshop": "^0.0.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.22.0",

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

@@ -0,0 +1,48 @@
+import { Slider, Typography, Box } from "@mui/material";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+type PriceSliderProps = {
+    min?: number;
+    max?: number;
+    onChange?: (range: [number, number]) => void;
+};
+
+export default function PriceSlider({ min = 0, max = 100, onChange }: PriceSliderProps) {
+
+    const { t } = useTranslation();
+    const [value, setValue] = useState<[number, number]>([min, max]);
+
+    const handleChange = (_: Event, newValue: number | number[]) => {
+        if (Array.isArray(newValue)) {
+            setValue([newValue[0], newValue[1]]);
+        }
+    };
+
+    const handleCommitted = (_: Event, newValue: number | number[]) => {
+        if (Array.isArray(newValue)) {
+            onChange?.([newValue[0], newValue[1]]);
+        }
+    };
+
+    return (
+        <div>
+            <h3>{t('price')}</h3>
+            <Box sx={{pl: 2, pr: 7}}>
+                <Slider
+                    value={value}
+                    onChange={handleChange}
+                    onChangeCommitted={handleCommitted}
+                    valueLabelDisplay="auto"
+                    min={min}
+                    max={max}
+                    step={1}
+                />
+            </Box>
+            <Box sx={{ pl: 1, pr: 6, display: 'flex', justifyContent: 'space-between' }}>
+                <Typography>{value[0]?.toFixed(2) ?? "0.00"} €</Typography>
+                <Typography>{value[1]?.toFixed(2) ?? "0.00"} €</Typography>
+            </Box>
+        </div>
+    );
+}

01-frontend/src/pages/Home.tsx

@@ -5,7 +5,8 @@ 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";
+import { useTranslation } from "react-i18next";
+import PriceSlider from "../helper/homepage/PriceSlider";
 
 export default function Home() {
 
@@ -18,7 +19,7 @@ export default function Home() {
             description: "Description 1",
             price: 10,
             stock: 100,
-            category: "Category 1",
+            category: "Seeds",
             rating: 4.5,
             discount: 10,
         },
@@ -28,7 +29,7 @@ export default function Home() {
             description: "Description 2",
             price: 20,
             stock: 9,
-            category: "Category 2",
+            category: "GardenSupplies",
             rating: 4.0,
             discount: 20,
         },
@@ -38,7 +39,7 @@ export default function Home() {
             description: "Description 3",
             price: 30,
             stock: 10,
-            category: "Category 3",
+            category: "TechnicalComponents",
             rating: 4.8,
             discount: 15,
         },
@@ -48,7 +49,7 @@ export default function Home() {
             description: "Description 3",
             price: 30,
             stock: 0,
-            category: "Category 3",
+            category: "TechnicalComponents",
             rating: 4.8,
             discount: 15,
         },
@@ -58,7 +59,7 @@ export default function Home() {
             description: "Description 3",
             price: 30,
             stock: 300,
-            category: "Category 3",
+            category: "TechnicalComponents",
             rating: 4.8,
             discount: 15,
         },
@@ -68,7 +69,7 @@ export default function Home() {
             description: "Description 3",
             price: 30,
             stock: 300,
-            category: "Category 3",
+            category: "TechnicalComponents",
             rating: 4.8,
             discount: 15,
         },
@@ -78,7 +79,7 @@ export default function Home() {
             description: "Description 3",
             price: 30,
             stock: 300,
-            category: "Category 3",
+            category: "TechnicalComponents",
             rating: 4.8,
             discount: 15,
         },
@@ -88,7 +89,7 @@ export default function Home() {
             description: "Description 3",
             price: 30,
             stock: 300,
-            category: "Category 3",
+            category: "TechnicalComponents",
             rating: 4.8,
             discount: 15,
         },
@@ -98,7 +99,7 @@ export default function Home() {
             description: "Description 3",
             price: 30,
             stock: 300,
-            category: "Category 3",
+            category: "TechnicalComponents",
             rating: 4.8,
             discount: 15,
         },
@@ -108,7 +109,7 @@ export default function Home() {
             description: "Description 3",
             price: 30,
             stock: 300,
-            category: "Category 3",
+            category: "TechnicalComponents",
             rating: 4.8,
             discount: 15,
         },
@@ -118,19 +119,19 @@ export default function Home() {
             description: "Description 3",
             price: 30,
             stock: 300,
-            category: "Category 3",
+            category: "TechnicalComponents",
             rating: 4.8,
             discount: 15,
         },
         {
             id: "12",
-            name: "Item 3",
+            name: "Item 4",
             description: "Description 3",
-            price: 30,
+            price: 50,
             stock: 300,
-            category: "Category 3",
+            category: "Other",
             rating: 4.8,
-            discount: 15,
+            discount: 0,
         },
         // Weitere Items hinzufügen
     ];
@@ -143,13 +144,6 @@ export default function Home() {
         { value: "Other", label: t("other") }
     ];
 
-    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 => ({
@@ -162,9 +156,13 @@ export default function Home() {
     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 discountedPrices = items.map(item => item.price * (1 - item.discount / 100));
+    const minPrice = Math.min(...discountedPrices);
+    const maxPrice = Math.max(...discountedPrices);
+    const [priceRange, setPriceRange] = useState<[number, number]>([minPrice, maxPrice]);
+
     const location = useLocation();
 
     useEffect(() => {
@@ -192,7 +190,22 @@ export default function Home() {
             const newItemsPerPage = calculateItemsPerPage();
             setItemsPerPage(newItemsPerPage);
             const startIndex = (currentPage - 1) * newItemsPerPage;
-            setVisibleItems(items.slice(startIndex, startIndex + newItemsPerPage));
+
+            const filtered = items
+                .filter(item => {
+                    const discountedPrice = item.price * (1 - item.discount / 100);
+                    return discountedPrice >= priceRange[0] && discountedPrice <= priceRange[1];
+                })
+                .filter(item => {
+                    if (!selectedCategory) return true;
+                    return item.category === selectedCategory;
+                })
+                .filter(item => {
+                    if (!selectedRating) return true;
+                    return Math.floor(item.rating) === Number(selectedRating);
+                });
+
+            setVisibleItems(filtered.slice(startIndex, startIndex + newItemsPerPage));
         };
 
         updateItems(); // Initialer Aufruf
@@ -219,11 +232,13 @@ export default function Home() {
                     value={selectedCategory}
                     onChange={handleCategoryChange}
                 />
-                <FilterItem
+                <PriceSlider
-                    filterName={t('price')}
+                    min={minPrice}
-                    filterItems={priceFilter}
+                    max={maxPrice}
-                    value={selectedPrice}
+                    onChange={(range) => {
-                    onChange={setSelectedPrice}
+                        setPriceRange(range);
+                        setCurrentPage(1);
+                    }}
                 />
                 <FilterItem
                     filterName={t('rating')}

package-lock.json

@@ -0,0 +1,6 @@
+{
+  "name": "webshop",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}