Matthias-Claudius-Schule/borrow-system
4
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Fix routing and update translations: change landing page route to '/landingpage', update user info dialog, and enhance localization strings.

Browse Source
This commit is contained in:
Theis Gaedigk
2025-11-21 23:31:41 +01:00
parent 238cd9254a
commit c6571033b0
6 changed files with 170 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
FrontendV2/src/App.tsx
View File

@@ -79,7 +79,7 @@ function App() {
<Route element={<ProtectedRoutes />}>
<Route path="/" element={<HomePage />} />
<Route path="/my-loans" element={<MyLoansPage />} />
<Route path="/landing" element={<Landingpage />} />
<Route path="/landingpage" element={<Landingpage />} />
</Route>
<Route path="/login" element={<LoginPage />} />

173
FrontendV2/src/components/Header.tsx
View File

@@ -1,5 +1,4 @@
import {
Badge,
Button,
Flex,
Heading,
@@ -14,6 +13,7 @@ import {
Box,
Avatar,
Card,
Grid,
} from "@chakra-ui/react";
import { PasswordInput } from "@/components/ui/password-input";
import Cookies from "js-cookie";
@@ -28,7 +28,8 @@ import {
LogOut,
CalendarPlus,
MoreVertical,
Flag,
Languages,
Table,
} from "lucide-react";
import { useUserContext } from "@/states/Context";
import { useState } from "react";
@@ -97,6 +98,18 @@ export const Header = () => {
const username = userData.first_name ? userData.first_name : "N/A";
const fullname = userData.first_name + " " + userData.last_name;
const randomColor = [
"gray",
"red",
"orange",
"yellow",
"green",
"teal",
"blue",
"cyan",
"purple",
"pink",
];
const logout = () => {
Cookies.remove("token");
@@ -158,12 +171,12 @@ export const Header = () => {
}
/>
<Menu.Item
value="change-password"
onSelect={() => setPwOpen(true)}
value="landingpage"
onSelect={() => navigate("/landingpage", { replace: true })}
children={
<HStack gap={3}>
<RotateCcwKey size={16} />
<Text as="span">{t("change-password")}</Text>
<Table size={16} />
<Text as="span">{t("landingpage")}</Text>
</HStack>
}
/>
@@ -177,7 +190,7 @@ export const Header = () => {
}}
children={
<HStack gap={3}>
<LifeBuoy size={16} />
<Languages size={16} />
<Text as="span">{t("change-language")}</Text>
</HStack>
}
@@ -244,7 +257,7 @@ export const Header = () => {
size="2xl"
className="tracking-tight text-slate-900 dark:text-slate-100"
>
Home
{t("app-title")}
</Heading>
</Flex>
@@ -253,13 +266,11 @@ export const Header = () => {
{t("greeting")}
<strong>{username}</strong>!
</Text>
<Badge variant="subtle" px={2} py={1} borderRadius="full">
Rolle: {userData?.role ?? "—"}
</Badge>
</HStack>
</Stack>
<HStack>
{/* Avatar: visible on mobile, hidden on desktop (desktop version is in the actions bar) */}
<HStack display={{ base: "flex", md: "none" }}>
<Avatar.Root>
<button
onClick={() => setUserDialog(true)}
@@ -279,6 +290,18 @@ export const Header = () => {
flexWrap="wrap"
display={{ base: "none", md: "flex" }}
>
{/* Desktop avatar, aligned with action buttons */}
<Avatar.Root
colorPalette={randomColor[Math.floor(Math.random() * 10)]}
>
<button
onClick={() => setUserDialog(true)}
style={{ cursor: "pointer" }}
>
<Avatar.Fallback name={fullname} />
</button>
</Avatar.Root>
<Button
colorScheme="teal"
onClick={() => navigate("/", { replace: true })}
@@ -296,10 +319,10 @@ export const Header = () => {
</HStack>
</Button>
<Button variant="ghost" onClick={() => setPwOpen(true)}>
<Button onClick={() => navigate("/landingpage", { replace: true })}>
<HStack gap={2}>
<RotateCcwKey size={18} />
<Text as="span">{t("change-password")}</Text>
<Table size={18} />
<Text as="span">{t("landingpage")}</Text>
</HStack>
</Button>
@@ -313,7 +336,7 @@ export const Header = () => {
}}
>
<HStack gap={2}>
<Flag size={18} />
<Languages size={18} />
<Text as="span">{t("change-language")}</Text>
</HStack>
</Button>
@@ -351,48 +374,84 @@ export const Header = () => {
</HStack>
</Flex>
{/* User Info Dialoge */}
{userDialog && (
<Card.Root maxW="sm">
<Card.Header>
<Card.Title>
{" "}
<Avatar.Root>
<button
onClick={() => setUserDialog(true)}
style={{ cursor: "pointer" }}
>
<Avatar.Fallback name={fullname} />
</button>
</Avatar.Root>
</Card.Title>
<Card.Description>{t("user-info-desc")}</Card.Description>
</Card.Header>
<Card.Body>
<Stack gap="4" w="full">
<Text>
<strong>{t("first-name")}:</strong> {userData.first_name}
</Text>
<Text>
<strong>{t("last-name")}:</strong> {userData.last_name}
</Text>
<Text>
<strong>{t("username")}:</strong> {userData.username}
</Text>
<Text>
<strong>{t("role")}:</strong> {userData.role}
</Text>
<Text>
<strong>{t("admin-status")}:</strong>{" "}
{userData.is_admin ? t("yes") : t("no")}
</Text>
</Stack>
</Card.Body>
<Card.Footer justifyContent="flex-end">
<Button variant="outline" onClick={() => setUserDialog(false)}>
{t("cancel")}
</Button>
</Card.Footer>
</Card.Root>
<Flex
position="fixed"
inset={0}
zIndex={1000}
align="center"
justify="center"
bg="blackAlpha.400"
backdropFilter="blur(6px)"
>
<Card.Root maxW="sm" w="full" mx={4}>
<Card.Header>
<Card.Title>
<Flex justify="center" align="center" w="100%">
<Avatar.Root
size={"2xl"}
colorPalette={randomColor[Math.floor(Math.random() * 10)]}
>
<Avatar.Fallback name={fullname} />
</Avatar.Root>
</Flex>
</Card.Title>
<Card.Description>{t("user-info-desc")}</Card.Description>
</Card.Header>
<Card.Body>
<Stack gap="4" w="full">
<Box as="dl">
<Grid
templateColumns="auto 1fr"
rowGap={2}
columnGap={4}
alignItems="start"
>
<Text as="dt" fontWeight="bold" textAlign="left">
{t("first-name")}:
</Text>
<Text as="dd">{userData.first_name}</Text>
<Text as="dt" fontWeight="bold" textAlign="left">
{t("last-name")}:
</Text>
<Text as="dd">{userData.last_name}</Text>
<Text as="dt" fontWeight="bold" textAlign="left">
{t("username")}:
</Text>
<Text as="dd">{userData.username}</Text>
<Text as="dt" fontWeight="bold" textAlign="left">
{t("role")}:
</Text>
<Text as="dd">{userData.role}</Text>
<Text as="dt" fontWeight="bold" textAlign="left">
{t("admin-status")}:
</Text>
<Text as="dd">
{userData.is_admin ? t("yes") : t("no")}
</Text>
</Grid>
</Box>
<Button variant="solid" onClick={() => setPwOpen(true)}>
<HStack gap={2}>
<RotateCcwKey size={18} />
<Text as="span">{t("change-password")}</Text>
</HStack>
</Button>
</Stack>
</Card.Body>
<Card.Footer justifyContent="flex-end">
<Button variant="outline" onClick={() => setUserDialog(false)}>
{t("cancel")}
</Button>
</Card.Footer>
</Card.Root>
</Flex>
)}
{/* Passwort-Dialog (kontrolliert) */}

32
FrontendV2/src/pages/Landingpage.tsx
View File

@@ -10,11 +10,11 @@ import {
SimpleGrid,
Button,
} from "@chakra-ui/react";
import { Lock, LockOpen } from "lucide-react";
import MyAlert from "@/components/myChakra/MyAlert";
import { useTranslation } from "react-i18next";
import { API_BASE } from "@/config/api.config";
import Cookies from "js-cookie";
import { useNavigate } from "react-router-dom";
export const formatDateTime = (value: string | null | undefined) => {
if (!value) return "N/A";
@@ -38,7 +38,7 @@ type Device = {
id: number;
item_name: string;
can_borrow_role: string;
inSafe: number;
in_safe: number;
entry_created_at: string;
last_borrowed_person: string | null;
currently_borrowing: string | null;
@@ -46,6 +46,7 @@ type Device = {
const Landingpage: React.FC = () => {
const { t } = useTranslation();
const navigate = useNavigate();
const [isLoading, setIsLoading] = useState(false);
const [loans, setLoans] = useState<Loan[]>([]);
@@ -119,6 +120,10 @@ const Landingpage: React.FC = () => {
Matthias-Claudius-Schule Technik
</Heading>
<Button onClick={() => navigate("/", { replace: true })}>
{t("back")}
</Button>
<Heading as="h2" size="md" mb={4}>
{t("all-loans")}
</Heading>
@@ -158,10 +163,10 @@ const Landingpage: React.FC = () => {
<strong>{t("rented-items")}</strong>
</Table.ColumnHeader>
<Table.ColumnHeader>
<strong>{t("return-date")}</strong>
<strong>{t("take-date")}</strong>
</Table.ColumnHeader>
<Table.ColumnHeader>
<strong>{t("take-date")}</strong>
<strong>{t("return-date")}</strong>
</Table.ColumnHeader>
</Table.Row>
</Table.Header>
@@ -177,8 +182,8 @@ const Landingpage: React.FC = () => {
? loan.loaned_items_name.join(", ")
: loan.loaned_items_name}
</Table.Cell>
<Table.Cell>{formatDateTime(loan.returned_date)}</Table.Cell>
<Table.Cell>{formatDateTime(loan.take_date)}</Table.Cell>
<Table.Cell>{formatDateTime(loan.returned_date)}</Table.Cell>
</Table.Row>
))}
</Table.Body>
@@ -201,24 +206,25 @@ const Landingpage: React.FC = () => {
<Card.Root
key={device.id}
size="sm"
bg={device.inSafe ? "green" : "red"}
bg={device.in_safe ? "green" : "red"}
h="full"
minH="100px"
>
<Card.Header>
{device.inSafe ? <LockOpen size={16} /> : <Lock size={16} />}
<Heading size="md">{device.item_name}</Heading>
<Heading size="md">
<strong>{device.item_name}</strong>
</Heading>
</Card.Header>
<Card.Body color="fg.muted">
<Card.Body>
<Text>
{t("rent-role")}: {device.can_borrow_role}
<strong>{t("role")}</strong>: {device.can_borrow_role}
</Text>
<Text>
{t("last-borrowed-person")}:{" "}
<strong>{t("last-borrowed-person")}</strong>:{" "}
{device.last_borrowed_person || "N/A"}
</Text>
<Text>
{t("currently-borrowed-by")}:{" "}
<strong>{t("currently-borrowed-by")}</strong>:{" "}
{device.currently_borrowing || "N/A"}
</Text>
</Card.Body>
@@ -238,7 +244,6 @@ const Landingpage: React.FC = () => {
borderRadius="full"
>
<HStack gap={2}>
<LockOpen size={16} />
<Text>{t("in-locker")}</Text>
</HStack>
</Button>
@@ -251,7 +256,6 @@ const Landingpage: React.FC = () => {
borderRadius="full"
>
<HStack gap={2}>
<Lock size={16} />
<Text>{t("not-in-locker")}</Text>
</HStack>
</Button>

12
FrontendV2/src/utils/i18n/locales/de/de.json
View File

@@ -62,5 +62,15 @@
"change-language": "Sprache ändern",
"timezone-info": "Die angezeigten Daten und Uhrzeiten werden in deutscher Zeitzone dargestellt und müssen auch so eingegeben werden.",
"optional-note": "Optionale Notiz",
"note": "Notiz"
"note": "Notiz",
"user-info-desc": "Hier können Sie Ihre persönlichen Informationen einsehen und ändern.",
"role": "Rolle",
"admin-status": "Admin-Status",
"first-name": "Vorname",
"last-name": "Nachname",
"app-title": "Ausleihsystem",
"last-borrowed-person": "Zuletzt ausgeliehen von",
"currently-borrowed-by": "Derzeit ausgeliehen von",
"back": "Zurückgehen",
"landingpage": "Übersichtsseite"
}

12
FrontendV2/src/utils/i18n/locales/en/en.json
View File

@@ -62,5 +62,15 @@
"change-language": "Change language",
"timezone-info": "The displayed dates and times are shown in Berlin timezone and must also be entered as such.",
"optional-note": "Optional note",
"note": "Note"
"note": "Note",
"user-info-desc": "Here you can view and edit your personal information.",
"role": "Role",
"admin-status": "Admin status",
"first-name": "First name",
"last-name": "Last name",
"app-title": "Borrow System",
"last-borrowed-person": "Last borrowed by",
"currently-borrowed-by": "Currently borrowed by",
"back": "Go back",
"landingpage": "Overview page"
}

26
docker-compose.yml
View File

@@ -48,19 +48,19 @@ services:
- mysql_v2
restart: unless-stopped
mysql:
container_name: borrow_system-mysql
image: mysql:8.0
restart: unless-stopped
environment:
MYSQL_ROOT_PASSWORD: ${DB_PASSWORD}
MYSQL_DATABASE: borrow_system
TZ: Europe/Berlin
volumes:
- mysql-data:/var/lib/mysql
- ./mysql-timezone.cnf:/etc/mysql/conf.d/timezone.cnf:ro
ports:
- "3309:3306"
# mysql:
# container_name: borrow_system-mysql
# image: mysql:8.0
# restart: unless-stopped
# environment:
# MYSQL_ROOT_PASSWORD: ${DB_PASSWORD}
# MYSQL_DATABASE: borrow_system
# TZ: Europe/Berlin
# volumes:
# - mysql-data:/var/lib/mysql
# - ./mysql-timezone.cnf:/etc/mysql/conf.d/timezone.cnf:ro
# ports:
# - "3309:3306"
mysql_v2:
container_name: borrow_system-mysql-v2