[Advanced Logbook] Added date preset buttons in the filter dropdown

This commit is contained in:
Andreas Kristiansen
2025-11-26 08:26:02 +01:00
parent a816fd6ed8
commit 6572c5d171
2 changed files with 98 additions and 0 deletions

View File

@@ -271,6 +271,22 @@ $options = json_decode($options);
</button>
<div class="dropdown-menu dropdown-menu-start p-3 mt-2" aria-labelledby="filterDropdown" style="min-width: 900px; max-height: 600px; overflow-y: auto;">
<div class="card-body filterbody container-fluid">
<div class="row">
<div class="mb-3 col-lg-2 col-md-2 col-sm-3 col-xl">
<label class="form-label" for="checkboxes"><?= __("Date Presets") . ": " ?></label>
<div class="d-flex flex-wrap gap-1">
<button type="button" class="btn btn-primary btn-sm flex-shrink-0" onclick="applyPreset('today')"><?= __("Today") ?></button>
<button type="button" class="btn btn-primary btn-sm flex-shrink-0" onclick="applyPreset('yesterday')"><?= __("Yesterday") ?></button>
<button type="button" class="btn btn-primary btn-sm flex-shrink-0" onclick="applyPreset('last7days')"><?= __("Last 7 Days") ?></button>
<button type="button" class="btn btn-primary btn-sm flex-shrink-0" onclick="applyPreset('last30days')"><?= __("Last 30 Days") ?></button>
<button type="button" class="btn btn-primary btn-sm flex-shrink-0" onclick="applyPreset('thismonth')"><?= __("This Month") ?></button>
<button type="button" class="btn btn-primary btn-sm flex-shrink-0" onclick="applyPreset('lastmonth')"><?= __("Last Month") ?></button>
<button type="button" class="btn btn-primary btn-sm flex-shrink-0" onclick="applyPreset('thisyear')"><?= __("This Year") ?></button>
<button type="button" class="btn btn-primary btn-sm flex-shrink-0" onclick="applyPreset('lastyear')"><?= __("Last Year") ?></button>
<button type="button" class="btn btn-danger btn-sm flex-shrink-0" onclick="resetDates()"><i class="fas fa-times"></i> <?= __("Clear") ?></button>
</div>
</div>
</div>
<div class="row">
<div <?php if (($options->datetime->show ?? "true") == "false") { echo 'style="display:none"'; } ?> class="mb-3 col-lg-2 col-md-2 col-sm-3 col-xl">
<label class="form-label" for="dateFrom"><?= __("From") . ": " ?></label>

View File

@@ -1876,3 +1876,85 @@ function saveOptions() {
});
});
}
// Preset functionality
function applyPreset(preset) {
const dateFrom = document.getElementById('dateFrom');
const dateTo = document.getElementById('dateTo');
const today = new Date();
// Format date as YYYY-MM-DD
function formatDate(date) {
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
return `${year}-${month}-${day}`;
}
switch(preset) {
case 'today':
dateFrom.value = formatDate(today);
dateTo.value = formatDate(today);
break;
case 'yesterday':
const yesterday = new Date(today);
yesterday.setDate(yesterday.getDate() - 1);
dateFrom.value = formatDate(yesterday);
dateTo.value = formatDate(yesterday);
break;
case 'last7days':
const sevenDaysAgo = new Date(today);
sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7);
dateFrom.value = formatDate(sevenDaysAgo);
dateTo.value = formatDate(today);
break;
case 'last30days':
const thirtyDaysAgo = new Date(today);
thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);
dateFrom.value = formatDate(thirtyDaysAgo);
dateTo.value = formatDate(today);
break;
case 'thismonth':
const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
dateFrom.value = formatDate(firstDayOfMonth);
dateTo.value = formatDate(today);
break;
case 'lastmonth':
const firstDayOfLastMonth = new Date(today.getFullYear(), today.getMonth() - 1, 1);
const lastDayOfLastMonth = new Date(today.getFullYear(), today.getMonth(), 0);
dateFrom.value = formatDate(firstDayOfLastMonth);
dateTo.value = formatDate(lastDayOfLastMonth);
break;
case 'thisyear':
const firstDayOfYear = new Date(today.getFullYear(), 0, 1);
dateFrom.value = formatDate(firstDayOfYear);
dateTo.value = formatDate(today);
break;
case 'lastyear':
const lastYear = today.getFullYear() - 1;
const firstDayOfLastYear = new Date(lastYear, 0, 1);
const lastDayOfLastYear = new Date(lastYear, 11, 31);
dateFrom.value = formatDate(firstDayOfLastYear);
dateTo.value = formatDate(lastDayOfLastYear);
break;
case 'alltime':
dateFrom.value = '';
dateTo.value = '';
break;
}
}
// Reset dates function
function resetDates() {
const dateFrom = document.getElementById('dateFrom');
const dateTo = document.getElementById('dateTo');
dateFrom.value = '';
dateTo.value = '';
}