e95bb4cb76
Features: - Backend: Node.js/Express mit MySQL/MariaDB - Frontend: Vue.js 3 mit Composition API - UTC-Zeithandling für korrekte Zeiterfassung - Timewish-basierte Überstundenberechnung - Wochenübersicht mit Urlaubs-/Krankheits-/Feiertagshandling - Bereinigtes Arbeitsende (Generell/Woche) - Überstunden-Offset für historische Daten - Fixed Layout mit scrollbarem Content - Kompakte UI mit grünem Theme
219 lines
5.1 KiB
Markdown
219 lines
5.1 KiB
Markdown
# TimeClock v3.0
|
|
|
|
🕐 Eine moderne Full-Stack-Zeiterfassungsanwendung mit Node.js und Vue 3.
|
|
|
|
## Features
|
|
|
|
- ⏱️ **Echtzeit-Zeiterfassung** - Starten und stoppen Sie Timer mit einem Klick
|
|
- 📊 **Detaillierte Statistiken** - Verfolgen Sie Ihre Zeit nach Projekten
|
|
- 💼 **Projekt-Management** - Organisieren Sie Ihre Zeiteinträge nach Projekten
|
|
- 🎨 **Moderne UI** - Schöne und intuitive Benutzeroberfläche
|
|
- 📱 **Responsive Design** - Funktioniert auf Desktop und Mobile
|
|
|
|
## Technologie-Stack
|
|
|
|
### Backend
|
|
- **Node.js** mit Express.js
|
|
- **MySQL-Datenbank** (stechuhr2)
|
|
- RESTful API mit klassenbasierter Architektur
|
|
- Repository-Pattern für saubere Datenbankabstraktion
|
|
- Service-Layer für Business-Logik
|
|
- CORS & Helmet für Sicherheit
|
|
- Morgan für Logging
|
|
|
|
### Frontend
|
|
- **Vue 3** mit Composition API
|
|
- **Vite** als Build-Tool
|
|
- **Vue Router** für Navigation
|
|
- **Pinia** für State Management
|
|
- Moderne CSS mit Gradients
|
|
|
|
## Installation
|
|
|
|
### Voraussetzungen
|
|
- Node.js (v16 oder höher)
|
|
- npm oder yarn
|
|
|
|
### Backend Setup
|
|
|
|
```bash
|
|
cd backend
|
|
npm install
|
|
|
|
# .env Datei erstellen und konfigurieren
|
|
cp .env.example .env
|
|
# Bearbeiten Sie .env mit Ihren MySQL-Zugangsdaten
|
|
|
|
npm run dev
|
|
```
|
|
|
|
Der Backend-Server läuft standardmäßig auf `http://localhost:3010`
|
|
|
|
**Wichtig:** Siehe `backend/DB_SETUP.md` für detaillierte Datenbank-Konfiguration!
|
|
|
|
### Frontend Setup
|
|
|
|
```bash
|
|
cd frontend
|
|
npm install
|
|
npm run dev
|
|
```
|
|
|
|
Das Frontend läuft standardmäßig auf `http://localhost:5010`
|
|
|
|
## Verwendung
|
|
|
|
1. Starten Sie zuerst den Backend-Server
|
|
2. Starten Sie dann den Frontend-Development-Server
|
|
3. Öffnen Sie `http://localhost:5010` in Ihrem Browser
|
|
|
|
### Dashboard
|
|
- Starten Sie einen neuen Timer mit Projekt und Beschreibung
|
|
- Sehen Sie die aktuelle Laufzeit in Echtzeit
|
|
- Stoppen Sie den Timer, wenn Sie fertig sind
|
|
- Sehen Sie Ihre letzten 5 Einträge
|
|
|
|
### Einträge
|
|
- Vollständige Liste aller Zeiteinträge
|
|
- Filtern nach Status (laufend/beendet)
|
|
- Löschen von Einträgen
|
|
|
|
### Statistiken
|
|
- Gesamtanzahl der Einträge
|
|
- Gesamtarbeitsstunden
|
|
- Aufschlüsselung nach Projekten
|
|
- Detaillierte Projekt-Statistiken
|
|
|
|
## API-Endpunkte
|
|
|
|
### GET /api/health
|
|
Health-Check des Servers
|
|
|
|
### GET /api/time-entries
|
|
Alle Zeiteinträge abrufen
|
|
|
|
### POST /api/time-entries
|
|
Neuen Zeiteintrag erstellen (Timer starten)
|
|
|
|
```json
|
|
{
|
|
"project": "Projektname",
|
|
"description": "Beschreibung der Tätigkeit"
|
|
}
|
|
```
|
|
|
|
### PUT /api/time-entries/:id
|
|
Zeiteintrag aktualisieren (Timer stoppen)
|
|
|
|
```json
|
|
{
|
|
"endTime": "2025-10-15T10:30:00.000Z"
|
|
}
|
|
```
|
|
|
|
### DELETE /api/time-entries/:id
|
|
Zeiteintrag löschen
|
|
|
|
### GET /api/time-entries/stats/summary
|
|
Statistiken abrufen
|
|
|
|
## Projektstruktur
|
|
|
|
```
|
|
TimeClock/
|
|
├── backend/
|
|
│ ├── src/
|
|
│ │ ├── config/
|
|
│ │ │ └── database.js
|
|
│ │ ├── controllers/
|
|
│ │ │ └── TimeEntryController.js
|
|
│ │ ├── services/
|
|
│ │ │ └── TimeEntryService.js
|
|
│ │ ├── repositories/
|
|
│ │ │ ├── WorklogRepository.js
|
|
│ │ │ └── UserRepository.js
|
|
│ │ ├── models/
|
|
│ │ │ └── TimeEntry.js
|
|
│ │ ├── routes/
|
|
│ │ │ └── timeEntries.js
|
|
│ │ └── index.js
|
|
│ ├── ARCHITECTURE.md
|
|
│ ├── DATABASE.md
|
|
│ ├── DB_SETUP.md
|
|
│ └── package.json
|
|
│
|
|
└── frontend/
|
|
├── src/
|
|
│ ├── assets/
|
|
│ │ └── main.css
|
|
│ ├── components/
|
|
│ ├── router/
|
|
│ │ └── index.js
|
|
│ ├── stores/
|
|
│ │ └── timeStore.js
|
|
│ ├── views/
|
|
│ │ ├── Dashboard.vue
|
|
│ │ ├── Entries.vue
|
|
│ │ └── Stats.vue
|
|
│ ├── App.vue
|
|
│ └── main.js
|
|
├── index.html
|
|
├── package.json
|
|
└── vite.config.js
|
|
```
|
|
|
|
## Entwicklung
|
|
|
|
### Backend-Entwicklung
|
|
```bash
|
|
cd backend
|
|
npm run dev # Startet mit nodemon für Auto-Reload
|
|
```
|
|
|
|
### Frontend-Entwicklung
|
|
```bash
|
|
cd frontend
|
|
npm run dev # Startet Vite Dev-Server mit HMR
|
|
```
|
|
|
|
### Build für Produktion
|
|
|
|
**Frontend:**
|
|
```bash
|
|
cd frontend
|
|
npm run build
|
|
```
|
|
|
|
Die Build-Dateien befinden sich dann im `dist/` Ordner.
|
|
|
|
## Implementierte Features
|
|
|
|
- ✅ **MySQL-Datenbank** - Integration mit bestehender stechuhr2-Datenbank
|
|
- ✅ **Repository-Pattern** - Saubere Datenbankabstraktion
|
|
- ✅ **Service-Layer** - Klare Trennung von Business-Logik
|
|
- ✅ **Klassenbasierte Architektur** - Controller und Services als Klassen
|
|
|
|
## Geplante Erweiterungen
|
|
|
|
- 👤 **Benutzer-Authentifizierung** - JWT-basiertes Login-System
|
|
- 🔐 **Multi-User Support** - Mehrere Benutzer mit Berechtigungen
|
|
- 📧 **E-Mail-Berichte** - Automatische Zeitberichte per E-Mail
|
|
- 📱 **Mobile App** - React Native oder Flutter App
|
|
- 📈 **Erweiterte Analytics** - Grafiken und Diagramme
|
|
- 🌐 **Mehrsprachigkeit** - i18n Integration
|
|
- 🔔 **Benachrichtigungen** - Push-Notifications
|
|
- 📤 **Export-Funktionen** - CSV, PDF Export
|
|
|
|
## Lizenz
|
|
|
|
ISC
|
|
|
|
## Autor
|
|
|
|
TimeClock v3 - 2025
|
|
|
|
## Support
|
|
|
|
Bei Fragen oder Problemen öffnen Sie bitte ein Issue im Repository.
|
|
|