WebGIS_Project/05/assets/js/app.js

// assets/js/app.js — WebGIS Pontianak v2.0 Global Utilities

// ── TOAST SYSTEM ──────────────────────────────────────────
const Toast = (() => {
  let container = null;

  function getContainer() {
    if (!container) {
      container = document.createElement('div');
      container.className = 'toast-container';
      document.body.appendChild(container);
    }
    return container;
  }

  function show(message, type = 'info', duration = 3500) {
    const t = document.createElement('div');
    const icons = { success: '✅', error: '❌', info: 'ℹ️', warning: '⚠️' };
    t.className = `toast toast-${type}`;
    t.textContent = `${icons[type] || ''} ${message}`;
    const c = getContainer();
    c.appendChild(t);
    setTimeout(() => {
      t.style.opacity = '0';
      t.style.transform = 'translateY(12px)';
      t.style.transition = 'all 0.3s';
      setTimeout(() => t.remove(), 300);
    }, duration);
    return t;
  }

  return { show, success: m => show(m,'success'), error: m => show(m,'error'), info: m => show(m,'info'), warning: m => show(m,'warning') };
})();

// ── API HELPER ────────────────────────────────────────────
const API = {
  async get(url) {
    const res = await fetch(url, { headers: { 'Accept': 'application/json' } });
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return res.json();
  },
  async post(url, data, isFormData = false) {
    const opts = { method: 'POST' };
    if (isFormData) { opts.body = data; }
    else { opts.headers = { 'Content-Type': 'application/json' }; opts.body = JSON.stringify(data); }
    const res = await fetch(url, opts);
    return res.json();
  },
  async put(url, data) {
    const res = await fetch(url, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) });
    return res.json();
  },
  async delete(url) {
    const res = await fetch(url, { method: 'DELETE' });
    return res.json();
  }
};

// ── DATE & TIME HELPERS ───────────────────────────────────
const DateTime = {
  format(dateStr, options = {}) {
    if (!dateStr) return '—';
    const defaults = { day: 'numeric', month: 'short', year: 'numeric' };
    return new Date(dateStr).toLocaleDateString('id-ID', { ...defaults, ...options });
  },
  formatFull(dateStr) {
    if (!dateStr) return '—';
    return new Date(dateStr).toLocaleString('id-ID', {
      day: 'numeric', month: 'short', year: 'numeric',
      hour: '2-digit', minute: '2-digit'
    });
  },
  ago(dateStr) {
    if (!dateStr) return '—';
    const diff = Date.now() - new Date(dateStr).getTime();
    const m = Math.floor(diff / 60000);
    if (m < 1)  return 'Baru saja';
    if (m < 60) return `${m} menit lalu`;
    const h = Math.floor(m / 60);
    if (h < 24) return `${h} jam lalu`;
    const d = Math.floor(h / 24);
    if (d < 7)  return `${d} hari lalu`;
    return DateTime.format(dateStr);
  },
  age(dob) {
    if (!dob) return 0;
    return Math.floor((Date.now() - new Date(dob).getTime()) / (365.25 * 24 * 3600 * 1000));
  },
  today() {
    return new Date().toISOString().split('T')[0];
  }
};

// ── NUMBER HELPERS ────────────────────────────────────────
const Num = {
  currency(val, prefix = 'Rp') {
    if (!val && val !== 0) return '—';
    const n = parseFloat(val);
    if (n >= 1e9) return `${prefix}${(n/1e9).toFixed(1)}M`;
    if (n >= 1e6) return `${prefix}${(n/1e6).toFixed(1)}jt`;
    if (n >= 1e3) return `${prefix}${(n/1e3).toFixed(0)}rb`;
    return `${prefix}${n.toLocaleString('id-ID')}`;
  },
  format(val) {
    if (!val && val !== 0) return '—';
    return parseFloat(val).toLocaleString('id-ID');
  },
  pct(val, total) {
    if (!total) return '0%';
    return `${((val / total) * 100).toFixed(1)}%`;
  }
};

