Colors for budget thresholds

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

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">

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;
 }