detail tps

This commit is contained in:
rahmagustin 2026-01-22 22:16:32 +07:00
parent d5a6dc8cf7
commit c106c2b731
2 changed files with 54 additions and 26 deletions

View File

@ -22,43 +22,73 @@
<div class="col-lg-5">
<div class="about-img">
<img src="{{ asset('assets/user/img/about-portrait.jpg') }}" class="img-fluid" alt="">
<img src="{{ $tps->foto_tps ? asset('storage/' . $tps->foto_tps) : asset('assets/user/img/about-portrait.jpg') }}"
class="img-fluid" alt="">
</div>
</div>
<div class="col-lg-7">
<h3 class="pt-0 pt-lg-5">Sistem Informasi Geografis Tempat Pembuangan Sampah di Kabupaten Nganjuk</h3>
<h3 class="pt-0 pt-lg-5">{{ $tps->nama_tps }}</h3>
<!-- Tab Content -->
<div class="tab-content">
<div class="tab-pane fade show active" id="about-tab1">
<p class="fst-italic">Sistem Informasi Geografis yang menampilkan visualisasi lokasi Tempat
Pembuangan Sampah di Kabupaten Nganjuk secara mudah, cepat, dan interaktif.</p>
<p class="fst-italic mb-4">
{{ $tps->alamat_tps }}
</p>
<div class="d-flex align-items-center mt-4">
<i class="bi bi-check2"></i>
<h4>Peta Interaktif Lokasi TPS</h4>
</div>
<p>Peta digital yang memudahkan pengguna menemukan lokasi TPS terdekat, lengkap dengan tampilan
yang intuitif sehingga informasi dapat diakses dengan cepat dan jelas.</p>
<div class="table-responsive">
<table class="table table-borderless align-middle">
<tbody>
<tr>
<th width="40%">
<i class="bi bi-tags me-1"></i>
Kategori TPS
</th>
<td>{{ $tps->kategori->nama_kategori ?? '-' }}</td>
</tr>
<div class="d-flex align-items-center mt-4">
<i class="bi bi-check2"></i>
<h4>Informasi TPS Lengkap</h4>
</div>
<p>Menyajikan berbagai informasi penting seperti kapasitas, kondisi, status, hingga jenis
pengelolaan TPS, sehingga pengguna dapat memahami keadaan TPS secara menyeluruh.</p>
<tr>
<th>
<i class="bi bi-info-circle me-1"></i>
Status TPS
</th>
<td>{{ $tps->status_tps ?? '-' }}</td>
</tr>
<div class="d-flex align-items-center mt-4">
<i class="bi bi-check2"></i>
<h4>Layanan Aduan TPS</h4>
<tr>
<th>
<i class="bi bi-box me-1"></i>
Kapasitas TPS
</th>
<td>{{ $tps->kapasitas_tps ?? '-' }}</td>
</tr>
<tr>
<th>
<i class="bi bi-calendar me-1"></i>
Tahun Pembuatan
</th>
<td>{{ $tps->tahun_pembuatan ?? '-' }}</td>
</tr>
<tr>
<th>
<i class="bi bi-crosshair me-1"></i>
Koordinat
</th>
<td>
{{ $tps->latitude }}, {{ $tps->longitude }}
</td>
</tr>
</tbody>
</table>
</div>
<p>Fitur yang memungkinkan masyarakat menyampaikan keluhan atau laporan terkait TPS dengan
mudah, membantu pemerintah dalam memperbaiki serta meningkatkan pengelolaan sampah.</p>
</div><!-- End Tab 1 Content -->
</div>
</div>

View File

@ -128,6 +128,7 @@ function markerIcon(color) {
// =============================
var tpsData = @json($tps);
tpsData.forEach(function(tps) {
if (tps.latitude && tps.longitude) {
@ -153,12 +154,12 @@ function markerIcon(color) {
<span class="badge bg-success mt-1">${tps.status_tps ?? '-'}</span>
<div style="margin-top:10px; display:flex; gap:6px;">
<a href="/tps/${tps.id}"
<a href="{{ url('tps') }}/${tps.id_tps}"
style="flex:1; text-align:center; padding:6px 8px; background:#0d6efd; color:#fff; border-radius:6px; font-size:13px; text-decoration:none;">
Detail TPS
</a>
<a href="/aduan/create/${tps.id}"
<a href="/aduan/create/${tps.id_tps}"
style="flex:1; text-align:center; padding:6px 8px; background:#dc3545; color:#fff; border-radius:6px; font-size:13px; text-decoration:none;">
Aduan
</a>
@ -168,9 +169,6 @@ function markerIcon(color) {
}
});
// =============================
// LEGEND
// =============================
var legend = L.control({
position: "bottomleft"
});