Compare commits
3 Commits
debian12_v
...
dev_v1-adm
| Author | SHA1 | Date | |
|---|---|---|---|
| 49d4d13afc | |||
| 45fa095eaf | |||
| 23be7e12c7 |
72
README.md
72
README.md
@@ -1,7 +1,73 @@
|
||||
# Borrow System
|
||||
|
||||
**You have reached the `debian12` branch.**
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Here you will find the source code of exactly the application that I have hosted.
|
||||
A small full‑stack system to log in, view available items, reserve them for a time window, and manage personal loans.
|
||||
|
||||
The main branch or the branch that I am developing on, is the `dev` branch.
|
||||
- Frontend: React + TypeScript + Vite + Tailwind CSS
|
||||
- Backend: Node.js + Express + MySQL + JWT (jose)
|
||||
- Orchestration: Docker Compose (backend + MySQL)
|
||||
|
||||
## Contents
|
||||
|
||||
- Frontend: [frontend/](frontend)
|
||||
- Vite/Tailwind config: [frontend/vite.config.ts](frontend/vite.config.ts), [frontend/tailwind.config.js](frontend/tailwind.config.js)
|
||||
- App entry: [frontend/src/main.tsx](frontend/src/main.tsx), [frontend/src/App.tsx](frontend/src/App.tsx)
|
||||
- UI: [frontend/src/layout/Layout.tsx](frontend/src/layout/Layout.tsx), [frontend/src/components](frontend/src/components)
|
||||
- Data/utilities: [frontend/src/utils/fetchData.ts](frontend/src/utils/fetchData.ts), [frontend/src/utils/userHandler.ts](frontend/src/utils/userHandler.ts), [frontend/src/utils/toastify.ts](frontend/src/utils/toastify.ts)
|
||||
- Backend: [backend/](backend)
|
||||
- Server: [backend/server.js](backend/server.js)
|
||||
- Routes: [backend/routes/api.js](backend/routes/api.js), [backend/routes/apiV2.js](backend/routes/apiV2.js)
|
||||
- DB + services: [backend/services/database.js](backend/services/database.js), [backend/services/tokenService.js](backend/services/tokenService.js)
|
||||
- Schema/seed: [backend/scheme.sql](backend/scheme.sql)
|
||||
- Docs: [docs/](docs)
|
||||
- API docs (see below): [docs/backend_API_docs/README.md](docs/backend_API_docs/README.md)
|
||||
|
||||
## Features (high‑level)
|
||||
|
||||
- Auth via JWT (login -> token cookie) using the backend route in [backend/routes/api.js](backend/routes/api.js).
|
||||
- After login, the app loads items, loans, and user loans and keeps them in localStorage.
|
||||
- Choose a date range to fetch borrowable items, select items, and create a loan.
|
||||
- Manage personal loans list (and delete a loan).
|
||||
|
||||
Key frontend utilities:
|
||||
|
||||
- [`utils.fetchData.fetchAllData`](frontend/src/utils/fetchData.ts): loads items, loans, and user loans after login.
|
||||
- [`utils.fetchData.getBorrowableItems`](frontend/src/utils/fetchData.ts): fetches borrowable items for the selected time range.
|
||||
- [`utils.userHandler.createLoan`](frontend/src/utils/userHandler.ts): creates a new loan for selected items.
|
||||
- [`utils.userHandler.handleDeleteLoan`](frontend/src/utils/userHandler.ts): deletes a loan and syncs local state.
|
||||
- [`utils.toastify.myToast`](frontend/src/utils/toastify.ts): toast notifications.
|
||||
|
||||
UI flow (main screens):
|
||||
|
||||
- Period selection: [frontend/src/components/Form1.tsx](frontend/src/components/Form1.tsx)
|
||||
- Borrowable items + selection: [frontend/src/components/Form2.tsx](frontend/src/components/Form2.tsx)
|
||||
- User loans table: [frontend/src/components/Form4.tsx](frontend/src/components/Form4.tsx)
|
||||
|
||||
## Development
|
||||
|
||||
- Scripts: see [frontend/package.json](frontend/package.json) and [backend/package.json](backend/package.json)
|
||||
- Frontend: `npm run dev`, `npm run build`, `npm run preview`, `npm run lint`
|
||||
- Backend: `npm start`
|
||||
- Linting: ESLint configured via [frontend/eslint.config.js](frontend/eslint.config.js)
|
||||
- TypeScript configs: [frontend/tsconfig.app.json](frontend/tsconfig.app.json), [frontend/tsconfig.node.json](frontend/tsconfig.node.json)
|
||||
|
||||
## Configuration notes
|
||||
|
||||
- Vite/Tailwind integration via [frontend/vite.config.ts](frontend/vite.config.ts) and `@tailwindcss/vite`; CSS entry uses `@import "tailwindcss"` in [frontend/src/index.css](frontend/src/index.css).
|
||||
- Toasts wired in [frontend/src/main.tsx](frontend/src/main.tsx) with `react-toastify`.
|
||||
- Local state is stored in `localStorage` keys: `allItems`, `allLoans`, `userLoans`, `borrowableItems`. Cross‑component updates are signaled via window events from [`utils.fetchData`](frontend/src/utils/fetchData.ts).
|
||||
|
||||
## API documentation
|
||||
|
||||
Refer to the dedicated API docs:
|
||||
|
||||
`docs/backend_API_docs/README.md`
|
||||
|
||||
@@ -8,13 +8,9 @@ export default defineConfig({
|
||||
plugins: [react(), svgr(), tailwindcss(), tsconfigPaths()],
|
||||
server: {
|
||||
host: "0.0.0.0",
|
||||
allowedHosts: ["admin.insta.the1s.de"],
|
||||
port: 8103,
|
||||
watch: { usePolling: true },
|
||||
hmr: {
|
||||
host: "admin.insta.the1s.de",
|
||||
port: 8103,
|
||||
protocol: "wss",
|
||||
port: 8003,
|
||||
watch: {
|
||||
usePolling: true,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
@@ -7,6 +7,6 @@ RUN npm install
|
||||
|
||||
COPY . .
|
||||
|
||||
EXPOSE 8102
|
||||
EXPOSE 8002
|
||||
|
||||
CMD ["npm", "start"]
|
||||
@@ -38,70 +38,99 @@ function buildLoanEmail({ user, items, startDate, endDate, createdDate }) {
|
||||
const brand = process.env.MAIL_BRAND_COLOR || "#0ea5e9";
|
||||
const itemsList =
|
||||
Array.isArray(items) && items.length
|
||||
? `<ul style="margin:8px 0 0 16px; padding:0;">${items
|
||||
.map((i) => `<li style="margin:4px 0;">${i}</li>`)
|
||||
? `<ul style="margin:4px 0 0 18px; padding:0;">${items
|
||||
.map(
|
||||
(i) =>
|
||||
`<li style="margin:2px 0; color:#111827; line-height:1.3;">${i}</li>`
|
||||
)
|
||||
.join("")}</ul>`
|
||||
: "<span>N/A</span>";
|
||||
: "<span style='color:#111827;'>N/A</span>";
|
||||
|
||||
return `<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="color-scheme" content="light dark">
|
||||
<meta name="supported-color-schemes" content="light dark">
|
||||
</head>
|
||||
<body style="margin:0; padding:0; background:#f6f9fc; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; color:#111827;">
|
||||
<div style="padding:24px;">
|
||||
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px; margin:0 auto; background:#ffffff; border:1px solid #e5e7eb; border-radius:12px; overflow:hidden;">
|
||||
<tr>
|
||||
<td style="padding:20px 24px; background:${brand}; color:#ffffff;">
|
||||
<h1 style="margin:0; font-size:18px;">Neue Ausleihe erstellt</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding:20px 24px;">
|
||||
<p style="margin:0 0 12px 0;">Es wurde eine neue Ausleihe angelegt. Hier sind die Details:</p>
|
||||
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse;">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="color-scheme" content="light">
|
||||
<meta name="supported-color-schemes" content="light">
|
||||
<meta name="x-apple-disable-message-reformatting">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<style>
|
||||
:root { color-scheme: light; supported-color-schemes: light; }
|
||||
body { margin:0; padding:0; }
|
||||
/* Mobile stacking */
|
||||
@media (max-width:480px) {
|
||||
.outer { width:100% !important; }
|
||||
.pad-sm { padding:16px !important; }
|
||||
.w-label { width:120px !important; }
|
||||
}
|
||||
/* Dark-mode override safety */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body, table, td, p, a, h1, h2, h3 { background:#ffffff !important; color:#111827 !important; }
|
||||
.brand-header { background:${brand} !important; color:#ffffff !important; }
|
||||
a { color:${brand} !important; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body bgcolor="#ffffff" style="background:#ffffff; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; color:#111827; -webkit-text-size-adjust:100%;">
|
||||
<!-- Preheader (hidden) -->
|
||||
<div style="display:none; max-height:0; overflow:hidden; opacity:0; mso-hide:all;">
|
||||
Neue Ausleihe erstellt – Übersicht der Buchung.
|
||||
</div>
|
||||
<div role="article" aria-roledescription="email" lang="de" style="padding:24px; background:#f2f4f7;">
|
||||
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" class="outer" style="max-width:600px; margin:0 auto; background:#ffffff; border:1px solid #e5e7eb; border-radius:14px; overflow:hidden;">
|
||||
<tr>
|
||||
<td class="brand-header" style="padding:22px 26px; background:${brand}; color:#ffffff;">
|
||||
<h1 style="margin:0; font-size:18px; line-height:1.35; font-weight:600;">Neue Ausleihe erstellt</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="pad-sm" style="padding:24px 26px; color:#111827;">
|
||||
<p style="margin:0 0 14px 0; line-height:1.4;">Es wurde eine neue Ausleihe angelegt. Hier sind die Details:</p>
|
||||
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse; font-size:14px; line-height:1.3; background:#fcfcfd; border:1px solid #e5e7eb; border-radius:10px; overflow:hidden;">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="padding:8px 0; color:#6b7280; width:180px;">Benutzer</td>
|
||||
<td style="padding:8px 0; font-weight:600;">${
|
||||
<td class="w-label" style="padding:10px 14px; color:#6b7280; width:170px; border-bottom:1px solid #ececec;">Benutzer</td>
|
||||
<td style="padding:10px 14px; font-weight:600; border-bottom:1px solid #ececec; color:#111827;">${
|
||||
user || "N/A"
|
||||
}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding:8px 0; color:#6b7280; vertical-align:top;">Ausgeliehene Gegenstände</td>
|
||||
<td style="padding:8px 0; font-weight:600;">${itemsList}</td>
|
||||
<td style="padding:10px 14px; color:#6b7280; vertical-align:top; border-bottom:1px solid #ececec;">Ausgeliehene Gegenstände</td>
|
||||
<td style="padding:10px 14px; font-weight:600; border-bottom:1px solid #ececec; color:#111827;">${itemsList}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding:8px 0; color:#6b7280;">Startdatum</td>
|
||||
<td style="padding:8px 0; font-weight:600;">${formatDateTime(
|
||||
<td style="padding:10px 14px; color:#6b7280; border-bottom:1px solid #ececec;">Startdatum</td>
|
||||
<td style="padding:10px 14px; font-weight:600; border-bottom:1px solid #ececec; color:#111827;">${formatDateTime(
|
||||
startDate
|
||||
)}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding:8px 0; color:#6b7280;">Enddatum</td>
|
||||
<td style="padding:8px 0; font-weight:600;">${formatDateTime(
|
||||
<td style="padding:10px 14px; color:#6b7280; border-bottom:1px solid #ececec;">Enddatum</td>
|
||||
<td style="padding:10px 14px; font-weight:600; border-bottom:1px solid #ececec; color:#111827;">${formatDateTime(
|
||||
endDate
|
||||
)}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding:8px 0; color:#6b7280;">Erstellt am</td>
|
||||
<td style="padding:8px 0; font-weight:600;">${formatDateTime(
|
||||
<td style="padding:10px 14px; color:#6b7280;">Erstellt am</td>
|
||||
<td style="padding:10px 14px; font-weight:600; color:#111827;">${formatDateTime(
|
||||
createdDate
|
||||
)}</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p style="margin:20px 0 0 0; font-size:14px;">
|
||||
<a href="https://admin.insta.the1s.de/api" style="color:${brand}; text-decoration:underline;" target="_blank" rel="noopener noreferrer">
|
||||
Zur Übersicht aller Ausleihen
|
||||
</a>
|
||||
</p>
|
||||
<p style="margin:16px 0 0 0; font-size:12px; color:#6b7280;">Diese E-Mail wurde automatisch vom Ausleihsystem gesendet. Bitte nicht antworten.</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
</tbody>
|
||||
</table>
|
||||
<p style="margin:22px 0 0 0; font-size:14px;">
|
||||
<a href="https://admin.insta.the1s.de/api" style="display:inline-block; background:${brand}; color:#ffffff; text-decoration:none; padding:10px 16px; border-radius:6px; font-weight:600; font-size:14px;" target="_blank" rel="noopener noreferrer">
|
||||
Übersicht öffnen
|
||||
</a>
|
||||
</p>
|
||||
<p style="margin:18px 0 0 0; font-size:12px; color:#6b7280; line-height:1.4;">
|
||||
Diese E-Mail wurde automatisch vom Ausleihsystem gesendet. Bitte nicht antworten.
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
</html>`;
|
||||
}
|
||||
|
||||
@@ -196,7 +225,6 @@ router.post("/login", async (req, res) => {
|
||||
});
|
||||
|
||||
router.get("/items", authenticate, async (req, res) => {
|
||||
console.log(req);
|
||||
const result = await getItemsFromDatabase(req.user.role);
|
||||
if (result.success) {
|
||||
res.status(200).json(result.data);
|
||||
|
||||
@@ -5,7 +5,7 @@ import apiRouter from "./routes/api.js";
|
||||
import apiRouterV2 from "./routes/apiV2.js";
|
||||
env.config();
|
||||
const app = express();
|
||||
const port = 8102;
|
||||
const port = 8002;
|
||||
|
||||
app.use(cors());
|
||||
// Increase body size limits to support large CSV JSON payloads
|
||||
|
||||
@@ -8,7 +8,6 @@ const pool = mysql
|
||||
user: process.env.DB_USER,
|
||||
password: process.env.DB_PASSWORD,
|
||||
database: process.env.DB_NAME,
|
||||
port: process.env.DB_PORT,
|
||||
})
|
||||
.promise();
|
||||
|
||||
|
||||
@@ -9,7 +9,6 @@ export async function generateToken(payload) {
|
||||
.setIssuedAt()
|
||||
.setExpirationTime("2h") // Token valid for 2 hours
|
||||
.sign(secret);
|
||||
console.log("Generated token: ", newToken);
|
||||
return newToken;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,45 +1,35 @@
|
||||
services:
|
||||
borrow_system-frontend:
|
||||
container_name: borrow_system-frontend
|
||||
build: ./frontend
|
||||
ports:
|
||||
- "8101:8101"
|
||||
networks:
|
||||
- proxynet
|
||||
- borrow_system-internal
|
||||
environment:
|
||||
- CHOKIDAR_USEPOLLING=true
|
||||
volumes:
|
||||
- ./frontend:/app
|
||||
- /app/node_modules
|
||||
restart: unless-stopped
|
||||
# borrow_system-frontend:
|
||||
# container_name: borrow_system-frontend
|
||||
# build: ./frontend
|
||||
# ports:
|
||||
# - "8001:8001"
|
||||
# environment:
|
||||
# - CHOKIDAR_USEPOLLING=true
|
||||
# volumes:
|
||||
# - ./frontend:/app
|
||||
# - /app/node_modules
|
||||
# restart: unless-stopped
|
||||
|
||||
admin-frontend:
|
||||
container_name: admin-frontend
|
||||
build: ./admin
|
||||
networks:
|
||||
- proxynet
|
||||
- borrow_system-internal
|
||||
ports:
|
||||
- "8103:8103"
|
||||
environment:
|
||||
- CHOKIDAR_USEPOLLING=true
|
||||
volumes:
|
||||
- ./admin:/app
|
||||
- /app/node_modules
|
||||
restart: unless-stopped
|
||||
# admin-frontend:
|
||||
# container_name: admin-frontend
|
||||
# build: ./admin
|
||||
# ports:
|
||||
# - "8003:8003"
|
||||
# environment:
|
||||
# - CHOKIDAR_USEPOLLING=true
|
||||
# volumes:
|
||||
# - ./admin:/app
|
||||
# - /app/node_modules
|
||||
# restart: unless-stopped
|
||||
|
||||
borrow_system-backend:
|
||||
container_name: borrow_system-backend
|
||||
build: ./backend
|
||||
ports:
|
||||
- "8102:8102"
|
||||
networks:
|
||||
- proxynet
|
||||
- borrow_system-internal
|
||||
- "8002:8002"
|
||||
environment:
|
||||
DB_HOST: mysql
|
||||
DB_PORT: 3306
|
||||
DB_USER: root
|
||||
DB_PASSWORD: ${DB_PASSWORD}
|
||||
DB_NAME: borrow_system
|
||||
@@ -62,14 +52,6 @@ services:
|
||||
- ./mysql-timezone.cnf:/etc/mysql/conf.d/timezone.cnf:ro
|
||||
ports:
|
||||
- "3309:3306"
|
||||
networks:
|
||||
- borrow_system-internal
|
||||
|
||||
volumes:
|
||||
mysql-data:
|
||||
|
||||
networks:
|
||||
proxynet:
|
||||
external: true
|
||||
borrow_system-internal:
|
||||
external: false
|
||||
|
||||
@@ -7,6 +7,6 @@ RUN npm install
|
||||
|
||||
COPY . .
|
||||
|
||||
EXPOSE 8101
|
||||
EXPOSE 8001
|
||||
|
||||
CMD ["npm", "run", "dev"]
|
||||
@@ -1,17 +1,15 @@
|
||||
import { defineConfig } from "vite";
|
||||
import react from "@vitejs/plugin-react";
|
||||
import svgr from "vite-plugin-svgr";
|
||||
import tailwindcss from "@tailwindcss/vite";
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [tailwindcss()],
|
||||
plugins: [react(), svgr(), tailwindcss()],
|
||||
server: {
|
||||
host: "0.0.0.0",
|
||||
allowedHosts: ["insta.the1s.de"],
|
||||
port: 8101,
|
||||
watch: { usePolling: true },
|
||||
hmr: {
|
||||
host: "insta.the1s.de",
|
||||
port: 8101,
|
||||
protocol: "wss",
|
||||
port: 8001,
|
||||
watch: {
|
||||
usePolling: true,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user