level3 done

modules/dasbor-level3.html

@@ -36,13 +36,22 @@
     .stexts{
         padding: 0 1ch;
     }
+    #utext
+    {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: inline-block;
+        width: calc(100% - 12ch);
+        vertical-align: bottom;
+    }
 </style>
 <div style="padding: 1ch; font-size: 1.2em; font-weight: 600;">
-    Dasbor Agen Perubahan <span id="uk"></span>
+    Dasbor Agen Perubahan <span id="nm"></span> Tahun <span class="yr"></span>
 </div>
 <div style="display: grid; gap: 2ch; grid-template-columns: 1fr auto 1fr; padding: 1ch">
     <div class="card">
-        <div class="numbers">
+        <div class="numbers" id="pacts">
             0
         </div>
         <div class="texts">
@@ -50,9 +59,8 @@
             Aksi
         </div>
     </div>
-    <div class="card">
+    <div class="card">   
-        
+        <div class="numbers warn" id="oacts">
-        <div class="numbers">
             0
         </div>
         <div class="texts">
@@ -61,12 +69,12 @@
         </div>
     </div>
     <div class="card">
-        <div class="numbers warn">
+        <div class="numbers" id="dacts">
             0
         </div>
         <div class="texts">
-            Menunggu<br>
+            Eviden<br>
-            Evaluasi
+            Diupload
         </div>
     </div>
     <div style="grid-column: span 2;" class="ecard">
@@ -80,7 +88,7 @@
         </div>
     </div>
     <div class="card">
-        <div class="numbers good">
+        <div class="numbers good" id="eacts">
             0
         </div>
         <div class="texts">
@@ -92,28 +100,126 @@
         <div class="texts">
             Hari Ini
         </div>
-        <div class="stexts" id="htoday">
+        <div class="stexts">
-            Tidak ada yang istimewa hari ini.
+            <div id="htoday" style="max-height: 14em; overflow-y: auto;">
+                Tidak ada yang istimewa hari ini.
+            </div>
         </div>
     </div>
     <div style="grid-column: span 2;" class="ecard">
         <div class="texts">
             <span id="mo"></span>
-            <span id="yr"></span>
+            <span class="yr"></span>
         </div>
         <div class="stexts" id="calendar" style="display: grid; grid-template-columns: auto auto auto auto auto auto auto; gap: 1ch;">
         </div>
     </div>
 </div>
 <script type="module">
+    const Now = new Date();
+    let prokers = [];
+    async function getProkers()
+    {
+        const loadid = moly.loadScreen.show("Menyusun dasbor...","dots","#content");
+        const years = [];
+        const pro = await getJson("/api/getprokers");
+        if(pro.status != 200) 
+        {
+            moly.loadScreen.close(loadid);
+            return;
+        }
+        prokers = pro.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;
+        },[]);
+        window.currProkers = prokers.filter(p=>p.year == Now.getFullYear());
+        const ongoingProkers = currProkers.filter(p=>p.journal.at(-1).status == 3);
+        const doneProkers = currProkers.filter(p=>p.journal.at(-1).status >= 4);
+        const evaledProkers = currProkers.filter(p=>p.journal.at(-1).status == 8);
+        µ('#pacts').text(currProkers.length);
+        µ('#oacts').text(ongoingProkers.length);
+        µ('#dacts').text(doneProkers.length);
+        µ('#eacts').text(evaledProkers.length);
+        $.each(currProkers,(_,v)=>{
+            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.deadline = deadline;
+            v.neardeadline = neardeadline;
+        });
+        const sortedProkers = [...currProkers].filter(r=>r.journal.at(-1).status == 3).sort((a,b)=>a.deadline - b.deadline);
+        const closest = sortedProkers[0];
+        µ('#udate').text(closest ? `${closest.deadline.getFullYear()}/${(closest.deadline.getMonth()+1).toString().padStart(2,"0")}/${closest.deadline.getDate().toString().padStart(2,"0")}` : "");
+        µ('#utext').text(closest ? closest.sasaran : "");
+        µ('#htoday').empty();
+        $.each(sortedProkers,(_,v)=>{
+            const d = moly.newElement("div");
+            const s = moly.newElement("span");
+            const t = moly.newElement("span");
+            d.append(s);
+            d.append(t);
+            s.append(Now < v.neardeadline ? "Berjalan: " : Now >= v.neardeadline && Now < v.deadline ? "Hampir Deadline: " : Now > v.neardeadline && Now.getDate() == v.deadline.getDate() ? "Deadline!: " : "Lewat Deadline: ");
+            s.style.fontWeight = "600"
+            s.style.color = Now < v.neardeadline ? "var(--primary-foreground)" : Now >= v.neardeadline && Now < v.deadline ? "var(--neutral-n-accent)" : Now > v.neardeadline && Now.getDate() == v.deadline.getDate() ? "var(--negative-accent)" : "var(--negative-accent)"
+            t.append(v.sasaran)
+            µ('#htoday').append(d);
+        });
+        moly.loadScreen.close(loadid);
+    }
     function µ(selector)
     {
         if (selector) return $('body>#main>#content').find(selector);
         return $('body>#main>#content');
     }
-    µ('#uk').text(userDetails.info.unitKerja);
+    µ('#nm').text(userDetails.info.name);
-    µ('#mo').text(monthName[(new Date()).getMonth()+1]);
+    µ('#mo').text(monthName[Now.getMonth()+1]);
-    µ('#yr').text((new Date()).getFullYear());
+    µ('.yr').text(Now.getFullYear());
     function buildCalendar()
     {
         µ('#calendar').empty();
@@ -166,4 +272,5 @@
         }
     }
     buildCalendar();
+    await getProkers();
 </script>