From b0c3404cc7bc6ffe420426f73fe9a5b0f075d94d Mon Sep 17 00:00:00 2001
From: Robert Goldmann <deadlocker@gmx.de>
Date: Thu, 4 Mar 2021 21:26:45 +0100
Subject: [PATCH] Fixed #588 - added new quick date options for charts
---
.../resources/languages/base_de.properties | 5 +
.../resources/languages/base_en.properties | 5 +
src/main/resources/static/js/charts.js | 130 ++++++++++--------
.../resources/templates/charts/charts.ftl | 14 +-
4 files changed, 94 insertions(+), 60 deletions(-)
diff --git a/src/main/resources/languages/base_de.properties b/src/main/resources/languages/base_de.properties
index fbe6a7681..ccf34ad1d 100644
--- a/src/main/resources/languages/base_de.properties
+++ b/src/main/resources/languages/base_de.properties
@@ -498,6 +498,11 @@ chart.quick.this.month=Diesen Monat
chart.quick.this.year=Dieses Jahr
chart.quick.all=Alle
+chart.quick.last.week=Letzte Woche
+chart.quick.last.month=Letzter Monat
+chart.quick.last.year=Letztes Jahr
+chart.quick.until.endOfLastYear=Alle bis Ende letzten Jahres
+
chart.quick.last.week.days=Letzte 7 Tage
chart.quick.last.month.days=Letzte 30 Tage
chart.quick.last.year.days=Letzte 365 Tage
diff --git a/src/main/resources/languages/base_en.properties b/src/main/resources/languages/base_en.properties
index 7a4225d86..337825d40 100644
--- a/src/main/resources/languages/base_en.properties
+++ b/src/main/resources/languages/base_en.properties
@@ -496,6 +496,11 @@ chart.quick.this.month=This month
chart.quick.this.year=This year
chart.quick.all=All
+chart.quick.last.week=Last week
+chart.quick.last.month=Last month
+chart.quick.last.year=Last year
+chart.quick.until.endOfLastYear=Until end of last 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
diff --git a/src/main/resources/static/js/charts.js b/src/main/resources/static/js/charts.js
index 7ee9a9503..d2103d41e 100644
--- a/src/main/resources/static/js/charts.js
+++ b/src/main/resources/static/js/charts.js
@@ -1,8 +1,9 @@
+let modalFilter;
+let chartPickerStartDate;
+let chartPickerEndDate;
+
$(document).ready(function()
{
- let modalFilter;
- let pickerStartDate;
- let pickerEndDate;
if($("#chart-script").length)
{
@@ -26,7 +27,7 @@ $(document).ready(function()
if($(".datepicker").length)
{
- pickerStartDate = M.Datepicker.init(document.getElementById('chart-datepicker'), {
+ chartPickerStartDate = M.Datepicker.init(document.getElementById('chart-datepicker'), {
yearRange: 25,
firstDay: 1,
showClearBtn: false,
@@ -55,10 +56,11 @@ $(document).ready(function()
onSelect: function()
{
- if(typeof pickerEndDate !== "undefined")
+ if(typeof chartPickerEndDate !== "undefined")
{
- pickerEndDate.destroy();
- pickerEndDate = createDatePickerEnd(this.date, pickerEndDate.date);
+ let selectedDate = chartPickerEndDate.date;
+ chartPickerEndDate.destroy();
+ chartPickerEndDate = createDatePickerEnd(this.date, selectedDate);
}
}
});
@@ -66,45 +68,8 @@ $(document).ready(function()
// picker end date
if(typeof endDate !== "undefined")
{
- pickerEndDate = createDatePickerEnd(pickerStartDate.date, endDate);
- }
- }
-
- function createDatePickerEnd(minDate, selectedDate)
- {
- if(selectedDate < minDate)
- {
- selectedDate = minDate;
+ chartPickerEndDate = createDatePickerEnd(chartPickerStartDate.date, endDate);
}
-
- 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'
- });
}
$(".filter-button-close").click(function()
@@ -120,10 +85,47 @@ $(document).ready(function()
$(".quick-date").click(function()
{
- handleQuickDate(this, pickerStartDate, pickerEndDate);
+ handleQuickDate(this);
});
});
+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'
+ });
+}
+
function applyFilter(modal)
{
let filterButton = document.getElementById("modalFilterTrigger");
@@ -156,7 +158,7 @@ function resetFilter()
$("#filter-name").val('');
}
-function handleQuickDate(element, pickerStartDate, pickerEndDate)
+function handleQuickDate(element)
{
let quickType = element.dataset.quick;
let startDate;
@@ -181,31 +183,47 @@ function handleQuickDate(element, pickerStartDate, pickerEndDate)
endDate = moment("2100-01-01");
break;
case '4':
+ startDate = moment().subtract(1,'weeks').startOf('isoWeek');
+ endDate = moment().subtract(1,'weeks').endOf('isoWeek');
+ break;
+ case '5':
+ startDate = moment().subtract(1,'months').startOf('month');
+ endDate = moment().subtract(1,'months').endOf('month');
+ break;
+ case '6':
+ startDate = moment().subtract(1,'years').startOf('year');
+ endDate = moment().subtract(1,'years').endOf('year');
+ break;
+ case '7':
+ startDate = moment("2000-01-01");
+ endDate = moment().subtract(1, 'years').endOf('year');
+ break;
+ case '8':
startDate = moment().subtract(7, 'days');
endDate = moment();
break;
- case '5':
+ case '9':
startDate = moment().subtract(30, 'days');
endDate = moment();
break;
- case '6':
+ case '10':
startDate = moment().subtract(365, 'days');
endDate = moment();
break;
- case '7':
+ case '11':
startDate = moment("2000-01-01");
endDate = moment();
break;
}
- setDateRange(startDate, endDate, pickerStartDate, pickerEndDate);
+ setDateRange(startDate, endDate);
}
-function setDateRange(startDate, endDate, pickerStartDate, pickerEndDate)
+function setDateRange(startDate, endDate)
{
- pickerStartDate.setDate(startDate.toDate());
- pickerStartDate.setInputValue();
+ chartPickerStartDate.setDate(startDate.startOf('day').toDate());
+ chartPickerStartDate.setInputValue();
- pickerEndDate.setDate(endDate.toDate());
- pickerEndDate.setInputValue();
+ chartPickerEndDate.destroy();
+ chartPickerEndDate = createDatePickerEnd(chartPickerStartDate.date, endDate.startOf('day').toDate());
}
\ 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 85ccd72fa..07611e2ea 100644
--- a/src/main/resources/templates/charts/charts.ftl
+++ b/src/main/resources/templates/charts/charts.ftl
@@ -160,12 +160,18 @@
<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>
<td class="quick-date" data-quick="3">${locale.getString("chart.quick.all")}</td>
+ </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>
+ <td class="quick-date" data-quick="7">${locale.getString("chart.quick.until.endOfLastYear")}</td>
</tr>
<tr>
- <td class="quick-date" data-quick="4">${locale.getString("chart.quick.last.week.days")}</td>
- <td class="quick-date" data-quick="5">${locale.getString("chart.quick.last.month.days")}</td>
- <td class="quick-date" data-quick="6">${locale.getString("chart.quick.last.year.days")}</td>
- <td class="quick-date" data-quick="7">${locale.getString("chart.quick.until.today")}</td>
+ <td class="quick-date" data-quick="8">${locale.getString("chart.quick.last.week.days")}</td>
+ <td class="quick-date" data-quick="9">${locale.getString("chart.quick.last.month.days")}</td>
+ <td class="quick-date" data-quick="10">${locale.getString("chart.quick.last.year.days")}</td>
+ <td class="quick-date" data-quick="11">${locale.getString("chart.quick.until.today")}</td>
</tr>
</table>
</div>
--
GitLab