511 lines
19 KiB
PHP
511 lines
19 KiB
PHP
@extends('user.template')
|
|
|
|
@section('content')
|
|
<!-- Hero Section -->
|
|
<section id="hero" class="hero section">
|
|
|
|
<div class="container text-center d-flex flex-column justify-content-center align-items-center position-relative">
|
|
<h1>Selamat Datang di <span>SIG TPS</span></h1>
|
|
<p>Sistem Informasi Geografis Pemetaan Tempat Pembuangan Sampah di Kabupaten Nganjuk</p>
|
|
<div class="d-flex">
|
|
<a href="#sebaranTPS" class="btn-get-started scrollto">Lihat Peta</a>
|
|
</div>
|
|
</div>
|
|
|
|
</section><!-- /Hero Section -->
|
|
|
|
<section id="grafik-sampah" class="section">
|
|
<div class="container">
|
|
|
|
<div class="section-title">
|
|
<h2>Dashboard Sampah {{ $tahun }}</h2>
|
|
<p>Statistik pengelolaan sampah Kabupaten Nganjuk</p>
|
|
</div>
|
|
|
|
<!-- Rekap Tahunan -->
|
|
<div class="mb-4 text-center row">
|
|
|
|
<div class="col-md-3">
|
|
<h4>{{ number_format($rekap['timbulan'], 0, ',', '.') }} Ton</h4>
|
|
<p>Total Timbulan</p>
|
|
</div>
|
|
|
|
<div class="col-md-3">
|
|
<h4>{{ number_format($rekap['kelola'], 0, ',', '.') }} Ton</h4>
|
|
<p>Total Dikelola</p>
|
|
</div>
|
|
|
|
<div class="col-md-3">
|
|
<h4>{{ number_format($rekap['daur'], 0, ',', '.') }} Ton</h4>
|
|
<p>Total Daur Ulang</p>
|
|
</div>
|
|
|
|
<div class="col-md-3">
|
|
<h4>{{ number_format($rekap['sisa'], 0, ',', '.') }} Ton</h4>
|
|
<p>Total Sisa</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Grafik -->
|
|
<div class="row justify-content-center">
|
|
<div class="text-center col-md-8">
|
|
<canvas id="grafikSampah"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
|
|
<script>
|
|
const ctx = document.getElementById('grafikSampah');
|
|
|
|
new Chart(ctx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: @json($bulan),
|
|
datasets: [{
|
|
label: 'Timbulan Sampah',
|
|
data: @json($timbulan),
|
|
backgroundColor: '#dc3545'
|
|
},
|
|
{
|
|
label: 'Sampah Dikelola',
|
|
data: @json($kelola),
|
|
backgroundColor: '#0d6efd'
|
|
},
|
|
{
|
|
label: 'Daur Ulang',
|
|
data: @json($daur),
|
|
backgroundColor: '#198754'
|
|
},
|
|
{
|
|
label: 'Sisa Sampah',
|
|
data: @json($sisa),
|
|
backgroundColor: '#ffc107'
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
plugins: {
|
|
legend: {
|
|
position: 'top'
|
|
},
|
|
tooltip: {
|
|
callbacks: {
|
|
label: function(context) {
|
|
return context.dataset.label + ': ' + context.raw.toLocaleString('id-ID') +
|
|
' Ton';
|
|
}
|
|
}
|
|
}
|
|
},
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
title: {
|
|
display: true,
|
|
text: 'Jumlah Sampah (Ton)'
|
|
},
|
|
},
|
|
x: {
|
|
title: {
|
|
display: true,
|
|
text: 'Bulan'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<!-- About Section -->
|
|
<section id="about" class="about section">
|
|
|
|
<!-- Section Title -->
|
|
<div class="container section-title" data-aos="fade-up">
|
|
<h2>Tentang</h2>
|
|
<p>Sistem Informasi Geografis yang menampilkan data lokasi secara visual dan interaktif.</p>
|
|
</div><!-- End Section Title -->
|
|
|
|
<div class="container" data-aos="fade-up">
|
|
<div class="row g-4 g-lg-5" data-aos="fade-up" data-aos-delay="200">
|
|
<div class="col-lg-5">
|
|
<div class="about-img">
|
|
<img src="{{ asset('assets/user/img/tentang-lg.png') }}" 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>
|
|
<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>
|
|
<div class="mt-4 d-flex align-items-center">
|
|
<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="mt-4 d-flex align-items-center">
|
|
<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>
|
|
<div class="mt-4 d-flex align-items-center">
|
|
<i class="bi bi-check2"></i>
|
|
<h4>Layanan Aduan TPS</h4>
|
|
</div>
|
|
<p>Fitur yang memungkinkan masyarakat menyampaikan keluhan atau laporan terkait TPS dengan
|
|
mudah, membantu pemerintah dalam memperbaiki serta meningkatkan pengelolaan sampah.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</section><!-- /About Section -->
|
|
|
|
<!-- Services Section -->
|
|
<section id="services" class="services section">
|
|
|
|
<div class="container" data-aos="fade-up" data-aos-delay="100">
|
|
|
|
<div class="row gy-5">
|
|
|
|
@foreach ($kategoriTps as $index => $item)
|
|
<div class="col-xl-4 col-md-6" data-aos="zoom-in" data-aos-delay="{{ 200 + $index * 100 }}">
|
|
|
|
<div class="service-item">
|
|
<div class="img">
|
|
|
|
@if ($item->foto_kategori)
|
|
<img src="{{ asset('storage/' . $item->foto_kategori) }}" class="img-fluid"
|
|
alt="{{ $item->nama_kategori }}">
|
|
@else
|
|
<img src="{{ asset('assets/user/img/services-1.jpg') }}" class="img-fluid"
|
|
alt="Default">
|
|
@endif
|
|
|
|
</div>
|
|
|
|
<div class="details position-relative">
|
|
|
|
<div class="icon">
|
|
@if ($item->nama_kategori == 'TPS')
|
|
<i class="bi bi-trash"></i>
|
|
@elseif ($item->nama_kategori == 'TPS 3R')
|
|
<i class="bi bi-recycle"></i>
|
|
@elseif ($item->nama_kategori == 'TPA')
|
|
<i class="bi bi-geo-alt"></i>
|
|
@else
|
|
<i class="bi bi-archive"></i>
|
|
@endif
|
|
</div>
|
|
|
|
<a href="{{ route('user.about.kategori', ['id' => $item->id_kategori_tps]) }}"
|
|
class="stretched-link">
|
|
<h3>{{ $item->kepanjangan_kategori }}</h3>
|
|
</a>
|
|
|
|
<p>
|
|
{{ explode('.', $item->deskripsi)[0] }}.
|
|
</p>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
@endforeach
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|
|
|
<style>
|
|
header,
|
|
.navbar,
|
|
#header {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 2000 !important;
|
|
background: #fff;
|
|
}
|
|
|
|
.leaflet-top,
|
|
.leaflet-bottom,
|
|
.leaflet-control {
|
|
z-index: 400 !important;
|
|
}
|
|
|
|
#mapTPS {
|
|
width: 100%;
|
|
height: 450px;
|
|
border-radius: 12px;
|
|
box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
|
|
}
|
|
|
|
.legend {
|
|
background: #fff;
|
|
padding: 10px 12px;
|
|
border-radius: 10px;
|
|
font-size: 14px;
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, .15);
|
|
line-height: 18px;
|
|
}
|
|
|
|
.legend i {
|
|
width: 16px;
|
|
height: 16px;
|
|
float: left;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.user-location {
|
|
filter: drop-shadow(0 0 8px rgba(13, 110, 253, 0.8)) drop-shadow(0 0 16px rgba(13, 110, 253, 0.6));
|
|
}
|
|
</style>
|
|
|
|
<section class="section" id="sebaranTPS">
|
|
<!-- Section Title -->
|
|
<div class="container section-title" data-aos="fade-up">
|
|
<h2>Peta Sebaran TPS</h2>
|
|
<p>Peta interaktif yang menampilkan sebaran Tempat Pembuangan Sampah di Kabupaten Nganjuk.</p>
|
|
</div><!-- End Section Title -->
|
|
<div class="container">
|
|
<div class="map-wrapper">
|
|
<div class="map-action">
|
|
<div class="map-action-text">
|
|
Temukan <b>TPS terdekat</b> dari lokasi Anda saat ini
|
|
</div>
|
|
<button type="button" id="btnLokasi" class="btn-lokasi">
|
|
Cari TPS Terdekat
|
|
</button>
|
|
</div>
|
|
|
|
<div id="mapTPS"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<script>
|
|
var map = L.map('mapTPS').setView([-7.6078, 111.903], 12);
|
|
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
maxZoom: 19,
|
|
attribution: '© OpenStreetMap'
|
|
}).addTo(map);
|
|
|
|
function icon(color) {
|
|
return new L.Icon({
|
|
iconUrl: `https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-${color}.png`,
|
|
shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
|
|
iconSize: [25, 41],
|
|
iconAnchor: [12, 41],
|
|
popupAnchor: [1, -34]
|
|
});
|
|
}
|
|
|
|
var iconTPS = icon('green');
|
|
var iconTPS3R = icon('blue');
|
|
var iconTPA = icon('red');
|
|
|
|
var iconNear = new L.Icon({
|
|
iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-gold.png',
|
|
shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
|
|
iconSize: [25, 41],
|
|
iconAnchor: [12, 41],
|
|
popupAnchor: [1, -34]
|
|
});
|
|
|
|
var tpsData = @json($tps);
|
|
var markers = [];
|
|
|
|
tpsData.forEach(tps => {
|
|
if (!tps.latitude || !tps.longitude) return;
|
|
|
|
let iconUse = iconTPS;
|
|
if (tps.kategori_tps_id == 2) iconUse = iconTPS3R;
|
|
if (tps.kategori_tps_id == 3) iconUse = iconTPA;
|
|
|
|
let marker = L.marker([tps.latitude, tps.longitude], {
|
|
icon: iconUse
|
|
})
|
|
.bindPopup(`
|
|
<strong>${tps.nama_tps}</strong><br>
|
|
<small>${tps.alamat_tps ?? '-'}</small><br>
|
|
<span class="badge bg-success">${tps.status_tps ?? '-'}</span>
|
|
<hr style="margin:6px 0">
|
|
<a href="/tps/${tps.id_tps}" style="font-size:13px">Detail TPS</a>
|
|
`)
|
|
.addTo(map);
|
|
|
|
marker.tpsData = tps;
|
|
markers.push(marker);
|
|
});
|
|
var legend = L.control({
|
|
position: 'bottomleft'
|
|
});
|
|
legend.onAdd = function() {
|
|
var div = L.DomUtil.create('div', 'legend');
|
|
div.innerHTML = `
|
|
<strong>Kategori TPS</strong><br>
|
|
<i style="background:#198754"></i> TPS<br>
|
|
<i style="background:#0d6efd"></i> TPS 3R<br>
|
|
<i style="background:#dc3545"></i> TPA
|
|
`;
|
|
return div;
|
|
};
|
|
legend.addTo(map);
|
|
|
|
function getDistance(lat1, lon1, lat2, lon2) {
|
|
const R = 6371;
|
|
const dLat = (lat2 - lat1) * Math.PI / 180;
|
|
const dLon = (lon2 - lon1) * Math.PI / 180;
|
|
const a =
|
|
Math.sin(dLat / 2) ** 2 +
|
|
Math.cos(lat1 * Math.PI / 180) *
|
|
Math.cos(lat2 * Math.PI / 180) *
|
|
Math.sin(dLon / 2) ** 2;
|
|
return R * (2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)));
|
|
}
|
|
|
|
document.getElementById('btnLokasi').addEventListener('click', function() {
|
|
|
|
if (!navigator.geolocation) {
|
|
alert('Browser tidak mendukung GPS');
|
|
return;
|
|
}
|
|
|
|
navigator.geolocation.getCurrentPosition(pos => {
|
|
let userLat = pos.coords.latitude;
|
|
let userLng = pos.coords.longitude;
|
|
|
|
L.circleMarker([userLat, userLng], {
|
|
radius: 6,
|
|
color: '#0d6efd',
|
|
fillColor: '#0d6efd',
|
|
fillOpacity: 1,
|
|
className: 'user-location'
|
|
}).addTo(map)
|
|
.bindPopup('Lokasi Anda')
|
|
.openPopup();
|
|
|
|
setInterval(() => {
|
|
let pulse = L.circle([userLat, userLng], {
|
|
radius: 40,
|
|
color: '#0d6efd',
|
|
fillColor: '#0d6efd',
|
|
fillOpacity: 0.35,
|
|
weight: 0
|
|
}).addTo(map);
|
|
|
|
setTimeout(() => map.removeLayer(pulse), 1000);
|
|
}, 1200);
|
|
|
|
let nearest = null;
|
|
let minDist = Infinity;
|
|
|
|
markers.forEach(m => {
|
|
let tps = m.tpsData;
|
|
let dist = getDistance(userLat, userLng, tps.latitude, tps.longitude);
|
|
if (dist < minDist) {
|
|
minDist = dist;
|
|
nearest = m;
|
|
}
|
|
});
|
|
|
|
if (nearest) {
|
|
nearest.setIcon(iconNear);
|
|
nearest.openPopup();
|
|
map.setView(nearest.getLatLng(), 15);
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<section class="geo-stat-section">
|
|
<div class="geo-bg"></div>
|
|
|
|
<div class="container position-relative" data-aos="fade-up" data-aos-delay="100">
|
|
<div class="row align-items-center">
|
|
|
|
<!-- KIRI -->
|
|
<div class="mb-4 col-lg-5 mb-lg-0">
|
|
<span class="geo-badge">Statistik SIG TPS</span>
|
|
<h2 class="geo-title">
|
|
Pemetaan & Pengelolaan<br>
|
|
Sampah Kabupaten Nganjuk
|
|
</h2>
|
|
<p class="geo-desc">
|
|
Menampilkan jumlah fasilitas persampahan berbasis
|
|
Sistem Informasi Geografis secara terintegrasi.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- KANAN -->
|
|
<div class="col-lg-7">
|
|
<div class="geo-stats">
|
|
|
|
<div class="geo-item">
|
|
<div class="geo-icon">
|
|
<i class="bi bi-trash"></i>
|
|
</div>
|
|
<h3 class="counter" data-target="{{ $jumlahTps }}">0</h3>
|
|
<span>TPS</span>
|
|
</div>
|
|
|
|
<div class="geo-line"></div>
|
|
|
|
<div class="geo-item">
|
|
<div class="geo-icon recycle">
|
|
<i class="bi bi-recycle"></i>
|
|
</div>
|
|
<h3 class="counter" data-target="{{ $jumlahTps3r }}">0</h3>
|
|
<span>TPS 3R</span>
|
|
</div>
|
|
|
|
<div class="geo-line"></div>
|
|
|
|
<div class="geo-item">
|
|
<div class="geo-icon location">
|
|
<i class="bi bi-geo-alt"></i>
|
|
</div>
|
|
<h3 class="counter" data-target="{{ $jumlahTpa }}">0</h3>
|
|
<span>TPA</span>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
document.querySelectorAll(".counter").forEach(el => {
|
|
const target = +el.dataset.target;
|
|
let val = 0;
|
|
|
|
const step = () => {
|
|
val += Math.ceil(target / 90);
|
|
if (val < target) {
|
|
el.textContent = val;
|
|
requestAnimationFrame(step);
|
|
} else {
|
|
el.textContent = target;
|
|
}
|
|
};
|
|
step();
|
|
});
|
|
});
|
|
</script>
|
|
</section>
|
|
@endsection
|