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

use of real items and fixed "allToCart" button

Browse Source
This commit is contained in:
Laura Dolibois
2025-06-14 16:30:07 +02:00
parent dab3699d98
commit 745e56f8da
1 changed files with 71 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
01-frontend/src/pages/FSComponents.tsx
View File

@@ -1,7 +1,8 @@
import { Box, Button, Typography } from "@mui/material";
import { Box, Button, Typography, useTheme } from "@mui/material";
import { useTranslation } from "react-i18next";
import { useState } from "react";
import "./pages.css";
import { useQuery } from "@tanstack/react-query";
import { useBasket } from "../helper/BasketProvider";
import ItemCard from "../helper/homepage/ItemCard";
import AddShoppingCartIcon from '@mui/icons-material/AddShoppingCart';
@@ -16,35 +17,69 @@ import connectors from '../assets/fscomponents/fs_components_7.png';
import clips from '../assets/fscomponents/fs_components_8.png';
import arduino from '../assets/fscomponents/fs_components_9.png';
export default function FSComponents() {
interface Item {
id: number;
uuid: string;
name: string;
price100: number;
discount100: number;
rating: number;
stock: number;
description: string;
category: string;
}
// API-Funktion, Items laden (URL anpassen!)
async function fetchItemList(): Promise<Item[]> {
const response = await fetch('/api/items');
if (!response.ok) throw new Error('Failed to fetch items');
return response.json();
}
export default function FSComponents() {
const { t } = useTranslation();
const theme = useTheme();
const { addToBasket } = useBasket();
const [hoverIndex, setHoverIndex] = useState<number | null>(null);
const exampleItems = [
{ id: "1", uuid: "uuid-1", name: "Set: Air + Light", price100: 12999, discount100: 0, rating: 9, stock: 12, description: "Test", category: "TechnicalComponents" },
{ id: "2", uuid: "uuid-2", name: "Set: Hoses", price100: 4999, discount100: 50, rating: 3, stock: 5, description: "Test", category: "TechnicalComponents" },
{ id: "3", uuid: "uuid-3", name: "Set: Pipes", price100: 8999, discount100: 0, rating: 5, stock: 0, description: "Test", category: "TechnicalComponents" },
{ id: "4", uuid: "uuid-4", name: "Set: Pumps", price100: 2999, discount100: 20, rating: 8, stock: 3, description: "Test", category: "GardenSupplies" },
{ id: "5", uuid: "uuid-5", name: "Set: Sensors", price100: 1999, discount100: 0, rating: 10, stock: 25, description: "Test", category: "TechnicalComponents" },
{ id: "6", uuid: "uuid-6", name: "Set: Shelf", price100: 1099, discount100: 0, rating: 4, stock: 15, description: "Test", category: "GardenSupplies" },
{ id: "7", uuid: "uuid-7", name: "Set: Connectors", price100: 799, discount100: 0, rating: 7, stock: 9, description: "Test", category: "TechnicalComponents" },
{ id: "8", uuid: "uuid-8", name: "Set: Clips", price100: 799, discount100: 0, rating: 7, stock: 9, description: "Test", category: "TechnicalComponents" },
{ id: "9", uuid: "uuid-9", name: "Arduino", price100: 799, discount100: 0, rating: 7, stock: 9, description: "Test", category: "TechnicalComponents" }
];
// Gewünschte IDs
const wantedIds = [60, 67, 68, 69, 70, 71, 72, 73, 74, 75];
// Daten mit react-query laden
const { data = [], isLoading, error } = useQuery<Item[]>({
queryKey: ['fetchItemList'],
queryFn: fetchItemList,
retry: 3,
retryDelay: 1000,
});
// Filter auf wantedIds
const filteredItems = data.filter(item => wantedIds.includes(item.id));
// Button-Funktion: alle gefilterten Items in den Warenkorb packen
const handleAddAllToCart = () => {
filteredItems.forEach(item => {
addToBasket(item, 1);
});
};
// Zuordnung Bilder (Annahme: 9 Bilder für 9 Items)
const componentImages = [
arduino,
farmingStation,
environment,
hoses,
pipes,
pumps,
sensors,
shelf,
hoses,
connectors,
clips,
arduino
];
if (isLoading) return <Typography>{t('loading')}</Typography>;
if (error) return <Typography color="error">{t('errorLoadingItems')}</Typography>;
return (
<Box sx={{ width: '100%', display: 'flex', maxWidth: 1600, mx: 'auto', pt: 2, height: '100vh' }}>
{/* Bild links */}
@@ -59,20 +94,26 @@ export default function FSComponents() {
padding: 2,
overflow: 'hidden',
}}>
<Box component="img"
src={hoverIndex !== null ? componentImages[hoverIndex] : farmingStation}
alt={t('componentsFarmingStation')}
sx={{
width: '100%',
height: 'auto',
maxHeight: '80vh',
objectFit: 'contain',
borderRadius: 2,
border: theme => `4px solid ${theme.palette.primary.main}`,
marginBottom: 2
}}
<Box
component="img"
src={hoverIndex !== null ? componentImages[hoverIndex] : farmingStation}
alt={t('componentsFarmingStation')}
sx={{
width: '100%',
height: 'auto',
maxHeight: '80vh',
objectFit: 'contain',
borderRadius: 2,
border: `4px solid ${theme.palette.primary.main}`,
marginBottom: 2,
}}
/>
<Button variant="contained" fullWidth startIcon={<AddShoppingCartIcon />}>
<Button
variant="contained"
fullWidth
startIcon={<AddShoppingCartIcon />}
onClick={handleAddAllToCart}
>
{t('addAllToCart')}
</Button>
</Box>
@@ -90,7 +131,7 @@ export default function FSComponents() {
</Typography>
</Box>
<Box className="cardgrid">
{exampleItems.map((item, index) => (
{filteredItems.map((item, index) => (
<div
key={item.id}
onMouseEnter={() => setHoverIndex(index)}