update: logout, batal, submit

main
marszayn 2025-07-31 14:46:31 +07:00
parent 452e612f36
commit 7099077e47
5 changed files with 650 additions and 136 deletions

View File

@ -60,11 +60,14 @@
</div> </div>
<!-- Submit Button --> <!-- Submit Button -->
<div class="pt-6"> <div class="pt-6 flex gap-3">
<button class="w-full bg-gradient-to-r from-orange-500 to-orange-400 text-white py-3 rounded-xl font-bold text-lg shadow-xl hover:scale-105 hover:bg-orange-600 transition-all duration-200 flex items-center justify-center gap-2"> <a href="@Url.Action("Batal", "DetailPenjemputan")" class="w-full bg-gray-200 text-gray-700 py-3 rounded-xl font-bold text-lg shadow hover:scale-105 hover:bg-gray-300 transition-all duration-200 flex items-center justify-center gap-2">
Batal Angkut
</a>
<button class="hover:cursor-pointer w-full bg-gradient-to-r from-orange-500 to-orange-400 text-white py-3 rounded-xl font-bold text-lg shadow-xl hover:scale-105 hover:bg-orange-600 transition-all duration-200 flex items-center justify-center gap-2">
Submit Submit
</button> </button>
</div> </div>
</div> </div>

View File

@ -20,9 +20,21 @@
</p> </p>
</div> </div>
<div class="flex items-center justify-center"> <div class="flex items-center justify-center">
<div class="w-14 h-14 rounded-full border-4 border-white overflow-hidden shadow-md"> <div class="relative flex flex-col items-center justify-center">
<img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face" alt="Profile" class="w-full h-full object-cover"> <div class="w-12 h-12 rounded-full border-3 border-white overflow-hidden shadow-md flex items-center justify-center cursor-pointer group" id="profileMenuButton">
<i class="w-8 h-8 text-white" data-lucide="user"></i>
</div>
<!-- Dropdown Menu -->
<div id="profileMenuDropdown" class="absolute top-12 right-0 mt-2 w-32 bg-white rounded shadow-lg py-2 z-50 hidden">
<form method="post" asp-controller="Auth" asp-action="Logout">
<button type="submit" class="hover:cursor-pointer flex items-center gap-2 w-full text-left px-4 py-2 text-sm font-semibold text-red-600 hover:bg-red-50 transition rounded-md">
<i class="w-4 h-4" data-lucide="log-out"></i>
Logout
</button>
</form>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -188,4 +200,20 @@ document.addEventListener("DOMContentLoaded", function () {
}); });
}); });
</script> </script>
<script>
document.addEventListener("DOMContentLoaded", function () {
const btn = document.getElementById("profileMenuButton");
const dropdown = document.getElementById("profileMenuDropdown");
btn.addEventListener("click", function (e) {
e.stopPropagation();
dropdown.classList.toggle("hidden");
});
document.addEventListener("click", function () {
dropdown.classList.add("hidden");
});
});
</script>
</register-block> </register-block>

View File

