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
108 lines
2.0 KiB
Markdown
108 lines
2.0 KiB
Markdown
# TimeClock Frontend v3.0
|
|
|
|
Vue 3 Frontend für die TimeClock Zeiterfassungsanwendung.
|
|
|
|
## Installation
|
|
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
## Entwicklung
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
Öffnen Sie `http://localhost:5010` in Ihrem Browser.
|
|
|
|
## Build
|
|
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
Die Build-Dateien werden im `dist/` Ordner erstellt.
|
|
|
|
## Preview (nach Build)
|
|
|
|
```bash
|
|
npm run preview
|
|
```
|
|
|
|
## Technologien
|
|
|
|
- **Vue 3** - Progressive JavaScript Framework
|
|
- **Vue Router** - Offizielle Router-Bibliothek
|
|
- **Pinia** - State Management
|
|
- **Vite** - Next Generation Frontend Tooling
|
|
|
|
## Projektstruktur
|
|
|
|
```
|
|
src/
|
|
├── assets/ # CSS und statische Assets
|
|
├── components/ # Wiederverwendbare Komponenten
|
|
├── router/ # Vue Router Konfiguration
|
|
├── stores/ # Pinia Stores
|
|
├── views/ # Seiten-Komponenten
|
|
│ ├── Dashboard.vue
|
|
│ ├── Entries.vue
|
|
│ └── Stats.vue
|
|
├── App.vue # Root-Komponente
|
|
└── main.js # Entry Point
|
|
```
|
|
|
|
## Features
|
|
|
|
### Dashboard
|
|
- Timer starten/stoppen
|
|
- Echtzeit-Anzeige der laufenden Zeit
|
|
- Projekt und Beschreibung eingeben
|
|
- Letzte 5 Einträge anzeigen
|
|
|
|
### Einträge
|
|
- Tabellarische Übersicht aller Einträge
|
|
- Status-Anzeige (laufend/beendet)
|
|
- Einträge löschen
|
|
|
|
### Statistiken
|
|
- Gesamtstatistiken
|
|
- Projekt-basierte Auswertungen
|
|
- Visualisierung der Arbeitszeit
|
|
|
|
## State Management
|
|
|
|
Die Anwendung verwendet Pinia für zentrales State Management:
|
|
|
|
```javascript
|
|
// stores/timeStore.js
|
|
const timeStore = useTimeStore()
|
|
|
|
// Verfügbare Actions
|
|
timeStore.fetchEntries()
|
|
timeStore.startTimer({ project, description })
|
|
timeStore.stopTimer()
|
|
timeStore.deleteEntry(id)
|
|
timeStore.fetchStats()
|
|
```
|
|
|
|
## API-Konfiguration
|
|
|
|
Die API-URL ist in `src/stores/timeStore.js` konfiguriert:
|
|
|
|
```javascript
|
|
const API_URL = 'http://localhost:3010/api'
|
|
```
|
|
|
|
Für Produktion sollte dies in eine Environment-Variable verschoben werden.
|
|
|
|
## Styling
|
|
|
|
Die Anwendung verwendet:
|
|
- Custom CSS mit CSS Variables
|
|
- Moderne Gradients
|
|
- Responsive Design
|
|
- Card-basiertes Layout
|
|
|