// ── BADGE HELPERS ─────────────────────────────────────────
const Badge = {
  statusEkonomi(se) {
    const map = {
      sangat_miskin: { cls: 'badge-red',    label: 'Sangat Miskin' },
      miskin:        { cls: 'badge-amber',   label: 'Miskin' },
      rentan:        { cls: 'badge-purple',  label: 'Rentan' },
      mampu:         { cls: 'badge-green',   label: 'Mampu' },
    };
    const v = map[se] || { cls: 'badge-gray', label: se };
    return `<span class="badge ${v.cls}">${v.label}</span>`;
  },
  statusVerif(s) {
    const map = {
      pending:   { cls: 'badge-amber', label: '⏳ Pending' },
      diproses:  { cls: 'badge-blue',  label: '🔄 Diproses' },
      disetujui: { cls: 'badge-green', label: '✅ Disetujui' },
      ditolak:   { cls: 'badge-red',   label: '❌ Ditolak' },
    };
    const v = map[s] || { cls: 'badge-gray', label: s };
    return `<span class="badge ${v.cls}">${v.label}</span>`;
  },
  statusBantuan(s) {
    const map = {
      disalurkan: { cls: 'badge-green', label: '✅ Disalurkan' },
      ditunda:    { cls: 'badge-amber', label: '⏳ Ditunda' },
      dibatalkan: { cls: 'badge-red',   label: '❌ Dibatalkan' },
    };
    const v = map[s] || { cls: 'badge-gray', label: s };
    return `<span class="badge ${v.cls}">${v.label}</span>`;
  },
  jenisLaporan(j) {
    const map = {
      kelahiran:     '🍼 Kelahiran',
      kematian:      '⚰️ Kematian',
      pindah_masuk:  '📦 Pindah Masuk',
      pindah_keluar: '🚚 Pindah Keluar',
      pernikahan:    '💒 Pernikahan',
      perceraian:    '📋 Perceraian',
      perubahan_data:'📝 Perubahan Data',
      lainnya:       '📌 Lainnya',
    };
    return map[j] || j;
  },
  jenisIbadah(j) {
    const map = { Masjid:'🕌', Gereja:'⛪', Vihara:'🏯', Pura:'🛕', Klenteng:'⛩️' };
    return `${map[j] || '🏢'} ${j}`;
  }
};

// ── MAP ICON FACTORY ──────────────────────────────────────
const MapIcon = {
  make(color, emoji, size = 30) {
    return L.divIcon({
      className: '',
      html: `<div style="width:${size}px;height:${size}px;background:${color};border-radius:50%;
             display:flex;align-items:center;justify-content:center;font-size:${size*0.5}px;
             box-shadow:0 3px 10px rgba(0,0,0,0.5);border:2px solid rgba(255,255,255,0.25)">${emoji}</div>`,
      iconSize: [size, size],
      iconAnchor: [size/2, size/2],
      popupAnchor: [0, -size/2]
    });
  },
  forIbadah(jenis) {
    const map = {
      masjid:   ['#3b82f6','🕌'],
      gereja:   ['#8b5cf6','⛪'],
      vihara:   ['#f59e0b','🏯'],
      pura:     ['#10b981','🛕'],
      klenteng: ['#06b6d4','⛩️'],
    };
    const [color, emoji] = map[(jenis||'').toLowerCase()] || ['#64748b','🏢'];
    return this.make(color, emoji);
  },
  forPenduduk(statusEkonomi) {
    const map = {
      sangat_miskin: ['#ef4444','⚠️'],
      miskin:        ['#f97316','🔸'],
      rentan:        ['#eab308','🔶'],
      mampu:         ['#22c55e','🔷'],
    };
    const [color, emoji] = map[statusEkonomi] || ['#64748b','📍'];
    return this.make(color, emoji);
  }
};

// ── MODAL MANAGER ─────────────────────────────────────────
const Modal = {
  open(id)  { document.getElementById(id)?.classList.remove('hidden'); },
  close(id) { document.getElementById(id)?.classList.add('hidden'); },
  toggle(id){ document.getElementById(id)?.classList.toggle('hidden'); },
};

// ── LOADING BUTTON ────────────────────────────────────────
function setLoading(btn, loading, label = '') {
  if (loading) {
    btn._origLabel = btn.innerHTML;
    btn.disabled = true;
    btn.innerHTML = `<div class="spinner"></div> ${label || 'Memproses...'}`;
  } else {
    btn.disabled = false;
    btn.innerHTML = btn._origLabel || label;
  }
}

// ── FORM SERIALIZER ───────────────────────────────────────
function serializeForm(formId) {
  const form = document.getElementById(formId);
  if (!form) return {};
  const data = {};
  form.querySelectorAll('input, select, textarea').forEach(el => {
    if (el.name && !el.disabled) {
      if (el.type === 'checkbox') data[el.name] = el.checked;
      else if (el.type === 'radio')  { if (el.checked) data[el.name] = el.value; }
      else data[el.name] = el.value;
    }
  });
  return data;
}

