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

Compare commits

base: Matthias-Claudius-Schule:v1.1
Branches Tags
Matthias-Claudius-Schule:dev_v1-admin Matthias-Claudius-Schule:debian12_v1-admin Matthias-Claudius-Schule:dev Matthias-Claudius-Schule:debian12_v1 Matthias-Claudius-Schule:dev_v1 Matthias-Claudius-Schule:debian12
Matthias-Claudius-Schule:v1.1
..
compare: Matthias-Claudius-Schule:09af4c760c6c7251ebdbea77bce7d4e59288f5c3
Branches Tags
Matthias-Claudius-Schule:debian12_v1-admin Matthias-Claudius-Schule:dev_v1-admin Matthias-Claudius-Schule:dev Matthias-Claudius-Schule:debian12_v1 Matthias-Claudius-Schule:dev_v1 Matthias-Claudius-Schule:debian12
Matthias-Claudius-Schule:v1.1

8 Commits
v1.1 ... 09af4c760c

Author SHA1 Message Date
theis.gaedigk
09af4c760c fix: update database connection settings in docker-compose and database service 2025-08-20 00:49:44 +02:00
theis.gaedigk
3fd0fd9584 fix: add borrow_system-internal network to frontend, backend, and mysql services in docker-compose 2025-08-20 00:45:43 +02:00
theis.gaedigk
27984ebac8 added 2025-08-20 00:42:56 +02:00
theis.gaedigk
3d4aab74d5 changed back 2025-08-20 00:30:49 +02:00
theis.gaedigk
4076630eec changed 2025-08-20 00:27:06 +02:00
theis.gaedigk
6025212e93 refactor: remove redundant environment variable validation and connection check in database service 
fix: update dependency reference for backend service in docker-compose
 2025-08-20 00:25:35 +02:00
theis.gaedigk
de554048eb added tester 2025-08-20 00:20:35 +02:00
theis.gaedigk
e1d79d2c79 fix: update port numbers and API endpoints for consistency across backend and frontend 2025-08-19 23:55:13 +02:00
26 changed files with 217 additions and 496 deletions
Expand all files Collapse all files

2
.gitignore vendored
View File

@@ -112,5 +112,3 @@ backend/public/uploads/
config/ config/
secrets/ secrets/
keys/ keys/
ToDo.txt

11
Docs/HELP.md
View File

@@ -1,11 +0,0 @@
# Hilfe Seite
Hier finden Sie Informationen zur Verwendung des Systems.
## Unerwartete Probleme
Falls unerwartetet Probleme im Web oder im Safe auftreten sollten, können Sie den Support via Teams kontaktieren.
**Kontaktpersonen:**
- Theis Gaedigk (Web & Safe)
- Niklas Brunke (Safe)

196
Docs/backend_API_docs/README.md
View File

