diff --git a/src/main/java/de/deadlocker8/budgetmaster/services/HelpersService.java b/src/main/java/de/deadlocker8/budgetmaster/services/HelpersService.java
index 9f0ec74b422e38172e74123b379183db65800e48..77dc12055ee344c81e5df12fee09c0c6adf93590 100644
--- a/src/main/java/de/deadlocker8/budgetmaster/services/HelpersService.java
+++ b/src/main/java/de/deadlocker8/budgetmaster/services/HelpersService.java
@@ -4,6 +4,7 @@ import de.deadlocker8.budgetmaster.database.accountmatches.AccountMatch;
import de.deadlocker8.budgetmaster.entities.*;
import de.deadlocker8.budgetmaster.repeating.modifier.RepeatingModifierType;
import de.deadlocker8.budgetmaster.repositories.AccountRepository;
+import de.deadlocker8.budgetmaster.repositories.CategoryRepository;
import de.deadlocker8.budgetmaster.repositories.SettingsRepository;
import de.deadlocker8.budgetmaster.repositories.TagRepository;
import de.deadlocker8.budgetmaster.utils.Colors;
@@ -44,6 +45,9 @@ public class HelpersService
@Autowired
private TransactionService transactionService;
+ @Autowired
+ private CategoryRepository categoryRepository;
+
public String getCurrencyString(int amount)
{
return getCurrencyString(amount / 100.0);
@@ -271,4 +275,9 @@ public class HelpersService
return accountMatches;
}
+
+ public int getIDOfNoCatgeory()
+ {
+ return categoryRepository.findByType(CategoryType.NONE).getID();
+ }
}
\ No newline at end of file
diff --git a/src/main/resources/static/css/categories.css b/src/main/resources/static/css/categories.css
index 5fabd14463c8071f9648b30c0879765e53aad811..e713bd53f4612a854dea4b23cf63f300d27d4329 100644
--- a/src/main/resources/static/css/categories.css
+++ b/src/main/resources/static/css/categories.css
@@ -9,6 +9,22 @@
font-size: 20px;
}
+.category-circle-small {
+ width: 34px;
+ height: 34px;
+ text-align: center;
+ font-weight: bold;
+ border-radius: 50%;
+ line-height: 34px !important;
+ font-size: 17px !important;
+ vertical-align: middle;
+ margin: 14px 16px;
+}
+
+.category-select {
+ display: inline-block !important;
+}
+
.category-color {
height: 35px;
width: 90%;
diff --git a/src/main/resources/static/css/dark/categories.css b/src/main/resources/static/css/dark/categories.css
index 5fabd14463c8071f9648b30c0879765e53aad811..e713bd53f4612a854dea4b23cf63f300d27d4329 100644
--- a/src/main/resources/static/css/dark/categories.css
+++ b/src/main/resources/static/css/dark/categories.css
@@ -9,6 +9,22 @@
font-size: 20px;
}
+.category-circle-small {
+ width: 34px;
+ height: 34px;
+ text-align: center;
+ font-weight: bold;
+ border-radius: 50%;
+ line-height: 34px !important;
+ font-size: 17px !important;
+ vertical-align: middle;
+ margin: 14px 16px;
+}
+
+.category-select {
+ display: inline-block !important;
+}
+
.category-color {
height: 35px;
width: 90%;
diff --git a/src/main/resources/static/js/transactions.js b/src/main/resources/static/js/transactions.js
index d4c95e608eae989042cf5a28d866917faa6db50a..5d1470ff0bf1cc0831adb074673afc9a662cd738 100644
--- a/src/main/resources/static/js/transactions.js
+++ b/src/main/resources/static/js/transactions.js
@@ -154,6 +154,8 @@ $( document ).ready(function() {
return false;
}
});
+
+ beautifyCategorySelect();
});
var transactionRepeatingModifierID = "#transaction-repeating-modifier";
@@ -283,4 +285,41 @@ function validateForm()
}
return true;
+}
+
+function beautifyCategorySelect() {
+ var counter = 0;
+
+ $("#categoryWrapper ul.dropdown-content.select-dropdown li span").each(function () {
+ var categoryInfos = $(this).text().split("@@@");
+ var categoryName = categoryInfos[0];
+ var firstLetter = capitalizeFirstLetter(categoryName);
+ var categoryColor = categoryInfos[1];
+ var appropriateTextColor = categoryInfos[2];
+
+ $(this).text(categoryName);
+ $(this).data("infos", categoryInfos);
+ $(this).addClass("category-select");
+ $(this).parent().prepend('<div class="category-circle-small category-select" id="category-' + counter + '" style="background-color: ' + categoryColor + '"><span style="color: ' + appropriateTextColor + '"></span></div>');
+ $('#categoryWrapper').parent().append('<style>#category-' + counter + ':after{content: "' + firstLetter + '";}</style>');
+
+ counter++;
+ });
+
+ // select current category from code again in order to avoid showing the full infos text (e.g. Test@@@#FFFFFF@#000000@@@1) in the input field by materialize
+ if(typeof selectedCategory !== 'undefined')
+ {
+ $("#categoryWrapper ul.dropdown-content.select-dropdown li span.category-select").each(function () {
+ var categoryID = $(this).data("infos")[3];
+ if(categoryID === selectedCategory)
+ {
+ $(this).parent().trigger("click");
+ }
+ });
+ }
+}
+
+function capitalizeFirstLetter(text)
+{
+ return text.charAt(0).toUpperCase();
}
\ No newline at end of file
diff --git a/src/main/resources/templates/transactions/newTransaction.ftl b/src/main/resources/templates/transactions/newTransaction.ftl
index b32c134b7127ae5a07816bf307795c0a4a4ffeae..547181d0d8f42e58332b8c6ae30efd9a3a19b91c 100644
--- a/src/main/resources/templates/transactions/newTransaction.ftl
+++ b/src/main/resources/templates/transactions/newTransaction.ftl
@@ -4,6 +4,7 @@
<@header.header "BudgetMaster"/>
<@header.style "transactions"/>
<@header.style "datepicker"/>
+ <@header.style "categories"/>
</head>
<body class="budgetmaster-blue-light">
<#import "../navbar.ftl" as navbar>
@@ -62,21 +63,21 @@
<#-- category -->
<div class="row">
- <div class="input-field col s12 m12 l8 offset-l2">
+ <div class="input-field col s12 m12 l8 offset-l2" id="categoryWrapper">
<select id="transaction-category" name="category" <@validation.validation "category"/>>
<#list categories as category>
- <#assign categoryName=categoriesFunctions.getCategoryName(category)>
+ <#assign categoryInfos=categoriesFunctions.getCategoryName(category) + "@@@" + category.getColor() + "@@@" + category.getAppropriateTextColor() + "@@@" + category.getID()>
<#if transaction.getCategory()??>
<#if transaction.getCategory().getID() == category.getID()>
- <option selected value="${category.getID()}">${categoryName}</option>
+ <option selected value="${category.getID()}">${categoryInfos}</option>
<#elseif category.getType() != "REST">
- <option value="${category.getID()}">${categoryName}</option>
+ <option value="${category.getID()}">${categoryInfos}</option>
</#if>
<#elseif category.getType() == "NONE">
- <option selected value="${category.getID()}">${categoryName}</option>
+ <option selected value="${category.getID()}">${categoryInfos}</option>
<#elseif category.getType() != "REST">
- <option value="${category.getID()}">${categoryName}</option>
+ <option value="${category.getID()}">${categoryInfos}</option>
</#if>
</#list>
</select>
@@ -305,6 +306,15 @@
}
</script>
+ <#-- pass selected account to JS in order to select current value for materialize select -->
+ <script>
+ <#if transaction.getCategory()??>
+ selectedCategory = "${transaction.getCategory().getID()}";
+ <#else>
+ selectedCategory = "${helpers.getIDOfNoCatgeory()}";
+ </#if>
+ </script>
+
<!-- Scripts-->
<#import "../scripts.ftl" as scripts>
<@scripts.scripts/>