diff --git a/pom.xml b/pom.xml index 44873d0b836a18e1dc452e3d7d1dc72bfaeba930..9ac628a38d8625d3ce239e91fa7991397fbae5ed 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 ea30e4fbe238d72c9f269d65c36883c6e004b0ee..9763ddd2edf5d2ac0e3bfdde705db9c0d75bc197 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 ae218ba7a4cad30dde56c5cf656d407daba4e92b..e23664365633409fd509c1c0c8c4601d4c7c10e7 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 0000000000000000000000000000000000000000..4351b0893f1cf0c76da890c77228e0721a677140 --- /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 0000000000000000000000000000000000000000..4351b0893f1cf0c76da890c77228e0721a677140 --- /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 ec82a98c7188e1ba83c23f959ccbb5ae99d9ab59..66d6a04481b71d924199ddc4debf9873216fd7e8 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 8d100ec79aea21fe52181d38497df3ce9746fd3a..aa697a2ae69733c1523343827f69d66126b1ceec 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 82594404ac3b50bb836cde43e867e62104210b49..9f4035c9ac71425862e5aa632ff04ca3cc2cf56e 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 4a6b699caffb143a80f688fb91a8ed04832c9fde..d307a78a16aed8525ed3bd0f277bebe01dcf5cfa 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>