@ -5,7 +5,6 @@
<div class="max-w-sm mx-auto bg-white min-h-screen"> <div class="max-w-sm mx-auto bg-white min-h-screen">
<!-- Header with Orange Background -->
<div class="bg-orange-500 text-white px-3 py-4 rounded-b-2xl relative pb-12"> <div class="bg-orange-500 text-white px-3 py-4 rounded-b-2xl relative pb-12">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<a href="@Url.Action("Index", "Home")" class="p-1 hover:bg-white/10 rounded-full transition-colors"> <a href="@Url.Action("Index", "Home")" class="p-1 hover:bg-white/10 rounded-full transition-colors">
@ -17,7 +16,6 @@
</div> </div>
<!-- Upload -->
<div class="px-4 py-6"> <div class="px-4 py-6">
<div class="bg-white rounded-2xl p-5 border border-gray-100"> <div class="bg-white rounded-2xl p-5 border border-gray-100">
<div class="flex items-center gap-3 mb-4"> <div class="flex items-center gap-3 mb-4">
@ -40,7 +38,6 @@
</label> </label>
</div> </div>
<!-- Lokasi User -->
<div class="mt-6 mb-2"> <div class="mt-6 mb-2">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<i class="w-4 h-4 text-orange-500" data-lucide="map-pin"></i> <i class="w-4 h-4 text-orange-500" data-lucide="map-pin"></i>
@ -53,29 +50,31 @@
</div> </div>
<div> <div>
<form asp-action="UploadFotoMuatan" method="post" class="mt-6"> <form asp-action="UploadFotoMuatan" method="post" enctype="multipart/form-data" class="mt-6">
<input type="hidden" name="Latitude" id="input-latitude" />
<div class="flex gap-3 pt-4"> <input type="hidden" name="Longitude" id="input-longitude" />
<button type="submit" <input type="hidden" name="AlamatJalan" id="input-alamat-jalan" />
class="flex-1 bg-gradient-to-r from-orange-500 to-orange-600 text-white font-semibold py-3 rounded-xl hover:from-orange-600 hover:to-orange-700 transition-all duration-200 shadow-lg"> <div class="flex gap-3 pt-4">
Unggah <button type="submit"
</button> class="flex-1 bg-gradient-to-r from-orange-500 to-orange-600 text-white font-semibold py-3 rounded-xl hover:from-orange-600 hover:to-orange-700 transition-all duration-200 shadow-lg">
</div> Unggah
</button>
</div>
</form> </form>
</div> </div>
</div> </div>
<!-- Bottom Navigation --> <partial name="~/Views/Admin/Transport/SpjDriver/Shared/Components/_Navigation.cshtml" />
<partial name="~/Views/Admin/Transport/SpjDriver/Shared/Components/_Navigation.cshtml" />
</div> </div>
<register-block dynamic-section="scripts" key="jsSubmit"> <register-block dynamic-section="scripts" key="jsSubmit">
<script> <script>
</script>
<script>
document.addEventListener("DOMContentLoaded", function () { document.addEventListener("DOMContentLoaded", function () {
const userLocationEl = document.getElementById("userLocationSubmit"); const userLocationEl = document.getElementById("userLocationSubmit");
const inputLat = document.getElementById("input-latitude");
const inputLng = document.getElementById("input-longitude");
const inputAlamat = document.getElementById("input-alamat-jalan");
function reverseGeocode(lat, lng) { function reverseGeocode(lat, lng) {
fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lng}`) fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lng}`)
@ -86,9 +85,15 @@ document.addEventListener("DOMContentLoaded", function () {
localStorage.setItem("user_latitude", lat); localStorage.setItem("user_latitude", lat);
localStorage.setItem("user_longitude", lng); localStorage.setItem("user_longitude", lng);
localStorage.setItem("user_address", address); localStorage.setItem("user_address", address);
if (inputLat) inputLat.value = lat;
if (inputLng) inputLng.value = lng;
if (inputAlamat) inputAlamat.value = address;
}) })
.catch(() => { .catch(() => {
userLocationEl.textContent = `${lat}, ${lng}`; userLocationEl.textContent = `${lat}, ${lng}`;
if (inputLat) inputLat.value = lat;
if (inputLng) inputLng.value = lng;
if (inputAlamat) inputAlamat.value = `${lat}, ${lng}`;
}); });
} }
@ -103,21 +108,21 @@ document.addEventListener("DOMContentLoaded", function () {
}, },
function () { function () {
userLocationEl.textContent = "Lokasi tidak diizinkan"; userLocationEl.textContent = "Lokasi tidak diizinkan";
if (inputLat) inputLat.value = "";
if (inputLng) inputLng.value = "";
if (inputAlamat) inputAlamat.value = "Lokasi tidak diizinkan";
} }
); );
} else { } else {
userLocationEl.textContent = "Browser tidak mendukung lokasi"; userLocationEl.textContent = "Browser tidak mendukung lokasi";
if (inputLat) inputLat.value = "";
if (inputLng) inputLng.value = "";
if (inputAlamat) inputAlamat.value = "Browser tidak mendukung lokasi";
} }
} }
const savedAddress = localStorage.getItem("user_address"); getLocationUpdate();
if (savedAddress) {
userLocationEl.textContent = savedAddress;
} else {
getLocationUpdate();
}
// Update Lokasi
userLocationEl.addEventListener("click", function () { userLocationEl.addEventListener("click", function () {
getLocationUpdate(); getLocationUpdate();
}); });

View File

@ -4,6 +4,6 @@
"tailwindcss": "^4.1.11" "tailwindcss": "^4.1.11"
}, },
"scripts": { "scripts": {
"watch": "npx @tailwindcss/cli -i ./wwwroot/css/site.css -o ./wwwroot/css/watch.css --watch" "watch": "npx @tailwindcss/cli -i ./wwwroot/driver/css/site.css -o ./wwwroot/driver/css/watch.css --watch"
} }
} }

File diff suppressed because it is too large Load Diff