cpd/README.md

# Habit Tracker-App

Bietet einen einfachen und effektiven Weg, um Gewohnheiten zu verfolgen
und den Fortschritt zu messen.

<img src="img_readme/view_no_habits.png" width="400">
<img src="img_readme/simulator_screenshot.png" width="200">

## Features
- Hinzufügen/Löschen/Bearbeiten von Gewohnheiten: Neue Gewohnheiten erstellen, bestehende bearbeiten oder entfernen

- Speicherung in MySQL-Datenbank: Alle Daten werden in einer MySQL-Datenbank gespeichert, um die Persistenz zu gewährleisten.

- Zählfunktion: Die App zählt die Gesamtzahl der erstellten Gewohnheiten und zeigt diese an

- Progressanzeige: Zeigt an, wie viele Gewohnheiten abgeschlossen wurden

- Icon-Auswahl: Zu jeder Gewohnheit kann ein Icon ausgewählt werden

## Nutzung

Drückt man auf Plus, öffnet sich ein Popup, in dem man einen Titel, Untertitel und ein Icon eingeben kann. Bei Titel und Untertitel ist die Eingabe erforderlich, bei Icon wird ein Herz als Standardwert gesetzt.

<div style="text-align: center">
<img src="img_readme/addhabit_popup.png" width="400">
</div>
<br><br>

Beim Drücken auf "select icon" öffnet sich eine Iconpage mit einer kleinen Auswahl an Icons.

<div style="text-align: center">
<img src="img_readme/iconpage.png" width="400">
</div>
<br><br>

Die Liste an Gewohnheiten ist scrollbar. Diese lassen sich als erledigt markieren und bleiben weiterhin sichtbar. Die Progressanzeige berechnet den Fortschritt bzw. wie viele Gewohnheiten als erledigt markiert wurden. Außerdem wird die Gesamtanzahl an Gewohnheiten angezeigt.

<div style="text-align: center">
<img src="img_readme/view_habits_checked.png" width="400">
</div>
<br><br>

Zum Löschen nach links, zum Bearbeiten nach rechts swipen.

<div style="text-align: center">
<img src="img_readme/delete_swipeLeft.png" width="400" style = "margin-right: 20px;">
<img src="img_readme/edit_swipeRight.png" width="400" style = "margin-left: 20px;">
</div>
<br><br>

Zum Bearbeiten einer Gewohnheit öffnet sich ein Bearbeitungsfenster, in dem man den Titel, Untertitel und das Icon ändern kann.

<div style="text-align: center">
<img src="img_readme/edit_popup.png" width="400">
</div>


## Plattformen
Die App soll auf macOS uns IOS laufen. Sie wurde auf diesen Plattformen getestet.


## Build- und Testanweisungen

### Build
* Macos
```
flutter build macos --no-tree-shake-icons
```

* IOS
```
flutter build ios --no-tree-shake-icons
```

### Run

* Macos
```
flutter run -d macos
```

* IOS
```
flutter run -d <device>
```

### Testen
```
flutter test
```