221 lines
11 KiB
Plaintext
221 lines
11 KiB
Plaintext
@{
|
|
Layout = "~/Views/Admin/Transport/SpjDriver/Shared/_Layout.cshtml";
|
|
ViewData["Title"] = "Detail Penjemputan";
|
|
}
|
|
|
|
<div class="w-full lg:max-w-sm mx-auto min-h-screen">
|
|
<div class="bg-cyan-500 text-white px-4 py-6 rounded-b-3xl relative pb-12">
|
|
<div class="flex items-center justify-center relative">
|
|
<a href="@Url.Action("DetailPenjemputan", "SpjDriver")" class="absolute left-0 p-1 hover:bg-white/10 rounded-full transition-colors">
|
|
<i class="w-5 h-5" data-lucide="chevron-left"></i>
|
|
</a>
|
|
<h1 class="text-xl font-bold">Detail Lokasi</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-center -mt-10 mb-6 relative">
|
|
<div class="bg-cyan-100 border border-cyan-400 px-4 py-2 rounded-xl shadow flex flex-col items-center">
|
|
<span class="text-green-700 font-bold text-lg">B 9632 TOR</span>
|
|
<span class="text-cyan-500 text-xs mt-1">(JRC 005)</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="px-6">
|
|
<div class="flex justify-center">
|
|
<span class="inline-flex items-center px-4 py-1 bg-gradient-to-r from-green-500 to-green-400 text-white rounded-full text-xs font-semibold shadow-md">
|
|
PENGANGKUTAN
|
|
</span>
|
|
</div>
|
|
|
|
<div class="text-center space-y-2">
|
|
<h2 class="text-xl font-extrabold text-gray-800 tracking-wide drop-shadow">CV Tri Berkah Sejahtera</h2>
|
|
<p class="text-gray-500 text-sm bg-gray-100 rounded px-2 py-1 inline-block shadow">SPJ/07-2025/PKM/000476</p>
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<h3 class="font-semibold text-gray-800 text-center tracking-wider">Alamat</h3>
|
|
<p class="text-gray-600 text-sm text-center leading-relaxed px-4">
|
|
Kp. Pertanian II Rt.004 Rw.001 Kel. Klender Kec, Duren Sawit, Kota Adm. Jakarta Timur 13470
|
|
</p>
|
|
</div>
|
|
|
|
@* <div class="space-y-6">
|
|
<form method="post" enctype="multipart/form-data">
|
|
<h3 class="font-bold text-gray-800 text-center text-lg tracking-wide mb-4">Masukkan Odometer</h3>
|
|
<div class="flex justify-center">
|
|
<div class="relative flex items-center justify-center">
|
|
<img src="@Url.Content("~/driver/odo_simple.svg")" class="overflow-visible drop-shadow-lg scale-110" alt="">
|
|
<div class="absolute bottom-8 left-1/2 transform -translate-x-1/2">
|
|
<input type="text" inputmode="numeric" pattern="[0-9]*" maxlength="7" name="Odometer" id="input-odometer" class="bg-gray-900 text-green-400 px-4 py-2 rounded-lg text-lg font-mono tracking-widest text-center w-36 outline-none border-2 border-green-400 focus:ring-2 focus:ring-cyan-400 transition" placeholder="000000" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<input type="hidden" name="Latitude" id="input-latitude" />
|
|
<input type="hidden" name="Longitude" id="input-longitude" />
|
|
<input type="hidden" name="AlamatJalan" id="input-alamat-jalan" />
|
|
<div class="pt-6 flex gap-3">
|
|
<a href="@Url.Action("BatalJemput", "SpjDriver")" class="w-full bg-red-500 text-white py-3 rounded-xl font-bold text-lg shadow hover:scale-105 hover:bg-red-600 transition-all duration-200 flex items-center justify-center gap-2">
|
|
Batal Angkut
|
|
</a>
|
|
<button type="submit" class="hover:cursor-pointer w-full bg-gradient-to-r from-cyan-500 to-cyan-400 text-white py-3 rounded-xl font-bold text-lg shadow-xl hover:scale-105 hover:bg-cyan-600 transition-all duration-200 flex items-center justify-center gap-2">
|
|
Submit
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div> *@
|
|
|
|
<div class="mt-6 space-y-4">
|
|
<h3 class="font-bold text-gray-800 text-center text-lg tracking-wide">Data Pengangkutan</h3>
|
|
|
|
<div class="bg-gray-50 rounded-xl p-4 shadow-sm">
|
|
<div class="mb-4">
|
|
<label for="input-berat" class="block text-sm font-medium text-gray-700 mb-1">Berat Sampah (kg)</label>
|
|
<div class="relative">
|
|
<input type="number" step="0.01" min="0" name="BeratSampah" id="input-berat"
|
|
class="w-full bg-white border border-gray-300 text-gray-900 rounded-lg px-4 py-2.5
|
|
focus:ring-2 focus:ring-cyan-400 focus:border-cyan-400 transition-all"
|
|
placeholder="0.00" required />
|
|
<div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
|
|
<span class="text-gray-500">kg</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="input-tanggal" class="block text-sm font-medium text-gray-700 mb-1">Tanggal Pengangkutan</label>
|
|
<input type="datetime-local" name="TanggalPengangkutan" id="input-tanggal"
|
|
class="w-full bg-white border border-gray-300 text-gray-900 rounded-lg px-4 py-2.5
|
|
focus:ring-2 focus:ring-cyan-400 focus:border-cyan-400 transition-all"
|
|
required />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-6 mb-16">
|
|
<form method="post" action="@Url.Action("SubmitPenjemputan", "SpjDriver")" class="space-y-4">
|
|
<input type="hidden" name="BeratSampah" id="hidden-berat" />
|
|
<input type="hidden" name="TanggalPengangkutan" id="hidden-tanggal" />
|
|
|
|
<button type="submit" class="w-full bg-gradient-to-r from-cyan-500 to-cyan-400 text-white py-3 rounded-xl font-bold text-lg shadow-xl hover:scale-105 hover:bg-cyan-600 transition-all duration-200 flex items-center justify-center gap-2">
|
|
<i class="w-5 h-5" data-lucide="check-circle"></i>
|
|
Simpan Data Pengangkutan
|
|
</button>
|
|
|
|
<a href="@Url.Action("DetailPenjemputan", "SpjDriver")" class="block text-center w-full bg-gray-200 text-gray-700 py-3 rounded-xl font-medium shadow hover:bg-gray-300 transition-all duration-200">
|
|
Kembali
|
|
</a>
|
|
</form>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const form = document.querySelector('form');
|
|
const inputBerat = document.getElementById('input-berat');
|
|
const inputTanggal = document.getElementById('input-tanggal');
|
|
const hiddenBerat = document.getElementById('hidden-berat');
|
|
const hiddenTanggal = document.getElementById('hidden-tanggal');
|
|
|
|
form.addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
if (!inputBerat.value || !inputTanggal.value) {
|
|
alert('Mohon lengkapi semua data pengangkutan');
|
|
return;
|
|
}
|
|
|
|
hiddenBerat.value = inputBerat.value;
|
|
hiddenTanggal.value = inputTanggal.value;
|
|
|
|
this.submit();
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<partial name="~/Views/Admin/Transport/SpjDriver/Shared/Components/_Navigation.cshtml" />
|
|
</div>
|
|
|
|
<register-block dynamic-section="scripts" key="jsDetailPenjemputan">
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
var odoInput = document.getElementById('input-odometer');
|
|
if (odoInput) {
|
|
odoInput.addEventListener('focus', function() {
|
|
setTimeout(function() {
|
|
odoInput.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
|
}, 300);
|
|
});
|
|
odoInput.addEventListener('input', function(e) {
|
|
this.value = this.value.replace(/[^0-9]/g, '');
|
|
});
|
|
odoInput.addEventListener('paste', function(e) {
|
|
e.preventDefault();
|
|
var text = (e.clipboardData || window.clipboardData).getData('text');
|
|
this.value = text.replace(/[^0-9]/g, '');
|
|
});
|
|
odoInput.addEventListener('keypress', function(e) {
|
|
if (e.key.length === 1 && !/[0-9]/.test(e.key)) {
|
|
e.preventDefault();
|
|
}
|
|
});
|
|
}
|
|
|
|
const inputLat = document.getElementById('input-latitude');
|
|
const inputLng = document.getElementById('input-longitude');
|
|
const inputAlamat = document.getElementById('input-alamat-jalan');
|
|
|
|
function reverseGeocode(lat, lng) {
|
|
const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
|
|
|
|
const fetchOptions = {
|
|
method: 'GET',
|
|
headers: {
|
|
'Accept': 'application/json',
|
|
'User-Agent': 'eSPJ-App/1.0'
|
|
}
|
|
};
|
|
|
|
if (isFirefox) {
|
|
fetchOptions.cache = 'force-cache';
|
|
fetchOptions.keepalive = true;
|
|
}
|
|
|
|
fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lng}`, fetchOptions)
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
const address = data.display_name || `${lat}, ${lng}`;
|
|
if (inputLat) inputLat.value = lat;
|
|
if (inputLng) inputLng.value = lng;
|
|
if (inputAlamat) inputAlamat.value = address;
|
|
})
|
|
.catch(() => {
|
|
if (inputLat) inputLat.value = lat;
|
|
if (inputLng) inputLng.value = lng;
|
|
if (inputAlamat) inputAlamat.value = `${lat}, ${lng}`;
|
|
});
|
|
}
|
|
|
|
function getLocationUpdate() {
|
|
if ('geolocation' in navigator) {
|
|
navigator.geolocation.getCurrentPosition(
|
|
function (position) {
|
|
const lat = position.coords.latitude.toFixed(6);
|
|
const lng = position.coords.longitude.toFixed(6);
|
|
reverseGeocode(lat, lng);
|
|
},
|
|
function () {
|
|
if (inputLat) inputLat.value = '';
|
|
if (inputLng) inputLng.value = '';
|
|
if (inputAlamat) inputAlamat.value = 'Lokasi tidak diizinkan';
|
|
}
|
|
);
|
|
} else {
|
|
if (inputLat) inputLat.value = '';
|
|
if (inputLng) inputLng.value = '';
|
|
if (inputAlamat) inputAlamat.value = 'Browser tidak mendukung lokasi';
|
|
}
|
|
}
|
|
|
|
getLocationUpdate();
|
|
});
|
|
</script>
|
|
</register-block> |