From f083ab8cf0009869e2685cb30f6fe25ac2e744e9 Mon Sep 17 00:00:00 2001 From: esche Date: Mon, 19 Jun 2023 19:37:06 +0200 Subject: [PATCH] changed design of the finance tab --- Frontend-user/lib/finance.dart | 203 +++++++++++++++++++-------------- 1 file changed, 116 insertions(+), 87 deletions(-) diff --git a/Frontend-user/lib/finance.dart b/Frontend-user/lib/finance.dart index 90e2522..4f81a7c 100644 --- a/Frontend-user/lib/finance.dart +++ b/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; - Transaction(this.art, this.betrag, this.datum, this.beschreibung); + String? beschreibung; + Transaction(this.art, this.betrag, this.datum, [this.beschreibung]); } //sample data class Finance extends StatelessWidget { final List transactions = [ - Transaction(Art.monatlBeitrag, 0, now, ''), - Transaction(Art.aufladung, 2042, now, ''), - Transaction(Art.einkauf, -2442, now.subtract(const Duration(days: 2)), ''), + Transaction(Art.monatlBeitrag, 0, now), + Transaction(Art.aufladung, 2042, now), + 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.aufladung, 2042, now, ''), - Transaction(Art.einkauf, -2442, now.subtract(const Duration(days: 2)), ''), + Transaction(Art.monatlBeitrag, 0, now), + Transaction(Art.aufladung, 2042, now), + 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.aufladung, 2042, now, ''), - Transaction(Art.einkauf, -2442, now.subtract(const Duration(days: 2)), ''), + Transaction(Art.monatlBeitrag, 0, now), + Transaction(Art.aufladung, 2042, now), + 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.aufladung, 2042, now, ''), - Transaction(Art.einkauf, -2442, now.subtract(const Duration(days: 2)), ''), + Transaction(Art.monatlBeitrag, 0, now), + Transaction(Art.aufladung, 2042, now), + 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.aufladung, 2042, now, ''), - Transaction(Art.einkauf, -2442, now.subtract(const Duration(days: 2)), ''), + Transaction(Art.monatlBeitrag, 0, now), + Transaction(Art.aufladung, 2042, now), + Transaction(Art.einkauf, -2442, now.subtract(const Duration(days: 2))), Transaction(Art.korrektur, 2332, now.subtract(const Duration(hours: 5)), 'Korrektur des Warenkorbs') ]; @@ -60,75 +62,102 @@ class Finance extends StatelessWidget { return Scaffold( appBar: AppBar( - toolbarHeight: 75, - title: const Card( - child: Padding( - padding: EdgeInsets.all(8.0), - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Icon( - Icons.euro, - //semanticLabel: 'Text for screenreader', - ), - Column( - children: [ - Text( - 'Aktuelles Guthaben:', - style: TextStyle(fontWeight: FontWeight.bold), - ), - Text( - '-00,34€', - style: TextStyle(fontWeight: FontWeight.bold), - ) - ], - ) - ], + toolbarHeight: 75, + title: const Card( + child: ListTile( + leading: Icon( + Icons.euro, ), - ), - )), + title: Text( + 'Aktuelles Guthaben:', + ), + subtitle: Text( + '-00,34€', + )), + ), + ), body: ListView.builder( - itemCount: null, - itemBuilder: (context, index) { - if (index < transactions.length) { - return Card( - clipBehavior: Clip.hardEdge, - child: InkWell( - splashColor: const Color(0xff5f7c61).withAlpha(50), - onTap: () { - showBottomSheet( - context: context, - builder: (BuildContext context) { - return 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; - } - }, - )); + itemCount: null, + itemBuilder: (context, index) { + if (index < transactions.length) { + return Card( + child: ListTile( + leading: getIcon(transactions[index].art), + title: Text(gettitle(transactions[index].art)), + subtitle: getSubtitle(index), + trailing: transactions[index].art == Art.einkauf + ? PopupMenuButton( + onSelected: (value) {}, + itemBuilder: (BuildContext context) => + >[ + const PopupMenuItem( + value: 'Option', + child: ListTile( + leading: Icon(Icons.manage_history), + title: Text('Warenkorb bearbeiten')), + ), + const PopupMenuItem( + 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 const SizedBox.expand(); + }); + } + })); + } 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); + } } }