changed design of the finance tab

Frontend-user/lib/finance.dart

@@ -4,10 +4,12 @@ import 'package:intl/date_symbol_data_local.dart';
 
 /*
 todo:
-  - Design, Darkmode
   - Einkauf und Settings
-  - Details zum Warenkorb und Beschreibung (https://stackoverflow.com/questions/49029841/how-to-animate-collapse-elements-in-flutter)
+  - Warenkorb
+  - Aufladungen?
   - farbliche Hervorhebungen
+  - semanticLabels, Screenreader
+  - monatliche Aufladung: ausstehende Beträge
 */
 
 enum Art { monatlBeitrag, aufladung, einkauf, korrektur }
@@ -18,36 +20,36 @@ class Transaction {
   int betrag;
   Art art;
   DateTime datum;
-  String beschreibung;
+  String? beschreibung;
-  Transaction(this.art, this.betrag, this.datum, this.beschreibung);
+  Transaction(this.art, this.betrag, this.datum, [this.beschreibung]);
 }
 
 //sample data
 class Finance extends StatelessWidget {
   final List<Transaction> transactions = [
-    Transaction(Art.monatlBeitrag, 0, now, ''),
+    Transaction(Art.monatlBeitrag, 0, now),
-    Transaction(Art.aufladung, 2042, now, ''),
+    Transaction(Art.aufladung, 2042, now),
-    Transaction(Art.einkauf, -2442, now.subtract(const Duration(days: 2)), ''),
+    Transaction(Art.einkauf, -2442, now.subtract(const Duration(days: 2))),
     Transaction(Art.korrektur, 2332, now.subtract(const Duration(hours: 5)),
         'Korrektur des Warenkorbs'),
-    Transaction(Art.monatlBeitrag, 0, now, ''),
+    Transaction(Art.monatlBeitrag, 0, now),
-    Transaction(Art.aufladung, 2042, now, ''),
+    Transaction(Art.aufladung, 2042, now),
-    Transaction(Art.einkauf, -2442, now.subtract(const Duration(days: 2)), ''),
+    Transaction(Art.einkauf, -2442, now.subtract(const Duration(days: 2))),
     Transaction(Art.korrektur, 2332, now.subtract(const Duration(hours: 5)),
         'Korrektur des Warenkorbs'),
-    Transaction(Art.monatlBeitrag, 0, now, ''),
+    Transaction(Art.monatlBeitrag, 0, now),
-    Transaction(Art.aufladung, 2042, now, ''),
+    Transaction(Art.aufladung, 2042, now),
-    Transaction(Art.einkauf, -2442, now.subtract(const Duration(days: 2)), ''),
+    Transaction(Art.einkauf, -2442, now.subtract(const Duration(days: 2))),
     Transaction(Art.korrektur, 2332, now.subtract(const Duration(hours: 5)),
         'Korrektur des Warenkorbs'),
-    Transaction(Art.monatlBeitrag, 0, now, ''),
+    Transaction(Art.monatlBeitrag, 0, now),
-    Transaction(Art.aufladung, 2042, now, ''),
+    Transaction(Art.aufladung, 2042, now),
-    Transaction(Art.einkauf, -2442, now.subtract(const Duration(days: 2)), ''),
+    Transaction(Art.einkauf, -2442, now.subtract(const Duration(days: 2))),
     Transaction(Art.korrektur, 2332, now.subtract(const Duration(hours: 5)),
         'Korrektur des Warenkorbs'),
-    Transaction(Art.monatlBeitrag, 0, now, ''),
+    Transaction(Art.monatlBeitrag, 0, now),
-    Transaction(Art.aufladung, 2042, now, ''),
+    Transaction(Art.aufladung, 2042, now),
-    Transaction(Art.einkauf, -2442, now.subtract(const Duration(days: 2)), ''),
+    Transaction(Art.einkauf, -2442, now.subtract(const Duration(days: 2))),
     Transaction(Art.korrektur, 2332, now.subtract(const Duration(hours: 5)),
         'Korrektur des Warenkorbs')
   ];
@@ -62,73 +64,100 @@ class Finance extends StatelessWidget {
         appBar: AppBar(
           toolbarHeight: 75,
           title: const Card(
-              child: Padding(
+            child: ListTile(
-                padding: EdgeInsets.all(8.0),
+                leading: Icon(
-                child: Row(
-                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                  children: [
-                    Icon(
                   Icons.euro,
-                      //semanticLabel: 'Text for screenreader',
                 ),
-                    Column(
+                title: Text(
-                      children: [
-                        Text(
                   'Aktuelles Guthaben:',
-                          style: TextStyle(fontWeight: FontWeight.bold),
                 ),
-                        Text(
+                subtitle: Text(
                   '-00,34€',
-                          style: TextStyle(fontWeight: FontWeight.bold),
-                        )
-                      ],
-                    )
-                  ],
-                ),
-              ),
                 )),
+          ),
+        ),
         body: ListView.builder(
             itemCount: null,
             itemBuilder: (context, index) {
               if (index < transactions.length) {
                 return Card(
-                clipBehavior: Clip.hardEdge,
+                    child: ListTile(
-                child: InkWell(
+                        leading: getIcon(transactions[index].art),
-                  splashColor: const Color(0xff5f7c61).withAlpha(50),
+                        title: Text(gettitle(transactions[index].art)),
+                        subtitle: getSubtitle(index),
+                        trailing: transactions[index].art == Art.einkauf
+                            ? PopupMenuButton(
+                                onSelected: (value) {},
+                                itemBuilder: (BuildContext context) =>
+                                    <PopupMenuEntry<String>>[
+                                  const PopupMenuItem<String>(
+                                    value: 'Option',
+                                    child: ListTile(
+                                        leading: Icon(Icons.manage_history),
+                                        title: Text('Warenkorb bearbeiten')),
+                                  ),
+                                  const PopupMenuItem<String>(
+                                    value: 'Option',
+                                    child: ListTile(
+                                        leading:
+                                            Icon(Icons.remove_shopping_cart),
+                                        title: Text('Einkauf stornieren')),
+                                  ),
+                                ],
+                              )
+                            : null,
                         onTap: () {
+                          if (transactions[index].art == Art.einkauf) {
                             showBottomSheet(
                                 context: context,
                                 builder: (BuildContext context) {
-                          return SizedBox.expand(
+                                  return const SizedBox.expand();
-                              child: Text(transactions[index].beschreibung));
                                 });
-                  },
+                          }
-                  child: Padding(
+                        }));
-                    padding: const EdgeInsets.all(8.0),
-                    child: Row(
-                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-                      children: [
-                        Icon(transactions[index].art == Art.korrektur
-                            ? Icons.error
-                            : Icons.money),
-                        Column(
-                          children: [
-                            Text(
-                                DateFormat("EEEE, dd. MMMM yyyy HH:mm", 'de_DE')
-                                    .format(now)),
-                            Text(
-                                '${transactions[index].art}:  ${transactions[index].betrag / 100}€')
-                          ],
-                        ),
-                      ],
-                    ),
-                  ),
-                ),
-              );
               } else {
                 return null;
               }
-          },
+            }));
-        ));
+  }
+
+  String gettitle(Art art) {
+    switch (art) {
+      case Art.aufladung:
+        return 'Aufladung';
+      case Art.einkauf:
+        return 'Einkauf';
+      case Art.korrektur:
+        return 'Korrektur';
+      case Art.monatlBeitrag:
+        return 'monatlicher Beitrag';
+    }
+  }
+
+  Text getSubtitle(int index) {
+    String text = '${transactions[index].betrag / 100}';
+    text += '€  ';
+    text += DateFormat("EEEE, dd. MMMM yyyy HH:mm", 'de_DE')
+        .format(transactions[index].datum);
+    if (transactions[index].beschreibung != null) {
+      (text += '\n${transactions[index].beschreibung}');
+    }
+
+    return Text(text);
+    //return Text(
+    //    '${DateFormat("EEEE, dd. MMMM yyyy HH:mm", 'de_DE').format(transactions[index].datum)}: ${transactions[index].betrag / 100}€\n${transactions[index].beschreibung}');
+  }
+
+  Icon getIcon(Art art) {
+    switch (art) {
+      case Art.aufladung:
+        return const Icon(Icons.savings);
+      case Art.einkauf:
+        return const Icon(Icons.shopping_basket);
+      case Art.korrektur:
+        return const Icon(Icons.priority_high);
+      case Art.monatlBeitrag:
+        return const Icon(Icons.payment);
+    }
   }
 }