From 4749e1d274dee3cd85b7b3a235d2e4d903be7985 Mon Sep 17 00:00:00 2001
From: Robert Goldmann <deadlocker@gmx.de>
Date: Sun, 18 Jul 2021 14:05:43 +0200
Subject: [PATCH] #585 - send selected display type, group type and chart to
server
---
.../budgetmaster/charts/ChartSettings.java | 33 ++++-
src/main/resources/static/js/charts.js | 7 +-
.../resources/templates/charts/charts.ftl | 127 +++++++++---------
3 files changed, 99 insertions(+), 68 deletions(-)
diff --git a/src/main/java/de/deadlocker8/budgetmaster/charts/ChartSettings.java b/src/main/java/de/deadlocker8/budgetmaster/charts/ChartSettings.java
index e5ef9a4ce..16ed2f4f1 100644
--- a/src/main/java/de/deadlocker8/budgetmaster/charts/ChartSettings.java
+++ b/src/main/java/de/deadlocker8/budgetmaster/charts/ChartSettings.java
@@ -7,6 +7,9 @@ import org.springframework.format.annotation.DateTimeFormat;
public class ChartSettings
{
+ private ChartDisplayType displayType;
+ private ChartGroupType groupType;
+
private int chartID;
@DateTimeFormat(pattern = "dd.MM.yyyy")
private DateTime startDate;
@@ -16,21 +19,43 @@ public class ChartSettings
public static ChartSettings getDefault(int chartID, FilterConfiguration filterConfiguration)
{
- return new ChartSettings(chartID, DateTime.now().withDayOfMonth(1), DateTime.now().dayOfMonth().withMaximumValue(), filterConfiguration);
+ return new ChartSettings(ChartDisplayType.BAR, ChartGroupType.MONTH, chartID, DateTime.now().withDayOfMonth(1), DateTime.now().dayOfMonth().withMaximumValue(), filterConfiguration);
}
public ChartSettings()
{
}
- public ChartSettings(int chartID, DateTime startDate, DateTime endDate, FilterConfiguration filterConfiguration)
+ public ChartSettings(ChartDisplayType displayType, ChartGroupType groupType, int chartID, DateTime startDate, DateTime endDate, FilterConfiguration filterConfiguration)
{
+ this.displayType = displayType;
+ this.groupType = groupType;
this.chartID = chartID;
this.startDate = startDate;
this.endDate = endDate;
this.filterConfiguration = filterConfiguration;
}
+ public ChartDisplayType getDisplayType()
+ {
+ return displayType;
+ }
+
+ public void setDisplayType(ChartDisplayType displayType)
+ {
+ this.displayType = displayType;
+ }
+
+ public ChartGroupType getGroupType()
+ {
+ return groupType;
+ }
+
+ public void setGroupType(ChartGroupType groupType)
+ {
+ this.groupType = groupType;
+ }
+
public int getChartID()
{
return chartID;
@@ -75,7 +100,9 @@ public class ChartSettings
public String toString()
{
return "ChartSettings{" +
- "chartID=" + chartID +
+ "displayType=" + displayType +
+ ", groupType=" + groupType +
+ ", chartID=" + chartID +
", startDate=" + startDate +
", endDate=" + endDate +
", filterConfiguration=" + filterConfiguration +
diff --git a/src/main/resources/static/js/charts.js b/src/main/resources/static/js/charts.js
index 6a25b214b..50c563859 100644
--- a/src/main/resources/static/js/charts.js
+++ b/src/main/resources/static/js/charts.js
@@ -91,20 +91,23 @@ $(document).ready(function()
$('.button-display-type').click(function()
{
toggleChartTypeButtons('button-display-type', this);
+ document.getElementsByName('displayType')[0].value = this.dataset.value;
filterChartPreviews();
});
$('.button-group-type').click(function()
{
toggleChartTypeButtons('button-group-type', this);
+ document.getElementsByName('groupType')[0].value = this.dataset.value;
filterChartPreviews();
});
- $('.chart-preview').click(function()
+ $('.chart-preview-column').click(function()
{
unsetActiveChartPreview();
- this.classList.toggle('active', true);
+ this.querySelector('.chart-preview').classList.toggle('active', true);
+ document.getElementsByName('chartID')[0].value = this.dataset.id;
});
filterChartPreviews();
diff --git a/src/main/resources/templates/charts/charts.ftl b/src/main/resources/templates/charts/charts.ftl
index 0dd1280b3..079e23895 100644
--- a/src/main/resources/templates/charts/charts.ftl
+++ b/src/main/resources/templates/charts/charts.ftl
@@ -29,40 +29,46 @@
<#-- <div class="center-align"><@header.buttonLink url='/charts/manage' icon='edit' localizationKey='home.menu.charts.action.manage'/></div>-->
<#-- <br>-->
- <div class="container">
- <div class="row hide-on-small-and-down">
- <div class="col s12 center-align">
- <#list displayTypes as displayType>
- <@chartTypeButton item=displayType buttonClass="button-display-type" initialItem=initialDisplayType/>
- </#list>
+ <form name="NewChartSettings" action="<@s.url '/charts'/>" method="post">
+ <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
+
+ <div class="container">
+ <div class="row hide-on-small-and-down">
+ <div class="col s12 center-align">
+ <#list displayTypes as displayType>
+ <@chartTypeButton item=displayType buttonClass="button-display-type" initialItem=initialDisplayType/>
+ </#list>
+ </div>
</div>
</div>
- </div>
+ <input type="hidden" name="displayType" value="${initialDisplayType.name()}">
- <div class="container">
- <div class="row hide-on-small-and-down">
- <div class="col s12 center-align">
- <#list groupTypes as groupType>
- <@chartTypeButton item=groupType buttonClass="button-group-type" initialItem=initialGroupType/>
- </#list>
+ <div class="container">
+ <div class="row hide-on-small-and-down">
+ <div class="col s12 center-align">
+ <#list groupTypes as groupType>
+ <@chartTypeButton item=groupType buttonClass="button-group-type" initialItem=initialGroupType/>
+ </#list>
+ </div>
</div>
</div>
- </div>
+ <input type="hidden" name="groupType" value="${initialGroupType.name()}">
- <div class="container">
- <div class="row">
- <#list charts as chart>
- <@chartPreview chart/>
- </#list>
+ <div class="container">
+ <div class="row">
+ <#list charts as chart>
+ <@chartPreview chart/>
+ </#list>
+ </div>
</div>
- </div>
+ <input type="hidden" name="chartID" value="">
- <div class="container">
- <div class="row">
- <div class="col s12">
- <div class="card" id="chart-date-card">
- <div class="card-content">
- <div class="row">
+ <div class="container">
+ <div class="row">
+ <div class="col s12">
+ <div class="card" id="chart-date-card">
+ <div class="card-content">
+ <div class="row">
<div class="input-field col s6 m6 l4 offset-l2">
<#assign startDate = dateService.getLongDateString(chartSettings.getStartDate())/>
@@ -86,7 +92,7 @@
<td class="quick-date" data-quick="2">${locale.getString("chart.quick.this.year")}</td>
<td class="quick-date" data-quick="3">${locale.getString("chart.quick.all")}</td>
</tr>
- <tr>
+ <tr>
<td class="quick-date" data-quick="4">${locale.getString("chart.quick.last.week")}</td>
<td class="quick-date" data-quick="5">${locale.getString("chart.quick.last.month")}</td>
<td class="quick-date" data-quick="6">${locale.getString("chart.quick.last.year")}</td>
@@ -99,53 +105,48 @@
<td class="quick-date" data-quick="11">${locale.getString("chart.quick.until.today")}</td>
</tr>
</table>
- </div>
- <div class="col s12 m12 l8 offset-l2 no-margin-top quick-date-container">
- </div>
+ </div>
+ <div class="col s12 m12 l8 offset-l2 no-margin-top quick-date-container">
+ </div>
- <script>
- startDate = "${startDate}".split(".");
- startDate = new Date(startDate[2], startDate[1] - 1, startDate[0]);
- endDate = "${endDate}".split(".");
- endDate = new Date(endDate[2], endDate[1] - 1, endDate[0]);
- </script>
+ <script>
+ startDate = "${startDate}".split(".");
+ startDate = new Date(startDate[2], startDate[1] - 1, startDate[0]);
+ endDate = "${endDate}".split(".");
+ endDate = new Date(endDate[2], endDate[1] - 1, endDate[0]);
+ </script>
+ </div>
</div>
</div>
</div>
</div>
</div>
- </div>
- <div class="container">
- <div class="row">
- <div class="col s12 no-margin-top center-align">
- <ul class="collapsible">
- <li>
- <div class="collapsible-header"><i class="fas fa-filter"></i>Filter</div>
- <div class="collapsible-body"><@filterMacros.filterModalContent chartSettings.getFilterConfiguration() "filterConfiguration"/></div>
- </li>
- </ul>
+ <div class="container">
+ <div class="row">
+ <div class="col s12 no-margin-top center-align">
+ <ul class="collapsible">
+ <li>
+ <div class="collapsible-header"><i class="fas fa-filter"></i>Filter</div>
+ <div class="collapsible-body"><@filterMacros.filterModalContent chartSettings.getFilterConfiguration() "filterConfiguration"/></div>
+ </li>
+ </ul>
+ </div>
</div>
</div>
- </div>
- <div class="container">
- <form name="NewChartSettings" action="<@s.url '/charts'/>" method="post">
- <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
+ <@filterMacros.filterModalCharts chartSettings.getFilterConfiguration()/>
- <@filterMacros.filterModalCharts chartSettings.getFilterConfiguration()/>
-
- <#-- buttons -->
- <div class="row center-align">
- <div class="col s12">
- <button class="btn waves-effect waves-light background-blue" type="submit"
- name="buttonSave">
- <i class="material-icons left">show_chart</i>${locale.getString("chart.show")}
- </button>
- </div>
+ <#-- buttons -->
+ <div class="row center-align">
+ <div class="col s12">
+ <button class="btn waves-effect waves-light background-blue" type="submit"
+ name="buttonSave">
+ <i class="material-icons left">show_chart</i>${locale.getString("chart.show")}
+ </button>
</div>
- </form>
- </div>
+ </div>
+ </form>
<div class="container-chart">
<#if containerID??>
@@ -276,7 +277,7 @@
</#macro>
<#macro chartPreview chart>
- <div class="col s6 m4 l3 center-align chart-preview-column" data-display-type="${chart.getDisplayType()}" data-group-type="${chart.getGroupType()}">
+ <div class="col s6 m4 l3 center-align chart-preview-column" data-display-type="${chart.getDisplayType()}" data-group-type="${chart.getGroupType()}" data-id="${chart.getID()?c}">
<div class="card chart-preview background-grey-dark">
<div class="card-image">
<img src="<@s.url '/images/charts/' + chart.getPreviewImageFileName()!"placeholder.png"/>">
--
GitLab