#435 - added date pickers

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";
 	}
 

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

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

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

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