templates/backend/dashboard/_filter.html.twig line 1

Open in your IDE?
  2. {# <div class="pull-right">
  3.     <form action="{{ path('dashboard') }}" method="POST">
  4.         <div style="display: flex; align-items: center;">
  5.            
  6.             <div style="margin-left: 3px;">
  7.                 <input type="hidden" name="full" value="{{full}}">
  8.                 <select name="tipe_tahun" class="form-control" id="tipe">
  9.                     <option value="1" {{ tipe_tahun == 1 ? 'selected' : '' }}>Tahun Anggaran</option>
  10.                     <option value="2" {{ tipe_tahun == 2 ? 'selected' : '' }}>Tahun Kalender</option>
  11.                 </select>
  12.             </div>
  13.             <div style="margin-left: 3px;" class="tahun">
  14.                 <select class="form-control" name="tahun">
  15.                     {% set current_year = "now"|date("Y") %}
  16.                     {% for a in range(2024, current_year)|reverse %}
  17.                         <option value="{{ a }}" {{ tahun == a ? 'selected' : '' }}>{{ a }}</option>
  18.                     {% endfor %}
  19.                 </select>
  20.             </div>
  21.             <div style="margin-left: 3px;" class="periode">
  22.                 <input type="date" class="form-control" value="{{ tanggal_awal }}" name="tanggal_awal">
  23.             </div>
  24.             <div style="padding-top: 5px; {{ full == 1 ? 'color: white;' : '' }}" class="periode">Sampai</div>
  25.             <div style="margin-left: 3px;" class="periode">
  26.                 <input type="date" class="form-control" value="{{ tanggal_akhir }}" name="tanggal_akhir">
  27.             </div>
  28.             <div style="margin-left: 3px;">
  29.                 <button type="submit" name="submit" class="btn btn-success">
  30.                     <i class="fa fa-search"></i> <span>{{ 'filter'|trans }}</span>
  31.                 </button>
  32.             </div>
  33.         </div>
  34.     </form>
  35. </div> #}
  36. <div class="float-end"></div>
  37. <div class="col-lg-12 col-md-6 d-flex align-items-stretch">
  38.   <div class="card w-100 overflow-hidden rounded-4">
  39.     <div class="card-body position-relative p-4">
  40.       <div class="d-flex justify-content-between align-items-center mb-3">
  41.         <h5 class="card-title mb-0">Filter Data</h5>
  42.         <div class="form-check form-switch tahun">
  43.             {% if module == 'dashboard' %}
  44.             <input data-bs-toggle="tooltip"  data-bs-placement="top" data-bs-theme="dark"  title="Klik untuk membandingkan dengan tahun sebelumnya" class="form-check-input" type="checkbox" id="flexSwitchCheckChecked">
  45.             <label class="form-check-label" for="flexSwitchCheckChecked"></label>
  46.             {% endif %}
  47.           </div>
  48.       </div>
  50.       <form action="{{ path(module) }}" method="POST" class="row g-3">
  51.         <div class="col-md-3">
  52.           <label for="input21" class="form-label">Tipe Tahun</label>
  53.           <input type="hidden" name="full" value="{{ full }}">
  54.           <select name="tipe_tahun" class="form-select" id="tipe">
  55.             <option value="1" {{ tipe_tahun == 1 ? 'selected' : '' }}>Tahun Anggaran</option>
  56.             <option value="2" {{ tipe_tahun == 2 ? 'selected' : '' }}>Tahun Kalender</option>
  57.           </select>
  58.         </div>
  60.         <div class="col-md-3 tahun-anggaran">
  61.           <label for="input20" class="form-label">Tahun Anggaran</label>
  62.           <div class="position-relative">
  63.             <select class="form-control" id="tahun" name="tahun">
  64.               {% set current_year = "now"|date("Y") %}
  65.               {% for a in range(2024, current_year + 1)|reverse %}
  66.                 <option value="{{ a }}" {{ tahun == a ? 'selected' : '' }}>{{ a }}</option>
  67.               {% endfor %}
  68.             </select>
  69.           </div>
  70.         </div>
  72.         <div class="col-md-3 periode">
  73.           <label for="input22" class="form-label">Mulai</label>
  74.           <div class="position-relative">
  75.             <input type="date" class="form-control" id="input22" value="{{ tanggal_awal }}" name="tanggal_awal">
  76.           </div>
  77.         </div>
  79.         <div class="col-md-3 periode">
  80.           <label for="input23" class="form-label">Sampai</label>
  81.           <div class="position-relative">
  82.             <input type="date" class="form-control" id="input23" value="{{ tanggal_akhir }}" name="tanggal_akhir">
  83.           </div>
  84.         </div>
  86.         <div class="col-md-2 d-flex align-items-end">
  87.           <div class="d-md-flex d-grid align-items-center gap-3">
  88.             <button type="submit" class="btn btn-grd-primary px-4">Filter</button>
  89.           </div>
  90.         </div>
  91.       </form>
  92.       {# <div class="col-md-6 d-flex align-items-end"> #}
  93.         <div class="float-end">Last Update: {{last_update }}</div>
  94.       {# </div> #}
  95.     </div>
  96.      
  97.   </div>
  98. </div>
  101. <script>
  102. document.addEventListener('DOMContentLoaded', function () {
  103.     const tipeSelect = document.getElementById('tipe');
  104.     const tahunFilterDiv = document.querySelector('.tahun');
  105.     const tahunDiv = document.querySelector('.tahun-anggaran');
  106.     const periodeDivs = document.querySelectorAll('.periode');
  107.     const filter_komparasiDivs = document.querySelector('.filter_komparasi');
  109.     function toggleFields() {
  110.         if (tipeSelect.value === '1') { // Tahun Anggaran
  111.             tahunDiv.classList.remove('d-none');
  112.             tahunFilterDiv.classList.remove('d-none');
  113.             periodeDivs.forEach(div => div.classList.add('d-none'));
  114.             filter_komparasiDivs.classList.add('d-none');
  115.         } else { // Tahun Kalender
  116.             tahunDiv.classList.add('d-none');
  117.             tahunFilterDiv.classList.add('d-none');
  118.             periodeDivs.forEach(div => div.classList.remove('d-none'));
  119.             filter_komparasiDivs.classList.add('d-none');
  120.         }
  121.     }
  123.     tipeSelect.addEventListener('change', toggleFields);
  124.     toggleFields(); // Jalankan saat halaman pertama kali load
  125. });
  126. </script>