@@ -8,7 +8,7 @@ On this page you will learn how my API works.
When you look at my backend folder and file structure, you can see that I have two files called `API`. The first file called `api.js` is for my web frontend, because this file works together with my JWT token service. When you look at my backend folder and file structure, you can see that I have two files called `API`. The first file called `api.js` is for my web frontend, because this file works together with my JWT token service.
**\*But I have built a second API. You can see the second API file in the same directory, the file is called `apiV2.js`.** But I have built a second API. You can see the second API file in the same directory, the file is called `apiV2.js`.
This is the file that you can use to build an API. This is the file that you can use to build an API.
@@ -24,16 +24,6 @@ Example: `/apiV2/items/{ADMIN_ID}`
--- ---
## URL
- The frontend is currently running on `https://insta.the1s.de`.
- The backend is currently running on `https://backend.insta.the1s.de`.
You can see the status of this and all my other services at `https://status.the1s.de`.
---
## Current endpoints ## Current endpoints
### 1. Get All Items ### 1. Get All Items
@@ -45,114 +35,21 @@ Returns a list of all items and their details.
#### Example Request #### Example Request
``` ```
GET https://backend.insta.the1s.de/apiV2/items/your_admin_key GET /apiV2/items/your_admin_key
``` ```
#### Example Response #### Example Response
``` ```
{ [
"data": [ {
{ "id": 1,
"id": 1, "item_name": "DJI 1er Mikro",
"item_name": "DJI 1er Mikro", "can_borrow_role": "4",
"can_borrow_role": 4, "inSafe": 1
"inSafe": 1, },
"entry_created_at": "2025-08-19T22:02:16.000Z" ...
}, ]
{
"id": 2,
"item_name": "DJI 2er Mikro 1",
"can_borrow_role": 4,
"inSafe": 1,
"entry_created_at": "2025-08-19T22:02:16.000Z"
},
{
"id": 3,
"item_name": "DJI 2er Mikro 2",
"can_borrow_role": 4,
"inSafe": 1,
"entry_created_at": "2025-08-19T22:02:16.000Z"
},
{
"id": 4,
"item_name": "Rode Richt Mikrofon",
"can_borrow_role": 2,
"inSafe": 1,
"entry_created_at": "2025-08-19T22:02:16.000Z"
},
{
"id": 5,
"item_name": "Kamera Stativ",
"can_borrow_role": 1,
"inSafe": 1,
"entry_created_at": "2025-08-19T22:02:16.000Z"
},
{
"id": 6,
"item_name": "SONY Kamera - inkl. Akkus und Objektiv",
"can_borrow_role": 1,
"inSafe": 1,
"entry_created_at": "2025-08-19T22:02:16.000Z"
},
{
"id": 7,
"item_name": "MacBook inkl. Adapter",
"can_borrow_role": 2,
"inSafe": 1,
"entry_created_at": "2025-08-19T22:02:16.000Z"
},
{
"id": 8,
"item_name": "SD Karten",
"can_borrow_role": 3,
"inSafe": 1,
"entry_created_at": "2025-08-19T22:02:16.000Z"
},
{
"id": 9,
"item_name": "Kameragimbal",
"can_borrow_role": 1,
"inSafe": 1,
"entry_created_at": "2025-08-19T22:02:16.000Z"
},
{
"id": 10,
"item_name": "ATEM MINI PRO",
"can_borrow_role": 1,
"inSafe": 1,
"entry_created_at": "2025-08-19T22:02:16.000Z"
},
{
"id": 11,
"item_name": "Handygimbal",
"can_borrow_role": 4,
"inSafe": 1,
"entry_created_at": "2025-08-19T22:02:16.000Z"
},
{
"id": 12,
"item_name": "Kameralfter",
"can_borrow_role": 1,
"inSafe": 1,
"entry_created_at": "2025-08-19T22:02:16.000Z"
},
{
"id": 13,
"item_name": "Kleine Kamera 1 - inkl. Objektiv",
"can_borrow_role": 2,
"inSafe": 1,
"entry_created_at": "2025-08-19T22:02:16.000Z"
},
{
"id": 14,
"item_name": "Kleine Kamera 2 - inkl. Objektiv",
"can_borrow_role": 2,
"inSafe": 1,
"entry_created_at": "2025-08-19T22:02:16.000Z"
}
]
}
``` ```
Each item has the following properties: Each item has the following properties:
@@ -162,8 +59,6 @@ Each item has the following properties:
- `can_borrow_role`: The role ID that is allowed to borrow the item. - `can_borrow_role`: The role ID that is allowed to borrow the item.
- `inSafe`: Indicates whether the item is currently in the locker (1) or not (0). This variable/state can change over time. - `inSafe`: Indicates whether the item is currently in the locker (1) or not (0). This variable/state can change over time.
_You also get an http 200 status code._
--- ---
### 2. Change Item Safe State ### 2. Change Item Safe State
@@ -177,7 +72,7 @@ Updates the `inSafe` state of an item (whether it is in the locker).
#### Example Request #### Example Request
``` ```
POST https://backend.insta.the1s.de/apiV2/controlInSafe/your_admin_key/item_id/new_item_state POST /apiV2/controlInSafe/your_admin_key/5/0
``` ```
#### Example Response #### Example Response
@@ -186,9 +81,9 @@ POST https://backend.insta.the1s.de/apiV2/controlInSafe/your_admin_key/item_id/n
{} {}
``` ```
_An empty object means, that the operation was successful and no further information is returned._ *An empty object means, that the operation was successful and no further information is returned.*
_You also get an http 200 status code._ *You also get an http 2xx status code.*
--- ---
@@ -203,7 +98,7 @@ Sets the `returned_date` of a loan to the current server time.
#### Example Request #### Example Request
``` ```
POST https://backend.insta.the1s.de/apiV2/setReturnDate/your_admin_key/your_loan_code POST /apiV2/setReturnDate/your_admin_key/123456
``` ```
#### Example Response #### Example Response
@@ -212,9 +107,9 @@ POST https://backend.insta.the1s.de/apiV2/setReturnDate/your_admin_key/your_loan
{} {}
``` ```
_An empty object means, that the operation was successful and no further information is returned._ *An empty object means, that the operation was successful and no further information is returned.*
_You also get an http 200 status code._ *You also get an http 2xx status code.*
--- ---
@@ -229,7 +124,7 @@ Sets the `take_date` of a loan to the current server time.
#### Example Request #### Example Request
``` ```
POST https://backend.insta.the1s.de/apiV2/setTakeDate/your_admin_key/your_loan_code POST /apiV2/setTakeDate/your_admin_key/123456
``` ```
#### Example Response #### Example Response
@@ -238,60 +133,9 @@ POST https://backend.insta.the1s.de/apiV2/setTakeDate/your_admin_key/your_loan_c
{} {}
``` ```
_An empty object means, that the operation was successful and no further information is returned._ *An empty object means, that the operation was successful and no further information is returned.*
_You also get an http 2xx status code._ *You also get an http 2xx status code.*
---
### 5. Get whole loan by loan code
**POST** `/getLoanByCode/:key/:loan_code`
Retrieves the details of a specific loan by its unique code.
- `loan_code`: The unique code of the loan.
#### Example Request
```
GET https://backend.insta.the1s.de/getLoanByCode/your_admin_key/your_loan_code
```
#### Example Response
```
{
"data": {
"id": 6,
"username": "theis",
"loan_code": 646473,
"start_date": "2025-08-25T13:23:00.000Z",
"end_date": "2025-08-26T13:23:00.000Z",
"take_date": null,
"returned_date": null,
"created_at": "2025-08-20T11:23:40.000Z",
"loaned_items_id": [
8,
9
],
"loaned_items_name": [
"SD Karten",
"Kameragimbal"
]
}
}
```
_You also get an http 200 status code._
If the loan id does not exist, you will receive a 404 status code and an error message.
```
{
"message": "Loan not found"
}
```
--- ---

2
backend/Dockerfile
View File

@@ -7,6 +7,6 @@ RUN npm install
COPY . . COPY . .
EXPOSE 8002 EXPOSE 8102
CMD ["npm", "start"] CMD ["npm", "start"]

1
backend/routes/api.js
View File

@@ -11,6 +11,7 @@ import {
import { authenticate, generateToken } from "../services/tokenService.js"; import { authenticate, generateToken } from "../services/tokenService.js";
const router = express.Router(); const router = express.Router();
// Example endpoint
router.post("/login", async (req, res) => { router.post("/login", async (req, res) => {
const result = await loginFunc(req.body.username, req.body.password); const result = await loginFunc(req.body.username, req.body.password);
if (result.success) { if (result.success) {

14
backend/routes/apiV2.js
View File

@@ -5,7 +5,6 @@ import {
changeInSafeStateV2, changeInSafeStateV2,
setReturnDateV2, setReturnDateV2,
setTakeDateV2, setTakeDateV2,
getLoanByCodeV2,
} from "../services/database.js"; } from "../services/database.js";
dotenv.config(); dotenv.config();
@@ -45,19 +44,6 @@ router.post("/controlInSafe/:key/:itemId/:state", async (req, res) => {
} }
}); });
router.get("/getLoanByCode/:key/:loan_code", async (req, res) => {
if (req.params.key === process.env.ADMIN_ID) {
const loan_code = req.params.loan_code;
const result = await getLoanByCodeV2(loan_code);
if (result.success) {
res.status(200).json({ data: result.data });
} else {
res.status(404).json({ message: "Loan not found" });
}
}
});
// Route for API to set the return date // Route for API to set the return date
router.post("/setReturnDate/:key/:loan_code", async (req, res) => { router.post("/setReturnDate/:key/:loan_code", async (req, res) => {
if (req.params.key === process.env.ADMIN_ID) { if (req.params.key === process.env.ADMIN_ID) {

2
backend/server.js
View File

@@ -5,7 +5,7 @@ import apiRouter from "./routes/api.js";
import apiRouterV2 from "./routes/apiV2.js"; import apiRouterV2 from "./routes/apiV2.js";
env.config(); env.config();
const app = express(); const app = express();
const port = 8002; const port = 8102;
app.use(cors()); app.use(cors());
// Increase body size limits to support large CSV JSON payloads // Increase body size limits to support large CSV JSON payloads

12
backend/services/database.js
View File

@@ -8,6 +8,7 @@ const pool = mysql
user: process.env.DB_USER, user: process.env.DB_USER,
password: process.env.DB_PASSWORD, password: process.env.DB_PASSWORD,
database: process.env.DB_NAME, database: process.env.DB_NAME,
port: process.env.DB_PORT,
}) })
.promise(); .promise();
@@ -28,17 +29,6 @@ export const getItemsFromDatabaseV2 = async () => {
return { success: false }; return { success: false };
}; };
export const getLoanByCodeV2 = async (loan_code) => {
const [result] = await pool.query(
"SELECT * FROM loans WHERE loan_code = ?;",
[loan_code]
);
if (result.length > 0) {
return { success: true, data: result[0] };
}
return { success: false };
};
export const changeInSafeStateV2 = async (itemId, state) => { export const changeInSafeStateV2 = async (itemId, state) => {
const [result] = await pool.query( const [result] = await pool.query(
"UPDATE items SET inSafe = ? WHERE id = ?", "UPDATE items SET inSafe = ? WHERE id = ?",

39
docker-compose.yml
View File

@@ -1,23 +1,30 @@
services: services:
# borrow_system-frontend: borrow_system-frontend:
# container_name: borrow_system-frontend container_name: borrow_system-frontend
# build: ./frontend build: ./frontend
# ports: ports:
# - "8001:8001" - "8101:8101"
# environment: networks:
# - CHOKIDAR_USEPOLLING=true - proxynet
# volumes: - borrow_system-internal
# - ./frontend:/app environment:
# - /app/node_modules - CHOKIDAR_USEPOLLING=true
# restart: unless-stopped volumes:
- ./frontend:/app
- /app/node_modules
restart: unless-stopped
borrow_system-backend: borrow_system-backend:
container_name: borrow_system-backend container_name: borrow_system-backend
build: ./backend build: ./backend
ports: ports:
- "8002:8002" - "8102:8102"
networks:
- proxynet
- borrow_system-internal
environment: environment:
DB_HOST: mysql DB_HOST: mysql
DB_PORT: 3306
DB_USER: root DB_USER: root
DB_PASSWORD: ${DB_PASSWORD} DB_PASSWORD: ${DB_PASSWORD}
DB_NAME: borrow_system DB_NAME: borrow_system
@@ -38,6 +45,14 @@ services:
- mysql-data:/var/lib/mysql - mysql-data:/var/lib/mysql
ports: ports:
- "3309:3306" - "3309:3306"
networks:
- borrow_system-internal
volumes: volumes:
mysql-data: mysql-data:
networks:
proxynet:
external: true
borrow_system-internal:
external: false

2
frontend/Dockerfile
View File

@@ -7,6 +7,6 @@ RUN npm install
COPY . . COPY . .
EXPOSE 8001 EXPOSE 8101
CMD ["npm", "run", "dev"] CMD ["npm", "run", "dev"]

16
frontend/package-lock.json generated
View File

@@ -9,7 +9,7 @@
"version": "0.0.0", "version": "0.0.0",
"dependencies": { "dependencies": {
"@tailwindcss/vite": "^4.1.11", "@tailwindcss/vite": "^4.1.11",
"@tanstack/react-query": "^5.85.5", "@tanstack/react-query": "^5.85.0",
"js-cookie": "^3.0.5", "js-cookie": "^3.0.5",
"lucide-react": "^0.539.0", "lucide-react": "^0.539.0",
"primeicons": "^7.0.0", "primeicons": "^7.0.0",
@@ -1836,9 +1836,9 @@
} }
}, },
"node_modules/@tanstack/query-core": { "node_modules/@tanstack/query-core": {
"version": "5.85.5", "version": "5.85.3",
"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.85.5.tgz", "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.85.3.tgz",
"integrity": "sha512-KO0WTob4JEApv69iYp1eGvfMSUkgw//IpMnq+//cORBzXf0smyRwPLrUvEe5qtAEGjwZTXrjxg+oJNP/C00t6w==", "integrity": "sha512-9Ne4USX83nHmRuEYs78LW+3lFEEO2hBDHu7mrdIgAFx5Zcrs7ker3n/i8p4kf6OgKExmaDN5oR0efRD7i2J0DQ==",
"license": "MIT", "license": "MIT",
"funding": { "funding": {
"type": "github", "type": "github",
@@ -1846,12 +1846,12 @@
} }
}, },
"node_modules/@tanstack/react-query": { "node_modules/@tanstack/react-query": {
"version": "5.85.5", "version": "5.85.3",
"resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.85.5.tgz", "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.85.3.tgz",
"integrity": "sha512-/X4EFNcnPiSs8wM2v+b6DqS5mmGeuJQvxBglmDxl6ZQb5V26ouD2SJYAcC3VjbNwqhY2zjxVD15rDA5nGbMn3A==", "integrity": "sha512-AqU8TvNh5GVIE8I+TUU0noryBRy7gOY0XhSayVXmOPll4UkZeLWKDwi0rtWOZbwLRCbyxorfJ5DIjDqE7GXpcQ==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@tanstack/query-core": "5.85.5" "@tanstack/query-core": "5.85.3"
}, },
"funding": { "funding": {
"type": "github", "type": "github",

2
frontend/package.json
View File

@@ -11,7 +11,7 @@
}, },
"dependencies": { "dependencies": {
"@tailwindcss/vite": "^4.1.11", "@tailwindcss/vite": "^4.1.11",
"@tanstack/react-query": "^5.85.5", "@tanstack/react-query": "^5.85.0",
"js-cookie": "^3.0.5", "js-cookie": "^3.0.5",
"lucide-react": "^0.539.0", "lucide-react": "^0.539.0",
"primeicons": "^7.0.0", "primeicons": "^7.0.0",

15
frontend/src/App.tsx
View File

@@ -6,11 +6,7 @@ import Form2 from "./components/Form2";
import Form4 from "./components/Form4"; import Form4 from "./components/Form4";
import LoginForm from "./components/LoginForm"; import LoginForm from "./components/LoginForm";
import Cookies from "js-cookie"; import Cookies from "js-cookie";
import { import { fetchAllData, ALL_ITEMS_UPDATED_EVENT } from "./utils/fetchData";
fetchAllData,
ALL_ITEMS_UPDATED_EVENT,
AUTH_LOGOUT_EVENT,
} from "./utils/fetchData";
import { myToast } from "./utils/toastify"; import { myToast } from "./utils/toastify";
function App() { function App() {
@@ -22,15 +18,8 @@ function App() {
setIsLoggedIn(true); setIsLoggedIn(true);
fetchAllData(token); fetchAllData(token);
} }
localStorage.setItem("borrowableItems", JSON.stringify([]));
}, []);
useEffect(() => { localStorage.setItem("borrowableItems", JSON.stringify([]));
const onAuthLogout = () => {
setIsLoggedIn(false);
};
window.addEventListener(AUTH_LOGOUT_EVENT, onAuthLogout);
return () => window.removeEventListener(AUTH_LOGOUT_EVENT, onAuthLogout);
}, []); }, []);
const handleLogout = () => { const handleLogout = () => {

12
frontend/src/components/Footer.tsx
View File

@@ -1,12 +0,0 @@
import React from "react";
const Footer: React.FC = () => {
return (
<footer className="fixed bottom-0 left-0 text-sm w-full bg-slate-100 text-center py-2 border-t border-slate-200 z-50">
<p>Made with ❤️ by Theis Gaedigk - Jahrgang 2019</p>
<p>v1.1</p>
</footer>
);
};
export default Footer;

92
frontend/src/components/Form4.tsx
View File

@@ -1,9 +1,5 @@
import React from "react"; import React, { useEffect, useState } from "react";
import { Trash, ArrowLeftRight } from "lucide-react";
import { handleDeleteLoan } from "../utils/userHandler"; import { handleDeleteLoan } from "../utils/userHandler";
import { useMutation, useQuery } from "@tanstack/react-query";
import Cookies from "js-cookie";
import { queryClient } from "../utils/queryClient";
type Loan = { type Loan = {
id: number; id: number;
@@ -25,39 +21,56 @@ const formatDate = (iso: string | null) => {
return d.toLocaleString("de-DE", { dateStyle: "short", timeStyle: "short" }); return d.toLocaleString("de-DE", { dateStyle: "short", timeStyle: "short" });
}; };
async function fetchUserLoans(): Promise<Loan[]> { const readUserLoansFromStorage = (): Loan[] => {
const res = await fetch("http://localhost:8002/api/userLoans", { const raw = localStorage.getItem("userLoans");
method: "GET", if (!raw || raw === '"No loans found for this user"') return [];
headers: { Authorization: `Bearer ${Cookies.get("token") || ""}` }, try {
}); const parsed = JSON.parse(raw);
if (!res.ok) throw new Error("Failed to fetch user loans"); return Array.isArray(parsed) ? (parsed as Loan[]) : [];
const data = await res.json(); } catch {
if (data === "No loans found for this user") return []; return [];
return Array.isArray(data) ? (data as Loan[]) : []; }
} };
const TrashIcon = (props: React.SVGProps<SVGSVGElement>) => (
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
{...props}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M6 7h12M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2m1 0v12a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V7m3 4v6m4-6v6"
/>
</svg>
);
const Form4: React.FC = () => { const Form4: React.FC = () => {
const { data: userLoans = [], isFetching } = useQuery({ const [userLoans, setUserLoans] = useState<Loan[]>(() =>
queryKey: ["userLoans"], readUserLoansFromStorage()
queryFn: fetchUserLoans, );
});
const deleteMutation = useMutation({ useEffect(() => {
mutationFn: (loanID: number) => handleDeleteLoan(loanID), const onStorage = (e: StorageEvent) => {
onSuccess: () => { if (e.key === "userLoans") {
queryClient.invalidateQueries({ queryKey: ["userLoans"] }); setUserLoans(readUserLoansFromStorage());
}, }
}); };
window.addEventListener("storage", onStorage);
return () => window.removeEventListener("storage", onStorage);
}, []);
const onDelete = (loanID: number) => deleteMutation.mutate(loanID); const onDelete = async (loanID: number) => {
const ok = await handleDeleteLoan(loanID);
if (isFetching) { if (ok) {
return ( setUserLoans((prev) =>
<div className="rounded-xl border border-slate-200 bg-white p-6 text-center text-slate-600 shadow-sm"> prev.filter((l) => Number(l.id) !== Number(loanID))
<p>Lade Ausleihen…</p> );
</div> }
); };
}
if (userLoans.length === 0) { if (userLoans.length === 0) {
return ( return (
@@ -118,7 +131,7 @@ const Form4: React.FC = () => {
aria-label="Ausleihe löschen" aria-label="Ausleihe löschen"
className="flex items-center justify-center rounded-md p-2 text-slate-600 hover:bg-red-50 hover:text-red-600 focus:outline-none focus:ring-2 focus:ring-red-500/30" className="flex items-center justify-center rounded-md p-2 text-slate-600 hover:bg-red-50 hover:text-red-600 focus:outline-none focus:ring-2 focus:ring-red-500/30"
> >
<Trash className="h-5 w-5" /> <TrashIcon className="h-5 w-5" />
</button> </button>
</div> </div>
</div> </div>
@@ -191,7 +204,7 @@ const Form4: React.FC = () => {
aria-label="Ausleihe löschen" aria-label="Ausleihe löschen"
className="inline-flex items-center rounded-md p-2 text-slate-600 hover:bg-red-50 hover:text-red-600 focus:outline-none focus:ring-2 focus:ring-red-500/30" className="inline-flex items-center rounded-md p-2 text-slate-600 hover:bg-red-50 hover:text-red-600 focus:outline-none focus:ring-2 focus:ring-red-500/30"
> >
<Trash className="h-4 w-4" /> <TrashIcon className="h-4 w-4" />
</button> </button>
</td> </td>
</tr> </tr>
@@ -199,13 +212,6 @@ const Form4: React.FC = () => {
</tbody> </tbody>
</table> </table>
</div> </div>
{/* Scroll hint */}
<div className="border-t border-gray-100 px-4 py-2">
<div className="flex items-center gap-2 text-xs text-gray-500">
<ArrowLeftRight className="h-4 w-4 text-gray-400" />
<span>Hinweis: Horizontal scrollen, um alle Spalten zu sehen.</span>
</div>
</div>
</div> </div>
</div> </div>
); );

10
frontend/src/components/Header.tsx
View File

@@ -23,16 +23,6 @@ const Header: React.FC<HeaderProps> = ({ onLogout }) => {
> >
Logout Logout
</button> </button>
<a href="https://git.the1s.de/Matthias-Claudius-Schule/borrow-system/src/branch/dev/Docs/HELP.md">
<button className="h-9 px-3 rounded-md border border-slate-300 text-slate-700 hover:bg-slate-100 transition">
Hilfe
</button>
</a>
<a href="https://git.the1s.de/Matthias-Claudius-Schule/borrow-system">
<button className="h-9 px-3 rounded-md border border-slate-300 text-slate-700 hover:bg-slate-100 transition">
Source Code
</button>
</a>
</div> </div>
</header> </header>
); );

2
frontend/src/components/LoginForm.tsx
View File

@@ -1,5 +1,4 @@
import React from "react"; import React from "react";
import Footer from "./Footer";
import { useState } from "react"; import { useState } from "react";
import { loginUser } from "../utils/fetchData"; import { loginUser } from "../utils/fetchData";
import { myToast } from "../utils/toastify"; import { myToast } from "../utils/toastify";
@@ -67,7 +66,6 @@ const LoginForm: React.FC<LoginFormProps> = ({ onLogin }) => {
</button> </button>
</form> </form>
</div> </div>
<Footer />
</div> </div>
); );
}; };

2
frontend/src/components/Object.tsx
View File

@@ -8,7 +8,7 @@ type ObjectProps = {
const Object: React.FC<ObjectProps> = ({ title, description }) => { const Object: React.FC<ObjectProps> = ({ title, description }) => {
return ( return (
<div className="min-w-0"> <div className="min-w-0">
<h3 className="text-sm font-semibold text-slate-900">{title}</h3> <h3 className="text-sm font-semibold text-slate-900 truncate">{title}</h3>
<p className="text-xs text-slate-600 line-clamp-2">{description}</p> <p className="text-xs text-slate-600 line-clamp-2">{description}</p>
</div> </div>
); );

115
frontend/src/components/Sidebar.tsx
View File

@@ -1,6 +1,5 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import Object from "./Object"; import Object from "./Object";
import { MonitorSmartphone } from "lucide-react";
import { ALL_ITEMS_UPDATED_EVENT } from "../utils/fetchData"; import { ALL_ITEMS_UPDATED_EVENT } from "../utils/fetchData";
const Sidebar: React.FC = () => { const Sidebar: React.FC = () => {
@@ -22,74 +21,74 @@ const Sidebar: React.FC = () => {
const sorted = [...items].sort((a, b) => Number(a.inSafe) - Number(b.inSafe)); const sorted = [...items].sort((a, b) => Number(a.inSafe) - Number(b.inSafe));
return ( return (
<aside className="w-full md:w-72 md:h-full flex flex-col rounded-2xl pt-0 px-3 pb-3 sm:pt-0 sm:px-4 sm:pb-4 bg-gradient-to-b from-white to-slate-50 ring-1 ring-slate-200/70 shadow-md overflow-hidden"> <aside className="w-full md:w-72 md:h-[calc(100vh-2rem)] md:sticky md:top-4 overflow-y-auto bg-white rounded-2xl p-3 sm:p-4 ring-1 ring-slate-200 shadow-sm">
<div className="sticky top-0 z-10 -mx-3 sm:-mx-4 px-3 sm:px-4 py-2.5 bg-white/85 backdrop-blur supports-[backdrop-filter]:backdrop-blur border-b border-slate-200/70 text-lg sm:text-xl font-bold mb-3 text-slate-900 tracking-tight flex items-center justify-between gap-2 rounded-t-2xl"> <h2 className="text-lg sm:text-xl font-bold mb-3 text-slate-900 tracking-tight flex items-center justify-between">
<span className="flex items-center gap-2 min-w-0 flex-1 truncate"> <span className="flex items-center gap-2">
<MonitorSmartphone className="w-5 h-5 text-slate-700 shrink-0" /> <svg
<span className="truncate">Geräte</span> className="w-5 h-5 text-slate-700"
fill="none"
stroke="currentColor"
strokeWidth={2}
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M16.5 7.5V4.75A2.25 2.25 0 0 0 14.25 2.5h-4.5A2.25 2.25 0 0 0 7.5 4.75V7.5m9 0h-9m9 0v11.75A2.25 2.25 0 0 1 14.25 21.5h-4.5A2.25 2.25 0 0 1 7.5 19.25V7.5m9 0h-9"
/>
</svg>
Geräte Übersicht
</span> </span>
{outCount > 0 && ( {outCount > 0 && (
<span className="inline-flex items-center gap-1 whitespace-nowrap tabular-nums text-[10px] sm:text-xs px-2.5 py-1 rounded-full bg-amber-50 text-amber-700 ring-1 ring-amber-200/70 shadow-sm font-medium"> <span className="text-[10px] sm:text-xs px-2 py-0.5 rounded-full bg-amber-100 text-amber-700">
{outCount} außerhalb {outCount} außerhalb
</span> </span>
)} )}
</div> </h2>
{/* Scroll area */} {/* Mobile: horizontal scroll, Desktop: vertical list */}
<div className="flex-1 min-h-0 overflow-y-auto overflow-x-hidden"> <div className="flex gap-3 overflow-x-auto snap-x snap-mandatory pb-1 -mr-1 pr-2 md:block md:space-y-3 md:pr-1">
<div className="flex flex-col gap-3 md:space-y-3"> {sorted.map((item: any) => (
{sorted.map((item: any) => ( <div
<div key={item.item_name}
key={item.item_name} className={`bg-white rounded-xl p-3 sm:p-4 ring-1 ring-slate-200 hover:ring-slate-300 transition ${
className={`group relative w-full bg-white rounded-xl p-3 sm:p-4 ring-1 ring-slate-200/70 duration-200 hover:shadow-md focus-within:ring-slate-300 ${ item.inSafe ? "" : "ring-red-200"
item.inSafe } shrink-0 snap-start min-w-[240px] md:min-w-0`}
? "border-l-4 border-emerald-400" >
: "border-l-4 border-red-400 ring-red-200/60 bg-red-50/40" <div className="flex items-start gap-3">
}`} <span className="relative mt-0.5 inline-flex" aria-hidden="true">
> {!item.inSafe && (
<div className="flex items-start gap-3"> <span className="absolute inline-flex h-3 w-3 rounded-full bg-red-400 opacity-75 animate-ping"></span>
)}
<span <span
className="relative mt-0.5 inline-flex" className={`inline-block w-3 h-3 rounded-full ${
aria-hidden="true" item.inSafe ? "bg-emerald-500" : "bg-red-500"
> }`}
{!item.inSafe && ( title={
<span className="absolute inline-flex h-3 w-3 rounded-full bg-red-400 opacity-75 animate-ping"></span> item.inSafe ? "Im Schließfach" : "Nicht im Schließfach"
)} }
<span aria-label={
className={`inline-block w-3 h-3 rounded-full ring-2 ring-white ${ item.inSafe ? "Im Schließfach" : "Nicht im Schließfach"
item.inSafe ? "bg-emerald-500" : "bg-red-500"
}`}
title={
item.inSafe ? "Im Schließfach" : "Nicht im Schließfach"
}
aria-label={
item.inSafe ? "Im Schließfach" : "Nicht im Schließfach"
}
/>
</span>
<Object
title={item.item_name}
description={
item.inSafe
? "Aktuell im Schließfach"
: "Aktuell nicht im Schließfach"
} }
/> />
</div> </span>
<Object
title={item.item_name}
description={
item.inSafe ? "Im Schließfach" : "Nicht im Schließfach"
}
/>
</div> </div>
))} </div>
</div> ))}
</div>
<div className="mt-4 pt-3 border-t border-slate-200/70 text-[10px] sm:text-xs text-slate-500 items-center gap-4 hidden md:flex"> <div className="mt-3 text-[10px] sm:text-xs text-slate-500 items-center gap-4 hidden md:flex">
<span className="inline-flex items-center gap-1"> <span className="inline-block w-3 h-3 bg-emerald-500 rounded-full"></span>
<span className="inline-block w-3 h-3 bg-emerald-500 rounded-full ring-2 ring-white shadow-sm"></span> Verfügbar
Im Schließfach <span className="inline-block w-3 h-3 bg-red-500 rounded-full"></span>
</span> Außerhalb des Schließfachs
<span className="inline-flex items-center gap-1">
<span className="inline-block w-3 h-3 bg-red-500 rounded-full ring-2 ring-white shadow-sm"></span>
Außerhalb des Schließfachs
</span>
</div>
</div> </div>
</aside> </aside>
); );

20
frontend/src/layout/Layout.tsx
View File

@@ -2,7 +2,6 @@ import React from "react";
import "../App.css"; import "../App.css";
import Header from "../components/Header"; import Header from "../components/Header";
import Sidebar from "../components/Sidebar"; import Sidebar from "../components/Sidebar";
import Footer from "../components/Footer";
type LayoutProps = { type LayoutProps = {
children: React.ReactNode; children: React.ReactNode;
@@ -11,24 +10,29 @@ type LayoutProps = {
const Layout: React.FC<LayoutProps> = ({ children, onLogout }) => { const Layout: React.FC<LayoutProps> = ({ children, onLogout }) => {
return ( return (
<div className="h-screen flex flex-col bg-slate-50 text-slate-800"> <div className="min-h-screen flex bg-slate-50 text-slate-800">
{/* Main */} {/* Main */}
<main className="flex-1 min-h-0 overflow-hidden flex flex-col items-center px-3 sm:px-5 py-4 sm:py-8 pb-12"> <main className="flex-1 flex flex-col items-center px-3 sm:px-5 py-4 sm:py-8">
<div className="w-full max-w-5xl flex flex-col gap-3 md:flex-row md:gap-6 md:items-stretch min-h-0 h-full"> {/* Sidebar on mobile appears inline on top; on desktop it's a sticky column */}
<div className="hidden md:flex md:flex-col md:shrink-0 md:w-72 md:min-h-0 md:h-full"> <div className="w-full max-w-5xl md:flex md:gap-6">
<div className="block md:hidden mb-3">
<Sidebar /> <Sidebar />
</div> </div>
<div className="flex-1 min-w-0 min-h-0 h-full flex flex-col overflow-hidden">
<div className="hidden md:block md:shrink-0 md:w-72">
<Sidebar />
</div>
<div className="flex-1 min-w-0">
<div className="w-full"> <div className="w-full">
<Header onLogout={onLogout} /> <Header onLogout={onLogout} />
</div> </div>
<div className="w-full bg-white shadow-md md:shadow-lg rounded-2xl p-4 sm:p-6 ring-1 ring-slate-200 flex-1 min-h-0 overflow-y-auto"> <div className="w-full bg-white shadow-md md:shadow-lg rounded-2xl p-4 sm:p-6 ring-1 ring-slate-200">
{children} {children}
</div> </div>
</div> </div>
</div> </div>
</main> </main>
<Footer />
</div> </div>
); );
}; };

34
frontend/src/main.tsx
View File

@@ -2,28 +2,24 @@ import { StrictMode } from "react";
import { createRoot } from "react-dom/client"; import { createRoot } from "react-dom/client";
import "./index.css"; import "./index.css";
import App from "./App.tsx"; import App from "./App.tsx";
import { ToastContainer, Flip } from "react-toastify"; import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css"; import "react-toastify/dist/ReactToastify.css";
import { QueryClientProvider } from "@tanstack/react-query";
import { queryClient } from "./utils/queryClient";
createRoot(document.getElementById("root")!).render( createRoot(document.getElementById("root")!).render(
<StrictMode> <StrictMode>
<QueryClientProvider client={queryClient}> <App />
<App /> <ToastContainer
<ToastContainer position="top-right"
position="top-right" autoClose={3000}
autoClose={3000} hideProgressBar={false}
hideProgressBar={false} newestOnTop
newestOnTop closeOnClick
closeOnClick rtl={false}
rtl={false} pauseOnFocusLoss={false}
pauseOnFocusLoss draggable
draggable pauseOnHover
pauseOnHover theme="colored"
theme="colored" style={{ zIndex: 9999 }}
transition={Flip} />
/>
</QueryClientProvider>
</StrictMode> </StrictMode>
); );

66
frontend/src/utils/fetchData.ts
View File

@@ -4,44 +4,18 @@ import { myToast } from "./toastify";
// Event name used to notify the app when the list of items has been updated // Event name used to notify the app when the list of items has been updated
export const ALL_ITEMS_UPDATED_EVENT = "allItemsUpdated"; export const ALL_ITEMS_UPDATED_EVENT = "allItemsUpdated";
export const BORROWABLE_ITEMS_UPDATED_EVENT = "borrowableItemsUpdated"; export const BORROWABLE_ITEMS_UPDATED_EVENT = "borrowableItemsUpdated";
export const AUTH_LOGOUT_EVENT = "authLogout";
let sendError = false;
function logout() {
Cookies.remove("token");
Cookies.remove("startDate");
Cookies.remove("endDate");
localStorage.removeItem("allItems");
localStorage.removeItem("allLoans");
localStorage.removeItem("userLoans");
localStorage.removeItem("borrowableItems");
window.dispatchEvent(new Event(ALL_ITEMS_UPDATED_EVENT));
window.dispatchEvent(new Event(BORROWABLE_ITEMS_UPDATED_EVENT));
window.dispatchEvent(new Event(AUTH_LOGOUT_EVENT));
}
export const fetchAllData = async (token: string | undefined) => { export const fetchAllData = async (token: string | undefined) => {
if (!token) return; if (!token) return;
// First we fetch all items that are potentially available for borrowing // First we fetch all items that are potentially available for borrowing
try { try {
const response = await fetch("http://localhost:8002/api/items", { const response = await fetch("https://backend.insta.the1s.de/api/items", {
method: "GET", method: "GET",
headers: { headers: {
Authorization: `Bearer ${token}`, Authorization: `Bearer ${token}`,
}, },
}); });
if (response.status === 500) {
if (!sendError) {
sendError = true;
myToast("Session expired. Please log in again.", "error");
logout();
return;
}
return;
}
if (!response.ok) { if (!response.ok) {
myToast("Failed to fetch items", "error"); myToast("Failed to fetch items", "error");
return; return;
@@ -57,23 +31,13 @@ export const fetchAllData = async (token: string | undefined) => {
// get all loans // get all loans
try { try {
const response = await fetch("http://localhost:8002/api/loans", { const response = await fetch("https://backend.insta.the1s.de/api/loans", {
method: "GET", method: "GET",
headers: { headers: {
Authorization: `Bearer ${token}`, Authorization: `Bearer ${token}`,
}, },
}); });
if (response.status === 500) {
if (!sendError) {
sendError = true;
myToast("Session expired. Please log in again.", "error");
logout();
return;
}
return;
}
if (!response.ok) { if (!response.ok) {
myToast("Failed to fetch loans!", "error"); myToast("Failed to fetch loans!", "error");
return; return;
@@ -89,23 +53,13 @@ export const fetchAllData = async (token: string | undefined) => {
// get user loans // get user loans
try { try {
const response = await fetch("http://localhost:8002/api/userLoans", { const response = await fetch("https://backend.insta.the1s.de/api/userLoans", {
method: "GET", method: "GET",
headers: { headers: {
Authorization: `Bearer ${token}`, Authorization: `Bearer ${token}`,
}, },
}); });
if (response.status === 500) {
if (!sendError) {
sendError = true;
myToast("Session expired. Please log in again.", "error");
logout();
return;
}
return;
}
if (!response.ok) { if (!response.ok) {
myToast("Failed to fetch user loans!", "error"); myToast("Failed to fetch user loans!", "error");
return; return;
@@ -122,7 +76,7 @@ export const fetchAllData = async (token: string | undefined) => {
export const loginUser = async (username: string, password: string) => { export const loginUser = async (username: string, password: string) => {
try { try {
const response = await fetch("http://localhost:8002/api/login", { const response = await fetch("https://backend.insta.the1s.de/api/login", {
method: "POST", method: "POST",
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
@@ -158,7 +112,7 @@ export const getBorrowableItems = async () => {
} }
try { try {
const response = await fetch("http://localhost:8002/api/borrowableItems", { const response = await fetch("https://backend.insta.the1s.de/api/borrowableItems", {
method: "POST", method: "POST",
headers: { headers: {
Authorization: `Bearer ${Cookies.get("token") || ""}`, Authorization: `Bearer ${Cookies.get("token") || ""}`,
@@ -168,16 +122,6 @@ export const getBorrowableItems = async () => {
body: JSON.stringify({ startDate, endDate }), body: JSON.stringify({ startDate, endDate }),
}); });
if (response.status === 500) {
if (!sendError) {
sendError = true;
myToast("Session expired. Please log in again.", "error");
logout();
return;
}
return;
}
if (!response.ok) { if (!response.ok) {
myToast("Failed to fetch borrowable items", "error"); myToast("Failed to fetch borrowable items", "error");
return; return;

11
frontend/src/utils/queryClient.ts
View File

@@ -1,11 +0,0 @@
import { QueryClient } from "@tanstack/react-query";
// Central QueryClient instance so utilities (e.g. file upload) can invalidate queries.
export const queryClient = new QueryClient({
defaultOptions: {
queries: {
refetchOnWindowFocus: false,
retry: 1,
},
},
});

7
frontend/src/utils/toastify.ts
View File

@@ -1,18 +1,17 @@
import { toast, Flip, type ToastOptions } from "react-toastify"; import { toast, type ToastOptions } from "react-toastify";
export type ToastType = "success" | "error" | "info" | "warning"; export type ToastType = "success" | "error" | "info" | "warning";
export const myToast = (message: string, msgType: ToastType) => { export const myToast = (message: string, msgType: ToastType) => {
let config: ToastOptions = { let config: ToastOptions = {
position: "top-right", position: "top-right",
autoClose: 3000, autoClose: 5000,
hideProgressBar: false, hideProgressBar: false,
closeOnClick: true, closeOnClick: true,
pauseOnHover: true, pauseOnHover: true,
draggable: true, draggable: true,
progress: undefined, progress: undefined,
theme: "colored", theme: "light",
transition: Flip,
}; };
toast[msgType](message, config); toast[msgType](message, config);
}; };

10
frontend/src/utils/userHandler.ts
View File

@@ -1,11 +1,10 @@
import { myToast } from "./toastify"; import { myToast } from "./toastify";
import Cookies from "js-cookie"; import Cookies from "js-cookie";
import { queryClient } from "./queryClient";
export const handleDeleteLoan = async (loanID: number): Promise<boolean> => { export const handleDeleteLoan = async (loanID: number): Promise<boolean> => {
try { try {
const response = await fetch( const response = await fetch(
`http://localhost:8002/api/deleteLoan/${loanID}`, `https://backend.insta.the1s.de/api/deleteLoan/${loanID}`,
{ {
method: "DELETE", method: "DELETE",
headers: { headers: {
@@ -75,7 +74,7 @@ export const rmFromRemove = (itemID: number) => {
export const createLoan = async (startDate: string, endDate: string) => { export const createLoan = async (startDate: string, endDate: string) => {
const items = removeArr; const items = removeArr;
const response = await fetch("http://localhost:8002/api/createLoan", { const response = await fetch("https://backend.insta.the1s.de/api/createLoan", {
method: "POST", method: "POST",
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
@@ -93,10 +92,5 @@ export const createLoan = async (startDate: string, endDate: string) => {
removeArr = []; removeArr = [];
Cookies.set("removeArr", "[]"); Cookies.set("removeArr", "[]");
myToast("Ausleihe erfolgreich erstellt!", "success"); myToast("Ausleihe erfolgreich erstellt!", "success");
queryClient.invalidateQueries({ queryKey: ["userLoans"] });
queryClient.invalidateQueries({ queryKey: ["allLoans"] });
queryClient.invalidateQueries({ queryKey: ["borrowableItems"] });
return true; return true;
}; };

14
frontend/vite.config.ts
View File

@@ -1,15 +1,17 @@
import { defineConfig } from "vite"; import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import svgr from "vite-plugin-svgr";
import tailwindcss from "@tailwindcss/vite"; import tailwindcss from "@tailwindcss/vite";
export default defineConfig({ export default defineConfig({
plugins: [react(), svgr(), tailwindcss()], plugins: [tailwindcss()],
server: { server: {
host: "0.0.0.0", host: "0.0.0.0",
port: 8001, allowedHosts: ["insta.the1s.de"],
watch: { port: 8101,
usePolling: true, watch: { usePolling: true },
hmr: {
host: "insta.the1s.de",
port: 8101,
protocol: "wss",
}, },
}, },
}); });