// ── DEBOUNCE ──────────────────────────────────────────────
function debounce(fn, delay = 300) {
  let t;
  return (...args) => { clearTimeout(t); t = setTimeout(() => fn(...args), delay); };
}

// ── CSV EXPORT ────────────────────────────────────────────
function exportToCSV(data, filename = 'export.csv') {
  if (!data.length) { Toast.warning('Tidak ada data untuk diekspor'); return; }
  const headers = Object.keys(data[0]);
  const rows = [headers, ...data.map(r => headers.map(h => `"${String(r[h] ?? '').replace(/"/g, '""')}"` ))];
  const csv = rows.map(r => r.join(',')).join('\n');
  const a = document.createElement('a');
  a.href = 'data:text/csv;charset=utf-8,\uFEFF' + encodeURIComponent(csv);
  a.download = filename;
  a.click();
}

// ── CONFIRM DIALOG ────────────────────────────────────────
function confirmAction(message, onConfirm) {
  // Buat modal konfirmasi sederhana
  const id = 'confirm-' + Date.now();
  const el = document.createElement('div');
  el.className = 'modal-overlay animate-fade-in';
  el.id = id;
  el.innerHTML = `
    <div class="modal" style="max-width:380px">
      <div class="modal-header">
        <div class="modal-title">⚠️ Konfirmasi</div>
      </div>
      <div class="modal-body">
        <p style="font-size:14px;color:var(--text);line-height:1.6">${message}</p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-ghost" onclick="document.getElementById('${id}').remove()">Batal</button>
        <button class="btn btn-danger" id="${id}-ok">Ya, Lanjutkan</button>
      </div>
    </div>`;
  document.body.appendChild(el);
  document.getElementById(`${id}-ok`).onclick = () => { el.remove(); onConfirm(); };
}

// ── HAVERSINE (client-side) ───────────────────────────────
function haversine(lat1, lon1, lat2, lon2) {
  const R = 6371000;
  const phi1 = lat1 * Math.PI / 180, phi2 = lat2 * Math.PI / 180;
  const dphi = (lat2 - lat1) * Math.PI / 180;
  const dl   = (lon2 - lon1) * Math.PI / 180;
  const a = Math.sin(dphi/2)**2 + Math.cos(phi1)*Math.cos(phi2)*Math.sin(dl/2)**2;
  return R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
}

// ── GEOLOCATION ───────────────────────────────────────────
function getCurrentLocation() {
  return new Promise((resolve, reject) => {
    if (!navigator.geolocation) { reject(new Error('Geolocation tidak didukung')); return; }
    navigator.geolocation.getCurrentPosition(
      pos => resolve({ lat: pos.coords.latitude, lng: pos.coords.longitude }),
      err => reject(err),
      { enableHighAccuracy: true, timeout: 8000 }
    );
  });
}

// ── NOTIFIKASI POLLING ────────────────────────────────────
const NotifPoller = {
  interval: null,
  callbacks: [],

  start(intervalMs = 30000) {
    this.poll();
    this.interval = setInterval(() => this.poll(), intervalMs);
  },

  stop() {
    if (this.interval) clearInterval(this.interval);
  },

  async poll() {
    try {
      const d = await API.get('../api/notifikasi.php?unread=1');
      this.callbacks.forEach(cb => cb(d));
    } catch (e) { /* silent */ }
  },

  onChange(cb) { this.callbacks.push(cb); }
};

// ── STORAGE HELPER (sessionStorage) ──────────────────────
const Store = {
  set(key, val) { try { sessionStorage.setItem(key, JSON.stringify(val)); } catch(e){} },
  get(key)      { try { return JSON.parse(sessionStorage.getItem(key)); } catch(e){ return null; } },
  remove(key)   { sessionStorage.removeItem(key); },
};

// ── INIT ON DOM READY ─────────────────────────────────────
document.addEventListener('DOMContentLoaded', () => {
  // Close modals on overlay click
  document.querySelectorAll('.modal-overlay').forEach(overlay => {
    overlay.addEventListener('click', e => {
      if (e.target === overlay) overlay.classList.add('hidden');
    });
  });

  // Auto-focus first input in opened modals
  document.querySelectorAll('.modal-overlay .modal-close').forEach(btn => {
    btn.addEventListener('click', () => {
      btn.closest('.modal-overlay')?.classList.add('hidden');
    });
  });
});