Add 2 files

index.html

@@ -32,7 +32,7 @@
     button.small { padding: 6px 12px; font-size: 13px; }
     .form-group { margin-bottom: 10px; }
     .filter-group { display: flex; gap: 15px; flex-wrap: wrap; align-items: end; margin-bottom: 20px; }
-    .filter-group > div { flex: 1; min-width: 200px; }
+    .filter-group > div { flex: 1; min-width: 180px; }
     table { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 15px; }
     th { background: #007bff; color: white; padding: 14px; text-align: left; }
     td { padding: 12px; border-bottom: 1px solid #dee2e6; vertical-align: top; }
@@ -99,16 +99,22 @@
         <div class="filter-group">
           <div>
             <label>Filter Jenis</label>
-            <select id="filterJenis" onchange="terapkanFilter()">
+            <select id="filterJenis" onchange="updateFilterIndicator(); terapkanFilter()">
               <option value="">Semua Jenis</option>
             </select>
           </div>
+          <div>
+            <label>Filter Indicator (Sub Bab)</label>
+            <select id="filterIndicator" onchange="terapkanFilter()">
+              <option value="">Semua Sub Bab</option>
+            </select>
+          </div>
           <div>
             <label>Filter Kata Kunci</label>
             <input type="text" id="filterKata" list="suggestions" placeholder="Ketik untuk mencari..." oninput="terapkanFilter()">
             <datalist id="suggestions"></datalist>
           </div>
-          <div>
+          <div style="align-self: end;">
             <button onclick="terapkanFilter()">Terapkan Filter</button>
             <button class="secondary" onclick="resetFilter()">Reset Filter</button>
           </div>
@@ -206,6 +212,24 @@
       indicatorSelect.add(new Option('--- Tambah Sub Bab Baru ---', 'new'));
     }
 
+    // Update dropdown filter indicator berdasarkan filter jenis yang dipilih
+    function updateFilterIndicator() {
+      const selectedJenis = document.getElementById('filterJenis').value;
+      const filterIndicator = document.getElementById('filterIndicator');
+
+      filterIndicator.innerHTML = '<option value="">Semua Sub Bab</option>';
+
+      if (!selectedJenis) {
+        // Jika tidak ada filter jenis, tampilkan semua sub bab unik
+        const allIndicators = [...new Set(dataPembelajaran.map(d => d.indikator))].sort();
+        allIndicators.forEach(ind => filterIndicator.add(new Option(ind, ind)));
+      } else {
+        // Hanya tampilkan sub bab dari jenis yang difilter
+        const subBabList = subBabByJenis[selectedJenis] || [];
+        subBabList.forEach(ind => filterIndicator.add(new Option(ind, ind)));
+      }
+    }
+
     function updateAutocompleteSuggestions() {
       const datalist = document.getElementById('suggestions');
       datalist.innerHTML = '';
@@ -272,6 +296,7 @@
       buildSubBabMapping();
       updateJenisDropdown();
       updateIndicatorDropdown();
+      updateFilterIndicator();
       updateAutocompleteSuggestions();
       resetForm();
       alert(editIndex === -1 ? 'Data berhasil disimpan!' : 'Data berhasil diperbarui!');
@@ -327,6 +352,7 @@
         buildSubBabMapping();
         updateJenisDropdown();
         updateIndicatorDropdown();
+        updateFilterIndicator();
         updateAutocompleteSuggestions();
         tampilkanData();
         alert('Data berhasil dihapus!');
@@ -335,6 +361,7 @@
 
     function tampilkanData() {
       const filterJenis = document.getElementById('filterJenis').value;
+      const filterIndicatorVal = document.getElementById('filterIndicator').value;
       const filterKata = document.getElementById('filterKata').value.toLowerCase().trim();
 
       const tbody = document.querySelector('#tabelPembelajaran tbody');
@@ -342,12 +369,14 @@
 
       let filtered = dataPembelajaran;
 
-      // Terapkan filter jenis terlebih dahulu
       if (filterJenis) {
         filtered = filtered.filter(d => d.jenis === filterJenis);
       }
 
-      // Kemudian filter kata kunci pada hasil yang sudah difilter jenis
+      if (filterIndicatorVal) {
+        filtered = filtered.filter(d => d.indikator === filterIndicatorVal);
+      }
+
       if (filterKata) {
         filtered = filtered.filter(d =>
           d.hasil.toLowerCase().includes(filterKata) ||
@@ -380,10 +409,12 @@
 
     function resetFilter() {
       document.getElementById('filterJenis').value = '';
+      document.getElementById('filterIndicator').innerHTML = '<option value="">Semua Sub Bab</option>';
       document.getElementById('filterKata').value = '';
       tampilkanData();
     }
 
+    // Import, Export, dan fungsi lainnya tetap sama seperti sebelumnya
     function importExcel() {
       const fileInput = document.getElementById('importFile');
       const file = fileInput.files[0];
@@ -417,6 +448,7 @@
           buildSubBabMapping();
           updateJenisDropdown();
           updateIndicatorDropdown();
+          updateFilterIndicator();
           updateAutocompleteSuggestions();
           tampilkanData();
           alert(`Berhasil mengimport ${imported} data!`);
@@ -470,6 +502,7 @@
 
       if (tabName === 'Daftar') {
         updateJenisDropdown();
+        updateFilterIndicator();
         updateAutocompleteSuggestions();
         tampilkanData();
       }
@@ -479,6 +512,7 @@
     buildSubBabMapping();
     updateJenisDropdown();
     updateIndicatorDropdown();
+    updateFilterIndicator();
     updateAutocompleteSuggestions();
   </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-qwensite.hf.space/logo.svg" alt="qwensite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-qwensite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >QwenSite</a> - 🧬 <a href="https://enzostvs-qwensite.hf.space?remix=alterzick/notepad-v1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>