Fix save actions feedback in project 05

05/index.php

@@ -1103,8 +1103,8 @@ tr:hover td { background: var(--surface2); }
       </div>
     </div>
     <div class="modal-footer">
-      <button class="btn-cancel" onclick="closeModal('penduduk')">Batal</button>
+      <button type="button" class="btn-cancel" onclick="closeModal('penduduk')">Batal</button>
-      <button class="btn-primary" onclick="simpanPenduduk()">Simpan</button>
+      <button type="button" class="btn-primary" onclick="simpanPenduduk(this)">Simpan</button>
     </div>
   </div>
 </div>
@@ -1129,8 +1129,8 @@ tr:hover td { background: var(--surface2); }
       </div>
     </div>
     <div class="modal-footer">
-      <button class="btn-cancel" onclick="closeModal('ibadah')">Batal</button>
+      <button type="button" class="btn-cancel" onclick="closeModal('ibadah')">Batal</button>
-      <button class="btn-primary" onclick="simpanIbadah()" style="background:var(--ibadah)">Simpan</button>
+      <button type="button" class="btn-primary" onclick="simpanIbadah(this)" style="background:var(--ibadah)">Simpan</button>
     </div>
   </div>
 </div>
@@ -1157,8 +1157,8 @@ tr:hover td { background: var(--surface2); }
       </div>
     </div>
     <div class="modal-footer">
-      <button class="btn-cancel" onclick="closeModal('laporan')">Batal</button>
+      <button type="button" class="btn-cancel" onclick="closeModal('laporan')">Batal</button>
-      <button class="btn-primary" onclick="simpanLaporan()" style="background:var(--laporan)">Kirim Laporan</button>
+      <button type="button" class="btn-primary" onclick="simpanLaporan(this)" style="background:var(--laporan)">Kirim Laporan</button>
     </div>
   </div>
 </div>
@@ -1184,8 +1184,8 @@ tr:hover td { background: var(--surface2); }
       </div>
     </div>
     <div class="modal-footer">
-      <button class="btn-cancel" onclick="closeModal('keluarga')">Batal</button>
+      <button type="button" class="btn-cancel" onclick="closeModal('keluarga')">Batal</button>
-      <button class="btn-primary" onclick="simpanKeluarga()">Simpan KK</button>
+      <button type="button" class="btn-primary" onclick="simpanKeluarga(this)">Simpan KK</button>
     </div>
   </div>
 </div>
@@ -1948,8 +1948,37 @@ function showLaporanDetail(id) {
     .catch(() => showToast('Gagal memuat detail laporan','error'));
 }
 
+function setSavingButton(btn, saving, text='Simpan') {
+  if (!btn) return;
+  btn.disabled = saving;
+  btn.style.opacity = saving ? '.65' : '';
+  btn.style.cursor = saving ? 'wait' : '';
+  btn.textContent = saving ? 'Menyimpan...' : text;
+}
+
+function postFormJson(url, fd) {
+  return fetch(url, {
+    method: 'POST',
+    body: fd,
+    credentials: 'same-origin',
+    cache: 'no-store'
+  }).then(async response => {
+    const text = await response.text();
+    let data;
+    try {
+      data = JSON.parse(text);
+    } catch (e) {
+      throw new Error(text.trim() || `HTTP ${response.status}`);
+    }
+    if (!response.ok) {
+      throw new Error(data.msg || data.error || `HTTP ${response.status}`);
+    }
+    return data;
+  });
+}
+
 // ===== SIMPAN PENDUDUK =====
