agper-agen/modules/kegiatan.html
2025-06-25 02:12:43 +07:00

99 lines
3.7 KiB
HTML

<style>
</style><group-el label="Program Kerja">
<div style="text-align: right;">
<a-button id="newProker">Tambah Kegiatan</a-button>
</div>
<div style="max-height: calc(50vh - 6em); overflow-y: scroll; margin: 1em 0" id="pkWrapper">
<table id="proker" class="bordered selectable">
<colgroup>
<col style="width: 4ch;">
<col style="width: 19ch;">
<col>
<col style="width: 8ch;">
<col style="width: 17ch;">
<col style="width: 14ch;">
</colgroup>
<thead>
<tr>
<th>No</th>
<th>Kegiatan</th>
<th>Sasaran</th>
<th>Target Waktu</th>
<th>Waktu Mulai</th>
<th>Status</th>
</tr>
</thead>
<tbody id="empty">
<tr>
<td colspan="6" style="text-align: center;">Data Kosong</td>
</tr>
</tbody>
<tbody id="pkContent" hidden>
</tbody>
</table>
</div>
</group-el>
<script type="module">
let prokers = [];
async function populateProker()
{
const loadid = moly.loadScreen.show("Memuat Daftar Program Kerja...","bar","#pkWrapper");
const kegiatanName = [
"Sebagai Katalis",
"Sebagai Penggerak Perubahan",
"Sebagai Pemberi Solusi",
"Sebagai Mediator",
"Sebagai Penghubung"
]
prokers = await getJson('/api/getprokers');
if (prokers.status != 200 || prokers.length < 1)
{
moly.loadScreen.close(loadid);
return;
}
prokers = prokers.data;
$('#proker #empty').prop("hidden", prokers.length > 0);
$('#proker #pkContent').prop("hidden", prokers.length < 1);
$('#proker #pkContent').empty();
$.each(prokers,(i,v)=>{
const ro = moly.newElement("tr");
const no = moly.newElement("td");
const kg = moly.newElement("td");
const ss = moly.newElement("td");
const tw = moly.newElement("td");
const wm = moly.newElement("td");
const st = moly.newElement("td");
ro.append(no);
ro.append(kg);
ro.append(ss);
ro.append(tw);
ro.append(wm);
ro.append(st);
no.append((i+1)+".");
no.style.textAlign = "right";
kg.append(kegiatanName[v.kegiatan]);
ss.append(v.sasaran);
tw.append(`${v.timeTarget} ${v.isInMonth ? "Bulan" : "Hari"}`);
tw.style.textAlign = "center";
wm.append(((v.startDay == null ? "" : v.startDay.toString().padStart(2,"0") + " ") + monthName[v.startMonth] + " " + v.year));
wm.style.textAlign = "right";
st.append("Draft");
st.style.textAlign = "center";
$(ro).click(async()=>{
const data = v;
const vw = await moly.dialog.show({title: "Detil Program Kerja", content: "/modules/kegiatan-proker-view.html", fetching: true, data});
if(vw) populateProker();
})
$('#proker #pkContent').append(ro);
});
moly.loadScreen.close(loadid);
}
$(document).ready(async()=>{
populateProker();
$('#newProker').click(async ()=>{
const data = userDetails;
const np = await moly.dialog.show({title: "Entri Program Kerja dan Rencana Aksi", content: "/modules/kegiatan-proker-new.html", fetching: true, data});
if(np) populateProker();
});
})
</script>