Worker up to Supervisor's response

index.html

@@ -155,10 +155,16 @@ nav
                     <m-inline>dashboard</m-inline> Dasbor 
                 </div>
                 <div class="item" data-path="kegiatan">
-                    <m-inline>supervisor_account</m-inline> Kegiatan dan Dokumentasi
+                    <m-inline>article_person</m-inline> Program Kerja
+                </div>
+                <div class="item" data-path="submission">
+                    <m-inline>supervisor_account</m-inline> Pengajuan Program Kerja
+                </div>
+                <div class="item" data-path="monev">
+                    <m-inline>monitoring</m-inline> Monitoring dan Evaluasi
                 </div>
                 <div class="item" data-path="agen">
-                    <m-inline>supervisor_account</m-inline> Manajemen Agen & User
+                    <m-inline>manage_accounts</m-inline> Manajemen Agen & User
                 </div>
                 <div class="item" data-path="laporan">
                     <m-inline>quick_references</m-inline> Laporan
@@ -198,18 +204,45 @@ nav
         {
             location = "/login.html";
         }
+        window.userDetails = detail.data;
         window.agents = (await fetch("/api/getagents").then(r=>r.json()).catch(e=>{
             moly.alert.show("Koneksi Gagal","Gagal menyambung ke server. Harap periksa koneksi jaringan.");
             return {data: []};
         })).data;
-        window.userDetails = detail.data;
+        let units = (await fetch("/api/getunits").then(r=>r.json()).catch(e=>{
-        const loggedInAgent = agents.find(a=>a.agentID == userDetails.agentID)
+            moly.alert.show("Koneksi Gagal","Gagal menyambung ke server. Harap periksa koneksi jaringan.");
+            return {data: []};
+        })).data;
+        userDetails.info = agents.find(e=>e.agentID == userDetails.agentID);
+        userDetails.info.unitKerja = units.find(e=>e.deplID == userDetails.info.deplID).unitKerja;
+        units = null;
+        delete userDetails.agentID;
+        const loggedInAgent = userDetails.info;
+        agents = agents.filter(e=> e.deplID == userDetails.info.deplID);
         // if (!window.evtSource) window.evtSource = new EventSource("/events");
         window.addEventListener("viewChange", async ()=>{
             if (window.evtSource) evtSource.onmessage = null;
         });
         async function domReady()
         {
+            switch (userDetails.level) {
+                case 1:
+                    $('[data-path="kegiatan"],[data-path="submission"],[data-path="agen"]').remove();
+                    break;
+                case 2:
+                    $('[data-path="kegiatan"],[data-path="laporan"],[data-path="agen"],[data-path="monev"]').remove();
+                    break;
+                case 3:
+                    $('[data-path="monev"],[data-path="submission"],[data-path="agen"],[data-path="laporan"]').remove();
+                    break;
+                case 0:
+                    $('[data-path="kegiatan"],[data-path="submission"],[data-path="monev"]').remove();
+                    break;
+                default:
+                    getJson("/auth/logout");
+                    location="/login.html";
+                    break;
+            }
             $('#vernum').text(`v${vernum}`)
             $('#lo').click(async()=>{
                 const res = await fetch('/auth/logout').catch(e=>{
@@ -233,12 +266,12 @@ nav
                 moly.loadScreen.close(id);
                 window.shellnavigating = false;
             });
-            $('#blocker').remove();
             $($('.item')[0]).trigger("click");
+            $('#blocker').remove();
         }
         (async ()=>{
             let time = 0
-            while (typeof window.moly === "undefined" && time < 10000) {
+            while (typeof window.moly === "undefined" || typeof window.userDetails === "undefined" || typeof window.agents === "undefined" && time < 10000) {
                 await new Promise(resolve => setTimeout(resolve, 50));
                 time += 50;
             }
@@ -247,6 +280,7 @@ nav
                 while (typeof window.moly !== "undefined" && document.readyState !== "complete") {
                     await new Promise(resolve => setTimeout(resolve, 100));
                 }
+                time = null;
                 domReady();
             }
         })()

modules/kegiatan.html

@@ -173,8 +173,15 @@
             st.style = statusStyles[v.journal.at(-1).status];
             $(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 (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 > 2)
+                {
+                    alert("To Advance the proker")
+                }
             })
             $('#proker #pkContent').append(ro);
         });