-function simpanPenduduk() {
+function simpanPenduduk(btn) {
   const nik=document.getElementById('p-nik').value.trim();
   const nama=document.getElementById('p-nama').value.trim();
   const lat=document.getElementById('p-lat').value;
@@ -1970,7 +1999,8 @@ function simpanPenduduk() {
   fd.append('pendidikan_terakhir',document.getElementById('p-pendidikan').value);
   fd.append('status_pendidikan',document.getElementById('p-statuspend').value);
   fd.append('lat',lat); fd.append('lng',lng);
-  fetch('simpan.php',{method:'POST',body:fd}).then(r=>r.json()).then(res=>{
+  setSavingButton(btn, true);
+  postFormJson('simpan.php', fd).then(res=>{
     if (res.status==='success') {
       showToast('Penduduk berhasil disimpan ✓','success');
       closeModal('penduduk');
@@ -1978,11 +2008,14 @@ function simpanPenduduk() {
       tambahLog('tambah_penduduk','penduduk',res.id,'Tambah penduduk: '+nama);
     }
     else showToast('Error: '+(res.msg||'Gagal'),'error');
-  });
+  }).catch(err => {
+    showToast('Gagal simpan: '+err.message,'error');
+    console.error('Simpan penduduk gagal:', err);
+  }).finally(() => setSavingButton(btn, false, 'Simpan'));
 }
 
 // ===== SIMPAN IBADAH =====
-function simpanIbadah() {
+function simpanIbadah(btn) {
   const nama=document.getElementById('i-nama').value.trim();
   const lat=document.getElementById('i-lat').value;
   const lng=document.getElementById('i-lng').value;
@@ -1995,7 +2028,8 @@ function simpanIbadah() {
   fd.append('alamat',document.getElementById('i-alamat').value);
   fd.append('radius',document.getElementById('i-radius').value);
   fd.append('lat',lat); fd.append('lng',lng);
-  fetch('simpan.php',{method:'POST',body:fd}).then(r=>r.json()).then(res=>{
+  setSavingButton(btn, true);
+  postFormJson('simpan.php', fd).then(res=>{
     if (res.status==='success') {
       showToast('Rumah Ibadah ditambahkan ✓','success');
       closeModal('ibadah');
@@ -2003,11 +2037,14 @@ function simpanIbadah() {
       tambahLog('tambah_ibadah','rumah_ibadah',res.id,'Tambah rumah ibadah: '+document.getElementById('i-nama').value);
     }
     else showToast('Error: '+(res.msg||'Gagal'),'error');
-  });
+  }).catch(err => {
+    showToast('Gagal simpan: '+err.message,'error');
+    console.error('Simpan ibadah gagal:', err);
+  }).finally(() => setSavingButton(btn, false, 'Simpan'));
 }
 
 // ===== SIMPAN LAPORAN =====
-function simpanLaporan() {
+function simpanLaporan(btn) {
   const desk=document.getElementById('l-desk').value.trim();
   const lat=document.getElementById('l-lat').value;
   if (!desk) return showToast('Deskripsi wajib diisi','error');
@@ -2018,7 +2055,8 @@ function simpanLaporan() {
   fd.append('deskripsi',desk);
   fd.append('urgensi',document.getElementById('l-urg').value);
   fd.append('lat',lat); fd.append('lng',document.getElementById('l-lng').value);
-  fetch('simpan.php',{method:'POST',body:fd}).then(r=>r.json()).then(res=>{
+  setSavingButton(btn, true, 'Kirim Laporan');
+  postFormJson('simpan.php', fd).then(res=>{
     if (res.status==='success') {
       showToast('Laporan berhasil dikirim ✓','success');
       closeModal('laporan');
@@ -2027,11 +2065,14 @@ function simpanLaporan() {
       tambahLog('buat_laporan','laporan',res.id,'Buat laporan: '+document.getElementById('l-desk').value.slice(0,60));
     }
     else showToast('Gagal mengirim laporan','error');
-  });
+  }).catch(err => {
+    showToast('Gagal kirim: '+err.message,'error');
+    console.error('Simpan laporan gagal:', err);
+  }).finally(() => setSavingButton(btn, false, 'Kirim Laporan'));
 }
 
 // ===== SIMPAN KELUARGA =====
-function simpanKeluarga() {
+function simpanKeluarga(btn) {
   const nokk   = document.getElementById('kk-nokk').value.trim();
   const alamat  = document.getElementById('kk-alamat').value.trim();
   const lat     = document.getElementById('kk-lat').value;
@@ -2046,7 +2087,8 @@ function simpanKeluarga() {
   fd.append('kecamatan', document.getElementById('kk-kec').value);
   fd.append('lat', lat);
   fd.append('lng', lng);
-  fetch('simpan.php', {method:'POST', body:fd}).then(r=>r.json()).then(res=>{
+  setSavingButton(btn, true, 'Simpan KK');
+  postFormJson('simpan.php', fd).then(res=>{
     if (res.status==='success') {
       showToast('Kartu Keluarga berhasil disimpan ✓','success');
       closeModal('keluarga');
@@ -2055,7 +2097,10 @@ function simpanKeluarga() {
     } else {
       showToast('Error: '+(res.msg||'Gagal simpan KK'),'error');
     }
-  });
+  }).catch(err => {
+    showToast('Gagal simpan KK: '+err.message,'error');
+    console.error('Simpan KK gagal:', err);
+  }).finally(() => setSavingButton(btn, false, 'Simpan KK'));
 }
 
 // ===== HAPUS =====