Compare commits
10 Commits
cc7c024892
...
08104d32db
| Author | SHA1 | Date | |
|---|---|---|---|
| 08104d32db | |||
| 1fa8b4a9a7 | |||
| 3ba3c1c0cb | |||
| ee54d51f8b | |||
| a8dab549af | |||
| 06976f7972 | |||
| 977a6c1b16 | |||
| 38c647c62f | |||
| 757b316b49 | |||
| d05e9ab3ee |
@@ -12,7 +12,7 @@ import { triggerLogoutAtom } from "@/states/Atoms";
|
||||
import { MyLoansPage } from "./pages/MyLoansPage";
|
||||
import Landingpage from "./pages/Landingpage";
|
||||
import { changeLanguage } from "i18next";
|
||||
import { Box, Flex } from "@chakra-ui/react";
|
||||
import { Flex } from "@chakra-ui/react";
|
||||
import { Footer } from "./components/footer/Footer";
|
||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||
import { API_BASE } from "@/config/api.config";
|
||||
@@ -72,8 +72,8 @@ function App() {
|
||||
|
||||
return (
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<Flex direction="column" minH="100vh">
|
||||
<Box as="main" flex="1">
|
||||
<Flex direction="column" minH="100dvh">
|
||||
<Flex as="main" flex="1" direction="column">
|
||||
<UserContext.Provider value={user}>
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
@@ -88,7 +88,7 @@ function App() {
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
</UserContext.Provider>
|
||||
</Box>
|
||||
</Flex>
|
||||
<Footer />
|
||||
</Flex>
|
||||
</QueryClientProvider>
|
||||
|
||||
@@ -1,50 +0,0 @@
|
||||
{
|
||||
"title": "Changelog",
|
||||
"items": [
|
||||
{
|
||||
"version": "v2.1.0",
|
||||
"date": "2025-10-24",
|
||||
"changes": [
|
||||
{
|
||||
"type": "Hinzugefügt",
|
||||
"text": [
|
||||
"Neue Changelog-Komponente mit zentriertem Layout.",
|
||||
"Unterstützung für mehrsprachige Einträge (Englisch und Deutsch)."
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "Verbessert",
|
||||
"text": [
|
||||
"Performance-Optimierungen beim Laden der Listenansichten.",
|
||||
"Verbesserte Barrierefreiheit durch ARIA-Attribute."
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "Behoben",
|
||||
"text": [
|
||||
"Fehler bei der Datumsauswahl im Safari-Browser.",
|
||||
"Anzeigeprobleme bei hohen DPI-Einstellungen."
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"version": "v2.0.3",
|
||||
"date": "2025-10-10",
|
||||
"changes": [
|
||||
{
|
||||
"type": "Geändert",
|
||||
"text": [
|
||||
"Standard-Timeout für API-Requests auf 10s erhöht."
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "Sicherheit",
|
||||
"text": [
|
||||
"Abhängigkeiten aktualisiert (kritische CVEs behoben)."
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -1,263 +0,0 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
|
||||
const STORAGE_KEY = "changelog";
|
||||
|
||||
type ChangeType =
|
||||
| "Hinzugefügt"
|
||||
| "Geändert"
|
||||
| "Behoben"
|
||||
| "Entfernt"
|
||||
| "Verbessert"
|
||||
| "Sicherheit"
|
||||
| "Veraltet"
|
||||
| string;
|
||||
|
||||
type ChangeEntry = {
|
||||
type: ChangeType;
|
||||
text: string | string[]; // aus localStorage kann es eine Liste sein
|
||||
};
|
||||
|
||||
type ChangelogItem = {
|
||||
version?: string;
|
||||
date: string;
|
||||
changes: ChangeEntry[];
|
||||
};
|
||||
|
||||
type StoredChangelog = {
|
||||
title: string;
|
||||
items: ChangelogItem[];
|
||||
};
|
||||
|
||||
const typeStyles: Record<string, string> = {
|
||||
Hinzugefügt:
|
||||
"bg-emerald-500/15 text-emerald-300 ring-1 ring-inset ring-emerald-500/30",
|
||||
Geändert: "bg-blue-500/15 text-blue-300 ring-1 ring-inset ring-blue-500/30",
|
||||
Behoben: "bg-amber-500/15 text-amber-300 ring-1 ring-inset ring-amber-500/30",
|
||||
Entfernt: "bg-rose-500/15 text-rose-300 ring-1 ring-inset ring-rose-500/30",
|
||||
Verbessert:
|
||||
"bg-indigo-500/15 text-indigo-300 ring-1 ring-inset ring-indigo-500/30",
|
||||
Sicherheit: "bg-red-500/15 text-red-300 ring-1 ring-inset ring-red-500/30",
|
||||
Veraltet: "bg-zinc-700/30 text-zinc-300 ring-1 ring-inset ring-zinc-600/40",
|
||||
};
|
||||
|
||||
export default function Changelog() {
|
||||
const [open, setOpen] = useState(true);
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const [data, setData] = useState<StoredChangelog | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const cardRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
useEffect(() => setMounted(true), []);
|
||||
|
||||
const loadFromStorage = () => {
|
||||
try {
|
||||
setError(null);
|
||||
const raw =
|
||||
typeof window !== "undefined"
|
||||
? localStorage.getItem(STORAGE_KEY)
|
||||
: null;
|
||||
if (!raw) {
|
||||
setData(null);
|
||||
return;
|
||||
}
|
||||
const parsed = JSON.parse(raw) as StoredChangelog;
|
||||
if (!parsed || !Array.isArray(parsed.items)) {
|
||||
throw new Error("Ungültiges Format");
|
||||
}
|
||||
setData(parsed);
|
||||
} catch (e) {
|
||||
setError("Changelog konnte nicht aus localStorage geladen werden.");
|
||||
setData(null);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadFromStorage();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const onKey = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape") setOpen(false);
|
||||
};
|
||||
const onClickOutside = (e: MouseEvent) => {
|
||||
if (cardRef.current && !cardRef.current.contains(e.target as Node)) {
|
||||
setOpen(false);
|
||||
}
|
||||
};
|
||||
const onStorage = (e: StorageEvent) => {
|
||||
if (e.key === STORAGE_KEY) loadFromStorage();
|
||||
};
|
||||
window.addEventListener("keydown", onKey);
|
||||
document.addEventListener("mousedown", onClickOutside);
|
||||
window.addEventListener("storage", onStorage);
|
||||
return () => {
|
||||
window.removeEventListener("keydown", onKey);
|
||||
document.removeEventListener("mousedown", onClickOutside);
|
||||
window.removeEventListener("storage", onStorage);
|
||||
};
|
||||
}, []);
|
||||
|
||||
if (!open) return null;
|
||||
|
||||
const title = data?.title ?? "Changelog";
|
||||
const items = data?.items ?? [];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-zinc-950 bg-[radial-gradient(60%_60%_at_50%_0%,rgba(99,102,241,0.12),rgba(24,24,27,0))] flex items-center justify-center p-6">
|
||||
<div
|
||||
ref={cardRef}
|
||||
className={[
|
||||
"relative w-full max-w-6xl transition-all duration-300 ease-out",
|
||||
mounted
|
||||
? "opacity-100 translate-y-0 scale-100"
|
||||
: "opacity-0 translate-y-1 scale-[0.99]",
|
||||
].join(" ")}
|
||||
aria-live="polite"
|
||||
>
|
||||
{/* Gradient border wrapper */}
|
||||
<div className="rounded-2xl p-[1px] bg-gradient-to-b from-zinc-700/60 via-zinc-700/20 to-zinc-800/60 shadow-2xl">
|
||||
{/* Card */}
|
||||
<div className="relative rounded-[calc(theme(borderRadius.2xl)-1px)] border border-zinc-800/70 bg-zinc-900/70 supports-[backdrop-filter]:bg-zinc-900/60 backdrop-blur-xl ring-1 ring-white/10">
|
||||
{/* Accent top line */}
|
||||
<div className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-indigo-500/40 to-transparent" />
|
||||
|
||||
{/* Close button */}
|
||||
<button
|
||||
aria-label="Changelog schließen"
|
||||
onClick={() => setOpen(false)}
|
||||
className="absolute right-3 top-3 inline-flex h-9 w-9 items-center justify-center rounded-md text-zinc-400 hover:text-zinc-100 hover:bg-zinc-800/60 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/70 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-900 transition"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
className="h-5 w-5"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth={1.8}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M6 6l12 12M18 6L6 18" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{/* Header */}
|
||||
<header className="px-10 pt-8 pb-6 border-b border-zinc-800/70">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="inline-flex h-9 w-9 items-center justify-center rounded-lg bg-indigo-500/15 text-indigo-300 ring-1 ring-inset ring-indigo-500/30">
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
className="h-5 w-5"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth={1.6}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-[30px] leading-8 font-semibold text-zinc-100 tracking-[-0.01em]">
|
||||
{title}
|
||||
</h1>
|
||||
<p className="text-sm text-zinc-400">
|
||||
Aktuelle Änderungen und Updates
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Body */}
|
||||
<div className="relative max-h-[78vh] overflow-y-auto">
|
||||
<div className="absolute pointer-events-none inset-x-0 top-0 h-8 bg-gradient-to-b from-zinc-900/70 to-transparent" />
|
||||
<div className="absolute pointer-events-none inset-x-0 bottom-0 h-10 bg-gradient-to-t from-zinc-900/80 to-transparent" />
|
||||
|
||||
{error && (
|
||||
<div className="px-10 py-8">
|
||||
<div className="rounded-lg border border-red-900/40 bg-red-900/10 px-4 py-3 text-sm text-red-300">
|
||||
{error}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!error && items.length === 0 && (
|
||||
<div className="px-10 py-16 text-center">
|
||||
<p className="text-zinc-400">
|
||||
Kein Changelog im localStorage gefunden (Key: {STORAGE_KEY}
|
||||
).
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<ul className="divide-y divide-zinc-800/70">
|
||||
{items.map((entry, idx) => (
|
||||
<li
|
||||
key={`${entry.version ?? entry.date}-${idx}`}
|
||||
className="px-10 py-8"
|
||||
>
|
||||
{/* Kopfzeile je Release */}
|
||||
<div className="flex flex-wrap items-baseline gap-x-4 gap-y-2">
|
||||
{entry.version && (
|
||||
<span className="inline-flex items-center rounded-md bg-gradient-to-b from-zinc-100 to-zinc-300 text-zinc-900 px-3 py-0.5 text-sm font-semibold shadow-sm">
|
||||
{entry.version}
|
||||
</span>
|
||||
)}
|
||||
<time
|
||||
className="text-sm text-zinc-400"
|
||||
dateTime={entry.date}
|
||||
>
|
||||
{new Date(entry.date).toLocaleDateString("de-DE", {
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "2-digit",
|
||||
})}
|
||||
</time>
|
||||
</div>
|
||||
|
||||
{/* Zweispaltiges Layout: Typ links, Text rechts (mit schöner Leselänge) */}
|
||||
<dl
|
||||
role="list"
|
||||
className="mt-6 grid grid-cols-1 gap-x-8 gap-y-3 md:grid-cols-[max-content_1fr]"
|
||||
>
|
||||
{entry.changes.map((c, i) => (
|
||||
<div key={i} className="contents">
|
||||
<dt className="md:w-44 md:justify-end md:text-right">
|
||||
<span
|
||||
className={`inline-flex items-center rounded-md px-2 py-0.5 text-[11px] font-medium ${
|
||||
typeStyles[c.type] ??
|
||||
"bg-zinc-700/30 text-zinc-300 ring-1 ring-inset ring-zinc-600/40"
|
||||
}`}
|
||||
>
|
||||
{c.type}
|
||||
</span>
|
||||
</dt>
|
||||
|
||||
<dd className="max-w-[74ch] text-[15px] leading-7 text-zinc-200 tracking-[0.005em]">
|
||||
{Array.isArray(c.text) ? (
|
||||
<ul className="ml-4 list-disc marker:text-zinc-500/70 space-y-1.5">
|
||||
{c.text.map((t, k) => (
|
||||
<li key={k} className="break-words">
|
||||
{t}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : (
|
||||
<p className="break-words">{c.text}</p>
|
||||
)}
|
||||
</dd>
|
||||
</div>
|
||||
))}
|
||||
</dl>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* soft bottom glow */}
|
||||
<div className="pointer-events-none absolute inset-x-12 -bottom-4 h-8 blur-2xl bg-indigo-600/20 rounded-full" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -9,10 +9,9 @@ export const Footer = () => {
|
||||
as="footer"
|
||||
py={4}
|
||||
textAlign="center"
|
||||
position="fixed"
|
||||
bottom="0"
|
||||
left="0"
|
||||
right="0"
|
||||
width="100%"
|
||||
flexShrink={0}
|
||||
fontSize="sm"
|
||||
>
|
||||
Made with ❤️ by Theis Gaedigk - Class of 2019 at MCS-Bochum
|
||||
<br />
|
||||
|
||||
@@ -7,7 +7,6 @@ import Cookies from "js-cookie";
|
||||
import { Navigate, useNavigate, useLocation } from "react-router-dom";
|
||||
import { PasswordInput } from "@/components/ui/password-input";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Footer } from "@/components/footer/Footer";
|
||||
import { API_BASE } from "@/config/api.config";
|
||||
|
||||
export const LoginPage = () => {
|
||||
@@ -71,7 +70,7 @@ export const LoginPage = () => {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center p-4">
|
||||
<div className="flex flex-1 items-center justify-center p-4">
|
||||
<form onSubmit={(e) => e.preventDefault()}>
|
||||
<Card.Root maxW="sm">
|
||||
<Card.Header>
|
||||
@@ -115,7 +114,6 @@ export const LoginPage = () => {
|
||||
</Card.Footer>
|
||||
</Card.Root>
|
||||
</form>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -3,7 +3,7 @@ import { API_BASE } from "@/config/api.config";
|
||||
|
||||
export const getBorrowableItems = async (
|
||||
startDate: string,
|
||||
endDate: string
|
||||
endDate: string,
|
||||
) => {
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/api/loans/borrowable-items`, {
|
||||
@@ -22,7 +22,7 @@ export const getBorrowableItems = async (
|
||||
status: "error",
|
||||
title: "Server error",
|
||||
description:
|
||||
"Ein Fehler ist auf dem Server aufgetreten. Manchmal hilft es, die Seite neu zu laden.",
|
||||
"An error occurred on the server. Sometimes reloading the page helps. Otherwise, please contact the administrator.",
|
||||
};
|
||||
}
|
||||
|
||||
@@ -48,7 +48,7 @@ export const createLoan = async (
|
||||
itemIds: number[],
|
||||
startDate: string,
|
||||
endDate: string,
|
||||
note: string | null
|
||||
note: string | null,
|
||||
) => {
|
||||
const response = await fetch(`${API_BASE}/api/loans/createLoan`, {
|
||||
method: "POST",
|
||||
|
||||
@@ -84,6 +84,7 @@
|
||||
"contact": "Kontakt",
|
||||
"take": "Abholen",
|
||||
"return": "Zurückgeben",
|
||||
"serverError": "Serverfehler. Bitte versuchen Sie es später erneut, oder laden Sie die Seite neu.",
|
||||
"take-loan-success": "Ausleihe erfolgreich abgeholt",
|
||||
"return-loan-success": "Ausleihe erfolgreich zurückgegeben",
|
||||
"network-error": "Netzwerkfehler. Kontaktieren Sie den Administrator.",
|
||||
|
||||
@@ -82,6 +82,7 @@
|
||||
"contactPage_messagePlaceholder": "Enter your message here...",
|
||||
"contactPage_messageErrorText": "This field cannot be empty.",
|
||||
"contact": "Contact",
|
||||
"serverError": "Server error. Please try again later, or refresh the page.",
|
||||
"take": "Take",
|
||||
"return": "Return",
|
||||
"take-loan-success": "Loan taken successfully",
|
||||
|
||||
@@ -3,6 +3,7 @@ import { useState } from "react";
|
||||
import { loginFunc } from "@/utils/loginUser";
|
||||
import MyAlert from "../components/myChakra/MyAlert";
|
||||
import { Button, Card, Field, Input, Stack } from "@chakra-ui/react";
|
||||
import { PasswordInput } from "@/components/ui/password-input";
|
||||
|
||||
const Login: React.FC<{ onSuccess: () => void }> = ({ onSuccess }) => {
|
||||
const [username, setUsername] = useState("");
|
||||
@@ -43,8 +44,7 @@ const Login: React.FC<{ onSuccess: () => void }> = ({ onSuccess }) => {
|
||||
</Field.Root>
|
||||
<Field.Root>
|
||||
<Field.Label>password</Field.Label>
|
||||
<Input
|
||||
type="password"
|
||||
<PasswordInput
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
/>
|
||||
|
||||
159
admin/src/components/ui/password-input.tsx
Normal file
159
admin/src/components/ui/password-input.tsx
Normal file
@@ -0,0 +1,159 @@
|
||||
"use client"
|
||||
|
||||
import type {
|
||||
ButtonProps,
|
||||
GroupProps,
|
||||
InputProps,
|
||||
StackProps,
|
||||
} from "@chakra-ui/react"
|
||||
import {
|
||||
Box,
|
||||
HStack,
|
||||
IconButton,
|
||||
Input,
|
||||
InputGroup,
|
||||
Stack,
|
||||
mergeRefs,
|
||||
useControllableState,
|
||||
} from "@chakra-ui/react"
|
||||
import * as React from "react"
|
||||
import { LuEye, LuEyeOff } from "react-icons/lu"
|
||||
|
||||
export interface PasswordVisibilityProps {
|
||||
/**
|
||||
* The default visibility state of the password input.
|
||||
*/
|
||||
defaultVisible?: boolean
|
||||
/**
|
||||
* The controlled visibility state of the password input.
|
||||
*/
|
||||
visible?: boolean
|
||||
/**
|
||||
* Callback invoked when the visibility state changes.
|
||||
*/
|
||||
onVisibleChange?: (visible: boolean) => void
|
||||
/**
|
||||
* Custom icons for the visibility toggle button.
|
||||
*/
|
||||
visibilityIcon?: { on: React.ReactNode; off: React.ReactNode }
|
||||
}
|
||||
|
||||
export interface PasswordInputProps
|
||||
extends InputProps,
|
||||
PasswordVisibilityProps {
|
||||
rootProps?: GroupProps
|
||||
}
|
||||
|
||||
export const PasswordInput = React.forwardRef<
|
||||
HTMLInputElement,
|
||||
PasswordInputProps
|
||||
>(function PasswordInput(props, ref) {
|
||||
const {
|
||||
rootProps,
|
||||
defaultVisible,
|
||||
visible: visibleProp,
|
||||
onVisibleChange,
|
||||
visibilityIcon = { on: <LuEye />, off: <LuEyeOff /> },
|
||||
...rest
|
||||
} = props
|
||||
|
||||
const [visible, setVisible] = useControllableState({
|
||||
value: visibleProp,
|
||||
defaultValue: defaultVisible || false,
|
||||
onChange: onVisibleChange,
|
||||
})
|
||||
|
||||
const inputRef = React.useRef<HTMLInputElement>(null)
|
||||
|
||||
return (
|
||||
<InputGroup
|
||||
endElement={
|
||||
<VisibilityTrigger
|
||||
disabled={rest.disabled}
|
||||
onPointerDown={(e) => {
|
||||
if (rest.disabled) return
|
||||
if (e.button !== 0) return
|
||||
e.preventDefault()
|
||||
setVisible(!visible)
|
||||
}}
|
||||
>
|
||||
{visible ? visibilityIcon.off : visibilityIcon.on}
|
||||
</VisibilityTrigger>
|
||||
}
|
||||
{...rootProps}
|
||||
>
|
||||
<Input
|
||||
{...rest}
|
||||
ref={mergeRefs(ref, inputRef)}
|
||||
type={visible ? "text" : "password"}
|
||||
/>
|
||||
</InputGroup>
|
||||
)
|
||||
})
|
||||
|
||||
const VisibilityTrigger = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
function VisibilityTrigger(props, ref) {
|
||||
return (
|
||||
<IconButton
|
||||
tabIndex={-1}
|
||||
ref={ref}
|
||||
me="-2"
|
||||
aspectRatio="square"
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
height="calc(100% - {spacing.2})"
|
||||
aria-label="Toggle password visibility"
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
},
|
||||
)
|
||||
|
||||
interface PasswordStrengthMeterProps extends StackProps {
|
||||
max?: number
|
||||
value: number
|
||||
}
|
||||
|
||||
export const PasswordStrengthMeter = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
PasswordStrengthMeterProps
|
||||
>(function PasswordStrengthMeter(props, ref) {
|
||||
const { max = 4, value, ...rest } = props
|
||||
|
||||
const percent = (value / max) * 100
|
||||
const { label, colorPalette } = getColorPalette(percent)
|
||||
|
||||
return (
|
||||
<Stack align="flex-end" gap="1" ref={ref} {...rest}>
|
||||
<HStack width="full" {...rest}>
|
||||
{Array.from({ length: max }).map((_, index) => (
|
||||
<Box
|
||||
key={index}
|
||||
height="1"
|
||||
flex="1"
|
||||
rounded="sm"
|
||||
data-selected={index < value ? "" : undefined}
|
||||
layerStyle="fill.subtle"
|
||||
colorPalette="gray"
|
||||
_selected={{
|
||||
colorPalette,
|
||||
layerStyle: "fill.solid",
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</HStack>
|
||||
{label && <HStack textStyle="xs">{label}</HStack>}
|
||||
</Stack>
|
||||
)
|
||||
})
|
||||
|
||||
function getColorPalette(percent: number) {
|
||||
switch (true) {
|
||||
case percent < 33:
|
||||
return { label: "Low", colorPalette: "red" }
|
||||
case percent < 66:
|
||||
return { label: "Medium", colorPalette: "orange" }
|
||||
default:
|
||||
return { label: "High", colorPalette: "green" }
|
||||
}
|
||||
}
|
||||
@@ -1,10 +1,11 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
"target": "ESNext",
|
||||
"target": "ES2022",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"types": ["vite/client"],
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
@@ -23,13 +24,10 @@
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true,
|
||||
|
||||
/* Chakra / Pfad Aliases */
|
||||
"baseUrl": ".",
|
||||
/* Path aliases */
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
},
|
||||
|
||||
"forceConsistentCasingInFileNames": true
|
||||
}
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
|
||||
@@ -22,7 +22,7 @@ export const getItemsFromDatabaseV2 = async () => {
|
||||
export const getLoanByCodeV2 = async (loan_code) => {
|
||||
const [result] = await pool.query(
|
||||
"SELECT username, returned_date, take_date, lockers FROM loans WHERE loan_code = ?;",
|
||||
[loan_code]
|
||||
[loan_code],
|
||||
);
|
||||
if (result.length > 0) {
|
||||
return { success: true, data: result[0] };
|
||||
@@ -33,7 +33,7 @@ export const getLoanByCodeV2 = async (loan_code) => {
|
||||
export const changeInSafeStateV2 = async (itemId) => {
|
||||
const [result] = await pool.query(
|
||||
"UPDATE items SET in_safe = NOT in_safe WHERE id = ?",
|
||||
[itemId]
|
||||
[itemId],
|
||||
);
|
||||
if (result.affectedRows > 0) {
|
||||
return { success: true };
|
||||
@@ -42,50 +42,62 @@ export const changeInSafeStateV2 = async (itemId) => {
|
||||
};
|
||||
|
||||
export const setReturnDateV2 = async (loanCode) => {
|
||||
const [items] = await pool.query(
|
||||
"SELECT loaned_items_id FROM loans WHERE loan_code = ?",
|
||||
[loanCode]
|
||||
);
|
||||
try {
|
||||
const [items] = await pool.query(
|
||||
"SELECT loaned_items_id, username FROM loans WHERE loan_code = ?",
|
||||
[loanCode],
|
||||
);
|
||||
|
||||
const [owner] = await pool.query(
|
||||
"SELECT username FROM loans WHERE loan_code = ?",
|
||||
[loanCode]
|
||||
);
|
||||
if (items.length === 0)
|
||||
return { success: false, message: "No items found for loan" };
|
||||
|
||||
if (items.length === 0) return { success: false };
|
||||
const itemIds = Array.isArray(items[0].loaned_items_id)
|
||||
? items[0].loaned_items_id
|
||||
: JSON.parse(items[0].loaned_items_id || "[]");
|
||||
|
||||
const itemIds = Array.isArray(items[0].loaned_items_id)
|
||||
? items[0].loaned_items_id
|
||||
: JSON.parse(items[0].loaned_items_id || "[]");
|
||||
const [result] = await pool.query(
|
||||
"UPDATE loans SET returned_date = NOW() WHERE loan_code = ? AND returned_date IS NULL",
|
||||
[loanCode],
|
||||
);
|
||||
|
||||
const [setItemStates] = await pool.query(
|
||||
"UPDATE items SET in_safe = 1, currently_borrowing = NULL, last_borrowed_person = (?) WHERE id IN (?)",
|
||||
[owner[0].username, itemIds]
|
||||
);
|
||||
if (result.affectedRows === 0) return { success: false };
|
||||
|
||||
const [result] = await pool.query(
|
||||
"UPDATE loans SET returned_date = NOW() WHERE loan_code = ?",
|
||||
[loanCode]
|
||||
);
|
||||
if (itemIds.length > 0) {
|
||||
await pool.query(
|
||||
"UPDATE items SET in_safe = 1, currently_borrowing = NULL, last_borrowed_person = ? WHERE id IN (?)",
|
||||
[items[0].username, itemIds],
|
||||
);
|
||||
}
|
||||
|
||||
if (result.affectedRows > 0 && setItemStates.affectedRows > 0) {
|
||||
return { success: true };
|
||||
return { success: true, data: { returned: true } };
|
||||
} catch (error) {
|
||||
console.error("setReturnDateV2 error:", error);
|
||||
return { success: false, message: "Failed to set return date" };
|
||||
}
|
||||
return { success: false };
|
||||
};
|
||||
|
||||
export const setTakeDateV2 = async (loanCode) => {
|
||||
const [isTaken] = await pool.query(
|
||||
"SELECT take_date FROM loans WHERE loan_code = ?",
|
||||
[loanCode],
|
||||
);
|
||||
|
||||
if (isTaken.length === 0 || isTaken[0].take_date !== null) {
|
||||
return { success: false, message: "Loan not found or already taken" };
|
||||
}
|
||||
|
||||
const [items] = await pool.query(
|
||||
"SELECT loaned_items_id FROM loans WHERE loan_code = ?",
|
||||
[loanCode]
|
||||
[loanCode],
|
||||
);
|
||||
|
||||
const [owner] = await pool.query(
|
||||
"SELECT username FROM loans WHERE loan_code = ?",
|
||||
[loanCode]
|
||||
[loanCode],
|
||||
);
|
||||
|
||||
if (items.length === 0) return { success: false };
|
||||
if (items.length === 0)
|
||||
return { success: false, message: "No items found for loan" };
|
||||
|
||||
const itemIds = Array.isArray(items[0].loaned_items_id)
|
||||
? items[0].loaned_items_id
|
||||
@@ -93,18 +105,18 @@ export const setTakeDateV2 = async (loanCode) => {
|
||||
|
||||
const [setItemStates] = await pool.query(
|
||||
"UPDATE items SET in_safe = 0, currently_borrowing = (?) WHERE id IN (?)",
|
||||
[owner[0].username, itemIds]
|
||||
[owner[0].username, itemIds],
|
||||
);
|
||||
|
||||
const [result] = await pool.query(
|
||||
"UPDATE loans SET take_date = NOW() WHERE loan_code = ?",
|
||||
[loanCode]
|
||||
"UPDATE loans SET take_date = NOW() WHERE loan_code = ? AND take_date IS NULL",
|
||||
[loanCode],
|
||||
);
|
||||
|
||||
if (result.affectedRows > 0 && setItemStates.affectedRows > 0) {
|
||||
return { success: true };
|
||||
}
|
||||
return { success: false };
|
||||
return { message: "Failed to set take date", success: false };
|
||||
};
|
||||
|
||||
export const getAllLoansV2 = async () => {
|
||||
@@ -118,12 +130,12 @@ export const getAllLoansV2 = async () => {
|
||||
export const openDoor = async (doorKey) => {
|
||||
const [result] = await pool.query(
|
||||
"SELECT safe_nr, id FROM items WHERE door_key = ?;",
|
||||
[doorKey]
|
||||
[doorKey],
|
||||
);
|
||||
if (result.length > 0) {
|
||||
const [changeItemSate] = await pool.query(
|
||||
"UPDATE items SET in_safe = NOT in_safe WHERE id = ?",
|
||||
[result[0].id]
|
||||
[result[0].id],
|
||||
);
|
||||
if (changeItemSate.affectedRows > 0) {
|
||||
return { success: true, data: result[0] };
|
||||
|
||||
@@ -47,7 +47,7 @@ router.get(
|
||||
} else {
|
||||
res.status(404).json({ message: "Loan not found" });
|
||||
}
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
// Route for API to set the return date by the loan code
|
||||
@@ -58,11 +58,11 @@ router.post(
|
||||
const loanCode = req.params.loan_code;
|
||||
const result = await setReturnDateV2(loanCode);
|
||||
if (result.success) {
|
||||
res.status(200).json({ data: result.data });
|
||||
res.status(200).json({});
|
||||
} else {
|
||||
res.status(500).json({ message: "Failed to set return date" });
|
||||
}
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
// Route for API to set the take away date by the loan code
|
||||
@@ -73,11 +73,11 @@ router.post(
|
||||
const loanCode = req.params.loan_code;
|
||||
const result = await setTakeDateV2(loanCode);
|
||||
if (result.success) {
|
||||
res.status(200).json({ data: result.data });
|
||||
res.status(200).json({});
|
||||
} else {
|
||||
res.status(500).json({ message: "Failed to set take date" });
|
||||
res.status(500).json({ message: result.message });
|
||||
}
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
// Route for API to open a door
|
||||
|
||||
@@ -62,6 +62,7 @@ router.post("/createLoan", authenticate, async (req, res) => {
|
||||
mailInfo.data.start_date,
|
||||
mailInfo.data.end_date,
|
||||
mailInfo.data.created_at,
|
||||
mailInfo.data.note,
|
||||
);
|
||||
return res.status(201).json({
|
||||
message: "Loan created successfully",
|
||||
|
||||
@@ -34,7 +34,14 @@ const formatDateTime = (value) => {
|
||||
return "N/A";
|
||||
};
|
||||
|
||||
function buildLoanEmail({ user, items, startDate, endDate, createdDate }) {
|
||||
function buildLoanEmail({
|
||||
user,
|
||||
items,
|
||||
startDate,
|
||||
endDate,
|
||||
createdDate,
|
||||
note,
|
||||
}) {
|
||||
const brand = process.env.MAIL_BRAND_COLOR || "#0ea5e9";
|
||||
const itemsList =
|
||||
Array.isArray(items) && items.length
|
||||
@@ -116,6 +123,12 @@ function buildLoanEmail({ user, items, startDate, endDate, createdDate }) {
|
||||
createdDate,
|
||||
)}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding:10px 14px; color:#6b7280; vertical-align:top;">Notiz</td>
|
||||
<td style="padding:10px 14px; font-weight:600; color:#111827;">${
|
||||
note || "Keine Notiz"
|
||||
}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p style="margin:22px 0 0 0; font-size:14px;">
|
||||
@@ -134,7 +147,14 @@ function buildLoanEmail({ user, items, startDate, endDate, createdDate }) {
|
||||
</html>`;
|
||||
}
|
||||
|
||||
function buildLoanEmailText({ user, items, startDate, endDate, createdDate }) {
|
||||
function buildLoanEmailText({
|
||||
user,
|
||||
items,
|
||||
startDate,
|
||||
endDate,
|
||||
createdDate,
|
||||
note,
|
||||
}) {
|
||||
const itemsText =
|
||||
Array.isArray(items) && items.length ? items.join(", ") : "N/A";
|
||||
return [
|
||||
@@ -145,10 +165,18 @@ function buildLoanEmailText({ user, items, startDate, endDate, createdDate }) {
|
||||
`Start: ${formatDateTime(startDate)}`,
|
||||
`Ende: ${formatDateTime(endDate)}`,
|
||||
`Erstellt am: ${formatDateTime(createdDate)}`,
|
||||
`Notiz: ${note || "Keine Notiz"}`,
|
||||
].join("\n");
|
||||
}
|
||||
|
||||
export function sendMailLoan(user, items, startDate, endDate, createdDate) {
|
||||
export function sendMailLoan(
|
||||
user,
|
||||
items,
|
||||
startDate,
|
||||
endDate,
|
||||
createdDate,
|
||||
note,
|
||||
) {
|
||||
const transporter = nodemailer.createTransport({
|
||||
host: process.env.MAIL_HOST,
|
||||
port: process.env.MAIL_PORT,
|
||||
@@ -170,8 +198,16 @@ export function sendMailLoan(user, items, startDate, endDate, createdDate) {
|
||||
startDate,
|
||||
endDate,
|
||||
createdDate,
|
||||
note,
|
||||
}),
|
||||
html: buildLoanEmail({
|
||||
user,
|
||||
items,
|
||||
startDate,
|
||||
endDate,
|
||||
createdDate,
|
||||
note,
|
||||
}),
|
||||
html: buildLoanEmail({ user, items, startDate, endDate, createdDate }),
|
||||
});
|
||||
|
||||
console.log("Loan message sent:", info.messageId);
|
||||
|
||||
@@ -1,120 +0,0 @@
|
||||
USE borrow_system_new;
|
||||
|
||||
-- Reset tables (no FKs defined, so order is safe)
|
||||
SET FOREIGN_KEY_CHECKS = 0;
|
||||
TRUNCATE TABLE loans;
|
||||
TRUNCATE TABLE apiKeys;
|
||||
TRUNCATE TABLE items;
|
||||
TRUNCATE TABLE users;
|
||||
SET FOREIGN_KEY_CHECKS = 1;
|
||||
|
||||
-- Users (roles 1–6, plain-text passwords; is_admin is BOOL)
|
||||
INSERT INTO users (username, password, email, first_name, last_name, role, is_admin) VALUES
|
||||
('admin', 'adminpass', 'admin@example.com', 'System', 'Admin', 6, TRUE),
|
||||
('alice', 'alice123', 'alice@example.com', 'Alice', 'Andersen',1, FALSE),
|
||||
('bob', 'bob12345', 'bob@example.com', 'Bob', 'Berg', 2, FALSE),
|
||||
('carol', 'carol123', 'carol@example.com', 'Carol', 'Christensen', 3, FALSE),
|
||||
('dave', 'dave123', 'dave@example.com', 'Dave', 'Dahl', 4, FALSE),
|
||||
('erin', 'erin123', 'erin@example.com', 'Erin', 'Enevoldsen', 5, FALSE),
|
||||
('frank', 'frank123', 'frank@example.com', 'Frank', 'Fisher', 2, FALSE),
|
||||
('grace', 'grace123', 'grace@example.com', 'Grace', 'Gundersen',1, FALSE),
|
||||
('heidi', 'heidi123', 'heidi@example.com', 'Heidi', 'Hansen', 4, FALSE),
|
||||
('tech', 'techpass', 'tech@example.com', 'Tech', 'User', 5, TRUE);
|
||||
|
||||
-- Items (safe_nr is two digits or NULL; matches CHECK and UNIQUE constraint)
|
||||
INSERT INTO items (item_name, can_borrow_role, in_safe, safe_nr, last_borrowed_person, currently_borrowing) VALUES
|
||||
('Laptop A', 2, FALSE, NULL, 'grace', 'bob'),
|
||||
('Laptop B', 2, TRUE, '01', NULL, NULL),
|
||||
('Camera Canon', 3, TRUE, '02', 'erin', NULL),
|
||||
('Microphone Rode', 1, TRUE, '03', 'grace', NULL),
|
||||
('Tripod Manfrotto', 1, TRUE, '04', 'frank', NULL),
|
||||
('Oscilloscope Tek', 4, TRUE, '05', NULL, NULL),
|
||||
('VR Headset', 3, FALSE, NULL, 'heidi', 'carol'),
|
||||
('Keycard Programmer', 6, TRUE, '06', 'admin', NULL);
|
||||
|
||||
-- Loans (JSON strings, 6-digit numeric loan_code per CHECK)
|
||||
-- Assumes the items above have ids 1..8 in insert order
|
||||
INSERT INTO loans (
|
||||
username,
|
||||
lockers,
|
||||
loan_code,
|
||||
start_date,
|
||||
end_date,
|
||||
take_date,
|
||||
returned_date,
|
||||
loaned_items_id,
|
||||
loaned_items_name,
|
||||
deleted,
|
||||
note
|
||||
) VALUES
|
||||
-- Active loan: bob has Laptop A (item id 1, locker "01")
|
||||
('bob',
|
||||
'["01"]',
|
||||
'123456',
|
||||
'2025-11-15 09:00:00',
|
||||
'2025-11-22 17:00:00',
|
||||
'2025-11-15 09:15:00',
|
||||
NULL,
|
||||
'[1]',
|
||||
'["Laptop A"]',
|
||||
FALSE,
|
||||
'Active loan - Laptop A'
|
||||
),
|
||||
-- Returned loan: frank had Tripod Manfrotto (item id 5, locker "04")
|
||||
('frank',
|
||||
'["04"]',
|
||||
'234567',
|
||||
'2025-10-01 10:00:00',
|
||||
'2025-10-07 16:00:00',
|
||||
'2025-10-01 10:05:00',
|
||||
'2025-10-05 15:30:00',
|
||||
'[5]',
|
||||
'["Tripod Manfrotto"]',
|
||||
FALSE,
|
||||
'Completed loan'
|
||||
),
|
||||
-- Future reservation: dave will take Oscilloscope Tek (item id 6, locker "05")
|
||||
('dave',
|
||||
'["05"]',
|
||||
'345678',
|
||||
'2025-12-10 09:00:00',
|
||||
'2025-12-12 17:00:00',
|
||||
NULL,
|
||||
NULL,
|
||||
'[6]',
|
||||
'["Oscilloscope Tek"]',
|
||||
FALSE,
|
||||
'Reserved'
|
||||
),
|
||||
-- Active loan: carol has VR Headset (item id 7, locker "02")
|
||||
('carol',
|
||||
'["02"]',
|
||||
'456789',
|
||||
'2025-11-10 13:00:00',
|
||||
'2025-11-20 12:00:00',
|
||||
'2025-11-10 13:10:00',
|
||||
NULL,
|
||||
'[7]',
|
||||
'["VR Headset"]',
|
||||
FALSE,
|
||||
'Active loan - VR Headset'
|
||||
),
|
||||
-- Soft-deleted historic loan: grace had Microphone + Tripod (item ids 4,5; lockers "03","04")
|
||||
('grace',
|
||||
'["03","04"]',
|
||||
'567890',
|
||||
'2025-09-01 09:00:00',
|
||||
'2025-09-03 17:00:00',
|
||||
'2025-09-01 09:10:00',
|
||||
'2025-09-03 16:45:00',
|
||||
'[4,5]',
|
||||
'["Microphone Rode","Tripod Manfrotto"]',
|
||||
TRUE,
|
||||
'Canceled/soft-deleted record'
|
||||
);
|
||||
|
||||
-- API keys (8-digit numeric keys per CHECK)
|
||||
INSERT INTO apiKeys (api_key, entry_name, last_used_at) VALUES
|
||||
('12345678', 'CI token', '2025-11-15 08:00:00'),
|
||||
('87654321', 'Local dev', NULL),
|
||||
('00000001', 'Monitoring', '2025-11-10 12:30:00');
|
||||
Reference in New Issue
Block a user