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

prettier

Browse Source
This commit is contained in:
Tim
2026-03-11 12:30:20 +01:00
parent e3004bbc72
commit 483cb4b043
46 changed files with 5456 additions and 4850 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
01-frontend/src/App.css
View File

@@ -1,63 +1,64 @@
/* App.css - CSS-Variablen-basierte Version */
:root {
--background-color: #fafafa;
--text-color: #000000;
--navbar-height: 5.1vh;
--page-height: 94vh;
--background-color: #fafafa;
--text-color: #000000;
--navbar-height: 5.1vh;
--page-height: 94vh;
}
#root {
width: 100%;
min-height: 100vh;
background-color: var(--background-color) !important;
color: var(--text-color) !important;
transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1);
width: 100%;
min-height: 100vh;
background-color: var(--background-color) !important;
color: var(--text-color) !important;
transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
html, body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: var(--background-color) !important;
color: var(--text-color) !important;
transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1);
html,
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: var(--background-color) !important;
color: var(--text-color) !important;
transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
filter: drop-shadow(0 0 2em #61dafbaa);
filter: drop-shadow(0 0 2em #61dafbaa);
}
@keyframes logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: no-preference) {
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;
}
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;
}
}
.card {
padding: 2em;
border-radius: 8px;
padding: 2em;
border-radius: 8px;
}
.read-the-docs {
opacity: 0.7;
opacity: 0.7;
}

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

@@ -1,52 +1,51 @@
import {StyledEngineProvider} from '@mui/material/styles';
import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
import {BrowserRouter, Route, Routes} from 'react-router-dom';
import './App.css';
import {BasketProvider} from './helper/BasketProvider';
import NavBar from './helper/navbar/NavBar';
import Account from './pages/Account';
import Contact from './pages/Contact';
import Home from './pages/Home';
import NoPage from './pages/NoPage';
import Orders from './pages/Orders';
import Payment from './pages/Payment';
import Product from './pages/Product';
import {CustomThemeProvider} from './theme/ThemeContext';
import FSComponents from './pages/FSComponents.tsx';
import AdminPanel from './pages/AdminPanel';
import {AccountProvider} from './helper/AccountProvider.tsx';
import {CookiesProvider} from 'react-cookie';
import { StyledEngineProvider } from "@mui/material/styles";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import "./App.css";
import { BasketProvider } from "./helper/BasketProvider";
import NavBar from "./helper/navbar/NavBar";
import Account from "./pages/Account";
import Contact from "./pages/Contact";
import Home from "./pages/Home";
import NoPage from "./pages/NoPage";
import Orders from "./pages/Orders";
import Payment from "./pages/Payment";
import Product from "./pages/Product";
import { CustomThemeProvider } from "./theme/ThemeContext";
import FSComponents from "./pages/FSComponents.tsx";
import AdminPanel from "./pages/AdminPanel";
import { AccountProvider } from "./helper/AccountProvider.tsx";
import { CookiesProvider } from "react-cookie";
export default function App() {
const queryClient = new QueryClient();
const queryClient = new QueryClient();
return (
<QueryClientProvider client={queryClient}>
<StyledEngineProvider injectFirst>
<CustomThemeProvider>
<CookiesProvider>
<AccountProvider>
<BasketProvider>
<BrowserRouter>
<NavBar/>
<Routes>
<Route path="/" element={<Home/>}/>
<Route path="*" element={<NoPage/>}/>
<Route path="/product/:id" element={<Product/>}/>
<Route path="/checkout" element={<Payment/>}/>
<Route path="/components" element={<FSComponents/>}/>
<Route path="/contact" element={<Contact/>}/>
<Route path='/account' element={<Account/>}/>
<Route path='/orders' element={<Orders/>}/>
<Route path='/admin' element={<AdminPanel/>}/>
</Routes>
</BrowserRouter>
</BasketProvider>
</AccountProvider>
</CookiesProvider>
</CustomThemeProvider>
</StyledEngineProvider>
</QueryClientProvider>
)
return (
<QueryClientProvider client={queryClient}>
<StyledEngineProvider injectFirst>
<CustomThemeProvider>
<CookiesProvider>
<AccountProvider>
<BasketProvider>
<BrowserRouter>
<NavBar />
<Routes>
<Route path="/" element={<Home />} />
<Route path="*" element={<NoPage />} />
<Route path="/product/:id" element={<Product />} />
<Route path="/checkout" element={<Payment />} />
<Route path="/components" element={<FSComponents />} />
<Route path="/contact" element={<Contact />} />
<Route path="/account" element={<Account />} />
<Route path="/orders" element={<Orders />} />
<Route path="/admin" element={<AdminPanel />} />
</Routes>
</BrowserRouter>
</BasketProvider>
</AccountProvider>
</CookiesProvider>
</CustomThemeProvider>
</StyledEngineProvider>
</QueryClientProvider>
);
}

75
01-frontend/src/components/Account.tsx
View File

@@ -1,58 +1,57 @@
type AccountType = {
id: number;
customer: {
id: number;
customer: {
id: number;
name: string;
surname: string;
address: string;
country: string;
zip: string;
};
password: string;
langI18n: string;
admin: boolean;
email: string;
name: string;
surname: string;
address: string;
country: string;
zip: string;
};
password: string;
langI18n: string;
admin: boolean;
email: string;
};
export default AccountType;
export type CustomerType =
{
id: number;
name: string;
surname: string;
address: string;
country: string;
zip: string;
}
export type CustomerType = {
id: number;
name: string;
surname: string;
address: string;
country: string;
zip: string;
};
export type SubmitLogin = {
email: string;
password: string;
email: string;
password: string;
};
export type SubmitLoginSession = {
email: string;
session: string;
email: string;
session: string;
};
export type AdminAccountOperation = {
email: string;
uuid: string;
accountId: number;
}
email: string;
uuid: string;
accountId: number;
};
export type User = {
password: string;
email: string;
customerId: number;
session: string;
isAdmin: boolean;
// weitere Felder nach Bedarf
password: string;
email: string;
customerId: number;
session: string;
isAdmin: boolean;
// weitere Felder nach Bedarf
};
export type AccountContextType = {
user: User | null;
login: (userData: User) => void;
logout: () => void;
user: User | null;
login: (userData: User) => void;
logout: () => void;
};

66
01-frontend/src/components/Item.tsx
View File

@@ -1,43 +1,43 @@
export type Item = {
id: number;
uuid: string;
name: string;
description: string;
price100: number;
stock: number;
stockExpected: number;
category: string;
rating: number;
discount100: number;
id: number;
uuid: string;
name: string;
description: string;
price100: number;
stock: number;
stockExpected: number;
category: string;
rating: number;
discount100: number;
};
type ItemWithImage = {
id: number;
uuid: string;
name: string;
description: string;
price100: number;
stock: number;
stockExpected: number;
category: string;
rating: number;
discount100: number;
image: string;
id: number;
uuid: string;
name: string;
description: string;
price100: number;
stock: number;
stockExpected: number;
category: string;
rating: number;
discount100: number;
image: string;
};
export type ItemWithFSImage = {
id: number;
uuid: string;
name: string;
description: string;
price100: number;
stock: number;
stockExpected: number;
category: string;
rating: number;
discount100: number;
image: string;
farmImage: string;
id: number;
uuid: string;
name: string;
description: string;
price100: number;
stock: number;
stockExpected: number;
category: string;
rating: number;
discount100: number;
image: string;
farmImage: string;
};
export default ItemWithImage;

47
01-frontend/src/components/Order.tsx
View File

@@ -1,40 +1,39 @@
export enum OrderStatusEnum {
ORDERED = 'ORDERED',
IN_PROGRESS = 'IN_PROGRESS',
ISSUES = 'ISSUES',
DELIVERED = 'DELIVERED',
CANCELLED = 'CANCELLED',
ORDERED = "ORDERED",
IN_PROGRESS = "IN_PROGRESS",
ISSUES = "ISSUES",
DELIVERED = "DELIVERED",
CANCELLED = "CANCELLED",
}
type OrderType = {
id: number;
customerId: number;
time: number;
status: OrderStatusEnum;
orderItems: { id: number; amount: number; article: string }[];
total: number;
id: number;
customerId: number;
time: number;
status: OrderStatusEnum;
orderItems: { id: number; amount: number; article: string }[];
total: number;
};
export default OrderType;
export type ShippingDetails = {
firstName: string;
lastName: string;
telefon: string;
address: string;
postalCode: string;
city: string;
country: string;
firstName: string;
lastName: string;
telefon: string;
address: string;
postalCode: string;
city: string;
country: string;
};
export type OrderItem = {
id: string;
amount: number;
article: string; // UUID of the item
id: string;
amount: number;
article: string; // UUID of the item
};
export type OrderPatch = {
id: number;
status: OrderStatusEnum;
id: number;
status: OrderStatusEnum;
};

6
01-frontend/src/components/Rating.tsx
View File

@@ -1,7 +1,7 @@
type RatingType = {
rating: number;
content: string;
timestamp: number;
rating: number;
content: string;
timestamp: number;
};
export default RatingType;

6
01-frontend/src/components/RatingSubmit.tsx
View File

@@ -1,7 +1,7 @@
type RatingSubmitType = {
articleId: string;
rating: number;
content: string;
articleId: string;
rating: number;
content: string;
};
export default RatingSubmitType;

28
01-frontend/src/components/i18n/i18n.ts
View File

@@ -1,19 +1,19 @@
import i18next from "i18next";
import {initReactI18next} from "react-i18next";
import { initReactI18next } from "react-i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import HttpBackend from "i18next-http-backend";
i18next
.use(HttpBackend)
.use(LanguageDetector)
.use(initReactI18next)
.init({
fallbackLng: "en",
debug: false,
interpolation: {
escapeValue: false,
},
backend: {
loadPath: "/locales/{{lng}}/translation.json",
}
});
.use(HttpBackend)
.use(LanguageDetector)
.use(initReactI18next)
.init({
fallbackLng: "en",
debug: false,
interpolation: {
escapeValue: false,
},
backend: {
loadPath: "/locales/{{lng}}/translation.json",
},
});

64
01-frontend/src/helper/AccountProvider.tsx
View File

@@ -1,42 +1,48 @@
import {createContext, ReactNode, useContext, useEffect, useState} from "react";
import {AccountContextType, User} from "../components/Account";
import {useCookies} from 'react-cookie';
import {
createContext,
ReactNode,
useContext,
useEffect,
useState,
} from "react";
import { AccountContextType, User } from "../components/Account";
import { useCookies } from "react-cookie";
const AccountContext = createContext<AccountContextType | undefined>(undefined);
export const AccountProvider = ({children}: { children: ReactNode }) => {
const [cookies, setCookie] = useCookies(["account"]);
export const AccountProvider = ({ children }: { children: ReactNode }) => {
const [cookies, setCookie] = useCookies(["account"]);
const initialAccount =
typeof cookies.account === "object" && !Array.isArray(cookies.account)
? cookies.account
: null;
const [user, setUser] = useState<User | null>(initialAccount);
const initialAccount =
typeof cookies.account === "object" && !Array.isArray(cookies.account)
? cookies.account
: null;
const [user, setUser] = useState<User | null>(initialAccount);
const login = (userData: User) => {
setUser(userData);
};
const login = (userData: User) => {
setUser(userData);
};
const logout = () => {
setUser(null);
};
const logout = () => {
setUser(null);
};
useEffect(() => {
setCookie("account", user, {path: "/", maxAge: 3600 * 24 * 7});
}, [user, setCookie]);
useEffect(() => {
setCookie("account", user, { path: "/", maxAge: 3600 * 24 * 7 });
}, [user, setCookie]);
return (
<AccountContext.Provider value={{user, login, logout}}>
{children}
</AccountContext.Provider>
);
return (
<AccountContext.Provider value={{ user, login, logout }}>
{children}
</AccountContext.Provider>
);
};
// eslint-disable-next-line react-refresh/only-export-components
export const useAccount = () => {
const context = useContext(AccountContext);
if (!context) {
throw new Error("useAccount must be used within an AccountProvider");
}
return context;
const context = useContext(AccountContext);
if (!context) {
throw new Error("useAccount must be used within an AccountProvider");
}
return context;
};

88
01-frontend/src/helper/BasketProvider.tsx
View File

@@ -1,60 +1,64 @@
import React, {createContext, useContext, useEffect, useState} from 'react';
import Item from '../components/Item';
import {useCookies} from 'react-cookie';
import React, { createContext, useContext, useEffect, useState } from "react";
import Item from "../components/Item";
import { useCookies } from "react-cookie";
export interface BasketItem {
item: Item;
quantity: number;
item: Item;
quantity: number;
}
interface BasketContextType {
basket: BasketItem[];
addToBasket: (item: Item, quantity: number) => void;
clearBasket: () => void;
basket: BasketItem[];
addToBasket: (item: Item, quantity: number) => void;
clearBasket: () => void;
}
const BasketContext = createContext<BasketContextType | undefined>(undefined);
export const BasketProvider: React.FC<{ children: React.ReactNode }> = ({children}) => {
const [cookies, setCookie] = useCookies(["basket"]);
const [basket, setBasket] = useState<BasketItem[]>(cookies.basket || []);
export const BasketProvider: React.FC<{ children: React.ReactNode }> = ({
children,
}) => {
const [cookies, setCookie] = useCookies(["basket"]);
const [basket, setBasket] = useState<BasketItem[]>(cookies.basket || []);
const addToBasket = (item: Item, quantity: number) => {
setBasket((prevBasket) => {
const existingItem = prevBasket.find((basketItem) => basketItem.item.uuid === item.uuid);
if (existingItem) {
// Update quantity if item already exists
return prevBasket.map((basketItem) =>
basketItem.item.uuid === item.uuid
? {...basketItem, quantity: basketItem.quantity + quantity}
: basketItem
);
}
// Add new item to basket
return [...prevBasket, {item, quantity}];
});
};
const addToBasket = (item: Item, quantity: number) => {
setBasket((prevBasket) => {
const existingItem = prevBasket.find(
(basketItem) => basketItem.item.uuid === item.uuid,
);
if (existingItem) {
// Update quantity if item already exists
return prevBasket.map((basketItem) =>
basketItem.item.uuid === item.uuid
? { ...basketItem, quantity: basketItem.quantity + quantity }
: basketItem,
);
}
// Add new item to basket
return [...prevBasket, { item, quantity }];
});
};
const clearBasket = () => {
setBasket([]);
};
const clearBasket = () => {
setBasket([]);
};
useEffect(() => {
setCookie("basket", basket, {path: "/", maxAge: 3600 * 24 * 7}); // 7 Tage
}, [basket, setCookie]);
useEffect(() => {
setCookie("basket", basket, { path: "/", maxAge: 3600 * 24 * 7 }); // 7 Tage
}, [basket, setCookie]);
return (
<BasketContext.Provider value={{basket, addToBasket, clearBasket}}>
{children}
</BasketContext.Provider>
);
return (
<BasketContext.Provider value={{ basket, addToBasket, clearBasket }}>
{children}
</BasketContext.Provider>
);
};
// eslint-disable-next-line react-refresh/only-export-components
export const useBasket = () => {
const context = useContext(BasketContext);
if (!context) {
throw new Error('useBasket must be used within a BasketProvider');
}
return context;
const context = useContext(BasketContext);
if (!context) {
throw new Error("useBasket must be used within a BasketProvider");
}
return context;
};

358
01-frontend/src/helper/adminpanel/AccountsInfo.tsx
View File

@@ -1,183 +1,211 @@
import DeleteIcon from "@mui/icons-material/Delete";
import EditIcon from "@mui/icons-material/Edit";
import {Box, Button, IconButton, Toolbar, useTheme} from "@mui/material";
import {DataGrid, GridColDef, GridRowId, GridRowSelectionModel} from "@mui/x-data-grid";
import {useMutation, useQuery} from "@tanstack/react-query";
import {useEffect, useState} from "react";
import {useTranslation} from "react-i18next";
import AccountType, {AdminAccountOperation, CustomerType} from "../../components/Account";
import {useAccount} from "../AccountProvider";
import {deleteAccountAdmin, fetchAccounts, updateAccountAdmin} from "../query/Queries";
import { Box, Button, IconButton, Toolbar, useTheme } from "@mui/material";
import {
DataGrid,
GridColDef,
GridRowId,
GridRowSelectionModel,
} from "@mui/x-data-grid";
import { useMutation, useQuery } from "@tanstack/react-query";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import AccountType, {
AdminAccountOperation,
CustomerType,
} from "../../components/Account";
import { useAccount } from "../AccountProvider";
import {
deleteAccountAdmin,
fetchAccounts,
updateAccountAdmin,
} from "../query/Queries";
import CustomerEditDialog from "./CustomerEditDialog";
export default function AccountsInfo() {
const theme = useTheme();
const {t} = useTranslation();
const theme = useTheme();
const { t } = useTranslation();
const [customerData, setCustomerData] = useState<CustomerType>({
id: 0,
name: "",
surname: "",
address: "",
zip: "",
country: ""
});
const [customerData, setCustomerData] = useState<CustomerType>({
id: 0,
name: "",
surname: "",
address: "",
zip: "",
country: "",
});
async function handleCustomerEdit(account: AccountType) {
setCustomerData(account.customer);
setOpen(true);
async function handleCustomerEdit(account: AccountType) {
setCustomerData(account.customer);
setOpen(true);
}
const [rows, setRows] = useState<AccountType[]>([]);
const [selectedRows, setSelectedRows] = useState<Set<GridRowId>>(new Set());
const { user: loginData } = useAccount();
const { data, refetch } = useQuery({
queryKey: ["fetchAccounts", loginData],
queryFn: () =>
fetchAccounts(
loginData
? loginData
: {
email: "",
password: "",
session: "",
customerId: -1,
isAdmin: false,
},
),
retry: 3,
retryDelay: 1000,
});
const deleteAccount = useMutation({
mutationFn: (user: AdminAccountOperation) => deleteAccountAdmin(user),
});
useEffect(() => {
if (data) {
setRows(data);
}
}, [data]);
const [rows, setRows] = useState<AccountType[]>([]);
const [selectedRows, setSelectedRows] = useState<Set<GridRowId>>(new Set());
const handleSelectionChange = (newSelection: GridRowSelectionModel) => {
setSelectedRows(newSelection.ids);
};
const {user: loginData} = useAccount();
const {data, refetch} = useQuery({
queryKey: ["fetchAccounts", loginData],
queryFn: () => fetchAccounts(loginData ? loginData : {
email: "",
password: "",
session: "",
customerId: -1,
isAdmin: false
}),
retry: 3,
retryDelay: 1000,
const handleDeleteSelected = async () => {
selectedRows.forEach(async (rowId) => {
let id = rows.find((row) => row.id === rowId)?.id;
if (id === undefined) id = -1;
await deleteAccount.mutateAsync({
email: loginData?.email || "",
uuid: loginData?.session || "",
accountId: id,
});
});
const deleteAccount = useMutation({
mutationFn: (user: AdminAccountOperation) =>
deleteAccountAdmin(user),
});
setRows(rows.filter((row) => !selectedRows.has(row.id)));
};
useEffect(() => {
if (data) {
setRows(data);
}
}, [data]);
const updateAdmin = useMutation({
mutationFn: (account: AccountType) =>
updateAccountAdmin(
account,
loginData
? loginData
: {
email: "",
password: "",
session: "",
customerId: -1,
isAdmin: false,
},
),
});
const handleSelectionChange = (newSelection: GridRowSelectionModel) => {
setSelectedRows(newSelection.ids);
};
const columns: GridColDef<(typeof rows)[number]>[] = [
{ field: "id", headerName: "ID", width: 60 },
{
field: "admin",
headerName: t("admin"),
type: "boolean",
width: 90,
editable: true,
},
{
field: "email",
headerName: t("email"),
width: 150,
editable: false,
},
{
field: "langI18n",
headerName: t("language"),
width: 150,
editable: false,
},
{
//edit billing information button
field: "customer",
headerName: t("address"),
width: 90,
sortable: false,
disableReorder: true,
disableColumnMenu: true,
renderCell: (params) => (
<IconButton onClick={() => handleCustomerEdit(params.row)}>
{" "}
<EditIcon />{" "}
</IconButton>
),
},
];
const handleDeleteSelected = async () => {
selectedRows.forEach(async (rowId) => {
let id = rows.find((row) => row.id === rowId)?.id
if(id === undefined) id = -1;
await deleteAccount.mutateAsync({
email: loginData?.email || '',
uuid: loginData?.session || '',
accountId: id,
});
})
const [open, setOpen] = useState(false);
setRows(rows.filter((row) => !selectedRows.has(row.id)));
};
const handleCustomerEditSubmit = async () => {
setOpen(false);
await refetch();
};
const updateAdmin = useMutation({
mutationFn: (account: AccountType) =>
updateAccountAdmin(account, loginData ? loginData : {
email: "",
password: "",
session: "",
customerId: -1,
isAdmin: false
}),
});
const columns: GridColDef<(typeof rows)[number]>[] = [
{field: 'id', headerName: 'ID', width: 60},
{
field: 'admin',
headerName: t('admin'),
type: "boolean",
width: 90,
editable: true
},
{
field: 'email',
headerName: t('email'),
width: 150,
editable: false,
},
{
field: 'langI18n',
headerName: t('language'),
width: 150,
editable: false,
},
{ //edit billing information button
field: "customer",
headerName: t('address'),
width: 90,
sortable: false,
disableReorder: true,
disableColumnMenu: true,
renderCell: params => <IconButton onClick={() => handleCustomerEdit(params.row)}> <EditIcon/> </IconButton>,
}
];
const [open, setOpen] = useState(false);
const handleCustomerEditSubmit = async () => {
setOpen(false);
await refetch();
};
return (
<>
<Box
className="page-table"
sx={{
backgroundColor: theme.palette.background.paper,
color: theme.palette.text.secondary
}}
>
<DataGrid
rows={rows}
columns={columns}
initialState={{}}
checkboxSelection
disableRowSelectionOnClick
onRowSelectionModelChange={handleSelectionChange}
slots={{
toolbar: () => (
<Toolbar>
<Button
variant="contained"
color="error"
startIcon={<DeleteIcon/>}
onClick={handleDeleteSelected}
disabled={selectedRows.size === 0}
sx={{
marginRight: 1
}}
>
{t('deleteAccount')}
</Button>
</Toolbar>
)
}}
showToolbar
processRowUpdate={async (updatedRow) => {
const originalRow = rows.find(row => row.id === updatedRow.id);
if (originalRow && originalRow.admin !== updatedRow.admin) {
await updateAdmin.mutateAsync(updatedRow);
}
setRows(rows.map(row => row.id === updatedRow.id ? updatedRow : row));
return updatedRow;
}}
/>
</Box>
<CustomerEditDialog
open={open}
onClose={() => setOpen(false)}
onSubmit={handleCustomerEditSubmit}
customerData={customerData}
setCustomerData={setCustomerData}
/>
</>
);
return (
<>
<Box
className="page-table"
sx={{
backgroundColor: theme.palette.background.paper,
color: theme.palette.text.secondary,
}}
>
<DataGrid
rows={rows}
columns={columns}
initialState={{}}
checkboxSelection
disableRowSelectionOnClick
onRowSelectionModelChange={handleSelectionChange}
slots={{
toolbar: () => (
<Toolbar>
<Button
variant="contained"
color="error"
startIcon={<DeleteIcon />}
onClick={handleDeleteSelected}
disabled={selectedRows.size === 0}
sx={{
marginRight: 1,
}}
>
{t("deleteAccount")}
</Button>
</Toolbar>
),
}}
showToolbar
processRowUpdate={async (updatedRow) => {
const originalRow = rows.find((row) => row.id === updatedRow.id);
if (originalRow && originalRow.admin !== updatedRow.admin) {
await updateAdmin.mutateAsync(updatedRow);
}
setRows(
rows.map((row) => (row.id === updatedRow.id ? updatedRow : row)),
);
return updatedRow;
}}
/>
</Box>
<CustomerEditDialog
open={open}
onClose={() => setOpen(false)}
onSubmit={handleCustomerEditSubmit}
customerData={customerData}
setCustomerData={setCustomerData}
/>
</>
);
}

209
01-frontend/src/helper/adminpanel/CustomerEditDialog.tsx
View File

@@ -1,108 +1,123 @@
import {Button, Dialog, DialogActions, DialogContent, DialogTitle, TextField} from "@mui/material";
import {useMutation} from "@tanstack/react-query";
import React, {useEffect} from "react";
import {useTranslation} from "react-i18next";
import {CustomerType} from "../../components/Account";
import {updateCustomer} from "../query/Queries"; // Importiere die Funktion für die Registrierung
import {
Button,
Dialog,
DialogActions,
DialogContent,
DialogTitle,
TextField,
} from "@mui/material";
import { useMutation } from "@tanstack/react-query";
import React, { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { CustomerType } from "../../components/Account";
import { updateCustomer } from "../query/Queries"; // Importiere die Funktion für die Registrierung
type CustomerDialogProps = {
open: boolean;
onClose: () => void;
onSubmit: () => void; // Funktion, die aufgerufen wird, wenn der Login erfolgreich ist
customerData: CustomerType;
setCustomerData: React.Dispatch<React.SetStateAction<CustomerType>>;
open: boolean;
onClose: () => void;
onSubmit: () => void; // Funktion, die aufgerufen wird, wenn der Login erfolgreich ist
customerData: CustomerType;
setCustomerData: React.Dispatch<React.SetStateAction<CustomerType>>;
};
const CustomerEditDialog: React.FC<CustomerDialogProps> = ({
open,
onClose,
customerData,
setCustomerData,
onSubmit
}) => {
open,
onClose,
customerData,
setCustomerData,
onSubmit,
}) => {
const { t } = useTranslation();
const {t} = useTranslation();
useEffect(() => {
if (open) {
const active = document.activeElement as HTMLElement | null;
if (active && typeof active.blur === "function") {
active.blur();
}
}
}, [open]);
const changeCustomer = useMutation({
mutationFn: (customer: CustomerType) =>
updateCustomer(customer),
});
const handleSave = async () => {
const customer: CustomerType = {
id: customerData.id,
name: customerData.name,
surname: customerData.surname,
address: customerData.address,
zip: customerData.zip,
country: customerData.country,
};
await changeCustomer.mutateAsync(customer);
onSubmit(); // Rufe die onSubmit-Funktion auf, um den Dialog zu schließen und die Änderungen zu übernehmen
onClose(); // Schließe den Dialog
useEffect(() => {
if (open) {
const active = document.activeElement as HTMLElement | null;
if (active && typeof active.blur === "function") {
active.blur();
}
}
}, [open]);
return (
<Dialog open={open} onClose={onClose} disableEnforceFocus>
<DialogTitle>{t('changeCustomer')}</DialogTitle>
<DialogContent>
<TextField
margin="dense"
label={t("name")}
type="text"
fullWidth
value={customerData.name}
onChange={e => setCustomerData(prev => ({...prev, name: e.target.value}))}
/>
<TextField
margin="dense"
label={t("surname")}
type="text"
fullWidth
value={customerData.surname}
onChange={e => setCustomerData(prev => ({...prev, surname: e.target.value}))}
/>
<TextField
margin="dense"
label={t("address")}
type="text"
fullWidth
value={customerData.address}
onChange={e => setCustomerData(prev => ({...prev, address: e.target.value}))}
/>
<TextField
margin="dense"
label={t("zip")}
type="text"
fullWidth
value={customerData.zip}
onChange={e => setCustomerData(prev => ({...prev, zip: e.target.value}))}
/>
<TextField
margin="dense"
label={t("country")}
type="text"
fullWidth
value={customerData.country}
onChange={e => setCustomerData(prev => ({...prev, country: e.target.value}))}
/>
</DialogContent>
<DialogActions>
<Button variant="contained" color="primary" onClick={handleSave}>
{t("save")}
</Button>
</DialogActions>
</Dialog>
);
const changeCustomer = useMutation({
mutationFn: (customer: CustomerType) => updateCustomer(customer),
});
const handleSave = async () => {
const customer: CustomerType = {
id: customerData.id,
name: customerData.name,
surname: customerData.surname,
address: customerData.address,
zip: customerData.zip,
country: customerData.country,
};
await changeCustomer.mutateAsync(customer);
onSubmit(); // Rufe die onSubmit-Funktion auf, um den Dialog zu schließen und die Änderungen zu übernehmen
onClose(); // Schließe den Dialog
};
return (
<Dialog open={open} onClose={onClose} disableEnforceFocus>
<DialogTitle>{t("changeCustomer")}</DialogTitle>
<DialogContent>
<TextField
margin="dense"
label={t("name")}
type="text"
fullWidth
value={customerData.name}
onChange={(e) =>
setCustomerData((prev) => ({ ...prev, name: e.target.value }))
}
/>
<TextField
margin="dense"
label={t("surname")}
type="text"
fullWidth
value={customerData.surname}
onChange={(e) =>
setCustomerData((prev) => ({ ...prev, surname: e.target.value }))
}
/>
<TextField
margin="dense"
label={t("address")}
type="text"
fullWidth
value={customerData.address}
onChange={(e) =>
setCustomerData((prev) => ({ ...prev, address: e.target.value }))
}
/>
<TextField
margin="dense"
label={t("zip")}
type="text"
fullWidth
value={customerData.zip}
onChange={(e) =>
setCustomerData((prev) => ({ ...prev, zip: e.target.value }))
}
/>
<TextField
margin="dense"
label={t("country")}
type="text"
fullWidth
value={customerData.country}
onChange={(e) =>
setCustomerData((prev) => ({ ...prev, country: e.target.value }))
}
/>
</DialogContent>
<DialogActions>
<Button variant="contained" color="primary" onClick={handleSave}>
{t("save")}
</Button>
</DialogActions>
</Dialog>
);
};
export default CustomerEditDialog;

428
01-frontend/src/helper/adminpanel/ItemImageDialog.tsx
View File

@@ -1,229 +1,243 @@
import React, {useState} from 'react';
import React, { useState } from "react";
import {
Alert,
Box,
Button,
CircularProgress,
Dialog,
DialogActions,
DialogContent,
DialogTitle,
IconButton,
Typography,
} from '@mui/material';
import CloudUploadIcon from '@mui/icons-material/CloudUpload';
import CloseIcon from '@mui/icons-material/Close';
import {useTranslation} from 'react-i18next';
import {Item} from '../../components/Item.tsx';
Alert,
Box,
Button,
CircularProgress,
Dialog,
DialogActions,
DialogContent,
DialogTitle,
IconButton,
Typography,
} from "@mui/material";
import CloudUploadIcon from "@mui/icons-material/CloudUpload";
import CloseIcon from "@mui/icons-material/Close";
import { useTranslation } from "react-i18next";
import { Item } from "../../components/Item.tsx";
interface ItemImageDialogProps {
open: boolean;
onClose: () => void;
item: Item;
onSuccess?: () => void;
isFarmStationImage: boolean;
open: boolean;
onClose: () => void;
item: Item;
onSuccess?: () => void;
isFarmStationImage: boolean;
}
export default function ItemImageDialog({open, onClose, item, onSuccess, isFarmStationImage}: ItemImageDialogProps) {
const {t} = useTranslation();
const [selectedFile, setSelectedFile] = useState<File | null>(null);
const [preview, setPreview] = useState<string | null>(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const [success, setSuccess] = useState(false);
export default function ItemImageDialog({
open,
onClose,
item,
onSuccess,
isFarmStationImage,
}: ItemImageDialogProps) {
const { t } = useTranslation();
const [selectedFile, setSelectedFile] = useState<File | null>(null);
const [preview, setPreview] = useState<string | null>(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const [success, setSuccess] = useState(false);
const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
const file = event.target.files?.[0];
if (file) {
// Validate file type
if (!file.type.startsWith('image/')) {
setError('Please select a valid image file');
return;
}
const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
const file = event.target.files?.[0];
if (file) {
// Validate file type
if (!file.type.startsWith("image/")) {
setError("Please select a valid image file");
return;
}
// Validate file size (5MB limit)
if (file.size > 5 * 1024 * 1024) {
setError('File size must be less than 5MB');
return;
}
// Validate file size (5MB limit)
if (file.size > 5 * 1024 * 1024) {
setError("File size must be less than 5MB");
return;
}
setSelectedFile(file);
setError(null);
setSelectedFile(file);
setError(null);
// Create preview
const reader = new FileReader();
reader.onload = (e) => {
setPreview(e.target?.result as string);
};
reader.readAsDataURL(file);
}
};
// Create preview
const reader = new FileReader();
reader.onload = (e) => {
setPreview(e.target?.result as string);
};
reader.readAsDataURL(file);
}
};
const convertFileToBase64 = (file: File): Promise<string> => {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => {
const result = reader.result as string;
// Remove the data URL prefix (e.g., "data:image/jpeg;base64,")
const base64 = result.split(',')[1];
resolve(base64);
};
reader.onerror = reject;
reader.readAsDataURL(file);
});
};
const convertFileToBase64 = (file: File): Promise<string> => {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => {
const result = reader.result as string;
// Remove the data URL prefix (e.g., "data:image/jpeg;base64,")
const base64 = result.split(",")[1];
resolve(base64);
};
reader.onerror = reject;
reader.readAsDataURL(file);
});
};
const handleUpload = async () => {
if (!selectedFile) {
setError('Please select an image file');
return;
}
const handleUpload = async () => {
if (!selectedFile) {
setError("Please select an image file");
return;
}
setLoading(true);
setError(null);
setLoading(true);
setError(null);
try {
const base64Image = await convertFileToBase64(selectedFile);
try {
const base64Image = await convertFileToBase64(selectedFile);
const response = await fetch((isFarmStationImage ? 'http://localhost:8085/farm' : 'http://localhost:8085/image') + '?uuid=' + item.uuid, {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
},
body: base64Image,
});
const response = await fetch(
(isFarmStationImage
? "http://localhost:8085/farm"
: "http://localhost:8085/image") +
"?uuid=" +
item.uuid,
{
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: base64Image,
},
);
if (!response.ok) {
console.error('Failed to upload image:', await response.text());
}
if (!response.ok) {
console.error("Failed to upload image:", await response.text());
}
setSuccess(true);
onSuccess?.();
setSuccess(true);
onSuccess?.();
// Auto-close dialog after 1.5 seconds
setTimeout(() => {
handleClose();
}, 1500);
// Auto-close dialog after 1.5 seconds
setTimeout(() => {
handleClose();
}, 1500);
} catch (err) {
setError(err instanceof Error ? err.message : "Failed to upload image");
} finally {
setLoading(false);
}
};
} catch (err) {
setError(err instanceof Error ? err.message : 'Failed to upload image');
} finally {
setLoading(false);
}
};
const handleClose = () => {
setSelectedFile(null);
setPreview(null);
setError(null);
setSuccess(false);
setLoading(false);
onClose();
};
const handleClose = () => {
setSelectedFile(null);
setPreview(null);
setError(null);
setSuccess(false);
setLoading(false);
onClose();
};
return (
<Dialog open={open} onClose={handleClose} maxWidth="sm" fullWidth>
<DialogTitle
sx={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
}}
>
{t("uploadImage")} - {item.name}
<IconButton onClick={handleClose} size="small">
<CloseIcon />
</IconButton>
</DialogTitle>
return (
<Dialog
open={open}
onClose={handleClose}
maxWidth="sm"
fullWidth
<DialogContent>
<Box sx={{ display: "flex", flexDirection: "column", gap: 2, py: 1 }}>
{/* Item Info */}
<Box>
<Typography variant="body2" color="textSecondary">
{t("item")}: {item.name}
</Typography>
<Typography variant="body2" color="textSecondary">
UUID: {item.uuid}
</Typography>
<Typography variant="body2" color="error">
{t("imageUploadNotice")}
</Typography>
{isFarmStationImage && (
<Typography variant="body2" color="error">
{t("imageUploadNoticeFs")}
</Typography>
)}
</Box>
{/* File Upload */}
<Box>
<input
accept="image/*"
style={{ display: "none" }}
id="image-upload"
type="file"
onChange={handleFileSelect}
/>
<label htmlFor="image-upload">
<Button
variant="outlined"
component="span"
startIcon={<CloudUploadIcon />}
fullWidth
sx={{ mb: 2 }}
>
{selectedFile ? selectedFile.name : t("selectImage")}
</Button>
</label>
</Box>
{/* Image Preview */}
{preview && (
<Box sx={{ textAlign: "center" }}>
<img
src={preview}
alt="Preview"
style={{
maxWidth: "100%",
maxHeight: "300px",
objectFit: "contain",
border: "1px solid #ddd",
borderRadius: "4px",
}}
/>
<Typography variant="caption" display="block" sx={{ mt: 1 }}>
{selectedFile?.name} (
{(selectedFile?.size || 0 / 1024).toFixed(1)} KB)
</Typography>
</Box>
)}
{/* Error Message */}
{error && (
<Alert severity="error" onClose={() => setError(null)}>
{error}
</Alert>
)}
{/* Success Message */}
{success && (
<Alert severity="success">{t("imageUploadedSuccessfully")}</Alert>
)}
</Box>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} disabled={loading}>
{t("cancel")}
</Button>
<Button
onClick={handleUpload}
variant="contained"
disabled={!selectedFile || loading}
startIcon={loading ? <CircularProgress size={20} /> : undefined}
>
<DialogTitle sx={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
{t('uploadImage')} - {item.name}
<IconButton onClick={handleClose} size="small">
<CloseIcon/>
</IconButton>
</DialogTitle>
<DialogContent>
<Box sx={{display: 'flex', flexDirection: 'column', gap: 2, py: 1}}>
{/* Item Info */}
<Box>
<Typography variant="body2" color="textSecondary">
{t('item')}: {item.name}
</Typography>
<Typography variant="body2" color="textSecondary">
UUID: {item.uuid}
</Typography>
<Typography variant="body2" color="error">
{t('imageUploadNotice')}
</Typography>
{isFarmStationImage && <Typography variant="body2" color="error">
{t('imageUploadNoticeFs')}
</Typography>}
</Box>
{/* File Upload */}
<Box>
<input
accept="image/*"
style={{display: 'none'}}
id="image-upload"
type="file"
onChange={handleFileSelect}
/>
<label htmlFor="image-upload">
<Button
variant="outlined"
component="span"
startIcon={<CloudUploadIcon/>}
fullWidth
sx={{mb: 2}}
>
{selectedFile ? selectedFile.name : t('selectImage')}
</Button>
</label>
</Box>
{/* Image Preview */}
{preview && (
<Box sx={{textAlign: 'center'}}>
<img
src={preview}
alt="Preview"
style={{
maxWidth: '100%',
maxHeight: '300px',
objectFit: 'contain',
border: '1px solid #ddd',
borderRadius: '4px',
}}
/>
<Typography variant="caption" display="block" sx={{mt: 1}}>
{selectedFile?.name} ({(selectedFile?.size || 0 / 1024).toFixed(1)} KB)
</Typography>
</Box>
)}
{/* Error Message */}
{error && (
<Alert severity="error" onClose={() => setError(null)}>
{error}
</Alert>
)}
{/* Success Message */}
{success && (
<Alert severity="success">
{t('imageUploadedSuccessfully')}
</Alert>
)}
</Box>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} disabled={loading}>
{t('cancel')}
</Button>
<Button
onClick={handleUpload}
variant="contained"
disabled={!selectedFile || loading}
startIcon={loading ? <CircularProgress size={20}/> : undefined}
>
{loading ? t('uploading') : t('upload')}
</Button>
</DialogActions>
</Dialog>
);
{loading ? t("uploading") : t("upload")}
</Button>
</DialogActions>
</Dialog>
);
}

502
01-frontend/src/helper/adminpanel/ItemsInfo.tsx
View File

@@ -3,256 +3,294 @@ import DeleteIcon from "@mui/icons-material/Delete";
import EditIcon from "@mui/icons-material/Edit";
import { Box, Button, IconButton, Toolbar, useTheme } from "@mui/material";
import { Gauge, gaugeClasses } from "@mui/x-charts";
import { DataGrid, GridColDef, GridRowId, GridRowSelectionModel } from "@mui/x-data-grid";
import {
DataGrid,
GridColDef,
GridRowId,
GridRowSelectionModel,
} from "@mui/x-data-grid";
import { useMutation, useQuery } from "@tanstack/react-query";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import Item from "../../components/Item";
import { mapValueToColor } from "../../util/ColorUtil.tsx";
import { useAccount } from "../AccountProvider.tsx";
import { deleteItemQuery, fetchItems, updateItemAdmin } from "../query/Queries.tsx";
import {
deleteItemQuery,
fetchItems,
updateItemAdmin,
} from "../query/Queries.tsx";
import ItemImageDialog from "./ItemImageDialog.tsx";
import NewItemDialog from "./NewItemDialog.tsx";
export default function ItemsInfo() {
const theme = useTheme();
const { t } = useTranslation();
const theme = useTheme();
const { t } = useTranslation();
const [rows, setRows] = useState<Item[]>([]);
const [selectedRows, setSelectedRows] = useState<Set<GridRowId>>(new Set());
const [rows, setRows] = useState<Item[]>([]);
const [selectedRows, setSelectedRows] = useState<Set<GridRowId>>(new Set());
const [editImageDialog, setEditImageDialog] = useState(false);
const [newItemDialog, setNewItemDialog] = useState(false);
const [selectedItem, setSelectedItem] = useState<Item | null>(null);
const [isFarmStationImage, setIsFarmStationImage] = useState(false);
const [editImageDialog, setEditImageDialog] = useState(false);
const [newItemDialog, setNewItemDialog] = useState(false);
const [selectedItem, setSelectedItem] = useState<Item | null>(null);
const [isFarmStationImage, setIsFarmStationImage] = useState(false);
function handleImageEdit(item: Item) {
setIsFarmStationImage(false);
setSelectedItem(item);
setEditImageDialog(true);
console.log("IconEdit", item);
}
function handleImageEdit(item: Item) {
setIsFarmStationImage(false);
setSelectedItem(item);
setEditImageDialog(true);
console.log("IconEdit", item);
function handleFarmImageEdit(item: Item) {
setIsFarmStationImage(true);
setSelectedItem(item);
setEditImageDialog(true);
console.log("IconEdit", item);
}
function handleAddItem() {
setNewItemDialog(true);
}
const { user: loginData } = useAccount();
const { data } = useQuery({
queryKey: ["fetchItems", loginData],
queryFn: () => fetchItems(),
retry: 3,
retryDelay: 1000,
});
useEffect(() => {
if (data) {
setRows(data);
}
}, [data]);
function handleFarmImageEdit(item: Item) {
setIsFarmStationImage(true);
setSelectedItem(item);
setEditImageDialog(true);
console.log("IconEdit", item);
}
const handleSelectionChange = (newSelection: GridRowSelectionModel) => {
setSelectedRows(newSelection.ids);
};
const deleteItem = useMutation({
mutationFn: (uuid: string) => deleteItemQuery(uuid),
});
function handleAddItem() {
setNewItemDialog(true);
}
const { user: loginData } = useAccount();
const { data } = useQuery({
queryKey: ["fetchItems", loginData],
queryFn: () => fetchItems(),
retry: 3,
retryDelay: 1000,
});
useEffect(() => {
if (data) {
setRows(data);
}
}, [data]);
const handleSelectionChange = (newSelection: GridRowSelectionModel) => {
setSelectedRows(newSelection.ids);
};
const deleteItem = useMutation({
mutationFn: (uuid: string) =>
deleteItemQuery(uuid),
});
const handleDeleteSelected = async () => {
await Promise.all(
Array.from(selectedRows).map(async (row) => {
await deleteItem.mutateAsync(rows.find(item => item.id === row)?.uuid || "");
})
const handleDeleteSelected = async () => {
await Promise.all(
Array.from(selectedRows).map(async (row) => {
await deleteItem.mutateAsync(
rows.find((item) => item.id === row)?.uuid || "",
);
setRows(rows.filter((row) => !selectedRows.has(row.id)));
};
const updateItem = useMutation({
mutationFn: (item: Item) =>
updateItemAdmin(item),
});
const handleRowUpdate = async (updatedRow: Item) => {
setRows(rows.map(row => row.id === updatedRow.id ? updatedRow : row));
await updateItem.mutateAsync(updatedRow);
return updatedRow;
}
const columns: GridColDef<(typeof rows)[number]>[] = [
{ field: 'id', headerName: 'ID', width: 60 },
{
field: 'uuid',
headerName: t('uuid'),
type: "string",
width: 120,
editable: false
},
{
field: 'name',
headerName: t('name'),
width: 200,
editable: true,
},
{
field: 'category',
headerName: t('category'),
width: 150,
editable: true,
valueFormatter: (val) => t(val),
},
{
field: 'description',
headerName: t('description'),
width: 150,
editable: true,
},
{
field: 'price100',
headerName: t('price100€'),
width: 100,
editable: true,
type: 'number',
valueFormatter: (val) => (val / 100).toFixed(2),
},
{
field: 'discount100',
headerName: t('discount100'),
width: 120,
editable: true,
type: 'number'
},
{
field: 'stock',
headerName: t('stock'),
width: 100,
editable: true,
type: 'number',
renderCell: params => <Gauge value={Math.min(params.row.stock, params.row.stockExpected)} valueMin={0}
valueMax={params.row.stockExpected} startAngle={-90} endAngle={90} sx={{
[`& .${gaugeClasses.valueArc}`]: {
fill: () => {
return mapValueToColor(0, params.row.stockExpected, params.row.stock)
},
},
}} text={() => `${params.row.stock}`} />
},
{
field: 'rating',
headerName: t('rating'),
width: 100,
editable: false, //the rating is averaged from ratings
type: 'number',
renderCell: params => <Gauge value={Math.min(params.row.rating, 10)} valueMin={0} valueMax={10}
startAngle={-90} endAngle={90} sx={{
[`& .${gaugeClasses.valueArc}`]: {
fill: () => {
return mapValueToColor(0, 10, params.row.rating)
},
},
}} text={() => `${params.row.rating.toFixed(2)}`} />
},
{
field: "actualPrice",
headerName: t('actualPrice'),
width: 90,
editable: false,
valueGetter: (_, row) => (row.price100 / 100 * ((100 - row.discount100) / 100)).toFixed(2)
},
{
field: 'images',
headerName: t('images'),
width: 90,
editable: false,
renderCell: params => <IconButton onClick={() => handleImageEdit(params.row)}> <EditIcon /> </IconButton>,
},
{
field: 'farmImage',
headerName: t('fsImage'),
width: 90,
editable: false,
renderCell: params => <IconButton onClick={() => handleFarmImageEdit(params.row)}> <EditIcon />
</IconButton>,
}
];
return (
<Box
className="page-table"
sx={{
backgroundColor: theme.palette.background.paper,
color: theme.palette.text.secondary
}}
>
<DataGrid
rows={rows}
columns={columns}
initialState={{}}
checkboxSelection
disableRowSelectionOnClick
onRowSelectionModelChange={handleSelectionChange}
slots={{
toolbar: () => (
<Toolbar>
<Button
variant="contained"
color="error"
startIcon={<DeleteIcon />}
onClick={handleDeleteSelected}
disabled={selectedRows.size === 0}
sx={{
marginRight: 1
}}
>
{t('deleteProduct')}
</Button>
<Button
variant="contained"
color="primary"
startIcon={<AddIcon/>}
onClick={handleAddItem}
sx={{
marginRight: 1
}}
>
{t('addProduct')}
</Button>
</Toolbar>
)
}}
showToolbar
processRowUpdate={handleRowUpdate}
/>
{selectedItem && (
<ItemImageDialog
open={editImageDialog}
onClose={() => setEditImageDialog(false)}
item={selectedItem}
onSuccess={() => {
// Refresh data or update UI
console.log('Image uploaded successfully');
}}
isFarmStationImage={isFarmStationImage}
/>
)}
<NewItemDialog
open={newItemDialog}
onClose={() => setNewItemDialog(false)}
/>
</Box>
}),
);
setRows(rows.filter((row) => !selectedRows.has(row.id)));
};
const updateItem = useMutation({
mutationFn: (item: Item) => updateItemAdmin(item),
});
const handleRowUpdate = async (updatedRow: Item) => {
setRows(rows.map((row) => (row.id === updatedRow.id ? updatedRow : row)));
await updateItem.mutateAsync(updatedRow);
return updatedRow;
};
const columns: GridColDef<(typeof rows)[number]>[] = [
{ field: "id", headerName: "ID", width: 60 },
{
field: "uuid",
headerName: t("uuid"),
type: "string",
width: 120,
editable: false,
},
{
field: "name",
headerName: t("name"),
width: 200,
editable: true,
},
{
field: "category",
headerName: t("category"),
width: 150,
editable: true,
valueFormatter: (val) => t(val),
},
{
field: "description",
headerName: t("description"),
width: 150,
editable: true,
},
{
field: "price100",
headerName: t("price100€"),
width: 100,
editable: true,
type: "number",
valueFormatter: (val) => (val / 100).toFixed(2),
},
{
field: "discount100",
headerName: t("discount100"),
width: 120,
editable: true,
type: "number",
},
{
field: "stock",
headerName: t("stock"),
width: 100,
editable: true,
type: "number",
renderCell: (params) => (
<Gauge
value={Math.min(params.row.stock, params.row.stockExpected)}
valueMin={0}
valueMax={params.row.stockExpected}
startAngle={-90}
endAngle={90}
sx={{
[`& .${gaugeClasses.valueArc}`]: {
fill: () => {
return mapValueToColor(
0,
params.row.stockExpected,
params.row.stock,
);
},
},
}}
text={() => `${params.row.stock}`}
/>
),
},
{
field: "rating",
headerName: t("rating"),
width: 100,
editable: false, //the rating is averaged from ratings
type: "number",
renderCell: (params) => (
<Gauge
value={Math.min(params.row.rating, 10)}
valueMin={0}
valueMax={10}
startAngle={-90}
endAngle={90}
sx={{
[`& .${gaugeClasses.valueArc}`]: {
fill: () => {
return mapValueToColor(0, 10, params.row.rating);
},
},
}}
text={() => `${params.row.rating.toFixed(2)}`}
/>
),
},
{
field: "actualPrice",
headerName: t("actualPrice"),
width: 90,
editable: false,
valueGetter: (_, row) =>
((row.price100 / 100) * ((100 - row.discount100) / 100)).toFixed(2),
},
{
field: "images",
headerName: t("images"),
width: 90,
editable: false,
renderCell: (params) => (
<IconButton onClick={() => handleImageEdit(params.row)}>
{" "}
<EditIcon />{" "}
</IconButton>
),
},
{
field: "farmImage",
headerName: t("fsImage"),
width: 90,
editable: false,
renderCell: (params) => (
<IconButton onClick={() => handleFarmImageEdit(params.row)}>
{" "}
<EditIcon />
</IconButton>
),
},
];
return (
<Box
className="page-table"
sx={{
backgroundColor: theme.palette.background.paper,
color: theme.palette.text.secondary,
}}
>
<DataGrid
rows={rows}
columns={columns}
initialState={{}}
checkboxSelection
disableRowSelectionOnClick
onRowSelectionModelChange={handleSelectionChange}
slots={{
toolbar: () => (
<Toolbar>
<Button
variant="contained"
color="error"
startIcon={<DeleteIcon />}
onClick={handleDeleteSelected}
disabled={selectedRows.size === 0}
sx={{
marginRight: 1,
}}
>
{t("deleteProduct")}
</Button>
<Button
variant="contained"
color="primary"
startIcon={<AddIcon />}
onClick={handleAddItem}
sx={{
marginRight: 1,
}}
>
{t("addProduct")}
</Button>
</Toolbar>
),
}}
showToolbar
processRowUpdate={handleRowUpdate}
/>
{selectedItem && (
<ItemImageDialog
open={editImageDialog}
onClose={() => setEditImageDialog(false)}
item={selectedItem}
onSuccess={() => {
// Refresh data or update UI
console.log("Image uploaded successfully");
}}
isFarmStationImage={isFarmStationImage}
/>
)}
<NewItemDialog
open={newItemDialog}
onClose={() => setNewItemDialog(false)}
/>
</Box>
);
}

296
01-frontend/src/helper/adminpanel/NewItemDialog.tsx
View File

@@ -1,166 +1,164 @@
import CloseIcon from '@mui/icons-material/Close';
import CloseIcon from "@mui/icons-material/Close";
import {
Alert,
Box,
Button,
Dialog,
DialogActions,
DialogContent,
DialogTitle,
IconButton,
TextField
} from '@mui/material';
import {useMutation} from '@tanstack/react-query';
import {useState} from 'react';
import {useTranslation} from 'react-i18next';
import {Item} from '../../components/Item';
import {submitItem} from '../query/Queries';
Alert,
Box,
Button,
Dialog,
DialogActions,
DialogContent,
DialogTitle,
IconButton,
TextField,
} from "@mui/material";
import { useMutation } from "@tanstack/react-query";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { Item } from "../../components/Item";
import { submitItem } from "../query/Queries";
interface NewItemDialogProps {
open: boolean;
onClose: () => void;
open: boolean;
onClose: () => void;
}
export default function NewItemDialog({open, onClose}: NewItemDialogProps) {
const {t} = useTranslation();
const [item, setItem] = useState<Item>({
id: 0,
uuid: "",
name: "",
description: "",
price100: 0,
stock: 0,
stockExpected: 1,
category: "",
rating: -1,
discount100: 0,
});
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const [success, setSuccess] = useState(false);
export default function NewItemDialog({ open, onClose }: NewItemDialogProps) {
const { t } = useTranslation();
const [item, setItem] = useState<Item>({
id: 0,
uuid: "",
name: "",
description: "",
price100: 0,
stock: 0,
stockExpected: 1,
category: "",
rating: -1,
discount100: 0,
});
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const [success, setSuccess] = useState(false);
const handleClose = () => {
setError(null);
setSuccess(false);
setLoading(false);
onClose();
};
const handleClose = () => {
setError(null);
setSuccess(false);
setLoading(false);
onClose();
};
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setItem({...item, [e.target.name]: e.target.value});
};
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setItem({ ...item, [e.target.name]: e.target.value });
};
const saveItem = useMutation({
mutationFn: (item: Item) =>
submitItem(item),
});
const saveItem = useMutation({
mutationFn: (item: Item) => submitItem(item),
});
const handleSave = async () => {
setLoading(true);
setError(null);
setSuccess(false);
const handleSave = async () => {
setLoading(true);
setError(null);
setSuccess(false);
await saveItem.mutateAsync(item)
await saveItem.mutateAsync(item);
onClose(); // Close the dialog after saving
setLoading(false);
};
onClose(); // Close the dialog after saving
setLoading(false);
};
return (
<Dialog
open={open}
onClose={handleClose}
maxWidth="sm"
return (
<Dialog open={open} onClose={handleClose} maxWidth="sm" fullWidth>
<DialogTitle
sx={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
}}
>
{t("createNewItem")}
<IconButton onClick={handleClose} size="small">
<CloseIcon />
</IconButton>
</DialogTitle>
<DialogContent>
<Box sx={{ display: "flex", flexDirection: "column", gap: 2, py: 1 }}>
{/* Name, Kategorie, Beschreibung, Preis, Rabatt, Bestand, Bestand erwartet */}
<TextField
label={t("name")}
name="name"
value={item.name}
onChange={handleChange}
fullWidth
>
<DialogTitle sx={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
{t('createNewItem')}
<IconButton onClick={handleClose} size="small">
<CloseIcon/>
</IconButton>
</DialogTitle>
/>
<TextField
label={t("category")}
name="category"
value={item.category}
onChange={handleChange}
fullWidth
/>
<TextField
label={t("description")}
name="description"
value={item.description}
onChange={handleChange}
fullWidth
/>
<TextField
label={t("price100")}
name="price100"
value={item.price100}
onChange={handleChange}
fullWidth
type="number"
/>
<TextField
label={t("discount100")}
name="discount100"
value={item.discount100}
onChange={handleChange}
fullWidth
type="number"
/>
<TextField
label={t("stockExpected")}
name="stockExpected"
value={item.stockExpected}
onChange={handleChange}
fullWidth
type="number"
/>
<TextField
label={t("stock")}
name="stock"
value={item.stock}
onChange={handleChange}
fullWidth
type="number"
/>
<DialogContent>
<Box sx={{display: 'flex', flexDirection: 'column', gap: 2, py: 1}}>
{/* Name, Kategorie, Beschreibung, Preis, Rabatt, Bestand, Bestand erwartet */}
<TextField
label={t("name")}
name="name"
value={item.name}
onChange={handleChange}
fullWidth
/>
<TextField
label={t("category")}
name="category"
value={item.category}
onChange={handleChange}
fullWidth
/>
<TextField
label={t("description")}
name="description"
value={item.description}
onChange={handleChange}
fullWidth
/>
<TextField
label={t("price100")}
name="price100"
value={item.price100}
onChange={handleChange}
fullWidth
type='number'
/>
<TextField
label={t("discount100")}
name="discount100"
value={item.discount100}
onChange={handleChange}
fullWidth
type='number'
/>
<TextField
label={t("stockExpected")}
name="stockExpected"
value={item.stockExpected}
onChange={handleChange}
fullWidth
type='number'
/>
<TextField
label={t("stock")}
name="stock"
value={item.stock}
onChange={handleChange}
fullWidth
type='number'
/>
{/* Error Message */}
{error && (
<Alert severity="error" onClose={() => setError(null)}>
{error}
</Alert>
)}
{/* Error Message */}
{error && (
<Alert severity="error" onClose={() => setError(null)}>
{error}
</Alert>
)}
{/* Success Message */}
{success && (
<Alert severity="success">{t("itemCreatedSuccessfully")}</Alert>
)}
</Box>
</DialogContent>
{/* Success Message */}
{success && (
<Alert severity="success">
{t('itemCreatedSuccessfully')}
</Alert>
)}
</Box>
</DialogContent>
<DialogActions>
<Button onClick={handleSave} disabled={loading}>
{t('save')}
</Button>
<Button onClick={handleClose} disabled={loading}>
{t('cancel')}
</Button>
</DialogActions>
</Dialog>
);
<DialogActions>
<Button onClick={handleSave} disabled={loading}>
{t("save")}
</Button>
<Button onClick={handleClose} disabled={loading}>
{t("cancel")}
</Button>
</DialogActions>
</Dialog>
);
}

419
01-frontend/src/helper/adminpanel/OrdersInfo.tsx
View File

@@ -1,231 +1,242 @@
import {
Button,
Card,
CardContent,
Dialog,
DialogActions,
DialogContent,
DialogTitle,
Divider,
List,
ListItemText,
Snackbar,
Stack,
Typography,
useTheme
Button,
Card,
CardContent,
Dialog,
DialogActions,
DialogContent,
DialogTitle,
Divider,
List,
ListItemText,
Snackbar,
Stack,
Typography,
useTheme,
} from "@mui/material";
import {useMutation, useQuery} from "@tanstack/react-query";
import React, {PropsWithChildren, useState} from "react";
import {DndProvider, useDrag, useDrop} from 'react-dnd';
import {HTML5Backend} from 'react-dnd-html5-backend';
import {useTranslation} from "react-i18next";
import OrderType, {OrderPatch, OrderStatusEnum} from "../../components/Order";
import {useAccount} from "../AccountProvider";
import {fetchOrdersAdmin, orderPatch} from "../query/Queries";
import { useMutation, useQuery } from "@tanstack/react-query";
import React, { PropsWithChildren, useState } from "react";
import { DndProvider, useDrag, useDrop } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";
import { useTranslation } from "react-i18next";
import OrderType, { OrderPatch, OrderStatusEnum } from "../../components/Order";
import { useAccount } from "../AccountProvider";
import { fetchOrdersAdmin, orderPatch } from "../query/Queries";
// The order in which the statuses are displayed
const statusOrder: OrderStatusEnum[] = [
OrderStatusEnum.CANCELLED,
OrderStatusEnum.ISSUES,
OrderStatusEnum.ORDERED,
OrderStatusEnum.IN_PROGRESS,
OrderStatusEnum.DELIVERED
OrderStatusEnum.CANCELLED,
OrderStatusEnum.ISSUES,
OrderStatusEnum.ORDERED,
OrderStatusEnum.IN_PROGRESS,
OrderStatusEnum.DELIVERED,
];
const OrderCard: React.FC<{ order: OrderType; onClick: () => void }> = ({
order,
onClick,
}) => {
const { t } = useTranslation();
const OrderCard: React.FC<{ order: OrderType; onClick: () => void }> = ({order, onClick}) => {
const [{ isDragging }, drag] = useDrag(() => ({
type: "order",
item: { id: order.id },
collect: (monitor) => ({
isDragging: !!monitor.isDragging(),
}),
}));
const {t} = useTranslation();
const [{isDragging}, drag] = useDrag(() => ({
type: 'order',
item: {id: order.id},
collect: (monitor) => ({
isDragging: !!monitor.isDragging(),
}),
}));
return (
<div ref={drag} style={{opacity: isDragging ? 0.5 : 1, marginBottom: 8}}>
<Card elevation={4} sx={{
m: 1
}}>
<CardContent onClick={onClick}>
<Typography gutterBottom variant="h5" component="div">
Order: {order.id}
</Typography>
<Typography>
{t('date') + ": " + new Date(order.time).toUTCString()}
</Typography>
<Typography>
{t('total') + ": " + (order.total / 100).toFixed(2) + " €"}
</Typography>
</CardContent>
</Card>
</div>
);
return (
<div ref={drag} style={{ opacity: isDragging ? 0.5 : 1, marginBottom: 8 }}>
<Card
elevation={4}
sx={{
m: 1,
}}
>
<CardContent onClick={onClick}>
<Typography gutterBottom variant="h5" component="div">
Order: {order.id}
</Typography>
<Typography>
{t("date") + ": " + new Date(order.time).toUTCString()}
</Typography>
<Typography>
{t("total") + ": " + (order.total / 100).toFixed(2) + " €"}
</Typography>
</CardContent>
</Card>
</div>
);
};
const Column: React.FC<PropsWithChildren<{
const Column: React.FC<
PropsWithChildren<{
status: OrderStatusEnum;
onDrop: (id: number, status: OrderStatusEnum) => void
}>> = ({status, onDrop, children}) => {
onDrop: (id: number, status: OrderStatusEnum) => void;
}>
> = ({ status, onDrop, children }) => {
const { t } = useTranslation();
const theme = useTheme();
const {t} = useTranslation();
const theme = useTheme();
const [{ isOver }, drop] = useDrop(() => ({
accept: "order",
drop: (item: { id: number }) => onDrop(item.id, status),
collect: (monitor) => ({
isOver: !!monitor.isOver(),
}),
}));
const [{isOver}, drop] = useDrop(() => ({
accept: 'order',
drop: (item: { id: number }) => onDrop(item.id, status),
collect: (monitor) => ({
isOver: !!monitor.isOver(),
}),
}));
return (
<div ref={drop} style={{
return (
<div
ref={drop}
style={{
flex: 1,
backgroundColor: isOver
? theme.palette.background.paper
: "transparent",
minWidth: 300,
maxWidth: 400,
}}
>
<Card
sx={{
minHeight: "100%",
marginTop: 2,
marginLeft: 1,
height: "80vh",
display: "flex",
flexDirection: "column",
}}
elevation={1}
>
<CardContent
sx={{
flex: 1,
backgroundColor: isOver ? theme.palette.background.paper : 'transparent',
minWidth: 300,
maxWidth: 400
}}>
<Card sx={{
minHeight: '100%',
marginTop: 2,
marginLeft: 1,
height: '80vh',
display: 'flex',
flexDirection: 'column'
}} elevation={1}>
<CardContent sx={{
flex: 1,
display: 'flex',
flexDirection: 'column',
overflowY: 'auto',
height: '100%',
}}>
<Typography variant="h6">{t(status)}</Typography>
<div style={{flex: 1, overflowY: 'auto'}}>
{children}
</div>
</CardContent>
</Card>
</div>
);
display: "flex",
flexDirection: "column",
overflowY: "auto",
height: "100%",
}}
>
<Typography variant="h6">{t(status)}</Typography>
<div style={{ flex: 1, overflowY: "auto" }}>{children}</div>
</CardContent>
</Card>
</div>
);
};
const EditOrder: React.FC<{ open: boolean; order: OrderType | null; onClose: () => void }> = ({
open,
order,
onClose
}) => {
const {t} = useTranslation();
if (order === null)
return "";
return (
<Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
<DialogTitle>
{`${t(order.status)} #${order?.id}`}
</DialogTitle>
<DialogContent dividers>
{order && (
<Stack spacing={2}>
<Typography
variant="subtitle1">{`${t('orderDate')}: ${new Date(order.time).toDateString()}`}</Typography>
<Divider/>
<Typography variant="subtitle2">{t('orderedItems')}:</Typography>
<List dense>
{order.orderItems.map((item, idx) => (
<ListItemText
key={idx}
primary={`${item.article} x${item.amount}`}
/>
))}
</List>
<Divider/>
<Typography variant="h6">{`${t('sum')}: ${(order.total / 100).toFixed(2)} €`}</Typography>
</Stack>
)}
</DialogContent>
<DialogActions>
<Button onClick={onClose}>{t('close')}</Button>
</DialogActions>
</Dialog>
);
const EditOrder: React.FC<{
open: boolean;
order: OrderType | null;
onClose: () => void;
}> = ({ open, order, onClose }) => {
const { t } = useTranslation();
if (order === null) return "";
return (
<Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
<DialogTitle>{`${t(order.status)} #${order?.id}`}</DialogTitle>
<DialogContent dividers>
{order && (
<Stack spacing={2}>
<Typography variant="subtitle1">{`${t("orderDate")}: ${new Date(order.time).toDateString()}`}</Typography>
<Divider />
<Typography variant="subtitle2">{t("orderedItems")}:</Typography>
<List dense>
{order.orderItems.map((item, idx) => (
<ListItemText
key={idx}
primary={`${item.article} x${item.amount}`}
/>
))}
</List>
<Divider />
<Typography variant="h6">{`${t("sum")}: ${(order.total / 100).toFixed(2)} €`}</Typography>
</Stack>
)}
</DialogContent>
<DialogActions>
<Button onClick={onClose}>{t("close")}</Button>
</DialogActions>
</Dialog>
);
};
export default function OrdersInfo() {
const [editOrder, setEditOrder] = useState<OrderType | null>(null);
const [openSnackbar, setOpenSnackbar] = useState(false);
const [editOrder, setEditOrder] = useState<OrderType | null>(null);
const [openSnackbar, setOpenSnackbar] = useState(false);
const {user: loginData} = useAccount();
const { user: loginData } = useAccount();
const {data, refetch, isLoading} = useQuery({
queryKey: ["fetchOrdersAdmin", loginData],
queryFn: () => fetchOrdersAdmin(loginData ? loginData : {
email: "",
password: "",
session: "",
customerId: -1,
isAdmin: false
}),
retry: 3,
retryDelay: 1000,
});
const { data, refetch, isLoading } = useQuery({
queryKey: ["fetchOrdersAdmin", loginData],
queryFn: () =>
fetchOrdersAdmin(
loginData
? loginData
: {
email: "",
password: "",
session: "",
customerId: -1,
isAdmin: false,
},
),
retry: 3,
retryDelay: 1000,
});
const patchOrderMutation = useMutation({
mutationFn: (order: OrderPatch) =>
orderPatch({id: order.id, status: order.status}),
});
const patchOrderMutation = useMutation({
mutationFn: (order: OrderPatch) =>
orderPatch({ id: order.id, status: order.status }),
});
const handleDrop = async (id: number, status: OrderStatusEnum) => {
const currentOrders = data ?? [];
const obj = currentOrders.find((o) => o.id === id);
if (!obj) {
setOpenSnackbar(true);
return;
}
try {
await patchOrderMutation.mutateAsync({id: obj.id, status: status});
await refetch();
// eslint-disable-next-line @typescript-eslint/no-unused-vars
} catch (error) {
setOpenSnackbar(true);
}
};
const handleEdit = (order: OrderType) => setEditOrder(order);
if (isLoading || !data) {
return <div>Lade Bestellungen...</div>;
const handleDrop = async (id: number, status: OrderStatusEnum) => {
const currentOrders = data ?? [];
const obj = currentOrders.find((o) => o.id === id);
if (!obj) {
setOpenSnackbar(true);
return;
}
try {
await patchOrderMutation.mutateAsync({ id: obj.id, status: status });
await refetch();
// eslint-disable-next-line @typescript-eslint/no-unused-vars
} catch (error) {
setOpenSnackbar(true);
}
};
const handleEdit = (order: OrderType) => setEditOrder(order);
return (
<DndProvider backend={HTML5Backend}>
<div style={{display: 'flex', gap: 10, minHeight: '90%'}}>
{statusOrder.map((status) => (
<Column key={status} status={status} onDrop={handleDrop}>
{data
.filter((o) => o.status === status)
.map((o) => (
<OrderCard key={o.id} order={o} onClick={() => handleEdit(o)}/>
))}
</Column>
))}
</div>
<EditOrder
open={!!editOrder}
order={editOrder}
onClose={() => setEditOrder(null)}
/>
<Snackbar
open={openSnackbar}
autoHideDuration={4000}
onClose={() => setOpenSnackbar(false)}
message="Failed changing Orderstatus"
/>
</DndProvider>
);
if (isLoading || !data) {
return <div>Lade Bestellungen...</div>;
}
return (
<DndProvider backend={HTML5Backend}>
<div style={{ display: "flex", gap: 10, minHeight: "90%" }}>
{statusOrder.map((status) => (
<Column key={status} status={status} onDrop={handleDrop}>
{data
.filter((o) => o.status === status)
.map((o) => (
<OrderCard key={o.id} order={o} onClick={() => handleEdit(o)} />
))}
</Column>
))}
</div>
<EditOrder
open={!!editOrder}
order={editOrder}
onClose={() => setEditOrder(null)}
/>
<Snackbar
open={openSnackbar}
autoHideDuration={4000}
onClose={() => setOpenSnackbar(false)}
message="Failed changing Orderstatus"
/>
</DndProvider>
);
}

581
01-frontend/src/helper/adminpanel/StatisticsInfo.tsx
View File

@@ -1,290 +1,339 @@
import {Box, Typography, useTheme} from "@mui/material";
import {BarChart} from '@mui/x-charts/BarChart';
import {PieChart} from '@mui/x-charts/PieChart';
import {BarSeriesType} from '@mui/x-charts'
import {useEffect, useState} from "react";
import {useTranslation} from "react-i18next";
import {useQuery} from "@tanstack/react-query";
import {fetchOrderStatus, fetchStatisticsRevenue, fetchStatisticsVolume, fetchStockPercent} from "../query/Queries.tsx";
import {useAccount} from "../AccountProvider.tsx";
import {getColorFromPercent} from "../../util/ColorUtil.tsx";
import { Box, Typography, useTheme } from "@mui/material";
import { BarChart } from "@mui/x-charts/BarChart";
import { PieChart } from "@mui/x-charts/PieChart";
import { BarSeriesType } from "@mui/x-charts";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { useQuery } from "@tanstack/react-query";
import {
fetchOrderStatus,
fetchStatisticsRevenue,
fetchStatisticsVolume,
fetchStockPercent,
} from "../query/Queries.tsx";
import { useAccount } from "../AccountProvider.tsx";
import { getColorFromPercent } from "../../util/ColorUtil.tsx";
export default function StatisticsInfo() {
const theme = useTheme();
const {t} = useTranslation();
const theme = useTheme();
const { t } = useTranslation();
const [monthlyVolume, setMonthlyVolume] = useState<BarSeriesType[]>([]);
const [monthlyVolumeXaxis, setMonthlyVolumeXaxis] = useState([{data: []}]);
const [totalVolume, setTotalVolume] = useState([]);
const [monthlyVolume, setMonthlyVolume] = useState<BarSeriesType[]>([]);
const [monthlyVolumeXaxis, setMonthlyVolumeXaxis] = useState([{ data: [] }]);
const [totalVolume, setTotalVolume] = useState([]);
const [monthlyRevenue, setMonthlyRevenue] = useState<BarSeriesType[]>([]);
const [monthlyRevenueXaxis, setMonthlyRevenueXaxis] = useState([{data: []}]);
const [totalRevenue, setTotalRevenue] = useState([]);
const [monthlyRevenue, setMonthlyRevenue] = useState<BarSeriesType[]>([]);
const [monthlyRevenueXaxis, setMonthlyRevenueXaxis] = useState([
{ data: [] },
]);
const [totalRevenue, setTotalRevenue] = useState([]);
const [orderStatus, setOrderStatus] = useState([]);
const [orderStatus, setOrderStatus] = useState([]);
const [stockPercent, setStockPercent] = useState([]);
const [stockPercent, setStockPercent] = useState([]);
const { user: loginData } = useAccount();
const {user: loginData} = useAccount();
const { data: dataVolume } = useQuery({
queryKey: ["fetchStatisticsVolume", loginData],
queryFn: () =>
fetchStatisticsVolume(
loginData
? loginData
: {
email: "",
password: "",
session: "",
customerId: -1,
isAdmin: false,
},
),
retry: 0,
retryDelay: 0,
});
const { data: dataRevenue } = useQuery({
queryKey: ["fetchStatisticsRevenue", loginData],
queryFn: () =>
fetchStatisticsRevenue(
loginData
? loginData
: {
email: "",
password: "",
session: "",
customerId: -1,
isAdmin: false,
},
),
retry: 0,
retryDelay: 0,
});
const {data: dataVolume} = useQuery({
queryKey: ["fetchStatisticsVolume", loginData],
queryFn: () => fetchStatisticsVolume(loginData ? loginData : {
email: "",
password: "",
session: "",
customerId: -1,
isAdmin: false
}),
retry: 0,
retryDelay: 0,
});
const { data: dataOrderStatus } = useQuery({
queryKey: ["fetchOrderStatus", loginData],
queryFn: () =>
fetchOrderStatus(
loginData
? loginData
: {
email: "",
password: "",
session: "",
customerId: -1,
isAdmin: false,
},
),
retry: 0,
retryDelay: 0,
});
const {data: dataRevenue} = useQuery({
queryKey: ["fetchStatisticsRevenue", loginData],
queryFn: () => fetchStatisticsRevenue(loginData ? loginData : {
email: "",
password: "",
session: "",
customerId: -1,
isAdmin: false
}),
retry: 0,
retryDelay: 0,
});
const { data: dataStockPercent } = useQuery({
queryKey: ["fetchStockPercent", loginData],
queryFn: () =>
fetchStockPercent(
loginData
? loginData
: {
email: "",
password: "",
session: "",
customerId: -1,
isAdmin: false,
},
),
retry: 0,
retryDelay: 0,
});
const {data: dataOrderStatus} = useQuery({
queryKey: ["fetchOrderStatus", loginData],
queryFn: () => fetchOrderStatus(loginData ? loginData : {
email: "",
password: "",
session: "",
customerId: -1,
isAdmin: false
}),
retry: 0,
retryDelay: 0,
});
useEffect(() => {
if (dataVolume) {
const cmm = [];
const cmmx = monthlyVolumeXaxis;
const tv = [];
let i = 0;
for (const cat in dataVolume.catMonthMap) {
for (const timestamp in dataVolume.catMonthMap[cat]) {
const date = new Date(parseInt(timestamp));
const formattedDate =
date.getFullYear() +
"-" +
String(date.getMonth() + 1).padStart(2, "0");
if (!cmmx[0].data.includes(formattedDate)) {
cmmx[0].data.push(formattedDate);
}
const datapoint = dataVolume.catMonthMap[cat][timestamp];
if (cmm.length == i) {
cmm.push({ id: i, data: [], label: t(cat), type: "bar" });
}
cmm[i].data.push(datapoint);
const {data: dataStockPercent} = useQuery({
queryKey: ["fetchStockPercent", loginData],
queryFn: () => fetchStockPercent(loginData ? loginData : {
email: "",
password: "",
session: "",
customerId: -1,
isAdmin: false
}),
retry: 0,
retryDelay: 0,
});
useEffect(() => {
if (dataVolume) {
const cmm = []
const cmmx = monthlyVolumeXaxis
const tv = []
let i = 0
for (const cat in dataVolume.catMonthMap) {
for (const timestamp in dataVolume.catMonthMap[cat]) {
const date = new Date(parseInt(timestamp))
const formattedDate = date.getFullYear() + "-" + String(date.getMonth() + 1).padStart(2, '0')
if (!cmmx[0].data.includes(formattedDate)) {
cmmx[0].data.push(formattedDate);
}
const datapoint = dataVolume.catMonthMap[cat][timestamp]
if (cmm.length == i) {
cmm.push({id: i, data: [], label: t(cat), type: "bar"})
}
cmm[i].data.push(datapoint)
if (tv.length == i) {
tv.push({id: i, value: 0, label: t(cat)})
}
tv[i].value += datapoint
}
i++;
}
setMonthlyVolume(cmm)
setMonthlyVolumeXaxis(cmmx)
setTotalVolume(tv)
if (tv.length == i) {
tv.push({ id: i, value: 0, label: t(cat) });
}
tv[i].value += datapoint;
}
}, [dataVolume]);
i++;
}
useEffect(() => {
if (dataRevenue) {
const cmm = []
const cmmx = monthlyRevenueXaxis
const tv = []
let i = 0
for (const cat in dataRevenue.catMonthMap) {
for (const timestamp in dataRevenue.catMonthMap[cat]) {
const date = new Date(parseInt(timestamp))
const formattedDate = date.getFullYear() + "-" + String(date.getMonth() + 1).padStart(2, '0')
if (!cmmx[0].data.includes(formattedDate)) {
cmmx[0].data.push(formattedDate);
}
const datapoint = dataRevenue.catMonthMap[cat][timestamp] / 100
if (cmm.length == i) {
cmm.push({id: i, data: [], label: t(cat), type: "bar"})
}
cmm[i].data.push(datapoint)
setMonthlyVolume(cmm);
setMonthlyVolumeXaxis(cmmx);
setTotalVolume(tv);
}
}, [dataVolume]);
if (tv.length == i) {
tv.push({id: i, value: 0, label: t(cat)})
}
tv[i].value += datapoint
}
i++;
}
useEffect(() => {
if (dataRevenue) {
const cmm = [];
const cmmx = monthlyRevenueXaxis;
const tv = [];
let i = 0;
for (const cat in dataRevenue.catMonthMap) {
for (const timestamp in dataRevenue.catMonthMap[cat]) {
const date = new Date(parseInt(timestamp));
const formattedDate =
date.getFullYear() +
"-" +
String(date.getMonth() + 1).padStart(2, "0");
if (!cmmx[0].data.includes(formattedDate)) {
cmmx[0].data.push(formattedDate);
}
const datapoint = dataRevenue.catMonthMap[cat][timestamp] / 100;
if (cmm.length == i) {
cmm.push({ id: i, data: [], label: t(cat), type: "bar" });
}
cmm[i].data.push(datapoint);
setMonthlyRevenue(cmm)
setMonthlyRevenueXaxis(cmmx)
setTotalRevenue(tv)
if (tv.length == i) {
tv.push({ id: i, value: 0, label: t(cat) });
}
tv[i].value += datapoint;
}
}, [dataRevenue, monthlyRevenueXaxis, t]);
i++;
}
useEffect(() => {
if (dataOrderStatus) {
const orderStatus = []
for (const status in dataOrderStatus) {
orderStatus.push({value: dataOrderStatus[status], label: t(status)})
}
setOrderStatus(orderStatus)
setMonthlyRevenue(cmm);
setMonthlyRevenueXaxis(cmmx);
setTotalRevenue(tv);
}
}, [dataRevenue, monthlyRevenueXaxis, t]);
useEffect(() => {
if (dataOrderStatus) {
const orderStatus = [];
for (const status in dataOrderStatus) {
orderStatus.push({ value: dataOrderStatus[status], label: t(status) });
}
setOrderStatus(orderStatus);
}
}, [dataOrderStatus, t]);
useEffect(() => {
function generateName(percent: string): string {
return ">" + percent + "%";
}
if (dataStockPercent) {
const stockPercent = [];
let i = 0;
for (let x = 0; x < 10; x++) {
stockPercent.push({
value: 0,
label: generateName(String(x * 10)),
color: getColorFromPercent(String(x * 10)),
});
}
for (const cat in dataStockPercent) {
for (const percent in dataStockPercent[cat]) {
let index = stockPercent.findIndex(
(entry) => entry.label == generateName(percent),
);
const datapoint = dataStockPercent[cat][percent];
if (index === -1) {
index =
stockPercent.push({
value: 0,
label: generateName(percent),
color: getColorFromPercent(percent),
}) - 1;
}
stockPercent[index].value += datapoint;
}
}, [dataOrderStatus, t]);
i++;
}
setStockPercent(stockPercent);
}
}, [dataStockPercent]);
useEffect(() => {
function generateName(percent: string): string {
return ">" + percent + "%";
}
return (
<Box className="" sx={{ color: theme.palette.text.primary }}>
<Typography mt={4} variant="h4" align="center" gutterBottom>
{t("salesStatistics")}
</Typography>
if (dataStockPercent) {
const stockPercent = []
let i = 0
for (let x = 0; x < 10; x++) {
stockPercent.push({
value: 0,
label: generateName(String(x * 10)),
color: getColorFromPercent(String(x * 10))
});
}
for (const cat in dataStockPercent) {
for (const percent in dataStockPercent[cat]) {
let index = stockPercent.findIndex((entry) => entry.label == generateName(percent))
const datapoint = dataStockPercent[cat][percent]
if (index === -1) {
index = stockPercent.push({
value: 0,
label: generateName(percent),
color: getColorFromPercent(percent)
}) - 1
}
stockPercent[index].value += datapoint
}
i++
}
setStockPercent(stockPercent)
}
}, [dataStockPercent])
return (
<Box className="" sx={{color: theme.palette.text.primary}}>
<Typography mt={4} variant="h4" align="center" gutterBottom>
{t("salesStatistics")}
</Typography>
<Box sx={{mb: 4}}>
<Typography variant="h6" align="center" gutterBottom>
{t("monthlySalesVolume")}
</Typography>
<BarChart
series={monthlyVolume}
height={290}
xAxis={monthlyVolumeXaxis}
/>
</Box>
<Box sx={{mb: 4}}>
<Typography variant="h6" align="center" gutterBottom>
{t("monthlySalesRevenue")}
</Typography>
<BarChart
series={monthlyRevenue}
height={290}
xAxis={monthlyRevenueXaxis}
/>
</Box>
<Box display={"flex"} mb={9}>
<Box className="vw20" sx={{m: 2}}>
<Typography variant="h6" align="center" gutterBottom>
{t("itemVolumeDistribution")}
</Typography>
<PieChart
series={[{
data: totalVolume,
highlightScope: {fade: 'global', highlight: 'item'},
faded: {innerRadius: 30, additionalRadius: -30, color: 'gray'},
}]}
width={200}
height={200}
/>
</Box>
<Box className="vw20" sx={{m: 2}}>
<Typography variant="h6" align="center" gutterBottom>
{t("itemRevenueDistribution")}
</Typography>
<PieChart
series={[{
data: totalRevenue,
highlightScope: {fade: 'global', highlight: 'item'},
valueFormatter: (v) => (v ? `${v.value}€` : '-'),
}]}
width={200}
height={200}
/>
</Box>
<Box className="vw20" sx={{m: 2}}>
<Typography variant="h6" align="center" gutterBottom>
{t("stockFulfillment")}
</Typography>
<PieChart
series={[{
data: stockPercent,
innerRadius: 10,
outerRadius: 85,
cornerRadius: 5,
paddingAngle: 2,
valueFormatter: (v) => (v ? `${v.value}%` : '-'),
}]}
width={200}
height={200}
hideLegend
/>
</Box>
<Box className="vw20" sx={{m: 2}}>
<Typography variant="h6" align="center" gutterBottom>
{t("orderStatus")}
</Typography>
<PieChart
series={[{
data: orderStatus,
innerRadius: 20,
outerRadius: 70,
cornerRadius: 5,
paddingAngle: 1,
highlightScope: {fade: 'global', highlight: 'item'},
faded: {innerRadius: 30, additionalRadius: -10, color: 'gray'},
}]}
height={200}
width={200}
/>
</Box>
</Box>
<Box sx={{ mb: 4 }}>
<Typography variant="h6" align="center" gutterBottom>
{t("monthlySalesVolume")}
</Typography>
<BarChart
series={monthlyVolume}
height={290}
xAxis={monthlyVolumeXaxis}
/>
</Box>
<Box sx={{ mb: 4 }}>
<Typography variant="h6" align="center" gutterBottom>
{t("monthlySalesRevenue")}
</Typography>
<BarChart
series={monthlyRevenue}
height={290}
xAxis={monthlyRevenueXaxis}
/>
</Box>
<Box display={"flex"} mb={9}>
<Box className="vw20" sx={{ m: 2 }}>
<Typography variant="h6" align="center" gutterBottom>
{t("itemVolumeDistribution")}
</Typography>
<PieChart
series={[
{
data: totalVolume,
highlightScope: { fade: "global", highlight: "item" },
faded: {
innerRadius: 30,
additionalRadius: -30,
color: "gray",
},
},
]}
width={200}
height={200}
/>
</Box>
);
<Box className="vw20" sx={{ m: 2 }}>
<Typography variant="h6" align="center" gutterBottom>
{t("itemRevenueDistribution")}
</Typography>
<PieChart
series={[
{
data: totalRevenue,
highlightScope: { fade: "global", highlight: "item" },
valueFormatter: (v) => (v ? `${v.value}€` : "-"),
},
]}
width={200}
height={200}
/>
</Box>
<Box className="vw20" sx={{ m: 2 }}>
<Typography variant="h6" align="center" gutterBottom>
{t("stockFulfillment")}
</Typography>
<PieChart
series={[
{
data: stockPercent,
innerRadius: 10,
outerRadius: 85,
cornerRadius: 5,
paddingAngle: 2,
valueFormatter: (v) => (v ? `${v.value}%` : "-"),
},
]}
width={200}
height={200}
hideLegend
/>
</Box>
<Box className="vw20" sx={{ m: 2 }}>
<Typography variant="h6" align="center" gutterBottom>
{t("orderStatus")}
</Typography>
<PieChart
series={[
{
data: orderStatus,
innerRadius: 20,
outerRadius: 70,
cornerRadius: 5,
paddingAngle: 1,
highlightScope: { fade: "global", highlight: "item" },
faded: {
innerRadius: 30,
additionalRadius: -10,
color: "gray",
},
},
]}
height={200}
width={200}
/>
</Box>
</Box>
</Box>
);
}

32
01-frontend/src/helper/helper.css
View File

@@ -1,36 +1,36 @@
.item-description {
display: flex;
justify-content: space-between; /* Elemente an gegenüberliegenden Seiten platzieren */
align-items: center; /* Vertikale Zentrierung */
width: 100%;
display: flex;
justify-content: space-between; /* Elemente an gegenüberliegenden Seiten platzieren */
align-items: center; /* Vertikale Zentrierung */
width: 100%;
}
.item-card-button {
color: green;
color: green;
}
.rating-card-body {
display: grid;
align-items: center; /* Vertikale Zentrierung */
width: 100%;
gap: 30px;
display: grid;
align-items: center; /* Vertikale Zentrierung */
width: 100%;
gap: 30px;
}
.rating-button {
max-width: 200px;
max-width: 200px;
}
.rating-card-box {
display: grid;
align-items: center; /* Vertikale Zentrierung */
gap: 10px;
width: 100%;
display: grid;
align-items: center; /* Vertikale Zentrierung */
gap: 10px;
width: 100%;
}
.rating-text-field {
background-color: whitesmoke;
background-color: whitesmoke;
}
.vw20 {
width: 20vw;
width: 20vw;
}

130
01-frontend/src/helper/homepage/FilterItem.tsx
View File

@@ -1,75 +1,83 @@
import {FormControl, FormControlLabel, FormLabel, Radio, RadioGroup, Rating, useTheme,} from "@mui/material";
import {
FormControl,
FormControlLabel,
FormLabel,
Radio,
RadioGroup,
Rating,
useTheme,
} from "@mui/material";
import React from "react";
type FilterItemOption = {
value: string;
label: string;
value: string;
label: string;
};
type FilterItemProps = {
filterName: string;
filterItems: FilterItemOption[];
value?: string | null;
onChange?: (value: string) => void;
filterName: string;
filterItems: FilterItemOption[];
value?: string | null;
onChange?: (value: string) => void;
};
export default function FilterItem({
filterName,
filterItems,
value,
onChange,
}: FilterItemProps) {
const theme = useTheme();
filterName,
filterItems,
value,
onChange,
}: FilterItemProps) {
const theme = useTheme();
if (!value && filterItems.length > 0) {
value = filterItems[0].value;
if (!value && filterItems.length > 0) {
value = filterItems[0].value;
}
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
if (onChange) {
onChange(event.target.value);
}
};
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
if (onChange) {
onChange(event.target.value);
}
};
return (
<div style={{ marginBottom: "1.5rem" }}>
<FormLabel
component="legend"
sx={{
fontWeight: "bold",
color: theme.palette.text.primary,
mb: 1,
}}
>
{filterName}
</FormLabel>
return (
<div style={{marginBottom: "1.5rem"}}>
<FormLabel
component="legend"
sx={{
fontWeight: "bold",
color: theme.palette.text.primary,
mb: 1,
}}
>
{filterName}
</FormLabel>
<FormControl>
<RadioGroup value={value} onChange={handleChange}>
{filterItems.map((item, idx) => (
<FormControlLabel
key={idx}
value={item.value}
control={<Radio/>}
label={
/^[1-5]$/.test(item.value) ? (
<Rating
readOnly
value={Number(item.value)}
precision={1}
size="small"
/>
) : (
item.label
)
}
sx={{
color: theme.palette.text.primary,
}}
/>
))}
</RadioGroup>
</FormControl>
</div>
);
<FormControl>
<RadioGroup value={value} onChange={handleChange}>
{filterItems.map((item, idx) => (
<FormControlLabel
key={idx}
value={item.value}
control={<Radio />}
label={
/^[1-5]$/.test(item.value) ? (
<Rating
readOnly
value={Number(item.value)}
precision={1}
size="small"
/>
) : (
item.label
)
}
sx={{
color: theme.palette.text.primary,
}}
/>
))}
</RadioGroup>
</FormControl>
</div>
);
}

16
01-frontend/src/helper/homepage/ItemCard.css
View File

@@ -2,24 +2,24 @@
/* Container um jedes Filter-Widget */
.filter-item {
margin-bottom: 1.5rem;
margin-bottom: 1.5rem;
}
/* Überschrift (FormLabel) */
.filter-item__label {
font-weight: bold;
margin-bottom: 0.5rem;
/* nutze die CSS-Variable, die GlobalStyles füllen */
color: var(--text-color);
font-weight: bold;
margin-bottom: 0.5rem;
/* nutze die CSS-Variable, die GlobalStyles füllen */
color: var(--text-color);
}
/* Das Material-UI FormControl-Element */
.filter-item__group {
display: flex;
flex-direction: column;
display: flex;
flex-direction: column;
}
/* Jeder Radio-Button mit Label */
.filter-item__option {
color: var(--text-color);
color: var(--text-color);
}

223
01-frontend/src/helper/homepage/ItemCard.tsx
View File

@@ -1,91 +1,150 @@
import {AddShoppingCart} from "@mui/icons-material";
import {Box, Card, CardActionArea, CardContent, CardMedia, IconButton, Paper, Rating, Typography} from "@mui/material";
import {useState} from "react";
import {useTranslation} from 'react-i18next';
import {useNavigate} from "react-router-dom";
import { AddShoppingCart } from "@mui/icons-material";
import {
Box,
Card,
CardActionArea,
CardContent,
CardMedia,
IconButton,
Paper,
Rating,
Typography,
} from "@mui/material";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import ItemWithImage from "../../components/Item";
import {useBasket} from "../BasketProvider";
import { useBasket } from "../BasketProvider";
import "../helper.css";
export default function ItemCard({item}: { item: ItemWithImage }) {
export default function ItemCard({ item }: { item: ItemWithImage }) {
const { t } = useTranslation();
const navigate = useNavigate();
const { addToBasket } = useBasket();
const {t} = useTranslation();
const navigate = useNavigate()
const {addToBasket} = useBasket();
const handleAddToCart = () => {
addToBasket(item, 1);
console.log(`Added ${1} of ${item.name} to basket`);
};
const handleAddToCart = () => {
addToBasket(item, 1);
console.log(`Added ${1} of ${item.name} to basket`);
};
const handleClick = () => {
navigate(`/product/${item.id}`, { state: { item } });
};
const [imageUrl, setImageUrl] = useState<string>(
item.image || "/src/assets/default.jpg",
); // Fallback-Bild
const handleClick = () => {
navigate(`/product/${item.id}`, {state: {item}});
}
const [imageUrl, setImageUrl] = useState<string>(item.image || "/src/assets/default.jpg"); // Fallback-Bild
if (
imageUrl !== "/src/assets/default.jpg" &&
!imageUrl.startsWith("data:image/")
) {
setImageUrl("data:image/jpeg;base64," + imageUrl);
}
if (imageUrl !== "/src/assets/default.jpg" && !imageUrl.startsWith("data:image/")) {
setImageUrl("data:image/jpeg;base64," + imageUrl);
}
return (
<Paper elevation={4}>
<Card
sx={{
display: "flex",
flexDirection: "column",
height: "100%",
width: "100%",
}}
>
<CardActionArea
onClick={handleClick}
sx={{ height: "100%", width: "100%" }}
component="div"
>
<CardMedia
component="img"
height="140"
src={imageUrl}
alt={item.name}
onError={(event) => {
event.currentTarget.src = "/src/assets/default.jpg"; // Standardbild setzen
}}
sx={{
objectFit: "contain", // Bild wird skaliert, um vollständig sichtbar zu sein
maxWidth: "100%", // Begrenze die maximale Breite auf den Container
maxHeight: "100%", // Begrenze die maximale Höhe auf den Container
}}
/>
<CardContent
sx={{ display: "flex", flexDirection: "column", flexGrow: 1 }}
>
<Typography gutterBottom variant="h5" component="div">
{item.name}
</Typography>
<Box
sx={{
mt: "auto",
display: "flex",
flexGrow: 1,
flexDirection: "column",
}}
>
<Rating
name="half-rating"
readOnly
defaultValue={item.rating / 2}
precision={0.5}
/>
<Box
sx={{
display: "flex",
justifyContent: "space-between",
alignItems: "flex-end",
}}
>
<Typography
variant="body2"
sx={{ color: "text.secondary" }}
className="item-description"
>
{(
(item.price100 / 100) *
(1 - item.discount100 / 100)
).toFixed(2)}{" "}
€
</Typography>
{item.discount100 == 0 ? (
<></>
) : (
<Typography
variant="body2"
sx={{ color: "red" }}
className="item-description"
>
{-item.discount100}%
</Typography>
)}
<IconButton
aria-label={t("addToCart")}
onClick={(event) => {
event.stopPropagation();
handleAddToCart();
}}
>
<AddShoppingCart />
</IconButton>
</Box>
return (
<Paper elevation={4}>
<Card sx={{height: "100%", width: "100%"}}>
<CardActionArea onClick={handleClick} sx={{height: "100%"}} component="div">
<CardMedia
component="img"
height="140"
src={imageUrl}
alt={item.name}
onError={(event) => {
event.currentTarget.src = "/src/assets/default.jpg"; // Standardbild setzen
}}
sx={{
objectFit: "contain", // Bild wird skaliert, um vollständig sichtbar zu sein
maxWidth: "100%", // Begrenze die maximale Breite auf den Container
maxHeight: "100%", // Begrenze die maximale Höhe auf den Container
}}
/>
<CardContent>
<Typography gutterBottom variant="h5" component="div">
{item.name}
</Typography>
<Rating name="half-rating" readOnly defaultValue={item.rating / 2} precision={0.5}/>
<Box sx={{display: "flex", justifyContent: "space-between", alignItems: "flex-end"}}>
<Typography variant="body2" sx={{color: 'text.secondary'}} className="item-description">
{(item.price100 / 100 * (1 - item.discount100 / 100)).toFixed(2)} €
</Typography>
{item.discount100 == 0 ? <></> :
<Typography variant="body2" sx={{color: 'red'}} className="item-description">
{(- item.discount100)}%
</Typography>
}
<IconButton
aria-label={t('addToCart')}
onClick={(event) => {
event.stopPropagation();
handleAddToCart();
}}
>
<AddShoppingCart/>
</IconButton>
</Box>
{item.stock > 10 ? (
<Typography variant="body2">
{t('inStock')}
</Typography>
) : item.stock > 0 ? (
<Typography variant="body2" sx={{color: 'orange'}}>
{t('almostSoldOut')}
</Typography>
) : (
<Typography variant="body2" sx={{color: 'red'}}>
{t('outOfStock')}
</Typography>
)}
</CardContent>
</CardActionArea>
</Card>
</Paper>
)
{item.stock > 10 ? (
<Typography variant="body2">{t("inStock")}</Typography>
) : item.stock > 0 ? (
<Typography variant="body2" sx={{ color: "orange" }}>
{t("almostSoldOut")}
</Typography>
) : (
<Typography variant="body2" sx={{ color: "red" }}>
{t("outOfStock")}
</Typography>
)}
</Box>
</CardContent>
</CardActionArea>
</Card>
</Paper>
);
}

143
01-frontend/src/helper/homepage/PriceSlider.tsx
View File

@@ -1,81 +1,88 @@
import {Box, Slider, Typography, useTheme} from "@mui/material";
import {SyntheticEvent, useEffect, useState} from "react";
import {useTranslation} from "react-i18next";
import { Box, Slider, Typography, useTheme } from "@mui/material";
import { SyntheticEvent, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
type PriceSliderProps = {
min?: number;
max?: number;
onChange?: (range: [number, number]) => void;
min?: number;
max?: number;
onChange?: (range: [number, number]) => void;
};
export default function PriceSlider({min = 0, max = 10000, onChange}: PriceSliderProps) {
const {t} = useTranslation();
const theme = useTheme();
export default function PriceSlider({
min = 0,
max = 10000,
onChange,
}: PriceSliderProps) {
const { t } = useTranslation();
const theme = useTheme();
const [value, setValue] = useState<[number, number]>([min, max]);
const [value, setValue] = useState<[number, number]>([min, max]);
useEffect(() => {
setValue([min, max]);
onChange?.([min, max]);
}, [min, max]);
useEffect(() => {
setValue([min, max]);
onChange?.([min, max]);
}, [min, max]);
const handleChange = (_: Event, newValue: number | number[]) => {
if (Array.isArray(newValue)) {
setValue([newValue[0], newValue[1]]);
}
};
const handleChange = (_: Event, newValue: number | number[]) => {
if (Array.isArray(newValue)) {
setValue([newValue[0], newValue[1]]);
}
};
const handleCommitted = (_: Event | SyntheticEvent<Element, Event>, newValue: number | number[]) => {
if (Array.isArray(newValue)) {
onChange?.([newValue[0], newValue[1]]);
}
};
const handleCommitted = (
_: Event | SyntheticEvent<Element, Event>,
newValue: number | number[],
) => {
if (Array.isArray(newValue)) {
onChange?.([newValue[0], newValue[1]]);
}
};
const formatValueToEuro = (val: number) => `${(val / 100).toFixed(2)} €`;
const formatValueToEuro = (val: number) => `${(val / 100).toFixed(2)} €`;
return (
<Box sx={{mb: 4}}>
<Typography
variant="h6"
sx={{
fontWeight: "bold",
color: theme.palette.text.primary,
mb: 1,
}}
>
{t("price")}
</Typography>
return (
<Box sx={{ mb: 4 }}>
<Typography
variant="h6"
sx={{
fontWeight: "bold",
color: theme.palette.text.primary,
mb: 1,
}}
>
{t("price")}
</Typography>
<Box sx={{px: 1}}>
<Slider
value={value}
onChange={handleChange}
onChangeCommitted={handleCommitted}
valueLabelDisplay="auto"
valueLabelFormat={formatValueToEuro}
min={min}
max={max}
step={1}
sx={{
color: "#0fd13f",
'& .MuiSlider-valueLabel': {
color: theme.palette.text.primary,
},
}}
/>
<Box sx={{ px: 1 }}>
<Slider
value={value}
onChange={handleChange}
onChangeCommitted={handleCommitted}
valueLabelDisplay="auto"
valueLabelFormat={formatValueToEuro}
min={min}
max={max}
step={1}
sx={{
color: "#0fd13f",
"& .MuiSlider-valueLabel": {
color: theme.palette.text.primary,
},
}}
/>
<Typography
variant="body2"
sx={{
mt: 1,
color: theme.palette.text.primary,
fontSize: "0.9rem",
textAlign: "center",
}}
>
{formatValueToEuro(value[0])} – {formatValueToEuro(value[1])}
</Typography>
</Box>
</Box>
);
<Typography
variant="body2"
sx={{
mt: 1,
color: theme.palette.text.primary,
fontSize: "0.9rem",
textAlign: "center",
}}
>
{formatValueToEuro(value[0])} – {formatValueToEuro(value[1])}
</Typography>
</Box>
</Box>
);
}

530
01-frontend/src/helper/navbar/LoginDialog.tsx
View File

@@ -1,257 +1,307 @@
import {Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, Link, TextField} from "@mui/material";
import {useQuery} from "@tanstack/react-query";
import {
Box,
Button,
Dialog,
DialogActions,
DialogContent,
DialogTitle,
Link,
TextField,
} from "@mui/material";
import { useQuery } from "@tanstack/react-query";
import i18next from "i18next";
import React, {useEffect, useState} from "react";
import AccountType, {User} from "../../components/Account";
import {useAccount} from "../AccountProvider";
import {fetchAccount, submitLogin, submitRegister} from "../query/Queries"; // Importiere die Funktion für die Registrierung
import {useTranslation} from "react-i18next";
import React, { useEffect, useState } from "react";
import AccountType, { User } from "../../components/Account";
import { useAccount } from "../AccountProvider";
import { fetchAccount, submitLogin, submitRegister } from "../query/Queries"; // Importiere die Funktion für die Registrierung
import { useTranslation } from "react-i18next";
type LoginDialogProps = {
open: boolean;
onClose: () => void;
onSubmit: () => void; // Funktion, die aufgerufen wird, wenn der Login erfolgreich ist
loginData: { email: string; password: string };
setLoginData: React.Dispatch<React.SetStateAction<{ email: string; password: string, customerId: number }>>;
open: boolean;
onClose: () => void;
onSubmit: () => void; // Funktion, die aufgerufen wird, wenn der Login erfolgreich ist
loginData: { email: string; password: string };
setLoginData: React.Dispatch<
React.SetStateAction<{
email: string;
password: string;
customerId: number;
}>
>;
};
const LoginDialog: React.FC<LoginDialogProps> = ({open, onClose, loginData, setLoginData, onSubmit}) => {
const LoginDialog: React.FC<LoginDialogProps> = ({
open,
onClose,
loginData,
setLoginData,
onSubmit,
}) => {
const { t } = useTranslation();
const { login } = useAccount();
const [showRegister, setShowRegister] = useState(false);
const [registerData, setRegisterData] = useState<AccountType>({
email: "",
password: "",
id: 0,
customer: {
id: 0,
name: "",
surname: "",
address: "",
country: "",
zip: "",
},
langI18n: i18next.language,
admin: false,
});
const [showErrorRegister, setShowErrorRegister] = useState(false); // Neuer Zustand für die Anzeige der Fehlermeldung
const [showErrorLogin, setShowErrorLogin] = useState(false); // Neuer Zustand für die Anzeige der Login-Fehlermeldung
const {t} = useTranslation();
const {login} = useAccount();
const [showRegister, setShowRegister] = useState(false);
const [registerData, setRegisterData] = useState<AccountType>({
email: "",
password: "",
id: 0,
customer: {id: 0, name: "", surname: "", address: "", country: "", zip: ""},
langI18n: i18next.language,
admin: false
});
const [showErrorRegister, setShowErrorRegister] = useState(false); // Neuer Zustand für die Anzeige der Fehlermeldung
const [showErrorLogin, setShowErrorLogin] = useState(false); // Neuer Zustand für die Anzeige der Login-Fehlermeldung
useEffect(() => {
if (open) {
const active = document.activeElement as HTMLElement | null;
if (active && typeof active.blur === "function") {
active.blur();
}
}
}, [open]);
useEffect(() => {
if (open) {
const active = document.activeElement as HTMLElement | null;
if (active && typeof active.blur === "function") {
active.blur();
}
}
}, [open]);
// useQuery für Login
const {
refetch: refetchLogin,
isLoading: isLoadingLogin,
error: errorLogin,
} = useQuery({
queryKey: ["submitLogin", loginData],
queryFn: () => submitLogin(loginData),
retry: 0,
retryDelay: 1000,
enabled: false,
});
const { refetch: refetchAccount } = useQuery({
queryKey: ["fetchAccount", loginData],
queryFn: () => fetchAccount(loginData),
retry: 0,
retryDelay: 1000,
enabled: false,
});
// useQuery für Login
const {refetch: refetchLogin, isLoading: isLoadingLogin, error: errorLogin} = useQuery({
queryKey: ["submitLogin", loginData],
queryFn: () => submitLogin(loginData),
retry: 0,
retryDelay: 1000,
enabled: false,
});
// useQuery für Registrierung
const {
refetch: refetchRegister,
isLoading: isLoadingRegister,
error: errorRegister,
} = useQuery({
queryKey: ["submitRegister", registerData],
queryFn: () => submitRegister(registerData),
retry: 0,
retryDelay: 1000,
enabled: false,
});
const {refetch: refetchAccount} = useQuery({
queryKey: ["fetchAccount", loginData],
queryFn: () => fetchAccount(loginData),
retry: 0,
retryDelay: 1000,
enabled: false,
});
const handleClose = () => {
setShowErrorLogin(false); // Fehlermeldung zurücksetzen
setShowErrorRegister(false); // Fehlermeldung zurücksetzen
onClose();
};
// useQuery für Registrierung
const {refetch: refetchRegister, isLoading: isLoadingRegister, error: errorRegister} = useQuery({
queryKey: ["submitRegister", registerData],
queryFn: () => submitRegister(registerData),
retry: 0,
retryDelay: 1000,
enabled: false,
});
const handleLogin = async () => {
try {
setShowErrorLogin(false); // Fehlermeldung zurücksetzen
setShowErrorRegister(false); // Fehlermeldung zurücksetzen
const response = await refetchLogin(); // Anfrage auslösen
if (response.status === "success") {
const session = response.data.uuid; // Session-Daten aus der Antwort extrahieren
const customerData = (await refetchAccount()).data;
const user: User = {
email: customerData.email,
password: customerData.password,
customerId: customerData.customer.id, // Setze die customerId aus den Account-Daten
session: session, // Setze die Session aus der Login-Antwort
isAdmin: customerData.admin,
};
login(user);
setShowRegister(false); // Zurück zum Login wechseln
onSubmit(); // Dialog schließen
} else {
setShowErrorLogin(true); // Fehlermeldung anzeigen
}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
} catch (error) {
setShowErrorLogin(true); // Fehlermeldung anzeigen
}
};
const handleClose = () => {
setShowErrorLogin(false); // Fehlermeldung zurücksetzen
setShowErrorRegister(false); // Fehlermeldung zurücksetzen
onClose();
};
const handleRegister = async () => {
try {
setShowErrorLogin(false); // Fehlermeldung zurücksetzen
setShowErrorRegister(false); // Fehlermeldung zurücksetzen
await refetchRegister(); // Beispiel für den Refetch-Aufruf
// Erfolgslogik hier
// eslint-disable-next-line @typescript-eslint/no-unused-vars
} catch (error) {
setShowErrorRegister(true); // Fehlermeldung anzeigen
}
};
const handleLogin = async () => {
try {
setShowErrorLogin(false); // Fehlermeldung zurücksetzen
setShowErrorRegister(false); // Fehlermeldung zurücksetzen
const response = await refetchLogin(); // Anfrage auslösen
if (response.status === "success") {
const session = response.data.uuid; // Session-Daten aus der Antwort extrahieren
const customerData = (await refetchAccount()).data;
const user: User = {
email: customerData.email,
password: customerData.password,
customerId: customerData.customer.id, // Setze die customerId aus den Account-Daten
session: session, // Setze die Session aus der Login-Antwort
isAdmin: customerData.admin
};
login(user);
setShowRegister(false); // Zurück zum Login wechseln
onSubmit(); // Dialog schließen
} else {
setShowErrorLogin(true); // Fehlermeldung anzeigen
}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
} catch (error) {
setShowErrorLogin(true); // Fehlermeldung anzeigen
}
};
const handleRegister = async () => {
try {
setShowErrorLogin(false); // Fehlermeldung zurücksetzen
setShowErrorRegister(false); // Fehlermeldung zurücksetzen
await refetchRegister(); // Beispiel für den Refetch-Aufruf
// Erfolgslogik hier
// eslint-disable-next-line @typescript-eslint/no-unused-vars
} catch (error) {
setShowErrorRegister(true); // Fehlermeldung anzeigen
}
};
return (
<Dialog open={open} onClose={handleClose} disableEnforceFocus>
<form onSubmit={e => {
e.preventDefault();
if (showRegister) {
handleLogin();
} else {
handleRegister();
return (
<Dialog open={open} onClose={handleClose} disableEnforceFocus>
<form
onSubmit={(e) => {
e.preventDefault();
if (showRegister) {
handleLogin();
} else {
handleRegister();
}
}}
noValidate
>
<DialogTitle>{showRegister ? t("register") : t("login")}</DialogTitle>
<DialogContent>
<TextField
margin="dense"
label={t("email")}
type="email"
fullWidth
value={showRegister ? registerData.email : loginData.email}
onChange={(e) => {
setLoginData((prev) => ({ ...prev, email: e.target.value }));
setRegisterData((prev) => ({ ...prev, email: e.target.value }));
}}
/>
<TextField
margin="dense"
label={t("password")}
type="password"
fullWidth
value={showRegister ? registerData.password : loginData.password}
onChange={(e) => {
setLoginData((prev) => ({ ...prev, password: e.target.value }));
setRegisterData((prev) => ({
...prev,
password: e.target.value,
}));
}}
/>
{showRegister && (
<>
<TextField
margin="dense"
label={t("firstName")}
type="text"
fullWidth
value={registerData.customer.name}
onChange={(e) =>
setRegisterData((prev) => ({
...prev,
customer: { ...prev.customer, name: e.target.value },
}))
}
}} noValidate>
<DialogTitle>{showRegister ? t("register") : t("login")}</DialogTitle>
<DialogContent>
<TextField
margin="dense"
label={t("email")}
type="email"
fullWidth
value={showRegister ? registerData.email : loginData.email}
onChange={e => {
setLoginData(prev => ({...prev, email: e.target.value}));
setRegisterData(prev => ({...prev, email: e.target.value}))
}}
/>
<TextField
margin="dense"
label={t("password")}
type="password"
fullWidth
value={showRegister ? registerData.password : loginData.password}
onChange={e => {
setLoginData(prev => ({...prev, password: e.target.value}))
setRegisterData(prev => ({...prev, password: e.target.value}))
}}
/>
{showRegister &&
<>
<TextField
margin="dense"
label={t("firstName")}
type="text"
fullWidth
value={registerData.customer.name}
onChange={e => setRegisterData(prev => ({
...prev,
customer: {...prev.customer, name: e.target.value},
}))}
/>
<TextField
margin="dense"
label={t("lastName")}
type="text"
fullWidth
value={registerData.customer.surname}
onChange={e => setRegisterData(prev => ({
...prev,
customer: {...prev.customer, surname: e.target.value},
}))}
/>
<TextField
margin="dense"
label={t("address")}
type="text"
fullWidth
value={registerData.customer.address}
onChange={e => setRegisterData(prev => ({
...prev,
customer: {...prev.customer, address: e.target.value},
}))}
/>
<TextField
margin="dense"
label={t("country")}
type="text"
fullWidth
value={registerData.customer.country}
onChange={e => setRegisterData(prev => ({
...prev,
customer: {...prev.customer, country: e.target.value},
}))}
/>
<TextField
margin="dense"
label={t("zip")}
type="text"
fullWidth
value={registerData.customer.zip}
onChange={e => setRegisterData(prev => ({
...prev,
customer: {...prev.customer, zip: e.target.value},
}))}
/>
</>
}
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>{t("cancel")}</Button>
{showRegister ? (
<Button onClick={handleRegister} disabled={isLoadingRegister}>
{isLoadingRegister ? t("loading") : t("register")}
</Button>
) : (
<Button onClick={handleLogin} disabled={isLoadingLogin}>
{isLoadingLogin ? t("loading") : t("login")}
</Button>
)}
</DialogActions>
{showErrorLogin && errorLogin && (
<Box color="error.main">{t("loginFailed")}</Box>
)}
{showErrorRegister && errorRegister !== null && (
<Box color="error.main">{t("registerFailed")}</Box>
)}
{showRegister ? (
<Box sx={{width: '100%', textAlign: 'center', pb: 2}}>
<Link
component="button"
variant="body2"
onClick={() => setShowRegister(false)}
color="primary"
underline="hover"
>
{t("backToLogin")}
</Link>
</Box>
) : (
<Box sx={{width: '100%', textAlign: 'center', pb: 2}}>
<Link
component="button"
variant="body2"
onClick={() => setShowRegister(true)}
color="primary"
underline="hover"
>
{t("noAccountRegister")}
</Link>
</Box>
)}
</form>
</Dialog>
);
/>
<TextField
margin="dense"
label={t("lastName")}
type="text"
fullWidth
value={registerData.customer.surname}
onChange={(e) =>
setRegisterData((prev) => ({
...prev,
customer: { ...prev.customer, surname: e.target.value },
}))
}
/>
<TextField
margin="dense"
label={t("address")}
type="text"
fullWidth
value={registerData.customer.address}
onChange={(e) =>
setRegisterData((prev) => ({
...prev,
customer: { ...prev.customer, address: e.target.value },
}))
}
/>
<TextField
margin="dense"
label={t("country")}
type="text"
fullWidth
value={registerData.customer.country}
onChange={(e) =>
setRegisterData((prev) => ({
...prev,
customer: { ...prev.customer, country: e.target.value },
}))
}
/>
<TextField
margin="dense"
label={t("zip")}
type="text"
fullWidth
value={registerData.customer.zip}
onChange={(e) =>
setRegisterData((prev) => ({
...prev,
customer: { ...prev.customer, zip: e.target.value },
}))
}
/>
</>
)}
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>{t("cancel")}</Button>
{showRegister ? (
<Button onClick={handleRegister} disabled={isLoadingRegister}>
{isLoadingRegister ? t("loading") : t("register")}
</Button>
) : (
<Button onClick={handleLogin} disabled={isLoadingLogin}>
{isLoadingLogin ? t("loading") : t("login")}
</Button>
)}
</DialogActions>
{showErrorLogin && errorLogin && (
<Box color="error.main">{t("loginFailed")}</Box>
)}
{showErrorRegister && errorRegister !== null && (
<Box color="error.main">{t("registerFailed")}</Box>
)}
{showRegister ? (
<Box sx={{ width: "100%", textAlign: "center", pb: 2 }}>
<Link
component="button"
variant="body2"
onClick={() => setShowRegister(false)}
color="primary"
underline="hover"
>
{t("backToLogin")}
</Link>
</Box>
) : (
<Box sx={{ width: "100%", textAlign: "center", pb: 2 }}>
<Link
component="button"
variant="body2"
onClick={() => setShowRegister(true)}
color="primary"
underline="hover"
>
{t("noAccountRegister")}
</Link>
</Box>
)}
</form>
</Dialog>
);
};
export default LoginDialog;

80
01-frontend/src/helper/navbar/NavBar.css
View File

@@ -1,80 +1,80 @@
/* Navbar styles */
.navbar {
/*color in tsx*/
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
position: fixed;
top: 0;
width: 100%;
overflow-x: hidden;
z-index: 10000;
height: var(--navbar-height);
min-height: 64px;
/*color in tsx*/
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
position: fixed;
top: 0;
width: 100%;
overflow-x: hidden;
z-index: 10000;
height: var(--navbar-height);
min-height: 64px;
}
/* Logo styles */
.navbar-logo {
text-decoration: none;
margin-right: 1rem;
height: 3rem;
text-decoration: none;
margin-right: 1rem;
height: 3rem;
}
/* Menu styles */
.navbar-menu {
display: flex;
align-items: center;
margin-left: auto;
display: flex;
align-items: center;
margin-left: auto;
}
/* Search styles */
.search {
position: relative;
border-radius: 4px;
background-color: rgba(255, 255, 255, 0.15);
position: relative;
border-radius: 4px;
background-color: rgba(255, 255, 255, 0.15);
}
.search:hover {
background-color: rgba(255, 255, 255, 0.25);
background-color: rgba(255, 255, 255, 0.25);
}
.search-icon-wrapper {
padding: 8px;
height: 100%;
position: absolute;
pointer-events: none;
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
height: 100%;
position: absolute;
pointer-events: none;
display: flex;
align-items: center;
justify-content: center;
}
.search-input {
color: inherit;
width: 100%;
padding: 8px 8px 8px 40px;
font-size: 1rem;
color: inherit;
width: 100%;
padding: 8px 8px 8px 40px;
font-size: 1rem;
}
/* User avatar styles */
.navbar-user {
margin-left: 16px;
margin-left: 16px;
}
/* Typography styles */
.navbar-typography {
font-family: 'monospace';
font-weight: 700;
letter-spacing: .3rem;
color: inherit;
text-decoration: none;
font-family: "monospace";
font-weight: 700;
letter-spacing: 0.3rem;
color: inherit;
text-decoration: none;
}
/* Button styles */
.navbar-button {
margin: 2;
color: white;
display: block;
margin: 2;
color: white;
display: block;
}
.navbar-offset {
height: var(--navbar-height);
height: var(--navbar-height);
}

638
01-frontend/src/helper/navbar/NavBar.tsx
View File

@@ -1,334 +1,348 @@
import MenuIcon from '@mui/icons-material/Menu';
import SearchIcon from '@mui/icons-material/Search';
import {Autocomplete, Badge, TextField} from '@mui/material';
import AppBar from '@mui/material/AppBar';
import Avatar from '@mui/material/Avatar';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import IconButton from '@mui/material/IconButton';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import Toolbar from '@mui/material/Toolbar';
import Tooltip from '@mui/material/Tooltip';
import Typography from '@mui/material/Typography';
import {useQuery} from '@tanstack/react-query';
import * as React from 'react';
import {useTranslation} from 'react-i18next';
import {useNavigate} from 'react-router-dom';
import Item from '../../components/Item';
import ThemeToggle from '../../theme/ThemeToggle';
import {useAccount} from '../AccountProvider';
import {fetchItemList} from '../query/Queries';
import LoginDialog from './LoginDialog';
import './NavBar.css';
import {useBasket} from '../BasketProvider';
import logo from '../../assets/logo/Blume-logo.png';
import MenuIcon from "@mui/icons-material/Menu";
import SearchIcon from "@mui/icons-material/Search";
import { Autocomplete, Badge, TextField } from "@mui/material";
import AppBar from "@mui/material/AppBar";
import Avatar from "@mui/material/Avatar";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import IconButton from "@mui/material/IconButton";
import Menu from "@mui/material/Menu";
import MenuItem from "@mui/material/MenuItem";
import Toolbar from "@mui/material/Toolbar";
import Tooltip from "@mui/material/Tooltip";
import Typography from "@mui/material/Typography";
import { useQuery } from "@tanstack/react-query";
import * as React from "react";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import Item from "../../components/Item";
import ThemeToggle from "../../theme/ThemeToggle";
import { useAccount } from "../AccountProvider";
import { fetchItemList } from "../query/Queries";
import LoginDialog from "./LoginDialog";
import "./NavBar.css";
import { useBasket } from "../BasketProvider";
import logo from "../../assets/logo/Blume-logo.png";
export default function NavBar() {
const {t} = useTranslation();
const navigate = useNavigate();
const [anchorElNav, setAnchorElNav] = React.useState<null | HTMLElement>(null);
const [anchorElUser, setAnchorElUser] = React.useState<null | HTMLElement>(null);
const [avatarName, setAvatarName] = React.useState<string>(''); // Für Avatar-Tooltip
const { t } = useTranslation();
const navigate = useNavigate();
const [anchorElNav, setAnchorElNav] = React.useState<null | HTMLElement>(
null,
);
const [anchorElUser, setAnchorElUser] = React.useState<null | HTMLElement>(
null,
);
const [avatarName, setAvatarName] = React.useState<string>(""); // Für Avatar-Tooltip
const {user, logout} = useAccount();
const { user, logout } = useAccount();
const {basket} = useBasket();
const { basket } = useBasket();
const totalQuantity = basket?.reduce((sum, item) => sum + item.quantity, 0) ?? 0;
const totalQuantity =
basket?.reduce((sum, item) => sum + item.quantity, 0) ?? 0;
const [loginOpen, setLoginOpen] = React.useState(false);
const [loginData, setLoginData] = React.useState({
password: "",
email: "",
customerId: 0,
});
const [loginOpen, setLoginOpen] = React.useState(false);
const [loginData, setLoginData] = React.useState({password: '', email: '', customerId: 0});
const [itemNames, setItemNames] = React.useState<string[]>([]); // Für Autocomplete
const pageKeys = ["components", "checkout", "contact", "admin"];
const [itemNames, setItemNames] = React.useState<string[]>([]); // Für Autocomplete
const filteredPages = pageKeys
.filter((key) => {
if (key === "admin") {
return user?.isAdmin === true; // nur Admins sehen Admin-Seite
}
return true; // alle anderen Seiten immer anzeigen
})
.map((key) => ({ key, label: t(key) }));
const pageKeys = ['components', 'checkout', 'contact', 'admin'];
const settings = user
? [
{
key: "email",
label: `${t("loggedInAs")}: ${user.email}`,
disabled: true, // wir nutzen dieses Flag gleich zur Erkennung
},
{ key: "account", label: t("account") },
{ key: "orders", label: t("orders") },
{ key: "logout", label: t("logout") },
]
: [{ key: "login", label: t("login") }];
const filteredPages = pageKeys
.filter(key => {
if (key === "admin") {
return user?.isAdmin === true; // nur Admins sehen Admin-Seite
}
return true; // alle anderen Seiten immer anzeigen
})
.map(key => ({key, label: t(key)}));
const handleOpenNavMenu = (event: React.MouseEvent<HTMLElement>) => {
setAnchorElNav(event.currentTarget);
};
const handleOpenUserMenu = (event: React.MouseEvent<HTMLElement>) => {
setAnchorElUser(event.currentTarget);
};
const settings = user
? [
{
key: 'email',
label: `${t('loggedInAs')}: ${user.email}`,
disabled: true // wir nutzen dieses Flag gleich zur Erkennung
},
{key: 'account', label: t('account')},
{key: 'orders', label: t('orders')},
{key: 'logout', label: t('logout')}
]
: [
{key: 'login', label: t('login')}
];
const handleCloseNavMenu = (link: string) => {
setAnchorElNav(null);
navigate(`/${link.toLowerCase()}`);
};
const handleOpenNavMenu = (event: React.MouseEvent<HTMLElement>) => {
setAnchorElNav(event.currentTarget);
};
const handleCloseUserMenu = (link: string) => {
setAnchorElUser(null);
if (link === "login") {
setLoginOpen(true);
} else if (link === "logout") {
logout();
if (
location.pathname.startsWith("/account") ||
location.pathname.startsWith("/orders")
) {
navigate("/");
}
} else {
navigate(`/${link.toLowerCase()}`);
}
};
const handleOpenUserMenu = (event: React.MouseEvent<HTMLElement>) => {
setAnchorElUser(event.currentTarget);
};
const handleLoginSubmit = () => {
setLoginOpen(false);
};
const handleCloseNavMenu = (link: string) => {
setAnchorElNav(null);
navigate(`/${link.toLowerCase()}`);
};
// useQuery, um die Item-Namen zu laden
const { data: items = [] } = useQuery<Item[]>({
queryKey: ["fetchItemList"],
queryFn: fetchItemList,
});
const handleCloseUserMenu = (link: string) => {
setAnchorElUser(null);
if (link === 'login') {
setLoginOpen(true);
} else if (link === 'logout') {
logout();
if (
location.pathname.startsWith('/account') ||
location.pathname.startsWith('/orders')
) {
navigate('/');
}
} else {
navigate(`/${link.toLowerCase()}`)
}
};
React.useEffect(() => {
// Extrahiere die Namen der Items für Autocomplete
setItemNames(items.map((item) => item.name));
}, [items]);
const handleLoginSubmit = () => {
setLoginOpen(false);
};
React.useEffect(() => {
// Setze den Avatar-Namen, wenn der Benutzer angemeldet ist
if (user !== undefined && user !== null) {
setAvatarName(user.email.toUpperCase());
}
if (!user) {
setAvatarName("");
}
}, [user]);
const handleSearch = (_: React.SyntheticEvent, value: string | null) => {
if (!value) {
// Wenn der Suchwert leer ist, navigiere zur Homepage ohne Suchparameter
navigate("/");
} else {
// Navigiere zur Homepage mit dem Suchparameter
navigate(`/?search=${encodeURIComponent(value)}`);
}
};
// useQuery, um die Item-Namen zu laden
const {data: items = []} = useQuery<Item[]>({
queryKey: ["fetchItemList"],
queryFn: fetchItemList,
});
React.useEffect(() => {
// Extrahiere die Namen der Items für Autocomplete
setItemNames(items.map((item) => item.name));
}, [items]);
React.useEffect(() => {
// Setze den Avatar-Namen, wenn der Benutzer angemeldet ist
if (user !== undefined && user !== null) {
setAvatarName(user.email.toUpperCase());
}
if (!user) {
setAvatarName('');
}
}, [user]);
const handleSearch = (_: React.SyntheticEvent, value: string | null) => {
if (!value) {
// Wenn der Suchwert leer ist, navigiere zur Homepage ohne Suchparameter
navigate("/");
} else {
// Navigiere zur Homepage mit dem Suchparameter
navigate(`/?search=${encodeURIComponent(value)}`);
}
};
return (
<>
<AppBar className="navbar" color="primary" elevation={4}>
<Toolbar
disableGutters
sx={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center', // <--- HIER hinzugefügt
px: 3,
minHeight: { xs: 56, sm: 64 }, // optional: Standardhöhe für bessere Zentrierung
}}
>
<Box sx={{display: "flex", alignItems: "center", minWidth: "0px"}}>
<img
src={logo}
alt="Logo"
className="navbar-logo"
style={{ display: "block", height: 40, marginRight: 12, objectFit: "contain" }} // optional: Höhe anpassen
onClick={() => navigate('/')}
/>
<Typography
variant="h6"
noWrap
component="a"
onClick={() => navigate('/')}
sx={{
fontFamily: "monospace",
fontWeight: 700,
letterSpacing: ".3rem",
color: "white",
textDecoration: "none",
display: "flex",
alignItems: "center", // <--- HIER hinzugefügt
height: "100%", // optional
":hover": {
color: "#fff1d8ff"
}
}}
>
Digitaler Produktionsshop
</Typography>
</Box>
<Box sx={{
flexGrow: 1,
display: "flex",
justifyContent: "center",
alignItems: "center", // <--- HIER hinzugefügt
px: 3,
zIndex: 100000
}}>
<Autocomplete
sx={{
flexGrow: 1,
minWidth: "150px",
maxWidth: "600px",
display: "flex",
alignItems: "center" // <--- HIER hinzugefügt
}}
freeSolo
options={itemNames}
onInputChange={handleSearch}
renderInput={(params) => (
<TextField
{...params}
placeholder={t("search") + "..."}
InputProps={{
...params.InputProps,
startAdornment: (
<SearchIcon sx={{color: "white", mr: 1}}/>
),
}}
sx={{
'& .MuiOutlinedInput-root': {
'& fieldset': {
borderColor: 'white',
borderWidth: '1px',
},
'&:hover fieldset': {
borderColor: 'white',
},
'&.Mui-focused fieldset': {
borderColor: 'white',
},
},
input: {
color: 'white',
},
}}
/>
)}
/>
</Box>
<Box sx={{display: "flex", alignItems: "center", gap: 2, marginLeft: 'auto'}}>
<Box sx={{display: {xs: "none", md: "flex"}, gap: 2}}>
{filteredPages.map(({key, label}) => {
if (key === 'checkout') {
return (
<Button
key={key}
onClick={() => handleCloseNavMenu(key)}
sx={{color: "white", fontWeight: 500}}
>
<Badge
badgeContent={totalQuantity}
color="error"
overlap="rectangular"
showZero={false}
>
{label}
</Badge>
</Button>
);
}
return (
<Button
key={key}
onClick={() => handleCloseNavMenu(key)}
sx={{color: "white", fontWeight: 500}}
>
{label}
</Button>
);
})}
</Box>
<Box sx={{display: {xs: "flex", md: "none"}}}>
<IconButton
size="large"
aria-label={t('menu')}
onClick={handleOpenNavMenu}
color="inherit"
>
<MenuIcon/>
</IconButton>
<Menu
anchorEl={anchorElNav}
anchorOrigin={{vertical: "top", horizontal: "right"}}
transformOrigin={{vertical: "top", horizontal: "right"}}
open={Boolean(anchorElNav)}
onClose={() => setAnchorElNav(null)}
>
{filteredPages.map(({key, label}) => (
<MenuItem key={key} onClick={() => handleCloseNavMenu(key)}>
<Typography>{label}</Typography>
</MenuItem>
))}
</Menu>
</Box>
<ThemeToggle/>
<Tooltip title={t('openSettings')} placement='bottom-end'>
<IconButton onClick={handleOpenUserMenu} sx={{p: 0}}>
<Avatar alt={avatarName} src="/static/images/avatar/2.jpg"/>
</IconButton>
</Tooltip>
<Menu
sx={{mt: "15px"}}
id="menu-appbar-user"
anchorEl={anchorElUser}
open={Boolean(anchorElUser)}
onClose={() => setAnchorElUser(null)}
>
{settings.map(({key, label, disabled}) => (
<MenuItem
key={key}
onClick={() => {
if (!disabled) handleCloseUserMenu(key);
}}
disabled={disabled}
>
<Typography sx={{textAlign: "center"}}>{label}</Typography>
</MenuItem>
))}
</Menu>
</Box>
</Toolbar>
</AppBar>
<LoginDialog
open={loginOpen}
onClose={() => setLoginOpen(false)}
onSubmit={handleLoginSubmit}
loginData={loginData}
setLoginData={setLoginData}
return (
<>
<AppBar className="navbar" color="primary" elevation={4}>
<Toolbar
disableGutters
sx={{
display: "flex",
justifyContent: "space-between",
alignItems: "center", // <--- HIER hinzugefügt
px: 3,
minHeight: { xs: 56, sm: 64 }, // optional: Standardhöhe für bessere Zentrierung
}}
>
<Box sx={{ display: "flex", alignItems: "center", minWidth: "0px" }}>
<img
src={logo}
alt="Logo"
className="navbar-logo"
style={{
display: "block",
height: 40,
marginRight: 12,
objectFit: "contain",
}} // optional: Höhe anpassen
onClick={() => navigate("/")}
/>
<div className="navbar-offset"/>
</>
);
<Typography
variant="h6"
noWrap
component="a"
onClick={() => navigate("/")}
sx={{
fontFamily: "monospace",
fontWeight: 700,
letterSpacing: ".3rem",
color: "white",
textDecoration: "none",
display: "flex",
alignItems: "center", // <--- HIER hinzugefügt
height: "100%", // optional
":hover": {
color: "#fff1d8ff",
},
}}
>
Digitaler Produktionsshop
</Typography>
</Box>
<Box
sx={{
flexGrow: 1,
display: "flex",
justifyContent: "center",
alignItems: "center", // <--- HIER hinzugefügt
px: 3,
zIndex: 100000,
}}
>
<Autocomplete
sx={{
flexGrow: 1,
minWidth: "150px",
maxWidth: "600px",
display: "flex",
alignItems: "center", // <--- HIER hinzugefügt
}}
freeSolo
options={itemNames}
onInputChange={handleSearch}
renderInput={(params) => (
<TextField
{...params}
placeholder={t("search") + "..."}
InputProps={{
...params.InputProps,
startAdornment: (
<SearchIcon sx={{ color: "white", mr: 1 }} />
),
}}
sx={{
"& .MuiOutlinedInput-root": {
"& fieldset": {
borderColor: "white",
borderWidth: "1px",
},
"&:hover fieldset": {
borderColor: "white",
},
"&.Mui-focused fieldset": {
borderColor: "white",
},
},
input: {
color: "white",
},
}}
/>
)}
/>
</Box>
<Box
sx={{
display: "flex",
alignItems: "center",
gap: 2,
marginLeft: "auto",
}}
>
<Box sx={{ display: { xs: "none", md: "flex" }, gap: 2 }}>
{filteredPages.map(({ key, label }) => {
if (key === "checkout") {
return (
<Button
key={key}
onClick={() => handleCloseNavMenu(key)}
sx={{ color: "white", fontWeight: 500 }}
>
<Badge
badgeContent={totalQuantity}
color="error"
overlap="rectangular"
showZero={false}
>
{label}
</Badge>
</Button>
);
}
return (
<Button
key={key}
onClick={() => handleCloseNavMenu(key)}
sx={{ color: "white", fontWeight: 500 }}
>
{label}
</Button>
);
})}
</Box>
<Box sx={{ display: { xs: "flex", md: "none" } }}>
<IconButton
size="large"
aria-label={t("menu")}
onClick={handleOpenNavMenu}
color="inherit"
>
<MenuIcon />
</IconButton>
<Menu
anchorEl={anchorElNav}
anchorOrigin={{ vertical: "top", horizontal: "right" }}
transformOrigin={{ vertical: "top", horizontal: "right" }}
open={Boolean(anchorElNav)}
onClose={() => setAnchorElNav(null)}
>
{filteredPages.map(({ key, label }) => (
<MenuItem key={key} onClick={() => handleCloseNavMenu(key)}>
<Typography>{label}</Typography>
</MenuItem>
))}
</Menu>
</Box>
<ThemeToggle />
<Tooltip title={t("openSettings")} placement="bottom-end">
<IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
<Avatar alt={avatarName} src="/static/images/avatar/2.jpg" />
</IconButton>
</Tooltip>
<Menu
sx={{ mt: "15px" }}
id="menu-appbar-user"
anchorEl={anchorElUser}
open={Boolean(anchorElUser)}
onClose={() => setAnchorElUser(null)}
>
{settings.map(({ key, label, disabled }) => (
<MenuItem
key={key}
onClick={() => {
if (!disabled) handleCloseUserMenu(key);
}}
disabled={disabled}
>
<Typography sx={{ textAlign: "center" }}>{label}</Typography>
</MenuItem>
))}
</Menu>
</Box>
</Toolbar>
</AppBar>
<LoginDialog
open={loginOpen}
onClose={() => setLoginOpen(false)}
onSubmit={handleLoginSubmit}
loginData={loginData}
setLoginData={setLoginData}
/>
<div className="navbar-offset" />
</>
);
}

380
01-frontend/src/helper/productpage/ProductInfo.tsx
View File

@@ -1,209 +1,215 @@
import {Close, LocalShipping, ShoppingCart} from "@mui/icons-material";
import { Close, LocalShipping, ShoppingCart } from "@mui/icons-material";
import {
Alert,
Box,
Button,
Card,
Divider,
Grid,
IconButton,
Rating,
Snackbar,
SnackbarCloseReason,
Stack,
TextField,
Typography
Alert,
Box,
Button,
Card,
Divider,
Grid,
IconButton,
Rating,
Snackbar,
SnackbarCloseReason,
Stack,
TextField,
Typography,
} from "@mui/material";
import React, {useEffect, useState} from "react";
import {useTranslation} from "react-i18next";
import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import Item from "../../components/Item";
import {useBasket} from "../BasketProvider";
import { useBasket } from "../BasketProvider";
export default function ProductInfo({item}: { item: Item }) {
export default function ProductInfo({ item }: { item: Item }) {
const { t } = useTranslation();
const [quantity, setQuantity] = useState<number>(1);
const [open, setOpen] = useState<boolean>(false);
const [imageDimensions, setImageDimensions] = useState({
width: 0,
height: 0,
});
const {t} = useTranslation();
const [quantity, setQuantity] = useState<number>(1);
const [open, setOpen] = useState<boolean>(false);
const [imageDimensions, setImageDimensions] = useState({width: 0, height: 0});
const { addToBasket } = useBasket();
const handleClose = (
_: React.SyntheticEvent | Event,
reason?: SnackbarCloseReason,
) => {
if (reason === "clickaway") {
return;
}
const {addToBasket} = useBasket();
setOpen(false);
};
const handleClose = (
_: React.SyntheticEvent | Event,
reason?: SnackbarCloseReason,
) => {
if (reason === 'clickaway') {
return;
const action = (
<React.Fragment>
<IconButton
size="small"
aria-label={t("close")}
color="inherit"
onClick={handleClose}
>
<Close fontSize="small" />
</IconButton>
</React.Fragment>
);
const handleAddToCart = () => {
addToBasket(item, quantity);
setOpen(true);
console.log(`Added {quantity} of €{item.name} to basket`);
};
const discountedPrice = item.price100 * (1 - item.discount100 / 100);
const handleImageLoad = (event: React.SyntheticEvent<HTMLImageElement>) => {
const { naturalWidth, naturalHeight } = event.currentTarget;
setImageDimensions({ width: naturalWidth, height: naturalHeight });
};
const [imageUrl, setImageUrl] = useState<string>("/src/assets/default.jpg"); // Fallback-Bild
useEffect(() => {
const fetchImage = async () => {
try {
const response = await fetch(
`http://localhost:8085/image?uuid=${item.uuid}`,
);
let data = await response.text();
if (data.length == 0) {
console.error("Got emtpy picture for article ", item.uuid);
}
setOpen(false);
if (!data.startsWith("data:image/")) {
data = "data:image/jpeg;base64," + data;
}
setImageUrl(data);
} catch (error) {
console.error("Fehler beim Laden des Bildes:", error);
}
};
const action = (
<React.Fragment>
<IconButton
size="small"
aria-label={t('close')}
color="inherit"
onClick={handleClose}
>
<Close fontSize="small"/>
</IconButton>
</React.Fragment>
);
fetchImage();
}, [item.uuid]);
return (
<Grid container spacing={4}>
{/* Left Column - Image */}
const handleAddToCart = () => {
addToBasket(item, quantity);
setOpen(true);
console.log(`Added {quantity} of €{item.name} to basket`);
};
<Card
elevation={2}
sx={{ width: "100%", maxWidth: 400, display: "inherit" }}
>
<Box
component="img"
src={imageUrl}
alt={item.name}
onLoad={handleImageLoad} // Event-Handler zum Ermitteln der Bildgröße
onError={(event) => {
event.currentTarget.src = "/src/assets/default.jpg"; // Standardbild setzen
}}
sx={{
maxWidth:
imageDimensions.width > imageDimensions.height ? "100%" : "auto",
maxHeight:
imageDimensions.height >= imageDimensions.width ? 400 : "auto",
width: "auto",
height: "auto",
objectFit: "contain",
}}
/>
</Card>
const discountedPrice = item.price100 * (1 - item.discount100 / 100);
{/* Right Column - Product Details */}
const handleImageLoad = (event: React.SyntheticEvent<HTMLImageElement>) => {
const {naturalWidth, naturalHeight} = event.currentTarget;
setImageDimensions({width: naturalWidth, height: naturalHeight});
};
<Stack spacing={3}>
<Typography variant="h4" component="h1">
{item.name}
</Typography>
const [imageUrl, setImageUrl] = useState<string>("/src/assets/default.jpg"); // Fallback-Bild
<Box display="flex" alignItems="center" gap={1}>
<Rating value={item.rating / 2} precision={0.5} readOnly />
<Typography variant="body2" color="text.secondary">
{item.rating > 0 ? `(${item.rating / 2} / 5)` : t("noRatingsYet")}
</Typography>
</Box>
useEffect(() => {
const fetchImage = async () => {
try {
const response = await fetch(`http://localhost:8085/image?uuid=${item.uuid}`);
let data = await response.text();
if (data.length == 0) {
console.error("Got emtpy picture for article ", item.uuid);
}
if (!data.startsWith("data:image/")) {
data = "data:image/jpeg;base64," + data
}
setImageUrl(data);
} catch (error) {
console.error("Fehler beim Laden des Bildes:", error);
}
};
<Stack direction="row" alignItems="center" spacing={2}>
{item.discount100 > 0 ? (
<>
<Typography variant="h4" color="green">
{(discountedPrice / 100).toFixed(2)} €
</Typography>
<Typography
variant="h6"
color="text.secondary"
sx={{ textDecoration: "line-through" }}
>
{(item.price100 / 100).toFixed(2)} €
</Typography>
<Typography variant="h6" color="error">
-{item.discount100} %
</Typography>
</>
) : (
<Typography variant="h4" color="green">
{(item.price100 / 100).toFixed(2)} €
</Typography>
)}
</Stack>
fetchImage();
}, [item.uuid]);
<Divider />
return (
<Grid container spacing={4}>
{/* Left Column - Image */}
<Box>
{item.stock > 10 ? (
<Alert severity="success" variant="outlined">
{t("inStock")} ({item.stock} {t("available")})
</Alert>
) : item.stock > 0 ? (
<Alert severity="warning" variant="outlined">
{t("almostSoldOut")} ({item.stock} {t("available")})
</Alert>
) : (
<Alert severity="error" variant="filled">
{t("outOfStock")}
</Alert>
)}
</Box>
<Card elevation={2} sx={{width: '100%', maxWidth: 400, display: 'inherit'}}>
<Box
component="img"
src={imageUrl}
alt={item.name}
onLoad={handleImageLoad} // Event-Handler zum Ermitteln der Bildgröße
onError={(event) => {
event.currentTarget.src = "/src/assets/default.jpg"; // Standardbild setzen
}}
sx={{
maxWidth: imageDimensions.width > imageDimensions.height ? "100%" : "auto",
maxHeight: imageDimensions.height >= imageDimensions.width ? 400 : "auto",
width: "auto",
height: "auto",
objectFit: "contain",
}}
/>
</Card>
<Stack direction="row" spacing={2} alignItems="center">
<TextField
type="number"
label={t("quantity")}
value={quantity}
onChange={(e) => setQuantity(Math.max(1, parseInt(e.target.value)))}
InputProps={{ inputProps: { min: 1, max: item.stock } }}
sx={{ width: 100 }}
/>
<Button
variant="contained"
size="large"
startIcon={<ShoppingCart />}
onClick={handleAddToCart}
disabled={item.stock <= 0}
fullWidth
>
{t("addToCart")}
</Button>
</Stack>
{/* Right Column - Product Details */}
<Stack spacing={3}>
<Typography variant="h4" component="h1">
{item.name}
</Typography>
<Box display="flex" alignItems="center" gap={1}>
<Rating value={item.rating / 2} precision={0.5} readOnly/>
<Typography variant="body2" color="text.secondary">
{item.rating > 0 ? `(${item.rating / 2} / 5)` : t('noRatingsYet')}
</Typography>
</Box>
<Stack direction="row" alignItems="center" spacing={2}>
{item.discount100 > 0 ? (
<>
<Typography variant="h4" color="green">
{(discountedPrice / 100).toFixed(2)} €
</Typography>
<Typography
variant="h6"
color="text.secondary"
sx={{textDecoration: 'line-through'}}
>
{(item.price100 / 100).toFixed(2)} €
</Typography>
<Typography variant="h6" color="error">
-{item.discount100} %
</Typography>
</>
) : (
<Typography variant="h4" color="green">
{(item.price100 / 100).toFixed(2)} €
</Typography>
)}
</Stack>
<Divider/>
<Box>
{item.stock > 10 ? (
<Alert severity="success" variant='outlined'>
{t('inStock')} ({item.stock} {t('available')})
</Alert>
) : item.stock > 0 ? (
<Alert severity="warning"
variant='outlined'>{t('almostSoldOut')} ({item.stock} {t('available')})</Alert>
) : (
<Alert severity="error" variant='filled'>{t('outOfStock')}</Alert>
)}
</Box>
<Stack direction="row" spacing={2} alignItems="center">
<TextField
type="number"
label={t('quantity')}
value={quantity}
onChange={(e) => setQuantity(Math.max(1, parseInt(e.target.value)))}
InputProps={{inputProps: {min: 1, max: item.stock}}}
sx={{width: 100}}
/>
<Button
variant="contained"
size="large"
startIcon={<ShoppingCart/>}
onClick={handleAddToCart}
disabled={item.stock <= 0}
fullWidth
>
{t('addToCart')}
</Button>
</Stack>
<Box sx={{mt: 2}}>
<Typography variant="body2" color="text.secondary">
<LocalShipping sx={{mr: 1, verticalAlign: 'middle'}}/>
{t('freeShipping')}
</Typography>
</Box>
</Stack>
<Snackbar
open={open}
autoHideDuration={3000}
onClose={handleClose}
message={t('addedToCart')}
action={action}
/>
</Grid>
);
<Box sx={{ mt: 2 }}>
<Typography variant="body2" color="text.secondary">
<LocalShipping sx={{ mr: 1, verticalAlign: "middle" }} />
{t("freeShipping")}
</Typography>
</Box>
</Stack>
<Snackbar
open={open}
autoHideDuration={3000}
onClose={handleClose}
message={t("addedToCart")}
action={action}
/>
</Grid>
);
}

100
01-frontend/src/helper/productpage/RatingCard.tsx
View File

@@ -1,55 +1,63 @@
import {Card, CardActionArea, CardContent, Paper, Rating, Typography, useTheme} from "@mui/material";
import {
Card,
CardActionArea,
CardContent,
Paper,
Rating,
Typography,
useTheme,
} from "@mui/material";
import RatingType from "../../components/Rating";
import {useTranslation} from 'react-i18next';
import { useTranslation } from "react-i18next";
export default function RatingCard(ratingType: RatingType) {
const {t} = useTranslation();
const theme = useTheme(); // Zugriff auf Light/Dark-Mode
const { t } = useTranslation();
const theme = useTheme(); // Zugriff auf Light/Dark-Mode
const handleClick = () => {
};
const handleClick = () => {};
return (
<Paper
elevation={4}
sx={{
backgroundColor: theme.palette.background.paper,
color: theme.palette.text.primary,
mb: 3
}}
>
<Card
sx={{
backgroundColor: theme.palette.background.paper,
}}
return (
<Paper
elevation={4}
sx={{
backgroundColor: theme.palette.background.paper,
color: theme.palette.text.primary,
mb: 3,
}}
>
<Card
sx={{
backgroundColor: theme.palette.background.paper,
}}
>
<CardActionArea onClick={handleClick}>
<CardContent>
<Typography
gutterBottom
variant="h6"
component="div"
sx={{ color: theme.palette.text.primary }}
>
<CardActionArea onClick={handleClick}>
<CardContent>
<Typography
gutterBottom
variant="h6"
component="div"
sx={{color: theme.palette.text.primary}}
>
{t('ratingFrom')} {new Date(ratingType.timestamp).toLocaleDateString('de-DE')}
</Typography>
{t("ratingFrom")}{" "}
{new Date(ratingType.timestamp).toLocaleDateString("de-DE")}
</Typography>
<Rating
name="half-rating"
readOnly
defaultValue={ratingType.rating / 2}
precision={0.5}
/>
<Rating
name="half-rating"
readOnly
defaultValue={ratingType.rating / 2}
precision={0.5}
/>
<Typography
variant="body2"
sx={{color: theme.palette.text.secondary, mt: 1}}
>
{ratingType.content}
</Typography>
</CardContent>
</CardActionArea>
</Card>
</Paper>
);
<Typography
variant="body2"
sx={{ color: theme.palette.text.secondary, mt: 1 }}
>
{ratingType.content}
</Typography>
</CardContent>
</CardActionArea>
</Card>
</Paper>
);
}

286
01-frontend/src/helper/productpage/Ratings.tsx
View File

@@ -1,166 +1,170 @@
import {
Box,
Button,
Divider,
IconButton,
Rating,
Snackbar,
SnackbarCloseReason,
TextField,
Typography,
useTheme
Box,
Button,
Divider,
IconButton,
Rating,
Snackbar,
SnackbarCloseReason,
TextField,
Typography,
useTheme,
} from "@mui/material";
import {Close} from "@mui/icons-material";
import {useQuery} from "@tanstack/react-query";
import React, {useMemo, useState} from "react";
import {useTranslation} from 'react-i18next';
import { Close } from "@mui/icons-material";
import { useQuery } from "@tanstack/react-query";
import React, { useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import RatingType from "../../components/Rating";
import {fetchRatingList, submitRating} from "../query/Queries";
import { fetchRatingList, submitRating } from "../query/Queries";
import RatingCard from "./RatingCard";
import RatingSubmitType from "../../components/RatingSubmit";
export default function Ratings({itemId}: { itemId: string }) {
const {t} = useTranslation();
const theme = useTheme();
export default function Ratings({ itemId }: { itemId: string }) {
const { t } = useTranslation();
const theme = useTheme();
const [open, setOpen] = useState<boolean>(false);
const [ratingText, setRatingText] = useState<string>("");
const [ratingValue, setRatingValue] = useState<number | null>(2.5);
const [open, setOpen] = useState<boolean>(false);
const [ratingText, setRatingText] = useState<string>("");
const [ratingValue, setRatingValue] = useState<number | null>(2.5);
const ratingData: RatingSubmitType = {
rating: ratingValue || 0,
content: ratingText || "",
articleId: itemId,
};
const ratingData: RatingSubmitType = {
rating: ratingValue || 0,
content: ratingText || "",
articleId: itemId,
};
const {refetch} = useQuery({
queryKey: ["submitRating", ratingData],
queryFn: () => submitRating(ratingData),
retry: 3,
retryDelay: 1000,
enabled: false,
});
const { refetch } = useQuery({
queryKey: ["submitRating", ratingData],
queryFn: () => submitRating(ratingData),
retry: 3,
retryDelay: 1000,
enabled: false,
});
const handleRatingSubmit = () => {
setOpen(true);
void refetch(); // bewusst ausgelöst, kein await notwendig
};
const handleRatingSubmit = () => {
setOpen(true);
void refetch(); // bewusst ausgelöst, kein await notwendig
};
const handleClose = (
_: React.SyntheticEvent | Event,
reason?: SnackbarCloseReason
) => {
if (reason === "clickaway") return;
setOpen(false);
};
const handleClose = (
_: React.SyntheticEvent | Event,
reason?: SnackbarCloseReason,
) => {
if (reason === "clickaway") return;
setOpen(false);
};
const action = (
<React.Fragment>
<IconButton
size="small"
aria-label={t("close")}
color="inherit"
onClick={handleClose}
>
<Close fontSize="small"/>
</IconButton>
</React.Fragment>
);
const action = (
<React.Fragment>
<IconButton
size="small"
aria-label={t("close")}
color="inherit"
onClick={handleClose}
>
<Close fontSize="small" />
</IconButton>
</React.Fragment>
);
const {data = []} = useQuery<RatingType[]>({
queryKey: ["fetchRatingList", itemId],
queryFn: () => fetchRatingList(itemId),
retry: 3,
retryDelay: 1000,
});
const { data = [] } = useQuery<RatingType[]>({
queryKey: ["fetchRatingList", itemId],
queryFn: () => fetchRatingList(itemId),
retry: 3,
retryDelay: 1000,
});
const ratings: RatingType[] = useMemo(() => data || [], [data]);
const ratings: RatingType[] = useMemo(() => data || [], [data]);
const getRatings = () => {
if (ratings.length === 0) {
return (
<Typography variant="body1" sx={{color: theme.palette.text.secondary}}>
{t("noRatingsYet")}
</Typography>
);
}
const getRatings = () => {
if (ratings.length === 0) {
return (
<Typography
variant="body1"
sx={{ color: theme.palette.text.secondary }}
>
{t("noRatingsYet")}
</Typography>
);
}
return ratings.map((ratingType: RatingType) => (
<RatingCard key={ratingType.timestamp} {...ratingType} />
));
};
return ratings.map((ratingType: RatingType) => (
<RatingCard key={ratingType.timestamp} {...ratingType} />
));
};
return (
<>
<Divider sx={{backgroundColor: theme.palette.divider, my: 3}}/>
return (
<>
<Divider sx={{ backgroundColor: theme.palette.divider, my: 3 }} />
<Box sx={{mb: 4}}>
<Typography variant="h5" sx={{color: theme.palette.text.primary, mb: 2}}>
{t("rateThisProduct")}:
</Typography>
<Box sx={{ mb: 4 }}>
<Typography
variant="h5"
sx={{ color: theme.palette.text.primary, mb: 2 }}
>
{t("rateThisProduct")}:
</Typography>
<Rating
name="half-rating"
value={ratingValue}
onChange={(_, value) => setRatingValue(value)}
precision={0.5}
/>
<Rating
name="half-rating"
value={ratingValue}
onChange={(_, value) => setRatingValue(value)}
precision={0.5}
/>
<TextField
label={t("review")}
multiline
minRows={4}
maxRows={16}
fullWidth
sx={{
mt: 2,
mb: 2,
backgroundColor: theme.palette.background.paper,
color: theme.palette.text.primary,
'& .MuiInputBase-input': {
color: theme.palette.text.primary,
},
'& label': {
color: theme.palette.text.secondary,
},
'& .MuiOutlinedInput-root': {
'& fieldset': {
borderColor: theme.palette.divider,
},
'&:hover fieldset': {
borderColor: theme.palette.text.primary,
},
'&.Mui-focused fieldset': {
borderColor: theme.palette.primary.main,
},
},
}}
value={ratingText}
onChange={(e) => setRatingText(e.target.value)}
/>
<TextField
label={t("review")}
multiline
minRows={4}
maxRows={16}
fullWidth
sx={{
mt: 2,
mb: 2,
backgroundColor: theme.palette.background.paper,
color: theme.palette.text.primary,
"& .MuiInputBase-input": {
color: theme.palette.text.primary,
},
"& label": {
color: theme.palette.text.secondary,
},
"& .MuiOutlinedInput-root": {
"& fieldset": {
borderColor: theme.palette.divider,
},
"&:hover fieldset": {
borderColor: theme.palette.text.primary,
},
"&.Mui-focused fieldset": {
borderColor: theme.palette.primary.main,
},
},
}}
value={ratingText}
onChange={(e) => setRatingText(e.target.value)}
/>
<Button
variant="contained"
color="primary"
onClick={handleRatingSubmit}
>
{t("submit")}
</Button>
</Box>
<Button
variant="contained"
color="primary"
onClick={handleRatingSubmit}
>
{t("submit")}
</Button>
</Box>
<Divider sx={{backgroundColor: theme.palette.divider, my: 3}}/>
<Divider sx={{ backgroundColor: theme.palette.divider, my: 3 }} />
<Box>
{getRatings()}
</Box>
<Box>{getRatings()}</Box>
<Snackbar
open={open}
autoHideDuration={3000}
onClose={handleClose}
message={t("thanksForRating")}
action={action}
/>
</>
);
<Snackbar
open={open}
autoHideDuration={3000}
onClose={handleClose}
message={t("thanksForRating")}
action={action}
/>
</>
);
}

562
01-frontend/src/helper/query/Queries.tsx
View File

@@ -1,323 +1,415 @@
// api/queries.js
import AccountType, {AdminAccountOperation, CustomerType, SubmitLogin, User} from "../../components/Account";
import OrderType, {OrderPatch} from "../../components/Order";
import AccountType, {
AdminAccountOperation,
CustomerType,
SubmitLogin,
User,
} from "../../components/Account";
import OrderType, { OrderPatch } from "../../components/Order";
import RatingSubmitType from "../../components/RatingSubmit";
import {Item, ItemWithFSImage} from "../../components/Item";
import { Item, ItemWithFSImage } from "../../components/Item";
export const fetchItemList = async () => {
const response = await fetch('http://localhost:8085/article/all');
if (!response.ok) {
throw new Error('Fehler beim Laden der Items');
}
const data = await response.json();
return data;
const response = await fetch("http://localhost:8085/article/all");
if (!response.ok) {
throw new Error("Fehler beim Laden der Items");
}
const data = await response.json();
return data;
};
export const fetchItemListWithImage = async () => {
const response = await fetch('http://localhost:8085/article/all/image');
if (!response.ok) {
throw new Error('Fehler beim Laden der Items');
}
const data = await response.json();
return data;
const response = await fetch("http://localhost:8085/article/all/image");
if (!response.ok) {
throw new Error("Fehler beim Laden der Items");
}
const data = await response.json();
return data;
};
export const submitRating = async (ratingData: RatingSubmitType) => {
const response = await fetch('http://localhost:8085/review?uuid=' + ratingData.articleId + '&rating=' + ratingData.rating * 2, {
method: 'POST',
headers: {
'Content-Type': 'text/plain',
},
body: ratingData.content,
});
const response = await fetch(
"http://localhost:8085/review?uuid=" +
ratingData.articleId +
"&rating=" +
ratingData.rating * 2,
{
method: "POST",
headers: {
"Content-Type": "text/plain",
},
body: ratingData.content,
},
);
if (!response.ok) {
throw new Error('Fehler beim Senden der Bewertung');
}
if (!response.ok) {
throw new Error("Fehler beim Senden der Bewertung");
}
const data = await response.json();
return data;
}
const data = await response.json();
return data;
};
export const fetchRatingList = async (itemId: string) => {
const response = await fetch('http://localhost:8085/review/all?uuid=' + itemId);
if (!response.ok) {
throw new Error('Fehler beim Laden der Items');
}
const data = await response.json();
return data;
const response = await fetch(
"http://localhost:8085/review/all?uuid=" + itemId,
);
if (!response.ok) {
throw new Error("Fehler beim Laden der Items");
}
const data = await response.json();
return data;
};
export const submitOrder = async (data: OrderType) => {
const response = await fetch('http://localhost:8085/order', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
});
const response = await fetch("http://localhost:8085/order", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(data),
});
if (!response.ok) {
throw new Error('Fehler beim Senden der Bestellung');
}
if (!response.ok) {
throw new Error("Fehler beim Senden der Bestellung");
}
return await response.json();
}
return await response.json();
};
export const submitAccount = async (data: AccountType) => {
const response = await fetch('http://localhost:8085/account', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
});
const response = await fetch("http://localhost:8085/account", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(data),
});
if (!response.ok) {
throw new Error('Fehler beim Senden des Accounts');
}
if (!response.ok) {
throw new Error("Fehler beim Senden des Accounts");
}
return await response.json();
}
return await response.json();
};
export const submitCustomer = async (data: CustomerType) => {
const response = await fetch('http://localhost:8085/customer', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
});
const response = await fetch("http://localhost:8085/customer", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(data),
});
if (!response.ok) {
throw new Error('Fehler beim Senden des Accounts');
}
if (!response.ok) {
throw new Error("Fehler beim Senden des Accounts");
}
return await response.json();
}
return await response.json();
};
export const submitLogin = async (loginData: SubmitLogin) => {
const response = await fetch("http://localhost:8085/session?email=" + loginData.email + "&password=" + loginData.password, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(loginData),
});
if (!response.ok) {
throw new Error("Login failed");
}
return response.json();
const response = await fetch(
"http://localhost:8085/session?email=" +
loginData.email +
"&password=" +
loginData.password,
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(loginData),
},
);
if (!response.ok) {
throw new Error("Login failed");
}
return response.json();
};
export const fetchAccount = async (loginData: SubmitLogin) => {
const response = await fetch("http://localhost:8085/account?email=" + loginData.email + "&password=" + loginData.password);
if (!response.ok) {
throw new Error("Login failed");
}
return response.json();
const response = await fetch(
"http://localhost:8085/account?email=" +
loginData.email +
"&password=" +
loginData.password,
);
if (!response.ok) {
throw new Error("Login failed");
}
return response.json();
};
export const submitRegister = async (registerData: AccountType) => {
const response = await fetch("http://localhost:8085/account", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(registerData),
});
if (!response.ok) {
throw new Error("Login failed");
}
return response.json();
const response = await fetch("http://localhost:8085/account", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(registerData),
});
if (!response.ok) {
throw new Error("Login failed");
}
return response.json();
};
export const fetchCustomer = async (userId: number) => {
const response = await fetch('http://localhost:8085/customer?id=' + userId);
if (!response.ok) {
throw new Error('Fehler beim Laden des Customers');
}
const data = await response.json();
return data;
const response = await fetch("http://localhost:8085/customer?id=" + userId);
if (!response.ok) {
throw new Error("Fehler beim Laden des Customers");
}
const data = await response.json();
return data;
};
export const deleteAccount = async (user: User) => {
const response = await fetch('http://localhost:8085/account?email=' + user.email + '&password=' + user.password, {
method: 'DELETE',
});
if (!response.ok) {
throw new Error('Fehler beim Löschen des Accounts');
}
return await response.json();
const response = await fetch(
"http://localhost:8085/account?email=" +
user.email +
"&password=" +
user.password,
{
method: "DELETE",
},
);
if (!response.ok) {
throw new Error("Fehler beim Löschen des Accounts");
}
return await response.json();
};
export const deleteAccountAdmin = async (operation: AdminAccountOperation) => {
const response = await fetch('http://localhost:8085/account/admin?email=' + operation.email + '&uuid=' + operation.uuid + '&id=' + operation.accountId, {
method: 'DELETE',
});
if (!response.ok) {
throw new Error('Fehler beim Löschen des Accounts');
}
return await response.json();
const response = await fetch(
"http://localhost:8085/account/admin?email=" +
operation.email +
"&uuid=" +
operation.uuid +
"&id=" +
operation.accountId,
{
method: "DELETE",
},
);
if (!response.ok) {
throw new Error("Fehler beim Löschen des Accounts");
}
return await response.json();
};
export const fetchOrders = async (customerId: number) => {
const response = await fetch('http://localhost:8085/order/all?customerId=' + customerId);
if (!response.ok) {
throw new Error('Fehler beim Laden des Customers');
}
const data = await response.json();
return data;
const response = await fetch(
"http://localhost:8085/order/all?customerId=" + customerId,
);
if (!response.ok) {
throw new Error("Fehler beim Laden des Customers");
}
const data = await response.json();
return data;
};
export const fetchAccounts = async (loginData: User) => {
const response = await fetch("http://localhost:8085/account/all?email=" + loginData.email + "&session=" + loginData.session);
if (!response.ok) {
throw new Error("Login failed");
}
return response.json();
const response = await fetch(
"http://localhost:8085/account/all?email=" +
loginData.email +
"&session=" +
loginData.session,
);
if (!response.ok) {
throw new Error("Login failed");
}
return response.json();
};
export const fetchItems = async () => { //TODO: remove and use above
const response = await fetch("http://localhost:8085/article/all");
if (!response.ok) {
throw new Error("fetching items failed");
}
return response.json();
export const fetchItems = async () => {
//TODO: remove and use above
const response = await fetch("http://localhost:8085/article/all");
if (!response.ok) {
throw new Error("fetching items failed");
}
return response.json();
};
export const fetchStatisticsVolume = async (loginData: User) => {
const response = await fetch("http://localhost:8085/statistics/volume?email=" + loginData.email + "&session=" + loginData.session);
if (!response.ok) {
throw new Error("fetching satistics Volume failed");
}
return response.json();
const response = await fetch(
"http://localhost:8085/statistics/volume?email=" +
loginData.email +
"&session=" +
loginData.session,
);
if (!response.ok) {
throw new Error("fetching satistics Volume failed");
}
return response.json();
};
export const fetchStatisticsRevenue = async (loginData: User) => {
const response = await fetch("http://localhost:8085/statistics/revenue?email=" + loginData.email + "&session=" + loginData.session);
if (!response.ok) {
throw new Error("fetching satistics Revenue failed");
}
return response.json();
const response = await fetch(
"http://localhost:8085/statistics/revenue?email=" +
loginData.email +
"&session=" +
loginData.session,
);
if (!response.ok) {
throw new Error("fetching satistics Revenue failed");
}
return response.json();
};
export const editAccount = async (customer: CustomerType) => {
const response = await fetch('http://localhost:8085/customer?id=' + customer.id, {
method: 'PUT',
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(customer),
});
if (!response.ok) {
throw new Error('Fehler beim Löschen des Accounts');
}
return await response.json();
const response = await fetch(
"http://localhost:8085/customer?id=" + customer.id,
{
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(customer),
},
);
if (!response.ok) {
throw new Error("Fehler beim Löschen des Accounts");
}
return await response.json();
};
export const orderPatch = async (order: OrderPatch) => {
const response = await fetch("http://localhost:8085/order?id=" + order.id + "&status=" + order.status, {
method: "PATCH",
}
);
if (!response.ok) {
throw new Error("Order patch failed");
}
return response.json();
const response = await fetch(
"http://localhost:8085/order?id=" + order.id + "&status=" + order.status,
{
method: "PATCH",
},
);
if (!response.ok) {
throw new Error("Order patch failed");
}
return response.json();
};
export const fetchOrderStatus = async (loginData: User) => {
const response = await fetch("http://localhost:8085/statistics/orderstatus?email=" + loginData.email + "&session=" + loginData.session);
if (!response.ok) {
throw new Error("fetching order status failed");
}
return response.json();
const response = await fetch(
"http://localhost:8085/statistics/orderstatus?email=" +
loginData.email +
"&session=" +
loginData.session,
);
if (!response.ok) {
throw new Error("fetching order status failed");
}
return response.json();
};
export const fetchStockPercent = async (loginData: User) => {
const response = await fetch("http://localhost:8085/statistics/stockpercent?email=" + loginData.email + "&session=" + loginData.session);
if (!response.ok) {
throw new Error("fetching stock% failed");
}
return response.json();
const response = await fetch(
"http://localhost:8085/statistics/stockpercent?email=" +
loginData.email +
"&session=" +
loginData.session,
);
if (!response.ok) {
throw new Error("fetching stock% failed");
}
return response.json();
};
export const fetchOrdersAdmin = async (loginData: User) => {
const response = await fetch("http://localhost:8085/order/all/all?email=" + loginData.email + "&session=" + loginData.session);
if (!response.ok) {
throw new Error("fetching admin orders failed");
}
return response.json();
const response = await fetch(
"http://localhost:8085/order/all/all?email=" +
loginData.email +
"&session=" +
loginData.session,
);
if (!response.ok) {
throw new Error("fetching admin orders failed");
}
return response.json();
};
export const updateCustomer = async (customer: CustomerType) => {
const response = await fetch('http://localhost:8085/customer?id=' + customer.id, {
method: 'PUT',
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(customer),
});
if (!response.ok) {
throw new Error('Fehler beim Ändern des Customers');
}
return await response.json();
}
const response = await fetch(
"http://localhost:8085/customer?id=" + customer.id,
{
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(customer),
},
);
if (!response.ok) {
throw new Error("Fehler beim Ändern des Customers");
}
return await response.json();
};
export const fetchFarmingStationItemList = async (): Promise<ItemWithFSImage[]> => {
const response = await fetch('http://localhost:8085/farm/articles');
if (!response.ok)
throw new Error('Failed to fetch items');
return response.json();
}
export const fetchFarmingStationItemList = async (): Promise<
ItemWithFSImage[]
> => {
const response = await fetch("http://localhost:8085/farm/articles");
if (!response.ok) throw new Error("Failed to fetch items");
return response.json();
};
export const submitItem = async (item: Item) => {
const response = await fetch("http://localhost:8085/article", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(item),
});
if (!response.ok) {
throw new Error("Login failed");
}
return response.json();
const response = await fetch("http://localhost:8085/article", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(item),
});
if (!response.ok) {
throw new Error("Login failed");
}
return response.json();
};
export const deleteItemQuery = async (uuid: string) => {
const response = await fetch("http://localhost:8085/article?uuid=" + uuid, {
method: "DELETE"
});
if (!response.ok) {
throw new Error("Login failed");
}
return response.json();
const response = await fetch("http://localhost:8085/article?uuid=" + uuid, {
method: "DELETE",
});
if (!response.ok) {
throw new Error("Login failed");
}
return response.json();
};
export const updateAccountAdmin = async (account: AccountType, user: User) => {
const response = await fetch('http://localhost:8085/account/admin?email=' + user.email + "&uuid=" + user.session + "&id=" + account.id + "&admin=" + account.admin, {
method: 'POST',
});
if (!response.ok) {
throw new Error('Fehler beim Ändern des Customers');
}
return await response.json();
}
const response = await fetch(
"http://localhost:8085/account/admin?email=" +
user.email +
"&uuid=" +
user.session +
"&id=" +
account.id +
"&admin=" +
account.admin,
{
method: "POST",
},
);
if (!response.ok) {
throw new Error("Fehler beim Ändern des Customers");
}
return await response.json();
};
export const updateItemAdmin = async (item: Item) => {
const response = await fetch('http://localhost:8085/article?uuid=' + item.uuid, {
method: 'PUT',
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(item),
});
if (!response.ok) {
throw new Error('Fehler beim Ändern des Items');
}
return await response.json();
}
const response = await fetch(
"http://localhost:8085/article?uuid=" + item.uuid,
{
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(item),
},
);
if (!response.ok) {
throw new Error("Fehler beim Ändern des Items");
}
return await response.json();
};

