Uni/dps-webshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/main'

Browse Source 
# Conflicts:
#	01-frontend/package-lock.json
#	01-frontend/package.json
This commit is contained in:
mathusan
2025-05-31 18:05:32 +02:00
parent 6a91a7fc53 dbe654d829
commit 99202be626
5 changed files with 153 additions and 2919 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2936
01-frontend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

7
01-frontend/package.json
View File

@@ -13,8 +13,8 @@
"dependencies": {
"@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.0",
"@mui/icons-material": "^7.1.0",
"@mui/material": "^7.1.0",
"@mui/icons-material": "^7.0.2",
"@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",
"webshop": "^0.0.1"
"react-router-dom": "^7.5.3"
},
"devDependencies": {
"@eslint/js": "^9.22.0",

48
01-frontend/src/helper/homepage/PriceSlider.tsx Normal file
View File

@@ -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>
);
}

75
01-frontend/src/pages/Home.tsx
View File

@@ -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
filterName={t('price')}
filterItems={priceFilter}
value={selectedPrice}
onChange={setSelectedPrice}
<PriceSlider
min={minPrice}
max={maxPrice}
onChange={(range) => {
setPriceRange(range);
setCurrentPage(1);
}}
/>
<FilterItem
filterName={t('rating')}

6
package-lock.json generated Normal file
View File

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