225 lines
10 KiB
PHP
225 lines
10 KiB
PHP
@extends('admin.layouts.layout')
|
|
@section('title', 'Show Data Pengiriman | Skripsi 2024')
|
|
@section('nav', 'Detail Data Pengiriman')
|
|
@section('content')
|
|
|
|
<div class="pagetitle">
|
|
<nav>
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="{{ route('dashboard') }}" class="text-decoration-none text-black">Dashboard</a></li>
|
|
<li class="breadcrumb-item"><a href="{{route('desa.index')}}" class="text-decoration-none text-black">Pengiriman</a></li>
|
|
<li class="breadcrumb-item active">Data Pengiriman {{$kode}}</li>
|
|
</ol>
|
|
</nav>
|
|
</div>
|
|
|
|
<div class="content">
|
|
<div class="row">
|
|
<div class="col-lg-11 mb-3">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-center">Data Pengiriman {{$kode}}</h5>
|
|
@if (Session::has('error'))
|
|
<div class="alert alert-warning alert-dismissible fade show" role="alert">
|
|
<i class="bi bi-exclamation-triangle me-1"></i> {{ Session::get('error') }}.
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
</div>
|
|
@endif
|
|
|
|
<div id="map" style="width: 100%; height: 450px; z-index : 0;"></div>
|
|
@if (Auth::user()->role == 'Admin')
|
|
|
|
<h5 class="card-title text-center p-3">Perhitungan Metode</h5>
|
|
<div class="table-responsive" id="perbandingan-container">
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th>Perbandingan</th>
|
|
<th>Rute</th>
|
|
<th>Jarak Total</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="perbandingan-body">
|
|
<!-- Data perbandingan akan ditampilkan di sini -->
|
|
</tbody>
|
|
</table>
|
|
<div id="hasil-akhir">
|
|
<!-- Jarak terdekat dari semua perbandingan akan ditampilkan di sini -->
|
|
</div>
|
|
</div>
|
|
@elseif (Auth::user()->role == 'Kurir')
|
|
<div class="table-responsive" id="perbandingan-container">
|
|
<table class="table" hidden>
|
|
<thead>
|
|
<tr>
|
|
<th>Perbandingan</th>
|
|
<th>Rute</th>
|
|
<th>Jarak Total</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="perbandingan-body">
|
|
<!-- Data perbandingan akan ditampilkan di sini -->
|
|
</tbody>
|
|
</table>
|
|
<div id="hasil-akhir" class="mt-3">
|
|
<!-- Jarak terdekat dari semua perbandingan akan ditampilkan di sini -->
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
|
|
@push('scripts')
|
|
<script>
|
|
// Mendapatkan data perbandingan dari server
|
|
let perbandingan = @json($perbandingan);
|
|
let perbandinganBody = document.getElementById('perbandingan-body');
|
|
let hasilAkhirDiv = document.getElementById('hasil-akhir');
|
|
let allDistances = []; // Array untuk menyimpan jarak terdekat dari setiap perbandingan
|
|
let allMarkers = [];
|
|
let shortestDistance = Infinity;
|
|
let shortestDusunNames = null; // Variable untuk menyimpan nama dusun dengan jarak terdekat
|
|
|
|
// Inisialisasi peta Leaflet
|
|
let map = L.map('map').setView([-7.582472795110048, 112.72471990234797], 14);
|
|
|
|
// Tambahkan tile layer OpenStreetMap
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
|
}).addTo(map);
|
|
|
|
function showComparisonWithDelay(index) {
|
|
if (index >= perbandingan.length) {
|
|
let minDistanceDiv = document.createElement('div');
|
|
minDistanceDiv.innerHTML = `
|
|
<p>Dari ${perbandingan.length} perbandingan. Didapati urutan jalur terpendek yaitu : ${shortestDusunNames.map(dusun => dusun.nama).join(' - ')} Jarak Terdekat : <strong>${shortestDistance.toFixed(2)} km</strong></p>
|
|
`;
|
|
hasilAkhirDiv.appendChild(minDistanceDiv);
|
|
|
|
let waypoints = shortestDusunNames.map(dusun => {
|
|
return L.latLng(dusun.latitude, dusun.longitude);
|
|
});
|
|
|
|
waypoints.push(L.latLng(shortestDusunNames[0].latitude, shortestDusunNames[0].longitude));
|
|
|
|
let control = L.Routing.control({
|
|
waypoints: waypoints,
|
|
createMarker: function(i, wp, nWps) { // Customize marker creation function
|
|
if (i === 0) { // Start marker
|
|
return L.marker(wp.latLng, {
|
|
icon: L.divIcon({
|
|
className: 'my-start-icon',
|
|
html: '<div class="card" style="width: 100px;"><div class="card-body text-center">Mulai</div></div>',
|
|
iconSize: [150, 150],
|
|
iconAnchor: [50, 90] // Posisi card di tengah marker
|
|
}),
|
|
draggable: false
|
|
});
|
|
} else if (i === nWps - 1) { // End marker (same as start marker)
|
|
return L.marker(wp.latLng, {
|
|
icon: L.divIcon({
|
|
className: 'my-end-icon',
|
|
html: '<div class="card" style="width: 100px;"><div class="card-body text-center">Mulai & Selesai</div></div>',
|
|
iconSize: [150, 150],
|
|
iconAnchor: [50, 90] // Posisi card di tengah marker
|
|
}),
|
|
draggable: false
|
|
});
|
|
} else { // Waypoint marker
|
|
return L.marker(wp.latLng, {
|
|
icon: L.divIcon({
|
|
className: 'my-waypoint-icon',
|
|
html: '<div class="card" style="width: 100px;"><div class="card-body text-center">Titik ' + i + '</div></div>',
|
|
iconSize: [150, 150], // Sesuaikan dengan ukuran card
|
|
iconAnchor: [50, 90] // Posisi card di tengah marker
|
|
}),
|
|
draggable: false
|
|
});
|
|
}
|
|
}
|
|
|
|
}).addTo(map);
|
|
|
|
let markers = shortestDusunNames.map((dusun, index) => {
|
|
let marker = L.marker(L.latLng(dusun.latitude, dusun.longitude))
|
|
.bindPopup(`Dusun ${dusun.nama}`); // Menggunakan nama dusun sebagai teks popup
|
|
return marker;
|
|
});
|
|
|
|
// Tambahkan marker kembali ke titik awal
|
|
let startMarker = L.marker(L.latLng(shortestDusunNames[0].latitude, shortestDusunNames[0].longitude))
|
|
.bindPopup(`Dusun ${shortestDusunNames[0].nama}`);
|
|
markers.push(startMarker);
|
|
|
|
// Tambahkan semua marker ke peta
|
|
markers.forEach(marker => {
|
|
marker.addTo(map);
|
|
});
|
|
|
|
// Tambahkan semua marker ke dalam array allMarkers
|
|
allMarkers.push(markers);
|
|
|
|
return;
|
|
}
|
|
|
|
const banding = perbandingan[index];
|
|
const dusunA = L.latLng(banding.dusun_a.latitude, banding.dusun_a.longitude);
|
|
const dusunB = L.latLng(banding.dusun_b.latitude, banding.dusun_b.longitude);
|
|
const dusunC = L.latLng(banding.dusun_c.latitude, banding.dusun_c.longitude);
|
|
|
|
let wp1 = new L.Routing.Waypoint(dusunA);
|
|
let wp2 = new L.Routing.Waypoint(dusunB);
|
|
let wp3 = new L.Routing.Waypoint(dusunC);
|
|
let wp4 = new L.Routing.Waypoint(dusunA);
|
|
|
|
let routeUs = L.Routing.osrmv1();
|
|
routeUs.route([wp1, wp2, wp3, wp4], (err, routes) => {
|
|
if (!err) {
|
|
let bestDistance = Infinity;
|
|
let bestRoute = null;
|
|
|
|
// Mencari rute terpendek
|
|
routes.forEach((route, i) => {
|
|
if (route.summary.totalDistance < bestDistance) {
|
|
bestDistance = route.summary.totalDistance;
|
|
bestRoute = route;
|
|
}
|
|
});
|
|
|
|
// Konversi jarak dari meter menjadi kilometer
|
|
let distanceInKm = bestDistance / 1000;
|
|
|
|
// Menambahkan jarak terdekat dari perbandingan ini ke dalam array
|
|
allDistances.push(distanceInKm);
|
|
|
|
// Membuat elemen HTML untuk menampilkan jarak terpendek dan nama dusun
|
|
let tr = document.createElement('tr');
|
|
tr.innerHTML = `
|
|
<td>Perbandingan ${index + 1}</td>
|
|
<td>${banding.dusun_a.nama} - ${banding.dusun_b.nama} - ${banding.dusun_c.nama} - ${banding.dusun_a.nama}</td>
|
|
<td>${distanceInKm.toFixed(2)} km</td>
|
|
`;
|
|
perbandinganBody.appendChild(tr);
|
|
|
|
// Jika jarak terdekat dari perbandingan ini lebih kecil dari jarak terdekat sebelumnya
|
|
if (distanceInKm < shortestDistance) {
|
|
shortestDistance = distanceInKm;
|
|
shortestDusunNames = [banding.dusun_a, banding.dusun_b, banding.dusun_c, ]; // simpan nama dusun terpendek
|
|
}
|
|
}
|
|
});
|
|
setTimeout(() => {
|
|
showComparisonWithDelay(index + 1);
|
|
}, 1000);
|
|
}
|
|
showComparisonWithDelay(0);
|
|
|
|
</script>
|
|
|
|
@endpush
|