84
01-frontend/src/index.css
View File

@@ -1,73 +1,73 @@
:root {
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
color: #535bf2;
}
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
font-size: 3.2em;
line-height: 1.1;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
outline: 4px auto -webkit-focus-ring-color;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
button {
background-color: #f9f9f9;
}
}

18
01-frontend/src/main.tsx
View File

@@ -1,15 +1,15 @@
import './components/i18n/i18n';
import {StrictMode} from 'react';
import {createRoot} from 'react-dom/client';
import './index.css';
import App from './App.tsx';
import "./components/i18n/i18n";
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
import App from "./App.tsx";
const rootElement = document.getElementById('root');
const rootElement = document.getElementById("root");
if (!rootElement) throw new Error("Root element not found");
const root = createRoot(rootElement);
root.render(
<StrictMode>
<App/>
</StrictMode>
<StrictMode>
<App />
</StrictMode>,
);

447
01-frontend/src/pages/Account.tsx
View File

@@ -1,239 +1,252 @@
import {
Box,
Button,
Dialog,
DialogActions,
DialogContent,
DialogTitle,
Divider,
Paper,
Stack,
TextField,
Typography,
Box,
Button,
Dialog,
DialogActions,
DialogContent,
DialogTitle,
Divider,
Paper,
Stack,
TextField,
Typography,
} from "@mui/material";
import {useQuery} from "@tanstack/react-query";
import {useEffect, useState} from "react";
import {useTranslation} from "react-i18next";
import {useNavigate} from "react-router-dom";
import {CustomerType, User} from "../components/Account";
import {useAccount} from "../helper/AccountProvider";
import {deleteAccount, editAccount, fetchCustomer} from "../helper/query/Queries";
import { useQuery } from "@tanstack/react-query";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import { CustomerType, User } from "../components/Account";
import { useAccount } from "../helper/AccountProvider";
import {
deleteAccount,
editAccount,
fetchCustomer,
} from "../helper/query/Queries";
import "./pages.css";
export default function Account() {
const {t} = useTranslation();
const navigate = useNavigate();
const {user: userData, logout} = useAccount();
const { t } = useTranslation();
const navigate = useNavigate();
const { user: userData, logout } = useAccount();
const [user, setUser] = useState<CustomerType>({
name: "",
surname: "",
address: "",
country: "",
zip: "",
id: userData?.customerId || 0,
});
const [user, setUser] = useState<CustomerType>({
name: "",
surname: "",
address: "",
country: "",
zip: "",
id: userData?.customerId || 0,
});
const [userDataState, setUserDataState] = useState<User>(userData || {
password: "",
email: "",
customerId: 0,
session: "",
isAdmin: false,
});
const [userDataState, setUserDataState] = useState<User>(
userData || {
password: "",
email: "",
customerId: 0,
session: "",
isAdmin: false,
},
);
useEffect(() => {
if (userData?.customerId) {
setUser((prev) => ({
...prev,
id: userData.customerId,
}));
}
}, [userData]);
useEffect(() => {
if (userData?.customerId) {
setUser((prev) => ({
...prev,
id: userData.customerId,
}));
}
}, [userData]);
const [edit, setEdit] = useState(false);
const [form, setForm] = useState(user);
const [edit, setEdit] = useState(false);
const [form, setForm] = useState(user);
// Neu: Passwort-Dialog-Status und Passwort-Input
const [passwordDialogOpen, setPasswordDialogOpen] = useState(false);
const [passwordInput, setPasswordInput] = useState("");
// Neu: Passwort-Dialog-Status und Passwort-Input
const [passwordDialogOpen, setPasswordDialogOpen] = useState(false);
const [passwordInput, setPasswordInput] = useState("");
const {data} = useQuery<CustomerType>({
queryKey: ["fetchCustomer", userData?.customerId],
queryFn: () => fetchCustomer(userData?.customerId || 0),
retry: 1,
retryDelay: 1000,
});
const { data } = useQuery<CustomerType>({
queryKey: ["fetchCustomer", userData?.customerId],
queryFn: () => fetchCustomer(userData?.customerId || 0),
retry: 1,
retryDelay: 1000,
});
const {refetch: deleteRefetch} = useQuery({
queryKey: ["deleteAccount", userDataState],
queryFn: () => deleteAccount(userDataState!),
enabled: false,
});
const { refetch: deleteRefetch } = useQuery({
queryKey: ["deleteAccount", userDataState],
queryFn: () => deleteAccount(userDataState!),
enabled: false,
});
const {refetch: editRefetch} = useQuery({
queryKey: ["editAccount", form],
queryFn: () => editAccount(form),
enabled: false,
});
const { refetch: editRefetch } = useQuery({
queryKey: ["editAccount", form],
queryFn: () => editAccount(form),
enabled: false,
});
useEffect(() => {
if (data) {
setUser(data);
setForm(data);
}
}, [data]);
useEffect(() => {
if (data) {
setUser(data);
setForm(data);
}
}, [data]);
const handleEdit = () => setEdit(true);
const handleCancel = () => {
setForm(user);
setEdit(false);
};
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setForm({...form, [e.target.name]: e.target.value});
};
const handleSave = async () => {
setUser(form);
setEdit(false);
await editRefetch();
};
const handleEdit = () => setEdit(true);
const handleCancel = () => {
setForm(user);
setEdit(false);
};
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setForm({ ...form, [e.target.name]: e.target.value });
};
const handleSave = async () => {
setUser(form);
setEdit(false);
await editRefetch();
};
// Neu: Passwort-Dialog öffnen
const handleDeleteClick = () => {
setPasswordInput("");
setPasswordDialogOpen(true);
};
// Neu: Passwort-Dialog öffnen
const handleDeleteClick = () => {
setPasswordInput("");
setPasswordDialogOpen(true);
};
// Neu: Passwort-Dialog schließen
const handlePasswordDialogClose = () => {
setPasswordDialogOpen(false);
};
// Neu: Passwort-Dialog schließen
const handlePasswordDialogClose = () => {
setPasswordDialogOpen(false);
};
// Neu: Passwort-Eingabe bestätigen
const handlePasswordConfirm = async () => {
if (!passwordInput) {
alert(t("pleaseEnterPassword"));
return;
}
// Passwort in Form aktualisieren (hier z.B. als field "password", anpassen falls anders)
setUserDataState({...userDataState, password: passwordInput});
// Neu: Passwort-Eingabe bestätigen
const handlePasswordConfirm = async () => {
if (!passwordInput) {
alert(t("pleaseEnterPassword"));
return;
}
// Passwort in Form aktualisieren (hier z.B. als field "password", anpassen falls anders)
setUserDataState({ ...userDataState, password: passwordInput });
// Erst User-Daten mit Passwort aktualisieren
try {
await editRefetch(); // Achtung: editRefetch verwendet immer noch alten form, daher call direkt mit updatedForm:
// Danach Account löschen
await deleteRefetch();
logout();
navigate("/");
} catch (error) {
console.error("Fehler beim Löschen des Accounts:", error);
alert(t("deleteAccountFailed"));
} finally {
setPasswordDialogOpen(false);
}
};
// Erst User-Daten mit Passwort aktualisieren
try {
await editRefetch(); // Achtung: editRefetch verwendet immer noch alten form, daher call direkt mit updatedForm:
// Danach Account löschen
await deleteRefetch();
logout();
navigate("/");
} catch (error) {
console.error("Fehler beim Löschen des Accounts:", error);
alert(t("deleteAccountFailed"));
} finally {
setPasswordDialogOpen(false);
}
};
return (
<Box
className="page-background page-background-center"
sx={{minHeight: "100vh", justifyContent: "flex-start", pt: 4}}
>
<Paper elevation={3} sx={{p: 4, maxWidth: 500, width: "100%", mx: "auto"}}>
<Typography variant="h4" gutterBottom>
{t("myAccount")}
</Typography>
<Divider sx={{mb: 3}}/>
<Stack spacing={2}>
<TextField
label={t("name")}
name="name"
value={edit ? form.name : user.name}
onChange={handleChange}
disabled={!edit}
fullWidth
/>
<TextField
label={t("surname")}
name="surname"
value={edit ? form.surname : user.surname}
onChange={handleChange}
disabled={!edit}
fullWidth
/>
<TextField
label={t("address")}
name="address"
value={edit ? form.address : user.address}
onChange={handleChange}
disabled={!edit}
fullWidth
/>
<TextField
label={t("country")}
name="country"
value={edit ? form.country : user.country}
onChange={handleChange}
disabled={!edit}
fullWidth
/>
<TextField
label={t("zip")}
name="zip"
value={edit ? form.zip : user.zip}
onChange={handleChange}
disabled={!edit}
fullWidth
/>
</Stack>
<Box sx={{display: "flex", gap: 2, mt: 4}}>
{edit ? (
<>
<Button variant="contained" color="primary" onClick={handleSave}>
{t("save")}
</Button>
<Button variant="outlined" color="secondary" onClick={handleCancel}>
{t("cancel")}
</Button>
</>
) : (
<Button variant="contained" color="primary" onClick={handleEdit}>
{t("edit")}
</Button>
)}
<Button
variant="outlined"
color="error"
onClick={handleDeleteClick} // Neu: Passwort-Dialog öffnen
sx={{marginLeft: "auto"}}
>
{t("deleteAccount")}
</Button>
</Box>
</Paper>
{/* Passwort-Dialog */}
<Dialog open={passwordDialogOpen} onClose={handlePasswordDialogClose}>
<DialogTitle>{t("confirmDeleteAccount")}</DialogTitle>
<DialogContent>
<Typography>{t("enterPasswordToConfirmDeletion")}</Typography>
<TextField
autoFocus
margin="dense"
label={t("password")}
type="password"
fullWidth
variant="standard"
value={passwordInput}
onChange={(e) => setPasswordInput(e.target.value)}
/>
</DialogContent>
<DialogActions>
<Button onClick={handlePasswordDialogClose}>{t("cancel")}</Button>
<Button color="error" onClick={handlePasswordConfirm}>
{t("delete")}
</Button>
</DialogActions>
</Dialog>
return (
<Box
className="page-background page-background-center"
sx={{ minHeight: "100vh", justifyContent: "flex-start", pt: 4 }}
>
<Paper
elevation={3}
sx={{ p: 4, maxWidth: 500, width: "100%", mx: "auto" }}
>
<Typography variant="h4" gutterBottom>
{t("myAccount")}
</Typography>
<Divider sx={{ mb: 3 }} />
<Stack spacing={2}>
<TextField
label={t("name")}
name="name"
value={edit ? form.name : user.name}
onChange={handleChange}
disabled={!edit}
fullWidth
/>
<TextField
label={t("surname")}
name="surname"
value={edit ? form.surname : user.surname}
onChange={handleChange}
disabled={!edit}
fullWidth
/>
<TextField
label={t("address")}
name="address"
value={edit ? form.address : user.address}
onChange={handleChange}
disabled={!edit}
fullWidth
/>
<TextField
label={t("country")}
name="country"
value={edit ? form.country : user.country}
onChange={handleChange}
disabled={!edit}
fullWidth
/>
<TextField
label={t("zip")}
name="zip"
value={edit ? form.zip : user.zip}
onChange={handleChange}
disabled={!edit}
fullWidth
/>
</Stack>
<Box sx={{ display: "flex", gap: 2, mt: 4 }}>
{edit ? (
<>
<Button variant="contained" color="primary" onClick={handleSave}>
{t("save")}
</Button>
<Button
variant="outlined"
color="secondary"
onClick={handleCancel}
>
{t("cancel")}
</Button>
</>
) : (
<Button variant="contained" color="primary" onClick={handleEdit}>
{t("edit")}
</Button>
)}
<Button
variant="outlined"
color="error"
onClick={handleDeleteClick} // Neu: Passwort-Dialog öffnen
sx={{ marginLeft: "auto" }}
>
{t("deleteAccount")}
</Button>
</Box>
);
</Paper>
{/* Passwort-Dialog */}
<Dialog open={passwordDialogOpen} onClose={handlePasswordDialogClose}>
<DialogTitle>{t("confirmDeleteAccount")}</DialogTitle>
<DialogContent>
<Typography>{t("enterPasswordToConfirmDeletion")}</Typography>
<TextField
autoFocus
margin="dense"
label={t("password")}
type="password"
fullWidth
variant="standard"
value={passwordInput}
onChange={(e) => setPasswordInput(e.target.value)}
/>
</DialogContent>
<DialogActions>
<Button onClick={handlePasswordDialogClose}>{t("cancel")}</Button>
<Button color="error" onClick={handlePasswordConfirm}>
{t("delete")}
</Button>
</DialogActions>
</Dialog>
</Box>
);
}

