feat: add auth navbar and role-aware UI to all views
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
GuavaPopper
+142
-30
@@ -3,7 +3,8 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Data Tabular - WebGIS Miskin & Ibadah</title>
|
||||
<meta name="csrf-token" content="{{ csrf_token() }}">
|
||||
<title>Data Tabular - WebGIS Pemetaan Kemiskinan</title>
|
||||
|
||||
<!-- DaisyUI + Tailwind -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/daisyui@4/dist/full.min.css" rel="stylesheet">
|
||||
@@ -28,7 +29,7 @@
|
||||
<div class="flex-1">
|
||||
<a href="{{ url('/') }}" class="btn btn-ghost text-lg font-bold gap-2 text-primary">
|
||||
<i class="fa-solid fa-house-chimney-crack"></i>
|
||||
WebGIS Miskin & Ibadah
|
||||
WebGIS Pemetaan Kemiskinan
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex-none">
|
||||
@@ -36,6 +37,32 @@
|
||||
<li><a href="{{ url('/map') }}" class="font-medium"><i class="fa-solid fa-map"></i> Peta</a></li>
|
||||
<li><a href="{{ url('/data') }}" class="font-semibold bg-primary/10 text-primary rounded-lg"><i class="fa-solid fa-table-list"></i> Data Tabular</a></li>
|
||||
</ul>
|
||||
<!-- User dropdown -->
|
||||
<div class="dropdown dropdown-end ml-2">
|
||||
<div tabindex="0" role="button" class="btn btn-ghost gap-2">
|
||||
<div class="avatar placeholder">
|
||||
<div class="bg-primary text-primary-content rounded-full w-8">
|
||||
<span class="text-xs font-bold">{{ substr(auth()->user()->name, 0, 1) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="hidden sm:inline text-sm font-semibold">{{ auth()->user()->name }}</span>
|
||||
<i class="fa-solid fa-chevron-down text-xs opacity-50"></i>
|
||||
</div>
|
||||
<ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-50 w-52 p-2 shadow-lg border border-base-200 mt-2">
|
||||
<li class="menu-title">
|
||||
<span class="text-xs text-base-content/50 capitalize">{{ str_replace('_', ' ', auth()->user()->getRoleNames()->first() ?? 'user') }}</span>
|
||||
</li>
|
||||
<li>
|
||||
<form method="POST" action="{{ route('logout') }}">
|
||||
@csrf
|
||||
<button type="submit" class="text-error w-full text-left flex items-center gap-2">
|
||||
<i class="fa-solid fa-right-from-bracket"></i>
|
||||
Keluar
|
||||
</button>
|
||||
</form>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -51,8 +78,19 @@
|
||||
</h1>
|
||||
<p class="text-base-content/50 mt-1">Daftar rumah ibadah dan keluarga miskin dalam matriks tabular.</p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<a href="{{ url('/map') }}" class="btn btn-primary shadow-lg"><i class="fa-solid fa-plus"></i> Tambah Data di Peta</a>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<div class="join">
|
||||
<input class="input input-bordered join-item input-md w-64" placeholder="Cari data..." id="searchInput" onkeyup="filterData()"/>
|
||||
<button class="btn btn-md join-item btn-ghost border-base-300"><i class="fa-solid fa-search"></i></button>
|
||||
</div>
|
||||
@if(in_array(auth()->user()->getRoleNames()->first(), ['administrator', 'petugas_pendataan', 'pengurus_ibadah', 'pemangku_kebijakan']))
|
||||
<button onclick="exportCSV()" class="btn btn-md btn-outline border-base-300 gap-2">
|
||||
<i class="fa-solid fa-file-csv"></i> Ekspor CSV
|
||||
</button>
|
||||
@endif
|
||||
<a href="{{ url('/map') }}" class="btn btn-md btn-primary shadow-lg gap-2">
|
||||
<i class="fa-solid fa-plus"></i> Tambah Data
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -84,9 +122,10 @@
|
||||
<thead>
|
||||
<tr class="text-xs font-bold uppercase opacity-50">
|
||||
<th>#</th>
|
||||
<th>Nama Rumah Ibadah</th>
|
||||
<th>Alamat</th>
|
||||
<th>Radius Analisis</th>
|
||||
<th>Nama</th>
|
||||
<th>Jenis</th>
|
||||
<th>Pengurus/Telp</th>
|
||||
<th>Radius</th>
|
||||
<th>Koordinat</th>
|
||||
<th class="text-center">Aksi</th>
|
||||
</tr>
|
||||
@@ -102,10 +141,11 @@
|
||||
<table class="table table-zebra w-full" id="tableMiskin">
|
||||
<thead>
|
||||
<tr class="text-xs font-bold uppercase opacity-50">
|
||||
<th>ID Rumah</th>
|
||||
<th>Alamat</th>
|
||||
<th>Jumlah KK</th>
|
||||
<th>Jumlah Jiwa</th>
|
||||
<th>ID</th>
|
||||
<th>Nama KK</th>
|
||||
<th>KK/Jiwa</th>
|
||||
<th>Pekerjaan</th>
|
||||
<th>Kondisi</th>
|
||||
<th>Koordinat</th>
|
||||
<th class="text-center">Aksi</th>
|
||||
</tr>
|
||||
@@ -134,7 +174,14 @@
|
||||
<div class="toast toast-end toast-bottom z-[9999]" id="toastBox"></div>
|
||||
|
||||
<script>
|
||||
const authUserRole = '{{ auth()->user()->getRoleNames()->first() ?? '' }}';
|
||||
const canEditIbadah = ['administrator', 'pengurus_ibadah'].includes(authUserRole);
|
||||
const canEditMiskin = ['administrator', 'petugas_pendataan'].includes(authUserRole);
|
||||
const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
|
||||
|
||||
let ibadahData = [], miskinData = [];
|
||||
document.addEventListener('DOMContentLoaded', loadAllData);
|
||||
const searchInput = document.getElementById('searchInput');
|
||||
|
||||
async function loadAllData() {
|
||||
try {
|
||||
@@ -142,43 +189,108 @@
|
||||
fetch('{{ url('/api/ibadah') }}').then(r => r.json()),
|
||||
fetch('{{ url('/api/miskin') }}').then(r => r.json())
|
||||
]);
|
||||
ibadahData = ri;
|
||||
miskinData = rm;
|
||||
renderTables();
|
||||
} catch (e) { showToast('Gagal memuat data', 'error'); }
|
||||
}
|
||||
|
||||
function renderTables(filteredI = null, filteredM = null) {
|
||||
const dataI = filteredI || ibadahData;
|
||||
const dataM = filteredM || miskinData;
|
||||
|
||||
// Stats
|
||||
document.getElementById('countIbadah').innerText = ri.length;
|
||||
document.getElementById('countMiskin').innerText = rm.length;
|
||||
document.getElementById('countJiwa').innerText = rm.reduce((acc, h) => acc + parseInt(h.jumlah_orang), 0);
|
||||
document.getElementById('countIbadah').innerText = ibadahData.length;
|
||||
document.getElementById('countMiskin').innerText = miskinData.length;
|
||||
document.getElementById('countJiwa').innerText = miskinData.reduce((acc, h) => acc + parseInt(h.jumlah_orang), 0);
|
||||
|
||||
// Ibadah Table
|
||||
const bodyI = document.getElementById('bodyIbadah');
|
||||
bodyI.innerHTML = ri.length ? ri.map((item, i) => `
|
||||
bodyI.innerHTML = dataI.length ? dataI.map((item, i) => `
|
||||
<tr>
|
||||
<td class="text-xs font-bold opacity-30">${i + 1}</td>
|
||||
<td class="font-bold text-primary">${item.nama}</td>
|
||||
<td class="text-sm opacity-70 max-w-xs truncate">${item.alamat}</td>
|
||||
<td>
|
||||
<div class="font-bold text-primary">${item.nama}</div>
|
||||
<div class="text-[10px] opacity-50 truncate max-w-[200px]">${item.alamat}</div>
|
||||
</td>
|
||||
<td class="capitalize text-xs">${item.jenis || '-'}</td>
|
||||
<td class="text-xs">
|
||||
<div class="font-semibold">${item.pengurus || '-'}</div>
|
||||
<div class="opacity-50">${item.telepon || '-'}</div>
|
||||
</td>
|
||||
<td><span class="badge badge-outline badge-sm">${item.radius}m</span></td>
|
||||
<td class="font-mono text-[10px]">${parseFloat(item.latitude).toFixed(6)}, ${parseFloat(item.longitude).toFixed(6)}</td>
|
||||
<td class="font-mono text-[10px]">${parseFloat(item.latitude).toFixed(4)}, ${parseFloat(item.longitude).toFixed(4)}</td>
|
||||
<td class="text-center">
|
||||
<button class="btn btn-xs btn-error btn-outline" onclick="prepDelete('ibadah', ${item.id})"><i class="fa-solid fa-trash"></i></button>
|
||||
${canEditIbadah ? `<button class="btn btn-xs btn-error btn-outline" onclick="prepDelete('ibadah', ${item.id})"><i class="fa-solid fa-trash"></i></button>` : ''}
|
||||
</td>
|
||||
</tr>
|
||||
`).join('') : '<tr><td colspan="6" class="text-center py-10 opacity-30 italic">Belum ada data</td></tr>';
|
||||
`).join('') : '<tr><td colspan="7" class="text-center py-10 opacity-30 italic">Belum ada data</td></tr>';
|
||||
|
||||
// Miskin Table
|
||||
const bodyM = document.getElementById('bodyMiskin');
|
||||
bodyM.innerHTML = rm.length ? rm.map(item => `
|
||||
bodyM.innerHTML = dataM.length ? dataM.map(item => `
|
||||
<tr>
|
||||
<td class="font-bold text-error">${item.id_rumah}</td>
|
||||
<td class="text-xs opacity-70 max-w-xs truncate">${item.alamat || '-'}</td>
|
||||
<td><span class="badge badge-warning badge-sm">${item.jumlah_kk} KK</span></td>
|
||||
<td><span class="badge badge-info badge-sm">${item.jumlah_orang} Jiwa</span></td>
|
||||
<td class="font-mono text-[10px]">${parseFloat(item.latitude).toFixed(6)}, ${parseFloat(item.longitude).toFixed(6)}</td>
|
||||
<td>
|
||||
<div class="font-bold">${item.nama_kk || '-'}</div>
|
||||
<div class="text-[10px] opacity-50 truncate max-w-[200px]">${item.alamat || '-'}</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="badge badge-warning badge-xs">${item.jumlah_kk} KK</div>
|
||||
<div class="badge badge-info badge-xs">${item.jumlah_orang} Jiwa</div>
|
||||
</td>
|
||||
<td class="text-xs">${item.pekerjaan || '-'}</td>
|
||||
<td class="capitalize text-xs">${item.kondisi_rumah || '-'}</td>
|
||||
<td class="font-mono text-[10px]">${parseFloat(item.latitude).toFixed(4)}, ${parseFloat(item.longitude).toFixed(4)}</td>
|
||||
<td class="text-center">
|
||||
<button class="btn btn-xs btn-error btn-outline" onclick="prepDelete('miskin', '${item.id_rumah}')"><i class="fa-solid fa-trash"></i></button>
|
||||
${canEditMiskin ? `<button class="btn btn-xs btn-error btn-outline" onclick="prepDelete('miskin', '${item.id_rumah}')"><i class="fa-solid fa-trash"></i></button>` : ''}
|
||||
</td>
|
||||
</tr>
|
||||
`).join('') : '<tr><td colspan="6" class="text-center py-10 opacity-30 italic">Belum ada data</td></tr>';
|
||||
`).join('') : '<tr><td colspan="7" class="text-center py-10 opacity-30 italic">Belum ada data</td></tr>';
|
||||
}
|
||||
|
||||
} catch (e) { showToast('Gagal memuat data', 'error'); }
|
||||
function filterData() {
|
||||
const query = searchInput.value.toLowerCase();
|
||||
const filteredI = ibadahData.filter(i =>
|
||||
i.nama.toLowerCase().includes(query) ||
|
||||
(i.alamat && i.alamat.toLowerCase().includes(query)) ||
|
||||
(i.pengurus && i.pengurus.toLowerCase().includes(query))
|
||||
);
|
||||
const filteredM = miskinData.filter(m =>
|
||||
(m.nama_kk && m.nama_kk.toLowerCase().includes(query)) ||
|
||||
(m.alamat && m.alamat.toLowerCase().includes(query)) ||
|
||||
m.id_rumah.toLowerCase().includes(query)
|
||||
);
|
||||
renderTables(filteredI, filteredM);
|
||||
}
|
||||
|
||||
function exportCSV() {
|
||||
const activeTab = document.querySelector('input[name="data_tabs"]:checked').getAttribute('aria-label');
|
||||
let csvContent = "data:text/csv;charset=utf-8,";
|
||||
|
||||
if (activeTab.includes("Ibadah")) {
|
||||
csvContent += "ID,Nama,Jenis,Alamat,Radius,Jemaah,Pengurus,Telepon,Lat,Lon\n";
|
||||
ibadahData.forEach(i => {
|
||||
csvContent += `${i.id},"${i.nama}","${i.jenis}","${i.alamat}",${i.radius},${i.jumlah_jemaah},"${i.pengurus}","${i.telepon}",${i.latitude},${i.longitude}\n`;
|
||||
});
|
||||
downloadFile(csvContent, "data_rumah_ibadah.csv");
|
||||
} else {
|
||||
csvContent += "ID Rumah,Nama KK,Alamat,KK,Jiwa,Pekerjaan,Pendapatan,Kondisi,Lat,Lon\n";
|
||||
miskinData.forEach(m => {
|
||||
csvContent += `"${m.id_rumah}","${m.nama_kk}","${m.alamat}",${m.jumlah_kk},${m.jumlah_orang},"${m.pekerjaan}",${m.pendapatan},"${m.kondisi_rumah}",${m.latitude},${m.longitude}\n`;
|
||||
});
|
||||
downloadFile(csvContent, "data_rumah_miskin.csv");
|
||||
}
|
||||
}
|
||||
|
||||
function downloadFile(content, filename) {
|
||||
const encodedUri = encodeURI(content);
|
||||
const link = document.createElement("a");
|
||||
link.setAttribute("href", encodedUri);
|
||||
link.setAttribute("download", filename);
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
}
|
||||
|
||||
let deleteTarget = null;
|
||||
@@ -191,7 +303,7 @@
|
||||
const { type, id } = deleteTarget;
|
||||
const res = await fetch(`{{ url('/api') }}/${type}/${id}`, {
|
||||
method: 'DELETE',
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken }
|
||||
});
|
||||
const resJson = await res.json();
|
||||
if (resJson.success) {
|
||||
@@ -205,7 +317,7 @@
|
||||
const t = document.createElement('div');
|
||||
const alertCls = type === 'success' ? 'alert-success' : type === 'error' ? 'alert-error' : 'alert-info';
|
||||
t.className = `alert ${alertCls} shadow-lg py-3 text-xs font-bold`;
|
||||
t.innerHTML = `<span>${msg}</span>`;
|
||||
t.innerHTML = `<span><i class="fa-solid fa-circle-info mr-2"></i>${msg}</span>`;
|
||||
document.getElementById('toastBox').appendChild(t);
|
||||
setTimeout(() => t.remove(), 3000);
|
||||
}
|
||||
|
||||
+149
-27
@@ -3,7 +3,8 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Peta Interaktif - WebGIS Miskin & Ibadah</title>
|
||||
<meta name="csrf-token" content="{{ csrf_token() }}">
|
||||
<title>Peta Interaktif - WebGIS Pemetaan Kemiskinan</title>
|
||||
|
||||
<!-- Leaflet -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
|
||||
@@ -72,7 +73,7 @@
|
||||
<div class="flex-1">
|
||||
<a href="{{ url('/') }}" class="btn btn-ghost text-lg font-bold gap-2 text-primary">
|
||||
<i class="fa-solid fa-house-chimney-crack"></i>
|
||||
WebGIS Miskin & Ibadah
|
||||
WebGIS Pemetaan Kemiskinan
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex-none">
|
||||
@@ -88,6 +89,32 @@
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- User dropdown -->
|
||||
<div class="dropdown dropdown-end ml-2">
|
||||
<div tabindex="0" role="button" class="btn btn-ghost gap-2">
|
||||
<div class="avatar placeholder">
|
||||
<div class="bg-primary text-primary-content rounded-full w-8">
|
||||
<span class="text-xs font-bold">{{ substr(auth()->user()->name, 0, 1) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="hidden sm:inline text-sm font-semibold">{{ auth()->user()->name }}</span>
|
||||
<i class="fa-solid fa-chevron-down text-xs opacity-50"></i>
|
||||
</div>
|
||||
<ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-50 w-52 p-2 shadow-lg border border-base-200 mt-2">
|
||||
<li class="menu-title">
|
||||
<span class="text-xs text-base-content/50 capitalize">{{ str_replace('_', ' ', auth()->user()->getRoleNames()->first() ?? 'user') }}</span>
|
||||
</li>
|
||||
<li>
|
||||
<form method="POST" action="{{ route('logout') }}">
|
||||
@csrf
|
||||
<button type="submit" class="text-error w-full text-left flex items-center gap-2">
|
||||
<i class="fa-solid fa-right-from-bracket"></i>
|
||||
Keluar
|
||||
</button>
|
||||
</form>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -177,19 +204,51 @@
|
||||
</h3>
|
||||
<div class="form-control gap-3">
|
||||
<div class="bg-base-200 p-2 rounded text-xs font-mono" id="ib_coords">Lat: -, Lng: -</div>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<label class="form-control w-full">
|
||||
<div class="label"><span class="label-text font-bold">Nama Rumah Ibadah</span></div>
|
||||
<input type="text" id="ib_nama" placeholder="Contoh: Masjid Nurul Iman" class="input input-bordered w-full" />
|
||||
</label>
|
||||
<label class="form-control w-full">
|
||||
<div class="label"><span class="label-text font-bold">Jenis</span></div>
|
||||
<select id="ib_jenis" class="select select-bordered w-full">
|
||||
<option value="masjid">Masjid</option>
|
||||
<option value="gereja">Gereja</option>
|
||||
<option value="pura">Pura</option>
|
||||
<option value="klenteng">Klenteng</option>
|
||||
<option value="vihara">Vihara</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<label class="form-control w-full">
|
||||
<div class="label"><span class="label-text font-bold">Alamat</span></div>
|
||||
<textarea id="ib_alamat" class="textarea textarea-bordered h-20" placeholder="Alamat lengkap..."></textarea>
|
||||
<textarea id="ib_alamat" class="textarea textarea-bordered h-16" placeholder="Alamat lengkap..."></textarea>
|
||||
</label>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<label class="form-control w-full">
|
||||
<div class="label"><span class="label-text font-bold">Pengurus</span></div>
|
||||
<input type="text" id="ib_pengurus" placeholder="Nama ketua/pengurus" class="input input-bordered w-full" />
|
||||
</label>
|
||||
<label class="form-control w-full">
|
||||
<div class="label"><span class="label-text font-bold">Radius Default Analysis (Meter)</span></div>
|
||||
<div class="label"><span class="label-text font-bold">Telepon</span></div>
|
||||
<input type="text" id="ib_telepon" placeholder="08..." class="input input-bordered w-full" />
|
||||
</label>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<label class="form-control w-full">
|
||||
<div class="label"><span class="label-text font-bold">Jumlah Jemaah</span></div>
|
||||
<input type="number" id="ib_jemaah" value="100" class="input input-bordered w-full" />
|
||||
</label>
|
||||
<label class="form-control w-full">
|
||||
<div class="label"><span class="label-text font-bold">Radius Analisis (m)</span></div>
|
||||
<input type="number" id="ib_radius" value="500" class="input input-bordered w-full" />
|
||||
</label>
|
||||
</div>
|
||||
<label class="form-control w-full">
|
||||
<div class="label"><span class="label-text font-bold">Keterangan</span></div>
|
||||
<textarea id="ib_ket" class="textarea textarea-bordered h-16" placeholder="Catatan tambahan..."></textarea>
|
||||
</label>
|
||||
</div>
|
||||
<div class="modal-action">
|
||||
<button class="btn btn-ghost" onclick="modalIbadah.close()">Batal</button>
|
||||
<button class="btn btn-success" id="btnSaveIbadah" onclick="saveIbadah()">Simpan</button>
|
||||
@@ -205,13 +264,19 @@
|
||||
</h3>
|
||||
<div class="form-control gap-3">
|
||||
<div class="bg-base-200 p-2 rounded text-xs font-mono" id="rm_coords">Lat: -, Lng: -</div>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<label class="form-control w-full">
|
||||
<div class="label"><span class="label-text font-bold">Alamat</span></div>
|
||||
<textarea id="rm_alamat" class="textarea textarea-bordered h-20" placeholder="Alamat lengkap..."></textarea>
|
||||
<div class="label"><span class="label-text font-bold">ID Rumah</span></div>
|
||||
<input type="text" id="rm_id" placeholder="Contoh: RM-001" class="input input-bordered w-full" />
|
||||
</label>
|
||||
<label class="form-control w-full">
|
||||
<div class="label"><span class="label-text font-bold">ID Rumah / Nama Pemilik</span></div>
|
||||
<input type="text" id="rm_id" placeholder="Contoh: RM-001" class="input input-bordered w-full" />
|
||||
<div class="label"><span class="label-text font-bold">Nama Kepala Keluarga</span></div>
|
||||
<input type="text" id="rm_nama_kk" placeholder="Nama lengkap KK" class="input input-bordered w-full" />
|
||||
</label>
|
||||
</div>
|
||||
<label class="form-control w-full">
|
||||
<div class="label"><span class="label-text font-bold">Alamat</span></div>
|
||||
<textarea id="rm_alamat" class="textarea textarea-bordered h-16" placeholder="Alamat lengkap..."></textarea>
|
||||
</label>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<label class="form-control w-full">
|
||||
@@ -223,6 +288,28 @@
|
||||
<input type="number" id="rm_jiwa" value="4" class="input input-bordered w-full" />
|
||||
</label>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<label class="form-control w-full">
|
||||
<div class="label"><span class="label-text font-bold">Pekerjaan</span></div>
|
||||
<input type="text" id="rm_kerja" placeholder="Pekerjaan KK" class="input input-bordered w-full" />
|
||||
</label>
|
||||
<label class="form-control w-full">
|
||||
<div class="label"><span class="label-text font-bold">Pendapatan (Rp)</span></div>
|
||||
<input type="number" id="rm_duit" placeholder="Estimasi per bulan" class="input input-bordered w-full" />
|
||||
</label>
|
||||
</div>
|
||||
<label class="form-control w-full">
|
||||
<div class="label"><span class="label-text font-bold">Kondisi Rumah</span></div>
|
||||
<select id="rm_kondisi" class="select select-bordered w-full">
|
||||
<option value="sedang">Sedang</option>
|
||||
<option value="buruk">Buruk</option>
|
||||
<option value="sangat_buruk">Sangat Buruk</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="form-control w-full">
|
||||
<div class="label"><span class="label-text font-bold">Keterangan</span></div>
|
||||
<textarea id="rm_ket" class="textarea textarea-bordered h-16" placeholder="Catatan tambahan..."></textarea>
|
||||
</label>
|
||||
</div>
|
||||
<div class="modal-action">
|
||||
<button class="btn btn-ghost" onclick="modalMiskin.close()">Batal</button>
|
||||
@@ -249,6 +336,11 @@
|
||||
|
||||
<!-- ═══ JAVASCRIPT ════════════════════════════════════════════════════════ -->
|
||||
<script>
|
||||
const authUserRole = '{{ auth()->user()->getRoleNames()->first() ?? '' }}';
|
||||
const canEditIbadah = ['administrator', 'pengurus_ibadah'].includes(authUserRole);
|
||||
const canEditMiskin = ['administrator', 'petugas_pendataan'].includes(authUserRole);
|
||||
const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
|
||||
|
||||
// ── CONFIG & STATE ──────────────────────────────────────────────────
|
||||
let map, currentMode = 'view';
|
||||
let layerIbadah = L.layerGroup(), layerMiskin = L.layerGroup();
|
||||
@@ -261,10 +353,13 @@
|
||||
|
||||
const icons = {
|
||||
ibadah: (color = '#22c55e') => L.divIcon({
|
||||
html: `<div style="background:${color};width:32px;height:32px;border-radius:32px 32px 0 32px;border:3px solid white;transform:rotate(-45deg);display:flex;align-items:center;justify-center;box-shadow:0 4px 10px rgba(0,0,0,0.3);position:relative">
|
||||
<i class="fa-solid fa-mosque" style="transform:rotate(45deg);color:white;font-size:14px;margin-left:6px;margin-top:2px"></i>
|
||||
html: `<div style="display:flex;flex-direction:column;align-items:center;width:36px;height:50px;">
|
||||
<div style="background:${color};width:36px;height:36px;border-radius:50%;border:3px solid white;box-shadow:0 4px 12px rgba(0,0,0,0.4);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
|
||||
<i class="fa-solid fa-mosque" style="color:white;font-size:15px;"></i>
|
||||
</div>
|
||||
<div style="width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:14px solid ${color};margin-top:-1px;flex-shrink:0;"></div>
|
||||
</div>`,
|
||||
className: '', iconSize: [32, 32], iconAnchor: [0, 32], popupAnchor: [16, -35]
|
||||
className: '', iconSize: [36, 50], iconAnchor: [18, 50], popupAnchor: [0, -52]
|
||||
}),
|
||||
miskin: (color = '#ef4444', glow = false) => L.divIcon({
|
||||
html: `<div style="background:${color};width:24px;height:24px;border-radius:24px;border:2px solid white;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 8px rgba(0,0,0,0.3);${glow ? 'box-shadow: 0 0 15px ' + color : ''}">
|
||||
@@ -282,6 +377,14 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
initMap();
|
||||
loadData();
|
||||
|
||||
// Hide add buttons for roles that can't edit
|
||||
if (!canEditIbadah) {
|
||||
document.querySelectorAll('[data-mode="ibadah"], #btnModeIbadah, .btn-add-ibadah').forEach(el => el.classList.add('hidden'));
|
||||
}
|
||||
if (!canEditMiskin) {
|
||||
document.querySelectorAll('[data-mode="miskin"], #btnModeMiskin, .btn-add-miskin').forEach(el => el.classList.add('hidden'));
|
||||
}
|
||||
});
|
||||
|
||||
function initMap() {
|
||||
@@ -505,7 +608,7 @@
|
||||
try {
|
||||
const res = await fetch(`{{ url('/api/ibadah') }}/${activeIbadah.id}`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken },
|
||||
body: JSON.stringify({
|
||||
id: activeIbadah.id,
|
||||
nama: activeIbadah.nama,
|
||||
@@ -530,22 +633,31 @@
|
||||
|
||||
// ── POPUPS ──────────────────────────────────────────────────────────
|
||||
function buildPopupIbadah(item) {
|
||||
return `<div class="p-1">
|
||||
<div class="font-bold text-sm">🕌 ${item.nama}</div>
|
||||
<div class="text-[10px] text-gray-500 mb-2">${item.alamat}</div>
|
||||
return `<div class="p-2 min-w-[200px]">
|
||||
<div class="font-bold text-base text-primary">🕌 ${item.nama}</div>
|
||||
<div class="badge badge-sm badge-outline mb-2 capitalize">${item.jenis || 'Ibadah'}</div>
|
||||
<div class="text-[10px] text-gray-500 mb-1"><i class="fa-solid fa-location-dot"></i> ${item.alamat}</div>
|
||||
<div class="grid grid-cols-2 gap-2 my-2 text-[10px] bg-base-200 p-2 rounded">
|
||||
<div><strong>Pengurus:</strong><br>${item.pengurus || '-'}</div>
|
||||
<div><strong>Jemaah:</strong><br>${item.jumlah_jemaah || 0}</div>
|
||||
</div>
|
||||
<div class="flex gap-1 border-t pt-2 mt-1">
|
||||
<button class="btn btn-xs btn-outline btn-error" onclick="prepDelete('ibadah', ${item.id})">Hapus</button>
|
||||
${canEditIbadah ? `<button class="btn btn-xs btn-error btn-outline" onclick="prepDelete('ibadah', ${item.id})">Hapus</button>` : ''}
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function buildPopupMiskin(item) {
|
||||
return `<div class="p-1">
|
||||
<div class="font-bold text-sm">🏠 ID: ${item.id_rumah}</div>
|
||||
<div class="text-[10px] text-gray-500 mb-1">${item.alamat || 'Alamat tidak tersedia'}</div>
|
||||
<div class="text-[10px] text-gray-400">KK: ${item.jumlah_kk} | Jiwa: ${item.jumlah_orang}</div>
|
||||
return `<div class="p-2 min-w-[200px]">
|
||||
<div class="font-bold text-base text-error">🏠 ${item.nama_kk || 'Keluarga Miskin'}</div>
|
||||
<div class="text-[10px] text-gray-400 mb-1">ID: ${item.id_rumah}</div>
|
||||
<div class="text-[10px] text-gray-500 mb-1"><i class="fa-solid fa-location-dot"></i> ${item.alamat || '-'}</div>
|
||||
<div class="grid grid-cols-2 gap-2 my-2 text-[10px] bg-base-200 p-2 rounded">
|
||||
<div><strong>KK/Jiwa:</strong><br>${item.jumlah_kk}/${item.jumlah_orang}</div>
|
||||
<div><strong>Kondisi:</strong><br><span class="capitalize">${item.kondisi_rumah || '-'}</span></div>
|
||||
</div>
|
||||
<div class="flex gap-1 border-t pt-2 mt-1">
|
||||
<button class="btn btn-xs btn-outline btn-error" onclick="prepDelete('miskin', '${item.id_rumah}')">Hapus</button>
|
||||
${canEditMiskin ? `<button class="btn btn-xs btn-error btn-outline" onclick="prepDelete('miskin', '${item.id_rumah}')">Hapus</button>` : ''}
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
@@ -555,16 +667,21 @@
|
||||
const pos = tempMarker.getLatLng();
|
||||
const data = {
|
||||
nama: document.getElementById('ib_nama').value,
|
||||
jenis: document.getElementById('ib_jenis').value,
|
||||
alamat: document.getElementById('ib_alamat').value,
|
||||
latitude: pos.lat, longitude: pos.lng,
|
||||
radius: document.getElementById('ib_radius').value
|
||||
radius: document.getElementById('ib_radius').value,
|
||||
jumlah_jemaah: document.getElementById('ib_jemaah').value,
|
||||
pengurus: document.getElementById('ib_pengurus').value,
|
||||
telepon: document.getElementById('ib_telepon').value,
|
||||
keterangan: document.getElementById('ib_ket').value
|
||||
};
|
||||
const btn = document.getElementById('btnSaveIbadah');
|
||||
btn.disabled = true;
|
||||
|
||||
const res = await fetch('{{ url('/api/ibadah') }}', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken },
|
||||
body: JSON.stringify(data)
|
||||
});
|
||||
const resJson = await res.json();
|
||||
@@ -580,17 +697,22 @@
|
||||
const pos = tempMarker.getLatLng();
|
||||
const data = {
|
||||
id_rumah: document.getElementById('rm_id').value,
|
||||
nama_kk: document.getElementById('rm_nama_kk').value,
|
||||
alamat: document.getElementById('rm_alamat').value,
|
||||
jumlah_kk: document.getElementById('rm_kk').value,
|
||||
jumlah_orang: document.getElementById('rm_jiwa').value,
|
||||
latitude: pos.lat, longitude: pos.lng
|
||||
latitude: pos.lat, longitude: pos.lng,
|
||||
pekerjaan: document.getElementById('rm_kerja').value,
|
||||
pendapatan: document.getElementById('rm_duit').value,
|
||||
kondisi_rumah: document.getElementById('rm_kondisi').value,
|
||||
keterangan: document.getElementById('rm_ket').value
|
||||
};
|
||||
const btn = document.getElementById('btnSaveMiskin');
|
||||
btn.disabled = true;
|
||||
|
||||
const res = await fetch('{{ url('/api/miskin') }}', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken },
|
||||
body: JSON.stringify(data)
|
||||
});
|
||||
const resJson = await res.json();
|
||||
@@ -611,7 +733,7 @@
|
||||
try {
|
||||
const res = await fetch(endpoint, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken },
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
const resJson = await res.json();
|
||||
@@ -639,7 +761,7 @@
|
||||
const { type, id } = deleteTarget;
|
||||
const res = await fetch(`{{ url('/api') }}/${type}/${id}`, {
|
||||
method: 'DELETE',
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken }
|
||||
});
|
||||
const resJson = await res.json();
|
||||
if (resJson.success) {
|
||||
|
||||
@@ -3,7 +3,8 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>WebGIS Miskin & Ibadah</title>
|
||||
<meta name="csrf-token" content="{{ csrf_token() }}">
|
||||
<title>WebGIS Pemetaan Kemiskinan</title>
|
||||
|
||||
<!-- Leaflet -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
|
||||
@@ -68,7 +69,7 @@
|
||||
<div class="hero-content text-center flex-col gap-2">
|
||||
<!-- Logo -->
|
||||
<div class="text-7xl mb-2">🏘️</div>
|
||||
<h1 class="text-4xl font-bold tracking-tight text-primary">WebGIS Miskin & Ibadah</h1>
|
||||
<h1 class="text-4xl font-bold tracking-tight text-primary">WebGIS Pemetaan Kemiskinan</h1>
|
||||
<p class="max-w-md text-base-content/60 mt-2 mb-6 leading-relaxed">
|
||||
Sistem Informasi Geografis untuk pemetaan rumah ibadah dan
|
||||
analisis sebaran keluarga kurang mampu.
|
||||
@@ -86,6 +87,19 @@
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- User info -->
|
||||
<div class="flex items-center gap-2 text-sm text-base-content/50 mt-2">
|
||||
<i class="fa-solid fa-user text-xs"></i>
|
||||
<span>{{ auth()->user()->name }}</span>
|
||||
<span class="opacity-30">•</span>
|
||||
<span class="capitalize">{{ str_replace('_', ' ', auth()->user()->getRoleNames()->first() ?? '') }}</span>
|
||||
<span class="opacity-30">•</span>
|
||||
<form method="POST" action="{{ route('logout') }}" class="inline">
|
||||
@csrf
|
||||
<button type="submit" class="hover:text-error transition-colors underline underline-offset-2">Keluar</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Redirect progress -->
|
||||
<div class="mt-8 w-72">
|
||||
<p class="text-xs text-base-content/40 mb-2">Mengarahkan ke halaman Peta dalam 5 detik...</p>
|
||||
|
||||
@@ -105,4 +105,27 @@ class AuthTest extends TestCase
|
||||
$response = $this->actingAs($viewer)->delete('/api/ibadah/999');
|
||||
$response->assertStatus(403);
|
||||
}
|
||||
|
||||
public function test_data_page_shows_user_name_and_logout(): void
|
||||
{
|
||||
$this->artisan('db:seed', ['--class' => 'RolesAndAdminSeeder']);
|
||||
$user = User::where('email', 'admin@webgis.local')->first();
|
||||
|
||||
$response = $this->actingAs($user)->get('/data');
|
||||
|
||||
$response->assertStatus(200);
|
||||
$response->assertSee('Keluar');
|
||||
$response->assertSee($user->name);
|
||||
}
|
||||
|
||||
public function test_map_page_passes_user_role_to_js(): void
|
||||
{
|
||||
$this->artisan('db:seed', ['--class' => 'RolesAndAdminSeeder']);
|
||||
$user = User::where('email', 'admin@webgis.local')->first();
|
||||
|
||||
$response = $this->actingAs($user)->get('/map');
|
||||
|
||||
$response->assertStatus(200);
|
||||
$response->assertSee("authUserRole = 'administrator'", false);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user