diff --git a/README-Docker.md b/README-Docker.md deleted file mode 100644 index e3b83b4..0000000 --- a/README-Docker.md +++ /dev/null @@ -1,185 +0,0 @@ -# Tschunk Order - Docker Deployment - -Diese Anleitung beschreibt, wie Sie die Tschunk Order Anwendung mit Docker Compose deployen können. - -## Voraussetzungen - -- Docker -- Docker Compose - -## Projektstruktur - -``` -tschunkorder/ -├── docker-compose.yml # Haupt-Konfiguration -├── frontend/ -│ ├── Dockerfile # Frontend Container -│ ├── nginx.conf # Frontend Nginx-Konfiguration -│ └── .dockerignore -├── backend/ -│ ├── Dockerfile # Backend Container -│ └── .dockerignore -└── nginx/ - ├── nginx.conf # Haupt-Nginx-Konfiguration - └── conf.d/ - └── default.conf # Reverse Proxy-Konfiguration -``` - -## Services - -### 1. Frontend (Vue.js + Vite) -- **Port**: Intern 80, extern über Nginx -- **Technologie**: Vue.js 3 mit Vite -- **Container**: `tschunk-frontend` - -### 2. Backend (FastAPI) -- **Port**: Intern 8000, extern 8000 (optional) -- **Technologie**: FastAPI mit Uvicorn -- **Container**: `tschunk-backend` - -### 3. Nginx Reverse Proxy -- **Port**: 80 (HTTP), 443 (HTTPS, optional) -- **Funktion**: Reverse Proxy für Frontend und Backend -- **Container**: `tschunk-nginx` - -## Deployment - -### 1. Anwendung starten - -```bash -# Alle Services bauen und starten -docker-compose up --build - -# Im Hintergrund starten -docker-compose up --build -d -``` - -### 2. Anwendung stoppen - -```bash -# Services stoppen -docker-compose down - -# Services und Volumes löschen -docker-compose down -v -``` - -### 3. Logs anzeigen - -```bash -# Alle Logs -docker-compose logs - -# Spezifischer Service -docker-compose logs frontend -docker-compose logs backend -docker-compose logs nginx - -# Logs folgen -docker-compose logs -f -``` - -## Zugriff auf die Anwendung - -- **Frontend**: http://localhost/ (oder IP-Adresse) -- **Backend API**: http://localhost/api/ (oder IP-Adresse) -- **WebSocket**: ws://localhost/api/ws (oder IP-Adresse) -- **Health Check**: http://localhost/health (oder IP-Adresse) - -## API-Endpunkte - -- `GET /api/orders` - Alle Bestellungen abrufen -- `POST /api/orders` - Neue Bestellung erstellen -- `DELETE /api/orders/{id}` - Bestellung löschen -- `GET /api/drinks` - Verfügbare Getränke - -## WebSocket - -Der WebSocket-Endpunkt ist unter `ws://localhost/api/ws` verfügbar und unterstützt: -- Echtzeit-Updates bei neuen/gelöschten Bestellungen -- Ping/Pong für Verbindungsüberwachung -- Bestellungen erstellen/löschen über WebSocket - -## Konfiguration - -### Umgebungsvariablen - -#### Frontend -- `VITE_API_BASE_URL`: Backend API URL (Standard: http://backend:8000) - -#### Backend -- `PYTHONUNBUFFERED`: Python Output nicht puffern (Standard: 1) - -### Nginx-Konfiguration - -Die Nginx-Konfiguration befindet sich in: -- `nginx/nginx.conf` - Haupt-Konfiguration -- `nginx/conf.d/default.conf` - Server-Konfiguration - -#### Features -- Rate Limiting für API und WebSocket -- Gzip-Kompression -- Security Headers -- WebSocket-Support -- SPA-Routing für Frontend -- Vereinfachte Proxy-Logik (alle API-Endpunkte unter /api) - -## Troubleshooting - -### Container startet nicht -```bash -# Logs prüfen -docker-compose logs [service-name] - -# Container neu bauen -docker-compose build --no-cache [service-name] -``` - -### Netzwerk-Probleme -```bash -# Netzwerk-Status prüfen -docker network ls -docker network inspect tschunkorder_tschunk-network -``` - -### Port-Konflikte -Falls Port 80 bereits belegt ist, ändern Sie in `docker-compose.yml`: -```yaml -nginx: - ports: - - "8080:80" # Statt "80:80" -``` - -## Entwicklung - -### Hot Reload (Entwicklung) -Für die Entwicklung können Sie die Services einzeln starten: - -```bash -# Backend mit Hot Reload -cd backend -uvicorn main:app --reload --host 0.0.0.0 --port 8000 - -# Frontend mit Hot Reload -cd frontend -npm run dev -``` - -### Datenbank-Persistenz -Die aktuelle Implementierung verwendet eine In-Memory-Datenbank. Für Produktionsumgebungen sollten Sie eine persistente Datenbank hinzufügen. - -## Sicherheit - -- Alle Services laufen in isolierten Containern -- Nginx bietet Rate Limiting und Security Headers -- Backend läuft als non-root User -- WebSocket-Verbindungen sind begrenzt - -## Monitoring - -### Health Checks -- Backend: Automatischer Health Check alle 30 Sekunden -- Nginx: `/health` Endpunkt - -### Logs -Alle Services loggen in stdout/stderr und können über `docker-compose logs` abgerufen werden. \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..43083c8 --- /dev/null +++ b/README.md @@ -0,0 +1,256 @@ +# TschunkOrder + +A modern web application for managing drink orders, specifically designed for Tschunk beverages. The application provides a real-time ordering system with a Vue.js frontend and FastAPI backend, featuring WebSocket support for live updates and Prometheus metrics for monitoring. + +## Purpose + +TschunkOrder is a full-stack application that allows users to: +- Create and manage drink orders in real-time +- Choose from various Tschunk variants (Tschunk, Tschunk Hannover-Mische, Tschunk alkoholfreier Rum, Virgin Tschunk) +- Select between Flora Mate and Club Mate +- Add custom notes and special requests +- View order statistics and metrics +- Receive live updates via WebSocket connections + +## Quick Start with Docker + +The easiest way to run the application is using the provided Docker Compose setup: + +```bash +# Clone the repository (if not already done) +git clone ssh://gogs@git.hannover.ccc.de:3071/clarity/tschunkorder.git +cd tschunkorder + +# Start all services +docker-compose up -d + +# Access the application +# Frontend: http://[url] +# API Documentation: http://[url]/api/docs +# Prometheus Metrics: http://[url]/metrics +``` + +The Docker setup includes: +- **Frontend**: Vue.js application served on port 80 +- **Backend**: FastAPI server with WebSocket support +- **Nginx**: Reverse proxy with rate limiting and security headers + +## Development Environment Setup + +### Backend Development + +**Prerequisites:** +- Python 3.8+ +- pip + +**Setup:** +```bash +cd backend + +# Create virtual environment +python -m venv venv + +# Activate virtual environment +# Linux/macOS: +source venv/bin/activate +# Windows: +# venv\Scripts\activate + +# Install dependencies +pip install -r requirements.txt + +# Run the development server +python main.py +# or +uvicorn main:app --reload +``` + +The backend will be available at `http://localhost:8000` + +### Frontend Development + +**Prerequisites:** +- Node.js 18+ +- npm + +**Setup:** +```bash +cd frontend + +# Install dependencies +npm install + +# Start development server +npm run dev +``` + +The frontend will be available at `http://localhost:5173` + +**Available Scripts:** +- `npm run dev` - Start development server +- `npm run build` - Build for production +- `npm run preview` - Preview production build +- `npm run lint` - Run ESLint +- `npm run type-check` - Check TypeScript types + +## API Description + +The backend provides a RESTful API with WebSocket support for real-time updates. + +### Base URL +- Development: `http://[url]:8000` +- Production: `http://[url]/api` (when setup via docker) + +### REST Endpoints + +#### Create Order +```http +POST /api/orders +Content-Type: application/json + +{ + "drinks": [ + { + "drink_type": "Tschunk", + "mate_type": "Club Mate", + "quantity": 2, + "notes": "Extra cold please" + } + ] +} +``` + +#### Get All Orders +```http +GET /api/orders +``` + +#### Delete Order +```http +DELETE /api/orders/{order_id} +``` + +#### Get Available Drinks +```http +GET /api/drinks +``` + +#### Get Drink Statistics +```http +GET /api/stats/drinks +``` + +### WebSocket Endpoint + +**Connection:** `ws://[url]:8000/api/ws` (development) or `ws://[url]/api/ws` (production) + +**Message Types:** + +1. **Create Order:** +```json +{ + "type": "create_order", + "drinks": [...] +} +``` + +2. **Get All Orders:** +```json +{ + "type": "get_all_orders" +} +``` + +3. **Delete Order:** +```json +{ + "type": "delete_order", + "order_id": "uuid" +} +``` + +4. **Ping/Pong:** +```json +{ + "type": "ping" +} +``` + +**Received Messages:** + +- `order_created` - New order created +- `order_deleted` - Order deleted +- `all_orders` - All current orders +- `pong` - Response to ping + +### Available Drink Types +- Tschunk +- Tschunk Hannover-Mische +- Tschunk alkoholfreier Rum +- Virgin Tschunk + +### Available Mate Types +- Flora Mate +- Club Mate + +## Prometheus Metrics + +The application exposes Prometheus metrics at `/metrics` endpoint for monitoring drink sales and application performance. + +### Available Metrics + +#### `tschunk_drinks_sold_total` +- **Type:** Counter +- **Labels:** `drink_type`, `mate_type` +- **Description:** Total number of drinks sold by type and mate variety + +**Example:** +``` +# HELP tschunk_drinks_sold_total Total number of drinks sold +# TYPE tschunk_drinks_sold_total counter +tschunk_drinks_sold_total{drink_type="Tschunk",mate_type="Club Mate"} 15 +tschunk_drinks_sold_total{drink_type="Virgin Tschunk",mate_type="Flora Mate"} 8 +``` + +### Metrics Persistence + +- Metrics are persisted to `drink_stats.json` in the backend directory +- Counters are restored on application restart +- Data survives container restarts when using Docker volumes + +### Monitoring Integration + +The metrics endpoint can be scraped by: +- Prometheus server +- Grafana dashboards +- Other monitoring tools + +**Example Prometheus configuration:** +```yaml +scrape_configs: + - job_name: 'tschunkorder' + static_configs: + - targets: ['localhost:8000'] + metrics_path: '/metrics' +``` + +## Project Structure + +``` +tschunkorder/ +├── backend/ # FastAPI backend +│ ├── main.py # Main application entry point +│ ├── models.py # Pydantic models +│ ├── database.py # In-memory database +│ ├── websocket_manager.py # WebSocket connection management +│ ├── prometheus_metrics.py # Prometheus metrics +│ └── requirements.txt # Python dependencies +├── frontend/ # Vue.js frontend +│ ├── src/ # Source code +│ ├── package.json # Node.js dependencies +│ └── vite.config.ts # Vite configuration +├── nginx/ # Nginx configuration +│ ├── nginx.conf # Main nginx config +│ └── conf.d/ # Server configurations +└── docker-compose.yml # Docker orchestration +``` \ No newline at end of file diff --git a/backend/README.md b/backend/README.md deleted file mode 100644 index d12f4f8..0000000 --- a/backend/README.md +++ /dev/null @@ -1,371 +0,0 @@ -# Tschunk Order API - -Eine RESTful API für Tschunk-Bestellungen, entwickelt mit FastAPI. - -## Features - -- Bestellungen mit mehreren Getränken erstellen -- Alle Bestellungen abrufen -- Spezifische Bestellungen löschen -- Unterstützung für verschiedene Tschunk-Varianten -- Wahl zwischen Flora Mate und Club Mate -- Mengenangabe für jedes Getränk (Standard: 1) -- Anmerkungen und Sonderwünsche für jedes Getränk -- **WebSocket-Unterstützung für Echtzeit-Updates** -- **Automatisierte Tests mit pytest** - -## Verfügbare Getränke - -- **Tschunk** -- **Tschunk Hannover-Mische** -- **Tschunk alkoholfreier Rum** -- **Virgin Tschunk** - -## Mate-Sorten - -- **Flora Mate** -- **Club Mate** - -## Installation - -### Voraussetzungen - -- Python 3.8+ installiert - -### Setup - -1. **Virtuelles Environment erstellen und aktivieren:** - -```bash -cd backend - -# Virtuelles Environment erstellen -python -m venv venv - -# Virtuelles Environment aktivieren -# Unter Linux/macOS: -source venv/bin/activate - -# Unter Windows: -# venv\Scripts\activate -``` - -2. **Abhängigkeiten installieren:** - -```bash -pip install -r requirements.txt -``` - -## Verwendung - -### Server starten - -```bash -# Stelle sicher, dass das virtuelle Environment aktiviert ist -source venv/bin/activate # Linux/macOS -# venv\Scripts\activate # Windows - -# Server starten -python main.py -``` - -Oder mit uvicorn: - -```bash -uvicorn main:app --reload -``` - -Der Server läuft dann auf `http://localhost:8000` - -### API-Dokumentation - -Die automatisch generierte API-Dokumentation ist verfügbar unter: -- Swagger UI: `http://localhost:8000/docs` -- ReDoc: `http://localhost:8000/redoc` - -## API-Endpunkte - -### 1. Bestellung erstellen -``` -POST /orders -``` - -Beispiel-Request: -```json -{ - "drinks": [ - { - "drink_type": "Tschunk", - "mate_type": "Club Mate", - "quantity": 2, - "notes": "Bitte extra kalt servieren" - }, - { - "drink_type": "Virgin Tschunk", - "mate_type": "Flora Mate", - "notes": "Ohne Eiswürfel" - }, - { - "drink_type": "Tschunk Hannover-Mische", - "mate_type": "Club Mate", - "quantity": 1 - } - ] -} -``` - -**Hinweise:** -- Das `quantity`-Feld ist optional. Falls nicht angegeben, wird automatisch 1 verwendet. -- Das `notes`-Feld ist optional und kann für Sonderwünsche oder Anmerkungen verwendet werden (max. 500 Zeichen). -- **Alle verbundenen WebSocket-Clients erhalten automatisch ein Update.** - -### 2. Alle Bestellungen abrufen -``` -GET /orders -``` - -### 3. Bestellung löschen -``` -DELETE /orders/{order_id} -``` - -**Hinweis:** Alle verbundenen WebSocket-Clients erhalten automatisch ein Update. - -### 4. Verfügbare Getränke anzeigen -``` -GET /drinks -``` - -### 5. WebSocket für Echtzeit-Updates -``` -WS /ws -``` - -**WebSocket-Nachrichten-Formate:** - -#### Neue Bestellung: -```json -{ - "type": "order_created", - "timestamp": "2024-01-15T10:30:00", - "order": { - "id": "uuid-here", - "order_date": "2024-01-15T10:30:00", - "drinks": [...] - } -} -``` - -#### Bestellung gelöscht: -```json -{ - "type": "order_deleted", - "timestamp": "2024-01-15T10:35:00", - "order_id": "uuid-here" -} -``` - -#### Alle Bestellungen (bei Verbindung): -```json -{ - "type": "all_orders", - "timestamp": "2024-01-15T10:30:00", - "orders": [...] -} -``` - -## Beispiel-Verwendung mit curl - -### Bestellung erstellen: -```bash -curl -X POST "http://localhost:8000/orders" \ - -H "Content-Type: application/json" \ - -d '{ - "drinks": [ - { - "drink_type": "Tschunk", - "mate_type": "Club Mate", - "quantity": 3, - "notes": "Bitte mit Limettenscheibe garnieren" - }, - { - "drink_type": "Virgin Tschunk", - "mate_type": "Flora Mate", - "notes": "Allergie gegen Zitrusfrüchte" - } - ] - }' -``` - -### Alle Bestellungen abrufen: -```bash -curl -X GET "http://localhost:8000/orders" -``` - -### Bestellung löschen: -```bash -curl -X DELETE "http://localhost:8000/orders/{order_id}" -``` - -## WebSocket-Client Beispiel - -### JavaScript (Browser): -```javascript -const ws = new WebSocket('ws://localhost:8000/ws'); - -ws.onopen = function() { - console.log('WebSocket verbunden'); -}; - -ws.onmessage = function(event) { - const data = JSON.parse(event.data); - - switch(data.type) { - case 'order_created': - console.log('Neue Bestellung:', data.order); - break; - case 'order_deleted': - console.log('Bestellung gelöscht:', data.order_id); - break; - case 'all_orders': - console.log('Alle Bestellungen:', data.orders); - break; - } -}; - -ws.onclose = function() { - console.log('WebSocket getrennt'); -}; -``` - -### Python: -```python -import asyncio -import websockets -import json - -async def websocket_client(): - async with websockets.connect('ws://localhost:8000/ws') as websocket: - while True: - message = await websocket.recv() - data = json.loads(message) - print(f"Empfangen: {data}") - -asyncio.run(websocket_client()) -``` - -## Testing - -Das Projekt enthält mehrere Test-Optionen: - -### 1. Automatisierte Tests (Empfohlen) -```bash -# Stelle sicher, dass das virtuelle Environment aktiviert ist -source venv/bin/activate - -# Führe alle Tests automatisch aus -python run_tests.py -``` - -**Features der automatisierten Tests:** -- ✅ **Kein Server-Start nötig** - Tests laufen automatisch -- ✅ **Vollständige API-Abdeckung** - Alle Endpunkte getestet -- ✅ **WebSocket-Tests** - Echtzeit-Funktionalität getestet -- ✅ **Datenbank-Tests** - CRUD-Operationen getestet -- ✅ **Validierung-Tests** - Pydantic-Modelle getestet -- ✅ **Fehlerbehandlung** - Edge Cases getestet - -### 2. Manuelle API-Tests -```bash -# Stelle sicher, dass das virtuelle Environment aktiviert ist -source venv/bin/activate - -# Test-Skript ausführen -python test_api.py -``` - -### 3. WebSocket-Tests -```bash -# Stelle sicher, dass das virtuelle Environment aktiviert ist -source venv/bin/activate - -# WebSocket-Test ausführen -python test_websocket.py -``` - -### 4. Erweiterte Test-Optionen -```bash -# Detaillierte pytest-Ausgabe -python -m pytest test_automated.py -v - -# Nur bestimmte Tests ausführen -python -m pytest test_automated.py -k "test_create" - -# Tests mit Coverage -python -m pytest test_automated.py --cov=. - -# Tests parallel ausführen -python -m pytest test_automated.py -n auto -``` - -## Projektstruktur - -``` -backend/ -├── main.py # FastAPI-Anwendung -├── models.py # Pydantic-Modelle -├── database.py # In-Memory-Datenbank -├── websocket_manager.py # WebSocket-Management -├── test_automated.py # Automatisierte Tests (pytest) -├── test_api.py # Manueller API-Test -├── test_websocket.py # WebSocket-Test -├── run_tests.py # Test-Runner -├── pytest.ini # pytest-Konfiguration -├── requirements.txt # Python-Abhängigkeiten -├── .gitignore # Git-Ignore-Datei -├── venv/ # Virtuelles Environment (wird ignoriert) -└── README.md # Diese Datei -``` - -## Hinweise - -- **Virtuelles Environment**: Das Projekt verwendet ein virtuelles Environment, um Abhängigkeiten zu isolieren -- **In-Memory-Datenbank**: Die API verwendet eine In-Memory-Datenbank, d.h. alle Daten gehen beim Neustart verloren -- **Produktionsumgebung**: Für Produktionsumgebungen sollte eine persistente Datenbank verwendet werden -- **Validierung**: Die API validiert automatisch alle Eingaben mit Pydantic -- **Mengenangabe**: Jedes Getränk kann eine Menge haben (mindestens 1, Standard: 1) -- **Anmerkungen**: Jedes Getränk kann optionale Anmerkungen haben (max. 500 Zeichen) -- **Echtzeit-Updates**: WebSocket-Clients erhalten automatisch Updates bei Änderungen -- **Automatisierte Tests**: Vollständige Test-Suite mit pytest für alle Funktionen - -## Troubleshooting - -### Virtuelles Environment aktivieren -Falls du eine Fehlermeldung bezüglich fehlender Module erhältst, stelle sicher, dass das virtuelle Environment aktiviert ist: - -```bash -# Status prüfen -which python # Sollte auf venv/bin/python zeigen - -# Falls nicht aktiviert: -source venv/bin/activate -``` - -### Port bereits belegt -Falls Port 8000 bereits belegt ist, kannst du einen anderen Port verwenden: - -```bash -uvicorn main:app --reload --port 8001 -``` - -### WebSocket-Verbindungsprobleme -Falls WebSocket-Verbindungen nicht funktionieren: -- Stelle sicher, dass der Server läuft -- Prüfe Firewall-Einstellungen -- Verwende `ws://` für lokale Verbindungen, `wss://` für HTTPS - -### Test-Probleme -Falls Tests fehlschlagen: -- Stelle sicher, dass alle Abhängigkeiten installiert sind: `pip install -r requirements.txt` -- Aktiviere das virtuelle Environment: `source venv/bin/activate` -- Führe Tests mit detaillierter Ausgabe aus: `python -m pytest test_automated.py -v` \ No newline at end of file diff --git a/frontend/README.md b/frontend/README.md deleted file mode 100644 index 9ed8607..0000000 --- a/frontend/README.md +++ /dev/null @@ -1,170 +0,0 @@ -# TschunkOrder Frontend - -Das Frontend für die TschunkOrder-Anwendung - eine Vue.js-basierte Webanwendung zur Verwaltung von Getränkebestellungen. - -## 📋 Übersicht - -Das Frontend ist eine moderne Single-Page-Application (SPA), die mit Vue 3, TypeScript und Vite entwickelt wurde. Es bietet eine benutzerfreundliche Oberfläche für: - -- **Bestellungen anzeigen**: Übersicht über alle bestehenden Bestellungen -- **Neue Bestellungen erstellen**: Formular zum Erstellen neuer Getränkebestellungen -- **Bestellungen verwalten**: Bearbeiten und Löschen von Bestellungen - -## 🛠️ Technologie-Stack - -- **Vue 3** - Progressive JavaScript Framework -- **TypeScript** - Typsichere JavaScript-Entwicklung -- **Vite** - Schneller Build-Tool und Development Server -- **Vue Router** - Client-seitiges Routing -- **Pinia** - State Management für Vue -- **ESLint** - Code-Qualität und Konsistenz - -## 📦 Installation - -### Voraussetzungen - -- Node.js (Version 18 oder höher) -- npm (wird mit Node.js installiert) - -### Projekt einrichten - -1. **Repository klonen** (falls noch nicht geschehen): - ```bash - git clone - cd tschunkorder/frontend - ``` - -2. **Abhängigkeiten installieren**: - ```bash - npm install - ``` - -## 🚀 Entwicklung - -### Development Server starten - -```bash -npm run dev -``` - -Der Development Server startet standardmäßig auf `http://localhost:5173`. Die Anwendung unterstützt Hot-Reload, sodass Änderungen automatisch im Browser aktualisiert werden. - -### Code-Qualität - -**Linting ausführen**: -```bash -npm run lint -``` - -**TypeScript-Typen prüfen**: -```bash -npm run type-check -``` - -## 🏗️ Build und Deployment - -### Produktions-Build erstellen - -```bash -npm run build -``` - -Der Build-Prozess erstellt optimierte Dateien im `dist/`-Verzeichnis. - -### Build-Vorschau - -```bash -npm run preview -``` - -Zeigt eine lokale Vorschau des Produktions-Builds an. - -## 📁 Projektstruktur - -``` -frontend/ -├── src/ -│ ├── assets/ # Statische Assets (Bilder, Styles, etc.) -│ ├── components/ # Wiederverwendbare Vue-Komponenten -│ │ ├── icons/ # Icon-Komponenten -│ │ ├── OrderCard.vue -│ │ └── NewDrinkCard.vue -│ ├── router/ # Vue Router Konfiguration -│ ├── stores/ # Pinia State Management -│ ├── types/ # TypeScript Typdefinitionen -│ ├── views/ # Seiten-Komponenten -│ │ ├── CreateOrderView.vue -│ │ └── OrdersView.vue -│ ├── App.vue # Haupt-App-Komponente -│ └── main.ts # Anwendungs-Einstiegspunkt -├── public/ # Öffentliche statische Dateien -├── package.json # Projekt-Abhängigkeiten und Scripts -├── vite.config.ts # Vite-Konfiguration -├── tsconfig.json # TypeScript-Konfiguration -└── eslint.config.ts # ESLint-Konfiguration -``` - -## 🎨 Komponenten - -### Views (Seiten) - -- **OrdersView.vue**: Zeigt eine Übersicht aller Bestellungen an -- **CreateOrderView.vue**: Formular zum Erstellen neuer Bestellungen - -### Komponenten - -- **OrderCard.vue**: Karten-Komponente zur Darstellung einzelner Bestellungen -- **NewDrinkCard.vue**: Komponente zum Hinzufügen neuer Getränke zur Bestellung - -## 🔧 Konfiguration - -### Vite-Konfiguration - -Die Vite-Konfiguration befindet sich in `vite.config.ts` und enthält: -- Vue-Plugin-Konfiguration -- Development-Tools-Integration -- Build-Optimierungen - -### TypeScript-Konfiguration - -- `tsconfig.json`: Hauptkonfiguration -- `tsconfig.app.json`: App-spezifische Einstellungen -- `tsconfig.node.json`: Node.js-Umgebung - -## 🐛 Troubleshooting - -### Häufige Probleme - -1. **Port bereits belegt**: - - Vite versucht automatisch den nächsten verfügbaren Port - - Oder manuell in `vite.config.ts` ändern - -2. **TypeScript-Fehler**: - ```bash - npm run type-check - ``` - -3. **Linting-Fehler**: - ```bash - npm run lint - ``` - -## 📚 Nützliche Links - -- [Vue 3 Dokumentation](https://vuejs.org/) -- [Vite Dokumentation](https://vitejs.dev/) -- [Vue Router Dokumentation](https://router.vuejs.org/) -- [Pinia Dokumentation](https://pinia.vuejs.org/) -- [TypeScript Dokumentation](https://www.typescriptlang.org/) - -## 🤝 Beitragen - -1. Fork des Repositories erstellen -2. Feature-Branch erstellen (`git checkout -b feature/AmazingFeature`) -3. Änderungen committen (`git commit -m 'Add some AmazingFeature'`) -4. Branch pushen (`git push origin feature/AmazingFeature`) -5. Pull Request erstellen - -## 📄 Lizenz - -Dieses Projekt ist Teil der TschunkOrder-Anwendung.