Initial commit: TimeClock v3 - Node.js/Vue.js Zeiterfassung
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
This commit is contained in:
Torsten Schulz (local)
218
README.md
Normal file
218
README.md
Normal file
@@ -0,0 +1,218 @@
|
||||
# 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.
|
||||
|
||||
Reference in New Issue
Block a user