From f961b530b1655037dbb5819936b705a47799e974 Mon Sep 17 00:00:00 2001
From: Robert Goldmann <deadlocker@gmx.de>
Date: Sun, 25 Jul 2021 11:17:32 +0200
Subject: [PATCH] #585 - hide chart settings after click on "show chart" button
--> only show small button to unhide settings again
---
.../budgetmaster/charts/ChartController.java | 2 +-
.../budgetmaster/charts/ChartSettings.java | 13 +++++++++----
src/main/resources/languages/base_de.properties | 5 ++++-
src/main/resources/languages/base_en.properties | 5 ++++-
src/main/resources/static/js/charts.js | 8 ++++++++
src/main/resources/templates/charts/charts.ftl | 16 ++++++++++++----
6 files changed, 38 insertions(+), 11 deletions(-)
diff --git a/src/main/java/de/deadlocker8/budgetmaster/charts/ChartController.java b/src/main/java/de/deadlocker8/budgetmaster/charts/ChartController.java
index aa5685657..3ae6fc4a4 100644
--- a/src/main/java/de/deadlocker8/budgetmaster/charts/ChartController.java
+++ b/src/main/java/de/deadlocker8/budgetmaster/charts/ChartController.java
@@ -62,7 +62,7 @@ public class ChartController extends BaseController
defaultFilterConfiguration.setFilterCategories(filterHelpersService.getFilterCategories());
defaultFilterConfiguration.setFilterTags(filterHelpersService.getFilterTags());
- ChartSettings defaultChartSettings = ChartSettings.getDefault(charts.get(0).getID(), defaultFilterConfiguration);
+ ChartSettings defaultChartSettings = ChartSettings.getDefault(defaultFilterConfiguration);
model.addAttribute("chartSettings", defaultChartSettings);
model.addAttribute("charts", charts);
diff --git a/src/main/java/de/deadlocker8/budgetmaster/charts/ChartSettings.java b/src/main/java/de/deadlocker8/budgetmaster/charts/ChartSettings.java
index 16ed2f4f1..d4177402a 100644
--- a/src/main/java/de/deadlocker8/budgetmaster/charts/ChartSettings.java
+++ b/src/main/java/de/deadlocker8/budgetmaster/charts/ChartSettings.java
@@ -10,23 +10,23 @@ public class ChartSettings
private ChartDisplayType displayType;
private ChartGroupType groupType;
- private int chartID;
+ private Integer chartID;
@DateTimeFormat(pattern = "dd.MM.yyyy")
private DateTime startDate;
@DateTimeFormat(pattern = "dd.MM.yyyy")
private DateTime endDate;
private FilterConfiguration filterConfiguration;
- public static ChartSettings getDefault(int chartID, FilterConfiguration filterConfiguration)
+ public static ChartSettings getDefault(FilterConfiguration filterConfiguration)
{
- return new ChartSettings(ChartDisplayType.BAR, ChartGroupType.MONTH, chartID, DateTime.now().withDayOfMonth(1), DateTime.now().dayOfMonth().withMaximumValue(), filterConfiguration);
+ return new ChartSettings(ChartDisplayType.BAR, ChartGroupType.MONTH, null, DateTime.now().withDayOfMonth(1), DateTime.now().dayOfMonth().withMaximumValue(), filterConfiguration);
}
public ChartSettings()
{
}
- public ChartSettings(ChartDisplayType displayType, ChartGroupType groupType, int chartID, DateTime startDate, DateTime endDate, FilterConfiguration filterConfiguration)
+ public ChartSettings(ChartDisplayType displayType, ChartGroupType groupType, Integer chartID, DateTime startDate, DateTime endDate, FilterConfiguration filterConfiguration)
{
this.displayType = displayType;
this.groupType = groupType;
@@ -96,6 +96,11 @@ public class ChartSettings
this.filterConfiguration = filterConfiguration;
}
+ public boolean isChartSelected()
+ {
+ return chartID != null;
+ }
+
@Override
public String toString()
{
diff --git a/src/main/resources/languages/base_de.properties b/src/main/resources/languages/base_de.properties
index cd214f8c5..8db1695df 100644
--- a/src/main/resources/languages/base_de.properties
+++ b/src/main/resources/languages/base_de.properties
@@ -422,7 +422,7 @@ home.menu.templates=Vorlagen helfen dir dabei neue Buchung schnell und effizient
home.menu.templates.action.manage=Vorlagenverwaltung
home.menu.charts=Visualisiere deine Daten in verschiedenen Diagrammen. Nutze die mitgelieferten Diagrammtypen oder definiere deine eigenen Diagramme.
-home.menu.charts.action.manage=Eigene Diagramme verwalten
+home.menu.charts.action.manage=Diagrammverwaltung
home.menu.charts.action.show=Diagramme ansehen
home.menu.reports=Erstelle konfigurierbare Monatsberichte als PDF zum Ausdrucken und Archivieren. Du kannst den Inhalt der Berichte filtern und zum Beispiel nach Einnahmen und Ausgaben getrennt auflisten lassen.
@@ -553,6 +553,9 @@ chart.quick.last.month.days=Letzte 30 Tage
chart.quick.last.year.days=Letzte 365 Tage
chart.quick.until.today=Alle bis heute
+chart.button.manage=Eigene Diagramme verwalten
+chart.button.settings=Diagramm ändern
+
statistics.number.of.accounts={0} Konten
statistics.number.of.transactions={0} Buchungen
statistics.number.of.templates={0} Vorlagen
diff --git a/src/main/resources/languages/base_en.properties b/src/main/resources/languages/base_en.properties
index 5cdb728fb..39fe482b3 100644
--- a/src/main/resources/languages/base_en.properties
+++ b/src/main/resources/languages/base_en.properties
@@ -423,7 +423,7 @@ home.menu.templates=Templates help you to create new transactions quickly and ef
home.menu.templates.action.manage=Manage templates
home.menu.charts=Visualize your data by using charts. You can choose an included default chart or define your own.
-home.menu.charts.action.manage=Manage custom charts
+home.menu.charts.action.manage=Manage charts
home.menu.charts.action.show=Show charts
home.menu.reports=Create configurable month reports in PDF format for printing and archiving. You can filter the content of the reports and, for example, list them separately to incomes and expenditures.
@@ -552,6 +552,9 @@ chart.quick.last.month.days=Last 30 days
chart.quick.last.year.days=Last 365 days
chart.quick.until.today=Until today
+chart.button.manage=Manage custo charts
+chart.button.settings=Change chart
+
statistics.number.of.accounts={0} Accounts
statistics.number.of.transactions={0} Transactions
statistics.number.of.templates={0} Templates
diff --git a/src/main/resources/static/js/charts.js b/src/main/resources/static/js/charts.js
index 760b548b4..20483408c 100644
--- a/src/main/resources/static/js/charts.js
+++ b/src/main/resources/static/js/charts.js
@@ -114,7 +114,15 @@ $(document).ready(function()
applyFilter();
});
+ $('#buttonShowChartSettings').click(function(){
+ document.getElementsByName('NewChartSettings')[0].classList.toggle('hidden', false);
+ document.getElementById('buttonShowChartSettings').classList.toggle('hidden', true);
+ });
+
filterChartPreviews();
+
+ let showEditSettingsButton = document.getElementsByName('NewChartSettings')[0].classList.contains('hidden');
+ document.getElementById('buttonShowChartSettings').classList.toggle('hidden', !showEditSettingsButton);
});
function createDatePickerEnd(minDate, selectedDate)
diff --git a/src/main/resources/templates/charts/charts.ftl b/src/main/resources/templates/charts/charts.ftl
index d9d0951eb..299348baf 100644
--- a/src/main/resources/templates/charts/charts.ftl
+++ b/src/main/resources/templates/charts/charts.ftl
@@ -27,11 +27,17 @@
<@header.content>
<br>
- <form name="NewChartSettings" action="<@s.url '/charts'/>" method="post">
+ <div class="row">
+ <div class="col s12 center-align">
+ <@header.buttonLink url='' icon='edit' localizationKey='chart.button.settings' noUrl=true id='buttonShowChartSettings' classes='hidden'/>
+ </div>
+ </div>
+
+ <form name="NewChartSettings" action="<@s.url '/charts'/>" method="post" class="<#if chartSettings.isChartSelected()>hidden</#if>">
<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
<div class="container">
- <div class="row hide-on-small-and-down">
+ <div class="row">
<div class="col s12 center-align">
<#list displayTypes as displayType>
<@chartTypeButton item=displayType buttonClass="button-display-type" initialItem=chartSettings.getDisplayType()/>
@@ -42,7 +48,7 @@
<input type="hidden" name="displayType" value="${chartSettings.getDisplayType().name()}">
<div class="container">
- <div class="row hide-on-small-and-down">
+ <div class="row">
<div class="col s12 center-align">
<#list groupTypes as groupType>
<@chartTypeButton item=groupType buttonClass="button-group-type" initialItem=chartSettings.getGroupType()/>
@@ -58,7 +64,7 @@
<@chartPreview chart/>
</#list>
<div class="col s12 center-align hidden" id="buttonCustomCharts">
- <@header.buttonLink url='/charts/manage' icon='edit' localizationKey='home.menu.charts.action.manage'/>
+ <@header.buttonLink url='/charts/manage' icon='edit' localizationKey='chart.button.manage'/>
</div>
</div>
</div>
@@ -78,6 +84,8 @@
</div>
</form>
+ <br>
+
<div class="container-chart">
<#if containerID??>
<div id="${containerID}" class="chart-canvas"></div>
--
GitLab