Add 2 files

index.html

@@ -4,10 +4,10 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Aplikasi Catatan Pembelajaran</title>
-  <!-- jsPDF + autoTable untuk PDF berkualitas tinggi -->
+  <!-- jsPDF + autoTable -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.8.2/jspdf.plugin.autotable.min.js"></script>
-  <!-- SheetJS untuk Excel -->
+  <!-- SheetJS -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
   <style>
     body { font-family: 'Segoe UI', Arial, sans-serif; margin: 0; background: #f0f2f5; }
@@ -29,7 +29,7 @@
     button.secondary:hover { background: #545b62; }
     button.danger { background: #dc3545; }
     button.danger:hover { background: #c82333; }
-    button.small { padding: 6px 12px; font-size: 14px; }
+    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; }
@@ -39,12 +39,10 @@
     tr:hover { background: #f8f9fa; }
     .text-wrap { white-space: pre-wrap; word-wrap: break-word; }
     .actions { margin: 20px 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
-    .edit-mode { background: #fff3cd; padding: 10px; border-radius: 8px; margin-bottom: 20px; }
+    .action-buttons { white-space: nowrap; }
     @media (max-width: 768px) {
       .filter-group { flex-direction: column; }
-      .tablink { font-size: 16px; padding: 12px; }
-      table { font-size: 14px; }
-      td, th { padding: 8px; }
+      .action-buttons button { display: block; width: 100%; margin: 5px 0; }
     }
   </style>
 </head>
@@ -60,27 +58,22 @@
 
       <!-- Tab Input -->
       <div id="Input" class="tabcontent active">
-        <h2 style="margin-top:0; color:#333;">Input Data Pembelajaran</h2>
-
-        <div id="editModeInfo" class="edit-mode" style="display:none;">
-          <strong>Sedang mengedit entri #<span id="editIndex"></span></strong>
-          <button class="secondary small" onclick="batalEdit()">Batal Edit</button>
-        </div>
+        <h2 style="margin-top:0; color:#333;">Input / Edit Data Pembelajaran</h2>
 
         <label>Jenis Pembelajaran</label>
-        <select id="jenisSelect"></select>
+        <select id="jenisSelect" onchange="updateIndicatorDropdown()"></select>
 
         <div id="manualJenisInput" class="form-group" style="display:none;">
           <label>Tambah Jenis Baru</label>
-          <input type="text" id="jenisManual" placeholder="Contoh: Pemrograman, Fisika, dll.">
+          <input type="text" id="jenisManual" placeholder="Contoh: Pemrograman, Fisika, Sejarah">
         </div>
 
         <label>Indicator (Sub Bab yang Dibahas)</label>
         <select id="indicatorSelect"></select>
 
         <div id="manualIndicatorInput" class="form-group" style="display:none;">
-          <label>Tambah Sub Bab Baru</label>
-          <input type="text" id="indicatorManual" placeholder="Contoh: Aljabar, HTML Dasar">
+          <label>Tambah Sub Bab Baru (untuk jenis ini)</label>
+          <input type="text" id="indicatorManual" placeholder="Contoh: Aljabar, HTML, Perang Dunia II">
         </div>
 
         <label>Hasil Pembelajaran</label>
@@ -91,8 +84,12 @@
 
         <div>
           <button onclick="simpanData()">Simpan Pembelajaran</button>
-          <button class="secondary" onclick="resetForm()">Reset Form</button>
+          <button class="secondary" onclick="resetForm()">Batal / Baru</button>
         </div>
+
+        <p id="editStatus" style="color:#007bff; font-style:italic; margin-top:15px; display:none;">
+          Sedang mengedit entri nomor: <span id="editIndex"></span>
+        </p>
       </div>
 
       <!-- Tab Daftar -->
@@ -102,11 +99,14 @@
         <div class="filter-group">
           <div>
             <label>Filter Jenis</label>
-            <select id="filterJenis"><option value="">Semua Jenis</option></select>
+            <select id="filterJenis" onchange="terapkanFilter()">
+              <option value="">Semua Jenis</option>
+            </select>
           </div>
           <div>
             <label>Filter Kata Kunci</label>
-            <input type="text" id="filterKata" placeholder="Cari di hasil atau kesimpulan...">
+            <input type="text" id="filterKata" list="suggestions" placeholder="Ketik untuk mencari..." oninput="terapkanFilter()">
+            <datalist id="suggestions"></datalist>
           </div>
           <div>
             <button onclick="terapkanFilter()">Terapkan Filter</button>
@@ -129,13 +129,13 @@
         <table id="tabelPembelajaran">
           <thead>
             <tr>
-              <th style="width:5%;">No</th>
-              <th style="width:15%;">Tanggal</th>
-              <th style="width:12%;">Jenis</th>
-              <th style="width:15%;">Indicator</th>
-              <th style="width:25%;">Hasil Pembelajaran</th>
-              <th style="width:23%;">Kesimpulan</th>
-              <th style="width:10%;">Aksi</th>
+              <th>No</th>
+              <th>Tanggal</th>
+              <th>Jenis</th>
+              <th>Indicator</th>
+              <th>Hasil Pembelajaran</th>
+              <th>Kesimpulan</th>
+              <th>Aksi</th>
             </tr>
           </thead>
           <tbody></tbody>
@@ -148,33 +148,86 @@
     const { jsPDF } = window.jspdf;
 
     let dataPembelajaran = JSON.parse(localStorage.getItem('pembelajaran')) || [];
-    let jenisList = [...new Set(dataPembelajaran.map(d => d.jenis))].sort();
-    if (jenisList.length === 0) jenisList = ["Matematika", "Bahasa", "Sains"];
-    let indicatorList = [...new Set(dataPembelajaran.map(d => d.indikator))].sort();
-    if (indicatorList.length === 0) indicatorList = ["Dasar", "Menengah", "Lanjutan"];
+    let subBabByJenis = {};
+    let editIndex = -1;
+
+    function buildSubBabMapping() {
+      subBabByJenis = {};
+      dataPembelajaran.forEach(entry => {
+        if (!subBabByJenis[entry.jenis]) {
+          subBabByJenis[entry.jenis] = new Set();
+        }
+        subBabByJenis[entry.jenis].add(entry.indikator);
+      });
+      Object.keys(subBabByJenis).forEach(jenis => {
+        subBabByJenis[jenis] = Array.from(subBabByJenis[jenis]).sort();
+      });
+    }
 
-    let editIndex = -1; // -1 = tambah baru, >=0 = edit entri
+    function getJenisList() {
+      return [...new Set(dataPembelajaran.map(d => d.jenis))].sort();
+    }
 
-    function updateDropdowns() {
+    function updateJenisDropdown() {
       const jenisSelect = document.getElementById('jenisSelect');
       const filterJenis = document.getElementById('filterJenis');
-      const indicatorSelect = document.getElementById('indicatorSelect');
+      const jenisList = getJenisList();
 
       jenisSelect.innerHTML = '';
       filterJenis.innerHTML = '<option value="">Semua Jenis</option>';
-      jenisList.forEach(j => {
+
+      const defaultJenis = jenisList.length === 0 ? ["Matematika", "Bahasa", "Sains"] : jenisList;
+      defaultJenis.forEach(j => {
         jenisSelect.add(new Option(j, j));
         filterJenis.add(new Option(j, j));
       });
       jenisSelect.add(new Option('--- Tambah Jenis Baru ---', 'new'));
+    }
+
+    function updateIndicatorDropdown() {
+      const jenis = document.getElementById('jenisSelect').value;
+      const indicatorSelect = document.getElementById('indicatorSelect');
+      const manualDiv = document.getElementById('manualIndicatorInput');
 
       indicatorSelect.innerHTML = '';
-      indicatorList.forEach(i => indicatorSelect.add(new Option(i, i)));
+      manualDiv.style.display = 'none';
+
+      if (jenis === 'new' || !jenis) {
+        indicatorSelect.innerHTML = '<option value="">-- Pilih jenis dulu --</option>';
+        return;
+      }
+
+      const subBabList = subBabByJenis[jenis] || [];
+      if (subBabList.length === 0) {
+        indicatorSelect.add(new Option('-- Belum ada sub bab --', ''));
+      } else {
+        subBabList.forEach(sb => indicatorSelect.add(new Option(sb, sb)));
+      }
       indicatorSelect.add(new Option('--- Tambah Sub Bab Baru ---', 'new'));
     }
 
+    function updateAutocompleteSuggestions() {
+      const datalist = document.getElementById('suggestions');
+      datalist.innerHTML = '';
+
+      const allWords = new Set();
+      dataPembelajaran.forEach(entry => {
+        [...entry.hasil.split(/\s+/), ...entry.kesimpulan.split(/\s+/)].forEach(word => {
+          word = word.replace(/[.,!?()"]/g, '').toLowerCase();
+          if (word.length >= 3) allWords.add(word);
+        });
+      });
+
+      Array.from(allWords).sort().slice(0, 50).forEach(word => {
+        const option = document.createElement('option');
+        option.value = word;
+        datalist.appendChild(option);
+      });
+    }
+
     document.getElementById('jenisSelect').addEventListener('change', function() {
       document.getElementById('manualJenisInput').style.display = this.value === 'new' ? 'block' : 'none';
+      updateIndicatorDropdown();
     });
 
     document.getElementById('indicatorSelect').addEventListener('change', function() {
@@ -186,20 +239,12 @@
       if (jenis === 'new') {
         jenis = document.getElementById('jenisManual').value.trim();
         if (!jenis) return alert('Masukkan nama jenis baru!');
-        if (!jenisList.includes(jenis)) {
-          jenisList.push(jenis);
-          jenisList.sort();
-        }
       }
 
       let indikator = document.getElementById('indicatorSelect').value;
       if (indikator === 'new') {
         indikator = document.getElementById('indicatorManual').value.trim();
         if (!indikator) return alert('Masukkan nama sub bab baru!');
-        if (!indicatorList.includes(indikator)) {
-          indicatorList.push(indikator);
-          indicatorList.sort();
-        }
       }
 
       const hasil = document.getElementById('hasil').value.trim();
@@ -219,94 +264,99 @@
 
       if (editIndex === -1) {
         dataPembelajaran.push(entry);
-        alert('Data pembelajaran berhasil disimpan!');
       } else {
         dataPembelajaran[editIndex] = entry;
-        alert('Data pembelajaran berhasil diperbarui!');
       }
 
       localStorage.setItem('pembelajaran', JSON.stringify(dataPembelajaran));
-      updateDropdowns();
+      buildSubBabMapping();
+      updateJenisDropdown();
+      updateIndicatorDropdown();
+      updateAutocompleteSuggestions();
       resetForm();
+      alert(editIndex === -1 ? 'Data berhasil disimpan!' : 'Data berhasil diperbarui!');
       if (document.getElementById('Daftar').classList.contains('active')) tampilkanData();
     }
 
     function resetForm() {
       editIndex = -1;
-      document.getElementById('editModeInfo').style.display = 'none';
-      document.getElementById('jenisSelect').value = jenisList[0] || '';
+      document.getElementById('editStatus').style.display = 'none';
+      updateJenisDropdown();
       document.getElementById('manualJenisInput').style.display = 'none';
       document.getElementById('jenisManual').value = '';
-      document.getElementById('indicatorSelect').value = indicatorList[0] || '';
+      updateIndicatorDropdown();
       document.getElementById('manualIndicatorInput').style.display = 'none';
       document.getElementById('indicatorManual').value = '';
       document.getElementById('hasil').value = '';
       document.getElementById('kesimpulan').value = '';
     }
 
-    function batalEdit() {
-      resetForm();
-    }
-
-    function editEntri(index) {
-      const entry = dataPembelajaran[index];
+    function editData(index) {
+      const data = dataPembelajaran[index];
       editIndex = index;
 
-      // Pindah ke tab Input
       openTab(null, 'Input');
+      document.querySelector('.tablink.active').classList.remove('active');
+      document.querySelector('[onclick*="Input"]').classList.add('active');
 
-      document.getElementById('editModeInfo').style.display = 'block';
-      document.getElementById('editIndex').textContent = index + 1;
-
-      // Set nilai form
       let jenisSelect = document.getElementById('jenisSelect');
-      if (jenisList.includes(entry.jenis)) {
-        jenisSelect.value = entry.jenis;
-        document.getElementById('manualJenisInput').style.display = 'none';
-      } else {
-        jenisSelect.value = 'new';
-        document.getElementById('manualJenisInput').style.display = 'block';
-        document.getElementById('jenisManual').value = entry.jenis;
+      if (!Array.from(jenisSelect.options).some(opt => opt.value === data.jenis)) {
+        jenisSelect.add(new Option(data.jenis, data.jenis));
       }
+      jenisSelect.value = data.jenis;
+      updateIndicatorDropdown();
 
       let indicatorSelect = document.getElementById('indicatorSelect');
-      if (indicatorList.includes(entry.indikator)) {
-        indicatorSelect.value = entry.indikator;
-        document.getElementById('manualIndicatorInput').style.display = 'none';
-      } else {
-        indicatorSelect.value = 'new';
-        document.getElementById('manualIndicatorInput').style.display = 'block';
-        document.getElementById('indicatorManual').value = entry.indikator;
+      if (!Array.from(indicatorSelect.options).some(opt => opt.value === data.indikator)) {
+        indicatorSelect.add(new Option(data.indikator, data.indikator), indicatorSelect.options[indicatorSelect.options.length - 1]);
       }
+      indicatorSelect.value = data.indikator;
 
-      document.getElementById('hasil').value = entry.hasil;
-      document.getElementById('kesimpulan').value = entry.kesimpulan;
+      document.getElementById('hasil').value = data.hasil;
+      document.getElementById('kesimpulan').value = data.kesimpulan;
+
+      document.getElementById('editStatus').style.display = 'block';
+      document.getElementById('editIndex').textContent = index + 1;
+      window.scrollTo(0, 0);
     }
 
-    function hapusEntri(index) {
-      if (confirm('Yakin ingin menghapus entri ini?')) {
+    function deleteData(index) {
+      if (confirm('Yakin ingin menghapus data ini?')) {
         dataPembelajaran.splice(index, 1);
         localStorage.setItem('pembelajaran', JSON.stringify(dataPembelajaran));
+        buildSubBabMapping();
+        updateJenisDropdown();
+        updateIndicatorDropdown();
+        updateAutocompleteSuggestions();
         tampilkanData();
         alert('Data berhasil dihapus!');
       }
     }
 
-    function tampilkanData(filterJenis = '', filterKata = '') {
+    function tampilkanData() {
+      const filterJenis = document.getElementById('filterJenis').value;
+      const filterKata = document.getElementById('filterKata').value.toLowerCase().trim();
+
       const tbody = document.querySelector('#tabelPembelajaran tbody');
       tbody.innerHTML = '';
 
       let filtered = dataPembelajaran;
-      if (filterJenis) filtered = filtered.filter(d => d.jenis === filterJenis);
+
+      // 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 (filterKata) {
-        const kata = filterKata.toLowerCase();
         filtered = filtered.filter(d =>
-          d.hasil.toLowerCase().includes(kata) || d.kesimpulan.toLowerCase().includes(kata)
+          d.hasil.toLowerCase().includes(filterKata) ||
+          d.kesimpulan.toLowerCase().includes(filterKata)
         );
       }
 
       filtered.forEach((d, i) => {
-        const actualIndex = dataPembelajaran.indexOf(d);
+        const originalIndex = dataPembelajaran.indexOf(d);
         const row = tbody.insertRow();
         row.insertCell(0).textContent = i + 1;
         row.insertCell(1).textContent = d.tanggal;
@@ -316,17 +366,16 @@
         row.insertCell(5).innerHTML = '<div class="text-wrap">' + d.kesimpulan.replace(/\n/g, '<br>') + '</div>';
 
         const cellAksi = row.insertCell(6);
+        cellAksi.className = 'action-buttons';
         cellAksi.innerHTML = `
-          <button class="secondary small" onclick="editEntri(${actualIndex})">Edit</button>
-          <button class="danger small" onclick="hapusEntri(${actualIndex})">Hapus</button>
+          <button class="small" onclick="editData(${originalIndex})" style="background:#28a745;">Edit</button>
+          <button class="small danger" onclick="deleteData(${originalIndex})">Hapus</button>
         `;
       });
     }
 
     function terapkanFilter() {
-      const filterJenis = document.getElementById('filterJenis').value;
-      const filterKata = document.getElementById('filterKata').value;
-      tampilkanData(filterJenis, filterKata);
+      tampilkanData();
     }
 
     function resetFilter() {
@@ -335,7 +384,6 @@
       tampilkanData();
     }
 
-    // Import dan Export tetap sama (dipertahankan dari versi sebelumnya)
     function importExcel() {
       const fileInput = document.getElementById('importFile');
       const file = fileInput.files[0];
@@ -354,25 +402,24 @@
             const entry = {
               tanggal: row['Tanggal'] || row['tanggal'] || new Date().toLocaleString('id-ID'),
               jenis: row['Jenis'] || row['jenis'] || '',
-              indikator: row['Indicator (Sub Bab)'] || row['Indikator'] || row['indicator'] || row['sub bab'] || '',
+              indikator: row['Indicator'] || row['Indikator'] || row['indicator'] || row['sub bab'] || '',
               hasil: row['Hasil Pembelajaran'] || row['Hasil'] || row['hasil'] || '',
               kesimpulan: row['Kesimpulan'] || row['kesimpulan'] || ''
             };
 
             if (entry.jenis && entry.indikator && entry.hasil && entry.kesimpulan) {
               dataPembelajaran.push(entry);
-              if (!jenisList.includes(entry.jenis)) jenisList.push(entry.jenis);
-              if (!indicatorList.includes(entry.indikator)) indicatorList.push(entry.indikator);
               imported++;
             }
           });
 
-          jenisList = [...new Set(jenisList)].sort();
-          indicatorList = [...new Set(indicatorList)].sort();
           localStorage.setItem('pembelajaran', JSON.stringify(dataPembelajaran));
-          updateDropdowns();
+          buildSubBabMapping();
+          updateJenisDropdown();
+          updateIndicatorDropdown();
+          updateAutocompleteSuggestions();
           tampilkanData();
-          alert(`Berhasil mengimport ${imported} data pembelajaran!`);
+          alert(`Berhasil mengimport ${imported} data!`);
           fileInput.value = '';
         } catch (err) {
           alert('Gagal membaca file: ' + err.message);
@@ -382,7 +429,7 @@
     }
 
     function exportExcel() {
-      if (dataPembelajaran.length === 0) return alert('Tidak ada data untuk diekspor!');
+      if (dataPembelajaran.length === 0) return alert('Tidak ada data!');
       const ws = XLSX.utils.json_to_sheet(dataPembelajaran);
       const wb = XLSX.utils.book_new();
       XLSX.utils.book_append_sheet(wb, ws, "Pembelajaran");
@@ -390,8 +437,7 @@
     }
 
     function exportPDF() {
-      if (dataPembelajaran.length === 0) return alert('Tidak ada data untuk diekspor!');
-
+      if (dataPembelajaran.length === 0) return alert('Tidak ada data!');
       const doc = new jsPDF('l', 'mm', 'a4');
       doc.setFontSize(18);
       doc.text("Laporan Catatan Pembelajaran", 14, 20);
@@ -399,10 +445,7 @@
       doc.text("Dicetak pada: " + new Date().toLocaleString('id-ID'), 14, 30);
 
       const tableData = dataPembelajaran.map((d, i) => [
-        i + 1,
-        d.tanggal,
-        d.jenis,
-        d.indikator,
+        i + 1, d.tanggal, d.jenis, d.indikator,
         d.hasil.length > 80 ? d.hasil.substring(0,80) + '...' : d.hasil,
         d.kesimpulan.length > 80 ? d.kesimpulan.substring(0,80) + '...' : d.kesimpulan
       ]);
@@ -413,15 +456,7 @@
         startY: 40,
         styles: { fontSize: 10, cellPadding: 3 },
         headStyles: { fillColor: [0, 123, 255] },
-        alternateRowStyles: { fillColor: [245, 248, 255] },
-        columnStyles: {
-          0: { cellWidth: 15 },
-          1: { cellWidth: 35 },
-          2: { cellWidth: 35 },
-          3: { cellWidth: 40 },
-          4: { cellWidth: 70 },
-          5: { cellWidth: 70 }
-        }
+        columnStyles: { 0: { cellWidth: 15 }, 1: { cellWidth: 35 }, 2: { cellWidth: 35 }, 3: { cellWidth: 40 }, 4: { cellWidth: 70 }, 5: { cellWidth: 70 } }
       });
 
       doc.save("Catatan_Pembelajaran_" + new Date().toISOString().slice(0,10) + ".pdf");
@@ -434,14 +469,17 @@
       if (evt) evt.currentTarget.classList.add("active");
 
       if (tabName === 'Daftar') {
-        updateDropdowns();
+        updateJenisDropdown();
+        updateAutocompleteSuggestions();
         tampilkanData();
       }
     }
 
     // Inisialisasi
-    updateDropdowns();
-    tampilkanData(); // jika langsung buka tab daftar
+    buildSubBabMapping();
+    updateJenisDropdown();
+    updateIndicatorDropdown();
+    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>
 </html>