155
01-frontend/src/pages/AdminPanel.tsx
View File

@@ -1,81 +1,98 @@
import {AccountCircle, Category, QueryStats, ReceiptLong,} from "@mui/icons-material";
import {Box, List, ListItem, ListItemButton, ListItemIcon, ListItemText, useTheme,} from "@mui/material";
import {useState} from "react";
import {useTranslation} from "react-i18next";
import {
AccountCircle,
Category,
QueryStats,
ReceiptLong,
} from "@mui/icons-material";
import {
Box,
List,
ListItem,
ListItemButton,
ListItemIcon,
ListItemText,
useTheme,
} from "@mui/material";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import AccountsInfo from "../helper/adminpanel/AccountsInfo";
import ItemInfo from "../helper/adminpanel/ItemsInfo";
import OrdersInfo from "../helper/adminpanel/OrdersInfo";
import StatisticsInfo from "../helper/adminpanel/StatisticsInfo";
export default function AdminPanel() {
const {t} = useTranslation();
const theme = useTheme();
const [infoStatus, setInfoStatus] = useState<string>("statistics");
const { t } = useTranslation();
const theme = useTheme();
const [infoStatus, setInfoStatus] = useState<string>("statistics");
const handleInfoStatus = (path: string) => {
setInfoStatus(path);
};
const handleInfoStatus = (path: string) => {
setInfoStatus(path);
};
const renderContent = () => {
switch (infoStatus) {
case "statistics":
return <StatisticsInfo/>;
case "orders":
return <OrdersInfo/>;
case "accounts":
return <AccountsInfo/>;
case "items":
return <ItemInfo/>;
default:
return <StatisticsInfo/>;
}
};
const renderContent = () => {
switch (infoStatus) {
case "statistics":
return <StatisticsInfo />;
case "orders":
return <OrdersInfo />;
case "accounts":
return <AccountsInfo />;
case "items":
return <ItemInfo />;
default:
return <StatisticsInfo />;
}
};
const menuItems = [
{key: "statistics", icon: <QueryStats/>, label: t("statistics")},
{key: "orders", icon: <ReceiptLong/>, label: t("orders")},
{key: "accounts", icon: <AccountCircle/>, label: t("accounts")},
{key: "items", icon: <Category/>, label: t("items")},
];
const menuItems = [
{ key: "statistics", icon: <QueryStats />, label: t("statistics") },
{ key: "orders", icon: <ReceiptLong />, label: t("orders") },
{ key: "accounts", icon: <AccountCircle />, label: t("accounts") },
{ key: "items", icon: <Category />, label: t("items") },
];
return (
<Box className="page-container" sx={{color: theme.palette.text.primary}}>
<div
className="home-page-background"
style={{
color: theme.palette.text.primary,
backgroundColor: theme.palette.background.paper,
}}>
{/* Sidebar */}
<Box className="sidebar">
<nav aria-label={t("mainAdminMenu")}>
<List>
{menuItems.map((item) => (
<ListItem key={item.key} disablePadding>
<ListItemButton
selected={infoStatus === item.key}
onClick={() => handleInfoStatus(item.key)}
sx={{
"&.Mui-selected": {
bgcolor: theme.palette.action.selected,
color: theme.palette.primary.main,
},
"&:hover": {
bgcolor: theme.palette.action.hover,
},
}}>
<ListItemIcon sx={{color: "inherit"}}>{item.icon}</ListItemIcon>
<ListItemText primary={item.label}/>
</ListItemButton>
</ListItem>
))}
</List>
</nav>
</Box>
{/* Content */}
<Box className="page-background">{renderContent()}</Box>
</div>
return (
<Box className="page-container" sx={{ color: theme.palette.text.primary }}>
<div
className="home-page-background"
style={{
color: theme.palette.text.primary,
backgroundColor: theme.palette.background.paper,
}}
>
{/* Sidebar */}
<Box className="sidebar">
<nav aria-label={t("mainAdminMenu")}>
<List>
{menuItems.map((item) => (
<ListItem key={item.key} disablePadding>
<ListItemButton
selected={infoStatus === item.key}
onClick={() => handleInfoStatus(item.key)}
sx={{
"&.Mui-selected": {
bgcolor: theme.palette.action.selected,
color: theme.palette.primary.main,
},
"&:hover": {
bgcolor: theme.palette.action.hover,
},
}}
>
<ListItemIcon sx={{ color: "inherit" }}>
{item.icon}
</ListItemIcon>
<ListItemText primary={item.label} />
</ListItemButton>
</ListItem>
))}
</List>
</nav>
</Box>
);
{/* Content */}
<Box className="page-background">{renderContent()}</Box>
</div>
</Box>
);
}

