From 77c3e0b669d6bd3993bf73fdd3881fb02dc1197d Mon Sep 17 00:00:00 2001
From: FlorianSpeicher <flo200538@gmail.com>
Date: Thu, 5 Jun 2025 15:14:33 +0200
Subject: [PATCH] Added Rating Backend Connection and Rating Submit working.

---
 00-backend/datasource/database.sqlite         | Bin 2600960 -> 2600960 bytes
 01-frontend/src/components/Rating.tsx         |   5 +-
 .../src/helper/adminpanel/ItemsInfo.tsx       |  10 ++++
 01-frontend/src/helper/homepage/ItemCard.tsx  |   2 +-
 .../src/helper/productpage/ProductInfo.tsx    |   4 +-
 .../src/helper/productpage/RatingCard.tsx     |   8 ++--
 .../src/helper/productpage/Ratings.tsx        |  44 ++++++++----------
 01-frontend/src/helper/query/Queries.tsx      |  19 ++++++--
 01-frontend/src/pages/AdminPanel.tsx          |  13 +++++-
 9 files changed, 65 insertions(+), 40 deletions(-)
 create mode 100644 01-frontend/src/helper/adminpanel/ItemsInfo.tsx

diff --git a/00-backend/datasource/database.sqlite b/00-backend/datasource/database.sqlite
index 3a21bf7ffa85ceb93e478285fa86f8cd7010d140..670744a6e74a61803ae0f55519c221cb59803950 100644
GIT binary patch
delta 291
zcmW;CEl<Nh0D$3MdmY>OIL0?@u;XJ862OuaK?h=r1ch(bb}VEiIj#b?1c5CIx1i^M
z1bzz+&2K>P2JyIO_&pLs6m`*lYMlFR=P3PojbBd7t{OY)OO4-a;YeK_x+O<cE_|;O
z8J+dJ*H-s(tItdxCq@TR)-(5M)J+2M93Fh^w*+0B_+GV>+vHAPn%g+Pu{ucmSz-r+
z|8}h2LK!~D;!zd?E<8y1C}9F+R8YkvrZ9~eD9oaUIm}}Li&(-kR<MdS)X~5?HqeB|
RCbqDR9kj6fDT}?|<{wT)SQ!8S

delta 190
zcmWN=OAf(M6o6ruQ}xz*mR9RkW-Q@KY``L{!T2NwjTsw|CS8G%?O2FG|1bIU_cqFB
zXzVLGJGOGTJwDgm7IHb=MKe*uDr*!vtkY$KO}5x(hh6sAr$?Uy4mskO6HXa$#yLYq
VTrg(BC0AT?!!1+pzM}j8u>@&oIFSGV

diff --git a/01-frontend/src/components/Rating.tsx b/01-frontend/src/components/Rating.tsx
index 3375529..c767c00 100644
--- a/01-frontend/src/components/Rating.tsx
+++ b/01-frontend/src/components/Rating.tsx
@@ -1,8 +1,7 @@
 type RatingType = {
-    id: string;
     rating: number;
-    text: string;
-    date: string;
+    content: string;
+    timestamp: number;
 };
 
 export default RatingType;
\ No newline at end of file
diff --git a/01-frontend/src/helper/adminpanel/ItemsInfo.tsx b/01-frontend/src/helper/adminpanel/ItemsInfo.tsx
new file mode 100644
index 0000000..296d4a3
--- /dev/null
+++ b/01-frontend/src/helper/adminpanel/ItemsInfo.tsx
@@ -0,0 +1,10 @@
+import { Typography } from "@mui/material";
+
+export default function ItemInfo() {
+
+    return (
+        <Typography >
+            Under construction...
+        </Typography>
+    );
+}
\ No newline at end of file
diff --git a/01-frontend/src/helper/homepage/ItemCard.tsx b/01-frontend/src/helper/homepage/ItemCard.tsx
index 237f2bc..a418120 100644
--- a/01-frontend/src/helper/homepage/ItemCard.tsx
+++ b/01-frontend/src/helper/homepage/ItemCard.tsx
@@ -63,7 +63,7 @@ export default function ItemCard({ item }: { item: Item }) {
                         <Typography gutterBottom variant="h5" component="div">
                             {item.name}
                         </Typography>
-                        <Rating name="half-rating" readOnly defaultValue={item.rating} precision={0.5} />
+                        <Rating name="half-rating" readOnly defaultValue={item.rating /2} precision={0.01} />
                         <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)} €
diff --git a/01-frontend/src/helper/productpage/ProductInfo.tsx b/01-frontend/src/helper/productpage/ProductInfo.tsx
index 98f556c..d64ead6 100644
--- a/01-frontend/src/helper/productpage/ProductInfo.tsx
+++ b/01-frontend/src/helper/productpage/ProductInfo.tsx
@@ -104,9 +104,9 @@ export default function ProductInfo({ item }: { item: Item }) {
                 </Typography>
 
                 <Box display="flex" alignItems="center" gap={1}>
-                    <Rating value={item.rating} precision={0.5} readOnly />
+                    <Rating value={item.rating /2} precision={0.01} readOnly />
                     <Typography variant="body2" color="text.secondary">
-                        {item.rating > 0 ? `(${item.rating} / 5)` : t('noRatingsYet')}
+                        {item.rating > 0 ? `(${item.rating / 2} / 5)` : t('noRatingsYet')}
 
                     </Typography>
                 </Box>
diff --git a/01-frontend/src/helper/productpage/RatingCard.tsx b/01-frontend/src/helper/productpage/RatingCard.tsx
index 76cb921..ae9469b 100644
--- a/01-frontend/src/helper/productpage/RatingCard.tsx
+++ b/01-frontend/src/helper/productpage/RatingCard.tsx
@@ -7,7 +7,7 @@ export default function RatingCard(ratingType: RatingType) {
     const { t } = useTranslation();
 
     const handleClick = () => {
-        console.log(`Clicked on rating with id: ${ratingType.id}`);
+        console.log(`Clicked on rating`);
     }
 
     return (
@@ -16,11 +16,11 @@ export default function RatingCard(ratingType: RatingType) {
                 <CardActionArea onClick={handleClick}>
                     <CardContent>
                         <Typography gutterBottom variant="h5" component="div">
-                            {t('ratingFrom')} {ratingType.date}
+                            {t('ratingFrom')} {new Date(ratingType.timestamp).toLocaleDateString('de-DE')}
                         </Typography>
-                        <Rating name="half-rating" readOnly defaultValue={ratingType.rating} precision={0.5} />
+                        <Rating name="half-rating" readOnly defaultValue={ratingType.rating / 2} precision={0.01} />
                         <Typography variant="body2" sx={{ color: 'text.secondary' }} className="item-description">
-                            {ratingType.text}
+                            {ratingType.content}
                         </Typography>
                     </CardContent>
                 </CardActionArea>
diff --git a/01-frontend/src/helper/productpage/Ratings.tsx b/01-frontend/src/helper/productpage/Ratings.tsx
index 151bbe8..5ff54e4 100644
--- a/01-frontend/src/helper/productpage/Ratings.tsx
+++ b/01-frontend/src/helper/productpage/Ratings.tsx
@@ -1,10 +1,10 @@
 import { Close } from "@mui/icons-material";
 import { Box, Button, Divider, IconButton, Rating, Snackbar, SnackbarCloseReason, TextField, Typography } from "@mui/material";
 import { useQuery } from "@tanstack/react-query";
-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";
 import { useTranslation } from 'react-i18next';
 import RatingType from "../../components/Rating";
-import { submitRating } from "../query/Queries";
+import { fetchRatingList, submitRating } from "../query/Queries";
 import RatingCard from "./RatingCard";
 import RatingSubmitType from "../../components/RatingSubmit";
 
@@ -58,26 +58,22 @@ export default function Ratings({itemId}: {itemId: string}) {
         </React.Fragment>
     );
 
-    const ratings: RatingType[] = [
-        {
-            id: "1",
-            rating: 4.5,
-            text: "Great product!",
-            date: "2023-10-01",
-        },
-        {
-            id: "2",
-            rating: 3.0,
-            text: "Average quality.",
-            date: "2023-10-02",
-        },
-        {
-            id: "3",
-            rating: 5.0,
-            text: "Excellent value for money!",
-            date: "2023-10-03",
-        },
-    ];
+    const { data = [] } = useQuery<RatingType[]>({
+        queryKey: ['fetchRatingList', itemId],
+        queryFn: () => fetchRatingList(itemId),
+        retry: 3, // Versucht es 3-mal erneut
+        retryDelay: 1000, // Wartezeit zwischen den Versuchen (in ms)
+    });
+
+    const ratings:RatingType[] = useMemo(() => data || [], [data]);
+
+    const getRatings = () => {
+        if (ratings.length === 0)
+            return <Typography variant="body1" className="no-ratings">{t('noRatingsYet')}</Typography>;
+        return ratings.map((ratingType: RatingType) => (
+                    <RatingCard {...ratingType} />
+                ))
+    };
 
     return (
         <>
@@ -105,9 +101,7 @@ export default function Ratings({itemId}: {itemId: string}) {
                 <Divider className='contact-divider' />
             </div>
             <Box className="rating-card-box">
-                {ratings.map((ratingType: RatingType) => (
-                    <RatingCard key={ratingType.id} {...ratingType} />
-                ))}
+                {getRatings()}
             </Box>
             <Snackbar
                 open={open}
diff --git a/01-frontend/src/helper/query/Queries.tsx b/01-frontend/src/helper/query/Queries.tsx
index 3ccdc2c..7fbbc88 100644
--- a/01-frontend/src/helper/query/Queries.tsx
+++ b/01-frontend/src/helper/query/Queries.tsx
@@ -14,12 +14,12 @@ export const fetchItemList = async () => {
 };
 
 export const submitRating = async (ratingData: RatingSubmitType) => {
-    const response = await fetch('http://localhost:8085/rating', {
+    const response = await fetch('http://localhost:8085/review?uuid=' + ratingData.articleId + '&rating=' + ratingData.rating * 2, {
         method: 'POST',
         headers: {
-            'Content-Type': 'application/json',
+            'Content-Type': 'text/plain',
         },
-        body: JSON.stringify(ratingData),
+        body: ratingData.content,
     });
 
     if (!response.ok) {
@@ -29,4 +29,15 @@ export const submitRating = async (ratingData: RatingSubmitType) => {
     const data = await response.json();
     console.log("Rating Submitted:", data);
     return data;
-}
\ No newline at end of file
+}
+
+export const fetchRatingList = async (itemId: string) => {
+    const response = await fetch('http://localhost:8085/review/all?uuid=' + itemId);
+    console.log("API Response:", response);
+    if (!response.ok) {
+        throw new Error('Fehler beim Laden der Items');
+    }
+    const data = await response.json();
+    console.log("Fetched Items:", data);
+    return data;
+};
\ No newline at end of file
diff --git a/01-frontend/src/pages/AdminPanel.tsx b/01-frontend/src/pages/AdminPanel.tsx
index d44a48a..3baec57 100644
--- a/01-frontend/src/pages/AdminPanel.tsx
+++ b/01-frontend/src/pages/AdminPanel.tsx
@@ -1,10 +1,11 @@
-import { AccountCircle, QueryStats, ReceiptLong } from "@mui/icons-material";
+import { AccountCircle, Category, QueryStats, ReceiptLong } from "@mui/icons-material";
 import { Box, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Typography } from "@mui/material";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import AccountsInfo from "../helper/adminpanel/AccountsInfo";
 import OrdersInfo from "../helper/adminpanel/OrdersInfo";
 import StatisticsInfo from "../helper/adminpanel/StatisticsInfo";
+import ItemInfo from "../helper/adminpanel/ItemsInfo";
 
 export default function AdminPanel() {
     const { t } = useTranslation();
@@ -24,6 +25,8 @@ export default function AdminPanel() {
                 return <OrdersInfo />;
             case "accounts":
                 return <AccountsInfo />;
+            case "items":
+                return <ItemInfo />;
             default:
                 return <StatisticsInfo />; // Fallback, falls kein gültiger Status
         }
@@ -68,6 +71,14 @@ export default function AdminPanel() {
                                     <ListItemText primary={t("accounts")} />
                                 </ListItemButton>
                             </ListItem>
+                            <ListItem disablePadding>
+                                <ListItemButton onClick={() => handleInfoStatus("items")}>
+                                    <ListItemIcon>
+                                        <Category />
+                                    </ListItemIcon>
+                                    <ListItemText primary={t("items")} />
+                                </ListItemButton>
+                            </ListItem>
                         </List>
                     </nav>
                 </Box>