361 lines
21 KiB
Plaintext
361 lines
21 KiB
Plaintext
@{
|
|
ViewData["Title"] = "Aktivitas, Fasilitas & Jenis Pengolahan Bank Sampah";
|
|
}
|
|
|
|
<div class="flex flex-col gap-2">
|
|
<div class="prose">
|
|
<span class="text-xl font-semibold text-gray-900 font-['Plus_Jakarta_Sans']">
|
|
Aktivitas, Fasilitas & Jenis Pengolahan Bank Sampah
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="h-6"></div>
|
|
|
|
<!-- View Mode -->
|
|
<div id="viewMode" class="px-5 py-6 bg-white rounded-lg flex flex-col justify-center items-start gap-3">
|
|
<div class="self-stretch inline-flex justify-start items-start gap-6">
|
|
<div class="flex-1 h-7 justify-start text-slate-600 text-base font-bold font-['Plus_Jakarta_Sans'] leading-6">
|
|
Informasi Aktivitas, Fasilitas & Jenis Pengolahan
|
|
</div>
|
|
<button onclick="toggleEditMode()" class="px-3.5 py-2 bg-white rounded-full outline outline-1 outline-offset-[-1px] outline-gray-300 flex justify-center items-center gap-2 hover:bg-gray-50">
|
|
<i class="ph ph-note-pencil text-lg text-zinc-800"></i>
|
|
<div class="justify-start text-slate-800 text-sm font-semibold font-['Plus_Jakarta_Sans'] leading-5">Edit</div>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="self-stretch h-0 outline outline-1 outline-offset-[-0.50px] outline-gray-200"></div>
|
|
|
|
<!-- Aktivitas Section -->
|
|
<div class="self-stretch flex flex-col justify-start items-start gap-3">
|
|
<div class="self-stretch flex flex-col justify-start items-start gap-8">
|
|
<div class="self-stretch inline-flex justify-start items-start gap-4">
|
|
<div class="w-64 self-stretch justify-start text-slate-600 text-base font-normal font-['Plus_Jakarta_Sans'] leading-6">Aktivitas</div>
|
|
<div id="viewAktivitas" class="w-64 self-stretch flex flex-col justify-start items-start">
|
|
<!-- Will be populated by JavaScript -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="self-stretch h-0 outline outline-1 outline-offset-[-0.50px] outline-gray-200"></div>
|
|
|
|
<!-- Fasilitas Section -->
|
|
<div class="self-stretch flex flex-col justify-start items-start gap-3">
|
|
<div class="self-stretch flex flex-col justify-start items-start gap-8">
|
|
<div class="self-stretch inline-flex justify-start items-start gap-4">
|
|
<div class="w-64 self-stretch justify-start text-slate-600 text-base font-normal font-['Plus_Jakarta_Sans'] leading-6">Fasilitas</div>
|
|
<div id="viewFasilitas" class="w-64 self-stretch flex flex-col justify-start items-start">
|
|
<!-- Will be populated by JavaScript -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="self-stretch h-0 outline outline-1 outline-offset-[-0.50px] outline-gray-200"></div>
|
|
|
|
<!-- Jenis Pengolahan Section -->
|
|
<div class="self-stretch flex flex-col justify-start items-start gap-3">
|
|
<div class="self-stretch flex flex-col justify-start items-start gap-8">
|
|
<div class="self-stretch inline-flex justify-start items-start gap-4">
|
|
<div class="w-64 self-stretch justify-start text-slate-600 text-base font-normal font-['Plus_Jakarta_Sans'] leading-6">Jenis Pengolahan</div>
|
|
<div id="viewJenisPengolahan" class="w-64 self-stretch flex flex-col justify-start items-start">
|
|
<!-- Will be populated by JavaScript -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Edit Mode -->
|
|
<div id="editMode" class="px-5 py-6 bg-white rounded-lg flex-col justify-center items-start gap-3 hidden">
|
|
<div class="self-stretch inline-flex justify-start items-start gap-6">
|
|
<div class="flex-1 h-7 justify-start text-slate-600 text-base font-bold font-['Plus_Jakarta_Sans'] leading-6">
|
|
Informasi Aktivitas, Fasilitas & Jenis Pengolahan
|
|
</div>
|
|
</div>
|
|
|
|
<div class="self-stretch h-0 outline outline-1 outline-offset-[-0.50px] outline-gray-200"></div>
|
|
|
|
<!-- Aktivitas Section with Checkboxes -->
|
|
<div class="self-stretch flex flex-col justify-start items-start gap-3">
|
|
<div class="self-stretch flex flex-col justify-start items-start gap-8">
|
|
<div class="self-stretch inline-flex justify-start items-start gap-4">
|
|
<div class="w-64 self-stretch justify-start text-slate-600 text-base font-normal font-['Plus_Jakarta_Sans'] leading-6">Aktivitas</div>
|
|
<div class="inline-flex flex-col justify-center items-start gap-3">
|
|
<label class="inline-flex justify-start items-center gap-3 cursor-pointer">
|
|
<input type="checkbox" name="aktivitas" value="Pemilahan" class="checkbox checkbox-success checkbox-xs rounded-lg">
|
|
<div class="self-stretch justify-start text-slate-800 text-base font-normal font-['Plus_Jakarta_Sans'] leading-6">Pemilahan</div>
|
|
</label>
|
|
<label class="inline-flex justify-start items-center gap-3 cursor-pointer">
|
|
<input type="checkbox" name="aktivitas" value="Pengumpulan" class="checkbox checkbox-success checkbox-xs rounded-lg">
|
|
<div class="self-stretch justify-start text-slate-800 text-base font-normal font-['Plus_Jakarta_Sans'] leading-6">Pengumpulan</div>
|
|
</label>
|
|
<label class="inline-flex justify-start items-center gap-3 cursor-pointer">
|
|
<input type="checkbox" name="aktivitas" value="Penyimpanan" class="checkbox checkbox-success checkbox-xs rounded-lg">
|
|
<div class="self-stretch justify-start text-slate-800 text-base font-normal font-['Plus_Jakarta_Sans'] leading-6">Penyimpanan</div>
|
|
</label>
|
|
<label class="inline-flex justify-start items-center gap-3 cursor-pointer">
|
|
<input type="checkbox" name="aktivitas" value="Pengolahan" class="checkbox checkbox-success checkbox-xs rounded-lg">
|
|
<div class="self-stretch justify-start text-slate-800 text-base font-normal font-['Plus_Jakarta_Sans'] leading-6">Pengolahan</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="self-stretch h-0 outline outline-1 outline-offset-[-0.50px] outline-gray-200"></div>
|
|
|
|
<!-- Fasilitas Section with Checkboxes -->
|
|
<div class="self-stretch flex flex-col justify-start items-start gap-3">
|
|
<div class="self-stretch flex flex-col justify-start items-start gap-8">
|
|
<div class="self-stretch inline-flex justify-start items-start gap-4">
|
|
<div class="w-64 self-stretch justify-start text-slate-600 text-base font-normal font-['Plus_Jakarta_Sans'] leading-6">Fasilitas</div>
|
|
<div class="inline-flex gap-4">
|
|
<div class="inline-flex flex-col justify-center items-start gap-3">
|
|
<label class="inline-flex justify-start items-center gap-3 cursor-pointer">
|
|
<input type="checkbox" name="fasilitas" value="Tong Pilah" class="checkbox checkbox-success checkbox-xs rounded-lg">
|
|
<div class="w-64 self-stretch justify-start text-slate-800 text-base font-normal font-['Plus_Jakarta_Sans'] leading-6">Tong Pilah</div>
|
|
</label>
|
|
<label class="inline-flex justify-start items-center gap-3 cursor-pointer">
|
|
<input type="checkbox" name="fasilitas" value="Tong Komposter" class="checkbox checkbox-success checkbox-xs rounded-lg">
|
|
<div class="w-64 self-stretch justify-start text-slate-800 text-base font-normal font-['Plus_Jakarta_Sans'] leading-6">Tong Komposter</div>
|
|
</label>
|
|
<label class="inline-flex justify-start items-center gap-3 cursor-pointer">
|
|
<input type="checkbox" name="fasilitas" value="Mesin Pengepres" class="checkbox checkbox-success checkbox-xs rounded-lg">
|
|
<div class="w-64 self-stretch justify-start text-slate-800 text-base font-normal font-['Plus_Jakarta_Sans'] leading-6">Mesin Pengepres</div>
|
|
</label>
|
|
<label class="inline-flex justify-start items-center gap-3 cursor-pointer">
|
|
<input type="checkbox" name="fasilitas" value="Mesin Cetak Roster" class="checkbox checkbox-success checkbox-xs rounded-lg">
|
|
<div class="w-64 self-stretch justify-start text-slate-800 text-base font-normal font-['Plus_Jakarta_Sans'] leading-6">Mesin Cetak Roster</div>
|
|
</label>
|
|
<label class="inline-flex justify-start items-center gap-3 cursor-pointer">
|
|
<input type="checkbox" name="fasilitas" value="Laptop" class="checkbox checkbox-success checkbox-xs rounded-lg">
|
|
<div class="w-64 self-stretch justify-start text-slate-800 text-base font-normal font-['Plus_Jakarta_Sans'] leading-6">Laptop</div>
|
|
</label>
|
|
</div>
|
|
<div class="inline-flex flex-col justify-center items-start gap-3">
|
|
<label class="inline-flex justify-start items-center gap-3 cursor-pointer">
|
|
<input type="checkbox" name="fasilitas" value="PC" class="checkbox checkbox-success checkbox-xs rounded-lg">
|
|
<div class="w-64 self-stretch justify-start text-slate-800 text-base font-normal font-['Plus_Jakarta_Sans'] leading-6">PC</div>
|
|
</label>
|
|
<label class="inline-flex justify-start items-center gap-3 cursor-pointer">
|
|
<input type="checkbox" name="fasilitas" value="Mobil" class="checkbox checkbox-success checkbox-xs rounded-lg">
|
|
<div class="w-64 self-stretch justify-start text-slate-800 text-base font-normal font-['Plus_Jakarta_Sans'] leading-6">Mobil</div>
|
|
</label>
|
|
<label class="inline-flex justify-start items-center gap-3 cursor-pointer">
|
|
<input type="checkbox" name="fasilitas" value="Gremor" class="checkbox checkbox-success checkbox-xs rounded-lg">
|
|
<div class="w-64 self-stretch justify-start text-slate-800 text-base font-normal font-['Plus_Jakarta_Sans'] leading-6">Gremor</div>
|
|
</label>
|
|
<label class="inline-flex justify-start items-center gap-3 cursor-pointer">
|
|
<input type="checkbox" name="fasilitas" value="Motor" class="checkbox checkbox-success checkbox-xs rounded-lg">
|
|
<div class="w-64 self-stretch justify-start text-slate-800 text-base font-normal font-['Plus_Jakarta_Sans'] leading-6">Motor</div>
|
|
</label>
|
|
<label class="inline-flex justify-start items-center gap-3 cursor-pointer">
|
|
<input type="checkbox" name="fasilitas" value="Gerobak" class="checkbox checkbox-success checkbox-xs rounded-lg">
|
|
<div class="w-64 self-stretch justify-start text-slate-800 text-base font-normal font-['Plus_Jakarta_Sans'] leading-6">Gerobak</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="self-stretch h-0 outline outline-1 outline-offset-[-0.50px] outline-gray-200"></div>
|
|
|
|
<!-- Jenis Pengolahan Section with Checkboxes -->
|
|
<div class="self-stretch flex flex-col justify-start items-start gap-3">
|
|
<div class="self-stretch flex flex-col justify-start items-start gap-8">
|
|
<div class="self-stretch inline-flex justify-start items-start gap-4">
|
|
<div class="w-64 self-stretch justify-start text-slate-600 text-base font-normal font-['Plus_Jakarta_Sans'] leading-6">Jenis Pengolahan</div>
|
|
<div class="inline-flex flex-col justify-center items-start gap-3">
|
|
<label class="inline-flex justify-start items-center gap-3 cursor-pointer">
|
|
<input type="checkbox" name="jenis_pengolahan" value="Pemilahan" class="checkbox checkbox-success checkbox-xs rounded-lg">
|
|
<div class="w-64 self-stretch justify-start text-slate-800 text-base font-normal font-['Plus_Jakarta_Sans'] leading-6">Pemilahan</div>
|
|
</label>
|
|
<label class="inline-flex justify-start items-center gap-3 cursor-pointer">
|
|
<input type="checkbox" name="jenis_pengolahan" value="Pengumpulan" class="checkbox checkbox-success checkbox-xs rounded-lg">
|
|
<div class="w-64 self-stretch justify-start text-slate-800 text-base font-normal font-['Plus_Jakarta_Sans'] leading-6">Pengumpulan</div>
|
|
</label>
|
|
<label class="inline-flex justify-start items-center gap-3 cursor-pointer">
|
|
<input type="checkbox" name="jenis_pengolahan" value="Penyimpanan" class="checkbox checkbox-success checkbox-xs rounded-lg">
|
|
<div class="w-64 self-stretch justify-start text-slate-800 text-base font-normal font-['Plus_Jakarta_Sans'] leading-6">Penyimpanan</div>
|
|
</label>
|
|
<label class="inline-flex justify-start items-center gap-3 cursor-pointer">
|
|
<input type="checkbox" name="jenis_pengolahan" value="Pengolahan" class="checkbox checkbox-success checkbox-xs rounded-lg">
|
|
<div class="w-64 self-stretch justify-start text-slate-800 text-base font-normal font-['Plus_Jakarta_Sans'] leading-6">Pengolahan</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="self-stretch h-0 outline outline-1 outline-offset-[-0.50px] outline-gray-200"></div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="inline-flex justify-start items-start gap-3">
|
|
<button onclick="cancelEdit()" class="px-8 py-2.5 bg-white rounded-full outline outline-1 outline-offset-[-1px] outline-gray-300 flex justify-center items-center gap-2 hover:bg-gray-50">
|
|
<div class="justify-start text-slate-800 text-sm font-semibold font-['Plus_Jakarta_Sans'] leading-5">Batal</div>
|
|
</button>
|
|
<button onclick="saveData()" class="px-8 py-2.5 bg-green-800 rounded-full flex justify-center items-center gap-2 hover:bg-green-900">
|
|
<div class="justify-start text-white text-sm font-semibold font-['Plus_Jakarta_Sans'] leading-5">Simpan</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
@section Scripts {
|
|
<script type="text/javascript">
|
|
let currentData = {
|
|
aktivitas: [],
|
|
fasilitas: [],
|
|
jenis_pengolahan: []
|
|
};
|
|
|
|
$(document).ready(function () {
|
|
loadData();
|
|
});
|
|
|
|
function loadData() {
|
|
$.ajax({
|
|
url: '/Data/Aktivitas/Get',
|
|
type: 'GET',
|
|
success: function(data) {
|
|
currentData = data;
|
|
updateViewMode();
|
|
},
|
|
error: function() {
|
|
Swal.fire({
|
|
title: 'Error!',
|
|
text: 'Gagal memuat data',
|
|
icon: 'error',
|
|
confirmButtonText: 'OK',
|
|
buttonsStyling: false,
|
|
customClass: {
|
|
confirmButton: 'btn bg-green-800 text-white hover:bg-green-900 px-4 py-2 rounded-full',
|
|
},
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
function updateViewMode() {
|
|
// Update Aktivitas - tampilkan dalam satu baris
|
|
if (currentData.aktivitas && currentData.aktivitas.length > 0) {
|
|
const aktivitasHtml = currentData.aktivitas.map(item =>
|
|
`<div class="justify-start text-slate-800 text-base font-normal font-['Plus_Jakarta_Sans'] leading-6">${item}</div>`
|
|
).join('');
|
|
$('#viewAktivitas').html(aktivitasHtml);
|
|
} else {
|
|
$('#viewAktivitas').html('<div class="text-gray-400">-</div>');
|
|
}
|
|
|
|
// Update Fasilitas - tampilkan dalam satu baris
|
|
if (currentData.fasilitas && currentData.fasilitas.length > 0) {
|
|
const fasilitasHtml = currentData.fasilitas.map(item =>
|
|
`<div class="justify-start text-slate-800 text-base font-normal font-['Plus_Jakarta_Sans'] leading-6">${item}</div>`
|
|
).join('');
|
|
$('#viewFasilitas').html(fasilitasHtml);
|
|
} else {
|
|
$('#viewFasilitas').html('<div class="text-gray-400">-</div>');
|
|
}
|
|
|
|
// Update Jenis Pengolahan - tampilkan dalam satu baris
|
|
if (currentData.jenis_pengolahan && currentData.jenis_pengolahan.length > 0) {
|
|
const jenisPengolahanHtml = currentData.jenis_pengolahan.map(item =>
|
|
`<div class="justify-start text-slate-800 text-base font-normal font-['Plus_Jakarta_Sans'] leading-6">${item}</div>`
|
|
).join('');
|
|
$('#viewJenisPengolahan').html(jenisPengolahanHtml);
|
|
} else {
|
|
$('#viewJenisPengolahan').html('<div class="text-gray-400">-</div>');
|
|
}
|
|
}
|
|
|
|
function toggleEditMode() {
|
|
$('#viewMode').addClass('hidden');
|
|
$('#editMode').removeClass('hidden').addClass('flex');
|
|
|
|
// Set checkboxes based on current data
|
|
$('input[name="aktivitas"]').each(function() {
|
|
$(this).prop('checked', currentData.aktivitas.includes($(this).val()));
|
|
});
|
|
$('input[name="fasilitas"]').each(function() {
|
|
$(this).prop('checked', currentData.fasilitas.includes($(this).val()));
|
|
});
|
|
$('input[name="jenis_pengolahan"]').each(function() {
|
|
$(this).prop('checked', currentData.jenis_pengolahan.includes($(this).val()));
|
|
});
|
|
}
|
|
|
|
function cancelEdit() {
|
|
$('#editMode').addClass('hidden').removeClass('flex');
|
|
$('#viewMode').removeClass('hidden');
|
|
}
|
|
|
|
function saveData() {
|
|
// Collect checked values
|
|
const aktivitas = [];
|
|
$('input[name="aktivitas"]:checked').each(function() {
|
|
aktivitas.push($(this).val());
|
|
});
|
|
|
|
const fasilitas = [];
|
|
$('input[name="fasilitas"]:checked').each(function() {
|
|
fasilitas.push($(this).val());
|
|
});
|
|
|
|
const jenisPengolahan = [];
|
|
$('input[name="jenis_pengolahan"]:checked').each(function() {
|
|
jenisPengolahan.push($(this).val());
|
|
});
|
|
|
|
// Send to server
|
|
$.ajax({
|
|
url: '/Data/Aktivitas/Save',
|
|
type: 'POST',
|
|
contentType: 'application/json',
|
|
data: JSON.stringify({
|
|
Aktivitas: aktivitas,
|
|
Fasilitas: fasilitas,
|
|
JenisPengolahan: jenisPengolahan
|
|
}),
|
|
success: function(response) {
|
|
if (response.success) {
|
|
Swal.fire({
|
|
title: 'Berhasil!',
|
|
text: response.message,
|
|
icon: 'success',
|
|
confirmButtonText: 'OK',
|
|
buttonsStyling: false,
|
|
customClass: {
|
|
confirmButton: 'btn bg-green-800 text-white hover:bg-green-900 px-4 py-2 rounded-full',
|
|
},
|
|
}).then(() => {
|
|
// Update current data and switch to view mode
|
|
currentData = {
|
|
aktivitas: aktivitas,
|
|
fasilitas: fasilitas,
|
|
jenis_pengolahan: jenisPengolahan
|
|
};
|
|
updateViewMode();
|
|
cancelEdit();
|
|
});
|
|
}
|
|
},
|
|
error: function() {
|
|
Swal.fire({
|
|
title: 'Error!',
|
|
text: 'Gagal menyimpan data',
|
|
icon: 'error',
|
|
confirmButtonText: 'OK',
|
|
buttonsStyling: false,
|
|
customClass: {
|
|
confirmButton: 'btn bg-green-800 text-white hover:bg-green-900 px-4 py-2 rounded-full',
|
|
},
|
|
});
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
}
|