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

added slider as price filter

Browse Source
This commit is contained in:
Laura Dolibois
2025-05-31 17:54:55 +02:00
parent 1b1924b0b7
commit dbe654d829
5 changed files with 139 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -11,7 +11,7 @@
"@emotion/react": "^11.14.0", "@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.0", "@emotion/styled": "^11.14.0",
"@mui/icons-material": "^7.0.2", "@mui/icons-material": "^7.0.2",
"@mui/material": "^7.0.2", "@mui/material": "^7.1.0",
"i18next": "^25.2.0", "i18next": "^25.2.0",
"i18next-browser-languagedetector": "^8.1.0", "i18next-browser-languagedetector": "^8.1.0",
"i18next-http-backend": "^3.0.2", "i18next-http-backend": "^3.0.2",
@@ -1173,9 +1173,9 @@
} }
}, },
"node_modules/@mui/core-downloads-tracker": { "node_modules/@mui/core-downloads-tracker": {
"version": "7.0.2", "version": "7.1.0",
"resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-7.0.2.tgz", "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-7.1.0.tgz",
"integrity": "sha512-TfeFU9TgN1N06hyb/pV/63FfO34nijZRMqgHk0TJ3gkl4Fbd+wZ73+ZtOd7jag6hMmzO9HSrBc6Vdn591nhkAg==", "integrity": "sha512-E0OqhZv548Qdc0PwWhLVA2zmjJZSTvaL4ZhoswmI8NJEC1tpW2js6LLP827jrW9MEiXYdz3QS6+hask83w74yQ==",
"license": "MIT", "license": "MIT",
"funding": { "funding": {
"type": "opencollective", "type": "opencollective",
@@ -1209,16 +1209,16 @@
} }
}, },
"node_modules/@mui/material": { "node_modules/@mui/material": {
"version": "7.0.2", "version": "7.1.0",
"resolved": "https://registry.npmjs.org/@mui/material/-/material-7.0.2.tgz", "resolved": "https://registry.npmjs.org/@mui/material/-/material-7.1.0.tgz",
"integrity": "sha512-rjJlJ13+3LdLfobRplkXbjIFEIkn6LgpetgU/Cs3Xd8qINCCQK9qXQIjjQ6P0FXFTPFzEVMj0VgBR1mN+FhOcA==", "integrity": "sha512-ahUJdrhEv+mCp4XHW+tHIEYzZMSRLg8z4AjUOsj44QpD1ZaMxQoVOG2xiHvLFdcsIPbgSRx1bg1eQSheHBgvtg==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@babel/runtime": "^7.27.0", "@babel/runtime": "^7.27.1",
"@mui/core-downloads-tracker": "^7.0.2", "@mui/core-downloads-tracker": "^7.1.0",
"@mui/system": "^7.0.2", "@mui/system": "^7.1.0",
"@mui/types": "^7.4.1", "@mui/types": "^7.4.2",
"@mui/utils": "^7.0.2", "@mui/utils": "^7.1.0",
"@popperjs/core": "^2.11.8", "@popperjs/core": "^2.11.8",
"@types/react-transition-group": "^4.4.12", "@types/react-transition-group": "^4.4.12",
"clsx": "^2.1.1", "clsx": "^2.1.1",
@@ -1237,7 +1237,7 @@
"peerDependencies": { "peerDependencies": {
"@emotion/react": "^11.5.0", "@emotion/react": "^11.5.0",
"@emotion/styled": "^11.3.0", "@emotion/styled": "^11.3.0",
"@mui/material-pigment-css": "^7.0.2", "@mui/material-pigment-css": "^7.1.0",
"@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
"react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
@@ -1258,13 +1258,13 @@
} }
}, },
"node_modules/@mui/private-theming": { "node_modules/@mui/private-theming": {
"version": "7.0.2", "version": "7.1.0",
"resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-7.0.2.tgz", "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-7.1.0.tgz",
"integrity": "sha512-6lt8heDC9wN8YaRqEdhqnm0cFCv08AMf4IlttFvOVn7ZdKd81PNpD/rEtPGLLwQAFyyKSxBG4/2XCgpbcdNKiA==", "integrity": "sha512-4Kck4jxhqF6YxNwJdSae1WgDfXVg0lIH6JVJ7gtuFfuKcQCgomJxPvUEOySTFRPz1IZzwz5OAcToskRdffElDA==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@babel/runtime": "^7.27.0", "@babel/runtime": "^7.27.1",
"@mui/utils": "^7.0.2", "@mui/utils": "^7.1.0",
"prop-types": "^15.8.1" "prop-types": "^15.8.1"
}, },
"engines": { "engines": {
@@ -1285,12 +1285,12 @@
} }
}, },
"node_modules/@mui/styled-engine": { "node_modules/@mui/styled-engine": {
"version": "7.0.2", "version": "7.1.0",
"resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-7.0.2.tgz", "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-7.1.0.tgz",
"integrity": "sha512-11Bt4YdHGlh7sB8P75S9mRCUxTlgv7HGbr0UKz6m6Z9KLeiw1Bm9y/t3iqLLVMvSHYB6zL8X8X+LmfTE++gyBw==", "integrity": "sha512-m0mJ0c6iRC+f9hMeRe0W7zZX1wme3oUX0+XTVHjPG7DJz6OdQ6K/ggEOq7ZdwilcpdsDUwwMfOmvO71qDkYd2w==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@babel/runtime": "^7.27.0", "@babel/runtime": "^7.27.1",
"@emotion/cache": "^11.13.5", "@emotion/cache": "^11.13.5",
"@emotion/serialize": "^1.3.3", "@emotion/serialize": "^1.3.3",
"@emotion/sheet": "^1.4.0", "@emotion/sheet": "^1.4.0",
@@ -1319,16 +1319,16 @@
} }
}, },
"node_modules/@mui/system": { "node_modules/@mui/system": {
"version": "7.0.2", "version": "7.1.0",
"resolved": "https://registry.npmjs.org/@mui/system/-/system-7.0.2.tgz", "resolved": "https://registry.npmjs.org/@mui/system/-/system-7.1.0.tgz",
"integrity": "sha512-yFUraAWYWuKIISPPEVPSQ1NLeqmTT4qiQ+ktmyS8LO/KwHxB+NNVOacEZaIofh5x1NxY8rzphvU5X2heRZ/RDA==", "integrity": "sha512-iedAWgRJMCxeMHvkEhsDlbvkK+qKf9me6ofsf7twk/jfT4P1ImVf7Rwb5VubEA0sikrVL+1SkoZM41M4+LNAVA==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@babel/runtime": "^7.27.0", "@babel/runtime": "^7.27.1",
"@mui/private-theming": "^7.0.2", "@mui/private-theming": "^7.1.0",
"@mui/styled-engine": "^7.0.2", "@mui/styled-engine": "^7.1.0",
"@mui/types": "^7.4.1", "@mui/types": "^7.4.2",
"@mui/utils": "^7.0.2", "@mui/utils": "^7.1.0",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"csstype": "^3.1.3", "csstype": "^3.1.3",
"prop-types": "^15.8.1" "prop-types": "^15.8.1"
@@ -1359,12 +1359,12 @@
} }
}, },
"node_modules/@mui/types": { "node_modules/@mui/types": {
"version": "7.4.1", "version": "7.4.2",
"resolved": "https://registry.npmjs.org/@mui/types/-/types-7.4.1.tgz", "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.4.2.tgz",
"integrity": "sha512-gUL8IIAI52CRXP/MixT1tJKt3SI6tVv4U/9soFsTtAsHzaJQptZ42ffdHZV3niX1ei0aUgMvOxBBN0KYqdG39g==", "integrity": "sha512-edRc5JcLPsrlNFYyTPxds+d5oUovuUxnnDtpJUbP6WMeV4+6eaX/mqai1ZIWT62lCOe0nlrON0s9HDiv5en5bA==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@babel/runtime": "^7.27.0" "@babel/runtime": "^7.27.1"
}, },
"peerDependencies": { "peerDependencies": {
"@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0" "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
@@ -1376,13 +1376,13 @@
} }
}, },
"node_modules/@mui/utils": { "node_modules/@mui/utils": {
"version": "7.0.2", "version": "7.1.0",
"resolved": "https://registry.npmjs.org/@mui/utils/-/utils-7.0.2.tgz", "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-7.1.0.tgz",
"integrity": "sha512-72gcuQjPzhj/MLmPHLCgZjy2VjOH4KniR/4qRtXTTXIEwbkgcN+Y5W/rC90rWtMmZbjt9svZev/z+QHUI4j74w==", "integrity": "sha512-/OM3S8kSHHmWNOP+NH9xEtpYSG10upXeQ0wLZnfDgmgadTAk5F4MQfFLyZ5FCRJENB3eRzltMmaNl6UtDnPovw==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@babel/runtime": "^7.27.0", "@babel/runtime": "^7.27.1",
"@mui/types": "^7.4.1", "@mui/types": "^7.4.2",
"@types/prop-types": "^15.7.14", "@types/prop-types": "^15.7.14",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"prop-types": "^15.8.1", "prop-types": "^15.8.1",

2
01-frontend/package.json
View File

@@ -14,7 +14,7 @@
"@emotion/react": "^11.14.0", "@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.0", "@emotion/styled": "^11.14.0",
"@mui/icons-material": "^7.0.2", "@mui/icons-material": "^7.0.2",
"@mui/material": "^7.0.2", "@mui/material": "^7.1.0",
"i18next": "^25.2.0", "i18next": "^25.2.0",
"i18next-browser-languagedetector": "^8.1.0", "i18next-browser-languagedetector": "^8.1.0",
"i18next-http-backend": "^3.0.2", "i18next-http-backend": "^3.0.2",

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 ItemCard from "../helper/homepage/ItemCard";
import "./pages.css"; // Import der CSS-Datei import "./pages.css"; // Import der CSS-Datei
import { useLocation } from "react-router-dom"; 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() { export default function Home() {
@@ -18,7 +19,7 @@ export default function Home() {
description: "Description 1", description: "Description 1",
price: 10, price: 10,
stock: 100, stock: 100,
category: "Category 1", category: "Seeds",
rating: 4.5, rating: 4.5,
discount: 10, discount: 10,
}, },
@@ -28,7 +29,7 @@ export default function Home() {
description: "Description 2", description: "Description 2",
price: 20, price: 20,
stock: 9, stock: 9,
category: "Category 2", category: "GardenSupplies",
rating: 4.0, rating: 4.0,
discount: 20, discount: 20,
}, },
@@ -38,7 +39,7 @@ export default function Home() {
description: "Description 3", description: "Description 3",
price: 30, price: 30,
stock: 10, stock: 10,
category: "Category 3", category: "TechnicalComponents",
rating: 4.8, rating: 4.8,
discount: 15, discount: 15,
}, },
@@ -48,7 +49,7 @@ export default function Home() {
description: "Description 3", description: "Description 3",
price: 30, price: 30,
stock: 0, stock: 0,
category: "Category 3", category: "TechnicalComponents",
rating: 4.8, rating: 4.8,
discount: 15, discount: 15,
}, },
@@ -58,7 +59,7 @@ export default function Home() {
description: "Description 3", description: "Description 3",
price: 30, price: 30,
stock: 300, stock: 300,
category: "Category 3", category: "TechnicalComponents",
rating: 4.8, rating: 4.8,
discount: 15, discount: 15,
}, },
@@ -68,7 +69,7 @@ export default function Home() {
description: "Description 3", description: "Description 3",
price: 30, price: 30,
stock: 300, stock: 300,
category: "Category 3", category: "TechnicalComponents",
rating: 4.8, rating: 4.8,
discount: 15, discount: 15,
}, },
@@ -78,7 +79,7 @@ export default function Home() {
description: "Description 3", description: "Description 3",
price: 30, price: 30,
stock: 300, stock: 300,
category: "Category 3", category: "TechnicalComponents",
rating: 4.8, rating: 4.8,
discount: 15, discount: 15,
}, },
@@ -88,7 +89,7 @@ export default function Home() {
description: "Description 3", description: "Description 3",
price: 30, price: 30,
stock: 300, stock: 300,
category: "Category 3", category: "TechnicalComponents",
rating: 4.8, rating: 4.8,
discount: 15, discount: 15,
}, },
@@ -98,7 +99,7 @@ export default function Home() {
description: "Description 3", description: "Description 3",
price: 30, price: 30,
stock: 300, stock: 300,
category: "Category 3", category: "TechnicalComponents",
rating: 4.8, rating: 4.8,
discount: 15, discount: 15,
}, },
@@ -108,7 +109,7 @@ export default function Home() {
description: "Description 3", description: "Description 3",
price: 30, price: 30,
stock: 300, stock: 300,
category: "Category 3", category: "TechnicalComponents",
rating: 4.8, rating: 4.8,
discount: 15, discount: 15,
}, },
@@ -118,19 +119,19 @@ export default function Home() {
description: "Description 3", description: "Description 3",
price: 30, price: 30,
stock: 300, stock: 300,
category: "Category 3", category: "TechnicalComponents",
rating: 4.8, rating: 4.8,
discount: 15, discount: 15,
}, },
{ {
id: "12", id: "12",
name: "Item 3", name: "Item 4",
description: "Description 3", description: "Description 3",
price: 30, price: 50,
stock: 300, stock: 300,
category: "Category 3", category: "Other",
rating: 4.8, rating: 4.8,
discount: 15, discount: 0,
}, },
// Weitere Items hinzufügen // Weitere Items hinzufügen
]; ];
@@ -143,13 +144,6 @@ export default function Home() {
{ value: "Other", label: t("other") } { 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 = [ const ratingFilter = [
{ value: "", label: t("all") }, { value: "", label: t("all") },
...[5, 4, 3, 2, 1].map(value => ({ ...[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 [itemsPerPage, setItemsPerPage] = useState(9); // Dynamische Anzahl der Items pro Seite
const [visibleItems, setVisibleItems] = useState<Item[]>([]); // Zustand für die sichtbaren Items const [visibleItems, setVisibleItems] = useState<Item[]>([]); // Zustand für die sichtbaren Items
const [selectedCategory, setSelectedCategory] = useState<string | null>(null); const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
const [selectedPrice, setSelectedPrice] = useState<string | null>(null);
const [selectedRating, setSelectedRating] = 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(); const location = useLocation();
useEffect(() => { useEffect(() => {
@@ -192,7 +190,22 @@ export default function Home() {
const newItemsPerPage = calculateItemsPerPage(); const newItemsPerPage = calculateItemsPerPage();
setItemsPerPage(newItemsPerPage); setItemsPerPage(newItemsPerPage);
const startIndex = (currentPage - 1) * 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 updateItems(); // Initialer Aufruf
@@ -219,11 +232,13 @@ export default function Home() {
value={selectedCategory} value={selectedCategory}
onChange={handleCategoryChange} onChange={handleCategoryChange}
/> />
<FilterItem <PriceSlider
filterName={t('price')} min={minPrice}
filterItems={priceFilter} max={maxPrice}
value={selectedPrice} onChange={(range) => {
onChange={setSelectedPrice} setPriceRange(range);
setCurrentPage(1);
}}
/> />
<FilterItem <FilterItem
filterName={t('rating')} filterName={t('rating')}

6
package-lock.json generated Normal file
View File

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