Umstellung auf Next.js (App Router), Design analog werte-next
Führt das getrennte React/Vite-Frontend und Express/MongoDB-Backend in eine einzelne Next.js-Anwendung zusammen: - UI: React-Client-Komponenten (TabLayout, AppointmentForm, -List, ConfirmationModal) im Look von werte-next (Farben #CCCCFF/#85B7D7/ #FFFFDD, Rahmenbox, Tabellen-Liste, Footer mit Version/Datum) - API: Next.js Route Handler unter /api/appointments (GET/POST/PUT/DELETE, Soft-Delete beibehalten) - DB: MongoDB via lib/db.ts (gecachter Client, Standard appointmentsdb) - Tailwind 4 + TypeScript, Standalone-Docker-Build wie werte-next - Druckansicht der aktuellen offenen Termine beibehalten - Deployment: Dockerfile (multi-stage), docker-compose(.prod), deploy.sh Entfernt die alten frontend/- und backend/-Verzeichnisse. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,46 @@
|
||||
# dependencies
|
||||
node_modules
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
.pnpm-debug.log*
|
||||
|
||||
# next.js
|
||||
.next/
|
||||
out/
|
||||
build
|
||||
dist
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
*.pem
|
||||
|
||||
# debug
|
||||
*.log
|
||||
|
||||
# local env files
|
||||
.env
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# vercel
|
||||
.vercel
|
||||
|
||||
# typescript
|
||||
*.tsbuildinfo
|
||||
|
||||
# git
|
||||
.git
|
||||
.gitignore
|
||||
|
||||
# editor
|
||||
.vscode
|
||||
.idea
|
||||
|
||||
# docker
|
||||
Dockerfile
|
||||
.dockerignore
|
||||
docker-compose*.yml
|
||||
|
||||
# other
|
||||
README.md
|
||||
@@ -1,3 +0,0 @@
|
||||
# Environment variables for Docker Compose
|
||||
MONGO_ROOT_USER=root
|
||||
MONGO_ROOT_PASSWD=SFluorit
|
||||
+10
-13
@@ -1,19 +1,16 @@
|
||||
# Vorlage für die Produktionsumgebung.
|
||||
# Vorlage für die Umgebungsvariablen.
|
||||
# Kopieren nach .env und Werte anpassen: cp .env.example .env
|
||||
|
||||
# --- MongoDB Zugangsdaten (werden beim ersten Start der DB angelegt) ---
|
||||
# --- MongoDB ---
|
||||
# Verbindungs-URI. Die Datenbank wird aus der URI abgeleitet.
|
||||
# Lokal: mongodb://localhost:27017/appointmentsdb
|
||||
# Docker: mongodb://<user>:<passwd>@mongodb:27017/appointmentsdb?authSource=admin
|
||||
MONGO_URI=mongodb://localhost:27017/appointmentsdb
|
||||
|
||||
# --- MongoDB Root-Zugangsdaten (nur für docker-compose, DB-Erstanlage) ---
|
||||
MONGO_ROOT_USER=root
|
||||
MONGO_ROOT_PASSWD=bitte-aendern
|
||||
|
||||
# --- Frontend ---
|
||||
# Host-Port, unter dem die App erreichbar ist (Standard: 80)
|
||||
FRONTEND_PORT=80
|
||||
|
||||
# --- Images (nur für docker-compose.images.yml) ---
|
||||
# Tag der Images aus docker.citysensor.de (Standard: latest)
|
||||
# IMAGE_TAG=latest
|
||||
|
||||
# --- Backend / CORS ---
|
||||
# Nur nötig, falls das Frontend NICHT über denselben Host/nginx-Proxy läuft.
|
||||
# Standardmäßig nicht erforderlich. Mehrere Origins kommagetrennt, "*" für alle.
|
||||
# CORS_ORIGIN=https://meine-domain.de
|
||||
# Host-Port, unter dem die App erreichbar ist (Standard: 3000)
|
||||
APP_PORT=3000
|
||||
|
||||
+32
-26
@@ -1,32 +1,38 @@
|
||||
# Dependencies
|
||||
node_modules/
|
||||
package-lock.json
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# Environment variables
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.*
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# next.js
|
||||
/.next/
|
||||
/out/
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
*.pem
|
||||
|
||||
# debug
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
.pnpm-debug.log*
|
||||
|
||||
# env files
|
||||
.env
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Build output
|
||||
dist/
|
||||
build/
|
||||
# vercel
|
||||
.vercel
|
||||
|
||||
# Logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# IDE
|
||||
.vscode/
|
||||
.idea/
|
||||
*.swp
|
||||
*.swo
|
||||
*~
|
||||
.DS_Store
|
||||
|
||||
# Testing
|
||||
coverage/
|
||||
|
||||
# Misc
|
||||
.cache/
|
||||
# typescript
|
||||
*.tsbuildinfo
|
||||
next-env.d.ts
|
||||
|
||||
+47
@@ -0,0 +1,47 @@
|
||||
# Multi-stage build für die Next.js-Anwendung
|
||||
FROM node:22-alpine AS base
|
||||
|
||||
# Nur Dependencies installieren, wenn nötig
|
||||
FROM base AS deps
|
||||
RUN apk add --no-cache libc6-compat
|
||||
WORKDIR /app
|
||||
|
||||
COPY package.json package-lock.json* ./
|
||||
RUN npm ci
|
||||
|
||||
# Quellcode bauen
|
||||
FROM base AS builder
|
||||
WORKDIR /app
|
||||
COPY --from=deps /app/node_modules ./node_modules
|
||||
COPY . .
|
||||
|
||||
# Build-Datum als Build-Argument
|
||||
ARG BUILD_DATE
|
||||
ENV NEXT_PUBLIC_BUILD_DATE=${BUILD_DATE}
|
||||
|
||||
ENV NEXT_TELEMETRY_DISABLED=1
|
||||
|
||||
RUN npm run build
|
||||
|
||||
# Produktions-Image
|
||||
FROM base AS runner
|
||||
WORKDIR /app
|
||||
|
||||
ENV NODE_ENV=production
|
||||
ENV NEXT_TELEMETRY_DISABLED=1
|
||||
|
||||
RUN addgroup --system --gid 1001 nodejs
|
||||
RUN adduser --system --uid 1001 nextjs
|
||||
|
||||
COPY --from=builder /app/public ./public
|
||||
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
|
||||
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
|
||||
|
||||
USER nextjs
|
||||
|
||||
EXPOSE 3000
|
||||
|
||||
ENV PORT=3000
|
||||
ENV HOSTNAME="0.0.0.0"
|
||||
|
||||
CMD ["node", "server.js"]
|
||||
@@ -0,0 +1,47 @@
|
||||
# Arzt-Termine (Next.js)
|
||||
|
||||
Verwaltung von Arzt-Terminen als Next.js-Anwendung (App Router) mit MongoDB als
|
||||
Datenspeicher. Design und Layout orientieren sich am Projekt `werte-next`.
|
||||
|
||||
Vormals bestand das Projekt aus einem getrennten React/Vite-Frontend und einem
|
||||
Express-Backend. Beides wurde in eine einzelne Next.js-App zusammengeführt:
|
||||
|
||||
- **UI** – React-Client-Komponenten in `components/`, Seite in `app/page.tsx`
|
||||
- **API** – Next.js Route Handler unter `app/api/appointments`
|
||||
- **DB** – MongoDB-Zugriff in `lib/db.ts`
|
||||
|
||||
## Funktionen
|
||||
|
||||
- Termine anlegen, bearbeiten, als erledigt markieren und (soft) löschen
|
||||
- Felder: Arztname, Fachrichtung, Datum/Uhrzeit, Bemerkungen
|
||||
- Druckansicht mit den aktuellen (offenen) Terminen ab heute
|
||||
|
||||
## Entwicklung
|
||||
|
||||
```bash
|
||||
cp .env.example .env # MONGO_URI setzen
|
||||
npm install
|
||||
npm run dev # http://localhost:3000
|
||||
```
|
||||
|
||||
## Produktion (Docker)
|
||||
|
||||
```bash
|
||||
cp .env.example .env # MONGO_ROOT_USER / MONGO_ROOT_PASSWD setzen
|
||||
docker compose up -d --build
|
||||
```
|
||||
|
||||
## Deploy zur Registry
|
||||
|
||||
```bash
|
||||
./deploy.sh [tag] # baut & pusht docker.citysensor.de/aerzte-next
|
||||
```
|
||||
|
||||
## Umgebungsvariablen
|
||||
|
||||
| Variable | Beschreibung |
|
||||
| ------------------- | ----------------------------------------------- |
|
||||
| `MONGO_URI` | MongoDB-Verbindung inkl. Datenbankname |
|
||||
| `MONGO_ROOT_USER` | Root-User für den MongoDB-Container (Compose) |
|
||||
| `MONGO_ROOT_PASSWD` | Root-Passwort für den MongoDB-Container |
|
||||
| `APP_PORT` | Host-Port der App (Standard: 3000) |
|
||||
@@ -0,0 +1,93 @@
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
import { ObjectId, WithId, Document } from 'mongodb';
|
||||
import { getDb, APPOINTMENTS_COLLECTION } from '@/lib/db';
|
||||
import { Appointment } from '@/types/appointment';
|
||||
|
||||
function normalize(doc: WithId<Document>): Appointment {
|
||||
return {
|
||||
id: doc._id.toString(),
|
||||
arztName: doc.arztName,
|
||||
arztArt: doc.arztArt ?? '',
|
||||
termin: new Date(doc.termin).toISOString(),
|
||||
erledigt: Boolean(doc.erledigt),
|
||||
bemerkungen: doc.bemerkungen ?? '',
|
||||
};
|
||||
}
|
||||
|
||||
// PUT /api/appointments/:id - Termin aktualisieren (ganz oder teilweise)
|
||||
export async function PUT(
|
||||
request: NextRequest,
|
||||
context: { params: Promise<{ id: string }> }
|
||||
) {
|
||||
try {
|
||||
const { id } = await context.params;
|
||||
const body = await request.json();
|
||||
|
||||
// Nur bekannte Felder übernehmen; termin ggf. in Date umwandeln.
|
||||
const updateFields: Record<string, unknown> = {};
|
||||
if (body.arztName !== undefined) updateFields.arztName = body.arztName;
|
||||
if (body.arztArt !== undefined) updateFields.arztArt = body.arztArt;
|
||||
if (body.termin !== undefined) updateFields.termin = new Date(body.termin);
|
||||
if (body.erledigt !== undefined) updateFields.erledigt = Boolean(body.erledigt);
|
||||
if (body.bemerkungen !== undefined) updateFields.bemerkungen = body.bemerkungen;
|
||||
|
||||
const db = await getDb();
|
||||
const filter = { _id: new ObjectId(id) };
|
||||
|
||||
const result = await db
|
||||
.collection(APPOINTMENTS_COLLECTION)
|
||||
.updateOne(filter, { $set: updateFields });
|
||||
|
||||
if (result.matchedCount === 0) {
|
||||
return NextResponse.json(
|
||||
{ success: false, error: 'Termin nicht gefunden.' },
|
||||
{ status: 404 }
|
||||
);
|
||||
}
|
||||
|
||||
const updated = await db
|
||||
.collection(APPOINTMENTS_COLLECTION)
|
||||
.findOne(filter);
|
||||
|
||||
return NextResponse.json({ success: true, data: normalize(updated!) });
|
||||
} catch (error) {
|
||||
console.error('Fehler beim Aktualisieren des Termins:', error);
|
||||
return NextResponse.json(
|
||||
{ success: false, error: 'Ungültige ID oder Serverfehler' },
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// DELETE /api/appointments/:id - Soft-Delete (setzt deleted-Flag)
|
||||
export async function DELETE(
|
||||
request: NextRequest,
|
||||
context: { params: Promise<{ id: string }> }
|
||||
) {
|
||||
try {
|
||||
const { id } = await context.params;
|
||||
|
||||
const db = await getDb();
|
||||
const result = await db
|
||||
.collection(APPOINTMENTS_COLLECTION)
|
||||
.updateOne(
|
||||
{ _id: new ObjectId(id) },
|
||||
{ $set: { deleted: true, deletedAt: new Date() } }
|
||||
);
|
||||
|
||||
if (result.matchedCount === 0) {
|
||||
return NextResponse.json(
|
||||
{ success: false, error: 'Termin nicht gefunden.' },
|
||||
{ status: 404 }
|
||||
);
|
||||
}
|
||||
|
||||
return NextResponse.json({ success: true });
|
||||
} catch (error) {
|
||||
console.error('Fehler beim Löschen des Termins:', error);
|
||||
return NextResponse.json(
|
||||
{ success: false, error: 'Ungültige ID oder Serverfehler' },
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
import { WithId, Document } from 'mongodb';
|
||||
import { getDb, APPOINTMENTS_COLLECTION } from '@/lib/db';
|
||||
import { Appointment, AppointmentPayload } from '@/types/appointment';
|
||||
|
||||
// Wandelt ein MongoDB-Dokument in das vom Frontend erwartete Format um
|
||||
// (_id -> id als String, termin als ISO-String).
|
||||
function normalize(doc: WithId<Document>): Appointment {
|
||||
return {
|
||||
id: doc._id.toString(),
|
||||
arztName: doc.arztName,
|
||||
arztArt: doc.arztArt ?? '',
|
||||
termin: new Date(doc.termin).toISOString(),
|
||||
erledigt: Boolean(doc.erledigt),
|
||||
bemerkungen: doc.bemerkungen ?? '',
|
||||
};
|
||||
}
|
||||
|
||||
// GET /api/appointments - Alle nicht gelöschten Termine abrufen
|
||||
export async function GET() {
|
||||
try {
|
||||
const db = await getDb();
|
||||
const docs = await db
|
||||
.collection(APPOINTMENTS_COLLECTION)
|
||||
.find({ deleted: { $ne: true } })
|
||||
.sort({ termin: 1 })
|
||||
.toArray();
|
||||
|
||||
return NextResponse.json(
|
||||
{ success: true, data: docs.map(normalize) },
|
||||
{
|
||||
headers: {
|
||||
'Cache-Control': 'no-store, no-cache, must-revalidate',
|
||||
Pragma: 'no-cache',
|
||||
Expires: '0',
|
||||
},
|
||||
}
|
||||
);
|
||||
} catch (error) {
|
||||
console.error('Fehler beim Abrufen der Termine:', error);
|
||||
return NextResponse.json(
|
||||
{ success: false, error: 'Fehler beim Abrufen der Termine' },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// POST /api/appointments - Neuen Termin erstellen
|
||||
export async function POST(request: NextRequest) {
|
||||
try {
|
||||
const body: AppointmentPayload = await request.json();
|
||||
|
||||
if (!body.arztName || !body.termin) {
|
||||
return NextResponse.json(
|
||||
{ success: false, error: 'Arztname und Termin sind erforderlich.' },
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
|
||||
const db = await getDb();
|
||||
const doc = {
|
||||
arztName: body.arztName,
|
||||
arztArt: body.arztArt ?? '',
|
||||
termin: new Date(body.termin),
|
||||
erledigt: Boolean(body.erledigt),
|
||||
bemerkungen: body.bemerkungen ?? '',
|
||||
deleted: false,
|
||||
};
|
||||
|
||||
const result = await db.collection(APPOINTMENTS_COLLECTION).insertOne(doc);
|
||||
|
||||
return NextResponse.json(
|
||||
{ success: true, data: normalize({ _id: result.insertedId, ...doc }) },
|
||||
{ status: 201 }
|
||||
);
|
||||
} catch (error) {
|
||||
console.error('Fehler beim Erstellen des Termins:', error);
|
||||
return NextResponse.json(
|
||||
{ success: false, error: 'Fehler beim Speichern des Termins' },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
/* stylelint-disable at-rule-no-unknown */
|
||||
@import "tailwindcss";
|
||||
@source "../components/**/*.tsx";
|
||||
@source "../app/**/*.tsx";
|
||||
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
/* --- Druckansicht --- */
|
||||
/* Standard: Druckbereich ausblenden */
|
||||
.print-only {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media print {
|
||||
/* Bildschirm-UI ausblenden */
|
||||
.screen-only,
|
||||
.screen-only * {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Nur Druckbereich anzeigen */
|
||||
.print-only {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #ffffff;
|
||||
margin: 10mm;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.print-only h1 {
|
||||
margin-top: 0;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.print-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.print-table th,
|
||||
.print-table td {
|
||||
border: 1px solid #000;
|
||||
padding: 6px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.print-table thead th {
|
||||
background: #eee;
|
||||
-webkit-print-color-adjust: exact;
|
||||
print-color-adjust: exact;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Geist, Geist_Mono } from "next/font/google";
|
||||
import "./globals.css";
|
||||
|
||||
const geistSans = Geist({
|
||||
variable: "--font-geist-sans",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
const geistMono = Geist_Mono({
|
||||
variable: "--font-geist-mono",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Arzt-Termine",
|
||||
description: "Verwaltung von Arzt-Terminen",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html lang="de">
|
||||
<body
|
||||
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
||||
>
|
||||
{children}
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
+212
@@ -0,0 +1,212 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import TabLayout from '@/components/TabLayout';
|
||||
import AppointmentForm from '@/components/AppointmentForm';
|
||||
import AppointmentList from '@/components/AppointmentList';
|
||||
import ConfirmationModal from '@/components/ConfirmationModal';
|
||||
import { Appointment, AppointmentPayload } from '@/types/appointment';
|
||||
|
||||
export default function Home() {
|
||||
const [appointments, setAppointments] = useState<Appointment[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [editingAppointment, setEditingAppointment] =
|
||||
useState<Appointment | null>(null);
|
||||
const [deleteId, setDeleteId] = useState<string | null>(null);
|
||||
|
||||
const fetchAppointments = async () => {
|
||||
try {
|
||||
const res = await fetch('/api/appointments', { cache: 'no-store' });
|
||||
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
||||
const data = await res.json();
|
||||
if (data.success) {
|
||||
setAppointments(data.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Fehler beim Laden der Termine:', error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Termine einmalig beim Mount laden.
|
||||
useEffect(() => {
|
||||
// eslint-disable-next-line react-hooks/set-state-in-effect
|
||||
fetchAppointments();
|
||||
}, []);
|
||||
|
||||
// CREATE
|
||||
const addAppointment = async (payload: AppointmentPayload) => {
|
||||
try {
|
||||
const res = await fetch('/api/appointments', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
if (!res.ok) throw new Error('Fehler beim Hinzufügen.');
|
||||
const data = await res.json();
|
||||
if (data.success) {
|
||||
setAppointments((prev) => [...prev, data.data]);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Fehler beim Speichern des Termins:', error);
|
||||
alert('Fehler beim Speichern!');
|
||||
}
|
||||
};
|
||||
|
||||
// UPDATE (vollständig, vom Formular)
|
||||
const updateAppointment = async (id: string, payload: AppointmentPayload) => {
|
||||
try {
|
||||
const res = await fetch(`/api/appointments/${id}`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
if (!res.ok) throw new Error('Fehler beim Aktualisieren.');
|
||||
const data = await res.json();
|
||||
if (data.success) {
|
||||
setAppointments((prev) =>
|
||||
prev.map((a) => (a.id === id ? data.data : a))
|
||||
);
|
||||
setEditingAppointment(null);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Fehler beim Aktualisieren des Termins:', error);
|
||||
alert('Fehler beim Aktualisieren!');
|
||||
}
|
||||
};
|
||||
|
||||
// Statuswechsel (erledigt)
|
||||
const toggleDone = async (id: string) => {
|
||||
const current = appointments.find((a) => a.id === id);
|
||||
if (!current) return;
|
||||
const newStatus = !current.erledigt;
|
||||
// Optimistisches Update
|
||||
setAppointments((prev) =>
|
||||
prev.map((a) => (a.id === id ? { ...a, erledigt: newStatus } : a))
|
||||
);
|
||||
try {
|
||||
const res = await fetch(`/api/appointments/${id}`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ erledigt: newStatus }),
|
||||
});
|
||||
if (!res.ok) throw new Error('Fehler beim Statuswechsel.');
|
||||
} catch (error) {
|
||||
console.error('Fehler beim Statuswechsel:', error);
|
||||
// Rückgängig machen bei Fehler
|
||||
setAppointments((prev) =>
|
||||
prev.map((a) => (a.id === id ? { ...a, erledigt: current.erledigt } : a))
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
// DELETE (Soft-Delete) mit Bestätigung
|
||||
const confirmDelete = async () => {
|
||||
const id = deleteId;
|
||||
setDeleteId(null);
|
||||
if (!id) return;
|
||||
try {
|
||||
const res = await fetch(`/api/appointments/${id}`, { method: 'DELETE' });
|
||||
if (!res.ok) throw new Error('Fehler beim Löschen.');
|
||||
setAppointments((prev) => prev.filter((a) => a.id !== id));
|
||||
if (editingAppointment && editingAppointment.id === id) {
|
||||
setEditingAppointment(null);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Fehler beim Löschen des Termins:', error);
|
||||
alert('Fehler beim Löschen!');
|
||||
}
|
||||
};
|
||||
|
||||
const startEdit = (appointment: Appointment) => {
|
||||
setEditingAppointment(appointment);
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
};
|
||||
|
||||
const handlePrint = () => window.print();
|
||||
|
||||
// Aktuelle (offene) Termine ab heute für die Druckansicht
|
||||
const startOfToday = new Date();
|
||||
startOfToday.setHours(0, 0, 0, 0);
|
||||
const currentAppointments = appointments
|
||||
.filter((a) => !a.erledigt && new Date(a.termin) >= startOfToday)
|
||||
.sort(
|
||||
(a, b) => new Date(a.termin).getTime() - new Date(b.termin).getTime()
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Bildschirmansicht */}
|
||||
<div className="screen-only">
|
||||
<TabLayout onPrint={handlePrint}>
|
||||
<div className="mb-8">
|
||||
<h2 className="text-xl font-semibold mb-4">
|
||||
{editingAppointment
|
||||
? '✍️ Termin bearbeiten'
|
||||
: '🗓️ Neuen Termin hinzufügen'}
|
||||
</h2>
|
||||
<AppointmentForm
|
||||
key={editingAppointment?.id ?? 'new'}
|
||||
onAdd={addAppointment}
|
||||
onUpdate={updateAppointment}
|
||||
editingAppointment={editingAppointment}
|
||||
onCancelEdit={() => setEditingAppointment(null)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="bg-white border border-black rounded-lg shadow-md p-6">
|
||||
<h2 className="text-xl font-semibold mb-4">Alle Termine</h2>
|
||||
{isLoading ? (
|
||||
<div className="text-center py-4">Lade Daten...</div>
|
||||
) : (
|
||||
<AppointmentList
|
||||
appointments={appointments}
|
||||
onToggleDone={toggleDone}
|
||||
onEdit={startEdit}
|
||||
onDelete={setDeleteId}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</TabLayout>
|
||||
</div>
|
||||
|
||||
{/* Druckansicht: nur aktuelle (offene) Termine ab heute */}
|
||||
<div className="print-only">
|
||||
<h1>Aktuelle Arzt-Termine</h1>
|
||||
{currentAppointments.length === 0 ? (
|
||||
<p>Keine aktuellen Termine vorhanden.</p>
|
||||
) : (
|
||||
<table className="print-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Arzt</th>
|
||||
<th>Fachrichtung</th>
|
||||
<th>Datum</th>
|
||||
<th>Bemerkungen</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{currentAppointments.map((app) => (
|
||||
<tr key={app.id}>
|
||||
<td>{app.arztName}</td>
|
||||
<td>{app.arztArt || ''}</td>
|
||||
<td>{new Date(app.termin).toLocaleString('de-DE')}</td>
|
||||
<td>{app.bemerkungen || ''}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<ConfirmationModal
|
||||
isOpen={deleteId !== null}
|
||||
title="Termin löschen"
|
||||
message="Möchten Sie diesen Termin wirklich löschen?"
|
||||
onConfirm={confirmDelete}
|
||||
onCancel={() => setDeleteId(null)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
node_modules
|
||||
npm-debug.log
|
||||
.env
|
||||
.git
|
||||
.gitignore
|
||||
@@ -1,18 +0,0 @@
|
||||
FROM node:20-alpine
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
# Copy package files
|
||||
COPY package*.json ./
|
||||
|
||||
# Install dependencies
|
||||
RUN npm ci
|
||||
|
||||
# Copy source code
|
||||
COPY . .
|
||||
|
||||
# Expose the application port
|
||||
EXPOSE 3001
|
||||
|
||||
# Start the application
|
||||
CMD ["npm", "run", "dev"]
|
||||
@@ -1,17 +0,0 @@
|
||||
FROM node:20-alpine
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
# Nur Produktions-Abhängigkeiten installieren
|
||||
COPY package*.json ./
|
||||
RUN npm ci --omit=dev
|
||||
|
||||
# Quellcode kopieren
|
||||
COPY . .
|
||||
|
||||
ENV NODE_ENV=production
|
||||
|
||||
EXPOSE 3001
|
||||
|
||||
# Produktionsstart (ohne nodemon)
|
||||
CMD ["npm", "start"]
|
||||
@@ -1,24 +0,0 @@
|
||||
{
|
||||
"name": "backend",
|
||||
"type": "module",
|
||||
"version": "1.0.0",
|
||||
"vdate": "2025-11-23 11:00 UTC",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"start": "node src/server.js",
|
||||
"dev": "nodemon src/server.js"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"cors": "^2.8.5",
|
||||
"dotenv": "^17.2.3",
|
||||
"express": "^5.1.0",
|
||||
"mongodb": "^7.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"nodemon": "^3.1.11"
|
||||
}
|
||||
}
|
||||
@@ -1,40 +0,0 @@
|
||||
// src/db/db.js
|
||||
import 'dotenv/config'; // Importiert und lädt Umgebungsvariablen
|
||||
import { MongoClient } from 'mongodb';
|
||||
|
||||
// MongoDB Verbindungs-URI aus der .env-Datei
|
||||
const uri = process.env.MONGO_URI;
|
||||
|
||||
let db;
|
||||
|
||||
/**
|
||||
* Stellt die Verbindung zur MongoDB her.
|
||||
* @returns {db} Die verbundene Datenbankinstanz.
|
||||
*/
|
||||
export async function connectToDb() {
|
||||
try {
|
||||
const client = new MongoClient(uri, {
|
||||
});
|
||||
|
||||
await client.connect();
|
||||
|
||||
// Die Datenbankinstanz speichern
|
||||
db = client.db();
|
||||
|
||||
console.log(`✅ Erfolgreich mit MongoDB verbunden.`);
|
||||
|
||||
return db;
|
||||
|
||||
} catch (error) {
|
||||
console.error("❌ Fehler bei der Verbindung zur MongoDB:", error);
|
||||
process.exit(1);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Gibt die gespeicherte Datenbankinstanz zurück.
|
||||
* @returns {db} Die Datenbankinstanz.
|
||||
*/
|
||||
export function getDb() {
|
||||
return db;
|
||||
}
|
||||
@@ -1,175 +0,0 @@
|
||||
// src/server.js
|
||||
import 'dotenv/config';
|
||||
import express from 'express';
|
||||
import cors from 'cors';
|
||||
import { connectToDb, getDb } from './db/db.js';
|
||||
import { ObjectId } from 'mongodb'; // Wichtig für die Arbeit mit MongoDB IDs
|
||||
|
||||
// Initialisiert Express
|
||||
const app = express();
|
||||
const PORT = process.env.PORT || 3001;
|
||||
|
||||
// Erlaubte CORS-Origins aus der Umgebung (kommagetrennt).
|
||||
// In Produktion wird das Frontend i.d.R. über denselben Host (nginx-Proxy)
|
||||
// ausgeliefert, dann sind keine Cross-Origin-Anfragen nötig.
|
||||
// Standard: localhost:5173 für die lokale Entwicklung.
|
||||
// CORS_ORIGIN="*" erlaubt alle Origins.
|
||||
const corsOrigins = (process.env.CORS_ORIGIN || 'http://localhost:5173')
|
||||
.split(',')
|
||||
.map((o) => o.trim());
|
||||
|
||||
app.use(cors({
|
||||
origin: corsOrigins.includes('*') ? true : corsOrigins,
|
||||
methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
|
||||
allowedHeaders: ['Origin', 'X-Requested-With', 'Content-Type', 'Accept'],
|
||||
credentials: true,
|
||||
}));
|
||||
|
||||
app.use((req, res, next) => {
|
||||
console.log(`📥 ${req.method} ${req.path} from ${req.get('origin') || 'unknown origin'}`);
|
||||
next();
|
||||
});
|
||||
app.use(express.json());
|
||||
|
||||
// -----------------------------------------------------
|
||||
// API ROUTEN
|
||||
// -----------------------------------------------------
|
||||
|
||||
// Root-Route zur Status-Überprüfung
|
||||
app.get('/', (req, res) => {
|
||||
res.json({
|
||||
message: 'Appointment API Server läuft',
|
||||
status: 'ok',
|
||||
endpoints: {
|
||||
appointments: '/api/appointments'
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 1. READ: Alle Termine abrufen (GET /api/appointments)
|
||||
app.get('/api/appointments', async (req, res) => {
|
||||
try {
|
||||
const db = getDb();
|
||||
// Finde alle Dokumente in der Collection 'appointments', die nicht gelöscht sind
|
||||
const appointments = await db.collection('appointments')
|
||||
.find({ deleted: { $ne: true } })
|
||||
// Optional: Nach Termindatum sortieren (aufsteigend)
|
||||
.sort({ termin: 1 })
|
||||
.toArray();
|
||||
|
||||
// Sende die Daten zurück an das Frontend
|
||||
res.json(appointments);
|
||||
|
||||
} catch (error) {
|
||||
console.error("Fehler beim Abrufen der Termine:", error);
|
||||
res.status(500).json({ message: "Interner Serverfehler beim Abrufen der Daten." });
|
||||
}
|
||||
});
|
||||
|
||||
// 2. CREATE: Neuen Termin erstellen (POST /api/appointments)
|
||||
app.post('/api/appointments', async (req, res) => {
|
||||
try {
|
||||
const db = getDb();
|
||||
const appointmentData = req.body; // Die Daten kommen vom React-Formular
|
||||
|
||||
// Validiere, dass der Termin ein gültiges Datum hat (Optional, aber gut)
|
||||
if (!appointmentData.arztName || !appointmentData.termin) {
|
||||
return res.status(400).json({ message: "Arztname und Termin sind erforderlich." });
|
||||
}
|
||||
|
||||
// Mongo generiert die _id automatisch.
|
||||
const result = await db.collection('appointments').insertOne(appointmentData);
|
||||
|
||||
// Der eingefügte Termin, inklusive der von Mongo erstellten _id
|
||||
const newAppointment = { _id: result.insertedId, ...appointmentData };
|
||||
|
||||
// Sende den neu erstellten Termin zurück an das Frontend (Status 201 Created)
|
||||
res.status(201).json(newAppointment);
|
||||
|
||||
} catch (error) {
|
||||
console.error("Fehler beim Erstellen des Termins:", error);
|
||||
res.status(500).json({ message: "Interner Serverfehler beim Speichern der Daten." });
|
||||
}
|
||||
});
|
||||
|
||||
// 3. UPDATE: Termin aktualisieren (PUT /api/appointments/:id)
|
||||
app.put('/api/appointments/:id', async (req, res) => {
|
||||
try {
|
||||
const db = getDb();
|
||||
const { id } = req.params;
|
||||
const updatedFields = req.body; // Enthält alle Felder (oder nur die geänderten)
|
||||
|
||||
// Die _id des Dokuments muss ein gültiges ObjectId-Objekt sein
|
||||
const filter = { _id: new ObjectId(id) };
|
||||
|
||||
// Entferne das _id Feld aus den aktualisierten Daten, um Fehler zu vermeiden
|
||||
delete updatedFields._id;
|
||||
|
||||
// Führe die Aktualisierung durch
|
||||
const result = await db.collection('appointments').updateOne(
|
||||
filter,
|
||||
{ $set: updatedFields }
|
||||
);
|
||||
|
||||
if (result.matchedCount === 0) {
|
||||
return res.status(404).json({ message: "Termin nicht gefunden." });
|
||||
}
|
||||
|
||||
// Hole das aktualisierte Dokument, um es zurückzusenden (optional, aber nützlich)
|
||||
const updatedAppointment = await db.collection('appointments').findOne(filter);
|
||||
|
||||
res.json(updatedAppointment);
|
||||
|
||||
} catch (error) {
|
||||
console.error(`Fehler beim Aktualisieren des Termins ${req.params.id}:`, error);
|
||||
// Gib einen 400 Bad Request zurück, falls die ID ungültig ist (z.B. falsches Format)
|
||||
res.status(400).json({ message: "Ungültige ID oder Serverfehler." });
|
||||
}
|
||||
});
|
||||
|
||||
// 4. DELETE: Termin löschen (DELETE /api/appointments/:id)
|
||||
// Soft Delete: Setzt das deleted-Flag statt den Eintrag zu löschen
|
||||
app.delete('/api/appointments/:id', async (req, res) => {
|
||||
try {
|
||||
const db = getDb();
|
||||
const { id } = req.params;
|
||||
|
||||
const filter = { _id: new ObjectId(id) };
|
||||
|
||||
// Setze das deleted-Flag auf true statt den Eintrag zu löschen
|
||||
const result = await db.collection('appointments').updateOne(
|
||||
filter,
|
||||
{ $set: { deleted: true, deletedAt: new Date() } }
|
||||
);
|
||||
|
||||
if (result.matchedCount === 0) {
|
||||
return res.status(404).json({ message: "Termin nicht gefunden." });
|
||||
}
|
||||
|
||||
// Sende Status 204 (No Content), um den erfolgreichen Löschvorgang zu signalisieren
|
||||
res.status(204).send();
|
||||
|
||||
} catch (error) {
|
||||
console.error(`Fehler beim Löschen des Termins ${req.params.id}:`, error);
|
||||
res.status(400).json({ message: "Ungültige ID oder Serverfehler." });
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// -----------------------------------------------------
|
||||
// Server Start Logik
|
||||
// -----------------------------------------------------
|
||||
async function startServer() {
|
||||
try {
|
||||
await connectToDb();
|
||||
|
||||
app.listen(PORT, () => {
|
||||
console.log(`🚀 Server läuft auf Port ${PORT}`);
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error("Fehler beim Starten des Servers:", error);
|
||||
}
|
||||
}
|
||||
|
||||
startServer();
|
||||
@@ -0,0 +1,226 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Appointment, AppointmentFormData, AppointmentPayload } from '@/types/appointment';
|
||||
|
||||
interface AppointmentFormProps {
|
||||
onAdd: (payload: AppointmentPayload) => void;
|
||||
onUpdate: (id: string, payload: AppointmentPayload) => void;
|
||||
editingAppointment: Appointment | null;
|
||||
onCancelEdit: () => void;
|
||||
}
|
||||
|
||||
const emptyForm: AppointmentFormData = {
|
||||
arztName: '',
|
||||
arztArt: '',
|
||||
terminDatum: '',
|
||||
terminUhrzeit: '',
|
||||
bemerkungen: '',
|
||||
};
|
||||
|
||||
// Hilfsfunktionen: ISO-String -> Formularfelder
|
||||
const toDateInput = (iso: string) => {
|
||||
const d = new Date(iso);
|
||||
const y = d.getFullYear();
|
||||
const m = String(d.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(d.getDate()).padStart(2, '0');
|
||||
return `${y}-${m}-${day}`;
|
||||
};
|
||||
const toTimeInput = (iso: string) => {
|
||||
const d = new Date(iso);
|
||||
const h = String(d.getHours()).padStart(2, '0');
|
||||
const min = String(d.getMinutes()).padStart(2, '0');
|
||||
return `${h}:${min}`;
|
||||
};
|
||||
|
||||
// Leitet die Formularfelder aus dem zu bearbeitenden Termin ab (oder leer).
|
||||
const buildInitialForm = (
|
||||
editing: Appointment | null
|
||||
): AppointmentFormData =>
|
||||
editing
|
||||
? {
|
||||
arztName: editing.arztName,
|
||||
arztArt: editing.arztArt ?? '',
|
||||
terminDatum: toDateInput(editing.termin),
|
||||
terminUhrzeit: toTimeInput(editing.termin),
|
||||
bemerkungen: editing.bemerkungen ?? '',
|
||||
}
|
||||
: emptyForm;
|
||||
|
||||
export default function AppointmentForm({
|
||||
onAdd,
|
||||
onUpdate,
|
||||
editingAppointment,
|
||||
onCancelEdit,
|
||||
}: AppointmentFormProps) {
|
||||
// Der Anfangszustand wird aus den Props abgeleitet. Wechselt der zu
|
||||
// bearbeitende Termin, wird die Komponente über einen `key` im Parent
|
||||
// neu gemountet – dadurch entfällt ein setState im Effect.
|
||||
const [formData, setFormData] = useState<AppointmentFormData>(() =>
|
||||
buildInitialForm(editingAppointment)
|
||||
);
|
||||
|
||||
const handleChange = (
|
||||
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
|
||||
) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData((prev) => ({ ...prev, [name]: value }));
|
||||
};
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!formData.arztName || !formData.terminDatum || !formData.terminUhrzeit) {
|
||||
alert('Bitte füllen Sie Name, Datum und Uhrzeit aus.');
|
||||
return;
|
||||
}
|
||||
|
||||
const termin = new Date(
|
||||
`${formData.terminDatum}T${formData.terminUhrzeit}`
|
||||
).toISOString();
|
||||
|
||||
const payload: AppointmentPayload = {
|
||||
arztName: formData.arztName,
|
||||
arztArt: formData.arztArt,
|
||||
termin,
|
||||
erledigt: editingAppointment ? editingAppointment.erledigt : false,
|
||||
bemerkungen: formData.bemerkungen,
|
||||
};
|
||||
|
||||
if (editingAppointment) {
|
||||
onUpdate(editingAppointment.id, payload);
|
||||
} else {
|
||||
onAdd(payload);
|
||||
}
|
||||
};
|
||||
|
||||
const inputClass =
|
||||
'w-full px-2 py-1 text-sm rounded border-2 border-gray-400 bg-white focus:border-blue-500 focus:outline-none';
|
||||
|
||||
return (
|
||||
<div className="bg-[#CCCCFF] border border-black p-6 rounded-lg mb-6">
|
||||
{editingAppointment && (
|
||||
<div className="mb-4 p-3 bg-blue-100 border border-blue-400 rounded text-sm text-blue-800">
|
||||
ℹ️ <strong>Bearbeitungsmodus:</strong> Sie bearbeiten einen bestehenden
|
||||
Termin. Klicken Sie auf "Aktualisieren", um die Änderungen zu
|
||||
speichern, oder "Abbrechen", um zur Neuerfassung
|
||||
zurückzukehren.
|
||||
</div>
|
||||
)}
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label
|
||||
htmlFor="arztName"
|
||||
className="block text-sm font-medium text-gray-800 mb-1"
|
||||
>
|
||||
Name des Arztes
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="arztName"
|
||||
name="arztName"
|
||||
className={inputClass}
|
||||
value={formData.arztName}
|
||||
onChange={handleChange}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="arztArt"
|
||||
className="block text-sm font-medium text-gray-800 mb-1"
|
||||
>
|
||||
Art des Arztes
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="arztArt"
|
||||
name="arztArt"
|
||||
className={inputClass}
|
||||
placeholder="z.B. Zahnarzt, Kardiologe"
|
||||
value={formData.arztArt}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="terminDatum"
|
||||
className="block text-sm font-medium text-gray-800 mb-1"
|
||||
>
|
||||
Datum
|
||||
</label>
|
||||
<input
|
||||
type="date"
|
||||
id="terminDatum"
|
||||
name="terminDatum"
|
||||
className={inputClass}
|
||||
value={formData.terminDatum}
|
||||
onChange={handleChange}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="terminUhrzeit"
|
||||
className="block text-sm font-medium text-gray-800 mb-1"
|
||||
>
|
||||
Uhrzeit
|
||||
</label>
|
||||
<input
|
||||
type="time"
|
||||
id="terminUhrzeit"
|
||||
name="terminUhrzeit"
|
||||
className={inputClass}
|
||||
value={formData.terminUhrzeit}
|
||||
onChange={handleChange}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-2">
|
||||
<label
|
||||
htmlFor="bemerkungen"
|
||||
className="block text-sm font-medium text-gray-800 mb-1"
|
||||
>
|
||||
Bemerkungen
|
||||
</label>
|
||||
<textarea
|
||||
id="bemerkungen"
|
||||
name="bemerkungen"
|
||||
rows={3}
|
||||
className={`${inputClass} resize-y`}
|
||||
value={formData.bemerkungen}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center gap-4 mt-6">
|
||||
<button
|
||||
type="submit"
|
||||
className="bg-[#85B7D7] hover:bg-[#6a9fc5] text-black font-medium py-2 px-8 rounded-lg transition-colors"
|
||||
>
|
||||
{editingAppointment ? 'Aktualisieren' : 'Speichern'}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
if (editingAppointment) {
|
||||
onCancelEdit();
|
||||
} else {
|
||||
setFormData(emptyForm);
|
||||
}
|
||||
}}
|
||||
className="bg-[#85B7D7] hover:bg-[#6a9fc5] text-black font-medium py-2 px-8 rounded-lg transition-colors"
|
||||
>
|
||||
{editingAppointment ? 'Abbrechen' : 'Löschen'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,118 @@
|
||||
'use client';
|
||||
|
||||
import { Appointment } from '@/types/appointment';
|
||||
|
||||
interface AppointmentListProps {
|
||||
appointments: Appointment[];
|
||||
onToggleDone: (id: string) => void;
|
||||
onEdit: (appointment: Appointment) => void;
|
||||
onDelete: (id: string) => void;
|
||||
}
|
||||
|
||||
const weekdays = ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'];
|
||||
|
||||
const formatDate = (iso: string) => {
|
||||
const d = new Date(iso);
|
||||
const day = String(d.getDate()).padStart(2, '0');
|
||||
const m = String(d.getMonth() + 1).padStart(2, '0');
|
||||
return `${day}.${m}.${d.getFullYear()}`;
|
||||
};
|
||||
|
||||
const formatTime = (iso: string) => {
|
||||
const d = new Date(iso);
|
||||
const h = String(d.getHours()).padStart(2, '0');
|
||||
const min = String(d.getMinutes()).padStart(2, '0');
|
||||
return `${h}:${min}`;
|
||||
};
|
||||
|
||||
const getWeekday = (iso: string) => weekdays[new Date(iso).getDay()];
|
||||
|
||||
export default function AppointmentList({
|
||||
appointments,
|
||||
onToggleDone,
|
||||
onEdit,
|
||||
onDelete,
|
||||
}: AppointmentListProps) {
|
||||
if (appointments.length === 0) {
|
||||
return (
|
||||
<div className="text-center py-8 text-gray-500">
|
||||
Keine Termine vorhanden. Fügen Sie oben einen neuen Termin hinzu!
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const sorted = [...appointments].sort(
|
||||
(a, b) => new Date(a.termin).getTime() - new Date(b.termin).getTime()
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-[#CCCCFF] border-b-2 border-gray-400">
|
||||
<th className="p-2 text-center">Erledigt</th>
|
||||
<th className="p-2 text-center">Arzt</th>
|
||||
<th className="p-2 text-center">Fachrichtung</th>
|
||||
<th className="p-2 text-center">Datum</th>
|
||||
<th className="p-2 text-center">Tag</th>
|
||||
<th className="p-2 text-center">Zeit</th>
|
||||
<th className="p-2 text-center">Bemerkungen</th>
|
||||
<th className="p-2 text-center">Aktion</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{sorted.map((app, index) => (
|
||||
<tr
|
||||
key={app.id}
|
||||
onClick={() => onEdit(app)}
|
||||
className={`border-b border-gray-300 hover:bg-gray-100 cursor-pointer ${
|
||||
app.erledigt
|
||||
? 'bg-green-50 text-gray-400 line-through'
|
||||
: index % 2 === 0
|
||||
? 'bg-white'
|
||||
: 'bg-gray-50'
|
||||
}`}
|
||||
>
|
||||
<td
|
||||
className="p-2 text-center"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
className="w-4 h-4 cursor-pointer"
|
||||
checked={app.erledigt}
|
||||
onChange={() => onToggleDone(app.id)}
|
||||
/>
|
||||
</td>
|
||||
<td className="p-2 text-center font-medium">{app.arztName}</td>
|
||||
<td className="p-2 text-center">{app.arztArt || '-'}</td>
|
||||
<td className="p-2 text-center">{formatDate(app.termin)}</td>
|
||||
<td className="p-2 text-center">{getWeekday(app.termin)}</td>
|
||||
<td className="p-2 text-center">{formatTime(app.termin)}</td>
|
||||
<td className="p-2 text-center">{app.bemerkungen || '-'}</td>
|
||||
<td
|
||||
className="p-2 text-center"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="flex gap-2 justify-center no-underline">
|
||||
<button
|
||||
onClick={() => onEdit(app)}
|
||||
className="text-blue-600 hover:text-blue-800 text-sm no-underline"
|
||||
>
|
||||
Editieren
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onDelete(app.id)}
|
||||
className="text-red-600 hover:text-red-800 text-sm no-underline"
|
||||
>
|
||||
Löschen
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
'use client';
|
||||
|
||||
interface ConfirmationModalProps {
|
||||
isOpen: boolean;
|
||||
title?: string;
|
||||
message: string;
|
||||
onConfirm: () => void;
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
||||
export default function ConfirmationModal({
|
||||
isOpen,
|
||||
title,
|
||||
message,
|
||||
onConfirm,
|
||||
onCancel,
|
||||
}: ConfirmationModalProps) {
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-center justify-center bg-black/40"
|
||||
onClick={onCancel}
|
||||
>
|
||||
<div
|
||||
className="bg-white border border-gray-300 rounded-lg shadow-lg p-6 w-80 text-center"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{title && (
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-3">{title}</h3>
|
||||
)}
|
||||
<p className="mb-6 text-gray-800 font-medium">{message}</p>
|
||||
<div className="flex justify-center gap-4">
|
||||
<button
|
||||
onClick={onConfirm}
|
||||
className="bg-red-500 hover:bg-red-600 text-white font-medium py-1.5 px-6 rounded-lg transition-colors"
|
||||
>
|
||||
Löschen
|
||||
</button>
|
||||
<button
|
||||
onClick={onCancel}
|
||||
className="bg-[#85B7D7] hover:bg-[#6a9fc5] text-black font-medium py-1.5 px-6 rounded-lg transition-colors"
|
||||
>
|
||||
Abbrechen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
'use client';
|
||||
|
||||
import packageJson from '@/package.json';
|
||||
|
||||
interface TabLayoutProps {
|
||||
children: React.ReactNode;
|
||||
onPrint?: () => void;
|
||||
}
|
||||
|
||||
export default function TabLayout({ children, onPrint }: TabLayoutProps) {
|
||||
const version = packageJson.version;
|
||||
const buildDate =
|
||||
process.env.NEXT_PUBLIC_BUILD_DATE ||
|
||||
new Date().toLocaleDateString('de-DE', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="min-h-screen py-8 px-4">
|
||||
{/* Äußerer Rahmen */}
|
||||
<div className="max-w-316 mx-auto border-2 border-black rounded-xl bg-gray-200 p-6">
|
||||
{/* Seitentitel */}
|
||||
<h1 className="text-4xl font-bold text-center mb-6 tracking-tight">
|
||||
Arzt-Termine
|
||||
</h1>
|
||||
|
||||
{/* Innerer Inhalt */}
|
||||
<div className="max-w-6xl mx-auto">
|
||||
{/* Tab-Leiste */}
|
||||
<div className="flex justify-between items-end">
|
||||
<div className="flex">
|
||||
<span
|
||||
className="px-6 py-2 text-sm font-semibold border-t-2 border-l-2 border-r-2 rounded-tl-lg rounded-tr-lg mr-1"
|
||||
style={{
|
||||
backgroundColor: '#FFFFDD',
|
||||
color: '#000000',
|
||||
borderColor: '#000000',
|
||||
borderBottom: '2px solid #FFFFDD',
|
||||
marginBottom: '-2px',
|
||||
position: 'relative',
|
||||
zIndex: 10,
|
||||
}}
|
||||
>
|
||||
Termine
|
||||
</span>
|
||||
</div>
|
||||
<div className="pb-1">
|
||||
<button
|
||||
onClick={onPrint}
|
||||
className="px-4 py-2 bg-[#85B7D7] hover:bg-[#6a9fc5] text-black text-sm rounded-lg shadow-md transition-colors"
|
||||
>
|
||||
🖨️ Aktuelle Termine drucken
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Inhaltsbereich */}
|
||||
<main className="border-2 border-black rounded-b-lg rounded-tr-lg p-6 bg-[#FFFFDD]">
|
||||
{children}
|
||||
</main>
|
||||
|
||||
<footer className="mt-8 flex justify-between items-center text-sm text-gray-600 px-4">
|
||||
<a href="mailto:rxf@gmx.de" className="hover:underline">
|
||||
mailto:rxf@gmx.de
|
||||
</a>
|
||||
<div>
|
||||
Version {version} - {buildDate}
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,37 +1,35 @@
|
||||
#!/bin/bash
|
||||
|
||||
# Deploy Script
|
||||
# Baut die Produktions-Images und lädt sie zur Registry hoch
|
||||
# Deploy Script für aerzte-next
|
||||
# Baut das Docker Image und lädt es zu docker.citysensor.de hoch
|
||||
|
||||
set -e
|
||||
|
||||
# Konfiguration
|
||||
REGISTRY="docker.citysensor.de"
|
||||
PROJEKT="aerzte"
|
||||
IMAGE_NAME=("${PROJEKT}-frontend" "${PROJEKT}-backend")
|
||||
TAG="${TAG:-$(date +%Y%m%d%H%M)}" # default Datum
|
||||
IMAGE_NAME="aerzte-next"
|
||||
TAG="${1:-latest}" # Erster Parameter oder "latest"
|
||||
FULL_IMAGE="${REGISTRY}/${IMAGE_NAME}:${TAG}"
|
||||
|
||||
# Build-Datum und Version
|
||||
# Build-Datum
|
||||
BUILD_DATE=$(date +%d.%m.%Y)
|
||||
VERSION=$(grep '"version"' frontend/package.json | head -1 | sed 's/.*"version": "\(.*\)".*/\1/')
|
||||
|
||||
echo "=========================================="
|
||||
echo " Deploy Script"
|
||||
echo "Aerzte-Next Deploy Script"
|
||||
echo "=========================================="
|
||||
echo "Registry: ${REGISTRY}"
|
||||
echo "Images: ${IMAGE_NAME[*]}"
|
||||
echo "Image: ${IMAGE_NAME}"
|
||||
echo "Tag: ${TAG}"
|
||||
echo "Version: ${VERSION}"
|
||||
echo "Build-Datum: ${BUILD_DATE}"
|
||||
echo "=========================================="
|
||||
echo ""
|
||||
|
||||
# 1. Login zur Registry (falls noch nicht eingeloggt)
|
||||
# 1. Login zur Registry
|
||||
echo ">>> Login zu ${REGISTRY}..."
|
||||
docker login "${REGISTRY}"
|
||||
echo ""
|
||||
|
||||
# 2. Multiplatform Builder einrichten (docker-container driver erforderlich)
|
||||
# 2. Multiplatform Builder einrichten
|
||||
echo ">>> Richte Multiplatform Builder ein..."
|
||||
if ! docker buildx inspect multiplatform-builder &>/dev/null; then
|
||||
docker buildx create --name multiplatform-builder --driver docker-container --bootstrap
|
||||
@@ -39,47 +37,22 @@ fi
|
||||
docker buildx use multiplatform-builder
|
||||
echo ""
|
||||
|
||||
for image in "${IMAGE_NAME[@]}"; do
|
||||
# Verzeichnisname = Image-Name ohne Projekt-Präfix (frontend / backend)
|
||||
IMAGE_DIR="${image#${PROJEKT}-}"
|
||||
FULL_IMAGE="${REGISTRY}/${image}:${TAG}"
|
||||
|
||||
echo "=========================================="
|
||||
echo ">>> Baue ${image}..."
|
||||
echo ">>> Image: ${FULL_IMAGE}"
|
||||
echo "=========================================="
|
||||
|
||||
# 3. Produktions-Image bauen und pushen (Multiplatform)
|
||||
# -> nutzt das jeweilige Dockerfile.prod (nginx bzw. npm start)
|
||||
docker buildx build \
|
||||
--platform linux/amd64 \
|
||||
-f "./${IMAGE_DIR}/Dockerfile.prod" \
|
||||
-t "${FULL_IMAGE}" \
|
||||
--push \
|
||||
"./${IMAGE_DIR}"
|
||||
|
||||
# 4. Tagge auch als :${VERSION} und :latest
|
||||
echo ">>> Tagge ${image} als :${VERSION} und :latest..."
|
||||
docker buildx imagetools create \
|
||||
-t "${REGISTRY}/${image}:${VERSION}" \
|
||||
-t "${REGISTRY}/${image}:latest" \
|
||||
"${FULL_IMAGE}"
|
||||
|
||||
echo "✓ ${image} erfolgreich gebaut und gepusht!"
|
||||
echo ""
|
||||
done
|
||||
|
||||
echo ">>> Alle Builds erfolgreich!"
|
||||
# 3. Docker Image bauen und pushen
|
||||
echo ">>> Baue Multiplatform Docker Image und pushe zu Registry..."
|
||||
docker buildx build \
|
||||
--platform linux/amd64,linux/arm64 \
|
||||
--build-arg BUILD_DATE="${BUILD_DATE}" \
|
||||
-t "${FULL_IMAGE}" \
|
||||
--push \
|
||||
.
|
||||
|
||||
echo ">>> Build und Push erfolgreich!"
|
||||
echo ""
|
||||
echo "=========================================="
|
||||
echo "✓ Deploy erfolgreich abgeschlossen!"
|
||||
echo "=========================================="
|
||||
echo "Registry: ${REGISTRY}"
|
||||
echo "Projekt: ${PROJEKT}"
|
||||
echo "Tag: ${TAG} (zusätzlich: ${VERSION}, latest)"
|
||||
echo ""
|
||||
echo "Auf dem Server ausführen:"
|
||||
echo " docker compose -f docker-compose.images.yml pull"
|
||||
echo " docker compose -f docker-compose.images.yml up -d"
|
||||
echo " docker pull ${FULL_IMAGE}"
|
||||
echo " docker compose -f docker-compose.prod.yml up -d"
|
||||
echo ""
|
||||
|
||||
@@ -1,65 +0,0 @@
|
||||
# Produktions-Setup mit vorgebauten Images aus der Registry docker.citysensor.de.
|
||||
# Geeignet für Stack-Manager wie dockhand/Dockge, wo nur die Compose-Datei
|
||||
# im Stack-Verzeichnis liegt.
|
||||
#
|
||||
# 1) Images bauen und in die Registry pushen (im Projektverzeichnis mit Quellcode):
|
||||
# docker build -t docker.citysensor.de/aerzte-backend:latest -f ./backend/Dockerfile.prod ./backend
|
||||
# docker build -t docker.citysensor.de/aerzte-frontend:latest -f ./frontend/Dockerfile.prod ./frontend
|
||||
# docker push docker.citysensor.de/aerzte-backend:latest
|
||||
# docker push docker.citysensor.de/aerzte-frontend:latest
|
||||
#
|
||||
# 2) Diese Datei (+ .env) ins Stack-Verzeichnis legen und starten:
|
||||
# docker compose pull && docker compose up -d
|
||||
#
|
||||
# Benötigt eine .env-Datei (siehe .env.example) mit:
|
||||
# MONGO_ROOT_USER, MONGO_ROOT_PASSWD und optional FRONTEND_PORT, IMAGE_TAG.
|
||||
|
||||
services:
|
||||
mongodb:
|
||||
image: mongo:latest
|
||||
container_name: mongodb
|
||||
restart: unless-stopped
|
||||
# Kein Host-Port: MongoDB ist nur im internen Docker-Netz erreichbar
|
||||
environment:
|
||||
MONGO_INITDB_ROOT_USERNAME: ${MONGO_ROOT_USER}
|
||||
MONGO_INITDB_ROOT_PASSWORD: ${MONGO_ROOT_PASSWD}
|
||||
volumes:
|
||||
- mongodb_data:/data/db
|
||||
- mongodb_config:/data/configdb
|
||||
networks:
|
||||
- app-network
|
||||
|
||||
backend:
|
||||
image: docker.citysensor.de/aerzte-backend:${IMAGE_TAG:-latest}
|
||||
container_name: backend
|
||||
restart: unless-stopped
|
||||
# Kein Host-Port: Das Backend wird nur intern über nginx (Frontend) angesprochen
|
||||
environment:
|
||||
- PORT=3001
|
||||
- NODE_ENV=production
|
||||
- MONGO_URI=mongodb://${MONGO_ROOT_USER}:${MONGO_ROOT_PASSWD}@mongodb:27017/appointmentsdb?authSource=admin
|
||||
# Frontend läuft über denselben Host (nginx-Proxy) -> kein Cross-Origin nötig.
|
||||
- CORS_ORIGIN=${CORS_ORIGIN:-http://localhost:5173}
|
||||
depends_on:
|
||||
- mongodb
|
||||
networks:
|
||||
- app-network
|
||||
|
||||
frontend:
|
||||
image: docker.citysensor.de/aerzte-frontend:${IMAGE_TAG:-latest}
|
||||
container_name: frontend
|
||||
restart: unless-stopped
|
||||
ports:
|
||||
- "${FRONTEND_PORT:-80}:80"
|
||||
depends_on:
|
||||
- backend
|
||||
networks:
|
||||
- app-network
|
||||
|
||||
volumes:
|
||||
mongodb_data:
|
||||
mongodb_config:
|
||||
|
||||
networks:
|
||||
app-network:
|
||||
driver: bridge
|
||||
+12
-30
@@ -1,8 +1,8 @@
|
||||
# Produktions-Setup für den Serverbetrieb.
|
||||
# Starten mit: docker compose -f docker-compose.prod.yml up -d --build
|
||||
# Produktions-Setup für den Serverbetrieb: Next.js-App + MongoDB
|
||||
# Starten mit: docker compose -f docker-compose.prod.yml up -d
|
||||
#
|
||||
# Benötigt eine .env-Datei (siehe .env.example) mit:
|
||||
# MONGO_ROOT_USER, MONGO_ROOT_PASSWD und optional FRONTEND_PORT.
|
||||
# Benötigt eine .env-Datei (siehe .env.example) mit
|
||||
# MONGO_ROOT_USER, MONGO_ROOT_PASSWD und optional APP_PORT.
|
||||
|
||||
services:
|
||||
mongodb:
|
||||
@@ -19,35 +19,17 @@ services:
|
||||
networks:
|
||||
- app-network
|
||||
|
||||
backend:
|
||||
build:
|
||||
context: ./backend
|
||||
dockerfile: Dockerfile.prod
|
||||
container_name: backend
|
||||
restart: unless-stopped
|
||||
# Kein Host-Port: Das Backend wird nur intern über nginx (Frontend) angesprochen
|
||||
environment:
|
||||
- PORT=3001
|
||||
- NODE_ENV=production
|
||||
- MONGO_URI=mongodb://${MONGO_ROOT_USER}:${MONGO_ROOT_PASSWD}@mongodb:27017/appointmentsdb?authSource=admin
|
||||
# Frontend läuft über denselben Host (nginx-Proxy) -> kein Cross-Origin nötig.
|
||||
# Bei Bedarf hier die öffentliche Frontend-URL eintragen.
|
||||
- CORS_ORIGIN=${CORS_ORIGIN:-http://localhost:5173}
|
||||
depends_on:
|
||||
- mongodb
|
||||
networks:
|
||||
- app-network
|
||||
|
||||
frontend:
|
||||
build:
|
||||
context: ./frontend
|
||||
dockerfile: Dockerfile.prod
|
||||
container_name: frontend
|
||||
app:
|
||||
image: docker.citysensor.de/aerzte-next:latest
|
||||
container_name: aerzte-app
|
||||
restart: unless-stopped
|
||||
ports:
|
||||
- "${FRONTEND_PORT:-80}:80"
|
||||
- "${APP_PORT:-3000}:3000"
|
||||
environment:
|
||||
- NODE_ENV=production
|
||||
- MONGO_URI=mongodb://${MONGO_ROOT_USER}:${MONGO_ROOT_PASSWD}@mongodb:27017/appointmentsdb?authSource=admin
|
||||
depends_on:
|
||||
- backend
|
||||
- mongodb
|
||||
networks:
|
||||
- app-network
|
||||
|
||||
|
||||
+11
-28
@@ -1,3 +1,8 @@
|
||||
# Lokales Entwicklungs-/Test-Setup: Next.js-App + MongoDB
|
||||
# Starten mit: docker compose up -d --build
|
||||
#
|
||||
# Benötigt eine .env-Datei (siehe .env.example) mit
|
||||
# MONGO_ROOT_USER, MONGO_ROOT_PASSWD und optional APP_PORT.
|
||||
|
||||
services:
|
||||
mongodb:
|
||||
@@ -15,41 +20,19 @@ services:
|
||||
networks:
|
||||
- app-network
|
||||
|
||||
backend:
|
||||
app:
|
||||
build:
|
||||
context: ./backend
|
||||
context: .
|
||||
dockerfile: Dockerfile
|
||||
container_name: backend
|
||||
container_name: aerzte-app
|
||||
restart: unless-stopped
|
||||
ports:
|
||||
- "3001:3001"
|
||||
- "${APP_PORT:-3000}:3000"
|
||||
environment:
|
||||
- PORT=3001
|
||||
- NODE_ENV=production
|
||||
- MONGO_URI=mongodb://${MONGO_ROOT_USER}:${MONGO_ROOT_PASSWD}@mongodb:27017/appointmentsdb?authSource=admin
|
||||
depends_on:
|
||||
- mongodb
|
||||
volumes:
|
||||
- ./backend/src:/app/src
|
||||
- ./backend/package.json:/app/package.json
|
||||
networks:
|
||||
- app-network
|
||||
|
||||
frontend:
|
||||
build:
|
||||
context: ./frontend
|
||||
dockerfile: Dockerfile
|
||||
container_name: frontend
|
||||
restart: unless-stopped
|
||||
ports:
|
||||
- "5173:5173"
|
||||
environment:
|
||||
# Vite proxyt /api an das Backend im selben Compose-Netz
|
||||
- VITE_PROXY_TARGET=http://backend:3001
|
||||
depends_on:
|
||||
- backend
|
||||
volumes:
|
||||
- ./frontend/src:/app/src
|
||||
- ./frontend/package.json:/app/package.json
|
||||
networks:
|
||||
- app-network
|
||||
|
||||
@@ -59,4 +42,4 @@ volumes:
|
||||
|
||||
networks:
|
||||
app-network:
|
||||
driver: bridge
|
||||
driver: bridge
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
import { defineConfig, globalIgnores } from "eslint/config";
|
||||
import nextVitals from "eslint-config-next/core-web-vitals";
|
||||
import nextTs from "eslint-config-next/typescript";
|
||||
|
||||
const eslintConfig = defineConfig([
|
||||
...nextVitals,
|
||||
...nextTs,
|
||||
// Override default ignores of eslint-config-next.
|
||||
globalIgnores([
|
||||
".next/**",
|
||||
"out/**",
|
||||
"build/**",
|
||||
"next-env.d.ts",
|
||||
]),
|
||||
]);
|
||||
|
||||
export default eslintConfig;
|
||||
@@ -1,5 +0,0 @@
|
||||
node_modules
|
||||
npm-debug.log
|
||||
dist
|
||||
.git
|
||||
.gitignore
|
||||
@@ -1,18 +0,0 @@
|
||||
FROM node:20-alpine
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
# Copy package files
|
||||
COPY package*.json ./
|
||||
|
||||
# Install dependencies
|
||||
RUN npm ci
|
||||
|
||||
# Copy source code
|
||||
COPY . .
|
||||
|
||||
# Expose Vite dev server port
|
||||
EXPOSE 5173
|
||||
|
||||
# Start Vite dev server
|
||||
CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0"]
|
||||
@@ -1,23 +0,0 @@
|
||||
# --- Build-Stage: Statische Dateien mit Vite bauen ---
|
||||
FROM node:20-alpine AS build
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
COPY package*.json ./
|
||||
RUN npm ci
|
||||
|
||||
COPY . .
|
||||
RUN npm run build
|
||||
|
||||
# --- Serve-Stage: Auslieferung über nginx ---
|
||||
FROM nginx:alpine
|
||||
|
||||
# Eigene nginx-Konfiguration (statische Auslieferung + /api-Proxy)
|
||||
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||||
|
||||
# Gebaute Dateien aus der Build-Stage übernehmen
|
||||
COPY --from=build /app/dist /usr/share/nginx/html
|
||||
|
||||
EXPOSE 80
|
||||
|
||||
CMD ["nginx", "-g", "daemon off;"]
|
||||
@@ -1,16 +0,0 @@
|
||||
# React + Vite
|
||||
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||
|
||||
Currently, two official plugins are available:
|
||||
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
|
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||
|
||||
## React Compiler
|
||||
|
||||
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
|
||||
|
||||
## Expanding the ESLint configuration
|
||||
|
||||
If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
|
||||
@@ -1,36 +0,0 @@
|
||||
import js from '@eslint/js'
|
||||
import globals from 'globals'
|
||||
import reactHooks from 'eslint-plugin-react-hooks'
|
||||
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||
import { defineConfig, globalIgnores } from 'eslint/config'
|
||||
|
||||
export default defineConfig([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{js,jsx}'],
|
||||
extends: [
|
||||
js.configs.recommended,
|
||||
reactHooks.configs.flat.recommended,
|
||||
reactRefresh.configs.vite,
|
||||
],
|
||||
languageOptions: {
|
||||
ecmaVersion: 2020,
|
||||
globals: globals.browser,
|
||||
parserOptions: {
|
||||
ecmaVersion: 'latest',
|
||||
ecmaFeatures: { jsx: true },
|
||||
sourceType: 'module',
|
||||
},
|
||||
},
|
||||
rules: {
|
||||
'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
|
||||
},
|
||||
},
|
||||
{
|
||||
// Konfigurationsdateien laufen in Node, nicht im Browser
|
||||
files: ['*.config.js'],
|
||||
languageOptions: {
|
||||
globals: globals.node,
|
||||
},
|
||||
},
|
||||
])
|
||||
@@ -1,13 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>aerzte</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,23 +0,0 @@
|
||||
server {
|
||||
listen 80;
|
||||
server_name _;
|
||||
|
||||
root /usr/share/nginx/html;
|
||||
index index.html;
|
||||
|
||||
# API-Anfragen an das Backend weiterleiten.
|
||||
# "backend" ist der Service-Name aus docker-compose.
|
||||
location /api/ {
|
||||
proxy_pass http://backend:3001;
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
}
|
||||
|
||||
# SPA-Routing: alle übrigen Pfade auf index.html (React Router etc.)
|
||||
location / {
|
||||
try_files $uri $uri/ /index.html;
|
||||
}
|
||||
}
|
||||
@@ -1,28 +0,0 @@
|
||||
{
|
||||
"name": "aerzte",
|
||||
"type": "module",
|
||||
"private": true,
|
||||
"version": "1.1.0",
|
||||
"vdate": "2025-11-23 16:00 UTC",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"lint": "eslint .",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^19.2.0",
|
||||
"react-dom": "^19.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.39.1",
|
||||
"@types/react": "^19.2.5",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"@vitejs/plugin-react": "^5.1.1",
|
||||
"eslint": "^9.39.1",
|
||||
"eslint-plugin-react-hooks": "^7.0.1",
|
||||
"eslint-plugin-react-refresh": "^0.4.24",
|
||||
"globals": "^16.5.0",
|
||||
"vite": "^7.2.4"
|
||||
}
|
||||
}
|
||||
@@ -1,73 +0,0 @@
|
||||
#root {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
transition: filter 300ms;
|
||||
}
|
||||
.logo:hover {
|
||||
filter: drop-shadow(0 0 2em #646cffaa);
|
||||
}
|
||||
.logo.react:hover {
|
||||
filter: drop-shadow(0 0 2em #61dafbaa);
|
||||
}
|
||||
|
||||
@keyframes logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
a:nth-of-type(2) .logo {
|
||||
animation: logo-spin infinite 20s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
/* In AppStyles.css */
|
||||
|
||||
/* Stellt den Delete-Button in die rechte Ecke des Headers */
|
||||
.appointment-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between; /* Verteilt Checkbox/Label und Button */
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.doctor-info {
|
||||
/* Nimmt den verfügbaren Platz ein */
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.delete-button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #dc3545;
|
||||
font-size: 1.2em;
|
||||
cursor: pointer;
|
||||
margin-left: 15px;
|
||||
padding: 0 5px;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.delete-button:hover {
|
||||
color: #c82333;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
@@ -1,288 +0,0 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import AppointmentForm from './components/AppointmentForm';
|
||||
import AppointmentList from './components/AppointmentList';
|
||||
import ConfirmationModal from './components/ConfirmationModal';
|
||||
import './AppStyles.css';
|
||||
|
||||
// Die Basis-URL der Express-API
|
||||
// Standardmäßig relativ ("/api/appointments"), damit der Browser denselben
|
||||
// Host wie das Frontend anspricht. In Produktion leitet nginx /api an das
|
||||
// Backend weiter, im Dev-Modus übernimmt das der Vite-Proxy (vite.config.js).
|
||||
// Über VITE_API_URL kann optional ein absoluter Backend-Host gesetzt werden.
|
||||
const API_BASE = import.meta.env.VITE_API_URL ?? '';
|
||||
const API_URL = `${API_BASE}/api/appointments`;
|
||||
|
||||
// Funktion zur Umwandlung von MongoDBs _id in die interne id des Frontends
|
||||
const normalizeAppointment = (appointment) => ({
|
||||
// Wichtig: _id von Mongo in id umbenennen
|
||||
id: appointment._id,
|
||||
arztName: appointment.arztName,
|
||||
arztArt: appointment.arztArt,
|
||||
// Termine kommen als String vom Backend, muss in Date-Objekt umgewandelt werden
|
||||
termin: new Date(appointment.termin),
|
||||
erledigt: appointment.erledigt,
|
||||
bemerkungen: appointment.bemerkungen,
|
||||
});
|
||||
|
||||
function App() {
|
||||
const [appointments, setAppointments] = useState([]);
|
||||
const [editingAppointment, setEditingAppointment] = useState(null);
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [appointmentToDeleteId, setAppointmentToDeleteId] = useState(null);
|
||||
|
||||
// Helfer: Start des heutigen Tages für Filter "aktuelle Termine"
|
||||
const startOfToday = new Date();
|
||||
startOfToday.setHours(0, 0, 0, 0);
|
||||
|
||||
// Gefilterte Liste: nur nicht erledigte Termine ab heute
|
||||
const currentAppointments = appointments
|
||||
.filter(a => !a.erledigt && a.termin >= startOfToday)
|
||||
.sort((a, b) => a.termin - b.termin);
|
||||
|
||||
// Drucken triggern
|
||||
const handlePrintCurrent = () => {
|
||||
window.print();
|
||||
};
|
||||
|
||||
// NEU: Lädt Termine vom Backend beim Start
|
||||
useEffect(() => {
|
||||
fetchAppointments();
|
||||
}, []); // [] sorgt dafür, dass es nur einmal beim Mounten ausgeführt wird
|
||||
|
||||
const fetchAppointments = async () => {
|
||||
try {
|
||||
const response = await fetch(API_URL);
|
||||
if (!response.ok) throw new Error('Netzwerkantwort war nicht ok.');
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
// Daten aus dem Backend aufbereiten (konvertiere _id und termin)
|
||||
const normalizedData = data.map(normalizeAppointment);
|
||||
setAppointments(normalizedData);
|
||||
|
||||
} catch (error) {
|
||||
console.error("Fehler beim Laden der Termine:", error);
|
||||
// Optional: Fehlermeldung anzeigen
|
||||
}
|
||||
};
|
||||
|
||||
// 1. CREATE: Neuen Termin erstellen
|
||||
const addAppointment = async (newApp) => {
|
||||
// Vor dem Senden die temporäre ID und das Date-Objekt entfernen/umwandeln
|
||||
const appToSend = {
|
||||
...newApp,
|
||||
// Date-Objekt in ISO-String umwandeln (von Mongo erwartet)
|
||||
termin: newApp.termin.toISOString(),
|
||||
id: undefined // Lokale ID entfernen
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await fetch(API_URL, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(appToSend),
|
||||
});
|
||||
|
||||
if (!response.ok) throw new Error('Fehler beim Hinzufügen des Termins.');
|
||||
|
||||
const addedApp = await response.json();
|
||||
|
||||
// Fügt den normalisierten Termin (mit Mongo _id) zum State hinzu
|
||||
setAppointments(prev => [...prev, normalizeAppointment(addedApp)]);
|
||||
setEditingAppointment(null);
|
||||
|
||||
} catch (error) {
|
||||
console.error("Fehler beim Speichern des Termins:", error);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// 2. UPDATE: Bestehenden Termin aktualisieren (vom Formular)
|
||||
const updateAppointment = async (updatedApp) => {
|
||||
const mongoId = updatedApp.id; // Die ID ist jetzt die MongoDB _id
|
||||
|
||||
const appToSend = {
|
||||
...updatedApp,
|
||||
termin: updatedApp.termin.toISOString(),
|
||||
id: undefined, // Lokale ID entfernen
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_URL}/${mongoId}`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(appToSend),
|
||||
});
|
||||
|
||||
if (!response.ok) throw new Error('Fehler beim Aktualisieren des Termins.');
|
||||
|
||||
// Nach erfolgreichem Update den State lokal aktualisieren.
|
||||
// Wichtig: updatedApp stammt aus dem Formular und hat bereits ein
|
||||
// Feld "id" (kein "_id"), daher hier NICHT normalizeAppointment nutzen –
|
||||
// sonst würde die ID verloren gehen. Wir behalten die bestehende id
|
||||
// und übernehmen die aktualisierten Felder.
|
||||
setAppointments(prev =>
|
||||
prev.map(app =>
|
||||
app.id === mongoId
|
||||
? {
|
||||
id: mongoId,
|
||||
arztName: updatedApp.arztName,
|
||||
arztArt: updatedApp.arztArt,
|
||||
termin: updatedApp.termin, // bereits ein Date-Objekt
|
||||
erledigt: updatedApp.erledigt,
|
||||
bemerkungen: updatedApp.bemerkungen,
|
||||
}
|
||||
: app
|
||||
)
|
||||
);
|
||||
setEditingAppointment(null);
|
||||
|
||||
} catch (error) {
|
||||
console.error("Fehler beim Aktualisieren des Termins:", error);
|
||||
}
|
||||
};
|
||||
|
||||
// 3. UPDATE: Statuswechsel (Toggle Done)
|
||||
const toggleDone = async (id) => {
|
||||
const currentApp = appointments.find(app => app.id === id);
|
||||
if (!currentApp) return;
|
||||
|
||||
const newStatus = !currentApp.erledigt;
|
||||
|
||||
try {
|
||||
// Nur das erledigt-Feld senden
|
||||
const response = await fetch(`${API_URL}/${id}`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ erledigt: newStatus }),
|
||||
});
|
||||
|
||||
if (!response.ok) throw new Error('Fehler beim Statuswechsel.');
|
||||
|
||||
// Lokalen State synchronisieren, wenn Backend erfolgreich war
|
||||
setAppointments(prev =>
|
||||
prev.map(app =>
|
||||
app.id === id ? { ...app, erledigt: newStatus } : app
|
||||
)
|
||||
);
|
||||
|
||||
} catch (error) {
|
||||
console.error("Fehler beim Statuswechsel:", error);
|
||||
}
|
||||
};
|
||||
|
||||
// 4. DELETE LOGIK START
|
||||
|
||||
// 1. Wird vom Löschen-Button in der Liste aufgerufen (öffnet das Modal)
|
||||
const openDeleteModal = (id) => {
|
||||
setAppointmentToDeleteId(id);
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
|
||||
// 2. Wird vom 'Abbrechen'-Button des Modals aufgerufen
|
||||
const handleCancelDelete = () => {
|
||||
setAppointmentToDeleteId(null);
|
||||
setIsModalOpen(false);
|
||||
};
|
||||
|
||||
// 3. Wird vom 'Bestätigen'-Button des Modals aufgerufen (führt die Löschung aus)
|
||||
const handleConfirmDelete = async () => {
|
||||
const id = appointmentToDeleteId;
|
||||
|
||||
// Status zurücksetzen, bevor die asynchrone Funktion aufgerufen wird
|
||||
setIsModalOpen(false);
|
||||
setAppointmentToDeleteId(null);
|
||||
|
||||
if (!id) return; // Sicherheit
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_URL}/${id}`, {
|
||||
method: 'DELETE',
|
||||
});
|
||||
|
||||
if (response.status !== 204) throw new Error('Fehler beim Löschen des Termins.');
|
||||
|
||||
// Lokalen State synchronisieren
|
||||
setAppointments(prev => prev.filter(app => app.id !== id));
|
||||
|
||||
if (editingAppointment && editingAppointment.id === id) {
|
||||
setEditingAppointment(null);
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error("Fehler beim Löschen des Termins:", error);
|
||||
// Optional: Fehlermeldung anzeigen
|
||||
}
|
||||
};
|
||||
|
||||
// ... (startEdit und cancelEdit bleiben unverändert, sie manipulieren nur den lokalen State)
|
||||
|
||||
return (
|
||||
<div className="app-container">
|
||||
<div className="screen-only">
|
||||
{/* Druck-Button für aktuelle Termine */}
|
||||
<div className="print-controls">
|
||||
<button className="print-button" onClick={handlePrintCurrent}>
|
||||
Aktuelle Termine drucken
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Formular */}
|
||||
<AppointmentForm
|
||||
onAddAppointment={addAppointment}
|
||||
editingAppointment={editingAppointment}
|
||||
onUpdateAppointment={updateAppointment}
|
||||
onCancelEdit={() => setEditingAppointment(null)}
|
||||
/>
|
||||
|
||||
{/* Gesamte Liste */}
|
||||
<AppointmentList
|
||||
appointments={appointments}
|
||||
onToggleDone={toggleDone}
|
||||
onEdit={(app) => setEditingAppointment(app)}
|
||||
onDelete={openDeleteModal}
|
||||
/>
|
||||
|
||||
{/* NEU: MODAL KOMPONENTE */}
|
||||
<ConfirmationModal
|
||||
isOpen={isModalOpen}
|
||||
title="Termin löschen bestätigen"
|
||||
message="Möchten Sie diesen Termin wirklich unwiderruflich löschen? Diese Aktion kann nicht rückgängig gemacht werden."
|
||||
onConfirm={handleConfirmDelete}
|
||||
onCancel={handleCancelDelete}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Druckansicht: nur aktuelle (offene) Termine ab heute */}
|
||||
<div className="print-only">
|
||||
<h1>Aktuelle Arzt-Termine</h1>
|
||||
{currentAppointments.length === 0 ? (
|
||||
<p>Keine aktuellen Termine vorhanden.</p>
|
||||
) : (
|
||||
<table className="print-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Arzt</th>
|
||||
<th>Fachrichtung</th>
|
||||
<th>Datum</th>
|
||||
<th>Bemerkungen</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{currentAppointments.map(app => (
|
||||
<tr key={app.id}>
|
||||
<td>{app.arztName}</td>
|
||||
<td>{app.arztArt || ''}</td>
|
||||
<td>{app.termin.toLocaleString('de-DE')}</td>
|
||||
<td>{app.bemerkungen || ''}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
@@ -1,278 +0,0 @@
|
||||
/* Globale Styles für App.js */
|
||||
body {
|
||||
margin: 0;
|
||||
background-color: #f9f9f9;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
color: #333;
|
||||
/* NEU: Flexbox für die Zentrierung */
|
||||
display: flex;
|
||||
justify-content: center; /* Zentriert horizontal */
|
||||
align-items: flex-start; /* Hält den Inhalt oben, falls er kürzer als der Bildschirm ist */
|
||||
min-height: 100vh; /* Stellt sicher, dass die Seite mindestens die volle Höhe des Viewports hat */
|
||||
}
|
||||
|
||||
.app-container {
|
||||
/* Die maximale Breite beibehalten, aber Padding anpassen */
|
||||
padding: 40px 20px;
|
||||
max-width: 900px;
|
||||
width: 100%; /* Wichtig, damit max-width funktioniert */
|
||||
/* min-height-Einstellung ist nun im Body */
|
||||
}
|
||||
|
||||
.app-header {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
border-bottom: 2px solid #007bff;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.app-header h1 {
|
||||
color: #007bff;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.separator {
|
||||
border: 0;
|
||||
border-top: 1px solid #ddd;
|
||||
margin: 40px 0;
|
||||
}
|
||||
|
||||
.debug-output {
|
||||
background-color: #fff;
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.debug-output pre {
|
||||
font-size: 12px;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* Styles für AppointmentForm.jsx */
|
||||
.form-container {
|
||||
background-color: #fff;
|
||||
padding: 30px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.form-container h3 {
|
||||
border-bottom: 2px solid #f0f0f0;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 20px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.input-group label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-weight: bold;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.input-group input,
|
||||
.input-group textarea {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #ccc;
|
||||
box-sizing: border-box; /* Stellt sicher, dass Padding und Border zur Gesamtbreite gehören */
|
||||
}
|
||||
|
||||
.input-group textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.date-time-control {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.date-time-control > div {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.submit-button {
|
||||
background-color: #28a745;
|
||||
color: white;
|
||||
padding: 12px 20px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
margin-top: 20px;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.submit-button:hover {
|
||||
background-color: #218838;
|
||||
}
|
||||
|
||||
/* Styles für AppointmentList und AppointmentItem */
|
||||
.appointment-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.appointment-item {
|
||||
background-color: #fff;
|
||||
padding: 15px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
|
||||
border-left: 5px solid #007bff; /* Offene Termine */
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.appointment-item.done {
|
||||
opacity: 0.6;
|
||||
border-left: 5px solid #28a745; /* Erledigte Termine */
|
||||
background-color: #e9f5ee;
|
||||
}
|
||||
|
||||
.appointment-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.appointment-header input[type="checkbox"] {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.doctor-info {
|
||||
font-size: 1.1em;
|
||||
color: #007bff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.appointment-item.done .doctor-info,
|
||||
.appointment-item.done .appointment-date,
|
||||
.appointment-item.done .appointment-notes {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.arzt-art {
|
||||
font-weight: normal;
|
||||
font-size: 0.9em;
|
||||
color: #6c757d;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.appointment-date {
|
||||
margin: 5px 0;
|
||||
margin-left: 35px; /* Alignment mit der Checkbox */
|
||||
font-size: 0.9em;
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
.appointment-notes {
|
||||
margin: 5px 0 0 35px;
|
||||
padding-top: 5px;
|
||||
border-top: 1px dashed #eee;
|
||||
font-size: 0.85em;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.no-appointments-message {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
background-color: #fffae6;
|
||||
border: 1px solid #ffeeba;
|
||||
border-radius: 5px;
|
||||
color: #856404;
|
||||
}
|
||||
|
||||
.cancel-button {
|
||||
background-color: #dc3545;
|
||||
color: white;
|
||||
padding: 12px 20px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
margin-top: 20px;
|
||||
margin-left: 10px;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.cancel-button:hover {
|
||||
background-color: #c82333;
|
||||
}
|
||||
|
||||
/* Druck-Funktionalität */
|
||||
.print-controls {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.print-button {
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
padding: 10px 16px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.print-button:hover {
|
||||
background-color: #0069d9;
|
||||
}
|
||||
|
||||
/* Standard: Druckbereich ausblenden, Bildschirm-Inhalte anzeigen */
|
||||
.print-only {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media print {
|
||||
/* Bildschirm-UI ausblenden */
|
||||
.screen-only, .screen-only * {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Nur Druckbereich anzeigen */
|
||||
.print-only {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #ffffff;
|
||||
margin: 10mm;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.print-only h1 {
|
||||
margin-top: 0;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.print-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.print-table th,
|
||||
.print-table td {
|
||||
border: 1px solid #000;
|
||||
padding: 6px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.print-table thead th {
|
||||
background: #eee;
|
||||
-webkit-print-color-adjust: exact;
|
||||
print-color-adjust: exact;
|
||||
}
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 4.0 KiB |
@@ -1,158 +0,0 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
|
||||
// Hilfsfunktion: Format-Konvertierung vom Date-Objekt zurück ins Formular-Format
|
||||
const formatTimeToInput = (date) => date.toTimeString().slice(0, 5); // HH:MM
|
||||
const formatDateToInput = (date) => date.toISOString().split('T')[0]; // YYYY-MM-DD
|
||||
|
||||
const AppointmentForm = ({ onAddAppointment, editingAppointment, onUpdateAppointment, onCancelEdit }) => {
|
||||
|
||||
const initialFormData = {
|
||||
arztName: '',
|
||||
arztArt: '',
|
||||
terminDatum: '',
|
||||
terminUhrzeit: '',
|
||||
bemerkungen: '',
|
||||
};
|
||||
const [formData, setFormData] = useState(initialFormData);
|
||||
|
||||
// Füllt das Formular, wenn editingAppointment gesetzt wird
|
||||
useEffect(() => {
|
||||
if (editingAppointment) {
|
||||
setFormData({
|
||||
arztName: editingAppointment.arztName,
|
||||
arztArt: editingAppointment.arztArt,
|
||||
terminDatum: formatDateToInput(editingAppointment.termin),
|
||||
terminUhrzeit: formatTimeToInput(editingAppointment.termin),
|
||||
bemerkungen: editingAppointment.bemerkungen,
|
||||
});
|
||||
} else {
|
||||
// Leert das Formular, wenn Bearbeitung abgeschlossen/abgebrochen
|
||||
setFormData(initialFormData);
|
||||
}
|
||||
}, [editingAppointment]);
|
||||
|
||||
const handleChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData(prevData => ({
|
||||
...prevData,
|
||||
[name]: value
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!formData.arztName || !formData.terminDatum || !formData.terminUhrzeit) {
|
||||
alert("Bitte füllen Sie Name, Datum und Uhrzeit aus.");
|
||||
return;
|
||||
}
|
||||
|
||||
const baseAppointment = {
|
||||
...formData,
|
||||
// Datum und Uhrzeit zusammenführen
|
||||
termin: new Date(`${formData.terminDatum}T${formData.terminUhrzeit}`),
|
||||
erledigt: editingAppointment ? editingAppointment.erledigt : false
|
||||
};
|
||||
|
||||
if (editingAppointment) {
|
||||
// UPDATE: Füge die Mongo-ID hinzu und rufe die Update-Funktion auf
|
||||
onUpdateAppointment({
|
||||
...baseAppointment,
|
||||
id: editingAppointment.id
|
||||
});
|
||||
} else {
|
||||
// ADD: Ruft die Add-Funktion auf (keine temporäre ID mehr erforderlich)
|
||||
onAddAppointment(baseAppointment);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="form-container">
|
||||
<h3 className="form-title">
|
||||
{editingAppointment ? '✍️ Termin bearbeiten' : '🗓️ Neuen Termin hinzufügen'}
|
||||
</h3>
|
||||
|
||||
{/* Name des Arztes */}
|
||||
<div className="input-group">
|
||||
<label htmlFor="arztName">Name des Arztes:</label>
|
||||
<input
|
||||
type="text"
|
||||
id="arztName"
|
||||
name="arztName"
|
||||
value={formData.arztName}
|
||||
onChange={handleChange}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Art des Arztes */}
|
||||
<div className="input-group">
|
||||
<label htmlFor="arztArt">Art des Arztes:</label>
|
||||
<input
|
||||
type="text"
|
||||
id="arztArt"
|
||||
name="arztArt"
|
||||
value={formData.arztArt}
|
||||
onChange={handleChange}
|
||||
placeholder="z.B. Zahnarzt, Kardiologe"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Datum und Uhrzeit */}
|
||||
<div className="input-group">
|
||||
<label>Termin:</label>
|
||||
<div className="date-time-control">
|
||||
<div>
|
||||
<input
|
||||
type="date"
|
||||
id="terminDatum"
|
||||
name="terminDatum"
|
||||
value={formData.terminDatum}
|
||||
onChange={handleChange}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type="time"
|
||||
id="terminUhrzeit"
|
||||
name="terminUhrzeit"
|
||||
value={formData.terminUhrzeit}
|
||||
onChange={handleChange}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bemerkungen */}
|
||||
<div className="input-group">
|
||||
<label htmlFor="bemerkungen">Bemerkungen:</label>
|
||||
<textarea
|
||||
id="bemerkungen"
|
||||
name="bemerkungen"
|
||||
value={formData.bemerkungen}
|
||||
onChange={handleChange}
|
||||
rows="3"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button type="submit" className="submit-button">
|
||||
{editingAppointment ? 'Änderungen speichern' : 'Termin speichern'}
|
||||
</button>
|
||||
|
||||
{/* Abbrechen-Button nur im Bearbeitungsmodus anzeigen */}
|
||||
{editingAppointment && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onCancelEdit}
|
||||
className="cancel-button"
|
||||
>
|
||||
Bearbeitung abbrechen
|
||||
</button>
|
||||
)}
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
export default AppointmentForm;
|
||||
@@ -1,56 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
const formatDate = (date) => {
|
||||
const options = { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' };
|
||||
return date.toLocaleDateString('de-DE', options);
|
||||
};
|
||||
|
||||
// NEUE PROP: onEdit
|
||||
const AppointmentItem = ({ appointment, onToggleDone, onEdit, onDelete }) => {
|
||||
const { id, arztName, arztArt, termin, erledigt, bemerkungen } = appointment;
|
||||
|
||||
const itemClass = erledigt ? 'appointment-item done' : 'appointment-item';
|
||||
|
||||
return (
|
||||
// Klick auf das Item startet den Bearbeitungsmodus
|
||||
<li className={itemClass} onClick={() => onEdit(appointment)}>
|
||||
<div className="appointment-header"
|
||||
onClick={(e) => e.stopPropagation()} >
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={erledigt}
|
||||
onChange={(e) => {
|
||||
e.stopPropagation(); // Verhindert, dass der Klick das Bearbeitungs-Event auslöst
|
||||
onToggleDone(id); // Führt nur den Statuswechsel aus
|
||||
}}
|
||||
id={`check-${id}`}
|
||||
/>
|
||||
<label htmlFor={`check-${id}`} className="doctor-info">
|
||||
<strong>{arztName}</strong> {arztArt && <span className="arzt-art">({arztArt})</span>}
|
||||
</label>
|
||||
<button
|
||||
className="delete-button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation(); // Verhindert, dass das Bearbeiten ausgelöst wird
|
||||
onDelete(id);
|
||||
}}
|
||||
title="Termin löschen"
|
||||
>
|
||||
🗑️
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p className="appointment-date">
|
||||
<strong>Termin:</strong> {formatDate(termin)}
|
||||
</p>
|
||||
|
||||
{bemerkungen && (
|
||||
<p className="appointment-notes">
|
||||
<strong>Bemerkungen:</strong> {bemerkungen}
|
||||
</p>
|
||||
)}
|
||||
</li>
|
||||
);
|
||||
};
|
||||
|
||||
export default AppointmentItem;
|
||||
@@ -1,29 +0,0 @@
|
||||
import React from 'react';
|
||||
import AppointmentItem from './AppointmentItem';
|
||||
|
||||
// NEUE PROP: onEdit
|
||||
const AppointmentList = ({ appointments, onToggleDone, onEdit, onDelete }) => {
|
||||
|
||||
if (appointments.length === 0) {
|
||||
return <p className="no-appointments-message">Keine Termine vorhanden. Fügen Sie oben einen neuen Termin hinzu!</p>;
|
||||
}
|
||||
|
||||
return (
|
||||
<ul className="appointment-list">
|
||||
{appointments
|
||||
// Termine nach Datum sortieren
|
||||
.sort((a, b) => a.termin - b.termin)
|
||||
.map(appointment => (
|
||||
<AppointmentItem
|
||||
key={appointment.id}
|
||||
appointment={appointment}
|
||||
onToggleDone={onToggleDone}
|
||||
onEdit={onEdit} // Funktion an das Item weitergeben
|
||||
onDelete={onDelete} // NEU: Übergabe an das Item
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
};
|
||||
|
||||
export default AppointmentList;
|
||||
@@ -1,40 +0,0 @@
|
||||
// src/components/ConfirmationModal.jsx
|
||||
import React from 'react';
|
||||
import './ModalStyles.css'; // Wird gleich definiert
|
||||
|
||||
const ConfirmationModal = ({ isOpen, title, message, onConfirm, onCancel }) => {
|
||||
if (!isOpen) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
// Hintergrund-Overlay (schließt das Modal bei Klick außerhalb)
|
||||
<div className="modal-overlay" onClick={onCancel}>
|
||||
<div
|
||||
className="modal-content"
|
||||
// WICHTIG: Stoppt Event-Bubbling, damit Klick auf Content das Modal nicht schließt
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<h3 className="modal-title">{title}</h3>
|
||||
<p className="modal-message">{message}</p>
|
||||
|
||||
<div className="modal-actions">
|
||||
<button
|
||||
className="modal-button cancel"
|
||||
onClick={onCancel}
|
||||
>
|
||||
Abbrechen
|
||||
</button>
|
||||
<button
|
||||
className="modal-button confirm"
|
||||
onClick={onConfirm}
|
||||
>
|
||||
Bestätigen und Löschen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ConfirmationModal;
|
||||
@@ -1,74 +0,0 @@
|
||||
/* src/components/ModalStyles.css */
|
||||
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.6); /* Dunkles, halbtransparentes Overlay */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1000; /* Stellt sicher, dass es über allem liegt */
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: white;
|
||||
padding: 30px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
||||
width: 90%;
|
||||
max-width: 450px;
|
||||
animation: fadeIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(-20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
color: #dc3545;
|
||||
border-bottom: 2px solid #f0f0f0;
|
||||
padding-bottom: 10px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.modal-message {
|
||||
color: #333;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end; /* Buttons nach rechts ausrichten */
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.modal-button {
|
||||
padding: 10px 18px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.modal-button.cancel {
|
||||
background-color: #f0f0f0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.modal-button.cancel:hover {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
.modal-button.confirm {
|
||||
background-color: #dc3545; /* Rot für Löschaktion */
|
||||
color: white;
|
||||
}
|
||||
|
||||
.modal-button.confirm:hover {
|
||||
background-color: #c82333;
|
||||
}
|
||||
@@ -1,68 +0,0 @@
|
||||
:root {
|
||||
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #242424;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
}
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
}
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import './index.css'
|
||||
import App from './App.jsx'
|
||||
|
||||
createRoot(document.getElementById('root')).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>,
|
||||
)
|
||||
@@ -1,27 +0,0 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
// Im Dev-Modus laufen Frontend (5173) und Backend (3001) getrennt.
|
||||
// Damit das Frontend trotzdem relative URLs ("/api/...") verwenden kann,
|
||||
// proxyt Vite alle /api-Anfragen an das Backend. Das Ziel ist konfigurierbar:
|
||||
// - lokal ohne Docker: http://localhost:3001 (Standard)
|
||||
// - Docker-Dev: VITE_PROXY_TARGET=http://backend:3001
|
||||
const proxyTarget = process.env.VITE_PROXY_TARGET || 'http://localhost:3001'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
server: {
|
||||
host: '0.0.0.0',
|
||||
port: 5173,
|
||||
watch: {
|
||||
usePolling: true
|
||||
},
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: proxyTarget,
|
||||
changeOrigin: true
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,32 @@
|
||||
import { MongoClient, Db } from 'mongodb';
|
||||
|
||||
// MongoDB Verbindungs-URI aus der Umgebung.
|
||||
// Standard: lokale Instanz mit Datenbank "appointmentsdb".
|
||||
const uri = process.env.MONGO_URI || 'mongodb://localhost:27017/appointmentsdb';
|
||||
|
||||
// Im Next.js-Dev-Modus wird das Modul bei jedem Hot-Reload neu ausgewertet.
|
||||
// Damit nicht bei jeder Änderung eine neue Verbindung aufgebaut wird, wird
|
||||
// der Client (bzw. das Promise) global zwischengespeichert.
|
||||
const globalForMongo = globalThis as unknown as {
|
||||
_mongoClientPromise?: Promise<MongoClient>;
|
||||
};
|
||||
|
||||
function getClientPromise(): Promise<MongoClient> {
|
||||
if (!globalForMongo._mongoClientPromise) {
|
||||
const client = new MongoClient(uri);
|
||||
globalForMongo._mongoClientPromise = client.connect();
|
||||
}
|
||||
return globalForMongo._mongoClientPromise;
|
||||
}
|
||||
|
||||
/**
|
||||
* Gibt die (verbundene) Datenbankinstanz zurück.
|
||||
* Die Datenbank wird aus der URI abgeleitet.
|
||||
*/
|
||||
export async function getDb(): Promise<Db> {
|
||||
const client = await getClientPromise();
|
||||
return client.db();
|
||||
}
|
||||
|
||||
// Name der Collection zentral definiert.
|
||||
export const APPOINTMENTS_COLLECTION = 'appointments';
|
||||
@@ -0,0 +1,24 @@
|
||||
import type { NextConfig } from "next";
|
||||
import path from "path";
|
||||
|
||||
const nextConfig: NextConfig = {
|
||||
output: 'standalone',
|
||||
turbopack: {
|
||||
root: path.resolve(__dirname),
|
||||
},
|
||||
async headers() {
|
||||
return [
|
||||
{
|
||||
source: '/(.*)',
|
||||
headers: [
|
||||
{ key: 'X-Frame-Options', value: 'DENY' },
|
||||
{ key: 'X-Content-Type-Options', value: 'nosniff' },
|
||||
{ key: 'Referrer-Policy', value: 'strict-origin-when-cross-origin' },
|
||||
{ key: 'Permissions-Policy', value: 'camera=(), microphone=(), geolocation=()' },
|
||||
],
|
||||
},
|
||||
];
|
||||
},
|
||||
};
|
||||
|
||||
export default nextConfig;
|
||||
Generated
+6858
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,27 @@
|
||||
{
|
||||
"name": "aerzte-next",
|
||||
"version": "2.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "eslint"
|
||||
},
|
||||
"dependencies": {
|
||||
"mongodb": "^7.0.0",
|
||||
"next": "16.1.6",
|
||||
"react": "19.2.3",
|
||||
"react-dom": "19.2.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/postcss": "^4",
|
||||
"@types/node": "^20",
|
||||
"@types/react": "^19",
|
||||
"@types/react-dom": "^19",
|
||||
"eslint": "^9",
|
||||
"eslint-config-next": "16.1.6",
|
||||
"tailwindcss": "^4",
|
||||
"typescript": "^5"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
const config = {
|
||||
plugins: {
|
||||
"@tailwindcss/postcss": {},
|
||||
},
|
||||
};
|
||||
|
||||
export default config;
|
||||
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
@@ -0,0 +1,34 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2017",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"noEmit": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "bundler",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "react-jsx",
|
||||
"incremental": true,
|
||||
"plugins": [
|
||||
{
|
||||
"name": "next"
|
||||
}
|
||||
],
|
||||
"paths": {
|
||||
"@/*": ["./*"]
|
||||
}
|
||||
},
|
||||
"include": [
|
||||
"next-env.d.ts",
|
||||
"**/*.ts",
|
||||
"**/*.tsx",
|
||||
".next/types/**/*.ts",
|
||||
".next/dev/types/**/*.ts",
|
||||
"**/*.mts"
|
||||
],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
export interface Appointment {
|
||||
id: string;
|
||||
arztName: string;
|
||||
arztArt?: string;
|
||||
// termin als ISO-String (kommt so vom API-Route)
|
||||
termin: string;
|
||||
erledigt: boolean;
|
||||
bemerkungen?: string;
|
||||
}
|
||||
|
||||
// Für das Formular: Datum und Uhrzeit getrennt
|
||||
export interface AppointmentFormData {
|
||||
arztName: string;
|
||||
arztArt: string;
|
||||
terminDatum: string;
|
||||
terminUhrzeit: string;
|
||||
bemerkungen: string;
|
||||
}
|
||||
|
||||
// Payload, der an die API gesendet wird (create/update)
|
||||
export interface AppointmentPayload {
|
||||
arztName: string;
|
||||
arztArt?: string;
|
||||
termin: string;
|
||||
erledigt: boolean;
|
||||
bemerkungen?: string;
|
||||
}
|
||||
Reference in New Issue
Block a user