@@ -198,7 +205,7 @@
                 moly.loadScreen.close(loadid);
                 return;
             }
-            const submission = await postJson('/api/submitpk',{agentid: userDetails.agentID, year: Number($('#pkYear').val())});
+            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.")

modules/submission-process.html

@@ -0,0 +1,50 @@
+<div style="text-align: center;">
+    <span>Catatan Persetujuan/Penolakan Program Kerja Tahun <span id="yr"></span></span><br>
+    <span>Agen Perubahan <span id="nm"></span></span>
+</div>
+<textarea id="notes" style="width: 100%;height: 6em;margin: 1em 0; resize: none;" maxlength="126" placeholder="Harap isikan catatan (wajib)">
+</textarea>
+<div style="display: grid;grid-template-columns: auto 1fr auto;">
+    <a-button id="decline" type="negative">Tolak</a-button>
+    &nbsp;
+    <a-button id="approve">Setujui</a-button>
+</div>
+<script type="module">
+    const thisDialog = moly.lastDialog();
+    const data = thisDialog.data;
+    function µ(selector)
+    {
+        if (selector) return $(thisDialog.box).find(selector);
+        return $(thisDialog.box);
+    }
+    µ('#yr').text(data.year);
+    µ('#nm').text(agents.find(e=>e.agentID == data.agentid).name);
+    µ('#decline').click(()=>{
+        data.newstatus = 1;
+        process();
+    })
+    µ('#approve').click(()=>{
+        data.newstatus = 3;
+        process();
+    })
+    async function process()
+    {
+        const loadid = moly.loadScreen.show("Memroses Program Kerja...","sonar",'#main');
+        data.notes = µ('#notes').val();
+        if(data.notes.length < 5)
+        {
+            moly.alert.show("Catatan Belum Dilengkapi","Harap isikan catatan dengan pesan yang bermakna.");
+            moly.loadScreen.close(loadid);
+            return;
+        }
+        const process = await postJson('/api/processpk',data);
+        if(process.status != 202)
+        {
+            moly.alert.show("Tanggapi Program Kerja","Gagal mengirimkan tanggapan. Silakan ulangi kembali beberapa saat lagi.");
+            moly.loadScreen.close(loadid);
+            return;
+        }
+        thisDialog.resolve(data.newstatus);
+        moly.loadScreen.close(loadid);
+    }
+</script>

modules/submission-view.html

