# ToDo-App – Vue 3 + Vite

Unterrichtsbeispiel für **Web Development** an der FHGR.  
Eine einfache ToDo-Anwendung mit Vue 3, Vite und einer REST-API.

## Projektstruktur

```
WebDev-VueJS-ToDo-Example/
├── index.html          # HTML-Einstiegspunkt (enthält <div id="app">)
├── vite.config.js      # Vite-Konfiguration (aktiviert Vue-Plugin)
├── package.json        # Abhängigkeiten und npm-Skripte
└── src/
    ├── main.js         # Vue-App erstellen und mounten
    ├── api.js          # API-Schicht: alle HTTP-Aufrufe (fetch)
    └── App.vue         # Haupt-Komponente: State, Logik und Template
```

## Verwendete Technologien

| Technologie | Zweck |
|---|---|
| **Vue 3** | Reaktives UI-Framework |
| **Vite** | Build-Tool und Dev-Server |
| **Fetch API** | HTTP-Anfragen (nativ im Browser, kein axios nötig) |
| **CSS Custom Properties** | Design ohne externe Libraries |

## Starten

```bash
npm install     # Abhängigkeiten installieren
npm run dev     # Entwicklungsserver starten (http://localhost:5173)
npm run build   # Produktionsbuild erstellen (→ dist/)
npm run preview # Produktionsbuild lokal testen
```

## Lernziele / Vue-Konzepte

### Reaktivität
- `ref()` – reaktiver Einzelwert
- `computed()` – abgeleiteter, gecachter Wert
- `watch()` – Reaktion auf Änderungen einer Variable

### Template-Syntax
- `{{ }}` – Textinterpolation
- `v-if` / `v-else` – bedingtes Rendern
- `v-for` + `:key` – Listen rendern
- `v-model` – Zwei-Wege-Datenbindung (Input ↔ Variable)
- `:class` – dynamische CSS-Klassen
- `@click`, `@submit.prevent` – Event-Handler

### Lifecycle
- `onMounted()` – Code nach dem ersten Rendern ausführen
- `onUnmounted()` – Aufräumen (z.B. `setInterval` stoppen)

### Architektur
- Trennung von **API-Schicht** (`api.js`) und **UI-Logik** (`App.vue`)
- Alle HTTP-Methoden: `GET`, `POST`, `PATCH`, `DELETE`
- Auto-Synchronisation im 5-Sekunden-Takt mit Datenvergleich

## Auto-Synchronisation (5 Sekunden)

Die App lädt alle 5 Sekunden die aktuell sichtbaren ToDos neu und vergleicht sie
mit der bereits gerenderten Liste.

Verglichen werden pro ToDo:
- `id` (neu/gelöscht)
- `title`, `completed`, `userId` (geändert)

Wenn Unterschiede erkannt werden, wird die Liste ersetzt und Vue aktualisiert
das DOM automatisch.

Wenn keine Unterschiede erkannt werden, bleibt der DOM unverändert.

Im UI zeigt eine Statuszeile den letzten Synchronisationszeitpunkt und das
Ergebnis des Vergleichs (neu/geändert/gelöscht oder keine Änderung).

## API

Basis-URL: `https://webdev.iten-web.ch/10003/api/`

Die API verwendet REST-Pfad-Routing (Best Practice):

```
GET  /10003/api/todos           → alle ToDos
GET  /10003/api/todos/1         → einzelnes ToDo
POST /10003/api/todos           → neues ToDo erstellen
PATCH /10003/api/todos/1        → Status aktualisieren
DELETE /10003/api/todos/1       → ToDo löschen
```

Verfügbare Filter-Parameter:
- `page`, `limit` – Pagination
- `search` – Suche im Titel
- `completed` – Filter: `true` / `false`
- `sortBy` – Sortierfeld: `id`, `title`, `completed`
- `sortDir` – Richtung: `ASC`, `DESC`