From 3b4bda41bd94e16659f3946d0dff7cf95a864ff7 Mon Sep 17 00:00:00 2001 From: Robert Goldmann <deadlocker@gmx.de> Date: Sat, 17 Nov 2018 15:34:29 +0100 Subject: [PATCH] Fixed #336 - Show category colored circles in new transaction select --- .../budgetmaster/services/HelpersService.java | 9 +++++ src/main/resources/static/css/categories.css | 16 ++++++++ .../resources/static/css/dark/categories.css | 16 ++++++++ src/main/resources/static/js/transactions.js | 39 +++++++++++++++++++ .../templates/transactions/newTransaction.ftl | 22 ++++++++--- 5 files changed, 96 insertions(+), 6 deletions(-) diff --git a/src/main/java/de/deadlocker8/budgetmaster/services/HelpersService.java b/src/main/java/de/deadlocker8/budgetmaster/services/HelpersService.java index 9f0ec74b4..77dc12055 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 5fabd1446..e713bd53f 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 5fabd1446..e713bd53f 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 d4c95e608..5d1470ff0 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 b32c134b7..547181d0d 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/> -- GitLab