@@ -0,0 +1,101 @@
+<div style="display: grid; grid-template-columns: auto auto 1fr; column-gap: 1ch;">
+    <span>Kegiatan</span>
+    &nbsp;
+    <select id="kegiatan" style="width: max-content;" disabled>
+        <option value="-1" selected disabled>-Pilih Kegiatan-</option>
+        <option value="0">Sebagai Katalis</option>
+        <option value="1">Sebagai Penggerak Perubahan</option>
+        <option value="2">Sebagai Pemberi Solusi</option>
+        <option value="3">Sebagai Mediator</option>
+        <option value="4">Sebagai Penghubung</option>
+    </select>
+    <span>Target Waktu</span>
+    &nbsp;
+    <div>
+        <input type="number" id="target" min="1" style="width: 7ch;" value="1" disabled>
+        &nbsp;
+        <select id="targetUnit" style="width: max-content;" disabled>
+            <option value="0">Hari</option>
+            <option value="1" selected>Bulan</option>
+        </select>
+    </div>
+    <span class="forDay" hidden>Tgl Mulai</span>
+    <span class="forDay" hidden></span>
+    <input class="forDay" type="date" id="startDate" style="max-width: max-content;" hidden disabled>
+    <span class="forMonth">Bulan Mulai</span>
+    <span class="forMonth"></span>
+    <input class="forMonth" type="month" id="startMonth" style="max-width: max-content;" disabled>
+    <div style="grid-column: span 3;">
+        <span>Sasaran Kegiatan:</span><br>
+        <textarea disabled id="sasaran" style="resize: none; width: 100%; height: 4.6em;" maxlength="510" placeholder="Contoh: Mengenakan seragam sesuai aturan."></textarea>
+    </div>
+    <div style="grid-column: span 3;">
+        <span>Sasaran Entitas:</span><br>
+        <textarea disabled id="enttarget" style="resize: none; width: 100%; height: 4.6em;" maxlength="510" placeholder="Contoh: Seluruh pegawai Kanwil BPN Provinsi Riau."></textarea>
+    </div>
+    <div style="grid-column: span 3;">
+        <span>Indikator:</span><br>
+        <textarea disabled id="indikator" style="resize: none; width: 100%; height: 4.6em;" maxlength="510" placeholder="Contoh: Persentase pegawai taat aturan berpakaian."></textarea>
+    </div>
+    <div style="grid-column: span 3;">
+        <span>Rencana Aksi:</span><br>
+        <textarea disabled id="aksi" style="resize: none; width: 100%; height: 4.6em;" maxlength="510" placeholder="Contoh: Sosialisasi aturan berpakaian."></textarea>
+    </div>
+</div>
+<div style="display: grid; grid-template-columns: auto auto 1fr;">
+    <a-button id="prev">Sebelumnya</a-button>
+    <a-button id="next">Berikutnya</a-button>
+    <div style="text-align: right;">
+        <a-button id="processProker">Tanggapi</a-button>
+    </div>
+</div>
+<script type="module">
+    const thisDialog = moly.lastDialog();
+    const data = thisDialog.data;
+    let vdata = data.prokers[data.startIndex]
+    µ('#processProker').prop("disabled",vdata.journal.at(-1).status != 2);
+    function µ(selector)
+    {
+        if (selector) return $(thisDialog.box).find(selector);
+        return $(thisDialog.box);
+    }
+    function fillForms()
+    {
+        µ('#prev').prop("disabled",data.startIndex <=0);
+        µ('#next').prop("disabled",data.startIndex >= data.prokers.length -1);
+        µ('#aksi').val(vdata.actions);
+        µ('#enttarget').val(vdata.entityTarget);
+        µ('#indikator').val(vdata.indicators);
+        µ('#targetUnit').val(vdata.isInMonth ? 1 : 0);
+        µ('#kegiatan').val(vdata.kegiatan);
+        µ('#sasaran').val(vdata.sasaran);
+        let DateTime = vdata.year + "-" + vdata.startMonth.toString().padStart(2,"0");
+        DateTime += vdata.isInMonth ? "" : "-" + vdata.startDay.toString().padStart(2,"0");
+        µ('#target').val(vdata.timeTarget);
+        if(vdata.isInMonth)
+        {
+            µ('#startMonth').val(DateTime);
+        }
+        else
+        {
+            µ('#startDate').val(DateTime);
+        }
+    }
+    $(document).ready(async()=>{
+        fillForms();
+        µ('#prev').click(()=>{
+            data.startIndex = data.startIndex == 0 ? 0 : data.startIndex - 1;
+            vdata = data.prokers[data.startIndex];
+            fillForms();
+        });
+        µ('#next').click(()=>{
+            data.startIndex = data.startIndex == data.prokers.length -1 ? data.prokers.length -1 : data.startIndex + 1;
+            vdata = data.prokers[data.startIndex];
+            fillForms();
+        });
+        µ('#processProker').click(async()=>{
+            const res = await moly.dialog.show({title:"Tanggapi Program Kerja "+ vdata.owner.name, content: "/modules/submission-process.html", fetching: true, data: {agentid: vdata.owner.agentID, year: vdata.year}});
+            if (res) thisDialog.resolve(vdata.owner.agentID);
+        });
+    })
+</script>

modules/submission.html

