274 lines
11 KiB
Plaintext
274 lines
11 KiB
Plaintext
@{
|
|
ViewData["Title"] = "Tambah Kebutuhan Sarpras";
|
|
}
|
|
|
|
<!-- Breadcrumb -->
|
|
<div class="breadcrumbs text-sm">
|
|
<ul>
|
|
<li class="text-gray-500"><a>Profil Kelurahan</a></li>
|
|
<li><a>Tambah Kebutuhan Sarpras</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Header -->
|
|
<div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
|
|
<div class="prose">
|
|
<h3 class="mb-2">Tambah Kebutuhan Sarpras</h3>
|
|
</div>
|
|
<div class="justify-self-end lg:self-center flex flex-wrap gap-3">
|
|
<a href="@Url.Action("Index", "ProfilRw")" class="btn rounded-full shadow-none">
|
|
<span class="icon icon-fill me-2">arrow_back</span>
|
|
Kembali
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="h-8"></div>
|
|
|
|
<div class="card bg-white card-border">
|
|
<form action="" method="post">
|
|
<div class="card-body">
|
|
<div id="sarprasFormList" class="space-y-4">
|
|
<div class="sarpras-form-item">
|
|
<div class="card-title">Sarpras #<span class="sarpras-index">1</span></div>
|
|
<div class="grid grid-cols-1 md:grid-cols-4 md:gap-4">
|
|
<!-- Kota/Kabupaten -->
|
|
<fieldset class="fieldset">
|
|
<legend class="fieldset-legend">Kota/Kabupaten</legend>
|
|
<select class="select w-full">
|
|
<option disabled selected>Pilih Kota/Kabupaten</option>
|
|
</select>
|
|
</fieldset>
|
|
<!-- Kecamatan -->
|
|
<fieldset class="fieldset">
|
|
<legend class="fieldset-legend">Kecamatan</legend>
|
|
<select class="select w-full">
|
|
<option disabled selected>Pilih Kecamatan</option>
|
|
</select>
|
|
</fieldset>
|
|
<!-- Kelurahan -->
|
|
<fieldset class="fieldset">
|
|
<legend class="fieldset-legend">Kelurahan</legend>
|
|
<select class="select w-full">
|
|
<option disabled selected>Pilih Kelurahan</option>
|
|
</select>
|
|
</fieldset>
|
|
<!-- RW -->
|
|
<fieldset class="fieldset">
|
|
<legend class="fieldset-legend">RW</legend>
|
|
<select class="select w-full">
|
|
<option disabled selected>Pilih RW</option>
|
|
<option>01</option>
|
|
<option>02</option>
|
|
<option>03</option>
|
|
</select>
|
|
</fieldset>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 md:gap-4">
|
|
<!-- Tanggal -->
|
|
<fieldset class="fieldset">
|
|
<legend class="fieldset-legend">Tanggal</legend>
|
|
<input type="date" class="input w-full" />
|
|
</fieldset>
|
|
<!-- Sarpras -->
|
|
<fieldset class="fieldset">
|
|
<legend class="fieldset-legend">Sarpras</legend>
|
|
<input type="text" class="input w-full" placeholder="Masukkan sarpras" />
|
|
</fieldset>
|
|
<!-- Unit -->
|
|
<fieldset class="fieldset">
|
|
<legend class="fieldset-legend">Unit</legend>
|
|
<input type="text" class="input w-full" placeholder="Masukkan unit" />
|
|
</fieldset>
|
|
</div>
|
|
<!-- Keterangan -->
|
|
<fieldset class="fieldset md:col-span-2">
|
|
<legend class="fieldset-legend">Keterangan</legend>
|
|
<textarea class="textarea w-full" rows="3" placeholder="opsional"></textarea>
|
|
</fieldset>
|
|
<div class="py-3 justify-end flex">
|
|
<button type="button" class="btn btn-error text-white rounded-full js-remove-sarpras">
|
|
<span class="icon me-2">delete</span>
|
|
Hapus
|
|
</button>
|
|
</div>
|
|
<div class="divider"></div>
|
|
</div>
|
|
</div>
|
|
<div class="py-3">
|
|
<button type="button" id="addSarprasBtn" class="btn w-full btn-primary btn-outline rounded-full">
|
|
<span class="icon me-2">add</span>
|
|
Tambah Kebutuhan Sarana Prasarana
|
|
</button>
|
|
</div>
|
|
<div class="card-actions justify-end">
|
|
<a href="@Url.Action("Index", "ProfilRw")" class="btn">
|
|
<span class="icon me-2">cancel</span>
|
|
Batal
|
|
</a>
|
|
<button type="submit" class="btn btn-primary">
|
|
<span class="icon me-2">save</span>
|
|
Simpan
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<template id="sarprasTemplate">
|
|
<div class="sarpras-form-item">
|
|
<div class="card-title">Sarpras #<span class="sarpras-index"></span></div>
|
|
<div class="grid grid-cols-1 md:grid-cols-4 md:gap-4">
|
|
<!-- Kota/Kabupaten -->
|
|
<fieldset class="fieldset">
|
|
<legend class="fieldset-legend">Kota/Kabupaten</legend>
|
|
<select class="select w-full">
|
|
<option disabled selected>Pilih Kota/Kabupaten</option>
|
|
</select>
|
|
</fieldset>
|
|
<!-- Kecamatan -->
|
|
<fieldset class="fieldset">
|
|
<legend class="fieldset-legend">Kecamatan</legend>
|
|
<select class="select w-full">
|
|
<option disabled selected>Pilih Kecamatan</option>
|
|
</select>
|
|
</fieldset>
|
|
<!-- Kelurahan -->
|
|
<fieldset class="fieldset">
|
|
<legend class="fieldset-legend">Kelurahan</legend>
|
|
<select class="select w-full">
|
|
<option disabled selected>Pilih Kelurahan</option>
|
|
</select>
|
|
</fieldset>
|
|
<!-- RW -->
|
|
<fieldset class="fieldset">
|
|
<legend class="fieldset-legend">RW</legend>
|
|
<select class="select w-full">
|
|
<option disabled selected>Pilih RW</option>
|
|
<option>01</option>
|
|
<option>02</option>
|
|
<option>03</option>
|
|
</select>
|
|
</fieldset>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 md:gap-4">
|
|
<!-- Tanggal -->
|
|
<fieldset class="fieldset">
|
|
<legend class="fieldset-legend">Tanggal</legend>
|
|
<input type="date" class="input w-full" />
|
|
</fieldset>
|
|
<!-- Sarpras -->
|
|
<fieldset class="fieldset">
|
|
<legend class="fieldset-legend">Sarpras</legend>
|
|
<input type="text" class="input w-full" placeholder="Masukkan sarpras" />
|
|
</fieldset>
|
|
<!-- Unit -->
|
|
<fieldset class="fieldset">
|
|
<legend class="fieldset-legend">Unit</legend>
|
|
<input type="text" class="input w-full" placeholder="Masukkan unit" />
|
|
</fieldset>
|
|
</div>
|
|
<!-- Keterangan -->
|
|
<fieldset class="fieldset md:col-span-2">
|
|
<legend class="fieldset-legend">Keterangan</legend>
|
|
<textarea class="textarea w-full" rows="3" placeholder="opsional"></textarea>
|
|
</fieldset>
|
|
<div class="py-3 justify-end flex">
|
|
<button type="button" class="btn btn-error text-white rounded-full js-remove-sarpras">
|
|
<span class="icon me-2">delete</span>
|
|
Hapus
|
|
</button>
|
|
</div>
|
|
<div class="divider"></div>
|
|
</div>
|
|
</template>
|
|
|
|
@section Scripts {
|
|
<script src="/lib/sweetalert2/sweetalert2-11.26.4.js"></script>
|
|
|
|
<script>
|
|
(() => {
|
|
const listEl = document.getElementById('sarprasFormList');
|
|
const template = document.getElementById('sarprasTemplate');
|
|
const addButton = document.getElementById('addSarprasBtn');
|
|
|
|
if (!listEl || !template || !addButton) {
|
|
return;
|
|
}
|
|
|
|
const updateIndexes = () => {
|
|
const items = listEl.querySelectorAll('.sarpras-form-item');
|
|
items.forEach((item, idx) => {
|
|
const indexLabel = item.querySelector('.sarpras-index');
|
|
if (indexLabel) {
|
|
indexLabel.textContent = String(idx + 1);
|
|
}
|
|
const removeBtn = item.querySelector('.js-remove-sarpras');
|
|
if (removeBtn) {
|
|
removeBtn.disabled = items.length === 1;
|
|
}
|
|
});
|
|
};
|
|
|
|
const addForm = () => {
|
|
const clone = template.content.firstElementChild.cloneNode(true);
|
|
listEl.appendChild(clone);
|
|
updateIndexes();
|
|
};
|
|
|
|
addButton.addEventListener('click', (event) => {
|
|
event.preventDefault();
|
|
addForm();
|
|
});
|
|
|
|
listEl.addEventListener('click', (event) => {
|
|
const removeBtn = event.target.closest('.js-remove-sarpras');
|
|
if (!removeBtn) {
|
|
return;
|
|
}
|
|
event.preventDefault();
|
|
if (listEl.children.length === 1) {
|
|
return;
|
|
}
|
|
const formItem = removeBtn.closest('.sarpras-form-item');
|
|
if (formItem) {
|
|
formItem.remove();
|
|
updateIndexes();
|
|
}
|
|
});
|
|
|
|
updateIndexes();
|
|
|
|
// Success Alert
|
|
const form = document.querySelector("form");
|
|
|
|
form.addEventListener("submit", function (e) {
|
|
e.preventDefault();
|
|
|
|
Swal.fire({
|
|
title: 'Simpan Kebutuhan Sarpras?',
|
|
text: "Pastikan semua data sudah benar.",
|
|
icon: 'question',
|
|
showCancelButton: true,
|
|
confirmButtonColor: '#22c55e',
|
|
cancelButtonColor: '#6b7280',
|
|
confirmButtonText: 'Simpan',
|
|
cancelButtonText: 'Batal'
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
|
|
Swal.fire({
|
|
title: 'Berhasil!',
|
|
text: 'Kebutuhan Sarpras berhasil disimpan.',
|
|
icon: 'success',
|
|
confirmButtonText: 'OK',
|
|
confirmButtonColor: '#22c55e'
|
|
}).then(() => {
|
|
window.location.href = '@Url.Action("Index", "ProfilRw")';
|
|
});
|
|
}
|
|
});
|
|
});
|
|
})();
|
|
</script>
|
|
} |