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

added translations for order history

Browse Source
This commit is contained in:
Laura Dolibois
2025-05-25 19:39:14 +02:00
parent 9d8a675998
commit 1b1924b0b7
3 changed files with 65 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,8 @@
{ {
"account": "Konto", "account": "Konto",
"accountDeleted": "Konto erfolgreich gelöscht!", "accountDeleted": "Konto erfolgreich gelöscht!",
"active": "laufend",
"activeOrder": "Laufende Bestellung",
"address": "Adresse", "address": "Adresse",
"addToCart": "In den Warenkorb", "addToCart": "In den Warenkorb",
"addedToCart": "Produkt wurde erfolgreich dem Warenkorb hinzugefügt", "addedToCart": "Produkt wurde erfolgreich dem Warenkorb hinzugefügt",
@@ -10,6 +12,7 @@
"back": "Zurück", "back": "Zurück",
"backToHome": "Zurück zur Startseite", "backToHome": "Zurück zur Startseite",
"cancel": "Abbrechen", "cancel": "Abbrechen",
"cancelOrder": "Bestellung stornieren",
"categories": "Kategorien", "categories": "Kategorien",
"category": "Kategorie", "category": "Kategorie",
"checkout": "Zur Kasse", "checkout": "Zur Kasse",
@@ -28,11 +31,19 @@
"freeShipping": "Kostenloser Versand ab 50 € Bestellwert", "freeShipping": "Kostenloser Versand ab 50 € Bestellwert",
"gardenSupplies": "Gartenzubehör", "gardenSupplies": "Gartenzubehör",
"inStock": "Verfügbar", "inStock": "Verfügbar",
"item": "Artikel",
"items": "Artikel",
"lastName": "Nachname", "lastName": "Nachname",
"logout": "Ausloggen", "logout": "Ausloggen",
"myAccount": "Mein Konto", "myAccount": "Mein Konto",
"myOrders": "Meine Bestellungen",
"name": "Name", "name": "Name",
"next": "Weiter", "next": "Weiter",
"noActiveOrders": "Keine laufenden Bestellungen.",
"noPreviousOrders": "Keine vergangenen Bestellungen.",
"order": "Bestellung",
"orderCancelled": "Folgende Bestellung wurde storniert:",
"orderDate": "Bestelldatum",
"orderedItems": "Bestellte Artikel", "orderedItems": "Bestellte Artikel",
"orders": "Bestellungen", "orders": "Bestellungen",
"orderSummary": "Bestellübersicht", "orderSummary": "Bestellübersicht",
@@ -44,7 +55,10 @@
"phone": "Telefon", "phone": "Telefon",
"placeOrder": "Zahlungspflichtig bestellen", "placeOrder": "Zahlungspflichtig bestellen",
"postalCode": "Postleitzahl", "postalCode": "Postleitzahl",
"previous": "vergangen",
"previousOrder": "Vergangene Bestellung",
"price": "Preis", "price": "Preis",
"pricePerItem": "Stückpreis",
"productDoesNotExist": "Dieses Produkt existiert nicht oder wurde bereits gelöscht.", "productDoesNotExist": "Dieses Produkt existiert nicht oder wurde bereits gelöscht.",
"productNotFound": "Produkt nicht gefunden!", "productNotFound": "Produkt nicht gefunden!",
"quantity": "Anzahl", "quantity": "Anzahl",
@@ -56,8 +70,10 @@
"save": "Speichern", "save": "Speichern",
"search": "Suchen", "search": "Suchen",
"seeds": "Saatgut", "seeds": "Saatgut",
"shippingAddress": "Versandadresse",
"shippingDetails": "Versand", "shippingDetails": "Versand",
"submit": "Senden", "submit": "Senden",
"sum": "Gesamtsumme",
"technicalComponents": "Technik", "technicalComponents": "Technik",
"thanksForOrder": "Vielen Dank für die Bestellung!", "thanksForOrder": "Vielen Dank für die Bestellung!",
"wrongTurn": "Ein falscher Weg wurde eingeschlagen. Hier geht es zurück auf den richtigen Pfad.", "wrongTurn": "Ein falscher Weg wurde eingeschlagen. Hier geht es zurück auf den richtigen Pfad.",

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

@@ -1,6 +1,8 @@
{ {
"account": "Account", "account": "Account",
"accountDeleted": "Account deleted successfully!", "accountDeleted": "Account deleted successfully!",
"active": "active",
"activeOrder": "Active order",
"address": "Address", "address": "Address",
"addToCart": "Add to cart", "addToCart": "Add to cart",
"addedToCart": "Product added to shopping cart successfully", "addedToCart": "Product added to shopping cart successfully",
@@ -10,6 +12,7 @@
"back": "Back", "back": "Back",
"backToHome": "Go back to home", "backToHome": "Go back to home",
"cancel": "Cancel", "cancel": "Cancel",
"cancelOrder": "Cancel order",
"categories": "Categories", "categories": "Categories",
"category": "Category", "category": "Category",
"checkout": "Checkout", "checkout": "Checkout",
@@ -28,11 +31,19 @@
"freeShipping": "Free shipping for orders over 50 €", "freeShipping": "Free shipping for orders over 50 €",
"gardenSupplies": "Garden supplies", "gardenSupplies": "Garden supplies",
"inStock": "In stock", "inStock": "In stock",
"item": "Item",
"items": "items",
"lastName": "Last name", "lastName": "Last name",
"logout": "Logout", "logout": "Logout",
"myAccount": "My Account", "myAccount": "My Account",
"myOrders": "My Orders",
"name": "Name", "name": "Name",
"next": "Next", "next": "Next",
"noActiveOrders": "No active orders.",
"noPreviousOrders": "No previous orders.",
"order": "Order",
"orderCancelled": "The following order has been cancelled:",
"orderDate": "Order date",
"orderedItems": "Ordered items", "orderedItems": "Ordered items",
"orders": "Orders", "orders": "Orders",
"orderSummary": "Order summary", "orderSummary": "Order summary",
@@ -44,7 +55,10 @@
"phone": "Phone number", "phone": "Phone number",
"placeOrder": "Place order", "placeOrder": "Place order",
"postalCode": "Postal code", "postalCode": "Postal code",
"previous": "previous",
"previousOrder": "Previous order",
"price": "Price", "price": "Price",
"pricePerItem": "Price per item",
"productDoesNotExist": "It seems you are locking for a product that doesn't exist or has been removed.", "productDoesNotExist": "It seems you are locking for a product that doesn't exist or has been removed.",
"productNotFound": "Product not found!", "productNotFound": "Product not found!",
"quantity": "Quantity", "quantity": "Quantity",
@@ -56,8 +70,10 @@
"save": "Save", "save": "Save",
"search": "Search", "search": "Search",
"seeds": "Seeds", "seeds": "Seeds",
"shippingAddress": "Shipping address",
"shippingDetails": "Shipping details", "shippingDetails": "Shipping details",
"submit": "Submit", "submit": "Submit",
"sum": "Total",
"technicalComponents": "Technical components", "technicalComponents": "Technical components",
"thanksForOrder": "Thank you for your order!", "thanksForOrder": "Thank you for your order!",
"wrongTurn": "It seems you may have taken a wrong turn. Let's get you back on track.", "wrongTurn": "It seems you may have taken a wrong turn. Let's get you back on track.",

62
01-frontend/src/pages/Orders.tsx
View File

@@ -1,11 +1,12 @@
import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, Divider, List, ListItemButton, ListItemText, Paper, Stack, Tab, Tabs, Typography } from "@mui/material"; import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, Divider, List, ListItemButton, ListItemText, Paper, Stack, Tab, Tabs, Typography } from "@mui/material";
import { useState } from "react"; import { useState } from "react";
import "./pages.css"; import "./pages.css";
import {useTranslation} from "react-i18next";
type Order = { type Order = {
id: string; id: string;
date: string; date: string;
status: "laufend" | "abgeschlossen"; status: "laufend" | "inactive";
items: { name: string; quantity: number; price: number }[]; items: { name: string; quantity: number; price: number }[];
total: number; total: number;
address: string; address: string;
@@ -15,7 +16,7 @@ const mockOrders: Order[] = [
{ {
id: "1001", id: "1001",
date: "2025-05-20", date: "2025-05-20",
status: "laufend", status: "active",
items: [ items: [
{ name: "Tomatensamen", quantity: 2, price: 3.99 }, { name: "Tomatensamen", quantity: 2, price: 3.99 },
{ name: "Blumenerde", quantity: 1, price: 7.49 } { name: "Blumenerde", quantity: 1, price: 7.49 }
@@ -26,7 +27,7 @@ const mockOrders: Order[] = [
{ {
id: "1000", id: "1000",
date: "2025-05-10", date: "2025-05-10",
status: "abgeschlossen", status: "inactive",
items: [ items: [
{ name: "Gießkanne", quantity: 1, price: 12.99 } { name: "Gießkanne", quantity: 1, price: 12.99 }
], ],
@@ -36,17 +37,20 @@ const mockOrders: Order[] = [
]; ];
export default function Orders() { export default function Orders() {
const { t } = useTranslation();
const [tab, setTab] = useState(0); const [tab, setTab] = useState(0);
const [selectedOrder, setSelectedOrder] = useState<Order | null>(null); const [selectedOrder, setSelectedOrder] = useState<Order | null>(null);
const laufendeBestellungen = mockOrders.filter(o => o.status === "laufend"); const activeOrders = mockOrders.filter(o => o.status === "active");
const vergangeneBestellungen = mockOrders.filter(o => o.status === "abgeschlossen"); const inactiveOrders = mockOrders.filter(o => o.status === "inactive");
const handleTabChange = (_: React.SyntheticEvent, newValue: number) => setTab(newValue); const handleTabChange = (_: React.SyntheticEvent, newValue: number) => setTab(newValue);
const handleCancelOrder = (orderId: string) => { const handleCancelOrder = (orderId: string) => {
// Hier API-Call zum Stornieren einbauen // Hier API-Call zum Stornieren einbauen
alert(`Bestellung ${orderId} wurde storniert.`); alert(`${t('orderCancelled')} #${orderId}`);
setSelectedOrder(null); setSelectedOrder(null);
}; };
@@ -54,80 +58,80 @@ export default function Orders() {
<Box className="page-background" sx={{ minHeight: "100vh", pt: 4 }}> <Box className="page-background" sx={{ minHeight: "100vh", pt: 4 }}>
<Paper elevation={3} sx={{ p: 4, maxWidth: 700, width: "100%", mx: "auto" }}> <Paper elevation={3} sx={{ p: 4, maxWidth: 700, width: "100%", mx: "auto" }}>
<Typography variant="h4" gutterBottom> <Typography variant="h4" gutterBottom>
Meine Bestellungen {t('myOrders')}
</Typography> </Typography>
<Tabs value={tab} onChange={handleTabChange} sx={{ mb: 3 }}> <Tabs value={tab} onChange={handleTabChange} sx={{ mb: 3 }}>
<Tab label="Laufende Bestellungen" /> <Tab label={t('active')} />
<Tab label="Vergangene Bestellungen" /> <Tab label={t('previous')} />
</Tabs> </Tabs>
<Divider sx={{ mb: 2 }} /> <Divider sx={{ mb: 2 }} />
{tab === 0 ? ( {tab === 0 ? (
laufendeBestellungen.length > 0 ? ( activeOrders.length > 0 ? (
<List> <List>
{laufendeBestellungen.map(order => ( {activeOrders.map(order => (
<ListItemButton key={order.id} onClick={() => setSelectedOrder(order)}> <ListItemButton key={order.id} onClick={() => setSelectedOrder(order)}>
<ListItemText <ListItemText
primary={`Bestellung #${order.id} • ${order.date}`} primary={`${t('order')} #${order.id} • ${order.date}`}
secondary={`Summe: ${order.total.toFixed(2)} € • ${order.items.length} Artikel`} secondary={`${t('sum')}: ${order.total.toFixed(2)} € • ${order.items.length} ${t('items')}`}
/> />
</ListItemButton> </ListItemButton>
))} ))}
</List> </List>
) : ( ) : (
<Typography color="text.secondary">Keine laufenden Bestellungen.</Typography> <Typography color="text.secondary">{t('noActiveOrders')}</Typography>
) )
) : ( ) : (
vergangeneBestellungen.length > 0 ? ( inactiveOrders.length > 0 ? (
<List> <List>
{vergangeneBestellungen.map(order => ( {inactiveOrders.map(order => (
<ListItemButton key={order.id} onClick={() => setSelectedOrder(order)}> <ListItemButton key={order.id} onClick={() => setSelectedOrder(order)}>
<ListItemText <ListItemText
primary={`Bestellung #${order.id} • ${order.date}`} primary={`${t('order')} #${order.id} • ${order.date}`}
secondary={`Summe: ${order.total.toFixed(2)} € • ${order.items.length} Artikel`} secondary={`${t('sum')}: ${order.total.toFixed(2)} € • ${order.items.length} ${t('items')}`}
/> />
</ListItemButton> </ListItemButton>
))} ))}
</List> </List>
) : ( ) : (
<Typography color="text.secondary">Keine vergangenen Bestellungen.</Typography> <Typography color="text.secondary">{t('noPreviousOrders')}</Typography>
) )
)} )}
<Dialog open={!!selectedOrder} onClose={() => setSelectedOrder(null)} maxWidth="sm" fullWidth> <Dialog open={!!selectedOrder} onClose={() => setSelectedOrder(null)} maxWidth="sm" fullWidth>
<DialogTitle> <DialogTitle>
{selectedOrder?.status === "laufend" ? "Laufende Bestellung" : "Vergangene Bestellung"} #{selectedOrder?.id} {`${selectedOrder?.status === "active" ? t('activeOrder') : t('previousOrder')} #${selectedOrder?.id}`}
</DialogTitle> </DialogTitle>
<DialogContent dividers> <DialogContent dividers>
{selectedOrder && ( {selectedOrder && (
<Stack spacing={2}> <Stack spacing={2}>
<Typography variant="subtitle1">Bestelldatum: {selectedOrder.date}</Typography> <Typography variant="subtitle1">{`${t('orderDate')}: ${selectedOrder.date}`}</Typography>
<Typography variant="subtitle1">Lieferadresse: {selectedOrder.address}</Typography> <Typography variant="subtitle1">{`${t('shippingAddress')}: ${selectedOrder.address}`}</Typography>
<Divider /> <Divider />
<Typography variant="subtitle2">Artikel:</Typography> <Typography variant="subtitle2">{t('orderedItems')}:</Typography>
<List dense> <List dense>
{selectedOrder.items.map((item, idx) => ( {selectedOrder.items.map((item, idx) => (
<ListItemText <ListItemText
key={idx} key={idx}
primary={`${item.name} x${item.quantity}`} primary={`${item.name} x${item.quantity}`}
secondary={`Einzelpreis: ${item.price.toFixed(2)} €`} secondary={`${t('pricePerItem')}: ${item.price.toFixed(2)} €`}
/> />
))} ))}
</List> </List>
<Divider /> <Divider />
<Typography variant="h6">Gesamtsumme: {selectedOrder.total.toFixed(2)} €</Typography> <Typography variant="h6">{`${t('sum')}: ${selectedOrder.total.toFixed(2)} €`}</Typography>
</Stack> </Stack>
)} )}
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
{selectedOrder?.status === "laufend" && ( {selectedOrder?.status === "active" && (
<Button color="error" onClick={() => handleCancelOrder(selectedOrder.id)}> <Button color="error" onClick={() => handleCancelOrder(selectedOrder.id)}>
Bestellung stornieren {t('cancelOrder')}
</Button> </Button>
)} )}
<Button onClick={() => setSelectedOrder(null)}>Schließen</Button> <Button onClick={() => setSelectedOrder(null)}>{t('close')}</Button>
</DialogActions> </DialogActions>
</Dialog> </Dialog>
</Paper> </Paper>
</Box> </Box>
); );
} }