@@ -0,0 +1,252 @@
+<group-el label="Daftar Agen Perubahan" id="agGroup">
+    <div style="text-align: center; font-weight: 600; margin: .8em 0; font-size: 1.1em;">
+        Daftar Agen Perubahan<br>
+        <span id="uk"></span>
+    </div>
+    <div style="max-height: calc(50vh - 6em); overflow-y: scroll; margin: 0 0 1em 0; padding: 0 2ch 2ch 2ch;" id="agWrapper">
+        <table id="agents" class="bordered selectable">
+            <colgroup>
+                <col style="width: 4ch;">
+                <col style="width: 22ch;">
+                <col>
+            </colgroup>
+            <thead>
+                <tr>
+                    <th>No</th>
+                    <th>NIP</th>
+                    <th>Nama Agen</th>
+                </tr>
+            </thead>
+            <tbody id="agEmpty">
+                <tr>
+                    <td colspan="3" style="text-align: center;"> 
+                        Data Kosong
+                    </td>
+                </tr>
+            </tbody>
+            <tbody id="agContent" hidden>
+
+            </tbody>
+        </table>
+    </div>
+</group-el>
+<group-el label="Program Kerja" id="pkGroup" collapsed disabled>
+    <div style="text-align: center; font-weight: 600; margin: .8em 0; font-size: 1.1em;">
+        Program Kerja Agen Perubahan<br>
+        <span id="agName"></span>
+    </div>
+    <div style="display: flex; justify-content: space-between; padding: 0 2.5ch;">
+        <span>Tahun:&nbsp;
+            <select id="pkYear" style="width: max-content;">
+
+            </select>
+        </span>
+        &nbsp;
+    </div>
+    <div style="max-height: calc(50vh - 6em); overflow-y: scroll; 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: 19ch;">
+                <col>
+                <col style="width: 8ch;">
+                <col style="width: 17ch;">
+                <col style="width: 16ch;">
+            </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 = [];
+    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(agentID)
+    {
+        if(!agentID) return;
+        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;
+        }
+        $('#agName').text(agents.find(a=>a.agentID == agentID)?.name);
+        prokers.data = prokers.data.filter(e=>e.ownerID == agentID);
+        $('#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()));
+        $('#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)",
+        ];
+        $.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");
+            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(statusName[v.journal.at(-1).status]);
+            st.style = statusStyles[v.journal.at(-1).status];
+            $(ro).click(async()=>{
+                const vr = await moly.dialog.show({title: "Detil Program Kerja "+v.owner.name, content: "/modules/submission-view.html", fetching: true, data: {startIndex: i, prokers}});
+                // console.log(vr);
+                if (vr) populateProker(vr);
+            })
+            $('#proker #pkContent').append(ro);
+        });
+    }
+    function fillAgents()
+    {
+        const loadid = moly.loadScreen.show("Memuat data agen...","bar","#agWrapper");
+        $('#agContent').empty();
+        $.each(agents,(i,v)=>{
+            const ro = moly.newElement("tr");
+            const no = moly.newElement("td");
+            const ni = moly.newElement("td");
+            const na = moly.newElement("td");
+            ro.append(no)
+            ro.append(ni)
+            ro.append(na)
+            no.append((i+1) + ".");
+            no.style.textAlign = "right";
+            ni.append(v.agentID);
+            ni.style.textAlign = "center";
+            na.append(v.name);
+            $(ro).click(()=>{
+                $('#agGroup').prop("collapsed",true);
+                $('#pkGroup').prop("collapsed",false);
+                $('#pkGroup').prop("disabled",false);
+                populateProker(v.agentID);
+            });
+            $('#agContent').append(ro);
+        })
+        $('#agEmpty').prop("hidden",agents.length > 0);
+        $('#agContent').prop("hidden",agents.length < 1);
+        moly.loadScreen.close(loadid);
+    }
+    $(document).ready(async()=>{
+        $('#uk').text(userDetails.info.unitKerja);
+        fillAgents();
+        $($('#agGroup')[0].shadowRoot).find("group-label>a-button")[0].addEventListener("click",()=>{
+                $('#pkGroup').prop("collapsed",!$('#agGroup').prop("collapsed"));
+        });
+    })
+</script>