From a9be947283506ba4861e8c4aa17751a890909d3b Mon Sep 17 00:00:00 2001
From: Tilman <tliero@gmx.net>
Date: Sun, 10 Nov 2019 07:03:32 +0100
Subject: [PATCH] Colors for budget thresholds

---
 README.md                                           |  6 +-----
 src/main/resources/static/app/transaction-list.html |  8 ++++++--
 src/main/resources/static/css/app.css               | 12 ++++++++++++
 3 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index c66b633..eaa84a8 100644
--- a/README.md
+++ b/README.md
@@ -23,21 +23,17 @@ Danach ist die Datenbank unter http://localhost:8084/console/ erreichbar
 
 
 # TODO
+- Gesamtausgaben beim Tipp auf Budgetzahlen
 - Server: logs konfigurieren
 - Transaktionen mit Passwort-Management ausstatten, Usermanagement korrekt aufsetzen und Rollen durchreichen (derzeit noch inMemoryAuthentication)
   - http://kielczewski.eu/2014/12/spring-boot-security-application/
   - http://spr.com/part-5-integrating-spring-security-with-spring-boot-web/
-- Metadaten für Icon einbauen (warum funktioniert das nicht?!?)
 
 
 
-- Export als CSV
-- Import von comdirect mit Mustererkennung und Muster-Editor
-
 - Admin-Bereich
   - Auslagen zurücksetzen
   - (beliebig lange) Liste von Transaktionen anzeigen
   - CSV-Export
 - TODO-Marker abarbeiten
-- Verschlüsselung aktivieren
 - Absicherung: DELETE darf von Usern nur auf die letzte Transaktion angewendet werden
diff --git a/src/main/resources/static/app/transaction-list.html b/src/main/resources/static/app/transaction-list.html
index bf1a955..3dde957 100644
--- a/src/main/resources/static/app/transaction-list.html
+++ b/src/main/resources/static/app/transaction-list.html
@@ -2,9 +2,13 @@
 	<div class="row">
 	
 		<div class="budgetArea">
-			Monat: <span class="budgetCalculation"><span ng-bind="transaction.category.spentMtl"></span> / <span ng-bind="transaction.category.budgetMtl"></span> € (<span ng-bind="transaction.category.percentageMtl"></span>%)</span>
+			Monat: <span class="budgetCalculation" ng-class="{'budgetCritical': transaction.category.percentageMtl > 80, 'budgetOverdraft': transaction.category.percentageMtl > 100}"><span ng-bind="transaction.category.spentMtl"></span>&nbsp;/&nbsp;
+			<span ng-bind="transaction.category.budgetMtl"></span>&nbsp;€&nbsp;&nbsp;
+			<span class="budgetPercentage"><span ng-bind="transaction.category.percentageMtl"></span>%</span></span>
 			<br/>
-			Jahr: <span class="budgetCalculation"><span ng-bind="transaction.category.spentYrl"></span> / <span ng-bind="transaction.category.budget"></span> € (<span ng-bind="transaction.category.percentageYrl"></span>%)</span>
+			Jahr: <span class="budgetCalculation" ng-class="{'budgetCritical': transaction.category.percentageYrl > 80, 'budgetOverdraft': transaction.category.percentageYrl > 100}"><span ng-bind="transaction.category.spentYrl"></span>&nbsp;/&nbsp;
+			<span ng-bind="transaction.category.budget"></span>&nbsp;€&nbsp;&nbsp;
+			<span class="budgetPercentage"><span ng-bind="transaction.category.percentageYrl"></span>%</span></span>
 		</div>
 	
 		<div ng-show="accounts.length > 1">
diff --git a/src/main/resources/static/css/app.css b/src/main/resources/static/css/app.css
index 639b096..2ace763 100644
--- a/src/main/resources/static/css/app.css
+++ b/src/main/resources/static/css/app.css
@@ -28,6 +28,18 @@ label {
 	color: white;
 }
 
+.budgetPercentage {
+	font-weight: bold;
+}
+
+.budgetCritical {
+	color: #f57900;
+}
+
+.budgetOverdraft {
+	color: #CC0000;
+}
+
 .modal-body label {
 	color: #aaa;
 }