181
01-frontend/src/pages/Contact.tsx
View File

@@ -1,91 +1,130 @@
import {Box, Divider, Typography} from "@mui/material";
import { Box, Divider, Typography } from "@mui/material";
import "./pages.css";
export default function Impressum() {
return (
<Box className="impressum-container">
<Typography variant="h4" sx={{color: 'text.primary', mb: 2}}>
Impressum
</Typography>
return (
<Box className="impressum-container">
<Typography variant="h4" sx={{ color: "text.primary", mb: 2 }}>
Impressum
</Typography>
<Typography variant="body1" sx={{color: 'text.primary', mb: 4}}>
Hochschule für Technik und Wirtschaft<br/>
des Saarlandes<br/>
Goebenstraße 40<br/>
66117 Saarbrücken<br/><br/>
Telefon: (0681) 58 67 - 0<br/>
Telefax: (0681) 58 67 - 122<br/>
E-Mail: info@htwsaar.de<br/><br/>
Aufsichtsbehörde:<br/>
Ministerium der Finanzen und für Wissenschaft des Saarlandes
</Typography>
<Typography variant="body1" sx={{ color: "text.primary", mb: 4 }}>
Hochschule für Technik und Wirtschaft
<br />
des Saarlandes
<br />
Goebenstraße 40
<br />
66117 Saarbrücken
<br />
<br />
Telefon: (0681) 58 67 - 0<br />
Telefax: (0681) 58 67 - 122
<br />
E-Mail: info@htwsaar.de
<br />
<br />
Aufsichtsbehörde:
<br />
Ministerium der Finanzen und für Wissenschaft des Saarlandes
</Typography>
<Divider className="contact-divider"/>
<Divider className="contact-divider" />
<Typography variant="h5" sx={{color: 'text.primary', mt: 4, mb: 2}}>
Datenschutzerklärung
</Typography>
<Typography variant="h5" sx={{ color: "text.primary", mt: 4, mb: 2 }}>
Datenschutzerklärung
</Typography>
<Typography variant="body1" sx={{color: 'text.primary', mb: 2}}>
Personenbezogene Daten (nachfolgend zumeist nur „Daten“ genannt) ...
</Typography>
<Typography variant="body1" sx={{ color: "text.primary", mb: 2 }}>
Personenbezogene Daten (nachfolgend zumeist nur „Daten“ genannt) ...
</Typography>
<Typography variant="body1" sx={{color: 'text.primary', mb: 2}}>
Gemäß Art. 4 Ziffer 1. der Verordnung (EU) 2016/679, also der Datenschutz-Grundverordnung ...
</Typography>
<Typography variant="body1" sx={{ color: "text.primary", mb: 2 }}>
Gemäß Art. 4 Ziffer 1. der Verordnung (EU) 2016/679, also der
Datenschutz-Grundverordnung ...
</Typography>
<Typography variant="body1" sx={{color: 'text.primary', mb: 2}}>
Unsere Datenschutzerklärung ist wie folgt gegliedert:<br/>
I. Informationen über uns als Verantwortliche<br/>
II. Rechte der Nutzer und Betroffenen<br/>
III. Informationen zur Datenverarbeitung
</Typography>
<Typography variant="body1" sx={{ color: "text.primary", mb: 2 }}>
Unsere Datenschutzerklärung ist wie folgt gegliedert:
<br />
I. Informationen über uns als Verantwortliche
<br />
II. Rechte der Nutzer und Betroffenen
<br />
III. Informationen zur Datenverarbeitung
</Typography>
<Typography variant="h6" sx={{color: 'text.primary', mt: 4, mb: 1}}>
I. Informationen über uns als Verantwortliche
</Typography>
<Typography variant="h6" sx={{ color: "text.primary", mt: 4, mb: 1 }}>
I. Informationen über uns als Verantwortliche
</Typography>
<Typography variant="body1" sx={{color: 'text.primary', mb: 2}}>
Verantwortlicher Anbieter dieses Internetauftritts ...
</Typography>
<Typography variant="body1" sx={{ color: "text.primary", mb: 2 }}>
Verantwortlicher Anbieter dieses Internetauftritts ...
</Typography>
<Typography variant="h6" sx={{color: 'text.primary', mt: 4, mb: 1}}>
II. Rechte der Nutzer und Betroffenen
</Typography>
<Typography variant="h6" sx={{ color: "text.primary", mt: 4, mb: 1 }}>
II. Rechte der Nutzer und Betroffenen
</Typography>
<Typography variant="body1" sx={{color: 'text.primary', mb: 2}}>
Mit Blick auf die nachfolgend noch näher beschriebene Datenverarbeitung haben die Nutzer und Betroffenen
...
</Typography>
<Typography variant="body1" sx={{ color: "text.primary", mb: 2 }}>
Mit Blick auf die nachfolgend noch näher beschriebene Datenverarbeitung
haben die Nutzer und Betroffenen ...
</Typography>
<Box component="ul" sx={{listStyle: 'none', p: 0, m: 0}}>
<li><Typography variant="body2" sx={{color: 'text.primary', mb: 0.5}}> • Auskunft über die verarbeiteten
Daten (Art. 15 DSGVO)</Typography></li>
<li><Typography variant="body2" sx={{color: 'text.primary', mb: 0.5}}> • Berichtigung unrichtiger Daten
(Art. 16 DSGVO)</Typography></li>
<li><Typography variant="body2" sx={{color: 'text.primary', mb: 0.5}}> • Löschung der Daten (Art. 17
DSGVO)</Typography></li>
<li><Typography variant="body2" sx={{color: 'text.primary', mb: 0.5}}> • Einschränkung der Verarbeitung
(Art. 18 DSGVO)</Typography></li>
<li><Typography variant="body2" sx={{color: 'text.primary', mb: 0.5}}> • Datenübertragbarkeit (Art. 20
DSGVO)</Typography></li>
</Box>
<Box component="ul" sx={{ listStyle: "none", p: 0, m: 0 }}>
<li>
<Typography variant="body2" sx={{ color: "text.primary", mb: 0.5 }}>
{" "}
• Auskunft über die verarbeiteten Daten (Art. 15 DSGVO)
</Typography>
</li>
<li>
<Typography variant="body2" sx={{ color: "text.primary", mb: 0.5 }}>
{" "}
• Berichtigung unrichtiger Daten (Art. 16 DSGVO)
</Typography>
</li>
<li>
<Typography variant="body2" sx={{ color: "text.primary", mb: 0.5 }}>
{" "}
• Löschung der Daten (Art. 17 DSGVO)
</Typography>
</li>
<li>
<Typography variant="body2" sx={{ color: "text.primary", mb: 0.5 }}>
{" "}
• Einschränkung der Verarbeitung (Art. 18 DSGVO)
</Typography>
</li>
<li>
<Typography variant="body2" sx={{ color: "text.primary", mb: 0.5 }}>
{" "}
• Datenübertragbarkeit (Art. 20 DSGVO)
</Typography>
</li>
</Box>
<Typography variant="h6" sx={{color: 'text.primary', mt: 4, mb: 1}}>
III. Informationen zur Datenverarbeitung
</Typography>
<Typography variant="h6" sx={{ color: "text.primary", mt: 4, mb: 1 }}>
III. Informationen zur Datenverarbeitung
</Typography>
<Typography variant="body1" sx={{color: 'text.primary', mb: 2}}>
Ihre bei Nutzung unseres Internetauftritts verarbeiteten Daten ...
</Typography>
<Typography variant="body1" sx={{ color: "text.primary", mb: 2 }}>
Ihre bei Nutzung unseres Internetauftritts verarbeiteten Daten ...
</Typography>
{/* Du kannst einfach alle weiteren Absätze so fortsetzen – copy & paste,
{/* Du kannst einfach alle weiteren Absätze so fortsetzen – copy & paste,
jeweils in: <Typography variant="body1" sx={{ color: 'text.primary' }}>…</Typography> */}
<Typography variant="body2" sx={{color: 'text.primary', mt: 4}}>
Mehr Infos unter: <a href="https://www.cloudflare.com/privacypolicy/" target="_blank"
rel="noopener noreferrer">CloudFlare Datenschutzerklärung</a>
</Typography>
</Box>
);
<Typography variant="body2" sx={{ color: "text.primary", mt: 4 }}>
Mehr Infos unter:{" "}
<a
href="https://www.cloudflare.com/privacypolicy/"
target="_blank"
rel="noopener noreferrer"
>
CloudFlare Datenschutzerklärung
</a>
</Typography>
</Box>
);
}

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

