banksampah
/
bank-sampah
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(KelengkapanBankSampah): add Kelengkapan Bank Sampah Page

main
Kevin Hendrawan 2025-12-02 21:24:22 +07:00 committed by kevin
parent 3deb6e023e
commit 097f3781f5
1 changed files with 128 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

233
Views/Biodata/BankSampah.cshtml
View File

@ -3,9 +3,20 @@
Layout = "~/Views/Shared/_LayoutAppWithoutNavbar.cshtml"; Layout = "~/Views/Shared/_LayoutAppWithoutNavbar.cshtml";
} }
@section Styles {
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<style>
#map {
height: 400px;
width: 100%;
border-radius: 0.5rem;
}
</style>
}
<div class="min-h-screen flex items-center justify-center py-8 px-4"> <div class="min-h-screen flex items-center justify-center py-8 px-4">
<div class="w-full max-w-4xl"> <div class="w-full max-w-4xl">
<!-- Title --> <!-- Title -->
<div class="flex flex-col items-center mb-6"> <div class="flex flex-col items-center mb-6">
<span class="text-xl font-semibold text-gray-900 font-['Plus_Jakarta_Sans']"> <span class="text-xl font-semibold text-gray-900 font-['Plus_Jakarta_Sans']">
@ -14,13 +25,12 @@
</div> </div>
<!-- Alert --> <!-- Alert -->
<div class="alert border-blue-200 bg-blue-50 rounded-lg mb-6"> <div class="border border-blue-200 bg-blue-50 rounded-lg mb-6 p-4 flex flex-col gap-2 justify-start justify-items-start">
<div> <h3 class="font-semibold text-blue-800">Selamat Datang!</h3>
<h3 class="font-semibold text-blue-800">Selamat Datang!</h3> <p class="text-sm text-blue-600">
<div class="text-sm text-blue-600"> Silakan lengkapi biodata Anda untuk dapat menggunakan layanan e-Bank Sampah.
Silakan lengkapi biodata Anda untuk dapat menggunakan layanan e-Bank Sampah. Form ini hanya tampil sekali. Form ini hanya tampil sekali.
</div> </p>
</div>
</div> </div>
<!-- FORM --> <!-- FORM -->
@ -29,113 +39,75 @@
<!-- ===================== SECTION 1 ===================== --> <!-- ===================== SECTION 1 ===================== -->
<div class="bg-white rounded-lg shadow-sm p-6"> <div class="bg-white rounded-lg shadow-sm p-6">
<h3 class="text-lg font-medium text-gray-700 mb-4">Data Kelengkapan Bank Sampah</h3> <h3 class="text-lg font-medium text-gray-700 mb-4">Data Kelengkapan Bank Sampah</h3>
<div class="divider"></div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- Nama Bank -->
<div class="form-control"> <div class="form-control">
<label class="block text-sm font-medium text-gray-700 mb-2"> <label class="block text-sm font-medium text-gray-700 mb-2">Nama Bank Sampah <span class="text-red-500">*</span></label>
Nama Bank Sampah <span class="text-red-500">*</span> <input id="namaBank" type="text" required class="input input-bordered w-full" />
</label>
<input type="text" placeholder="Nama Bank Sampah"
class="input input-bordered w-full" />
</div> </div>
<!-- Email -->
<div class="form-control"> <div class="form-control">
<label class="block text-sm font-medium text-gray-700 mb-2"> <label class="block text-sm font-medium text-gray-700 mb-2">Email <span class="text-red-500">*</span></label>
E-mail <span class="text-red-500">*</span> <input id="email" type="email" required class="input input-bordered w-full" />
</label>
<input type="email" placeholder="email@example.com"
class="input input-bordered w-full" />
</div> </div>
<!-- Kategori -->
<div class="form-control"> <div class="form-control">
<label class="block text-sm font-medium text-gray-700 mb-2"> <label class="block text-sm font-medium text-gray-700 mb-2">Kategori Bank Sampah <span class="text-red-500">*</span></label>
Kategori Bank Sampah <span class="text-red-500">*</span> <select id="kategori" required class="select select-bordered w-full">
</label>
<select class="select select-bordered w-full">
<option disabled selected>Pilih kategori</option> <option disabled selected>Pilih kategori</option>
<option>Induk</option> <option>Induk</option>
<option>Unit</option> <option>Unit</option>
</select> </select>
</div> </div>
<!-- Penanggung Jawab -->
<div class="form-control"> <div class="form-control">
<label class="block text-sm font-medium text-gray-700 mb-2"> <label class="block text-sm font-medium text-gray-700 mb-2">Penanggung Jawab <span class="text-red-500">*</span></label>
Penanggung Jawab <span class="text-red-500">*</span> <input id="penanggungJawab" type="text" required class="input input-bordered w-full" />
</label>
<input type="text" placeholder="Nama Penanggung Jawab"
class="input input-bordered w-full" />
</div> </div>
<!-- No HP -->
<div class="form-control"> <div class="form-control">
<label class="block text-sm font-medium text-gray-700 mb-2"> <label class="block text-sm font-medium text-gray-700 mb-2">No HP Penanggung Jawab <span class="text-red-500">*</span></label>
No Hp Penanggung Jawab <span class="text-red-500">*</span> <input id="noHp" type="text" required class="input input-bordered w-full" />
</label>
<input type="text" placeholder="628xxxxxxxxx"
class="input input-bordered w-full" />
</div> </div>
<!-- Badan Hukum -->
<div class="form-control"> <div class="form-control">
<label class="block text-sm font-medium text-gray-700 mb-2"> <label class="block text-sm font-medium text-gray-700 mb-2">Badan Hukum <span class="text-red-500">*</span></label>
Badan Hukum <span class="text-red-500">*</span> <select id="badanHukum" required class="select select-bordered w-full">
</label>
<select class="select select-bordered w-full">
<option disabled selected>Pilih status</option> <option disabled selected>Pilih status</option>
<option>Ya</option> <option>Ya</option>
<option>Tidak</option> <option>Tidak</option>
</select> </select>
</div> </div>
<!-- Tahun Berdiri -->
<div class="form-control"> <div class="form-control">
<label class="block text-sm font-medium text-gray-700 mb-2"> <label class="block text-sm font-medium text-gray-700 mb-2">Tahun Berdiri <span class="text-red-500">*</span></label>
Tahun Berdiri <span class="text-red-500">*</span> <input id="tahunBerdiri" type="number" required class="input input-bordered w-full" />
</label>
<input type="number" placeholder="2020"
class="input input-bordered w-full" />
</div> </div>
<!-- Luas Lahan -->
<div class="form-control"> <div class="form-control">
<label class="block text-sm font-medium text-gray-700 mb-2"> <label class="block text-sm font-medium text-gray-700 mb-2">Luas Lahan (m²) <span class="text-red-500">*</span></label>
Luas Lahan <span class="text-red-500">*</span> <input id="luasLahan" type="number" required class="input input-bordered w-full" />
</label>
<input type="number" placeholder="Contoh: 100"
class="input input-bordered w-full" />
</div> </div>
<!-- Status Lahan -->
<div class="form-control"> <div class="form-control">
<label class="block text-sm font-medium text-gray-700 mb-2"> <label class="block text-sm font-medium text-gray-700 mb-2">Status Lahan <span class="text-red-500">*</span></label>
Status Lahan <span class="text-red-500">*</span> <select id="statusLahan" required class="select select-bordered w-full">
</label>
<select class="select select-bordered w-full">
<option disabled selected>Pilih status lahan</option> <option disabled selected>Pilih status lahan</option>
<option>Milik Sendiri</option> <option>Milik Sendiri</option>
<option>Sewa</option> <option>Sewa</option>
</select> </select>
</div> </div>
<!-- Jumlah Pengurus -->
<div class="form-control"> <div class="form-control">
<label class="block text-sm font-medium text-gray-700 mb-2"> <label class="block text-sm font-medium text-gray-700 mb-2">Jumlah Pengurus <span class="text-red-500">*</span></label>
Jumlah Pengurus <span class="text-red-500">*</span> <input id="jumlahPengurus" type="number" required class="input input-bordered w-full" />
</label>
<input type="number" placeholder="Contoh: 5" class="input input-bordered w-full" />
</div> </div>
<!-- SOP -->
<div class="form-control"> <div class="form-control">
<label class="block text-sm font-medium text-gray-700 mb-2"> <label class="block text-sm font-medium text-gray-700 mb-2">Memiliki SOP? <span class="text-red-500">*</span></label>
Memiliki SOP ? <span class="text-red-500">*</span> <select id="sop" required class="select select-bordered w-full">
</label>
<select class="select select-bordered w-full">
<option disabled selected>Pilih</option> <option disabled selected>Pilih</option>
<option>Ya</option> <option>Ya</option>
<option>Tidak</option> <option>Tidak</option>
@ -147,76 +119,127 @@
<!-- ===================== SECTION 2 ===================== --> <!-- ===================== SECTION 2 ===================== -->
<div class="bg-white rounded-lg shadow-sm p-6"> <div class="bg-white rounded-lg shadow-sm p-6">
<h3 class="text-lg font-medium text-gray-700 mb-4">Informasi Biodata</h3> <h3 class="text-lg font-medium text-gray-700 mb-4">Lokasi Bank Sampah</h3>
<div class="divider"></div>
<!-- Alamat --> <label class="block text-sm font-medium text-gray-700 mb-2">Alamat <span class="text-red-500">*</span></label>
<div class="form-control"> <textarea id="alamat" rows="4" required class="textarea textarea-bordered w-full"></textarea>
<label class="label"><span class="label-text font-semibold">Alamat *</span></label>
<textarea class="textarea textarea-bordered h-28" placeholder="Masukkan alamat lengkap"></textarea>
</div>
<!-- RT RW Kode Pos -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4"> <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
<div class="form-control"> <div>
<label class="label"><span class="label-text font-semibold">RT *</span></label> <label class="block text-sm font-medium text-gray-700 mb-2">RT <span class="text-red-500">*</span></label>
<input type="text" class="input input-bordered" placeholder="RT" /> <input id="rt" type="text" required class="input input-bordered w-full" />
</div> </div>
<div class="form-control"> <div>
<label class="label"><span class="label-text font-semibold">RW *</span></label> <label class="block text-sm font-medium text-gray-700 mb-2">RW <span class="text-red-500">*</span></label>
<input type="text" class="input input-bordered" placeholder="RW" /> <input id="rw" type="text" required class="input input-bordered w-full" />
</div> </div>
<div class="form-control"> <div>
<label class="label"><span class="label-text font-semibold">Kode Pos *</span></label> <label class="block text-sm font-medium text-gray-700 mb-2">Kode Pos <span class="text-red-500">*</span></label>
<input type="text" class="input input-bordered" placeholder="Kode Pos" /> <input id="kodePos" type="text" required class="input input-bordered w-full" />
</div> </div>
</div> </div>
<!-- Provinsi / Kota -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4"> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
<div class="form-control"> <div>
<label class="label"><span class="label-text font-semibold">Provinsi *</span></label> <label class="block text-sm font-medium text-gray-700 mb-2">Provinsi <span class="text-red-500">*</span></label>
<select class="select select-bordered"> <select id="provinsi" required class="select select-bordered w-full">
<option disabled selected>Pilih Provinsi</option> <option>Pilih Provinsi</option>
</select> </select>
</div> </div>
<div class="form-control"> <div>
<label class="label"><span class="label-text font-semibold">Kota *</span></label> <label class="block text-sm font-medium text-gray-700 mb-2">Kota <span class="text-red-500">*</span></label>
<select class="select select-bordered"> <select id="kota" required class="select select-bordered w-full">
<option disabled selected>Pilih Kota</option> <option>Pilih Kota</option>
</select> </select>
</div> </div>
</div> </div>
<!-- Kecamatan / Kelurahan -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4"> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
<div class="form-control"> <div>
<label class="label"><span class="label-text font-semibold">Kecamatan *</span></label> <label class="block text-sm font-medium text-gray-700 mb-2">Kecamatan <span class="text-red-500">*</span></label>
<select class="select select-bordered"> <select id="kecamatan" required class="select select-bordered w-full">
<option disabled selected>Pilih Kecamatan</option> <option>Pilih Kecamatan</option>
</select> </select>
</div> </div>
<div class="form-control"> <div>
<label class="label"><span class="label-text font-semibold">Kelurahan *</span></label> <label class="block text-sm font-medium text-gray-700 mb-2">Kelurahan <span class="text-red-500">*</span></label>
<select class="select select-bordered"> <select id="kelurahan" required class="select select-bordered w-full">
<option disabled selected>Pilih Kelurahan</option> <option>Pilih Kelurahan</option>
</select> </select>
</div> </div>
</div> </div>
</div>
<!-- ===================== SECTION 3 ===================== -->
<div class="bg-white rounded-lg shadow-sm p-6">
<h3 class="text-lg font-medium text-gray-700 mb-4">Titik Lokasi</h3>
<div class="divider"></div>
<div id="map" class="mb-6"></div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label class="block text-sm font-medium text-gray-700">Latitude <span class="text-red-500">*</span></label>
<input id="lat" class="input input-bordered w-full" readonly>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Longitude <span class="text-red-500">*</span></label>
<input id="lng" class="input input-bordered w-full" readonly>
</div>
</div>
<div class="divider"></div> <div class="divider"></div>
<!-- Submit -->
<div class="flex justify-end"> <div class="flex justify-end">
<button class="btn btn-success btn-wide"> <button type="submit" class="btn bg-green-800 hover:bg-green-900 text-white px-8 py-2 rounded-full">
Simpan dan Lanjutkan Simpan dan Lanjutkan
</button> </button>
</div> </div>
</div> </div>
</form> </form>
</div> </div>
</div> </div>
@section Scripts {
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
$(document).ready(function () {
const defaultLat = -7.2575;
const defaultLng = 112.7521;
const map = L.map('map').setView([defaultLat, defaultLng], 15);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
}).addTo(map);
const marker = L.marker([defaultLat, defaultLng], { draggable: true }).addTo(map);
$("#lat").val(defaultLat);
$("#lng").val(defaultLng);
marker.on("dragend", function () {
const pos = marker.getLatLng();
$("#lat").val(pos.lat.toFixed(6));
$("#lng").val(pos.lng.toFixed(6));
});
map.on("click", function (e) {
marker.setLatLng(e.latlng);
$("#lat").val(e.latlng.lat.toFixed(6));
$("#lng").val(e.latlng.lng.toFixed(6));
});
});
</script>
}