Added date presets

This commit is contained in:
Andreas Kristiansen
2025-11-25 10:45:53 +01:00
parent 13fc62395a
commit 381f844dfa
2 changed files with 116 additions and 11 deletions

View File

@@ -21,24 +21,37 @@
<button id="clear" type="button" name="clear" class="btn btn-sm btn-primary me-1 mb-1 ld-ext-right ld-ext-right-clear" onclick="clearMarkers()"><?= __("Clear Markers"); ?><div class="ld ld-ring ld-spin"></div></button>
<!-- Dropdown Menu with Filter Content -->
<div class="dropdown-menu start-50 translate-middle-x p-3 mt-5" aria-labelledby="filterDropdown" style="min-width: 700px;">
<div class="dropdown-menu start-50 translate-middle-x p-3 mt-5" aria-labelledby="filterDropdown" style="min-width: 1000px;">
<div class="card-body filterbody">
<div class="mb-3 row">
<div class="col-md-2 control-label" for="checkboxes"><?= __("Date from"); ?></div>
<div class="col-sm-3">
<div class="form-check-inline">
<input name="dateFrom" id="dateFrom" type="date" class="form-control form-control-sm w-auto border border-secondary" <?php if ($this->input->post('dateFrom')) echo 'value="' . $this->input->post('dateFrom') . '"'; ?>>
</div>
</div>
<div class="col-md-2 control-label" for="checkboxes"><?= __("Date to"); ?></div>
<div class="col-sm-3">
<div class="form-check-inline">
<input name="dateTo" id="dateTo" type="date" class="form-control form-control-sm w-auto border border-secondary" <?php if ($this->input->post('dateTo')) echo 'value="' . $this->input->post('dateTo') . '"'; ?>>
<div class="col-md-2 control-label" for="checkboxes"><?= __("Date Presets"); ?></div>
<div class="col-sm-10">
<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('alltime')"><?= __("All Time") ?></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="mb-3 row align-items-center">
<div class="col-md-2 control-label" for="checkboxes"><?= __("Date from"); ?></div>
<div class="col-sm-3">
<input name="dateFrom" id="dateFrom" type="date" class="form-select form-select-sm" <?php if ($this->input->post('dateFrom')) echo 'value="' . $this->input->post('dateFrom') . '"'; ?>>
</div>
<div class="col-md-2 control-label" for="checkboxes"><?= __("Date to"); ?></div>
<div class="col-sm-3">
<input name="dateTo" id="dateTo" type="date" class="form-select form-select-sm" <?php if ($this->input->post('dateTo')) echo 'value="' . $this->input->post('dateTo') . '"'; ?>>
</div>
</div>
<!-- Row 1 -->
<div class="row mb-2">
<label class="col-md-2" for="band"><?= __("Band"); ?></label>

View File

@@ -342,3 +342,95 @@ $(document).ready(function(){
// pass in the target node, as well as the observer options
observer.observe(target, config);
});
// 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 'alltime':
dateFrom.value = '';
dateTo.value = '';
break;
}
// Trigger plot after applying preset
setTimeout(() => {
const plotButton = document.getElementById('plot');
if (plotButton) {
plotButton.click();
}
}, 100);
}
// Reset dates function
function resetDates() {
const dateFrom = document.getElementById('dateFrom');
const dateTo = document.getElementById('dateTo');
dateFrom.value = '';
dateTo.value = '';
// Trigger plot after resetting
setTimeout(() => {
const plotButton = document.getElementById('plot');
if (plotButton) {
plotButton.click();
}
}, 100);
}