#419 - select image in account settings

src/main/java/de/deadlocker8/budgetmaster/accounts/AccountController.java

@@ -17,6 +17,7 @@ import org.springframework.web.bind.annotation.*;
 import org.springframework.web.context.request.WebRequest;
 
 import javax.servlet.http.HttpServletRequest;
+import java.util.List;
 import java.util.Optional;
 
 
@@ -128,6 +129,7 @@ public class AccountController extends BaseController
 		Account emptyAccount = new Account();
 		model.addAttribute("account", emptyAccount);
 		model.addAttribute("settings", settingsService.getSettings());
+		model.addAttribute("iconImages", List.of("https://localhost:9000/touch_icon.png", "https://localhost:9000/touch_icon.png"));
 		return "accounts/newAccount";
 	}
 
@@ -142,6 +144,7 @@ public class AccountController extends BaseController
 
 		model.addAttribute("account", accountOptional.get());
 		model.addAttribute("settings", settingsService.getSettings());
+		model.addAttribute("iconImages", List.of("https://localhost:9000/touch_icon.png", "https://localhost:9000/touch_icon.png"));
 		return "accounts/newAccount";
 	}
 
@@ -165,6 +168,7 @@ public class AccountController extends BaseController
 			model.addAttribute("error", bindingResult);
 			model.addAttribute("account", account);
 			model.addAttribute("settings", settingsService.getSettings());
+			model.addAttribute("iconImages", List.of("https://localhost:9000/touch_icon.png", "https://localhost:9000/touch_icon.png"));
 			return "accounts/newAccount";
 		}
 		else

src/main/resources/static/css/accounts.css

@@ -17,3 +17,25 @@
 #button-remove-account-icon i {
     font-size: 1.8rem;
 }
+
+.account-icon-option-column {
+    text-align: center;
+    margin-bottom: 1.5rem;
+}
+
+.account-icon-option {
+    padding: 0.5rem;
+    border: 2px solid transparent;
+}
+
+.account-icon-option:hover {
+    cursor: pointer;
+}
+
+.account-icon-option.selected {
+    border: 2px solid var(--color-text);
+}
+
+.account-icon-preview-icon {
+    height: 5rem;
+}

src/main/resources/static/js/accounts.js

@@ -17,8 +17,39 @@ $(document).ready(function()
 
     $('#button-remove-account-icon').click(function()
     {
-        document.querySelector(".account-icon-preview").classList.toggle('hidden', true);
+        document.getElementById("account-icon-preview-icon").classList.toggle('hidden', true);
         document.getElementById("account-icon-placeholder").classList.toggle('hidden', false);
         document.getElementById("hidden-input-account-icon").value = '';
     });
+
+    $('#button-account-icon-confirm').click(function()
+    {
+        let icon = document.querySelector('.account-icon-option.selected .account-icon-preview');
+        if(icon === null)
+        {
+            return false;
+        }
+
+        let iconPath = icon.src;
+        let iconId = icon.dataset.imageId;
+
+        let previewIcon = document.getElementById("account-icon-preview-icon");
+        previewIcon.src = iconPath;
+
+        document.getElementById("account-icon-preview-icon").classList.toggle('hidden', false);
+        document.getElementById("account-icon-placeholder").classList.toggle('hidden', true);
+        document.getElementById("hidden-input-account-icon").value = iconId;
+    });
+
+    // select an icon option
+    $('.account-icon-option').click(function()
+    {
+        let allIconOptions = document.querySelectorAll('.account-icon-option');
+        for(let i = 0; i < allIconOptions.length; i++)
+        {
+            allIconOptions[i].classList.remove('selected');
+        }
+
+        this.classList.add('selected');
+    });
 });
\ No newline at end of file

src/main/resources/templates/accounts/accountFunctions.ftl

+<#import "../helpers/header.ftl" as header>
+
+<#macro modalAccountIconSelect>
+    <div id="modalAccountIconSelect" class="modal modal-fixed-footer background-color">
+        <div class="modal-content">
+            <div class="row">
+                <#list iconImages as image>
+                    <@accountIconOption image/>
+                </#list>
+            </div>
+        </div>
+        <div class="modal-footer background-color">
+            <@header.buttonLink url='' icon='save' localizationKey='cancel' color='red' classes='modal-action modal-close text-white' noUrl=true/>
+            <@header.buttonLink url='' icon='done' id='button-account-icon-confirm' localizationKey='ok' color='green' classes='modal-action modal-close text-white' noUrl=true/>
+        </div>
+    </div>
+</#macro>
+
+<#macro accountIconOption icon>
+    <div class="col s4 m2 l2 account-icon-option-column">
+        <div class="account-icon-option">
+            <img src="${icon}" class="account-icon-preview" alt="${icon}" data-image-id="1"/>
+        </div>
+    </div>
+</#macro>
\ No newline at end of file

src/main/resources/templates/accounts/newAccount.ftl

@@ -17,6 +17,8 @@
         <#import "../helpers/navbar.ftl" as navbar>
         <@navbar.navbar "accounts" settings/>
 
+        <#import "accountFunctions.ftl" as accountFunctions>
+
         <main>
             <div class="card main-card background-color">
                 <div class="container">
@@ -52,7 +54,7 @@
 
                                 <div id="account-icon" class="valign-wrapper">
                                     <a href="#modalAccountIconSelect" id="account-icon-preview" class="modal-trigger">
-                                        <img src="<#if account.getIconPath()?has_content>${account.getIconPath()}</#if>" class="account-icon-preview <#if account.getIconPath()?has_content == false>hidden</#if>"/>
+                                        <img id="account-icon-preview-icon" src="<#if account.getIconPath()?has_content>${account.getIconPath()}</#if>" class="account-icon-preview <#if account.getIconPath()?has_content == false>hidden</#if>"/>
                                         <div id="account-icon-placeholder" class="<#if account.getIconPath()?has_content>hidden</#if>">${locale.getString("account.new.icon.placeholder")}</div>
                                     </a>
                                     <@header.buttonFlat url='' icon='delete' id='button-remove-account-icon' localizationKey='' classes="no-padding text-default" noUrl=true/>
@@ -61,6 +63,8 @@
                             </div>
                         </div>
 
+                        <@accountFunctions.modalAccountIconSelect/>
+
                         <br>
 
                         <#-- buttons -->