Eine moderne Progressive Web App (PWA) zur Verwaltung und Durchführung von Leerstandsspülungen in Gebäuden. Die App bietet vollständige Offline-Funktionalität und automatische Datensynchronisation.

• Über das Projekt
• Features
• Technologien
• Voraussetzungen
• Installation
• Entwicklung
• Build & Deployment
• Projektstruktur
• API-Integration
• Offline-Modus
• PWA-Features
• Konfiguration
• Lizenz

Die TWS-App (Trinkwasser-Spülungs-App) ist ein webbasiertes System zur Verwaltung von Leerstandsspülungen in Wohngebäuden. Sie ermöglicht es Hausverwaltern und Technikern, Spülpläne zu erstellen, durchzuführen und zu dokumentieren - auch ohne aktive Internetverbindung.

• ✅ Compliance: Sicherstellung der Einhaltung von Trinkwasserhygiene-Vorschriften
• ✅ Effizienz: Optimierte Workflows für Spülvorgänge
• ✅ Flexibilität: Vollständige Offline-Funktionalität
• ✅ Transparenz: Lückenlose Dokumentation aller Spülvorgänge

• 🏢 Gebäudeverwaltung: Verwaltung mehrerer Gebäude und Apartments
• 🚰 Spülmanagement: Planung, Durchführung und Dokumentation von Leerstandsspülungen
• 📊 Dashboard: Übersichtliche Darstellung von anstehenden und durchgeführten Spülungen
• 📈 Statistiken: Auswertung von Spüldaten und Compliance-Reports
• 👥 Benutzerverwaltung: Rollen- und Rechte-System (Admin, Techniker)

• 📱 Installierbar: Funktioniert wie eine native App auf allen Geräten
• 🔌 Offline-Fähig: Vollständige Funktionalität ohne Internetverbindung
• 🔄 Auto-Sync: Automatische Synchronisation bei Wiederherstellung der Verbindung
• ⚡ Performance: Service Worker für schnelle Ladezeiten

• 🌓 Dark/Light Mode: Automatische und manuelle Umschaltung
• 📱 Responsive Design: Optimiert für Desktop, Tablet und Mobile
• ♿ Barrierefrei: WCAG-konformes Design
• 🌐 Mehrsprachig: Vorbereitet für Internationalisierung

• Framework: Vue 3.5+ mit Composition API
• Build Tool: Vite 7.1+
• UI Library: CoreUI for Vue 5.5+
• State Management: Pinia 3.0+
• Routing: Vue Router 4.5+
• HTTP Client: Axios 1.12+
• Icons: CoreUI Icons 3.0+
• Charts: Chart.js 4.5+ mit vue-chartjs

• Linting: ESLint 9.32+ mit Vue-Plugin
• CSS-Präprozessor: Sass 1.90+
• Build: PostCSS mit Autoprefixer
• PWA: vite-plugin-pwa 1.1+

• Node.js: Version 18.x oder höher
• npm: Version 9.x oder höher (alternativ yarn/pnpm)
• Git: Für Versionskontrolle

git clone https://github.com/hammermaps/TWS-App.git
cd TWS-App

npm install

Erstelle eine .env.local Datei im Projektverzeichnis:

VITE_API_BASE_URL=http://localhost:4040
VITE_APP_TITLE=TWS-App

npm run dev

Die App ist dann unter http://localhost:3000 erreichbar.

Code-Qualität prüfen:

npm run lint

npm run preview

npm run build

Die Build-Artefakte werden im dist/ Verzeichnis erstellt.

• Code-Splitting für optimale Ladezeiten
• Tree-Shaking für minimale Bundle-Größe
• Asset-Optimierung (Bilder, Fonts)
• Service Worker für Offline-Caching

TWS-App/
├── public/                 # Statische Assets
│   ├── favicon.ico
│   └── manifest.json      # PWA Manifest
├── src/
│   ├── api/               # API-Client-Module
│   │   ├── ApiApartment.js
│   │   ├── ApiBuilding.js
│   │   ├── ApiHealth.js
│   │   ├── ApiRecords.js
│   │   └── ApiUser.js
│   ├── assets/            # Bilder, Icons, Fonts
│   │   ├── brand/         # Logo und Branding
│   │   └── icons/         # Icon-Sets
│   ├── components/        # Wiederverwendbare Komponenten
│   │   ├── AppHeader.vue
│   │   ├── AppSidebar.vue
│   │   ├── LogoPreview.vue
│   │   └── OfflineModeBanner.vue
│   ├── composables/       # Vue Composables
│   │   └── useFeatureAccess.js
│   ├── layouts/           # Layout-Komponenten
│   │   └── DefaultLayout.vue
│   ├── router/            # Vue Router Konfiguration
│   │   └── index.js
│   ├── services/          # Business Logic Services
│   │   └── OfflineDataPreloader.js
│   ├── stores/            # Pinia Stores
│   │   ├── ApartmentStorage.js
│   │   ├── BuildingStorage.js
│   │   ├── GlobalToken.js
│   │   ├── GlobalUser.js
│   │   ├── OnlineStatus.js
│   │   └── TokenManager.js
│   ├── styles/            # SCSS-Dateien
│   │   ├── components/
│   │   └── views/
│   ├── utils/             # Hilfsfunktionen
│   │   └── CorsDebugger.js
│   ├── views/             # Seiten-Komponenten
│   │   ├── apartments/    # Apartment-Verwaltung
│   │   ├── buildings/     # Gebäude-Verwaltung
│   │   ├── dashboard/     # Dashboard
│   │   └── pages/         # Authentifizierung
│   ├── App.vue            # Root-Komponente
│   └── main.js            # App-Einstiegspunkt
├── backend-info/          # API-Dokumentation
├── index.html             # HTML-Template
├── vite.config.mjs        # Vite-Konfiguration
├── eslint.config.mjs      # ESLint-Konfiguration
├── package.json           # Projekt-Abhängigkeiten
└── README.md              # Projekt-Dokumentation

Die App kommuniziert mit einer RESTful PHP-Backend-API:

• Base URL (Dev): /api (Proxy via Vite)
• Base URL (Prod): https://wls.dk-automation.de

• POST /user/login - Benutzer-Login
• POST /user/logout - Benutzer-Logout
• GET /user/check-token - Token validieren

• GET /buildings/list - Gebäudeliste abrufen
• POST /buildings/add - Gebäude hinzufügen
• PUT /buildings/edit/{id} - Gebäude bearbeiten
• DELETE /buildings/delete/{id} - Gebäude löschen

• GET /apartments/list - Apartment-Liste abrufen
• POST /apartments/add - Apartment hinzufügen
• PUT /apartments/edit/{id} - Apartment bearbeiten
• DELETE /apartments/delete/{id} - Apartment löschen

• GET /records/list - Spül-Protokolle abrufen
• POST /records/add - Spül-Protokoll erstellen
• GET /records/history/{apartmentId} - Spül-Historie eines Apartments

• GET /health/ping - Server-Verfügbarkeit prüfen

Jeder API-Bereich hat eine dedizierte Client-Klasse:

import ApiApartment from '@/api/ApiApartment.js'

const apartmentApi = new ApiApartment()
const apartments = await apartmentApi.list()

Die App überwacht kontinuierlich die Verbindung:

1. Browser-Status: Prüft navigator.onLine
2. Server-Erreichbarkeit: Ping alle 30 Sekunden
3. Automatische Umschaltung: Nach 3 fehlgeschlagenen Pings

• ✅ Leerstandsspülungen durchführen
• ✅ Spül-Protokolle erstellen
• ✅ Gebäude und Apartments anzeigen
• ✅ Spül-Historie einsehen

• ⚠️ Statistiken (cached Daten)
• ⚠️ Benutzerverwaltung (nur Anzeige)

• ❌ Passwort ändern
• ❌ Neue Gebäude/Apartments erstellen
• ❌ Daten-Synchronisation mit Server

// Automatische Synchronisation bei Wiederverbindung
import { useOfflineFlushSyncService } from '@/stores/OfflineFlushSyncService.js'

const syncService = useOfflineFlushSyncService()
await syncService.syncPendingFlushes()

• Gebäude & Apartments: LocalStorage
• Pending Flushes: LocalStorage (Queue)
• User & Token: LocalStorage + SessionStorage
• Service Worker Cache: Statische Assets & API-Responses

Die App kann auf allen Geräten installiert werden:

• Android: "Zum Startbildschirm hinzufügen"
• iOS: "Zum Home-Bildschirm" (Safari)
• Desktop: Installation über Browser-Menü

Der Service Worker cached:

• Statische Assets (HTML, CSS, JS, Icons)
• API-Responses (NetworkFirst-Strategie)
• Fonts und Bilder

{
  "name": "TWS Leerstandsspülungs-App",
  "short_name": "TWS App",
  "theme_color": "#321fdb",
  "background_color": "#ffffff",
  "display": "standalone",
  "scope": "/",
  "start_url": "/"
}

Die vite.config.mjs enthält:

• Proxy-Setup für API-Anfragen
• PWA-Plugin-Konfiguration
• Build-Optimierungen
• Path-Aliases (@, ~)

# Development
VITE_API_BASE_URL=/api

# Production
VITE_API_BASE_URL=https://wls.dk-automation.de

// eslint.config.mjs
export default [
  { ignores: ['dist/', 'dev-dist/'] },
  ...eslintPluginVue.configs['flat/essential'],
  {
    rules: {
      'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
      'vue/multi-word-component-names': 'off',
    }
  }
]

• Token-basierte Authentifizierung (JWT)
• Automatische Token-Validierung alle 5 Minuten
• Sichere Speicherung in LocalStorage
• CSRF-Schutz via Cookies

• ✅ HTTPS in Production
• ✅ CORS-Konfiguration
• ✅ XSS-Prävention
• ✅ Input-Validierung
• ✅ Sichere API-Kommunikation

Derzeit keine automatisierten Tests implementiert.

Geplant:

• Unit Tests (Vitest)
• Component Tests (Vue Test Utils)
• E2E Tests (Playwright/Cypress)

Dieses Projekt steht unter der MIT-Lizenz. Siehe LICENSE für Details.

Copyright © 2025 creativeLabs Łukasz Holeczek

• Projektentwicklung: hammermaps
• UI/UX Design: CoreUI Team
• Backend-API: DK Automation

Bei Fragen oder Problemen:

• 📧 E-Mail: [email protected]
• 🐛 Issues: GitHub Issues

• Push-Benachrichtigungen für fällige Spülungen
• QR-Code-Scanner für Apartment-Identifikation
• Export von Reports (PDF, Excel)
• Erweiterte Statistiken und Analysen
• Multi-Tenant-Unterstützung
• Automatisierte Tests
• Mehrsprachigkeit (i18n)

• PWA Dokumentation
• Offline-Modus Guide
• Logo Design Guide
• API Controller Docs

Entwickelt mit ❤️ für bessere Trinkwasserhygiene