From dbd5fb71e2fb21afebffb162e7e9827b843fc03c Mon Sep 17 00:00:00 2001
From: Robert Goldmann <deadlocker@gmx.de>
Date: Fri, 19 Jul 2019 21:42:09 +0200
Subject: [PATCH] Fixed #435 - added quick date ranges
---
pom.xml | 6 +++
src/main/resources/languages/_de.properties | 8 +++
src/main/resources/languages/_en.properties | 8 +++
src/main/resources/static/css/charts.css | 14 ++++++
src/main/resources/static/css/dark/charts.css | 14 ++++++
src/main/resources/static/css/dark/style.css | 4 --
src/main/resources/static/css/style.css | 4 --
src/main/resources/static/js/charts.js | 50 +++++++++++++++++++
.../resources/templates/charts/charts.ftl | 26 ++++++++--
9 files changed, 123 insertions(+), 11 deletions(-)
create mode 100644 src/main/resources/static/css/charts.css
create mode 100644 src/main/resources/static/css/dark/charts.css
diff --git a/pom.xml b/pom.xml
index 44873d0b8..9ac628a38 100644
--- a/pom.xml
+++ b/pom.xml
@@ -65,6 +65,7 @@
<sortablejs.version>1.8.1</sortablejs.version>
<mousetrap.version>1.6.1</mousetrap.version>
<plotly.version>1.48.3</plotly.version>
+ <moment.version>2.24.0</moment.version>
<webdrivermanager.version>2.2.1</webdrivermanager.version>
<selenium.version>3.141.59</selenium.version>
@@ -195,6 +196,11 @@
<artifactId>plotly.js</artifactId>
<version>${plotly.version}</version>
</dependency>
+ <dependency>
+ <groupId>org.webjars</groupId>
+ <artifactId>momentjs</artifactId>
+ <version>${moment.version}</version>
+ </dependency>
<!-- selenium -->
<dependency>
diff --git a/src/main/resources/languages/_de.properties b/src/main/resources/languages/_de.properties
index ea30e4fbe..9763ddd2e 100644
--- a/src/main/resources/languages/_de.properties
+++ b/src/main/resources/languages/_de.properties
@@ -349,6 +349,14 @@ chart.steps.second.label.end=Enddatum
chart.steps.third.step=Schritt 3:
chart.steps.third=Wende Filter an (optional)
+chart.quick.this.week=Diese Woche
+chart.quick.this.month=Diesen Monat
+chart.quick.this.year=Dieses Jahr
+
+chart.quick.last.week.days=Letzte 7 Tage
+chart.quick.last.month.days=Letzte 30 Tage
+chart.quick.last.year.days=Letzte 365 Tage
+
chart.script.default=/* This list will be dynamically filled with all the transactions between\n \
* the start and and date you select on the "Show Chart" page\n \
* and filtered according to your specified filter.\n \
diff --git a/src/main/resources/languages/_en.properties b/src/main/resources/languages/_en.properties
index ae218ba7a..e23664365 100644
--- a/src/main/resources/languages/_en.properties
+++ b/src/main/resources/languages/_en.properties
@@ -348,6 +348,14 @@ chart.steps.second.label.end=End date
chart.steps.third.step=Step 3:
chart.steps.third=Apply filters (optional)
+chart.quick.this.week=This week
+chart.quick.this.month=This month
+chart.quick.this.year=This year
+
+chart.quick.last.week.days=Last 7 days
+chart.quick.last.month.days=Last 30 days
+chart.quick.last.year.days=Last 365 days
+
chart.script.default=/* This list will be dynamically filled with all the transactions between\n \
* the start and and date you select on the "Show Chart" page\n \
* and filtered according to your specified filter.\n \
diff --git a/src/main/resources/static/css/charts.css b/src/main/resources/static/css/charts.css
new file mode 100644
index 000000000..4351b0893
--- /dev/null
+++ b/src/main/resources/static/css/charts.css
@@ -0,0 +1,14 @@
+.step-name {
+ margin-left: 1em;
+}
+
+.quick-date {
+ color: #039be5;
+ text-align: center;
+ padding: 0 0 10px 0;
+}
+
+.quick-date:hover {
+ cursor: pointer;
+ text-decoration: underline #2E79B9;
+}
\ No newline at end of file
diff --git a/src/main/resources/static/css/dark/charts.css b/src/main/resources/static/css/dark/charts.css
new file mode 100644
index 000000000..4351b0893
--- /dev/null
+++ b/src/main/resources/static/css/dark/charts.css
@@ -0,0 +1,14 @@
+.step-name {
+ margin-left: 1em;
+}
+
+.quick-date {
+ color: #039be5;
+ text-align: center;
+ padding: 0 0 10px 0;
+}
+
+.quick-date:hover {
+ cursor: pointer;
+ text-decoration: underline #2E79B9;
+}
\ No newline at end of file
diff --git a/src/main/resources/static/css/dark/style.css b/src/main/resources/static/css/dark/style.css
index ec82a98c7..66d6a0448 100644
--- a/src/main/resources/static/css/dark/style.css
+++ b/src/main/resources/static/css/dark/style.css
@@ -581,10 +581,6 @@ input[type="radio"]:not(:checked) + span::before, [type="radio"]:not(:checked) +
margin-bottom: 20px;
}
-.step-name {
- margin-left: 1em;
-}
-
.invisible {
opacity: 0;
}
diff --git a/src/main/resources/static/css/style.css b/src/main/resources/static/css/style.css
index 8d100ec79..aa697a2ae 100644
--- a/src/main/resources/static/css/style.css
+++ b/src/main/resources/static/css/style.css
@@ -503,10 +503,6 @@ input[type="radio"]:checked + span::after, [type="radio"].with-gap:checked + spa
margin-bottom: 20px;
}
-.step-name {
- margin-left: 1em;
-}
-
.invisible {
opacity: 0;
}
diff --git a/src/main/resources/static/js/charts.js b/src/main/resources/static/js/charts.js
index 82594404a..9f4035c9a 100644
--- a/src/main/resources/static/js/charts.js
+++ b/src/main/resources/static/js/charts.js
@@ -102,6 +102,11 @@ $( document ).ready(function() {
resetFilter();
applyFilter(modalFilter);
});
+
+ $(".quick-date").click(function()
+ {
+ handleQuickDate(this, pickerStartDate, pickerEndDate);
+ });
});
function applyFilter(modal)
@@ -135,4 +140,49 @@ function resetFilter()
{
$("#filterSettings input[type=checkbox]").prop('checked', true);
$("#filter-name").val('');
+}
+
+function handleQuickDate(element, pickerStartDate, pickerEndDate)
+{
+ var quickType = element.dataset.quick;
+ var startDate;
+ var endDate;
+
+ switch(quickType) {
+ case '0':
+ startDate = moment().startOf('isoWeek');
+ endDate = moment().endOf('isoWeek');
+ break;
+ case '1':
+ startDate = moment().startOf('month');
+ endDate = moment().endOf('month');
+ break;
+ case '2':
+ startDate = moment().startOf('year');
+ endDate = moment().endOf('year');
+ break;
+ case '3':
+ startDate = moment().subtract(7, 'days');
+ endDate = moment();
+ break;
+ case '4':
+ startDate = moment().subtract(30, 'days');
+ endDate = moment();
+ break;
+ case '5':
+ startDate = moment().subtract(365, 'days');
+ endDate = moment();
+ break;
+ }
+
+ setDateRange(startDate, endDate, pickerStartDate, pickerEndDate);
+}
+
+function setDateRange(startDate, endDate, pickerStartDate, pickerEndDate)
+{
+ pickerStartDate.setDate(startDate.toDate());
+ pickerStartDate.setInputValue();
+
+ pickerEndDate.setDate(endDate.toDate());
+ pickerEndDate.setInputValue();
}
\ No newline at end of file
diff --git a/src/main/resources/templates/charts/charts.ftl b/src/main/resources/templates/charts/charts.ftl
index 4a6b699ca..d307a78a1 100644
--- a/src/main/resources/templates/charts/charts.ftl
+++ b/src/main/resources/templates/charts/charts.ftl
@@ -4,6 +4,7 @@
<@header.header "BudgetMaster"/>
<@header.style "datepicker"/>
<@header.style "filter"/>
+ <@header.style "charts"/>
<#import "/spring.ftl" as s>
</head>
<body class="budgetmaster-blue-light">
@@ -39,7 +40,7 @@
<span class="step-name">${locale.getString("chart.steps.first")}</span>
</div>
<div class="collapsible-body">
- <div class="row">
+ <div class="row no-margin-bottom">
<div class="input-field col s12 m12 l8 offset-l2 no-margin-top">
<select name="chartID">
<#list charts as chart>
@@ -64,7 +65,7 @@
<span class="step-name">${locale.getString("chart.steps.second")}</span>
</div>
<div class="collapsible-body">
- <div class="row">
+ <div class="row no-margin-bottom">
<div class="input-field col s6 m6 l4 offset-l2">
<#assign startDate = dateService.getLongDateString(chartSettings.getStartDate())/>
@@ -79,6 +80,24 @@
<label for="chart-datepicker-end">${locale.getString("chart.steps.second.label.end")}</label>
</div>
</div>
+ <div class="row no-margin-bottom">
+ <div class="col s12 m12 l8 offset-l2 no-margin-top">
+ <table class="no-border-table">
+ <tr>
+ <td class="quick-date" data-quick="0">${locale.getString("chart.quick.this.week")}</td>
+ <td class="quick-date" data-quick="1">${locale.getString("chart.quick.this.month")}</td>
+ <td class="quick-date" data-quick="2">${locale.getString("chart.quick.this.year")}</td>
+ </tr>
+ <tr>
+ <td class="quick-date" data-quick="3">${locale.getString("chart.quick.last.week.days")}</td>
+ <td class="quick-date" data-quick="4">${locale.getString("chart.quick.last.month.days")}</td>
+ <td class="quick-date" data-quick="5">${locale.getString("chart.quick.last.year.days")}</td>
+ </tr>
+ </table>
+ </div>
+ <div class="col s12 m12 l8 offset-l2 no-margin-top quick-date-container">
+ </div>
+ </div>
<script>
startDate = "${startDate}".split(".");
@@ -96,7 +115,7 @@
<span class="step-name">${locale.getString("chart.steps.third")}</span>
</div>
<div class="collapsible-body">
- <div class="row">
+ <div class="row no-margin-bottom">
<div class="col s12 m12 l8 offset-l2 no-margin-top center-align">
<@transactionsMacros.buttonFilter chartSettings.getFilterConfiguration().isActive()/>
</div>
@@ -138,6 +157,7 @@
<#import "../helpers/scripts.ftl" as scripts>
<@scripts.scripts/>
<script src="<@s.url '/webjars/plotly/1.48.3/dist/plotly.min.js'/>"></script>
+ <script src="<@s.url '/webjars/momentjs/2.24.0/min/moment.min.js'/>"></script>
<script src="<@s.url '/js/charts.js'/>"></script>
<script src="<@s.url '/js/filter.js'/>"></script>
--
GitLab