@@ -1,106 +1,142 @@
import {Box, Button, Typography, useTheme} from "@mui/material";
import {useTranslation} from "react-i18next";
import {useState} from "react";
import {useQuery} from "@tanstack/react-query";
import {useBasket} from "../helper/BasketProvider";
import { Box, Button, Typography, useTheme } from "@mui/material";
import { useTranslation } from "react-i18next";
import { useState } from "react";
import { useQuery } from "@tanstack/react-query";
import { useBasket } from "../helper/BasketProvider";
import ItemCard from "../helper/homepage/ItemCard";
import AddShoppingCartIcon from '@mui/icons-material/AddShoppingCart';
import AddShoppingCartIcon from "@mui/icons-material/AddShoppingCart";
import farmingStation from '../assets/fscomponents/fs_components_0.png';
import {ItemWithFSImage} from "../components/Item";
import {fetchFarmingStationItemList} from "../helper/query/Queries";
import farmingStation from "../assets/fscomponents/fs_components_0.png";
import { ItemWithFSImage } from "../components/Item";
import { fetchFarmingStationItemList } from "../helper/query/Queries";
"../components/Item";
("../components/Item");
export default function FSComponents() {
const {t} = useTranslation();
const theme = useTheme();
const {addToBasket} = useBasket();
const [hoverIndex, setHoverIndex] = useState<number | null>(null);
const { t } = useTranslation();
const theme = useTheme();
const { addToBasket } = useBasket();
const [hoverIndex, setHoverIndex] = useState<number | null>(null);
// Sehr sehr dummer Weg das zu machen, aber wird später noch refactored
const wantedIds = ["60", "67", "68", "69", "70", "71", "72", "73", "74", "75"];
// Sehr sehr dummer Weg das zu machen, aber wird später noch refactored
const wantedIds = [
"60",
"67",
"68",
"69",
"70",
"71",
"72",
"73",
"74",
"75",
];
// Daten mit react-query laden
const {data = [], isLoading, error} = useQuery<ItemWithFSImage[]>({
queryKey: ['fetchFarmingStationItemList'],
queryFn: fetchFarmingStationItemList,
retry: 3,
retryDelay: 1000,
// Daten mit react-query laden
const {
data = [],
isLoading,
error,
} = useQuery<ItemWithFSImage[]>({
queryKey: ["fetchFarmingStationItemList"],
queryFn: fetchFarmingStationItemList,
retry: 3,
retryDelay: 1000,
});
// Button-Funktion: alle gefilterten Items in den Warenkorb packen
const handleAddAllToCart = () => {
data.forEach((item) => {
addToBasket(item, 1);
});
};
// Button-Funktion: alle gefilterten Items in den Warenkorb packen
const handleAddAllToCart = () => {
data.forEach(item => {
addToBasket(item, 1);
});
};
if (isLoading) return <Typography>{t("loading")}</Typography>;
if (error)
return <Typography color="error">{t("errorLoadingItems")}</Typography>;
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 */}
<Box
sx={{
width: "auto",
height: "90vh",
position: "sticky",
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
padding: 2,
overflow: "hidden",
}}
>
<Box
component="img"
src={
hoverIndex !== null ? data[hoverIndex].farmImage : 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 />}
onClick={handleAddAllToCart}
>
{t("addAllToCart")}
</Button>
</Box>
return (
<Box sx={{width: '100%', display: 'flex', maxWidth: 1600, mx: 'auto', pt: 2, height: '100vh'}}>
{/* Bild links */}
<Box sx={{
width: 'auto',
height: '90vh',
position: 'sticky',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
padding: 2,
overflow: 'hidden',
}}>
<Box
component="img"
src={hoverIndex !== null ? data[hoverIndex].farmImage : 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/>}
onClick={handleAddAllToCart}
>
{t('addAllToCart')}
</Button>
</Box>
{/* Items rechts */}
<Box sx={{
width: '60%',
height: '90vh',
overflowY: 'auto',
padding: 2,
}}>
<Box mb={2}>
<Typography variant="h4" align="center" gutterBottom sx={{color: 'text.primary'}}>
{t('componentsFarmingStation')}
</Typography>
</Box>
<Box className="cardgrid">
{data.map((item, index) => (
<div
key={item.id}
onMouseEnter={() => setHoverIndex(index)}
onMouseLeave={() => setHoverIndex(null)}
>
<ItemCard item={item}/>
</div>
))}
</Box>
</Box>
{/* Items rechts */}
<Box
sx={{
width: "60%",
height: "90vh",
overflowY: "auto",
padding: 2,
}}
>
<Box mb={2}>
<Typography
variant="h4"
align="center"
gutterBottom
sx={{ color: "text.primary" }}
>
{t("componentsFarmingStation")}
</Typography>
</Box>
);
<Box className="cardgrid">
{data.map((item, index) => (
<div
key={item.id}
onMouseEnter={() => setHoverIndex(index)}
onMouseLeave={() => setHoverIndex(null)}
>
<ItemCard item={item} />
</div>
))}
</Box>
</Box>
</Box>
);
}

355
01-frontend/src/pages/Home.tsx
View File

