diff --git a/src/main/java/de/deadlocker8/budgetmaster/charts/ChartController.java b/src/main/java/de/deadlocker8/budgetmaster/charts/ChartController.java
index 7904249cbb17c4862371cd33f4f2f9abf19c18c7..5eca1afa7c2bd82b0ae1d201c07221150a5d7e3a 100644
--- a/src/main/java/de/deadlocker8/budgetmaster/charts/ChartController.java
+++ b/src/main/java/de/deadlocker8/budgetmaster/charts/ChartController.java
@@ -4,6 +4,7 @@ import de.deadlocker8.budgetmaster.controller.BaseController;
import de.deadlocker8.budgetmaster.services.HelpersService;
import de.deadlocker8.budgetmaster.settings.SettingsService;
import de.deadlocker8.budgetmaster.utils.ResourceNotFoundException;
+import org.joda.time.DateTime;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
@@ -33,6 +34,9 @@ public class ChartController extends BaseController
{
model.addAttribute("charts", chartService.getRepository().findAllByOrderByNameAsc());
model.addAttribute("settings", settingsService.getSettings());
+ DateTime now = DateTime.now();
+ model.addAttribute("defaultStartDate", now.withDayOfMonth(1));
+ model.addAttribute("defaultEndDate", now.dayOfMonth().withMaximumValue());
return "charts/charts";
}
diff --git a/src/main/resources/languages/_de.properties b/src/main/resources/languages/_de.properties
index b2e74e865d2577c22c21a175f652f6903d0e0a00..ce6394bd901d112447be76f2af9af13461086ca5 100644
--- a/src/main/resources/languages/_de.properties
+++ b/src/main/resources/languages/_de.properties
@@ -340,4 +340,6 @@ chart.show=Anzeigen
chart.steps.first=Schritt 1: W�hle ein Diagramm
chart.steps.first.label=Diagramm
chart.steps.second=Schritt 2: W�hle eine Zeitspanne
+chart.steps.second.label.start=Startdatum
+chart.steps.second.label.end=Enddatum
chart.steps.third=Schritt 3: Wende Filter an (optional)
\ No newline at end of file
diff --git a/src/main/resources/languages/_en.properties b/src/main/resources/languages/_en.properties
index 0fe85feb3674c346fa8d4982d100b229d53afef0..d13266622271d2037e46b841d51564d0fcdb5b2a 100644
--- a/src/main/resources/languages/_en.properties
+++ b/src/main/resources/languages/_en.properties
@@ -340,4 +340,6 @@ chart.show=Show
chart.steps.first=Step 1: Choose a chart
chart.steps.first.label=Chart
chart.steps.second=Step 2: Choose a date range
+chart.steps.second.label.start=Start date
+chart.steps.second.label.end=End date
chart.steps.third=Step 3: Apply filters (optional)
\ No newline at end of file
diff --git a/src/main/resources/static/js/charts.js b/src/main/resources/static/js/charts.js
index e9b6a10631647054fca0fc6d2e65401c81dcd28f..8bff456d6faf02fae076a3557c34733ad52b38ff 100644
--- a/src/main/resources/static/js/charts.js
+++ b/src/main/resources/static/js/charts.js
@@ -3,4 +3,87 @@ $( document ).ready(function() {
{
$('#modalConfirmDelete').modal('open');
}
+
+ if($(".datepicker").length)
+ {
+ var pickerStartDate = M.Datepicker.init(document.getElementById('chart-datepicker'), {
+ yearRange: 25,
+ firstDay: 1,
+ showClearBtn: false,
+ setDefaultDate: true,
+ defaultDate: startDate,
+
+ i18n: {
+ // Strings and translations
+ months: monthNames,
+ monthsShort: monthNamesShort,
+ weekdays: weekDays,
+ weekdaysShort: weekDaysShort,
+ weekdaysAbbrev: weekDaysLetters,
+
+ // Buttons
+ done: buttonClose,
+
+ // Accessibility labels
+ labelMonthNext: '>',
+ labelMonthPrev: '<'
+ },
+
+ // Formats
+ format: 'dd.mm.yyyy',
+ formatSubmit: 'dd.mm.yyyy',
+
+ onSelect: function()
+ {
+ if(typeof pickerEndDate !== "undefined")
+ {
+ pickerEndDate.destroy();
+ pickerEndDate = createDatePickerEnd(this.date, pickerEndDate.date);
+ }
+ }
+ });
+
+ // picker end date
+ if(typeof endDate !== "undefined")
+ {
+ var pickerEndDate = createDatePickerEnd(pickerStartDate.date, endDate);
+ }
+ }
+
+ function createDatePickerEnd(minDate, selectedDate)
+ {
+ if(selectedDate < minDate)
+ {
+ selectedDate = minDate;
+ }
+
+ return M.Datepicker.init(document.getElementById('chart-datepicker-end'), {
+ yearRange: 50,
+ firstDay: 1,
+ showClearBtn: false,
+ setDefaultDate: true,
+ minDate: minDate,
+ defaultDate: selectedDate,
+
+ i18n: {
+ // Strings and translations
+ months: monthNames,
+ monthsShort: monthNamesShort,
+ weekdays: weekDays,
+ weekdaysShort: weekDaysShort,
+ weekdaysAbbrev: weekDaysLetters,
+
+ // Buttons
+ done: buttonClose,
+
+ // Accessibility labels
+ labelMonthNext: '>',
+ labelMonthPrev: '<'
+ },
+
+ // Formats
+ format: 'dd.mm.yyyy',
+ formatSubmit: 'dd.mm.yyyy'
+ });
+ }
});
\ 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 e783c1d57d0acb3b9129b68fd823eb7306fc7581..c1f0563dc6fa8bef10dbe175ce1099e2565a1383 100644
--- a/src/main/resources/templates/charts/charts.ftl
+++ b/src/main/resources/templates/charts/charts.ftl
@@ -2,6 +2,7 @@
<head>
<#import "../helpers/header.ftl" as header>
<@header.header "BudgetMaster"/>
+ <@header.style "datepicker"/>
<#import "/spring.ftl" as s>
</head>
<body class="budgetmaster-blue-light">
@@ -21,6 +22,7 @@
<form name="ChartSettings" action="<@s.url '/charts/showChart'/>" method="post">
<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
+ <!-- STEP 1 -->
<div class="row no-margin-bottom">
<div class="col s12 m12 l8 offset-l2">
${locale.getString("chart.steps.first")}
@@ -37,18 +39,38 @@
</div>
</div>
+
+ <!-- STEP 2 -->
<div class="row no-margin-bottom">
<div class="col s12 m12 l8 offset-l2">
${locale.getString("chart.steps.second")}
</div>
</div>
<div class="row">
- <div class="input-field col s12 m12 l8 offset-l2 no-margin-top">
- <input id="chart-name" type="text" name="name" value="">
- <label for="chart-name">${locale.getString("chart.new.label.name")}</label>
+ <div class="input-field col s6 m6 l4 offset-l2">
+ <#assign startDate = dateService.getLongDateString(defaultStartDate)/>
+
+ <input id="chart-datepicker" type="text" class="datepicker" name="startDate" value="${startDate}">
+ <label for="chart-datepicker">${locale.getString("chart.steps.second.label.start")}</label>
+ </div>
+
+ <div class="input-field col s6 m6 l4 ">
+ <#assign endDate = dateService.getLongDateString(defaultEndDate)/>
+
+ <input id="chart-datepicker-end" type="text" class="datepicker" name="endDate" value="${endDate}">
+ <label for="chart-datepicker-end">${locale.getString("chart.steps.second.label.end")}</label>
</div>
</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>
+
+
+ <!-- STEP 3 -->
<div class="row no-margin-bottom">
<div class="col s12 m12 l8 offset-l2">
${locale.getString("chart.steps.third")}
@@ -78,8 +100,13 @@
</div>
</main>
+ <!-- Pass localization to JS -->
+ <#import "../helpers/globalDatePicker.ftl" as datePicker>
+ <@datePicker.datePickerLocalization/>
+
<!-- Scripts-->
<#import "../helpers/scripts.ftl" as scripts>
<@scripts.scripts/>
+ <script src="<@s.url '/js/charts.js'/>"></script>
</body>
</html>
\ No newline at end of file