507 lines
20 KiB
Plaintext
507 lines
20 KiB
Plaintext
@{
|
|
Layout = "~/Views/Admin/Transport/SpjDriver/Shared/_Layout.cshtml";
|
|
ViewData["Title"] = "Submit Foto Muatan";
|
|
}
|
|
|
|
<div class="w-full lg:max-w-sm mx-auto bg-white min-h-screen">
|
|
<div class="bg-gradient-to-r from-cyan-500 to-cyan-600 text-white px-3 py-4 rounded-b-2xl relative pb-12">
|
|
<div class="flex items-center justify-between">
|
|
<a href="@Url.Action("Index", "Home")" class="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-lg font-bold">Unggah Foto Muatan</h1>
|
|
<div class="w-8"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="px-4 py-6 -mt-6 relative z-10">
|
|
<div class="bg-white rounded-2xl p-5 border border-gray-100">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<div class="w-12 h-12 bg-gradient-to-br from-cyan-100 to-cyan-200 rounded-2xl flex items-center justify-center">
|
|
<i class="w-6 h-6 text-cyan-600" data-lucide="camera"></i>
|
|
</div>
|
|
<div>
|
|
<h2 class="text-lg font-bold text-gray-900">Foto Muatan Kendaraan</h2>
|
|
<p class="text-xs text-gray-500 flex items-center gap-1">
|
|
<i class="w-3 h-3" data-lucide="info"></i>
|
|
Optional
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="upload-area border-2 border-dashed border-gray-300 rounded-xl p-6 text-center hover:border-cyan-400 transition-colors cursor-pointer" id="upload-area">
|
|
<input type="file" name="FotoKondisiKendaraan" accept="image/jpeg,image/png" class="hidden" id="foto-upload">
|
|
<label for="foto-upload" class="cursor-pointer w-full block">
|
|
<div class="relative w-full h-60 bg-center bg-gray-100 rounded-xl flex items-center justify-center mx-auto mb-3 overflow-hidden preview-container" id="preview-container">
|
|
<div id="default-state">
|
|
<div class="upload-icon-container">
|
|
<img class="object-cover" src="~/driver/images/trukk.jpg" alt="contoh gambar">
|
|
<p class="absolute inset-0 flex items-center justify-center text-white">Contoh Foto</p>
|
|
@* <i class="w-8 h-8 text-cyan-600" data-lucide="upload-cloud" id="preview-icon"></i> *@
|
|
</div>
|
|
</div>
|
|
<img id="preview-image" src="#" alt="Preview" style="display:none;position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;" />
|
|
|
|
<!-- Overlay buttons -->
|
|
<div class="preview-overlay" id="preview-overlay" style="display:none;">
|
|
<button type="button" class="overlay-btn" id="edit-preview" aria-label="Edit gambar">
|
|
<i class="w-5 h-5" data-lucide="edit-3"></i>
|
|
</button>
|
|
<button type="button" class="overlay-btn delete" id="close-preview" aria-label="Hapus gambar">
|
|
<i class="w-5 h-5" data-lucide="trash-2"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- File info -->
|
|
<div class="file-info" id="file-info" style="display:none;">
|
|
<span id="file-name">image.jpg</span> • <span id="file-size">0 MB</span>
|
|
</div>
|
|
|
|
<!-- Upload progress -->
|
|
<div class="upload-progress" id="upload-progress"></div>
|
|
</div>
|
|
<div id="upload-text">
|
|
<p class="text-sm text-gray-600 font-medium">Tap untuk unggah foto</p>
|
|
<p class="text-xs text-gray-400 mt-1">atau drag & drop file di sini</p>
|
|
<p class="text-xs text-gray-400 mt-2 flex items-center justify-center gap-1">
|
|
<i class="w-3 h-3" data-lucide="file-type"></i>
|
|
JPG, JPEG, PNG maksimal 10MB
|
|
</p>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="mt-6 mb-2">
|
|
<div class="location-badge rounded-2xl p-4">
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<div class="w-8 h-8 bg-gradient-to-br from-blue-100 to-blue-200 rounded-full flex items-center justify-center">
|
|
|
|
<i class="w-4 h-4 text-blue-600" data-lucide="map-pin"></i>
|
|
</div>
|
|
<span class="text-sm font-medium text-gray-700">Lokasi Anda:</span>
|
|
<button type="button" id="refresh-location" class="ml-auto p-1 hover:bg-gray-100 rounded-full transition-colors">
|
|
<i class="w-4 h-4 text-gray-500" data-lucide="refresh-cw"></i>
|
|
</button>
|
|
</div>
|
|
<p id="userLocationSubmit" class="font-semibold text-xs tracking-wide cursor-pointer underline text-cyan-600 hover:text-cyan-800 transition mt-1 flex items-center gap-2">
|
|
<span>Mendeteksi lokasi...</span>
|
|
</p>
|
|
<p class="text-xs text-gray-400 mt-1">Klik lokasi di atas untuk update posisi Anda</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<form asp-action="UploadFotoMuatan" method="post" enctype="multipart/form-data" class="mt-6" id="upload-form">
|
|
<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="flex gap-3 pt-4">
|
|
<button type="submit" id="submit-btn"
|
|
class="floating-button flex-1 bg-gradient-to-r from-cyan-500 to-cyan-600 text-white font-semibold py-3 rounded-xl hover:from-cyan-600 hover:to-cyan-700 transition-all duration-200 shadow-lg flex items-center justify-center gap-2">
|
|
<i class="w-5 h-5" data-lucide="upload"></i>
|
|
<span>Unggah</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<partial name="~/Views/Admin/Transport/SpjDriver/Shared/Components/_Navigation.cshtml" />
|
|
</div>
|
|
|
|
|
|
<register-block dynamic-section="styles" key="cssSubmit">
|
|
<style>
|
|
.upload-area {
|
|
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.upload-area:hover {
|
|
background: linear-gradient(135deg, #fef7ed 0%, #fed7aa 100%);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
.upload-area.dragover {
|
|
background: linear-gradient(135deg, #fef7ed 0%, #fed7aa 100%);
|
|
border-color: #f97316 !important;
|
|
transform: scale(1.02);
|
|
box-shadow: 0 25px 50px -12px rgba(251, 146, 60, 0.25);
|
|
}
|
|
|
|
.preview-container {
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
|
|
}
|
|
|
|
.preview-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.7);
|
|
opacity: 0;
|
|
transition: all 0.3s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 16px;
|
|
z-index: 10;
|
|
}
|
|
|
|
.preview-container:hover .preview-overlay {
|
|
opacity: 1;
|
|
}
|
|
|
|
.overlay-btn {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
backdrop-filter: blur(10px);
|
|
border: none;
|
|
color: white;
|
|
padding: 12px;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.overlay-btn:hover {
|
|
background: rgba(255, 255, 255, 0.3);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.overlay-btn.delete:hover {
|
|
background: rgba(239, 68, 68, 0.8);
|
|
}
|
|
|
|
.upload-progress {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
height: 4px;
|
|
background: linear-gradient(90deg, #f97316, #fb923c);
|
|
transition: width 0.3s ease;
|
|
border-radius: 0 0 12px 12px;
|
|
width: 0%;
|
|
}
|
|
|
|
.pulse-animation {
|
|
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
}
|
|
|
|
@@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: .5; }
|
|
}
|
|
|
|
.success-animation {
|
|
animation: successPulse 0.6s ease;
|
|
}
|
|
|
|
@@keyframes successPulse {
|
|
0% { transform: scale(1); }
|
|
50% { transform: scale(1.05); }
|
|
100% { transform: scale(1); }
|
|
}
|
|
|
|
.file-info {
|
|
position: absolute;
|
|
bottom: 8px;
|
|
left: 8px;
|
|
background: rgba(0, 0, 0, 0.7);
|
|
color: white;
|
|
padding: 4px 8px;
|
|
border-radius: 6px;
|
|
font-size: 10px;
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.preview-container:hover .file-info {
|
|
opacity: 1;
|
|
}
|
|
|
|
.location-badge {
|
|
backdrop-filter: blur(10px);
|
|
background: rgba(255, 255, 255, 0.9);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.floating-button {
|
|
box-shadow: 0 10px 25px -5px rgba(251, 146, 60, 0.4);
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.floating-button:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 20px 40px -5px rgba(251, 146, 60, 0.6);
|
|
}
|
|
|
|
.upload-icon-container {
|
|
background: linear-gradient(135deg, #fef7ed 0%, #fed7aa 100%);
|
|
border-radius: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto 16px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.upload-area:hover .upload-icon-container {
|
|
transform: scale(1.1);
|
|
background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
|
|
}
|
|
|
|
.upload-area:hover .upload-icon-container i {
|
|
color: white !important;
|
|
}
|
|
</style>
|
|
</register-block>
|
|
|
|
<register-block dynamic-section="scripts" key="jsSubmit">
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const userLocationEl = document.getElementById("userLocationSubmit");
|
|
const inputLat = document.getElementById("input-latitude");
|
|
const inputLng = document.getElementById("input-longitude");
|
|
const inputAlamat = document.getElementById("input-alamat-jalan");
|
|
const refreshLocationBtn = document.getElementById("refresh-location");
|
|
|
|
const uploadArea = document.getElementById("upload-area");
|
|
const fotoInput = document.getElementById("foto-upload");
|
|
const previewImage = document.getElementById("preview-image");
|
|
const previewIcon = document.getElementById("preview-icon");
|
|
const closePreview = document.getElementById("close-preview");
|
|
const editPreview = document.getElementById("edit-preview");
|
|
const previewOverlay = document.getElementById("preview-overlay");
|
|
const defaultState = document.getElementById("default-state");
|
|
const uploadText = document.getElementById("upload-text");
|
|
const fileInfo = document.getElementById("file-info");
|
|
const fileName = document.getElementById("file-name");
|
|
const fileSize = document.getElementById("file-size");
|
|
const uploadProgress = document.getElementById("upload-progress");
|
|
const submitBtn = document.getElementById("submit-btn");
|
|
|
|
uploadArea.addEventListener("dragover", function(e) {
|
|
e.preventDefault();
|
|
uploadArea.classList.add("dragover");
|
|
});
|
|
|
|
uploadArea.addEventListener("dragleave", function(e) {
|
|
e.preventDefault();
|
|
uploadArea.classList.remove("dragover");
|
|
});
|
|
|
|
uploadArea.addEventListener("drop", function(e) {
|
|
e.preventDefault();
|
|
uploadArea.classList.remove("dragover");
|
|
const files = e.dataTransfer.files;
|
|
if (files.length > 0) {
|
|
handleFileSelect(files[0]);
|
|
}
|
|
});
|
|
|
|
uploadArea.addEventListener("click", function(e) {
|
|
if (e.target.tagName !== 'LABEL' && !e.target.closest('label')) {
|
|
fotoInput.click();
|
|
}
|
|
});
|
|
|
|
fotoInput.addEventListener("change", function(e) {
|
|
const file = e.target.files[0];
|
|
if (file) {
|
|
handleFileSelect(file);
|
|
}
|
|
});
|
|
|
|
function handleFileSelect(file) {
|
|
const allowedTypes = ["image/jpeg", "image/png", "image/jpg"];
|
|
if (!allowedTypes.includes(file.type)) {
|
|
showAlert("File harus JPG, JPEG, atau PNG.", "error");
|
|
fotoInput.value = "";
|
|
return;
|
|
}
|
|
if (file.size > 10 * 1024 * 1024) {
|
|
showAlert("Ukuran maksimal 10MB.", "error");
|
|
fotoInput.value = "";
|
|
return;
|
|
}
|
|
|
|
showUploadProgress(file);
|
|
|
|
const reader = new FileReader();
|
|
reader.onload = function(ev) {
|
|
previewImage.src = ev.target.result;
|
|
fileName.textContent = file.name;
|
|
fileSize.textContent = formatFileSize(file.size);
|
|
|
|
let progress = 0;
|
|
const interval = setInterval(() => {
|
|
progress += Math.random() * 15;
|
|
if (progress >= 100) {
|
|
progress = 100;
|
|
clearInterval(interval);
|
|
setTimeout(() => {
|
|
showPreview();
|
|
uploadProgress.style.width = "0%";
|
|
}, 500);
|
|
}
|
|
uploadProgress.style.width = progress + "%";
|
|
}, 100);
|
|
};
|
|
reader.readAsDataURL(file);
|
|
}
|
|
|
|
function showUploadProgress(file) {
|
|
defaultState.style.display = "none";
|
|
uploadText.style.display = "none";
|
|
uploadProgress.style.width = "0%";
|
|
}
|
|
|
|
function showPreview() {
|
|
previewImage.style.display = "block";
|
|
previewOverlay.style.display = "flex";
|
|
fileInfo.style.display = "block";
|
|
uploadArea.classList.add("success-animation");
|
|
showAlert("Foto berhasil dimuat!", "success");
|
|
}
|
|
|
|
function resetUpload() {
|
|
fotoInput.value = "";
|
|
previewImage.src = "#";
|
|
previewImage.style.display = "none";
|
|
previewOverlay.style.display = "none";
|
|
fileInfo.style.display = "none";
|
|
defaultState.style.display = "block";
|
|
uploadText.style.display = "block";
|
|
uploadArea.classList.remove("success-animation");
|
|
uploadProgress.style.width = "0%";
|
|
}
|
|
|
|
editPreview.addEventListener("click", function(e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
fotoInput.click();
|
|
});
|
|
|
|
closePreview.addEventListener("click", function(e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
resetUpload();
|
|
});
|
|
|
|
function reverseGeocode(lat, lng) {
|
|
fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lng}`)
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
const address = data.display_name || `${lat}, ${lng}`;
|
|
userLocationEl.innerHTML = `<span>${address}</span>`;
|
|
localStorage.setItem("user_latitude", lat);
|
|
localStorage.setItem("user_longitude", lng);
|
|
localStorage.setItem("user_address", address);
|
|
if (inputLat) inputLat.value = lat;
|
|
if (inputLng) inputLng.value = lng;
|
|
if (inputAlamat) inputAlamat.value = address;
|
|
})
|
|
.catch(() => {
|
|
userLocationEl.innerHTML = `<span>${lat}, ${lng}</span>`;
|
|
if (inputLat) inputLat.value = lat;
|
|
if (inputLng) inputLng.value = lng;
|
|
if (inputAlamat) inputAlamat.value = `${lat}, ${lng}`;
|
|
});
|
|
}
|
|
|
|
function getLocationUpdate() {
|
|
if ("geolocation" in navigator) {
|
|
userLocationEl.innerHTML = `<span>Mendeteksi lokasi...</span>`;
|
|
navigator.geolocation.getCurrentPosition(
|
|
function (position) {
|
|
const lat = position.coords.latitude.toFixed(6);
|
|
const lng = position.coords.longitude.toFixed(6);
|
|
reverseGeocode(lat, lng);
|
|
},
|
|
function () {
|
|
userLocationEl.innerHTML = `<span>Lokasi tidak diizinkan</span>`;
|
|
if (inputLat) inputLat.value = "";
|
|
if (inputLng) inputLng.value = "";
|
|
if (inputAlamat) inputAlamat.value = "Lokasi tidak diizinkan";
|
|
}
|
|
);
|
|
} else {
|
|
userLocationEl.innerHTML = `<span>Browser tidak mendukung lokasi</span>`;
|
|
if (inputLat) inputLat.value = "";
|
|
if (inputLng) inputLng.value = "";
|
|
if (inputAlamat) inputAlamat.value = "Browser tidak mendukung lokasi";
|
|
}
|
|
}
|
|
|
|
getLocationUpdate();
|
|
|
|
userLocationEl.addEventListener("click", function () {
|
|
getLocationUpdate();
|
|
});
|
|
|
|
refreshLocationBtn.addEventListener("click", function() {
|
|
getLocationUpdate();
|
|
});
|
|
|
|
document.getElementById("upload-form").addEventListener("submit", function(e) {
|
|
const originalContent = submitBtn.innerHTML;
|
|
submitBtn.innerHTML = `
|
|
<svg class="animate-spin w-5 h-5 mr-2" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
<span>Mengunggah...</span>
|
|
`;
|
|
submitBtn.disabled = true;
|
|
|
|
setTimeout(() => {
|
|
submitBtn.innerHTML = originalContent;
|
|
submitBtn.disabled = false;
|
|
showAlert("Form berhasil dikirim!", "success");
|
|
}, 2000);
|
|
});
|
|
|
|
function formatFileSize(bytes) {
|
|
if (bytes === 0) return '0 Bytes';
|
|
const k = 1024;
|
|
const sizes = ['Bytes', 'KB', 'MB', 'GB'];
|
|
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
|
}
|
|
|
|
function showAlert(message, type) {
|
|
const alertDiv = document.createElement('div');
|
|
alertDiv.className = `fixed top-4 right-4 z-50 p-4 rounded-lg text-white font-medium transition-all duration-300 ${
|
|
type === 'success' ? 'bg-green-500' : 'bg-red-500'
|
|
}`;
|
|
alertDiv.textContent = message;
|
|
alertDiv.style.transform = 'translateX(100%)';
|
|
|
|
document.body.appendChild(alertDiv);
|
|
|
|
setTimeout(() => {
|
|
alertDiv.style.transform = 'translateX(0)';
|
|
}, 100);
|
|
|
|
setTimeout(() => {
|
|
alertDiv.style.transform = 'translateX(100%)';
|
|
setTimeout(() => {
|
|
if (document.body.contains(alertDiv)) {
|
|
document.body.removeChild(alertDiv);
|
|
}
|
|
}, 300);
|
|
}, 3000);
|
|
}
|
|
});
|
|
</script>
|
|
</register-block> |