@@ -1,201 +1,206 @@
import {Alert, Box, useTheme} from "@mui/material";
import {useQuery} from "@tanstack/react-query";
import {useEffect, useMemo, useRef, useState} from "react";
import {useTranslation} from "react-i18next";
import {useLocation, useNavigate} from "react-router-dom";
import { Alert, Box, useTheme } from "@mui/material";
import { useQuery } from "@tanstack/react-query";
import { useEffect, useMemo, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import { useLocation, useNavigate } from "react-router-dom";
import ItemWithImage from "../components/Item";
import FilterItem from "../helper/homepage/FilterItem";
import ItemCard from "../helper/homepage/ItemCard";
import PriceSlider from "../helper/homepage/PriceSlider";
import {fetchItemListWithImage} from '../helper/query/Queries';
import { fetchItemListWithImage } from "../helper/query/Queries";
import "./pages.css"; // Import der CSS-Datei
export default function Home() {
const { t } = useTranslation();
const navigate = useNavigate();
const location = useLocation();
const theme = useTheme();
const [searchQuery, setSearchQuery] = useState<string | null>(null);
const {t} = useTranslation();
const navigate = useNavigate();
const location = useLocation();
const theme = useTheme();
const [searchQuery, setSearchQuery] = useState<string | null>(null);
const categoriesFilter = useMemo(
() => [
{ value: "", label: t("allCategories") },
{ value: "Seeds", label: t("seeds") },
{ value: "GardenSupplies", label: t("gardenSupplies") },
{ value: "TechnicalComponents", label: t("technicalComponents") },
{ value: "Other", label: t("other") },
],
[t],
);
const categoriesFilter = useMemo(() => [
{value: "", label: t("allCategories")},
{value: "Seeds", label: t("seeds")},
{value: "GardenSupplies", label: t("gardenSupplies")},
{value: "TechnicalComponents", label: t("technicalComponents")},
{value: "Other", label: t("other")}
], [t]);
const ratingFilter = [
{ value: "", label: t("allRatings") },
...[5, 4, 3, 2, 1].map((value) => ({
value: value.toString(),
label: value.toString(),
})),
];
const ratingFilter = [
{value: "", label: t('allRatings')},
...[5, 4, 3, 2, 1].map(value => ({
value: value.toString(),
label: value.toString()
}))
];
const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
const [selectedRating, setSelectedRating] = useState<string | null>(null);
const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
const [selectedRating, setSelectedRating] = useState<string | null>(null);
const { data = [], isLoading } = useQuery<ItemWithImage[]>({
queryKey: ["fetchItemListWithImage"],
queryFn: fetchItemListWithImage,
retry: 3, // Versucht es 3-mal erneut
retryDelay: 1000, // Wartezeit zwischen den Versuchen (in ms)
});
const {data = [], isLoading} = useQuery<ItemWithImage[]>({
queryKey: ['fetchItemListWithImage'],
queryFn: fetchItemListWithImage,
retry: 3, // Versucht es 3-mal erneut
retryDelay: 1000, // Wartezeit zwischen den Versuchen (in ms)
});
const items: ItemWithImage[] = useMemo(() => data || [], [data]);
const items: ItemWithImage[] = useMemo(() => data || [], [data]);
const discountedPrices = items.map(
(item) => item.price100 * (1 - item.discount100 / 100),
);
const minPrice =
discountedPrices.length > 0 ? Math.min(...discountedPrices) : 0;
const maxPrice =
discountedPrices.length > 0 ? Math.max(...discountedPrices) : 1000;
const [priceRange, setPriceRange] = useState<[number, number]>([
minPrice,
maxPrice,
]);
const discountedPrices = items.map(
(item) => item.price100 * (1 - item.discount100 / 100)
);
const minPrice = discountedPrices.length > 0 ? Math.min(...discountedPrices) : 0;
const maxPrice = discountedPrices.length > 0 ? Math.max(...discountedPrices) : 1000;
const [priceRange, setPriceRange] = useState<[number, number]>([
minPrice,
maxPrice,
]);
// Filter aus URL übernehmen
useEffect(() => {
const params = new URLSearchParams(location.search);
const category = params.get("category");
if (category && categoriesFilter.some((f) => f.value === category)) {
setSelectedCategory(category);
} else {
setSelectedCategory(null);
}
}, [location.search, categoriesFilter]);
// Filter aus URL übernehmen
useEffect(() => {
const params = new URLSearchParams(location.search);
const category = params.get("category");
if (category && categoriesFilter.some((f) => f.value === category)) {
setSelectedCategory(category);
} else {
setSelectedCategory(null);
}
}, [location.search, categoriesFilter]);
// Filterfunktion bleibt gleich
const filteredItems: ItemWithImage[] = useMemo(() => {
return items
.filter((item) => {
const discountedPrice = item.price100 * (1 - item.discount100 / 100);
return (
discountedPrice >= priceRange[0] && discountedPrice <= priceRange[1]
);
})
.filter((item) => {
if (!selectedCategory) return true;
return item.category.toLowerCase() === selectedCategory.toLowerCase();
})
.filter((item) => {
if (!selectedRating) return true;
const rating = item.rating;
return rating >= Number(selectedRating) * 2;
})
.filter((item) => {
if (!searchQuery) return true;
return item.name.toLowerCase().includes(searchQuery.toLowerCase());
});
}, [items, priceRange, selectedCategory, selectedRating, searchQuery]);
// Filterfunktion bleibt gleich
const filteredItems: ItemWithImage[] = useMemo(() => {
return items
.filter((item) => {
const discountedPrice = item.price100 * (1 - item.discount100 / 100);
return discountedPrice >= priceRange[0] && discountedPrice <= priceRange[1];
})
.filter((item) => {
if (!selectedCategory) return true;
return item.category.toLowerCase() === selectedCategory.toLowerCase();
})
.filter((item) => {
if (!selectedRating) return true;
const rating = item.rating;
return rating >= (Number(selectedRating) * 2);
})
.filter((item) => {
if (!searchQuery) return true;
return (item.name.toLowerCase().includes(searchQuery.toLowerCase())
);
});
}, [items, priceRange, selectedCategory, selectedRating, searchQuery]);
// Lese die Suchanfrage aus der URL
useEffect(() => {
const params = new URLSearchParams(location.search);
const query = params.get("search");
setSearchQuery(query);
}, [location.search]);
// Container Ref
const containerRef = useRef<HTMLDivElement>(null);
// Lese die Suchanfrage aus der URL
useEffect(() => {
const params = new URLSearchParams(location.search);
const query = params.get("search");
setSearchQuery(query);
}, [location.search]);
const prevItemsLength = useRef(items.length);
useEffect(() => {
if (items.length >= prevItemsLength.current) {
prevItemsLength.current = items.length;
return;
}
// Container Ref
const containerRef = useRef<HTMLDivElement>(null);
setTimeout(() => {
containerRef.current?.scrollTo(0, 0);
}, 50);
const prevItemsLength = useRef(items.length);
prevItemsLength.current = items.length;
}, [items]);
useEffect(() => {
if (items.length >= prevItemsLength.current) {
prevItemsLength.current = items.length;
return;
}
// Kategorie-Änderung
const handleCategoryChange = (category: string) => {
if (category === "") {
setSelectedCategory(null);
navigate(`/`);
} else {
setSelectedCategory(category);
navigate(`/?category=${encodeURIComponent(category)}`);
}
};
setTimeout(() => {
containerRef.current?.scrollTo(0, 0);
}, 50);
// Rating-Änderung (bleibt gleich)
const handleRatingChange = (rating: string) => {
if (rating === "") {
setSelectedRating(null);
} else {
setSelectedRating(rating);
}
};
prevItemsLength.current = items.length;
}, [items]);
// Kategorie-Änderung
const handleCategoryChange = (category: string) => {
if (category === "") {
setSelectedCategory(null);
navigate(`/`);
} else {
setSelectedCategory(category);
navigate(`/?category=${encodeURIComponent(category)}`);
}
};
// Rating-Änderung (bleibt gleich)
const handleRatingChange = (rating: string) => {
if (rating === "") {
setSelectedRating(null);
} else {
setSelectedRating(rating);
}
};
return (
<div
className="home-page-background"
style={{backgroundColor: theme.palette.homepage}}
>
<div className="sidebar sidebar-filter">
<FilterItem
filterName={t("category")}
filterItems={categoriesFilter}
value={selectedCategory}
onChange={handleCategoryChange}
/>
<PriceSlider
min={minPrice}
max={maxPrice}
onChange={(range) => {
setPriceRange(range);
}}
/>
<FilterItem
filterName={t("ratingFrom")}
filterItems={ratingFilter}
value={selectedRating}
onChange={handleRatingChange}
/>
</div>
<div
className="home-page-background"
style={{backgroundColor: theme.palette.homepage}}
>
{isLoading && t('loading')}
{!isLoading && <main
className="page-background page-background-center"
ref={containerRef}
return (
<div
className="home-page-background"
style={{ backgroundColor: theme.palette.homepage }}
>
<div className="sidebar sidebar-filter">
<FilterItem
filterName={t("category")}
filterItems={categoriesFilter}
value={selectedCategory}
onChange={handleCategoryChange}
/>
<PriceSlider
min={minPrice}
max={maxPrice}
onChange={(range) => {
setPriceRange(range);
}}
/>
<FilterItem
filterName={t("ratingFrom")}
filterItems={ratingFilter}
value={selectedRating}
onChange={handleRatingChange}
/>
</div>
<div
className="home-page-background"
style={{ backgroundColor: theme.palette.homepage }}
>
{isLoading && t("loading")}
{!isLoading && (
<main
className="page-background page-background-center"
ref={containerRef}
>
<Box className="cardgrid">
{filteredItems.length === 0 ? (
<Alert
variant="filled"
severity="error"
sx={{
bgcolor: theme.palette.error.main,
color: theme.palette.getContrastText(
theme.palette.error.main,
),
width: "100%",
justifyContent: "center",
}}
>
<Box className="cardgrid">
{filteredItems.length === 0 ? (
<Alert
variant="filled"
severity="error"
sx={{
bgcolor: theme.palette.error.main,
color: theme.palette.getContrastText(
theme.palette.error.main
),
width: "100%",
justifyContent: "center",
}}
>
{t("noItemsFound")}
</Alert>
) : (
filteredItems.map(item => (
<ItemCard key={item.id} item={item}/>
))
)}
</Box>
</main>}
</div>
</div>
);
{t("noItemsFound")}
</Alert>
) : (
filteredItems.map((item) => (
<ItemCard key={item.id} item={item} />
))
)}
</Box>
</main>
)}
</div>
</div>
);
}

69
01-frontend/src/pages/NoPage.tsx
View File

@@ -1,41 +1,40 @@
import {Box, Button, Typography, useTheme} from "@mui/material";
import {useNavigate} from "react-router-dom";
import { Box, Button, Typography, useTheme } from "@mui/material";
import { useNavigate } from "react-router-dom";
import "./pages.css";
import {useTranslation} from "react-i18next";
import { useTranslation } from "react-i18next";
export default function NoPage() {
const theme = useTheme();
const { t } = useTranslation();
const navigate = useNavigate();
const theme = useTheme();
const {t} = useTranslation();
const navigate = useNavigate();
const handleGoHome = () => {
navigate("/");
};
const handleGoHome = () => {
navigate("/");
};
return (
<Box
className="no-page-container"
sx={{color: theme.palette.text.primary}}
>
<Typography variant="h1" className="no-page-title">
404
</Typography>
<Typography variant="h5" className="no-page-subtitle">
{t('pageDoesNotExist')}
</Typography>
<Typography variant="body1" className="no-page-description">
{t('wrongTurn')}
</Typography>
<Button
variant="contained"
color="primary"
size="large"
className="no-page-button"
onClick={handleGoHome}
>
{t('backToHome')}
</Button>
</Box>
);
return (
<Box
className="no-page-container"
sx={{ color: theme.palette.text.primary }}
>
<Typography variant="h1" className="no-page-title">
404
</Typography>
<Typography variant="h5" className="no-page-subtitle">
{t("pageDoesNotExist")}
</Typography>
<Typography variant="body1" className="no-page-description">
{t("wrongTurn")}
</Typography>
<Button
variant="contained"
color="primary"
size="large"
className="no-page-button"
onClick={handleGoHome}
>
{t("backToHome")}
</Button>
</Box>
);
}

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

@@ -1,149 +1,185 @@
import {
Box,
Button,
Dialog,
DialogActions,
DialogContent,
DialogTitle,
Divider,
List,
ListItemButton,
ListItemText,
Paper,
Stack,
Tab,
Tabs,
Typography
Box,
Button,
Dialog,
DialogActions,
DialogContent,
DialogTitle,
Divider,
List,
ListItemButton,
ListItemText,
Paper,
Stack,
Tab,
Tabs,
Typography,
} from "@mui/material";
import {useQuery} from "@tanstack/react-query";
import {useEffect, useState} from "react";
import {useTranslation} from "react-i18next";
import OrderType, {OrderStatusEnum} from "../components/Order";
import { useQuery } from "@tanstack/react-query";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import OrderType, { OrderStatusEnum } from "../components/Order";
import "./pages.css";
import {useAccount} from "../helper/AccountProvider";
import {fetchOrders, orderPatch} from "../helper/query/Queries";
import { useAccount } from "../helper/AccountProvider";
import { fetchOrders, orderPatch } from "../helper/query/Queries";
export default function Orders() {
const { user } = useAccount();
const [orders, setOrders] = useState<OrderType[]>([]);
const {user} = useAccount();
const [orders, setOrders] = useState<OrderType[]>([])
const { data: accountOrders, refetch } = useQuery<OrderType[]>({
queryKey: ["fetchOrders", user?.customerId], // Hier sollte die tatsächliche Kunden-ID verwendet werden
queryFn: () => (user ? fetchOrders(user.customerId) : Promise.resolve([])), // Simulierte API-Antwort
enabled: !!user, // Nur ausführen, wenn user existiert
retry: 3, // Versucht es 3-mal erneut
retryDelay: 1000, // Wartezeit zwischen den Versuchen (in ms)
});
const {data: accountOrders, refetch} = useQuery<OrderType[]>({
queryKey: ['fetchOrders', user?.customerId], // Hier sollte die tatsächliche Kunden-ID verwendet werden
queryFn: () => user ? fetchOrders(user.customerId) : Promise.resolve([]), // Simulierte API-Antwort
enabled: !!user, // Nur ausführen, wenn user existiert
retry: 3, // Versucht es 3-mal erneut
retryDelay: 1000, // Wartezeit zwischen den Versuchen (in ms)
});
useEffect(() => {
setOrders(accountOrders ?? []);
console.log("Orders fetched:", accountOrders);
}, [accountOrders]);
useEffect(() => {
setOrders(accountOrders ?? []);
console.log("Orders fetched:", accountOrders);
}, [accountOrders]);
const { t } = useTranslation();
const {t} = useTranslation();
const [tab, setTab] = useState(0);
const [selectedOrder, setSelectedOrder] = useState<OrderType | null>(null);
const [tab, setTab] = useState(0);
const [selectedOrder, setSelectedOrder] = useState<OrderType | null>(null);
const activeOrders = orders.filter(
(o) =>
o.status === OrderStatusEnum.ISSUES ||
o.status === OrderStatusEnum.IN_PROGRESS ||
o.status === OrderStatusEnum.ORDERED,
);
const inactiveOrders = orders.filter(
(o) =>
o.status === OrderStatusEnum.CANCELLED ||
o.status === OrderStatusEnum.DELIVERED,
);
const activeOrders = orders.filter(o => o.status === OrderStatusEnum.ISSUES || o.status === OrderStatusEnum.IN_PROGRESS || o.status === OrderStatusEnum.ORDERED);
const inactiveOrders = orders.filter(o => o.status === OrderStatusEnum.CANCELLED || o.status === OrderStatusEnum.DELIVERED);
const handleTabChange = (_: React.SyntheticEvent, newValue: number) =>
setTab(newValue);
const handleTabChange = (_: React.SyntheticEvent, newValue: number) => setTab(newValue);
const { refetch: cancleOrder } = useQuery({
queryKey: [
"orderPatch",
{ id: selectedOrder?.id || -1, status: OrderStatusEnum.CANCELLED },
],
queryFn: () =>
orderPatch({
id: selectedOrder?.id || -1,
status: OrderStatusEnum.CANCELLED,
}),
retry: 0,
retryDelay: 1000,
enabled: false,
});
const handleCancelOrder = async () => {
await cancleOrder();
setSelectedOrder(null);
refetch();
};
const {refetch: cancleOrder} = useQuery({
queryKey: ["orderPatch", {id: selectedOrder?.id || -1, status: OrderStatusEnum.CANCELLED}],
queryFn: () => orderPatch({id: selectedOrder?.id || -1, status: OrderStatusEnum.CANCELLED}),
retry: 0,
retryDelay: 1000,
enabled: false,
});
return (
<Box
className="page-background page-background-center"
sx={{ minHeight: "100vh", pt: 4 }}
>
<Paper
elevation={3}
sx={{ p: 4, maxWidth: 700, width: "100%", mx: "auto" }}
>
<Typography variant="h4" gutterBottom>
{t("myOrders")}
</Typography>
<Tabs value={tab} onChange={handleTabChange} sx={{ mb: 3 }}>
<Tab label={t("active")} />
<Tab label={t("previous")} />
</Tabs>
<Divider sx={{ mb: 2 }} />
{tab === 0 ? (
activeOrders.length > 0 ? (
<List>
{activeOrders.map((order) => (
<ListItemButton
key={order.id}
onClick={() => setSelectedOrder(order)}
>
<ListItemText
primary={`${t("order")} #${order.id} • ${order.status} • ${new Date(order.time).toUTCString()}`}
secondary={`${t("sum")}: ${(order.total / 100).toFixed(2)} € • ${order.orderItems.length} ${t("items")}`}
/>
</ListItemButton>
))}
</List>
) : (
<Typography color="text.secondary">
{t("noActiveOrders")}
</Typography>
)
) : inactiveOrders.length > 0 ? (
<List>
{inactiveOrders.map((order) => (
<ListItemButton
key={order.id}
onClick={() => setSelectedOrder(order)}
>
<ListItemText
primary={`${t("order")} #${order.id} • ${order.status} • ${new Date(order.time).toUTCString()}`}
secondary={`${t("sum")}: ${(order.total / 100).toFixed(2)} € • ${order.orderItems.length} ${t("items")}`}
/>
</ListItemButton>
))}
</List>
) : (
<Typography color="text.secondary">
{t("noPreviousOrders")}
</Typography>
)}
const handleCancelOrder = async () => {
await cancleOrder();
setSelectedOrder(null);
refetch();
};
return (
<Box className="page-background page-background-center" sx={{minHeight: "100vh", pt: 4}}>
<Paper elevation={3} sx={{p: 4, maxWidth: 700, width: "100%", mx: "auto"}}>
<Typography variant="h4" gutterBottom>
{t('myOrders')}
<Dialog
open={!!selectedOrder}
onClose={() => setSelectedOrder(null)}
maxWidth="sm"
fullWidth
>
<DialogTitle>
{`${selectedOrder?.status === OrderStatusEnum.IN_PROGRESS ? t("activeOrder") : t("previousOrder")} #${selectedOrder?.id}`}
</DialogTitle>
<DialogContent dividers>
{selectedOrder && (
<Stack spacing={2}>
<Typography variant="subtitle1">{`${t("orderDate")}: ${new Date(selectedOrder.time).toUTCString()}`}</Typography>
<Divider />
<Typography variant="subtitle2">
{t("orderedItems")}:
</Typography>
<Tabs value={tab} onChange={handleTabChange} sx={{mb: 3}}>
<Tab label={t('active')}/>
<Tab label={t('previous')}/>
</Tabs>
<Divider sx={{mb: 2}}/>
{tab === 0 ? (
activeOrders.length > 0 ? (
<List>
{activeOrders.map(order => (
<ListItemButton key={order.id} onClick={() => setSelectedOrder(order)}>
<ListItemText
primary={`${t('order')} #${order.id} • ${order.status} • ${new Date(order.time).toUTCString()}`}
secondary={`${t('sum')}: ${(order.total / 100).toFixed(2)} € • ${order.orderItems.length} ${t('items')}`}
/>
</ListItemButton>
))}
</List>
) : (
<Typography color="text.secondary">{t('noActiveOrders')}</Typography>
)
) : (
inactiveOrders.length > 0 ? (
<List>
{inactiveOrders.map(order => (
<ListItemButton key={order.id} onClick={() => setSelectedOrder(order)}>
<ListItemText
primary={`${t('order')} #${order.id} • ${order.status} • ${new Date(order.time).toUTCString()}`}
secondary={`${t('sum')}: ${(order.total / 100).toFixed(2)} € • ${order.orderItems.length} ${t('items')}`}
/>
</ListItemButton>
))}
</List>
) : (
<Typography color="text.secondary">{t('noPreviousOrders')}</Typography>
)
)}
<Dialog open={!!selectedOrder} onClose={() => setSelectedOrder(null)} maxWidth="sm" fullWidth>
<DialogTitle>
{`${selectedOrder?.status === OrderStatusEnum.IN_PROGRESS ? t('activeOrder') : t('previousOrder')} #${selectedOrder?.id}`}
</DialogTitle>
<DialogContent dividers>
{selectedOrder && (
<Stack spacing={2}>
<Typography
variant="subtitle1">{`${t('orderDate')}: ${new Date(selectedOrder.time).toUTCString()}`}</Typography>
<Divider/>
<Typography variant="subtitle2">{t('orderedItems')}:</Typography>
<List dense>
{selectedOrder.orderItems.map((item, idx) => (
<ListItemText
key={idx}
primary={`${item.article} x${item.amount}`}
/>
))}
</List>
<Divider/>
<Typography
variant="h6">{`${t('sum')}: ${(selectedOrder.total / 100).toFixed(2)} €`}</Typography>
</Stack>
)}
</DialogContent>
<DialogActions>
{(selectedOrder?.status === OrderStatusEnum.ISSUES || selectedOrder?.status === OrderStatusEnum.IN_PROGRESS || selectedOrder?.status === OrderStatusEnum.ORDERED) && (
<Button color="error" onClick={() => handleCancelOrder()}>
{t('cancelOrder')}
</Button>
)}
<Button onClick={() => setSelectedOrder(null)}>{t('close')}</Button>
</DialogActions>
</Dialog>
</Paper>
</Box>
);
<List dense>
{selectedOrder.orderItems.map((item, idx) => (
<ListItemText
key={idx}
primary={`${item.article} x${item.amount}`}
/>
))}
</List>
<Divider />
<Typography variant="h6">{`${t("sum")}: ${(selectedOrder.total / 100).toFixed(2)} €`}</Typography>
</Stack>
)}
</DialogContent>
<DialogActions>
{(selectedOrder?.status === OrderStatusEnum.ISSUES ||
selectedOrder?.status === OrderStatusEnum.IN_PROGRESS ||
selectedOrder?.status === OrderStatusEnum.ORDERED) && (
<Button color="error" onClick={() => handleCancelOrder()}>
{t("cancelOrder")}
</Button>
)}
<Button onClick={() => setSelectedOrder(null)}>{t("close")}</Button>
</DialogActions>
</Dialog>
</Paper>
</Box>
);
}

714
01-frontend/src/pages/Payment.tsx
View File

@@ -1,373 +1,403 @@
import {
Alert,
Box,
Button,
Container,
Divider,
Grid,
List,
ListItem,
ListItemText,
Paper,
Step,
StepLabel,
Stepper,
TextField,
Typography
} from '@mui/material';
import {useMutation, useQuery} from '@tanstack/react-query';
import {TFunction} from 'i18next';
import React, {useEffect, useState} from 'react';
import {useTranslation} from "react-i18next";
import {useNavigate} from 'react-router-dom';
import {CustomerType} from '../components/Account';
import Item from '../components/Item';
import OrderType, {OrderStatusEnum} from '../components/Order';
import {useAccount} from '../helper/AccountProvider';
import {BasketItem, useBasket} from '../helper/BasketProvider';
import {fetchCustomer, submitCustomer, submitOrder} from '../helper/query/Queries';
Alert,
Box,
Button,
Container,
Divider,
Grid,
List,
ListItem,
ListItemText,
Paper,
Step,
StepLabel,
Stepper,
TextField,
Typography,
} from "@mui/material";
import { useMutation, useQuery } from "@tanstack/react-query";
import { TFunction } from "i18next";
import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import { CustomerType } from "../components/Account";
import Item from "../components/Item";
import OrderType, { OrderStatusEnum } from "../components/Order";
import { useAccount } from "../helper/AccountProvider";
import { BasketItem, useBasket } from "../helper/BasketProvider";
import {
fetchCustomer,
submitCustomer,
submitOrder,
} from "../helper/query/Queries";
function getDiscountedPrice(item: Item): number {
return (item.price100 / 100 * (100 - item.discount100) / 100);
return ((item.price100 / 100) * (100 - item.discount100)) / 100;
}
function generateBasket(t: TFunction<"translation", undefined>, basket: BasketItem[]) {
return basket.length === 0 ? (
<Typography color="error" sx={{my: 2}}>
{t('basketEmpty')}
</Typography>
) : (
<List>
{basket.map((item) => (
<ListItem key={item.item.uuid}>
<ListItemText
primary={`${item.quantity}x ${item.item.name}`}
secondary={`Item ID: ${item.item.uuid}`}
/>
function generateBasket(
t: TFunction<"translation", undefined>,
basket: BasketItem[],
) {
return basket.length === 0 ? (
<Typography color="error" sx={{ my: 2 }}>
{t("basketEmpty")}
</Typography>
) : (
<List>
{basket.map((item) => (
<ListItem key={item.item.uuid}>
<ListItemText
primary={`${item.quantity}x ${item.item.name}`}
secondary={`Item ID: ${item.item.uuid}`}
/>
<div className="rightBound">
{`${(item.quantity * getDiscountedPrice(item.item)).toFixed(2)} €`}<br/>
{item.item.discount100 > 0 ? <a className='rightBound red'>{-item.item.discount100}%</a> : ""}
</div>
</ListItem>
))}
</List>
)
<div className="rightBound">
{`${(item.quantity * getDiscountedPrice(item.item)).toFixed(2)} €`}
<br />
{item.item.discount100 > 0 ? (
<a className="rightBound red">{-item.item.discount100}%</a>
) : (
""
)}
</div>
</ListItem>
))}
</List>
);
}
function generateTotal(t: TFunction<"translation", undefined>, basket: BasketItem[]) {
return basket.length === 0 ? "" :
<div className='rightBound'>
{t('total') + ": " + basket.map((item) => item.quantity * getDiscountedPrice(item.item))
.reduce((prev: number, cur: number) => prev + cur, 0).toFixed(2) + ` €`}
</div>
function generateTotal(
t: TFunction<"translation", undefined>,
basket: BasketItem[],
) {
return basket.length === 0 ? (
""
) : (
<div className="rightBound">
{t("total") +
": " +
basket
.map((item) => item.quantity * getDiscountedPrice(item.item))
.reduce((prev: number, cur: number) => prev + cur, 0)
.toFixed(2) +
` €`}
</div>
);
}
export default function Payment() {
const { t } = useTranslation();
const { basket, clearBasket } = useBasket();
const navigator = useNavigate();
const [activeStep, setActiveStep] = useState(0);
const [shippingDetails, setShippingDetails] = useState<CustomerType>({
id: 0, // This will be set by the backend or user data
name: "",
surname: "",
address: "",
zip: "",
country: "Deutschland",
});
const [orderNumber, setOrderNumber] = useState<string | null>(null);
const steps = [
t("reviewCart"),
t("shippingDetails"),
t("payment"),
t("orderSummary"),
];
const { user } = useAccount();
const submitOrderData: OrderType = {
id: 0, // This will be set by the backend
customerId: user ? user.customerId : 0, // Use user ID if logged in, otherwise 0
time: Date.now(),
status: OrderStatusEnum.ORDERED, // Initial status when order is placed
orderItems: basket.map((item) => ({
id: item.item.id,
amount: item.quantity,
article: item.item.uuid, // Assuming UUID is the identifier for the item
})),
total: basket.reduce(
(total, item) => total + item.quantity * getDiscountedPrice(item.item),
0,
),
};
const {t} = useTranslation();
const {basket, clearBasket} = useBasket();
const navigator = useNavigate();
const [activeStep, setActiveStep] = useState(0);
const [shippingDetails, setShippingDetails] = useState<CustomerType>({
id: 0, // This will be set by the backend or user data
name: '',
surname: '',
address: '',
zip: '',
country: 'Deutschland',
});
const [orderNumber, setOrderNumber] = useState<string | null>(null);
const steps = [t('reviewCart'), t('shippingDetails'), t('payment'), t('orderSummary')];
const {user} = useAccount();
const { refetch: refetchCustomer } = useQuery({
queryKey: ["submitCustomer", shippingDetails],
queryFn: () => submitCustomer(shippingDetails),
retry: 0,
retryDelay: 1000,
enabled: false,
});
const submitOrderData: OrderType = {
id: 0, // This will be set by the backend
customerId: user ? user.customerId : 0, // Use user ID if logged in, otherwise 0
time: Date.now(),
status: OrderStatusEnum.ORDERED, // Initial status when order is placed
orderItems: basket.map(item => ({
id: item.item.id,
amount: item.quantity,
article: item.item.uuid, // Assuming UUID is the identifier for the item
})),
total: basket.reduce((total, item) => total + (item.quantity * getDiscountedPrice(item.item)), 0),
};
const showAlert = () => {
return <Alert>//TODO:</Alert>;
};
const {refetch: refetchCustomer} = useQuery({
queryKey: ["submitCustomer", shippingDetails],
queryFn: () => submitCustomer(shippingDetails),
retry: 0,
retryDelay: 1000,
enabled: false,
});
const { refetch: customerData } = useQuery<CustomerType>({
queryKey: ["fetchCustomer", user?.customerId],
queryFn: () => fetchCustomer(user?.customerId || 0), // Funktion zum Abrufen der Kundendaten
enabled: false,
});
const showAlert = () => {
return <Alert>
//TODO:
</Alert>
};
const {refetch: customerData} = useQuery<CustomerType>({
queryKey: ['fetchCustomer', user?.customerId],
queryFn: () => fetchCustomer(user?.customerId || 0), // Funktion zum Abrufen der Kundendaten
enabled: false
});
useEffect(() => {
const fetchShippingDetails = async () => {
if (user) {
try {
const userShippingDetails = (await customerData()).data;
setShippingDetails(userShippingDetails || shippingDetails);
} catch (error) {
console.error("Fehler beim Laden der Kundendaten:", error);
}
}
};
fetchShippingDetails();
}, [user, customerData]);
// Verwende useMutation statt useQuery für submitOrder
const {mutateAsync: submitOrderMutation} = useMutation({
mutationFn: (orderData: OrderType) => submitOrder(orderData),
});
const handleNext = async () => {
let next: boolean = true;
if (activeStep === steps.length - 2) {
// Simulate order placement and generate order number
const generatedOrderNumber = `ORD-${Math.floor(Math.random() * 1000000)}`;
setOrderNumber(generatedOrderNumber);
let customerId = user ? user.customerId : 0;
if (!customerId) {
const customerResponse = await refetchCustomer();
customerId = customerResponse.data.id;
}
// Erzeuge die Orderdaten mit der richtigen customerId
const orderData: OrderType = {
...submitOrderData,
customerId,
};
try {
await submitOrderMutation(orderData);
// eslint-disable-next-line @typescript-eslint/no-unused-vars
} catch (e) {
next = false;
}
}
if (next) {
setActiveStep((prevStep) => prevStep + 1);
} else {
showAlert();
useEffect(() => {
const fetchShippingDetails = async () => {
if (user) {
try {
const userShippingDetails = (await customerData()).data;
setShippingDetails(userShippingDetails || shippingDetails);
} catch (error) {
console.error("Fehler beim Laden der Kundendaten:", error);
}
}
};
const handleBack = () => {
setActiveStep((prevStep) => prevStep - 1);
};
fetchShippingDetails();
}, [user, customerData]);
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const {name, value} = e.target;
setShippingDetails((prevDetails) => ({
...prevDetails,
[name]: value,
}));
};
const handleClearBasket = () => {
clearBasket();
};
// Verwende useMutation statt useQuery für submitOrder
const { mutateAsync: submitOrderMutation } = useMutation({
mutationFn: (orderData: OrderType) => submitOrder(orderData),
});
// Hilfsfunktion prüfen, ob alle Pflichtfelder ausgefüllt sind
const isShippingDetailsValid = () => {
return (
shippingDetails.name.trim() !== '' &&
shippingDetails.surname.trim() !== '' &&
shippingDetails.address.trim() !== '' &&
shippingDetails.zip.trim() !== '' &&
shippingDetails.country.trim() !== ''
);
};
const handleNext = async () => {
let next: boolean = true;
const renderStepContent = (step: number) => {
switch (step) {
case 0:
return (
<Box>
<Typography variant="h6" gutterBottom>
{t('reviewCart')}
</Typography>
{generateBasket(t, basket)}
<Divider sx={{my: 2}}/>
<Button variant="outlined" color="error" onClick={handleClearBasket}
disabled={basket.length === 0}>
{t('clearCart')}
</Button>
{generateTotal(t, basket)}
</Box>
);
case 1:
return (
<Box>
<Typography variant="h6" gutterBottom>
{t('shippingDetails')}
</Typography>
<Grid container spacing={2}>
if (activeStep === steps.length - 2) {
// Simulate order placement and generate order number
const generatedOrderNumber = `ORD-${Math.floor(Math.random() * 1000000)}`;
setOrderNumber(generatedOrderNumber);
<TextField
fullWidth
label={t('firstName')}
name="name"
value={shippingDetails.name}
onChange={handleInputChange}
required
/>
let customerId = user ? user.customerId : 0;
if (!customerId) {
const customerResponse = await refetchCustomer();
customerId = customerResponse.data.id;
}
<TextField
fullWidth
label={t('lastName')}
name="surname"
value={shippingDetails.surname}
onChange={handleInputChange}
required
/>
// Erzeuge die Orderdaten mit der richtigen customerId
const orderData: OrderType = {
...submitOrderData,
customerId,
};
<TextField
fullWidth
label={t('address')}
name="address"
value={shippingDetails.address}
onChange={handleInputChange}
required
/>
try {
await submitOrderMutation(orderData);
// eslint-disable-next-line @typescript-eslint/no-unused-vars
} catch (e) {
next = false;
}
}
if (next) {
setActiveStep((prevStep) => prevStep + 1);
} else {
showAlert();
}
};
<TextField
fullWidth
label={t('postalCode')}
name="zip"
value={shippingDetails.zip}
onChange={handleInputChange}
required
/>
const handleBack = () => {
setActiveStep((prevStep) => prevStep - 1);
};
<TextField
fullWidth
label={t('country')}
name="country"
value={shippingDetails.country}
onChange={handleInputChange}
required
/>
</Grid>
</Box>
);
case 2:
return (
<Box>
<Typography variant="h6" gutterBottom>
{t('payment')}
</Typography>
<Typography variant="body1">
{t('paymentNotAvailable')}
</Typography>
</Box>
);
case 3:
return (
<Box>
<Typography variant="h6" gutterBottom>
{t('orderSummary')}
</Typography>
<Typography variant="body1" gutterBottom>
{t('thanksForOrder')}
</Typography>
<Typography variant="body2" gutterBottom>
{t('yourOrderNumber')}: <strong>{orderNumber}</strong>
</Typography>
<Divider sx={{my: 2}}/>
<Typography variant="h6">{t('shippingDetails')}:</Typography>
<Typography variant="body2">
{shippingDetails.name} {shippingDetails.surname}<br/>
{shippingDetails.address}<br/>
{shippingDetails.zip} {shippingDetails.country}<br/>
</Typography>
<Divider sx={{my: 2}}/>
<Typography variant="h6">{t('orderedItems')}:</Typography>
{generateBasket(t, basket)}
<Divider sx={{my: 2}}/>
{generateTotal(t, basket)}
<br/>
</Box>
);
default:
return <div>Unknown step</div>;
}
};
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const { name, value } = e.target;
setShippingDetails((prevDetails) => ({
...prevDetails,
[name]: value,
}));
};
const handleClearBasket = () => {
clearBasket();
};
// Hilfsfunktion prüfen, ob alle Pflichtfelder ausgefüllt sind
const isShippingDetailsValid = () => {
return (
<div className="page-background">
<Container
maxWidth="md"
sx={{
py: 4,
maxHeight: '90vh',
overflowY: 'auto'
}}
>
<Paper elevation={3} sx={{p: 4}}>
<Typography variant="h4" align="center" gutterBottom>
{t('completeYourOrder')}
</Typography>
<Stepper activeStep={activeStep} alternativeLabel>
{steps.map((label) => (
<Step key={label}>
<StepLabel>{label}</StepLabel>
</Step>
))}
</Stepper>
<Box sx={{mt: 4}}>{renderStepContent(activeStep)}</Box>
<Box sx={{display: 'flex', justifyContent: 'space-between', mt: 4}}>
<Button
disabled={activeStep === 0}
onClick={handleBack}
variant="outlined"
>
{t('back')}
</Button>
{activeStep === steps.length - 1 ? (
<Button
variant="contained"
color="primary"
onClick={() => {
handleClearBasket();
navigator('/');
}}
>
{t('finish')}
</Button>
) : (
<Button
variant="contained"
color="primary"
onClick={handleNext}
disabled={
basket.length === 0 ||
(activeStep === 1 && !isShippingDetailsValid())
}
>
{activeStep === steps.length - 2 ? t('placeOrder') : t('next')}
</Button>
)}
</Box>
</Paper>
</Container>
</div>
shippingDetails.name.trim() !== "" &&
shippingDetails.surname.trim() !== "" &&
shippingDetails.address.trim() !== "" &&
shippingDetails.zip.trim() !== "" &&
shippingDetails.country.trim() !== ""
);
};
const renderStepContent = (step: number) => {
switch (step) {
case 0:
return (
<Box>
<Typography variant="h6" gutterBottom>
{t("reviewCart")}
</Typography>
{generateBasket(t, basket)}
<Divider sx={{ my: 2 }} />
<Button
variant="outlined"
color="error"
onClick={handleClearBasket}
disabled={basket.length === 0}
>
{t("clearCart")}
</Button>
{generateTotal(t, basket)}
</Box>
);
case 1:
return (
<Box>
<Typography variant="h6" gutterBottom>
{t("shippingDetails")}
</Typography>
<Grid container spacing={2}>
<TextField
fullWidth
label={t("firstName")}
name="name"
value={shippingDetails.name}
onChange={handleInputChange}
required
/>
<TextField
fullWidth
label={t("lastName")}
name="surname"
value={shippingDetails.surname}
onChange={handleInputChange}
required
/>
<TextField
fullWidth
label={t("address")}
name="address"
value={shippingDetails.address}
onChange={handleInputChange}
required
/>
<TextField
fullWidth
label={t("postalCode")}
name="zip"
value={shippingDetails.zip}
onChange={handleInputChange}
required
/>
<TextField
fullWidth
label={t("country")}
name="country"
value={shippingDetails.country}
onChange={handleInputChange}
required
/>
</Grid>
</Box>
);
case 2:
return (
<Box>
<Typography variant="h6" gutterBottom>
{t("payment")}
</Typography>
<Typography variant="body1">{t("paymentNotAvailable")}</Typography>
</Box>
);
case 3:
return (
<Box>
<Typography variant="h6" gutterBottom>
{t("orderSummary")}
</Typography>
<Typography variant="body1" gutterBottom>
{t("thanksForOrder")}
</Typography>
<Typography variant="body2" gutterBottom>
{t("yourOrderNumber")}: <strong>{orderNumber}</strong>
</Typography>
<Divider sx={{ my: 2 }} />
<Typography variant="h6">{t("shippingDetails")}:</Typography>
<Typography variant="body2">
{shippingDetails.name} {shippingDetails.surname}
<br />
{shippingDetails.address}
<br />
{shippingDetails.zip} {shippingDetails.country}
<br />
</Typography>
<Divider sx={{ my: 2 }} />
<Typography variant="h6">{t("orderedItems")}:</Typography>
{generateBasket(t, basket)}
<Divider sx={{ my: 2 }} />
{generateTotal(t, basket)}
<br />
</Box>
);
default:
return <div>Unknown step</div>;
}
};
return (
<div className="page-background">
<Container
maxWidth="md"
sx={{
py: 4,
maxHeight: "90vh",
overflowY: "auto",
}}
>
<Paper elevation={3} sx={{ p: 4 }}>
<Typography variant="h4" align="center" gutterBottom>
{t("completeYourOrder")}
</Typography>
<Stepper activeStep={activeStep} alternativeLabel>
{steps.map((label) => (
<Step key={label}>
<StepLabel>{label}</StepLabel>
</Step>
))}
</Stepper>
<Box sx={{ mt: 4 }}>{renderStepContent(activeStep)}</Box>
<Box sx={{ display: "flex", justifyContent: "space-between", mt: 4 }}>
<Button
disabled={activeStep === 0}
onClick={handleBack}
variant="outlined"
>
{t("back")}
</Button>
{activeStep === steps.length - 1 ? (
<Button
variant="contained"
color="primary"
onClick={() => {
handleClearBasket();
navigator("/");
}}
>
{t("finish")}
</Button>
) : (
<Button
variant="contained"
color="primary"
onClick={handleNext}
disabled={
basket.length === 0 ||
(activeStep === 1 && !isShippingDetailsValid())
}
>
{activeStep === steps.length - 2 ? t("placeOrder") : t("next")}
</Button>
)}
</Box>
</Paper>
</Container>
</div>
);
}

166
01-frontend/src/pages/Product.tsx
View File

@@ -1,92 +1,88 @@
import {Box, Button, Container, Divider, Typography} from '@mui/material';
import {useLocation, useNavigate} from 'react-router-dom';
import Item from '../components/Item';
import ProductInfo from '../helper/productpage/ProductInfo';
import Ratings from '../helper/productpage/Ratings';
import {useTranslation} from "react-i18next";
import {useTheme} from '@mui/material/styles';
import { Box, Button, Container, Divider, Typography } from "@mui/material";
import { useLocation, useNavigate } from "react-router-dom";
import Item from "../components/Item";
import ProductInfo from "../helper/productpage/ProductInfo";
import Ratings from "../helper/productpage/Ratings";
import { useTranslation } from "react-i18next";
import { useTheme } from "@mui/material/styles";
export default function Product() {
const {t} = useTranslation();
const location = useLocation();
const item = location.state?.item as Item;
const navigate = useNavigate();
const theme = useTheme(); // Zugriff auf das aktive Theme
const { t } = useTranslation();
const location = useLocation();
const item = location.state?.item as Item;
const navigate = useNavigate();
const theme = useTheme(); // Zugriff auf das aktive Theme
const handleGoHome = () => {
navigate("/");
};
// Wenn kein Produkt vorhanden ist
if (!item) {
return (
<Box
sx={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
height: '100vh',
textAlign: 'center',
backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary,
gap: '2rem',
overflow: 'auto',
px: 2,
}}
>
<Typography variant="h1">
{t('productNotFound')}
</Typography>
<Typography variant="h5">
{t('productDoesNotExist')}
</Typography>
<Button
variant="contained"
color="primary"
size="large"
onClick={handleGoHome}
>
{t('backToHome')}
</Button>
</Box>
);
}
const handleGoHome = () => {
navigate("/");
};
// Wenn kein Produkt vorhanden ist
if (!item) {
return (
<Box
sx={{
backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary,
height: '100vh',
overflow: 'auto',
pt: 4,
pb: 10,
}}
<Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
height: "100vh",
textAlign: "center",
backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary,
gap: "2rem",
overflow: "auto",
px: 2,
}}
>
<Typography variant="h1">{t("productNotFound")}</Typography>
<Typography variant="h5">{t("productDoesNotExist")}</Typography>
<Button
variant="contained"
color="primary"
size="large"
onClick={handleGoHome}
>
<Container maxWidth="lg">
<ProductInfo item={item}/>
<Box sx={{my: 4}}>
<Divider sx={{backgroundColor: theme.palette.text.secondary}}/>
</Box>
<Typography
variant="body2"
sx={{color: theme.palette.text.secondary, mb: 1}}
>
{t('articleNumber')}: {item.uuid}
</Typography>
<Typography
variant="body1"
sx={{color: theme.palette.text.primary, mb: 3}}
>
{item.description}
</Typography>
<Ratings itemId={item.uuid}/>
</Container>
</Box>
{t("backToHome")}
</Button>
</Box>
);
};
}
return (
<Box
sx={{
backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary,
height: "100vh",
overflow: "auto",
pt: 4,
pb: 10,
}}
>
<Container maxWidth="lg">
<ProductInfo item={item} />
<Box sx={{ my: 4 }}>
<Divider sx={{ backgroundColor: theme.palette.text.secondary }} />
</Box>
<Typography
variant="body2"
sx={{ color: theme.palette.text.secondary, mb: 1 }}
>
{t("articleNumber")}: {item.uuid}
</Typography>
<Typography
variant="body1"
sx={{ color: theme.palette.text.primary, mb: 3 }}
>
{item.description}
</Typography>
<Ratings itemId={item.uuid} />
</Container>
</Box>
);
}

