Files

Torsten Schulz (local) e95bb4cb76 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

2025-10-17 14:11:28 +02:00

2.0 KiB

Raw Blame History

TimeClock Frontend v3.0

Vue 3 Frontend für die TimeClock Zeiterfassungsanwendung.

Installation

npm install

Entwicklung

npm run dev

Öffnen Sie http://localhost:5010 in Ihrem Browser.

Build

npm run build

Die Build-Dateien werden im dist/ Ordner erstellt.

Preview (nach Build)

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:

// 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:

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

2.0 KiB Raw Blame History