#576 - added import help text for every entity type

src/main/java/de/deadlocker8/budgetmaster/database/Database.java

@@ -90,9 +90,9 @@ public class Database
 		numberOfEntitiesByType.put(EntityType.CATEGORY, categories.size());
 		numberOfEntitiesByType.put(EntityType.ACCOUNT, accounts.size());
 		numberOfEntitiesByType.put(EntityType.TRANSACTION, transactions.size());
-		numberOfEntitiesByType.put(EntityType.CHART, charts.size());
-		numberOfEntitiesByType.put(EntityType.IMAGE, images.size());
 		numberOfEntitiesByType.put(EntityType.TEMPLATE, templates.size());
+		numberOfEntitiesByType.put(EntityType.IMAGE, images.size());
+		numberOfEntitiesByType.put(EntityType.CHART, charts.size());
 		return numberOfEntitiesByType;
 	}
 }
\ No newline at end of file

src/main/resources/languages/base_de.properties

@@ -546,3 +546,10 @@ entity.transaction=Buchungen
 entity.template=Vorlagen
 entity.chart=Diagramme
 entity.image=Bilder
+
+import.entity.category=Alle Kategorien werden nacheinander importiert.<br>Wird dabei eine Kategorie mit gleichem Namen und gleicher Farbe in der bestehenden BudgetMaster Datenbank gefunden, so werden alle Buchungen und Vorlagen, die zur Kategorie gehören in diese bestehende Kategorie verschoben.<br>Wenn keine bestehende Kategorie den gleichen Namen und die gleiche Farbe aufweist, so wird eine neue Kategorie angelegt.
+import.entity.account=Jedes zu importierende Konto wird in den weiteren Schritten des Importvorgangs einem Konto in der bestehenden Datenbank zugeordnet.<br>Die zugehörigen Buchungen und Vorlagen werden dann mit dem zugordneten Konto verknüpft.<br>Falls nicht ausreichend Konten oder kein passendes Konto existiert, können neue Konten während des Importvorgangs angelegt werden.
+import.entity.transaction=Alle Buchungen werden nacheinander importiert und dabei dem jeweils verknüpften Konto zugeordnet.<br>Wiederholende Buchungen werden am Ende des Importvorgangs automatisch bis zum aktuellen Datum aktualisiert.
+import.entity.template=Alle Vorlagen werden nacheinander importiert und dabei die verknüpften Konten neu zugeordnet.<br>Der Import von Vorlagen ist optional.
+import.entity.image=Icons werden automatisch mit den zugehörigen Konten und Vorlagen importiert.
+import.entity.chart=Es werden nur die benutzerdefinierten Diagramme importiert.<br>Der Import von Diagrammen ist optional.

src/main/resources/languages/base_en.properties

@@ -544,3 +544,10 @@ entity.transaction=Transactions
 entity.template=Templates
 entity.chart=Charts
 entity.image=Images
+
+import.entity.category=All categories will be imported one by one.<br>If a category with the same name and color already exists in the BudgetMaster database, all transactions and templates belonging to the category will be moved to this existing category.<br>If no existing category has the same name and color, a new category will be created.
+import.entity.account=Each account to be imported will be assigned to an existing account in the database during the next steps of the import process.<br>The associated transactions and templates will then be linked to the assigned account.<br>If there are not enough accounts or no matching account, new accounts can be created during the import process.
+import.entity.transaction=All transactions will be imported one by one, assigning them to the respective linked account.<br>Recurring transactions are automatically updated to the current date at the end of the import process.
+import.entity.template=All templates will be imported one by one, reassigning the linked accounts.<br>The import of templates is optional.
+import.entity.image=Icons are automatically imported with their associated accounts and templates.
+import.entity.chart=Only user-defined charts will be imported.<br>The import of charts is optional.

src/main/resources/static/js/import.js

@@ -10,6 +10,19 @@ $(document).ready(function()
             return false;
         }
     });
+
+    $('.import-entity-help-button').click(function()
+    {
+        let modalTitle = document.getElementById('modal-import-entity-help-title');
+        modalTitle.innerHTML = this.dataset.title;
+
+        let modalContent = document.getElementById('modal-import-entity-help-content');
+        modalContent.innerHTML = this.dataset.text;
+
+        let modalElement = document.getElementById('modal-import-entity-help');
+        let modalInstance = M.Modal.getInstance(modalElement);
+        modalInstance.open();
+    });
 });
 
 function validateForm()

src/main/resources/templates/settings/import.ftl

@@ -29,8 +29,11 @@
                             <table>
                                 <#list database.getNumberOfEntitiesByType() as entityType, numberOfItems>
                                     <tr>
-                                        <td class="valign-wrapper"><i class="material-icons">${entityType.getIcon()}</i><div class="import-entity-name">${locale.getString(entityType.getLocalizationKey())}</div></td>
+                                        <td><i class="material-icons left">${entityType.getIcon()}</i><div class="import-entity-name">${locale.getString(entityType.getLocalizationKey())}</div></td>
                                         <td>${numberOfItems}</td>
+                                        <td><a class="btn btn-flat text-default import-entity-help-button"
+                                               data-title="${locale.getString(entityType.getLocalizationKey())}"
+                                               data-text="${locale.getString("import.entity." + entityType.name()?lower_case)}"><i class="material-icons">help_outline</i></a></td>
                                     </tr>
                                 </#list>
                             </table>
@@ -38,6 +41,16 @@
                     </div>
                 </div>
 
+                <div id="modal-import-entity-help" class="modal background-color">
+                    <div class="modal-content">
+                        <h4 id="modal-import-entity-help-title"></h4>
+                        <p id="modal-import-entity-help-content"></p>
+                    </div>
+                    <div class="modal-footer background-color">
+                        <@header.buttonLink url='' icon='done' localizationKey='ok' color='green' classes='modal-action modal-close text-white' noUrl=true/>
+                    </div>
+                </div>
+
                 <div class="container">
                     <div class="section center-align">
                         <div class="headline-small">${locale.getString("info.database.import.match.accounts")}</div>