198
01-frontend/src/pages/pages.css
View File

@@ -1,170 +1,170 @@
.no-page-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
text-align: center;
gap: 2%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
text-align: center;
gap: 2%;
}
.no-page-title {
font-size: 8rem;
font-weight: bold;
margin-bottom: 16px;
font-size: 8rem;
font-weight: bold;
margin-bottom: 16px;
}
.no-page-subtitle {
font-size: 1.5rem;
margin-bottom: 8px;
font-size: 1.5rem;
margin-bottom: 8px;
}
.no-page-description {
font-size: 1rem;
margin-bottom: 24px;
font-size: 1rem;
margin-bottom: 24px;
}
.no-page-button {
font-size: 1rem;
padding: 12px 24px;
background-color: #0fd13f;
color: white;
border-radius: 8px;
transition: background-color 0.3s ease;
font-size: 1rem;
padding: 12px 24px;
background-color: #0fd13f;
color: white;
border-radius: 8px;
transition: background-color 0.3s ease;
}
.no-page-button:hover {
background-color: #0cc634;
background-color: #0cc634;
}
.cardgrid {
display: grid;
gap: 24px;
width: 90%;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
padding: 16px 16px 64px 16px;
margin: 0 auto;
box-sizing: border-box;
display: grid;
gap: 24px;
width: 90%;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
padding: 16px 16px 64px 16px;
margin: 0 auto;
box-sizing: border-box;
}
.page-background {
background-color: var(--background-color);
min-height: var(--page-height);
display: flex;
flex-direction: column;
overflow: auto;
box-sizing: border-box;
width: 100%;
color: var(--text-color);
background-color: var(--background-color);
min-height: var(--page-height);
display: flex;
flex-direction: column;
overflow: auto;
box-sizing: border-box;
width: 100%;
color: var(--text-color);
}
.toppad {
padding: 20px 0;
padding: 20px 0;
}
.page-background-center {
align-items: center;
justify-content: space-between;
align-items: center;
justify-content: space-between;
}
.page-background.page-background--no-space-between {
justify-content: flex-start !important;
justify-content: flex-start !important;
}
.page-table {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
height: var(--page-height);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
height: var(--page-height);
}
.impressum-container {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
padding: 20px;
text-align: left;
background-color: var(--background-color);
color: var(--text-color);
height: var(--page-height);
margin: 0;
width: 100%;
box-sizing: border-box;
overflow: auto;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
padding: 20px;
text-align: left;
background-color: var(--background-color);
color: var(--text-color);
height: var(--page-height);
margin: 0;
width: 100%;
box-sizing: border-box;
overflow: auto;
}
.impressum-title {
font-size: 2.5rem;
font-weight: bold;
margin-bottom: 16px;
color: var(--text-color);
font-size: 2.5rem;
font-weight: bold;
margin-bottom: 16px;
color: var(--text-color);
}
.impressum-content {
font-size: 1rem;
line-height: 1.6;
color: var(--text-color);
font-size: 1rem;
line-height: 1.6;
color: var(--text-color);
}
.contact-divider {
background-color: var(--text-color);
height: 2px;
background-color: var(--text-color);
height: 2px;
}
.contact-divider-box {
width: 100%;
margin: 25px 0;
width: 100%;
margin: 25px 0;
}
.product-page-background {
background-color: var(--background-color);
height: 100%;
min-height: 600px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 20px 0;
box-sizing: border-box;
color: var(--text-color);
background-color: var(--background-color);
height: 100%;
min-height: 600px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 20px 0;
box-sizing: border-box;
color: var(--text-color);
}
.home-page-background {
display: flex;
align-items: stretch;
width: 100%;
scroll-behavior: smooth;
height: 100vh;
box-sizing: border-box;
color: var(--text-color);
display: flex;
align-items: stretch;
width: 100%;
scroll-behavior: smooth;
height: 100vh;
box-sizing: border-box;
color: var(--text-color);
}
.sidebar {
width: fit-content;
display: grid;
place-self: start;
white-space: nowrap;
margin-top: 2vh;
width: fit-content;
display: grid;
place-self: start;
white-space: nowrap;
margin-top: 2vh;
}
.sidebar-filter {
margin: 30px
margin: 30px;
}
.no-results {
text-align: center;
font-size: 1rem;
min-width: 600px;
background-color: var(--background-color);
color: var(--text-color);
text-align: center;
font-size: 1rem;
min-width: 600px;
background-color: var(--background-color);
color: var(--text-color);
}
.rightBound {
float: right;
float: right;
}
.red {
color: #F00;
color: #f00;
}

347
01-frontend/src/theme/ThemeContext.tsx
View File

@@ -1,185 +1,204 @@
'use client';
import React, {createContext, ReactNode, useContext, useEffect, useState} from 'react';
import {createTheme, ThemeProvider} from '@mui/material/styles';
import {CssBaseline, GlobalStyles} from '@mui/material';
import useMediaQuery from '@mui/material/useMediaQuery';
"use client";
import React, {
createContext,
ReactNode,
useContext,
useEffect,
useState,
} from "react";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import { CssBaseline, GlobalStyles } from "@mui/material";
import useMediaQuery from "@mui/material/useMediaQuery";
type ThemeMode = 'light' | 'dark';
type ThemeMode = "light" | "dark";
interface ThemeContextType {
mode: ThemeMode;
toggleMode: () => void;
mode: ThemeMode;
toggleMode: () => void;
}
const ThemeContext = createContext<ThemeContextType>({
mode: 'light',
toggleMode: () => {
},
mode: "light",
toggleMode: () => {},
});
export const useThemeMode = () => useContext(ThemeContext);
interface CustomThemeProviderProps {
children: ReactNode;
children: ReactNode;
}
export const CustomThemeProvider: React.FC<CustomThemeProviderProps> = ({children}) => {
// SSR-sichere System-Präferenz-Erkennung
const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)', {noSsr: true});
export const CustomThemeProvider: React.FC<CustomThemeProviderProps> = ({
children,
}) => {
// SSR-sichere System-Präferenz-Erkennung
const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)", {
noSsr: true,
});
// SSR-sichere Initialisierung
const [mode, setMode] = useState<ThemeMode>('light');
const [mounted, setMounted] = useState(false);
// SSR-sichere Initialisierung
const [mode, setMode] = useState<ThemeMode>("light");
const [mounted, setMounted] = useState(false);
// Nach dem ersten Render ausführen (SSR-sicher)
useEffect(() => {
setMounted(true);
// Nach dem ersten Render ausführen (SSR-sicher)
useEffect(() => {
setMounted(true);
if (typeof window !== 'undefined') {
const savedMode = localStorage.getItem('themeMode') as ThemeMode;
if (savedMode === 'light' || savedMode === 'dark') {
setMode(savedMode);
} else {
setMode(prefersDarkMode ? 'dark' : 'light');
}
}
}, [prefersDarkMode]);
// Mode in localStorage speichern
useEffect(() => {
if (mounted && typeof window !== 'undefined') {
localStorage.setItem('themeMode', mode);
}
}, [mode, mounted]);
// Browser-only DOM-Manipulation
useEffect(() => {
if (mounted && typeof window !== 'undefined') {
const backgroundColor = mode === 'dark' ? '#121212' : '#fafafa';
// Warten bis DOM geladen ist
const updateBackground = () => {
document.documentElement.style.setProperty('--background-color', backgroundColor);
document.documentElement.style.backgroundColor = backgroundColor;
document.body.style.backgroundColor = backgroundColor;
const root = document.getElementById('root');
if (root) {
root.style.backgroundColor = backgroundColor;
}
};
// Sofort ausführen
updateBackground();
// Nach einem kurzen Delay nochmal (für hartnäckige Cases)
const timeoutId = setTimeout(updateBackground, 100);
return () => clearTimeout(timeoutId);
}
}, [mode, mounted]);
const toggleMode = () => {
setMode(prevMode => prevMode === 'light' ? 'dark' : 'light');
};
// Theme basierend auf Mode erstellen
const theme = React.useMemo(() =>
createTheme({
palette: {
mode,
primary: {
main: '#0fd13f', // Grüne NavBar
light: mode === 'dark' ? '#4caf50' : '#42a5f5',
dark: mode === 'dark' ? '#388e3c' : '#1565c0',
contrastText: '#fff',
},
secondary: {
main: mode === 'dark' ? '#bb86fc' : '#9c27b0',
light: mode === 'dark' ? '#d7aefb' : '#ba68c8',
dark: mode === 'dark' ? '#985eff' : '#7b1fa2',
contrastText: '#fff',
},
background: {
default: mode === 'dark' ? '#121212' : '#fafafa',
paper: mode === 'dark' ? '#1e1e1e' : '#ffffff',
},
text: {
primary: mode === 'dark' ? '#ffffff' : '#000000',
secondary: mode === 'dark' ? 'rgba(255, 255, 255, 0.7)' : 'rgba(0, 0, 0, 0.6)',
},
homepage: mode === 'dark' ? '#1e1e1e' : '#f4f4f4',
},
components: {
MuiCssBaseline: {
styleOverrides: {
html: {
backgroundColor: `${mode === 'dark' ? '#121212' : '#fafafa'} !important`,
transition: 'background-color 300ms cubic-bezier(0.4, 0, 0.2, 1)',
},
body: {
backgroundColor: `${mode === 'dark' ? '#121212' : '#fafafa'} !important`,
transition: 'background-color 300ms cubic-bezier(0.4, 0, 0.2, 1)',
margin: 0,
},
},
},
MuiAppBar: {
styleOverrides: {
colorPrimary: {
backgroundColor: mode === 'dark' ? '#388e3c' : '#0fd13f',
color: '#ffffff',
},
},
},
},
}),
[mode]
);
// Aggressive GlobalStyles mit CSS-Variablen
const globalStyles = mounted ? (
<GlobalStyles
styles={{
':root': {
'--background-color': mode === 'dark' ? '#121212' : '#fafafa',
'--text-color': mode === 'dark' ? '#ffffff' : '#000000',
},
'*': {
boxSizing: 'border-box',
},
'html, body, #root': {
backgroundColor: `var(--background-color) !important`,
color: `var(--text-color) !important`,
transition: 'background-color 300ms cubic-bezier(0.4, 0, 0.2, 1), color 300ms cubic-bezier(0.4, 0, 0.2, 1)',
margin: 0,
padding: 0,
minHeight: '100vh',
},
'div, section, main, article': {
backgroundColor: 'transparent',
},
}}
/>
) : null;
// SSR-Fallback während mounted = false
if (!mounted) {
return (
<ThemeProvider theme={createTheme({palette: {mode: 'light'}})}>
<CssBaseline/>
{children}
</ThemeProvider>
);
if (typeof window !== "undefined") {
const savedMode = localStorage.getItem("themeMode") as ThemeMode;
if (savedMode === "light" || savedMode === "dark") {
setMode(savedMode);
} else {
setMode(prefersDarkMode ? "dark" : "light");
}
}
}, [prefersDarkMode]);
// Mode in localStorage speichern
useEffect(() => {
if (mounted && typeof window !== "undefined") {
localStorage.setItem("themeMode", mode);
}
}, [mode, mounted]);
// Browser-only DOM-Manipulation
useEffect(() => {
if (mounted && typeof window !== "undefined") {
const backgroundColor = mode === "dark" ? "#121212" : "#fafafa";
// Warten bis DOM geladen ist
const updateBackground = () => {
document.documentElement.style.setProperty(
"--background-color",
backgroundColor,
);
document.documentElement.style.backgroundColor = backgroundColor;
document.body.style.backgroundColor = backgroundColor;
const root = document.getElementById("root");
if (root) {
root.style.backgroundColor = backgroundColor;
}
};
// Sofort ausführen
updateBackground();
// Nach einem kurzen Delay nochmal (für hartnäckige Cases)
const timeoutId = setTimeout(updateBackground, 100);
return () => clearTimeout(timeoutId);
}
}, [mode, mounted]);
const toggleMode = () => {
setMode((prevMode) => (prevMode === "light" ? "dark" : "light"));
};
// Theme basierend auf Mode erstellen
const theme = React.useMemo(
() =>
createTheme({
palette: {
mode,
primary: {
main: "#0fd13f", // Grüne NavBar
light: mode === "dark" ? "#4caf50" : "#42a5f5",
dark: mode === "dark" ? "#388e3c" : "#1565c0",
contrastText: "#fff",
},
secondary: {
main: mode === "dark" ? "#bb86fc" : "#9c27b0",
light: mode === "dark" ? "#d7aefb" : "#ba68c8",
dark: mode === "dark" ? "#985eff" : "#7b1fa2",
contrastText: "#fff",
},
background: {
default: mode === "dark" ? "#121212" : "#fafafa",
paper: mode === "dark" ? "#1e1e1e" : "#ffffff",
},
text: {
primary: mode === "dark" ? "#ffffff" : "#000000",
secondary:
mode === "dark"
? "rgba(255, 255, 255, 0.7)"
: "rgba(0, 0, 0, 0.6)",
},
homepage: mode === "dark" ? "#1e1e1e" : "#f4f4f4",
},
components: {
MuiCssBaseline: {
styleOverrides: {
html: {
backgroundColor: `${mode === "dark" ? "#121212" : "#fafafa"} !important`,
transition:
"background-color 300ms cubic-bezier(0.4, 0, 0.2, 1)",
},
body: {
backgroundColor: `${mode === "dark" ? "#121212" : "#fafafa"} !important`,
transition:
"background-color 300ms cubic-bezier(0.4, 0, 0.2, 1)",
margin: 0,
},
},
},
MuiAppBar: {
styleOverrides: {
colorPrimary: {
backgroundColor: mode === "dark" ? "#388e3c" : "#0fd13f",
color: "#ffffff",
},
},
},
},
}),
[mode],
);
// Aggressive GlobalStyles mit CSS-Variablen
const globalStyles = mounted ? (
<GlobalStyles
styles={{
":root": {
"--background-color": mode === "dark" ? "#121212" : "#fafafa",
"--text-color": mode === "dark" ? "#ffffff" : "#000000",
},
"*": {
boxSizing: "border-box",
},
"html, body, #root": {
backgroundColor: `var(--background-color) !important`,
color: `var(--text-color) !important`,
transition:
"background-color 300ms cubic-bezier(0.4, 0, 0.2, 1), color 300ms cubic-bezier(0.4, 0, 0.2, 1)",
margin: 0,
padding: 0,
minHeight: "100vh",
},
"div, section, main, article": {
backgroundColor: "transparent",
},
}}
/>
) : null;
// SSR-Fallback während mounted = false
if (!mounted) {
return (
<ThemeContext.Provider value={{mode, toggleMode}}>
<ThemeProvider theme={theme}>
<CssBaseline enableColorScheme/>
{globalStyles}
{children}
</ThemeProvider>
</ThemeContext.Provider>
<ThemeProvider theme={createTheme({ palette: { mode: "light" } })}>
<CssBaseline />
{children}
</ThemeProvider>
);
}
return (
<ThemeContext.Provider value={{ mode, toggleMode }}>
<ThemeProvider theme={theme}>
<CssBaseline enableColorScheme />
{globalStyles}
{children}
</ThemeProvider>
</ThemeContext.Provider>
);
};

47
01-frontend/src/theme/ThemeToggle.tsx
View File

@@ -1,31 +1,30 @@
// theme/ThemeToggle.tsx
import React from 'react';
import {IconButton, Tooltip} from '@mui/material';
import {Brightness4, Brightness7} from '@mui/icons-material';
import {useThemeMode} from './ThemeContext';
import {useTranslation} from "react-i18next";
import React from "react";
import { IconButton, Tooltip } from "@mui/material";
import { Brightness4, Brightness7 } from "@mui/icons-material";
import { useThemeMode } from "./ThemeContext";
import { useTranslation } from "react-i18next";
const ThemeToggle: React.FC = () => {
const {mode, toggleMode} = useThemeMode();
const {t} = useTranslation();
const { mode, toggleMode } = useThemeMode();
const { t } = useTranslation();
return (
<Tooltip title={mode === 'dark' ? t('lightMode') : t('darkMode')}>
<IconButton
onClick={toggleMode}
color="inherit"
sx={{
transition: 'transform 0.2s',
'&:hover': {
transform: 'scale(1.1)',
},
}}
>
{mode === 'dark' ? <Brightness7/> : <Brightness4/>}
</IconButton>
</Tooltip>
);
return (
<Tooltip title={mode === "dark" ? t("lightMode") : t("darkMode")}>
<IconButton
onClick={toggleMode}
color="inherit"
sx={{
transition: "transform 0.2s",
"&:hover": {
transform: "scale(1.1)",
},
}}
>
{mode === "dark" ? <Brightness7 /> : <Brightness4 />}
</IconButton>
</Tooltip>
);
};
export default ThemeToggle;

20
01-frontend/src/theme/theme-augmentation.d.ts vendored
View File

@@ -1,13 +1,13 @@
import '@mui/material/styles';
import "@mui/material/styles";
declare module '@mui/material/styles' {
interface Palette {
tertiary: Palette['primary'];
homepage: string;
}
declare module "@mui/material/styles" {
interface Palette {
tertiary: Palette["primary"];
homepage: string;
}
interface PaletteOptions {
tertiary?: PaletteOptions['primary'];
homepage?: string;
}
interface PaletteOptions {
tertiary?: PaletteOptions["primary"];
homepage?: string;
}
}

396
01-frontend/src/theme/theme.ts
View File

@@ -1,206 +1,206 @@
import {createTheme} from '@mui/material/styles';
import './theme-augmentation.d.ts'; // Falls vorhanden
import { createTheme } from "@mui/material/styles";
import "./theme-augmentation.d.ts"; // Falls vorhanden
export const darkmode = createTheme({
palette: {
primary: {
main: '#0fd13f', // Grüne Standardfarbe
light: '#42a5f5',
dark: '#15650',
contrastText: '#fff',
},
secondary: {
main: '#9c27b0',
light: '#ba68c8',
dark: '#7b1fa2',
contrastText: '#fff',
},
error: {
main: '#f44336',
light: '#e57373',
dark: '#d32f2f',
contrastText: '#fff',
},
warning: {
main: '#ed6c02',
light: '#ff9800',
dark: '#e65100',
contrastText: '#fff',
},
info: {
main: '#0288d1',
light: '#03a9f4',
dark: '#01579b',
contrastText: '#fff',
},
success: {
main: '#2e7d32',
light: '#4caf50',
dark: '#1b5e20',
contrastText: '#fff',
},
background: {
default: '#fafafa',
paper: '#ffffff',
},
text: {
primary: '#000000',
secondary: 'rgba(0, 0, 0, 0.6)',
},
palette: {
primary: {
main: "#0fd13f", // Grüne Standardfarbe
light: "#42a5f5",
dark: "#15650",
contrastText: "#fff",
},
// Sanfte Übergänge
transitions: {
duration: {
shortest: 150,
shorter: 200,
short: 250,
standard: 300,
complex: 375,
enteringScreen: 225,
leavingScreen: 195,
},
easing: {
easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
easeOut: 'cubic-bezier(0.0, 0, 0.2, 1)',
easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
sharp: 'cubic-bezier(0.4, 0, 0.6, 1)',
},
secondary: {
main: "#9c27b0",
light: "#ba68c8",
dark: "#7b1fa2",
contrastText: "#fff",
},
// Verbesserte Komponenten-Overrides
components: {
MuiCssBaseline: {
styleOverrides: {
body: {
backgroundColor: '#fafafa',
transition: 'background-color 300ms cubic-bezier(0.4, 0, 0.2, 1)',
},
html: {
backgroundColor: '#fafafa',
transition: 'background-color 300ms cubic-bezier(0.4, 0, 0.2, 1)',
},
},
},
MuiAppBar: {
styleOverrides: {
colorPrimary: {
backgroundColor: '#0fd13f', // Grüne NavBar
color: '#ffffff',
},
},
},
MuiButton: {
styleOverrides: {
root: {
borderRadius: 8,
textTransform: 'none', // Entfernt automatische Großschreibung
fontWeight: 600,
},
contained: {
boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
'&:hover': {
boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
},
},
},
},
MuiCard: {
styleOverrides: {
root: {
borderRadius: 12,
boxShadow: '0 2px 12px rgba(0,0,0,0.08)',
transition: 'box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1)',
'&:hover': {
boxShadow: '0 4px 20px rgba(0,0,0,0.12)',
},
},
},
},
MuiTextField: {
styleOverrides: {
root: {
'& .MuiOutlinedInput-root': {
borderRadius: 8,
},
},
},
},
MuiChip: {
styleOverrides: {
root: {
borderRadius: 16,
},
},
},
MuiPaper: {
styleOverrides: {
root: {
borderRadius: 8,
},
elevation1: {
boxShadow: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',
},
elevation2: {
boxShadow: '0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)',
},
},
},
error: {
main: "#f44336",
light: "#e57373",
dark: "#d32f2f",
contrastText: "#fff",
},
// Benutzerdefinierte Typografie
typography: {
fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
h1: {
fontWeight: 700,
fontSize: '2.5rem',
lineHeight: 1.2,
},
h2: {
fontWeight: 600,
fontSize: '2rem',
lineHeight: 1.3,
},
h3: {
fontWeight: 600,
fontSize: '1.75rem',
lineHeight: 1.3,
},
h4: {
fontWeight: 600,
fontSize: '1.5rem',
lineHeight: 1.4,
},
h5: {
fontWeight: 600,
fontSize: '1.25rem',
lineHeight: 1.4,
},
h6: {
fontWeight: 600,
fontSize: '1rem',
lineHeight: 1.4,
},
body1: {
fontSize: '1rem',
lineHeight: 1.5,
},
body2: {
fontSize: '0.875rem',
lineHeight: 1.4,
},
button: {
fontWeight: 600,
textTransform: 'none',
},
warning: {
main: "#ed6c02",
light: "#ff9800",
dark: "#e65100",
contrastText: "#fff",
},
// Benutzerdefinierte Breakpoints
breakpoints: {
values: {
xs: 0,
sm: 600,
md: 960,
lg: 1280,
xl: 1920,
},
info: {
main: "#0288d1",
light: "#03a9f4",
dark: "#01579b",
contrastText: "#fff",
},
// Angepasste Spacing-Funktion
spacing: 8, // 8px als Basis-Einheit
success: {
main: "#2e7d32",
light: "#4caf50",
dark: "#1b5e20",
contrastText: "#fff",
},
background: {
default: "#fafafa",
paper: "#ffffff",
},
text: {
primary: "#000000",
secondary: "rgba(0, 0, 0, 0.6)",
},
},
// Sanfte Übergänge
transitions: {
duration: {
shortest: 150,
shorter: 200,
short: 250,
standard: 300,
complex: 375,
enteringScreen: 225,
leavingScreen: 195,
},
easing: {
easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)",
easeOut: "cubic-bezier(0.0, 0, 0.2, 1)",
easeIn: "cubic-bezier(0.4, 0, 1, 1)",
sharp: "cubic-bezier(0.4, 0, 0.6, 1)",
},
},
// Verbesserte Komponenten-Overrides
components: {
MuiCssBaseline: {
styleOverrides: {
body: {
backgroundColor: "#fafafa",
transition: "background-color 300ms cubic-bezier(0.4, 0, 0.2, 1)",
},
html: {
backgroundColor: "#fafafa",
transition: "background-color 300ms cubic-bezier(0.4, 0, 0.2, 1)",
},
},
},
MuiAppBar: {
styleOverrides: {
colorPrimary: {
backgroundColor: "#0fd13f", // Grüne NavBar
color: "#ffffff",
},
},
},
MuiButton: {
styleOverrides: {
root: {
borderRadius: 8,
textTransform: "none", // Entfernt automatische Großschreibung
fontWeight: 600,
},
contained: {
boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
"&:hover": {
boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
},
},
},
},
MuiCard: {
styleOverrides: {
root: {
borderRadius: 12,
boxShadow: "0 2px 12px rgba(0,0,0,0.08)",
transition: "box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1)",
"&:hover": {
boxShadow: "0 4px 20px rgba(0,0,0,0.12)",
},
},
},
},
MuiTextField: {
styleOverrides: {
root: {
"& .MuiOutlinedInput-root": {
borderRadius: 8,
},
},
},
},
MuiChip: {
styleOverrides: {
root: {
borderRadius: 16,
},
},
},
MuiPaper: {
styleOverrides: {
root: {
borderRadius: 8,
},
elevation1: {
boxShadow: "0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)",
},
elevation2: {
boxShadow: "0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)",
},
},
},
},
// Benutzerdefinierte Typografie
typography: {
fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
h1: {
fontWeight: 700,
fontSize: "2.5rem",
lineHeight: 1.2,
},
h2: {
fontWeight: 600,
fontSize: "2rem",
lineHeight: 1.3,
},
h3: {
fontWeight: 600,
fontSize: "1.75rem",
lineHeight: 1.3,
},
h4: {
fontWeight: 600,
fontSize: "1.5rem",
lineHeight: 1.4,
},
h5: {
fontWeight: 600,
fontSize: "1.25rem",
lineHeight: 1.4,
},
h6: {
fontWeight: 600,
fontSize: "1rem",
lineHeight: 1.4,
},
body1: {
fontSize: "1rem",
lineHeight: 1.5,
},
body2: {
fontSize: "0.875rem",
lineHeight: 1.4,
},
button: {
fontWeight: 600,
textTransform: "none",
},
},
// Benutzerdefinierte Breakpoints
breakpoints: {
values: {
xs: 0,
sm: 600,
md: 960,
lg: 1280,
xl: 1920,
},
},
// Angepasste Spacing-Funktion
spacing: 8, // 8px als Basis-Einheit
});

100
01-frontend/src/util/ColorUtil.tsx
View File

@@ -1,58 +1,66 @@
export function mapValueToColor(minVal: number, maxVal: number, actualVal: number): string {
const clamped = Math.min(Math.max(actualVal, minVal), maxVal);
export function mapValueToColor(
minVal: number,
maxVal: number,
actualVal: number,
): string {
const clamped = Math.min(Math.max(actualVal, minVal), maxVal);
// Calculate interpolation ratio (0-1)
const ratio = maxVal !== minVal
? (clamped - minVal) / (maxVal - minVal)
: 0;
return hsvDegToHex(120 * ratio);//120° is green, 0° is red
// Calculate interpolation ratio (0-1)
const ratio = maxVal !== minVal ? (clamped - minVal) / (maxVal - minVal) : 0;
return hsvDegToHex(120 * ratio); //120° is green, 0° is red
}
export function getColorFromPercent(percent: string): string {
let perc = Number(percent) / 100
if (perc > 1) {
perc = 2.5;
}
return hsvDegToHex(120 * perc);
let perc = Number(percent) / 100;
if (perc > 1) {
perc = 2.5;
}
return hsvDegToHex(120 * perc);
}
export function hsvDegToHex(h: number): string {
h = Math.max(0, Math.min(360, h));
h = Math.max(0, Math.min(360, h));
const c = 1;
const x = (1 - Math.abs(((h / 60) % 2) - 1));
const c = 1;
const x = 1 - Math.abs(((h / 60) % 2) - 1);
let r, g, b;
if (h < 60) {
r = c;
g = x;
b = 0;
} else if (h < 120) {
r = x;
g = c;
b = 0;
} else if (h < 180) {
r = 0;
g = c;
b = x;
} else if (h < 240) {
r = 0;
g = x;
b = c;
} else if (h < 300) {
r = x;
g = 0;
b = c;
} else {
r = c;
g = 0;
b = x;
}
let r, g, b;
if (h < 60) {
r = c;
g = x;
b = 0;
} else if (h < 120) {
r = x;
g = c;
b = 0;
} else if (h < 180) {
r = 0;
g = c;
b = x;
} else if (h < 240) {
r = 0;
g = x;
b = c;
} else if (h < 300) {
r = x;
g = 0;
b = c;
} else {
r = c;
g = 0;
b = x;
}
// scale to 0-255
const rHex = Math.round(r * 255).toString(16).padStart(2, '0');
const gHex = Math.round(g * 255).toString(16).padStart(2, '0');
const bHex = Math.round(b * 255).toString(16).padStart(2, '0');
// scale to 0-255
const rHex = Math.round(r * 255)
.toString(16)
.padStart(2, "0");
const gHex = Math.round(g * 255)
.toString(16)
.padStart(2, "0");
const bHex = Math.round(b * 255)
.toString(16)
.padStart(2, "0");
return `#${rHex}${gHex}${bHex}`;
return `#${rHex}${gHex}${bHex}`;
}