detail tps
This commit is contained in:
parent
d5a6dc8cf7
commit
c106c2b731
|
|
@ -22,43 +22,73 @@
|
||||||
|
|
||||||
<div class="col-lg-5">
|
<div class="col-lg-5">
|
||||||
<div class="about-img">
|
<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>
|
</div>
|
||||||
|
|
||||||
<div class="col-lg-7">
|
<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 -->
|
<!-- Tab Content -->
|
||||||
<div class="tab-content">
|
<div class="tab-content">
|
||||||
|
|
||||||
<div class="tab-pane fade show active" id="about-tab1">
|
<div class="tab-pane fade show active" id="about-tab1">
|
||||||
|
|
||||||
<p class="fst-italic">Sistem Informasi Geografis yang menampilkan visualisasi lokasi Tempat
|
<p class="fst-italic mb-4">
|
||||||
Pembuangan Sampah di Kabupaten Nganjuk secara mudah, cepat, dan interaktif.</p>
|
{{ $tps->alamat_tps }}
|
||||||
|
</p>
|
||||||
|
|
||||||
<div class="d-flex align-items-center mt-4">
|
<div class="table-responsive">
|
||||||
<i class="bi bi-check2"></i>
|
<table class="table table-borderless align-middle">
|
||||||
<h4>Peta Interaktif Lokasi TPS</h4>
|
<tbody>
|
||||||
</div>
|
<tr>
|
||||||
<p>Peta digital yang memudahkan pengguna menemukan lokasi TPS terdekat, lengkap dengan tampilan
|
<th width="40%">
|
||||||
yang intuitif sehingga informasi dapat diakses dengan cepat dan jelas.</p>
|
<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">
|
<tr>
|
||||||
<i class="bi bi-check2"></i>
|
<th>
|
||||||
<h4>Informasi TPS Lengkap</h4>
|
<i class="bi bi-info-circle me-1"></i>
|
||||||
</div>
|
Status TPS
|
||||||
<p>Menyajikan berbagai informasi penting seperti kapasitas, kondisi, status, hingga jenis
|
</th>
|
||||||
pengelolaan TPS, sehingga pengguna dapat memahami keadaan TPS secara menyeluruh.</p>
|
<td>{{ $tps->status_tps ?? '-' }}</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
<div class="d-flex align-items-center mt-4">
|
<tr>
|
||||||
<i class="bi bi-check2"></i>
|
<th>
|
||||||
<h4>Layanan Aduan TPS</h4>
|
<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>
|
</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><!-- End Tab 1 Content -->
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -128,6 +128,7 @@ function markerIcon(color) {
|
||||||
// =============================
|
// =============================
|
||||||
var tpsData = @json($tps);
|
var tpsData = @json($tps);
|
||||||
|
|
||||||
|
|
||||||
tpsData.forEach(function(tps) {
|
tpsData.forEach(function(tps) {
|
||||||
if (tps.latitude && tps.longitude) {
|
if (tps.latitude && tps.longitude) {
|
||||||
|
|
||||||
|
|
@ -153,12 +154,12 @@ function markerIcon(color) {
|
||||||
<span class="badge bg-success mt-1">${tps.status_tps ?? '-'}</span>
|
<span class="badge bg-success mt-1">${tps.status_tps ?? '-'}</span>
|
||||||
|
|
||||||
<div style="margin-top:10px; display:flex; gap:6px;">
|
<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;">
|
style="flex:1; text-align:center; padding:6px 8px; background:#0d6efd; color:#fff; border-radius:6px; font-size:13px; text-decoration:none;">
|
||||||
Detail TPS
|
Detail TPS
|
||||||
</a>
|
</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;">
|
style="flex:1; text-align:center; padding:6px 8px; background:#dc3545; color:#fff; border-radius:6px; font-size:13px; text-decoration:none;">
|
||||||
Aduan
|
Aduan
|
||||||
</a>
|
</a>
|
||||||
|
|
@ -168,9 +169,6 @@ function markerIcon(color) {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// =============================
|
|
||||||
// LEGEND
|
|
||||||
// =============================
|
|
||||||
var legend = L.control({
|
var legend = L.control({
|
||||||
position: "bottomleft"
|
position: "bottomleft"
|
||||||
});
|
});
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue