sig connect database
This commit is contained in:
parent
1246e673ba
commit
d5a6dc8cf7
|
|
@ -3,69 +3,37 @@
|
||||||
namespace App\Http\Controllers;
|
namespace App\Http\Controllers;
|
||||||
|
|
||||||
use Illuminate\Http\Request;
|
use Illuminate\Http\Request;
|
||||||
|
use App\Models\LokasiTps;
|
||||||
|
|
||||||
class SIGController extends Controller
|
class SIGController extends Controller
|
||||||
{
|
{
|
||||||
|
/**
|
||||||
|
* Menampilkan peta TPS (Landing Page SIG)
|
||||||
|
*/
|
||||||
public function index()
|
public function index()
|
||||||
{
|
{
|
||||||
$tps = [
|
// Ambil semua data TPS dari database
|
||||||
[
|
$tps = LokasiTps::select(
|
||||||
'id' => 1,
|
'id_tps',
|
||||||
'nama' => 'TPS Berbek',
|
'nama_tps',
|
||||||
'jenis' => 'TPS',
|
'alamat_tps',
|
||||||
'alamat' => 'Kecamatan Berbek',
|
'status_tps',
|
||||||
'lat' => -7.5978,
|
'latitude',
|
||||||
'lng' => 111.917
|
'longitude',
|
||||||
],
|
'foto_tps',
|
||||||
[
|
'kategori_tps_id'
|
||||||
'id' => 2,
|
)->get();
|
||||||
'nama' => 'TPS 3R Loceret',
|
|
||||||
'jenis' => 'TPS 3R',
|
|
||||||
'alamat' => 'Kecamatan Loceret',
|
|
||||||
'lat' => -7.6280,
|
|
||||||
'lng' => 111.910
|
|
||||||
],
|
|
||||||
[
|
|
||||||
'id' => 3,
|
|
||||||
'nama' => 'TPA Nganjuk',
|
|
||||||
'jenis' => 'TPA',
|
|
||||||
'alamat' => 'Kabupaten Nganjuk',
|
|
||||||
'lat' => -7.6140,
|
|
||||||
'lng' => 111.900
|
|
||||||
]
|
|
||||||
];
|
|
||||||
|
|
||||||
return view('user.sig-tps', compact('tps'));
|
return view('user.sig-tps', compact('tps'));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Menampilkan detail TPS
|
||||||
|
*/
|
||||||
public function show($id)
|
public function show($id)
|
||||||
{
|
{
|
||||||
$data = [
|
$tps = LokasiTps::with('kategori')->findOrFail($id);
|
||||||
1 => [
|
|
||||||
'nama' => 'TPS Berbek',
|
|
||||||
'jenis' => 'TPS',
|
|
||||||
'alamat' => 'Kecamatan Berbek',
|
|
||||||
'foto' => '/img/tps/berbek.jpg',
|
|
||||||
'keterangan' => 'TPS aktif melayani wilayah Berbek'
|
|
||||||
],
|
|
||||||
2 => [
|
|
||||||
'nama' => 'TPS 3R Loceret',
|
|
||||||
'jenis' => 'TPS 3R',
|
|
||||||
'alamat' => 'Kecamatan Loceret',
|
|
||||||
'foto' => '/img/tps/loceret.jpg',
|
|
||||||
'keterangan' => 'TPS dengan sistem 3R'
|
|
||||||
],
|
|
||||||
3 => [
|
|
||||||
'nama' => 'TPA Nganjuk',
|
|
||||||
'jenis' => 'TPA',
|
|
||||||
'alamat' => 'Kabupaten Nganjuk',
|
|
||||||
'foto' => '/img/tps/tpa-nganjuk.jpg',
|
|
||||||
'keterangan' => 'Tempat Pemrosesan Akhir Kabupaten Nganjuk'
|
|
||||||
]
|
|
||||||
];
|
|
||||||
|
|
||||||
return view('user.detail-tps', [
|
return view('user.detail-tps', compact('tps'));
|
||||||
'tps' => $data[$id]
|
|
||||||
]);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -291,7 +291,7 @@
|
||||||
<!-- SECTION TITLE -->
|
<!-- SECTION TITLE -->
|
||||||
<div class="section-title" data-aos="fade-up">
|
<div class="section-title" data-aos="fade-up">
|
||||||
<h2>Peta Sebaran TPS</h2>
|
<h2>Peta Sebaran TPS</h2>
|
||||||
<p>Sistem Informasi Geografis Tempat Pembuangan Sampah</p>
|
<p>Sistem Informasi Geografis Tempat Pembuangan Sampah di Kabupaten Nganjuk</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- MAP -->
|
<!-- MAP -->
|
||||||
|
|
@ -390,84 +390,75 @@ function markerIcon(color) {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<!-- Contact Section -->
|
<!-- Aduan Section -->
|
||||||
<section id="contact" class="contact section">
|
<section id="aduan" class="contact section">
|
||||||
|
|
||||||
<!-- Section Title -->
|
<!-- Section Title -->
|
||||||
<div class="container section-title" data-aos="fade-up">
|
<div class="container section-title" data-aos="fade-up">
|
||||||
<h2>Contact</h2>
|
<h2>Aduan TPS</h2>
|
||||||
<p>Necessitatibus eius consequatur ex aliquid fuga eum quidem sint consectetur velit</p>
|
<p>Laporkan permasalahan Tempat Pembuangan Sampah (TPS) di sekitar Anda</p>
|
||||||
</div><!-- End Section Title -->
|
</div>
|
||||||
|
<!-- End Section Title -->
|
||||||
|
|
||||||
<div class="container" data-aos="fade">
|
<div class="container" data-aos="fade">
|
||||||
|
<div class="row gy-4 gx-lg-5 align-items-center">
|
||||||
|
|
||||||
<div class="row gy-5 gx-lg-5">
|
<!-- KIRI: INFO ADUAN -->
|
||||||
|
<div class="col-lg-6">
|
||||||
<div class="col-lg-4">
|
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<h3>Get in touch</h3>
|
<h3>Temukan Masalah di TPS?</h3>
|
||||||
<p>Et id eius voluptates atque nihil voluptatem enim in tempore minima sit ad mollitia commodi
|
<p>
|
||||||
minus.</p>
|
Jika Anda menemukan TPS yang penuh, kotor, atau bermasalah,
|
||||||
|
silakan laporkan agar dapat segera ditindaklanjuti oleh petugas.
|
||||||
|
</p>
|
||||||
|
|
||||||
<div class="info-item d-flex">
|
<div class="info-item d-flex">
|
||||||
<i class="bi bi-geo-alt flex-shrink-0"></i>
|
<i class="bi bi-exclamation-triangle-fill flex-shrink-0"></i>
|
||||||
<div>
|
<div>
|
||||||
<h4>Location:</h4>
|
<h4>Cepat & Mudah</h4>
|
||||||
<p>A108 Adam Street, New York, NY 535022</p>
|
<p>Aduan dapat dikirim hanya dalam beberapa langkah.</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div><!-- End Info Item -->
|
|
||||||
|
|
||||||
<div class="info-item d-flex">
|
<div class="info-item d-flex">
|
||||||
<i class="bi bi-envelope flex-shrink-0"></i>
|
<i class="bi bi-geo-alt-fill flex-shrink-0"></i>
|
||||||
<div>
|
<div>
|
||||||
<h4>Email:</h4>
|
<h4>Berbasis Lokasi TPS</h4>
|
||||||
<p>info@example.com</p>
|
<p>Pilih TPS langsung dari peta.</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div><!-- End Info Item -->
|
|
||||||
|
|
||||||
<div class="info-item d-flex">
|
<div class="info-item d-flex">
|
||||||
<i class="bi bi-phone flex-shrink-0"></i>
|
<i class="bi bi-chat-dots-fill flex-shrink-0"></i>
|
||||||
<div>
|
<div>
|
||||||
<h4>Call:</h4>
|
<h4>Ditanggapi Admin</h4>
|
||||||
<p>+1 5589 55488 55</p>
|
<p>Aduan akan diproses oleh admin terkait.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div><!-- End Info Item -->
|
|
||||||
|
|
||||||
|
<!-- KANAN: CTA BUTTON -->
|
||||||
|
<div class="col-lg-6 text-center">
|
||||||
|
<div class="card shadow-sm p-4">
|
||||||
|
<h4 class="mb-3">Ingin Mengajukan Aduan?</h4>
|
||||||
|
<p class="mb-4">
|
||||||
|
Klik tombol di bawah ini untuk memilih TPS dan mengisi form aduan.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{{-- <a href="#map" class="btn btn-outline-success mb-2 w-100">
|
||||||
|
<i class="bi bi-map-fill me-1"></i> Pilih TPS di Peta
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<p class="small text-muted my-2">atau</p> --}}
|
||||||
|
|
||||||
|
<a href="{{ route('user.aduan-tps', $tpsPertama->id ?? 1) }}" class="btn btn-danger w-100">
|
||||||
|
<i class="bi bi-megaphone-fill me-1"></i> Laporkan Aduan
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-lg-8">
|
|
||||||
<form action="forms/contact.php" method="post" role="form" class="php-email-form">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-6 form-group">
|
|
||||||
<input type="text" name="name" class="form-control" id="name"
|
|
||||||
placeholder="Your Name" required="">
|
|
||||||
</div>
|
|
||||||
<div class="col-md-6 form-group mt-3 mt-md-0">
|
|
||||||
<input type="email" class="form-control" name="email" id="email"
|
|
||||||
placeholder="Your Email" required="">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-group mt-3">
|
|
||||||
<input type="text" class="form-control" name="subject" id="subject"
|
|
||||||
placeholder="Subject" required="">
|
|
||||||
</div>
|
|
||||||
<div class="form-group mt-3">
|
|
||||||
<textarea class="form-control" name="message" placeholder="Message" required=""></textarea>
|
|
||||||
</div>
|
|
||||||
<div class="my-3">
|
|
||||||
<div class="loading">Loading</div>
|
|
||||||
<div class="error-message"></div>
|
|
||||||
<div class="sent-message">Your message has been sent. Thank you!</div>
|
|
||||||
</div>
|
|
||||||
<div class="text-center"><button type="submit">Send Message</button></div>
|
|
||||||
</form>
|
|
||||||
</div><!-- End Contact Form -->
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
|
||||||
|
|
@ -5,31 +5,71 @@
|
||||||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
#call-to-action.call-to-action {
|
||||||
|
padding: 0 !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#call-to-action .container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1100px;
|
||||||
|
border-radius: 12px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
#mapTPS {
|
#mapTPS {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 450px;
|
height: 450px;
|
||||||
border-radius: 14px;
|
position: relative;
|
||||||
box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.leaflet-popup-content-wrapper {
|
.leaflet-popup-content-wrapper {
|
||||||
border-radius: 12px;
|
border-radius: 14px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.popup-btn {
|
header,
|
||||||
display: inline-block;
|
.navbar,
|
||||||
margin-top: 8px;
|
#header {
|
||||||
padding: 6px 12px;
|
position: sticky;
|
||||||
background: #198754;
|
top: 0;
|
||||||
color: #fff;
|
z-index: 1000;
|
||||||
border-radius: 6px;
|
background: #fff;
|
||||||
font-size: 13px;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.popup-btn:hover {
|
.leaflet-top {
|
||||||
background: #157347;
|
top: 0px !important;
|
||||||
color: #fff;
|
z-index: 400 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leaflet-bottom {
|
||||||
|
bottom: 0px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend {
|
||||||
|
background: white;
|
||||||
|
padding: 10px 12px;
|
||||||
|
border-radius: 10px;
|
||||||
|
line-height: 18px;
|
||||||
|
color: #333;
|
||||||
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend i {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
float: left;
|
||||||
|
margin-right: 8px;
|
||||||
|
opacity: 1;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<!-- Page Title -->
|
<!-- Page Title -->
|
||||||
|
|
@ -52,74 +92,100 @@
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
const map = L.map('mapTPS').setView([-7.6078, 111.903], 12);
|
// =============================
|
||||||
|
// INIT MAP
|
||||||
|
// =============================
|
||||||
|
var map = L.map('mapTPS', {
|
||||||
|
zoomControl: true
|
||||||
|
}).setView([-7.6078, 111.903], 12);
|
||||||
|
|
||||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||||
attribution: '© OpenStreetMap',
|
attribution: "© OpenStreetMap contributors",
|
||||||
maxZoom: 19
|
maxZoom: 19
|
||||||
}).addTo(map);
|
}).addTo(map);
|
||||||
|
|
||||||
function pinIcon(color) {
|
// =============================
|
||||||
return L.divIcon({
|
// ICON MARKER PER KATEGORI
|
||||||
className: '',
|
// =============================
|
||||||
html: `
|
function markerIcon(color) {
|
||||||
<svg width="32" height="32" viewBox="0 0 24 24">
|
return new L.Icon({
|
||||||
<path fill="${color}"
|
iconUrl: `https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-${color}.png`,
|
||||||
d="M12 2C8.13 2 5 5.13 5 9
|
shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
|
||||||
c0 5.25 7 13 7 13
|
iconSize: [25, 41],
|
||||||
s7-7.75 7-13
|
iconAnchor: [12, 41],
|
||||||
c0-3.87-3.13-7-7-7z"/>
|
popupAnchor: [1, -34],
|
||||||
<circle cx="12" cy="9" r="2.5" fill="white"/>
|
shadowSize: [41, 41]
|
||||||
</svg>
|
|
||||||
`,
|
|
||||||
iconSize: [32, 32],
|
|
||||||
iconAnchor: [16, 32],
|
|
||||||
popupAnchor: [0, -28]
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
const dataTPS = [{
|
var iconTPS = markerIcon('green'); // TPS
|
||||||
id: 1,
|
var iconTPS3R = markerIcon('blue'); // TPS 3R
|
||||||
nama: "TPS Berbek",
|
var iconTPA = markerIcon('red'); // TPA
|
||||||
jenis: "TPS",
|
var iconDefault = markerIcon('black');
|
||||||
alamat: "Kecamatan Berbek",
|
|
||||||
lat: -7.5978,
|
|
||||||
lng: 111.917,
|
|
||||||
icon: pinIcon('#198754')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
nama: "TPS 3R Loceret",
|
|
||||||
jenis: "TPS 3R",
|
|
||||||
alamat: "Kecamatan Loceret",
|
|
||||||
lat: -7.6280,
|
|
||||||
lng: 111.910,
|
|
||||||
icon: pinIcon('#0d6efd')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
nama: "TPA Nganjuk",
|
|
||||||
jenis: "TPA",
|
|
||||||
alamat: "Kabupaten Nganjuk",
|
|
||||||
lat: -7.6140,
|
|
||||||
lng: 111.900,
|
|
||||||
icon: pinIcon('#dc3545')
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
dataTPS.forEach(item => {
|
// =============================
|
||||||
L.marker([item.lat, item.lng], {
|
// DATA TPS DARI DATABASE
|
||||||
icon: item.icon
|
// =============================
|
||||||
|
var tpsData = @json($tps);
|
||||||
|
|
||||||
|
tpsData.forEach(function(tps) {
|
||||||
|
if (tps.latitude && tps.longitude) {
|
||||||
|
|
||||||
|
let iconKategori = iconDefault;
|
||||||
|
|
||||||
|
// SESUAIKAN ID KATEGORI
|
||||||
|
if (tps.kategori_tps_id == 3) {
|
||||||
|
iconKategori = iconTPS;
|
||||||
|
} else if (tps.kategori_tps_id == 5) {
|
||||||
|
iconKategori = iconTPS3R;
|
||||||
|
} else if (tps.kategori_tps_id == 6) {
|
||||||
|
iconKategori = iconTPA;
|
||||||
|
}
|
||||||
|
|
||||||
|
L.marker([tps.latitude, tps.longitude], {
|
||||||
|
icon: iconKategori
|
||||||
})
|
})
|
||||||
.addTo(map)
|
.addTo(map)
|
||||||
.bindPopup(`
|
.bindPopup(`
|
||||||
<strong>${item.nama}</strong><br>
|
<div style="min-width:220px">
|
||||||
<small>${item.jenis}</small><br>
|
<strong style="font-size:15px">${tps.nama_tps}</strong><br>
|
||||||
<small>${item.alamat}</small><br>
|
<small>${tps.alamat_tps ?? '-'}</small><br>
|
||||||
<a href="/tps/${item.id}" class="popup-btn">
|
<span class="badge bg-success mt-1">${tps.status_tps ?? '-'}</span>
|
||||||
Lihat Detail
|
|
||||||
|
<div style="margin-top:10px; display:flex; gap:6px;">
|
||||||
|
<a href="/tps/${tps.id}"
|
||||||
|
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>
|
||||||
`);
|
|
||||||
|
<a href="/aduan/create/${tps.id}"
|
||||||
|
style="flex:1; text-align:center; padding:6px 8px; background:#dc3545; color:#fff; border-radius:6px; font-size:13px; text-decoration:none;">
|
||||||
|
Aduan
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// =============================
|
||||||
|
// LEGEND
|
||||||
|
// =============================
|
||||||
|
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);
|
||||||
</script>
|
</script>
|
||||||
@endsection
|
@endsection
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue