arifal/sibedas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

change filter year on dashboard to dropdown

Browse Source
This commit is contained in:
arifal
2025-02-13 01:17:22 +07:00
parent 9efb6c346e
commit a9afb47f08
2 changed files with 14 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
resources/js/dashboards/bigdata.js
View File

@@ -8,10 +8,10 @@ class BigData {
try { try {
this.filterYear = new Date().getFullYear(); // Set initial year this.filterYear = new Date().getFullYear(); // Set initial year
let yearInput = document.querySelector("#yearPicker"); let yearSelect = document.querySelector("#yearPicker");
let filterButton = document.querySelector("#btnFilterYear"); let filterButton = document.querySelector("#btnFilterYear");
if (!yearInput || !filterButton) { if (!yearSelect || !filterButton) {
console.error( console.error(
"Element #yearPicker or #btnFilterYear not found." "Element #yearPicker or #btnFilterYear not found."
); );
@@ -19,18 +19,15 @@ class BigData {
} }
// Set default value for input // Set default value for input
yearInput.value = this.filterYear; yearSelect.value = this.filterYear;
// Handle manual input (pressing Enter) yearSelect.addEventListener("change", () => {
yearInput.addEventListener("keypress", (event) => { this.updateYear(yearSelect.value);
if (event.key === "Enter") {
this.updateYear(yearInput.value);
}
}); });
// Handle button click // Handle button click
filterButton.addEventListener("click", () => { filterButton.addEventListener("click", () => {
this.updateYear(yearInput.value); this.updateYear(yearSelect.value);
}); });
console.log("init filter this year", this.filterYear); console.log("init filter this year", this.filterYear);

10
resources/views/dashboards/bigdata.blade.php
View File

@@ -57,8 +57,14 @@
</h2> </h2>
<div class="d-flex justify-content-end"> <div class="d-flex justify-content-end">
<input type="number" class="me-3" id="yearPicker" name="year"> <div class="d-flex">
<button class="btn btn-sm btn-primary" id="btnFilterYear">filter</button> <select class="me-2 form-select" id="yearPicker" name="year">
@for ($i = date('Y'); $i > date('Y') - 5; $i--)
<option value="{{ $i }}" {{ $i == date('Y') ? 'selected' : '' }}>{{ $i }}</option>
@endfor
</select>
<button class="btn btn-sm btn-primary" id="btnFilterYear">Filter</button>
</div>
</div> </div>
<div id="dashboard-fixed-container" style="width:1110px;height:770px;position:relative;margin:auto;"> <div id="dashboard-fixed-container" style="width:1110px;height:770px;position:relative;margin:auto;">
@component('components.circle', [ @component('components.circle', [