# 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 <repository-url>
   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.