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

edited farming station components page

Browse Source
This commit is contained in:
Laura Dolibois
2025-06-06 00:52:38 +02:00
parent 398e359f17
commit 754a00816f
5 changed files with 202 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
01-frontend/public/locales/de/translation.json
View File

@@ -34,6 +34,7 @@
"firstName": "Vorname",
"freeShipping": "Kostenloser Versand ab 50 € Bestellwert",
"gardenSupplies": "Gartenzubehör",
"hoverToSeeDetails": "Wische über die Komponentenliste für mehr Infos!",
"inStock": "Verfügbar",
"item": "Artikel",
"items": "Artikel",

1
01-frontend/public/locales/en/translation.json
View File

@@ -34,6 +34,7 @@
"firstName": "First name",
"freeShipping": "Free shipping for orders over 50 €",
"gardenSupplies": "Garden supplies",
"hoverToSeeDetails": "Hover over the components list to see more details!",
"inStock": "In stock",
"item": "Item",
"items": "items",

4
01-frontend/src/App.tsx
View File

@@ -12,7 +12,7 @@ import Orders from './pages/Orders';
import Payment from './pages/Payment';
import Product from './pages/Product';
import { CustomThemeProvider } from './theme/ThemeContext';
import Components from './pages/Components.tsx';
import FSComponents from './pages/FSComponents.tsx';
import AdminPanel from './pages/AdminPanel';
export default function App() {
@@ -31,7 +31,7 @@ export default function App() {
<Route path="*" element={<NoPage />} />
<Route path="/product/:id" element={<Product />} />
<Route path="/checkout" element={<Payment />} />
<Route path="/components" element={<Components />} />
<Route path="/components" element={<FSComponents />} />
<Route path="/contact" element={<Contact />} />
<Route path='/account' element={<Account />} />
<Route path='/orders' element={<Orders />} />

95
01-frontend/src/pages/Components.tsx
View File

@@ -1,95 +0,0 @@
import { Box, Typography, Grid, List, ListItem, ListItemText } from "@mui/material";
import { useTranslation } from "react-i18next";
import { useState } from "react";
import "./pages.css";
import farmingStation from '../assets/fscomponents/fs_components_0.png';
import growrack from '../assets/fscomponents/fs_components_1.png';
import tank from '../assets/fscomponents/fs_components_2.png';
import control from '../assets/fscomponents/fs_components_3.png';
import light from '../assets/fscomponents/fs_components_4.png';
import pump from '../assets/fscomponents/fs_components_5.png';
import flowerpots from '../assets/fscomponents/fs_components_6.png';
import pipes from '../assets/fscomponents/fs_components_7.png';
export default function Components() {
const { t } = useTranslation();
const [hoverIndex, setHoverIndex] = useState<number | null>(null);
const components = [
"Regal",
"Tank",
"Steuerung",
"Beleuchtung",
"Pumpe",
"Pflanztöpfe",
"Schläuche"
];
const componentImages = [
growrack,
tank,
control,
light,
pump,
flowerpots,
pipes
];
return (
<Box sx={{ pt: 4, display: 'flex', justifyContent: 'center' }}>
<Box sx={{ maxWidth: 900, width: '100%' }}>
<Typography
variant="h3"
align="center"
gutterBottom
sx={{ color: 'text.primary' }}
>
{t('componentsFarmingStation')}
</Typography>
<Grid container spacing={4} justifyContent="center">
<Grid item xs={12} md={6} sx={{ display: 'flex', justifyContent: 'center', mb: 2 }}>
<Box
component="img"
src={hoverIndex !== null ? componentImages[hoverIndex] : farmingStation}
alt={t('componentsFarmingStation')}
sx={{
maxWidth: '100%',
height: 'auto',
maxHeight: '80vh',
borderRadius: 2,
border: '3px solid green',
boxSizing: 'border-box',
}}
/>
</Grid>
<Grid item xs={12} md={6} sx={{ mb: 2 }}>
<List>
{components.map((item, index) => (
<ListItem
key={index}
disablePadding
onMouseEnter={() => setHoverIndex(index)}
onMouseLeave={() => setHoverIndex(null)}
>
<ListItemText
primaryTypographyProps={{
variant: 'h5',
sx: {
color: hoverIndex === index ? 'green' : 'text.primary',
transition: 'color 0.2s ease',
},
}}
primary={item}
/>
</ListItem>
))}
</List>
</Grid>
</Grid>
</Box>
</Box>
);
}

198
01-frontend/src/pages/FSComponents.tsx Normal file
View File

@@ -0,0 +1,198 @@
import { Box, Typography, Grid, List, ListItem, ListItemText } from "@mui/material";
import { useTranslation } from "react-i18next";
import { useState } from "react";
import "./pages.css";
import Item from "../components/Item";
import ItemCard from "../helper/homepage/ItemCard"
import farmingStation from '../assets/fscomponents/fs_components_0.png';
import growrack from '../assets/fscomponents/fs_components_1.png';
import tank from '../assets/fscomponents/fs_components_2.png';
import control from '../assets/fscomponents/fs_components_3.png';
import light from '../assets/fscomponents/fs_components_4.png';
import pump from '../assets/fscomponents/fs_components_5.png';
import flowerpots from '../assets/fscomponents/fs_components_6.png';
import pipes from '../assets/fscomponents/fs_components_7.png';
export default function FSComponents() {
const { t } = useTranslation();
const [hoverIndex, setHoverIndex] = useState<number | null>(null);
const components = [
"Regal",
"Tank",
"Steuerung",
"Beleuchtung",
"Pumpe",
"Pflanztöpfe",
"Schläuche"
];
const componentImages = [
growrack,
tank,
control,
light,
pump,
flowerpots,
pipes
];
const exampleItems: Item[] = [
{
id: "1",
uuid: "uuid-1",
name: "Regal",
price100: 12999,
discount100: 0,
rating: 4.5,
stock: 12
},
{
id: "2",
uuid: "uuid-2",
name: "Tank",
price100: 4999,
discount100: 500,
rating: 4.2,
stock: 5
},
{
id: "3",
uuid: "uuid-3",
name: "Steuerung",
price100: 8999,
discount100: 0,
rating: 4.7,
stock: 0
},
{
id: "4",
uuid: "uuid-4",
name: "Beleuchtung",
price100: 2999,
discount100: 100,
rating: 4.0,
stock: 3
},
{
id: "5",
uuid: "uuid-5",
name: "Pumpe",
price100: 1999,
discount100: 0,
rating: 3.8,
stock: 25
},
{
id: "6",
uuid: "uuid-6",
name: "Pflanztöpfe",
price100: 1099,
discount100: 0,
rating: 4.3,
stock: 15
},
{
id: "7",
uuid: "uuid-7",
name: "Schläuche",
price100: 799,
discount100: 0,
rating: 4.1,
stock: 9
}
];
const selectedItem = hoverIndex !== null ? exampleItems[hoverIndex] : null;
return (
<Box sx={{ pt: 4, display: 'flex', justifyContent: 'center' }}>
<Box sx={{ maxWidth: '90%', width: '100%', mx: 'auto' }}>
<Typography
variant="h3"
align="center"
gutterBottom
sx={{ color: 'text.primary' }}
>
{t('componentsFarmingStation')}
</Typography>
<Grid container spacing={4} sx={{ width: '100%' }}>
{/* Bild */}
<Grid item xs={12} md={5}>
<Box
component="img"
src={hoverIndex !== null ? componentImages[hoverIndex] : farmingStation}
alt={t('componentsFarmingStation')}
sx={{
width: '100%',
height: 'auto',
maxHeight: '80vh',
borderRadius: 2,
border: '3px solid green',
boxSizing: 'border-box',
}}
/>
</Grid>
{/* Liste */}
<Grid item xs={12} md={4}>
<List>
{components.map((item, index) => (
<ListItem
key={index}
disablePadding
onMouseEnter={() => setHoverIndex(index)}
onMouseLeave={() => setHoverIndex(null)}
>
<ListItemText
primaryTypographyProps={{
variant: 'h5',
sx: {
color: hoverIndex === index ? 'green' : 'text.primary',
transition: 'color 0.2s ease',
},
}}
primary={item}
/>
</ListItem>
))}
</List>
</Grid>
{/* ItemCard oder Platzhalter */}
<Grid item xs={12} md={3}>
{selectedItem ? (
<ItemCard item={selectedItem} />
) : (
<Box
sx={{
height: 360,
borderRadius: 2,
border: '2px dashed grey',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: 'text.secondary',
fontStyle: 'italic',
opacity: 0.5,
padding: 2,
textAlign: 'center',
}}
>
<Typography
variant="body1"
sx={{ whiteSpace: 'normal', wordBreak: 'break-word' }}
>
{t('hoverToSeeDetails')}
</Typography>
</Box>
)}
</Grid>
</Grid>
</Box>
</Box>
);
}