diff --git a/admin/src/components/API/Landingpage.tsx b/admin/src/components/API/Landingpage.tsx index 0f146b3..3c61d6a 100644 --- a/admin/src/components/API/Landingpage.tsx +++ b/admin/src/components/API/Landingpage.tsx @@ -6,10 +6,11 @@ import { Table, Heading, HStack, - IconButton, + Card, + SimpleGrid, + Button, } from "@chakra-ui/react"; -import { Tooltip } from "@/components/ui/tooltip"; -import { RefreshCcwDot } from "lucide-react"; +import { Lock, LockOpen } from "lucide-react"; import MyAlert from "../myChakra/MyAlert"; import { formatDateTime } from "@/utils/userFuncs"; @@ -23,14 +24,22 @@ type Loan = { loaned_items_name: string[] | string; }; +type Device = { + id: number; + item_name: string; + can_borrow_role: string; + inSafe: number; + entry_created_at: string; +}; + const Landingpage: React.FC = () => { const [isLoading, setIsLoading] = useState(false); const [loans, setLoans] = useState([]); + const [devices, setDevices] = useState([]); const [isError, setIsError] = useState(false); const [errorStatus, setErrorStatus] = useState<"error" | "success">("error"); const [errorMessage, setErrorMessage] = useState(""); const [errorDsc, setErrorDsc] = useState(""); - const [reload, setReload] = useState(false); const setError = ( status: "error" | "success", @@ -45,20 +54,30 @@ const Landingpage: React.FC = () => { }; useEffect(() => { - const fetchLoans = async () => { + const fetchData = async () => { setIsLoading(true); try { - const res = await fetch( - "https://backend.insta.the1s.de/apiV2/allLoans" - ); - const data = await res.json(); - if (Array.isArray(data)) { - setLoans(data); + const loanRes = await fetch("http://localhost:8002/apiV2/allLoans"); + const loanData = await loanRes.json(); + if (Array.isArray(loanData)) { + setLoans(loanData); } else { setError( "error", "Fehler beim Laden", - "Unerwartetes Datenformat erhalten." + "Unerwartetes Datenformat erhalten. (Ausleihen)" + ); + } + + const deviceRes = await fetch("http://localhost:8002/apiV2/allItems"); + const deviceData = await deviceRes.json(); + if (Array.isArray(deviceData)) { + setDevices(deviceData); + } else { + setError( + "error", + "Fehler beim Laden", + "Unerwartetes Datenformat erhalten. (Geräte)" ); } } catch (e) { @@ -71,8 +90,8 @@ const Landingpage: React.FC = () => { setIsLoading(false); } }; - fetchLoans(); - }, [reload]); + fetchData(); + }, []); return ( <> @@ -80,31 +99,6 @@ const Landingpage: React.FC = () => { Matthias-Claudius-Schule Technik - {/* Action toolbar */} - - - setReload(!reload)} - > - - - - - {/* End action toolbar */} - Alle Ausleihen @@ -176,6 +170,62 @@ const Landingpage: React.FC = () => { Keine Ausleihen vorhanden. )} + + + Alle Geräte + + + {/* Responsive Grid mit gleich hohen Karten */} + + {devices.map((device) => ( + + + {device.inSafe ? : } + {device.item_name} + + + Ausleihrolle: {device.can_borrow_role} + + + ))} + + + + Legende: + + + + ); }; diff --git a/backend/routes/apiV2.js b/backend/routes/apiV2.js index 1b81426..b43c02e 100644 --- a/backend/routes/apiV2.js +++ b/backend/routes/apiV2.js @@ -101,4 +101,14 @@ router.get("/allLoans", async (req, res) => { return res.status(500).json({ message: "Failed to fetch loans" }); }); +// Route for API to get ALL items form the database without key +router.get("/allItems", async (req, res) => { + const result = await getItemsFromDatabaseV2(); + if (result.success) { + res.status(200).json(result.data); + } else { + res.status(500).json({ message: "Failed to fetch items" }); + } +}); + export default router;