added translations for order history

2025-05-25 19:39:14 +02:00
parent 9d8a675998
commit 1b1924b0b7
3 changed files with 65 additions and 29 deletions
--- a/01-frontend/public/locales/de/translation.json
+++ b/01-frontend/public/locales/de/translation.json
@@ -1,6 +1,8 @@
 {
  "account": "Konto",
  "accountDeleted": "Konto erfolgreich gelöscht!",
+  "active": "laufend",
+  "activeOrder": "Laufende Bestellung",
  "address": "Adresse",
  "addToCart": "In den Warenkorb",
  "addedToCart": "Produkt wurde erfolgreich dem Warenkorb hinzugefügt",
@@ -10,6 +12,7 @@
  "back": "Zurück",
  "backToHome": "Zurück zur Startseite",
  "cancel": "Abbrechen",
+  "cancelOrder": "Bestellung stornieren",
  "categories": "Kategorien",
  "category": "Kategorie",
  "checkout": "Zur Kasse",
@@ -28,11 +31,19 @@
  "freeShipping": "Kostenloser Versand ab 50 € Bestellwert",
  "gardenSupplies": "Gartenzubehör",
  "inStock": "Verfügbar",
+  "item": "Artikel",
+  "items": "Artikel",
  "lastName": "Nachname",
  "logout": "Ausloggen",
  "myAccount": "Mein Konto",
+  "myOrders": "Meine Bestellungen",
  "name": "Name",
  "next": "Weiter",
+  "noActiveOrders": "Keine laufenden Bestellungen.",
+  "noPreviousOrders": "Keine vergangenen Bestellungen.",
+  "order": "Bestellung",
+  "orderCancelled": "Folgende Bestellung wurde storniert:",
+  "orderDate": "Bestelldatum",
  "orderedItems": "Bestellte Artikel",
  "orders": "Bestellungen",
  "orderSummary": "Bestellübersicht",
@@ -44,7 +55,10 @@
  "phone": "Telefon",
  "placeOrder": "Zahlungspflichtig bestellen",
  "postalCode": "Postleitzahl",
+  "previous": "vergangen",
+  "previousOrder": "Vergangene Bestellung",
  "price": "Preis",
+  "pricePerItem": "Stückpreis",
  "productDoesNotExist": "Dieses Produkt existiert nicht oder wurde bereits gelöscht.",
  "productNotFound": "Produkt nicht gefunden!",
  "quantity": "Anzahl",
@@ -56,8 +70,10 @@
  "save": "Speichern",
  "search": "Suchen",
  "seeds": "Saatgut",
+  "shippingAddress": "Versandadresse",
  "shippingDetails": "Versand",
  "submit": "Senden",
+  "sum": "Gesamtsumme",
  "technicalComponents": "Technik",
  "thanksForOrder": "Vielen Dank für die Bestellung!",
  "wrongTurn": "Ein falscher Weg wurde eingeschlagen. Hier geht es zurück auf den richtigen Pfad.",
--- a/01-frontend/public/locales/en/translation.json
+++ b/01-frontend/public/locales/en/translation.json
@@ -1,6 +1,8 @@
 {
  "account": "Account",
  "accountDeleted": "Account deleted successfully!",
+  "active": "active",
+  "activeOrder": "Active order",
  "address": "Address",
  "addToCart": "Add to cart",
  "addedToCart": "Product added to shopping cart successfully",
@@ -10,6 +12,7 @@
  "back": "Back",
  "backToHome": "Go back to home",
  "cancel": "Cancel",
+  "cancelOrder": "Cancel order",
  "categories": "Categories",
  "category": "Category",
  "checkout": "Checkout",
@@ -28,11 +31,19 @@
  "freeShipping": "Free shipping for orders over 50 €",
  "gardenSupplies": "Garden supplies",
  "inStock": "In stock",
+  "item": "Item",
+  "items": "items",
  "lastName": "Last name",
  "logout": "Logout",
  "myAccount": "My Account",
+  "myOrders": "My Orders",
  "name": "Name",
  "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",
  "orders": "Orders",
  "orderSummary": "Order summary",
@@ -44,7 +55,10 @@
  "phone": "Phone number",
  "placeOrder": "Place order",
  "postalCode": "Postal code",
+  "previous": "previous",
+  "previousOrder": "Previous order",
  "price": "Price",
+  "pricePerItem": "Price per item",
  "productDoesNotExist": "It seems you are locking for a product that doesn't exist or has been removed.",
  "productNotFound": "Product not found!",
  "quantity": "Quantity",
@@ -56,8 +70,10 @@
  "save": "Save",
  "search": "Search",
  "seeds": "Seeds",
+  "shippingAddress": "Shipping address",
  "shippingDetails": "Shipping details",
  "submit": "Submit",
+  "sum": "Total",
  "technicalComponents": "Technical components",
  "thanksForOrder": "Thank you for your order!",
  "wrongTurn": "It seems you may have taken a wrong turn. Let's get you back on track.",
--- a/01-frontend/src/pages/Orders.tsx
+++ b/01-frontend/src/pages/Orders.tsx
@@ -1,11 +1,12 @@
 import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, Divider, List, ListItemButton, ListItemText, Paper, Stack, Tab, Tabs, Typography } from "@mui/material";
 import { useState } from "react";
 import "./pages.css";
+import {useTranslation} from "react-i18next";

 type Order = {
    id: string;
    date: string;
-    status: "laufend" | "abgeschlossen";
+    status: "laufend" | "inactive";
    items: { name: string; quantity: number; price: number }[];
    total: number;
    address: string;
@@ -15,7 +16,7 @@ const mockOrders: Order[] = [
    {
        id: "1001",
        date: "2025-05-20",
-        status: "laufend",
+        status: "active",
        items: [
            { name: "Tomatensamen", quantity: 2, price: 3.99 },
            { name: "Blumenerde", quantity: 1, price: 7.49 }
@@ -26,7 +27,7 @@ const mockOrders: Order[] = [
    {
        id: "1000",
        date: "2025-05-10",
-        status: "abgeschlossen",
+        status: "inactive",
        items: [
            { name: "Gießkanne", quantity: 1, price: 12.99 }
        ],
@@ -36,17 +37,20 @@ const mockOrders: Order[] = [
 ];

 export default function Orders() {
+
+    const { t } = useTranslation();
+
    const [tab, setTab] = useState(0);
    const [selectedOrder, setSelectedOrder] = useState<Order | null>(null);

-    const laufendeBestellungen = mockOrders.filter(o => o.status === "laufend");
-    const vergangeneBestellungen = mockOrders.filter(o => o.status === "abgeschlossen");
+    const activeOrders = mockOrders.filter(o => o.status === "active");
+    const inactiveOrders = mockOrders.filter(o => o.status === "inactive");

    const handleTabChange = (_: React.SyntheticEvent, newValue: number) => setTab(newValue);

    const handleCancelOrder = (orderId: string) => {
        // Hier API-Call zum Stornieren einbauen
-        alert(`Bestellung ${orderId} wurde storniert.`);
+        alert(`${t('orderCancelled')} #${orderId}`);
        setSelectedOrder(null);
    };

@@ -54,80 +58,80 @@ export default function Orders() {
        <Box className="page-background" sx={{ minHeight: "100vh", pt: 4 }}>
            <Paper elevation={3} sx={{ p: 4, maxWidth: 700, width: "100%", mx: "auto" }}>
                <Typography variant="h4" gutterBottom>
-                    Meine Bestellungen
+                    {t('myOrders')}
                </Typography>
                <Tabs value={tab} onChange={handleTabChange} sx={{ mb: 3 }}>
-                    <Tab label="Laufende Bestellungen" />
-                    <Tab label="Vergangene Bestellungen" />
+                    <Tab label={t('active')} />
+                    <Tab label={t('previous')} />
                </Tabs>
                <Divider sx={{ mb: 2 }} />
                {tab === 0 ? (
-                    laufendeBestellungen.length > 0 ? (
+                    activeOrders.length > 0 ? (
                        <List>
-                            {laufendeBestellungen.map(order => (
+                            {activeOrders.map(order => (
                                <ListItemButton key={order.id} onClick={() => setSelectedOrder(order)}>
                                    <ListItemText
-                                        primary={`Bestellung #${order.id} • ${order.date}`}
-                                        secondary={`Summe: ${order.total.toFixed(2)} € • ${order.items.length} Artikel`}
+                                        primary={`${t('order')} #${order.id} • ${order.date}`}
+                                        secondary={`${t('sum')}: ${order.total.toFixed(2)} € • ${order.items.length} ${t('items')}`}
                                    />
                                </ListItemButton>
                            ))}
                        </List>
                    ) : (
-                        <Typography color="text.secondary">Keine laufenden Bestellungen.</Typography>
+                        <Typography color="text.secondary">{t('noActiveOrders')}</Typography>
                    )
                ) : (
-                    vergangeneBestellungen.length > 0 ? (
+                    inactiveOrders.length > 0 ? (
                        <List>
-                            {vergangeneBestellungen.map(order => (
+                            {inactiveOrders.map(order => (
                                <ListItemButton key={order.id} onClick={() => setSelectedOrder(order)}>
                                    <ListItemText
-                                        primary={`Bestellung #${order.id} • ${order.date}`}
-                                        secondary={`Summe: ${order.total.toFixed(2)} € • ${order.items.length} Artikel`}
+                                        primary={`${t('order')} #${order.id} • ${order.date}`}
+                                        secondary={`${t('sum')}: ${order.total.toFixed(2)} € • ${order.items.length} ${t('items')}`}
                                    />
                                </ListItemButton>
                            ))}
                        </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>
                    <DialogTitle>
-                        {selectedOrder?.status === "laufend" ? "Laufende Bestellung" : "Vergangene Bestellung"} #{selectedOrder?.id}
+                        {`${selectedOrder?.status === "active" ? t('activeOrder') : t('previousOrder')} #${selectedOrder?.id}`}
                    </DialogTitle>
                    <DialogContent dividers>
                        {selectedOrder && (
                            <Stack spacing={2}>
-                                <Typography variant="subtitle1">Bestelldatum: {selectedOrder.date}</Typography>
-                                <Typography variant="subtitle1">Lieferadresse: {selectedOrder.address}</Typography>
+                                <Typography variant="subtitle1">{`${t('orderDate')}: ${selectedOrder.date}`}</Typography>
+                                <Typography variant="subtitle1">{`${t('shippingAddress')}: ${selectedOrder.address}`}</Typography>
                                <Divider />
-                                <Typography variant="subtitle2">Artikel:</Typography>
+                                <Typography variant="subtitle2">{t('orderedItems')}:</Typography>
                                <List dense>
                                    {selectedOrder.items.map((item, idx) => (
                                        <ListItemText
                                            key={idx}
                                            primary={`${item.name} x${item.quantity}`}
-                                            secondary={`Einzelpreis: ${item.price.toFixed(2)} €`}
+                                            secondary={`${t('pricePerItem')}: ${item.price.toFixed(2)} €`}
                                        />
                                    ))}
                                </List>
                                <Divider />
-                                <Typography variant="h6">Gesamtsumme: {selectedOrder.total.toFixed(2)} €</Typography>
+                                <Typography variant="h6">{`${t('sum')}: ${selectedOrder.total.toFixed(2)} €`}</Typography>
                            </Stack>
                        )}
                    </DialogContent>
                    <DialogActions>
-                        {selectedOrder?.status === "laufend" && (
+                        {selectedOrder?.status === "active" && (
                            <Button color="error" onClick={() => handleCancelOrder(selectedOrder.id)}>
-                                Bestellung stornieren
+                                {t('cancelOrder')}
                            </Button>
                        )}
-                        <Button onClick={() => setSelectedOrder(null)}>Schließen</Button>
+                        <Button onClick={() => setSelectedOrder(null)}>{t('close')}</Button>
                    </DialogActions>
                </Dialog>
            </Paper>
        </Box>
    );
-}
+}