269 lines
13 KiB
HTML
269 lines
13 KiB
HTML
<div style="text-align: center; font-weight: 600; margin: .8em 0; font-size: 1.2em;">
|
|
Program Kerja Agen Perubahan
|
|
</div>
|
|
<div style="display: flex; justify-content: space-between; padding: 0 2.5ch;">
|
|
<span>Tahun:
|
|
<select id="pkYear" style="width: max-content;">
|
|
|
|
</select>
|
|
</span>
|
|
<div style="display: grid; grid-template-columns: auto auto auto; gap: .75ch;">
|
|
<a-button id="submitProker">Ajukan Program Kerja</a-button>
|
|
<sep-bar></sep-bar>
|
|
<a-button id="newProker">Tambah Kegiatan</a-button>
|
|
</div>
|
|
</div>
|
|
<div style="max-height: calc(80vh - 6em); overflow: auto; margin: 0 0 1em 0; padding: 0 2ch 2ch 2ch;" id="pkWrapper">
|
|
<table id="proker" class="bordered selectable">
|
|
<colgroup>
|
|
<col style="width: 4ch;">
|
|
<col style="width: 27ch;">
|
|
<col style="min-width: 12ch;">
|
|
<col style="width: 8ch;">
|
|
<col style="width: 17ch;">
|
|
<col style="width: 16ch;">
|
|
<col style="width: 9ch;">
|
|
</colgroup>
|
|
<thead>
|
|
<tr>
|
|
<th>No</th>
|
|
<th>Kegiatan</th>
|
|
<th>Sasaran</th>
|
|
<th>Target Waktu</th>
|
|
<th>Waktu Mulai</th>
|
|
<th>Status</th>
|
|
<th>Evaluasi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="empty">
|
|
<tr>
|
|
<td colspan="7" style="text-align: center;">Data Kosong</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="pkContent" hidden>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<script type="module">
|
|
window.prokers = [];
|
|
const kegiatanName = [
|
|
"Sebagai Katalis",
|
|
"Sebagai Penggerak Perubahan",
|
|
"Sebagai Pemberi Solusi",
|
|
"Sebagai Mediator",
|
|
"Sebagai Penghubung"
|
|
]
|
|
const statusName = [
|
|
"Draft",
|
|
"Ditolak",
|
|
"Diajukan",
|
|
"Berjalan",
|
|
"Lebih Awal",
|
|
"Tepat Waktu",
|
|
"Terlambat",
|
|
"Tidak Terlaksana"
|
|
]
|
|
async function populateProker()
|
|
{
|
|
const loadid = moly.loadScreen.show("Memuat Daftar Program Kerja...","bar","#pkWrapper");
|
|
prokers = await getJson('/api/getprokers');
|
|
if (prokers.status != 200 || prokers.length < 1)
|
|
{
|
|
moly.loadScreen.close(loadid);
|
|
return;
|
|
}
|
|
$('#pkYear').empty();
|
|
const years = [];
|
|
prokers = prokers.data.reduce((a,v)=>{
|
|
const aindex = a.findIndex(e=>e.prokerID == v.prokerID);
|
|
if(!years.includes(v.year))
|
|
{
|
|
years.push(v.year);
|
|
const opt = moly.newElement("option");
|
|
opt.value = v.year;
|
|
opt.append(v.year);
|
|
$('#pkYear').append(opt);
|
|
}
|
|
if(aindex >=0)
|
|
{
|
|
a[aindex].journal.push({
|
|
journalID: v.journalID,
|
|
submitterID: v.submitterID,
|
|
notes: v.notes,
|
|
status: v.status,
|
|
document: v.document,
|
|
timeStamp: v.timeStamp.replace("T"," ")
|
|
})
|
|
a[aindex].journal.sort((ja,jb)=>ja.journalID.localeCompare(jb.journalID));
|
|
}
|
|
else
|
|
{
|
|
const nv = JSON.parse(JSON.stringify(v));
|
|
nv.journal= [{
|
|
journalID: v.journalID,
|
|
submitterID: v.submitterID,
|
|
notes: v.notes,
|
|
status: v.status,
|
|
document: v.document,
|
|
timeStamp: v.timeStamp.replace("T"," ")
|
|
}]
|
|
const owner = agents.find(e=> e.agentID == v.ownerID)
|
|
if (owner)
|
|
{
|
|
nv.owner = owner
|
|
delete nv.ownerID
|
|
}
|
|
delete nv.journalID;
|
|
delete nv.submitterID;
|
|
delete nv.notes;
|
|
delete nv.status;
|
|
delete nv.document;
|
|
delete nv.timeStamp;
|
|
a.push(nv);
|
|
}
|
|
return a;
|
|
},[]);
|
|
$('#pkYear').val(years.length > 0 ? years[0] : "");
|
|
$('#submitProker').prop("disabled",years.length < 1);
|
|
$('#pkYear').change(()=>{
|
|
fillProker();
|
|
})
|
|
fillProker();
|
|
moly.loadScreen.close(loadid);
|
|
}
|
|
function fillProker()
|
|
{
|
|
$('#proker #empty').prop("hidden", prokers.length > 0);
|
|
$('#proker #pkContent').prop("hidden", prokers.length < 1);
|
|
$('#proker #pkContent').empty();
|
|
const listedProkers = prokers.filter(e=>e.year == Number($('#pkYear').val()));
|
|
$('#newProker').prop("disabled",((listedProkers.length > 0 && listedProkers[0].year < (new Date()).getFullYear())) ||(listedProkers.length > 0 && listedProkers[0].year <= (new Date()).getFullYear() && listedProkers[0].journal.at(-1).status > 1));
|
|
$('#submitProker').prop("disabled",!(listedProkers.length > 0 && listedProkers[0].journal.at(-1).status < 2));
|
|
const statusStyles =[
|
|
"text-align: center; background-color: var(--secondary-foreground); color: var(--primary-background)",
|
|
"text-align: center; background-color: var(--neutral-n-accent); color: var(--primary-foreground)",
|
|
"text-align: center; background-color: var(--positive-accent); color: var(--primary-foreground)",
|
|
"text-align: center; background-color: unset; color: unset",
|
|
"text-align: center; background-color: var(--positive-accent); color: var(--primary-foreground)",
|
|
"text-align: center; background-color: var(--neutral-p-accent); color: var(--primary-foreground)",
|
|
"text-align: center; background-color: var(--neutral-n-accent); color: var(--primary-foreground)",
|
|
"text-align: center; background-color: var(--negative-accent); color: var(--primary-background)",
|
|
"text-align: center; box-shadow: inset 0 0 1.5ch 0.25ch var(--positive-accent)", // belum jadwalnya
|
|
"text-align: center; box-shadow: inset 0 0 1.5ch 0.25ch var(--neutral-p-accent)", // berjalan
|
|
"text-align: center; box-shadow: inset 0 0 1.5ch 0.25ch var(--neutral-n-accent)", // hampir deadline
|
|
"text-align: center; box-shadow: inset 0 0 1.5ch 0.25ch var(--negative-accent)" // terlambat
|
|
];
|
|
$.each(listedProkers,(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");
|
|
const ev = moly.newElement("td");
|
|
ro.append(no);
|
|
ro.append(kg);
|
|
ro.append(ss);
|
|
ro.append(tw);
|
|
ro.append(wm);
|
|
ro.append(st);
|
|
ro.append(ev);
|
|
no.append((i+1)+".");
|
|
no.style.textAlign = "right";
|
|
kg.append(kegiatanName[v.kegiatan]);
|
|
ss.append(v.sasaran);
|
|
ss.setAttribute("title",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";
|
|
const Now = new Date();
|
|
const doneline = new Date(v.journal.at(-1).timeStamp);
|
|
const lifeline = (v.isInMonth ? new Date(v.year, v.startMonth -1, 1) : new Date(v.year, v.startMonth -1, v.startDay)).setHours(0,0,0,0);
|
|
const deadline = new Date((v.isInMonth ? new Date(v.year, v.startMonth + v.timeTarget, 0) : new Date(v.year, v.startMonth -1, v.startDay + v.timeTarget)).setHours(23,59,59));
|
|
const neardeadline = new Date((new Date(deadline)).setDate(deadline.getDate() - 15)).setHours(0,0,0,0);
|
|
// v.status = v.journal.at(-1).status == 4 && doneline < lifeline ? 4 : v.journal.at(-1).status == 4 && doneline <= deadline ? 5 : v.journal.at(-1).status == 4 && doneline > deadline ? 6 : v.journal.at(-1).status == 3 && v.year < Now.getFullYear() ? 7 : 3;
|
|
v.status = v.journal.at(-1).status == 8 ?
|
|
(v.journal.at(-2).status == 4 && doneline < lifeline ? 4
|
|
: v.journal.at(-2).status == 4 && doneline <= deadline ? 5
|
|
: v.journal.at(-2).status == 4 && doneline > deadline ? 6
|
|
: v.journal.at(-2).status == 3 && v.year < Now.getFullYear() ? 7
|
|
: v.journal.at(-2).status)
|
|
: (v.journal.at(-1).status == 4 && doneline < lifeline ? 4
|
|
: v.journal.at(-1).status == 4 && doneline <= deadline ? 5
|
|
: v.journal.at(-1).status == 4 && doneline > deadline ? 6
|
|
: v.journal.at(-1).status == 3 && v.year < Now.getFullYear() ? 7
|
|
: v.journal.at(-1).status);
|
|
// "Draft",
|
|
// "Ditolak",
|
|
// "Diajukan",
|
|
// "Berjalan",
|
|
// "Lebih Awal",
|
|
// "Tepat Waktu",
|
|
// "Terlambat",
|
|
// "Tidak Terlaksana"
|
|
|
|
st.append(statusName[v.status]);
|
|
ev.append(v.journal.at(-1).status == 8 ? "Sudah" : v.journal.at(-1).status < 4 ? "---" : "Belum");
|
|
ev.style.textAlign = "center";
|
|
ev.style.backgroundColor = v.journal.at(-1).status == 8 ? "var(--positive-accent)" : v.journal.at(-1).status < 4 ? "" : "var(--neutral-n-accent)";
|
|
v.styleCode = v.status != 3 ? v.status : Now < lifeline ? 8 : Now < neardeadline ? 9 : Now >= neardeadline && Now < deadline ? 10 : 11;
|
|
$(st).text(v.status != 3 ? $(st).text() : Now < lifeline ? "Belum Jadwalnya" : Now < neardeadline ? "Berjalan" : Now >= neardeadline && Now.getDate() == deadline.getDate() && Now.getMonth() == deadline.getMonth() ? "Deadline!" : Now >= neardeadline && Now <= deadline ? "Hampir Deadline" : "Lewat Deadline");
|
|
st.style = statusStyles[v.styleCode];
|
|
$(ro).click(async()=>{
|
|
const data = v;
|
|
if (data.journal.at(-1).status < 2)
|
|
{
|
|
const vw = await moly.dialog.show({title: "Detil Program Kerja", content: "/modules/kegiatan-proker-edit.html", fetching: true, data});
|
|
if(vw) populateProker();
|
|
}
|
|
else if (data.journal.at(-1).status == 8)
|
|
{
|
|
await moly.dialog.show({title: "Hasil Evaluasi Aksi Perubahan", content: "/modules/kegiatan-proker-evaled.html", fetching: true, data})
|
|
}
|
|
else if (data.journal.at(-1).status > 3)
|
|
{
|
|
await moly.dialog.show({title: "Lihat Eviden Akhir Aksi Perubahan", content: "/modules/kegiatan-proker-finished.html", fetching: true, data})
|
|
}
|
|
else if (data.journal.at(-1).status > 2)
|
|
{
|
|
const ev = await moly.dialog.show({title: "Upload Eviden Akhir Aksi Perubahan", content: "/modules/kegiatan-proker-finish.html", fetching: true, data});
|
|
if (ev) populateProker();
|
|
}
|
|
})
|
|
$('#proker #pkContent').append(ro);
|
|
});
|
|
}
|
|
$(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();
|
|
});
|
|
$('#submitProker').click(async()=>{
|
|
const loadid = moly.loadScreen.show("Memuat Daftar Program Kerja...","bar","#pkWrapper");
|
|
const listedProkers = prokers.filter(e=>e.year == Number($('#pkYear').val()));
|
|
const progCheck = [false,false,false,false,false];
|
|
$.each(listedProkers,(_,v)=>{progCheck[v.kegiatan] = true});
|
|
if(!(progCheck[0] && progCheck[1] && progCheck[2] && progCheck[3] && progCheck[4]))
|
|
{
|
|
moly.alert.show("Program Kerja Belum Lengkap","Harap melengkapi Program Kerja. Pastikan seluruh Kegiatan telah diprogramkan.");
|
|
console.log(progCheck)
|
|
moly.loadScreen.close(loadid);
|
|
return;
|
|
}
|
|
const submission = await postJson('/api/submitpk',{agentid: userDetails.info.agentID, year: Number($('#pkYear').val())});
|
|
if(submission.status != 202)
|
|
{
|
|
moly.alert.show("Pengajuan Program Kerja Gagal","Program Kerja tidak berhasil diajukan. Silakan ulangi kembali beberapa saat lagi.")
|
|
moly.loadScreen.close(loadid);
|
|
return;
|
|
}
|
|
populateProker();
|
|
moly.loadScreen.close(loadid);
|
|
})
|
|
})
|
|
</script> |