feat(KelengkapanBankSampah): add Kelengkapan Bank Sampah Page
Kevin Hendrawan
parent
9f8ef5aa9d
commit
f303c61171
|
|
@ -3,6 +3,17 @@
|
|||
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="w-full max-w-4xl">
|
||||
|
||||
|
|
@ -14,13 +25,12 @@
|
|||
</div>
|
||||
|
||||
<!-- Alert -->
|
||||
<div class="alert border-blue-200 bg-blue-50 rounded-lg mb-6">
|
||||
<div>
|
||||
<h3 class="font-semibold text-blue-800">Selamat Datang!</h3>
|
||||
<div class="text-sm text-blue-600">
|
||||
Silakan lengkapi biodata Anda untuk dapat menggunakan layanan e-Bank Sampah. Form ini hanya tampil sekali.
|
||||
</div>
|
||||
</div>
|
||||
<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">
|
||||
<h3 class="font-semibold text-blue-800">Selamat Datang!</h3>
|
||||
<p class="text-sm text-blue-600">
|
||||
Silakan lengkapi biodata Anda untuk dapat menggunakan layanan e-Bank Sampah.
|
||||
Form ini hanya tampil sekali.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- FORM -->
|
||||
|
|
@ -29,113 +39,75 @@
|
|||
<!-- ===================== SECTION 1 ===================== -->
|
||||
<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>
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
|
||||
<!-- Nama Bank -->
|
||||
<div class="form-control">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">
|
||||
Nama Bank Sampah <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<input type="text" placeholder="Nama Bank Sampah"
|
||||
class="input input-bordered w-full" />
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">Nama Bank Sampah <span class="text-red-500">*</span></label>
|
||||
<input id="namaBank" type="text" required class="input input-bordered w-full" />
|
||||
</div>
|
||||
|
||||
<!-- Email -->
|
||||
<div class="form-control">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">
|
||||
E-mail <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<input type="email" placeholder="email@example.com"
|
||||
class="input input-bordered w-full" />
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">Email <span class="text-red-500">*</span></label>
|
||||
<input id="email" type="email" required class="input input-bordered w-full" />
|
||||
</div>
|
||||
|
||||
<!-- Kategori -->
|
||||
<div class="form-control">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">
|
||||
Kategori Bank Sampah <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<select class="select select-bordered w-full">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">Kategori Bank Sampah <span class="text-red-500">*</span></label>
|
||||
<select id="kategori" required class="select select-bordered w-full">
|
||||
<option disabled selected>Pilih kategori</option>
|
||||
<option>Induk</option>
|
||||
<option>Unit</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Penanggung Jawab -->
|
||||
<div class="form-control">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">
|
||||
Penanggung Jawab <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<input type="text" placeholder="Nama Penanggung Jawab"
|
||||
class="input input-bordered w-full" />
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">Penanggung Jawab <span class="text-red-500">*</span></label>
|
||||
<input id="penanggungJawab" type="text" required class="input input-bordered w-full" />
|
||||
</div>
|
||||
|
||||
<!-- No HP -->
|
||||
<div class="form-control">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">
|
||||
No Hp Penanggung Jawab <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<input type="text" placeholder="628xxxxxxxxx"
|
||||
class="input input-bordered w-full" />
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">No HP Penanggung Jawab <span class="text-red-500">*</span></label>
|
||||
<input id="noHp" type="text" required class="input input-bordered w-full" />
|
||||
</div>
|
||||
|
||||
<!-- Badan Hukum -->
|
||||
<div class="form-control">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">
|
||||
Badan Hukum <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<select class="select select-bordered w-full">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">Badan Hukum <span class="text-red-500">*</span></label>
|
||||
<select id="badanHukum" required class="select select-bordered w-full">
|
||||
<option disabled selected>Pilih status</option>
|
||||
<option>Ya</option>
|
||||
<option>Tidak</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Tahun Berdiri -->
|
||||
<div class="form-control">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">
|
||||
Tahun Berdiri <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<input type="number" placeholder="2020"
|
||||
class="input input-bordered w-full" />
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">Tahun Berdiri <span class="text-red-500">*</span></label>
|
||||
<input id="tahunBerdiri" type="number" required class="input input-bordered w-full" />
|
||||
</div>
|
||||
|
||||
<!-- Luas Lahan -->
|
||||
<div class="form-control">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">
|
||||
Luas Lahan <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<input type="number" placeholder="Contoh: 100"
|
||||
class="input input-bordered w-full" />
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">Luas Lahan (m²) <span class="text-red-500">*</span></label>
|
||||
<input id="luasLahan" type="number" required class="input input-bordered w-full" />
|
||||
</div>
|
||||
|
||||
<!-- Status Lahan -->
|
||||
<div class="form-control">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">
|
||||
Status Lahan <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<select class="select select-bordered w-full">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">Status Lahan <span class="text-red-500">*</span></label>
|
||||
<select id="statusLahan" required class="select select-bordered w-full">
|
||||
<option disabled selected>Pilih status lahan</option>
|
||||
<option>Milik Sendiri</option>
|
||||
<option>Sewa</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Jumlah Pengurus -->
|
||||
<div class="form-control">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">
|
||||
Jumlah Pengurus <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<input type="number" placeholder="Contoh: 5" class="input input-bordered w-full" />
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">Jumlah Pengurus <span class="text-red-500">*</span></label>
|
||||
<input id="jumlahPengurus" type="number" required class="input input-bordered w-full" />
|
||||
</div>
|
||||
|
||||
<!-- SOP -->
|
||||
<div class="form-control">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">
|
||||
Memiliki SOP ? <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<select class="select select-bordered w-full">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">Memiliki SOP? <span class="text-red-500">*</span></label>
|
||||
<select id="sop" required class="select select-bordered w-full">
|
||||
<option disabled selected>Pilih</option>
|
||||
<option>Ya</option>
|
||||
<option>Tidak</option>
|
||||
|
|
@ -147,76 +119,127 @@
|
|||
|
||||
<!-- ===================== SECTION 2 ===================== -->
|
||||
<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 -->
|
||||
<div class="form-control">
|
||||
<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>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">Alamat <span class="text-red-500">*</span></label>
|
||||
<textarea id="alamat" rows="4" required class="textarea textarea-bordered w-full"></textarea>
|
||||
|
||||
<!-- RT RW Kode Pos -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
|
||||
<div class="form-control">
|
||||
<label class="label"><span class="label-text font-semibold">RT *</span></label>
|
||||
<input type="text" class="input input-bordered" placeholder="RT" />
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">RT <span class="text-red-500">*</span></label>
|
||||
<input id="rt" type="text" required class="input input-bordered w-full" />
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label"><span class="label-text font-semibold">RW *</span></label>
|
||||
<input type="text" class="input input-bordered" placeholder="RW" />
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">RW <span class="text-red-500">*</span></label>
|
||||
<input id="rw" type="text" required class="input input-bordered w-full" />
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label"><span class="label-text font-semibold">Kode Pos *</span></label>
|
||||
<input type="text" class="input input-bordered" placeholder="Kode Pos" />
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">Kode Pos <span class="text-red-500">*</span></label>
|
||||
<input id="kodePos" type="text" required class="input input-bordered w-full" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Provinsi / Kota -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
|
||||
<div class="form-control">
|
||||
<label class="label"><span class="label-text font-semibold">Provinsi *</span></label>
|
||||
<select class="select select-bordered">
|
||||
<option disabled selected>Pilih Provinsi</option>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">Provinsi <span class="text-red-500">*</span></label>
|
||||
<select id="provinsi" required class="select select-bordered w-full">
|
||||
<option>Pilih Provinsi</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label"><span class="label-text font-semibold">Kota *</span></label>
|
||||
<select class="select select-bordered">
|
||||
<option disabled selected>Pilih Kota</option>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">Kota <span class="text-red-500">*</span></label>
|
||||
<select id="kota" required class="select select-bordered w-full">
|
||||
<option>Pilih Kota</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Kecamatan / Kelurahan -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
|
||||
<div class="form-control">
|
||||
<label class="label"><span class="label-text font-semibold">Kecamatan *</span></label>
|
||||
<select class="select select-bordered">
|
||||
<option disabled selected>Pilih Kecamatan</option>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">Kecamatan <span class="text-red-500">*</span></label>
|
||||
<select id="kecamatan" required class="select select-bordered w-full">
|
||||
<option>Pilih Kecamatan</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label"><span class="label-text font-semibold">Kelurahan *</span></label>
|
||||
<select class="select select-bordered">
|
||||
<option disabled selected>Pilih Kelurahan</option>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">Kelurahan <span class="text-red-500">*</span></label>
|
||||
<select id="kelurahan" required class="select select-bordered w-full">
|
||||
<option>Pilih Kelurahan</option>
|
||||
</select>
|
||||
</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>
|
||||
|
||||
<!-- Submit -->
|
||||
<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
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</form>
|
||||
</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>
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue