nugroho/agper-agen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

up to partial dashboard

Browse Source
This commit is contained in:
nugroho 2025-07-01 00:13:29 +07:00
parent 6ad2260f3e
commit 3c0684928e
16 changed files with 1100 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/css/molybdenum.css
View File

@ -6,7 +6,7 @@
:root {
color-scheme: light only;
--secondary-table: #1e634a;
--primary-table: #1182a4;
--primary-table: #17253b;
--primary-foreground: #050607;
--secondary-foreground: #aaaaac;
--primary-background: #fefdfc;

BIN
assets/images/bpn.webp
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 16 KiB

BIN
assets/images/logo-text.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 66 KiB

10
index.html
View File

@ -4,7 +4,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width initial-scale=1.0, maximum-scale=1.0"/>
<link rel="icon" type="image/webp" href="/assets/images/bpn.webp">
<title>Agen Perubahan Admin Panel</title>
<title>SIGAP ASN - Sistem Informasi Gerakan Agen Perubahan ASN</title>
<link rel="preload" href="/assets/fonts/materials.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="/assets/fonts/ss3l.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="/assets/fonts/ss3il.woff2" as="font" type="font/woff2" crossorigin="anonymous">
@ -45,7 +45,7 @@ aside
min-height: 100%;
width: 30ch;
background-color: var(--primary-table);
color: var(--primary-foreground);
color: var(--primary-background);
padding: .5ch;
padding-top: 3.5em;
box-shadow: var(--primary-foreground) .65ch 0, inset var(--primary-foreground) -13px 0 20px -25px;
@ -148,7 +148,7 @@ nav
<load-screen id="blocker" style="background-color : #fefdfc ; z-index: 1;"><sonar-ping></sonar-ping><load-message>Memuat Aplikasi...</load-message></load-screen>
<aside>
<div class="logobox">
<img src="/assets/images/logo-text.png" style="width: 100%; height: 100%; object-fit: contain; object-position: 1.5ch center;">
<img src="/assets/images/logo-text.webp" style="width: 100%; height: 100%; object-fit: contain; object-position: 1.5ch center;">
</div>
<div class="sidebar">
<div class="item" data-path="dasbor">
@ -175,7 +175,7 @@ nav
<nav>
<div>
<span>
Agen Perubahan ATR/BPN Kanwil Riau
SIGAP ASN ATR/BPN Kanwil Riau
</span>
</div>
&nbsp;
@ -189,7 +189,7 @@ nav
</div>
<div id="footer">
<span>Agen Perubahan Admin Panel <span id="vernum"></span></span>
<span>SIGAP ASN Panel <span id="vernum"></span></span>
&nbsp;
<span>ATR/BPN Kantor Wilayah Provinsi Riau</span>
</div>

8
login.html
View File

@ -4,7 +4,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width initial-scale=1.0, maximum-scale=1.0"/>
<link rel="icon" type="image/webp" href="/assets/images/bpn.webp">
<title>Agen Perubahan ATR/BPN Riau</title>
<title>SIGAP ASN - Sistem Informasi Gerakan Agen Perubahan ASN</title>
<link rel="preload" href="/assets/fonts/materials.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="/assets/fonts/ss3l.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="/assets/fonts/ss3il.woff2" as="font" type="font/woff2" crossorigin="anonymous">
@ -37,9 +37,9 @@
</head>
<body style="margin: 0; height: 100%;">
<load-screen id="blocker" style="background-color : #fefdfc ; z-index: 1;"><sonar-ping></sonar-ping><load-message>Memuat Aplikasi...</load-message></load-screen>
<div style="display: flex; justify-content: center; align-items: center; width: 100%; height: calc(100% - 2.4em); background-color: var(--secondary-background); flex-direction: column; background-image: url(/assets/images/bpn.webp); background-position-x: center; background-repeat: no-repeat;">
<div style="display: flex; justify-content: center; align-items: center; width: 100%; height: calc(100% - 2.4em); background-color: var(--secondary-background); flex-direction: column; background-image: url(/assets/images/bpn.webp); background-position-x: center; background-position-y: 7vh; background-repeat: no-repeat;">
<div style="width: 40ch; padding: 1.5ch; background-color: var(--semi-background); backdrop-filter: blur(3px);" id="box">
<h3 style="text-align: center;"><span id="mt">Agen Perubahan ATR/BPN<br>Kantor Wilayah Provinsi Riau</span></h3>
<h3 style="text-align: center;"><span id="mt" style="text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;">Masuk Aplikasi</span></h3>
<div style="margin: auto; width: max-content;">
<input id="uname" type="text" class="icon" placeholder="Username"><m-inline class="icon">person</m-inline><br>
<input id="pwd" type="password" class="icon peek" placeholder="Password"><m-inline class="icon">password</m-inline><a-button id="peeker" type="peek"><m-inline>visibility_on</m-inline></a-button><br>
@ -50,7 +50,7 @@
</div>
</div>
<div style="height: 3em; background-color: var(--secondary-background); text-align: center; font-size: .8em;">
Agen Perubahan ATR/BPN Kanwil Riau <span id="vernum"></span><br>
Sistem Informasi Gerakan Agen Perubahan ASN <span id="vernum"></span><br>
Kementerian ATR/BPN Kantor Wilayah Provinsi Riau
</div>
</body>

172
modules/dasbor-level1.html Normal file
View File

@ -0,0 +1,172 @@
<style>
.card{
border-radius: 1ch;
background-color: var(--input-background);
padding: 1.25ch;
display: grid;
grid-template-columns: auto 1fr;
}
.ecard{
border-radius: 1ch;
background-color: var(--input-background);
padding: 1.25ch;
}
.numbers
{
width: 4ch;
height: 4ch;
background-color: var(--neutral-p-accent);
border-radius: 2ch;
text-align: center;
line-height: 2em;
margin: 1ch;
}
.numbers.warn
{
background-color: var(--neutral-n-accent);
}
.numbers.good
{
background-color: var(--positive-accent);
}
.texts{
font-weight: 600;
padding: 0 1ch;
}
.stexts{
padding: 0 1ch;
}
</style>
<div style="padding: 1ch; font-size: 1.2em; font-weight: 600;">
Dasbor Evaluator <span id="uk"></span>
</div>
<div style="display: grid; gap: 2ch; grid-template-columns: 1fr auto 1fr; padding: 1ch">
<div class="card">
<div class="numbers">
0
</div>
<div class="texts">
Rencana<br>
Aksi
</div>
</div>
<div class="card">
<div class="numbers">
0
</div>
<div class="texts">
Aksi<br>
Berlangsung
</div>
</div>
<div class="card">
<div class="numbers warn">
0
</div>
<div class="texts">
Menunggu<br>
Evaluasi
</div>
</div>
<div style="grid-column: span 2;" class="ecard">
<div class="texts">
Paling Butuh Perhatian
</div>
<div class="stexts">
<span id="udate">Tanggal</span>
<span>-</span>
<span id="utext">Deskripsi</span>
</div>
</div>
<div class="card">
<div class="numbers good">
0
</div>
<div class="texts">
Telah<br>
Dievaluasi
</div>
</div>
<div class="ecard">
<div class="texts">
Hari Ini
</div>
<div class="stexts" id="htoday">
Tidak ada yang istimewa hari ini.
</div>
</div>
<div style="grid-column: span 2;" class="ecard">
<div class="texts">
<span id="mo"></span>
<span id="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">
function µ(selector)
{
if (selector) return $('body>#main>#content').find(selector);
return $('body>#main>#content');
}
µ('#uk').text(userDetails.info.unitKerja);
µ('#mo').text(monthName[(new Date()).getMonth()+1]);
µ('#yr').text((new Date()).getFullYear());
function buildCalendar()
{
µ('#calendar').empty();
µ('#calendar')[0].style.marginTop = ".5em"
const dayNames =
[
"Ahd",
"Sen",
"Sel",
"Rab",
"Kam",
"Jum",
"Sab"
]
for (let d = 0;d<7;d++)
{
const day = moly.newElement("div");
day.append(dayNames[d]);
day.style.fontWeight = "600";
day.style.color = d == 0 ? "var(--negative-accent)" : "var(--primary-foreground)";
day.style.textAlign = "center"
day.style.borderBottom = "1px solid " + (d == 0 ? "var(--negative-accent)" : "var(--primary-foreground)");
µ('#calendar').append(day);
}
const today = new Date();
const tomonth = new Date(today.getFullYear(),today.getMonth(),1);
const tomonthl = new Date(today.getFullYear(),today.getMonth()+1,0);
const firstDay = tomonth.getDay();
console.log("today", today);
console.log("tomonth", tomonth);
console.log("firstday", firstDay);
const lastDate = tomonthl.getDate();
const todayDate = today.getDate()
let x = 0;
while (x <firstDay)
{
µ('#calendar').append(moly.newElement("div"));
x++;
}
for (let d = 1;d<=lastDate;d++)
{
const day = moly.newElement("div");
day.append(d);
day.style.color = (firstDay + d - 1) % 7 == 0 ? "var(--negative-accent)" : "var(--primary-foreground)";
day.style.textAlign = "center"
day.style.margin = "auto"
day.style.width = "2em"
day.style.height = "2em"
day.style.lineHeight = "2em"
day.style.borderRadius = "1em"
day.style.backgroundColor = d == todayDate ? "var(--secondary-background)" : "";
µ('#calendar').append(day);
}
}
buildCalendar();
</script>

172
modules/dasbor-level2.html Normal file
View File

@ -0,0 +1,172 @@
<style>
.card{
border-radius: 1ch;
background-color: var(--input-background);
padding: 1.25ch;
display: grid;
grid-template-columns: auto 1fr;
}
.ecard{
border-radius: 1ch;
background-color: var(--input-background);
padding: 1.25ch;
}
.numbers
{
width: 4ch;
height: 4ch;
background-color: var(--neutral-p-accent);
border-radius: 2ch;
text-align: center;
line-height: 2em;
margin: 1ch;
}
.numbers.warn
{
background-color: var(--neutral-n-accent);
}
.numbers.good
{
background-color: var(--positive-accent);
}
.texts{
font-weight: 600;
padding: 0 1ch;
}
.stexts{
padding: 0 1ch;
}
</style>
<div style="padding: 1ch; font-size: 1.2em; font-weight: 600;">
Dasbor Supervisor <span id="uk"></span>
</div>
<div style="display: grid; gap: 2ch; grid-template-columns: 1fr auto 1fr; padding: 1ch">
<div class="card">
<div class="numbers">
0
</div>
<div class="texts">
Rencana<br>
Aksi
</div>
</div>
<div class="card">
<div class="numbers">
0
</div>
<div class="texts">
Aksi<br>
Berlangsung
</div>
</div>
<div class="card">
<div class="numbers warn">
0
</div>
<div class="texts">
Menunggu<br>
Respons
</div>
</div>
<div style="grid-column: span 2;" class="ecard">
<div class="texts">
Paling Butuh Perhatian
</div>
<div class="stexts">
<span id="udate">Tanggal</span>
<span>-</span>
<span id="utext">Deskripsi</span>
</div>
</div>
<div class="card">
<div class="numbers good">
0
</div>
<div class="texts">
Telah<br>
Direspons
</div>
</div>
<div class="ecard">
<div class="texts">
Hari Ini
</div>
<div class="stexts" id="htoday">
Tidak ada yang istimewa hari ini.
</div>
</div>
<div style="grid-column: span 2;" class="ecard">
<div class="texts">
<span id="mo"></span>
<span id="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">
function µ(selector)
{
if (selector) return $('body>#main>#content').find(selector);
return $('body>#main>#content');
}
µ('#uk').text(userDetails.info.unitKerja);
µ('#mo').text(monthName[(new Date()).getMonth()+1]);
µ('#yr').text((new Date()).getFullYear());
function buildCalendar()
{
µ('#calendar').empty();
µ('#calendar')[0].style.marginTop = ".5em"
const dayNames =
[
"Ahd",
"Sen",
"Sel",
"Rab",
"Kam",
"Jum",
"Sab"
]
for (let d = 0;d<7;d++)
{
const day = moly.newElement("div");
day.append(dayNames[d]);
day.style.fontWeight = "600";
day.style.color = d == 0 ? "var(--negative-accent)" : "var(--primary-foreground)";
day.style.textAlign = "center"
day.style.borderBottom = "1px solid " + (d == 0 ? "var(--negative-accent)" : "var(--primary-foreground)");
µ('#calendar').append(day);
}
const today = new Date();
const tomonth = new Date(today.getFullYear(),today.getMonth(),1);
const tomonthl = new Date(today.getFullYear(),today.getMonth()+1,0);
const firstDay = tomonth.getDay();
console.log("today", today);
console.log("tomonth", tomonth);
console.log("firstday", firstDay);
const lastDate = tomonthl.getDate();
const todayDate = today.getDate()
let x = 0;
while (x <firstDay)
{
µ('#calendar').append(moly.newElement("div"));
x++;
}
for (let d = 1;d<=lastDate;d++)
{
const day = moly.newElement("div");
day.append(d);
day.style.color = (firstDay + d - 1) % 7 == 0 ? "var(--negative-accent)" : "var(--primary-foreground)";
day.style.textAlign = "center"
day.style.margin = "auto"
day.style.width = "2em"
day.style.height = "2em"
day.style.lineHeight = "2em"
day.style.borderRadius = "1em"
day.style.backgroundColor = d == todayDate ? "var(--secondary-background)" : "";
µ('#calendar').append(day);
}
}
buildCalendar();
</script>

172
modules/dasbor-level3.html Normal file
View File

@ -0,0 +1,172 @@
<style>
.card{
border-radius: 1ch;
background-color: var(--input-background);
padding: 1.25ch;
display: grid;
grid-template-columns: auto 1fr;
}
.ecard{
border-radius: 1ch;
background-color: var(--input-background);
padding: 1.25ch;
}
.numbers
{
width: 4ch;
height: 4ch;
background-color: var(--neutral-p-accent);
border-radius: 2ch;
text-align: center;
line-height: 2em;
margin: 1ch;
}
.numbers.warn
{
background-color: var(--neutral-n-accent);
}
.numbers.good
{
background-color: var(--positive-accent);
}
.texts{
font-weight: 600;
padding: 0 1ch;
}
.stexts{
padding: 0 1ch;
}
</style>
<div style="padding: 1ch; font-size: 1.2em; font-weight: 600;">
Dasbor Agen Perubahan <span id="uk"></span>
</div>
<div style="display: grid; gap: 2ch; grid-template-columns: 1fr auto 1fr; padding: 1ch">
<div class="card">
<div class="numbers">
0
</div>
<div class="texts">
Rencana<br>
Aksi
</div>
</div>
<div class="card">
<div class="numbers">
0
</div>
<div class="texts">
Aksi<br>
Berlangsung
</div>
</div>
<div class="card">
<div class="numbers warn">
0
</div>
<div class="texts">
Menunggu<br>
Evaluasi
</div>
</div>
<div style="grid-column: span 2;" class="ecard">
<div class="texts">
Paling Butuh Perhatian
</div>
<div class="stexts">
<span id="udate">Tanggal</span>
<span>-</span>
<span id="utext">Deskripsi</span>
</div>
</div>
<div class="card">
<div class="numbers good">
0
</div>
<div class="texts">
Telah<br>
Dievaluasi
</div>
</div>
<div class="ecard">
<div class="texts">
Hari Ini
</div>
<div class="stexts" id="htoday">
Tidak ada yang istimewa hari ini.
</div>
</div>
<div style="grid-column: span 2;" class="ecard">
<div class="texts">
<span id="mo"></span>
<span id="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">
function µ(selector)
{
if (selector) return $('body>#main>#content').find(selector);
return $('body>#main>#content');
}
µ('#uk').text(userDetails.info.unitKerja);
µ('#mo').text(monthName[(new Date()).getMonth()+1]);
µ('#yr').text((new Date()).getFullYear());
function buildCalendar()
{
µ('#calendar').empty();
µ('#calendar')[0].style.marginTop = ".5em"
const dayNames =
[
"Ahd",
"Sen",
"Sel",
"Rab",
"Kam",
"Jum",
"Sab"
]
for (let d = 0;d<7;d++)
{
const day = moly.newElement("div");
day.append(dayNames[d]);
day.style.fontWeight = "600";
day.style.color = d == 0 ? "var(--negative-accent)" : "var(--primary-foreground)";
day.style.textAlign = "center"
day.style.borderBottom = "1px solid " + (d == 0 ? "var(--negative-accent)" : "var(--primary-foreground)");
µ('#calendar').append(day);
}
const today = new Date();
const tomonth = new Date(today.getFullYear(),today.getMonth(),1);
const tomonthl = new Date(today.getFullYear(),today.getMonth()+1,0);
const firstDay = tomonth.getDay();
console.log("today", today);
console.log("tomonth", tomonth);
console.log("firstday", firstDay);
const lastDate = tomonthl.getDate();
const todayDate = today.getDate()
let x = 0;
while (x <firstDay)
{
µ('#calendar').append(moly.newElement("div"));
x++;
}
for (let d = 1;d<=lastDate;d++)
{
const day = moly.newElement("div");
day.append(d);
day.style.color = (firstDay + d - 1) % 7 == 0 ? "var(--negative-accent)" : "var(--primary-foreground)";
day.style.textAlign = "center"
day.style.margin = "auto"
day.style.width = "2em"
day.style.height = "2em"
day.style.lineHeight = "2em"
day.style.borderRadius = "1em"
day.style.backgroundColor = d == todayDate ? "var(--secondary-background)" : "";
µ('#calendar').append(day);
}
}
buildCalendar();
</script>

13
modules/dasbor.html
View File

@ -0,0 +1,13 @@
<script type="module">
async function getContent()
{
const loadid = moly.loadScreen.show("Memuat Dasbor...", "dots","#content");
const cont = await fetch("/modules/dasbor-level"+level+".html");
if (cont.status != 200) return "Gagal Memuat Konten. Silakan ulangi kembali beberapa saat lagi.";
moly.loadScreen.close(loadid);
return await cont.text();
}
const level = userDetails.level ==0 ? 1 : userDetails.level;
$('#content').html(await getContent());
// console.log(await getContent())
</script>

42
modules/kegiatan-proker-evaled.html Normal file
View File

@ -0,0 +1,42 @@
<div>
Sasaran Aksi:
</div>
<div id="sasaran" style="margin-bottom: .5em;">&nbsp;</div>
<div>
Kendala, Hambatan, dan Masalah:
</div>
<textarea disabled id="kendala" style="width: 75ch;height: 6em; resize: none;" maxlength="240" placeholder="(Tidak ada kendala)">
</textarea>
<div>
Solusi:
</div>
<textarea disabled id="solusi" style="width: 100%;height: 6em; resize: none;" maxlength="240" placeholder="(Tidak ada solusi)">
</textarea>
<div>
Catatan Evaluasi:
</div>
<textarea disabled id="evalnotes" style="width: 100%;height: 6em; resize: none;" maxlength="240" placeholder="(Tidak ada solusi)">
</textarea>
<script type="module">
const thisDialog = moly.lastDialog();
const data = thisDialog.data;
const journal = data.journal.find(j=>j.status == 4);
const evalnotes = data.journal.find(j=>j.status == 8).notes;
const notes = JSON.parse(journal.notes);
function µ(selector)
{
if (selector) return $(thisDialog.box).find(selector);
return $(thisDialog.box);
}
µ('#sasaran').text(data.sasaran);
µ('#kendala').text(notes.kendala);
µ('#solusi').text(notes.solusi);
µ('#evalnotes').text(evalnotes);
µ('#ve').text(journal.document);
µ('#ve').click(async()=>{
const loadid = moly.loadScreen.show("Memroses berkas...","bar","#main");
await moly.dialog.show({title: "Preview Eviden", content:"/modules/pdf-previewer.html",fetching:true, data: {url: "/uploads/dokumen/" + journal.document}});
moly.loadScreen.close(loadid)
thisDialog.resolve(false);
});
</script>

3
modules/kegiatan-proker-finished.html
View File

@ -19,9 +19,8 @@
<script type="module">
const thisDialog = moly.lastDialog();
const data = thisDialog.data;
const journal = data.journal.at(-1);
const journal = data.journal.find(j=>j.status == 4) ;
const notes = JSON.parse(journal.notes);
console.log(data)
function µ(selector)
{
if (selector) return $(thisDialog.box).find(selector);

34
modules/kegiatan.html
View File

@ -17,11 +17,12 @@
<table id="proker" class="bordered selectable">
<colgroup>
<col style="width: 4ch;">
<col style="width: 19ch;">
<col style="width: 27ch;">
<col>
<col style="width: 8ch;">
<col style="width: 17ch;">
<col style="width: 16ch;">
<col style="width: 9ch;">
</colgroup>
<thead>
<tr>
@ -31,11 +32,12 @@
<th>Target Waktu</th>
<th>Waktu Mulai</th>
<th>Status</th>
<th>Evaluasi</th>
</tr>
</thead>
<tbody id="empty">
<tr>
<td colspan="6" style="text-align: center;">Data Kosong</td>
<td colspan="7" style="text-align: center;">Data Kosong</td>
</tr>
</tbody>
<tbody id="pkContent" hidden>
@ -146,10 +148,10 @@
"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; background-color: unset; color: var(--positive-accent)", // belum jadwalnya
"text-align: center; background-color: unset; color: unset", // berjalan
"text-align: center; background-color: unset; color: var(--neutral-n-accent)", // hampir deadline
"text-align: center; background-color: unset; color: var(--negative-accent)" // terlambat
"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)=>{
@ -160,12 +162,14 @@
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]);
@ -176,13 +180,17 @@
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);
const deadline = v.isInMonth ? new Date(v.year, v.startMonth + v.timeTarget, 0) : new Date(v.year, v.startMonth -1, v.startDay + v.timeTarget);
const neardeadline = (new Date(deadline)).setDate(deadline.getDate() - 15);
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;
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 : 3) : (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);
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 <= deadline ? "Hampir Deadline" : "Lewat Deadline");
$(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;
@ -191,6 +199,10 @@
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})

146
modules/monev-detil.html Normal file
View File

@ -0,0 +1,146 @@
<div style="display: grid; grid-template-columns: auto 1fr; column-gap: 1.5ch;">
<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="width: 54ch;">
<div style="display: grid; grid-template-columns: auto 1fr; column-gap: 1ch; grid-auto-rows: 1.8em; line-height: 1.8em;">
<span style="grid-column: span 2;">Ringkasan Jurnal:</span>
<span>Status Terakhir</span>
<div style="display: grid; grid-template-columns: 1fr auto auto; column-gap: 1ch; grid-auto-rows: 1.8em; line-height: 1.8em;"><div id="lastStatus"></div><div id="evalstat" style="padding: 0 .5ch;">---</div><a-button id="eval" style="padding: 0 .5ch;">Evaluasi</a-button></div>
<span>Tanggal/Waktu</span>
<div id="lastDate"></div>
<span style="grid-column: span 2;">Timeline Jurnal:</span>
<div style="grid-column: span 2; overflow: hidden auto; height: 24em;" id="detJournal">
</div>
</div>
</div>
</div>
<script type="module">
const thisDialog = moly.lastDialog();
const data = thisDialog.data;
function µ(selector)
{
if (selector) return $(thisDialog.box).find(selector);
return $(thisDialog.box);
}
function fillForms()
{
µ('#aksi').val(data.actions);
µ('#enttarget').val(data.entityTarget);
µ('#indikator').val(data.indicators);
µ('#targetUnit').val(data.isInMonth ? 1 : 0);
µ('#kegiatan').val(data.kegiatan);
µ('#sasaran').val(data.sasaran);
let DateTime = data.year + "-" + data.startMonth.toString().padStart(2,"0");
DateTime += data.isInMonth ? "" : "-" + data.startDay.toString().padStart(2,"0");
µ('#target').val(data.timeTarget);
if(data.isInMonth)
{
µ('#startMonth').val(DateTime);
}
else
{
µ('#startDate').val(DateTime);
}
µ('#lastStatus').text(data.statusText);
µ('#lastStatus')[0].style = data.statusStyle;
µ('#evalstat').text(data.journal.at(-1).status == 8 ? "(Sudah Evaluasi)" : data.journal.at(-1).status < 4 ? "(Belum Selesai)" : "(Belum Evaluasi)");
µ('#eval').prop("disabled",(data.journal.at(-1).status < 4 || data.journal.at(-1).status == 8));
µ('#lastDate').text(data.journal.at(-1).timeStamp);
µ('#detJournal').empty();
$.each(data.journal,(_,v)=>{
const group = moly.customElement("group-el");
const by = moly.newElement("div");
const st = moly.newElement("div");
const no = moly.newElement("div");
group.append(by);
// group.append(st);
group.append(no);
group.setAttribute("label",v.timeStamp);
group.setAttribute("collapsed","");
by.append((v.status >=4 && v.status <=6 ? "Selesai " : "") + (data.statusNames[v.status] == "Berjalan" ? "Disetujui" : (data.statusNames[v.status] ?? "")) + (v.status == 8 ? "Dievaluasi" : "") + " oleh "+ agents.find(e=>e.agentID == v.submitterID).name);
by.style = "font-style: italic;"
st.append("Status: " + (v.status >=4 && v.status <=6 ? "Selesai " : "") + data.statusNames[v.status]);
if(v.status ==4)
{
const ks = JSON.parse(v.notes);
no.append("Kendala:");
no.append(moly.newElement("br"));
no.append(ks.kendala.length > 1? ks.kendala : "-");
no.append(moly.newElement("br"));
no.append("Solusi:");
no.append(moly.newElement("br"));
no.append(ks.solusi.length > 1? ks.solusi : "-");
}
else
{
no.append("Catatan:");
no.append(moly.newElement("br"));
no.append(v.notes.length > 1? v.notes : "-");
}
// console.log(typeof v.document)
if(typeof v.document === "string")
{
// alert('s')
const doc = moly.newElement("div");
const doclink = moly.customElement("a-button");
doc.append("Lihat Dokumen: ");
doc.append(doclink);
doclink.append(v.document);
$(doclink).click(async()=>{
await moly.dialog.show({title: "Preview Eviden", content:"/modules/pdf-previewer.html",fetching:true, data: {url: "/uploads/dokumen/" + v.document}});
})
group.append(doc);
}
µ('#detJournal').append(group);
})
$('#detJournal').children().last().prop("collapsed", false);
}
fillForms();
µ('#eval').click(async()=>{
const evalr = await moly.dialog.show({title: "Evaluasi Aksi Perubahan", content: "/modules/monev-eval.html", fetching: true, data});
if(evalr) thisDialog.resolve(data.owner.agentID);
});
</script>

64
modules/monev-eval.html Normal file
View File

@ -0,0 +1,64 @@
<div style="display: grid; grid-template-columns: auto 1fr; column-gap: 1ch; height: 80vh;">
<div>
<div>Dokumen Eviden:</div>
<iframe style="width: 68vw; height: calc(83vh - 3.5em); width: calc(88vw - 38ch)">
</iframe>
</div>
<div style="display: grid; grid-template-columns: auto 1fr; column-gap: 1ch; width: 35ch; grid-auto-rows: min-content;">
<span style="grid-column: span 2;">Aksi Perubahan</span>
<textarea id="act" style="grid-column: span 2; width: 35ch; height: 5em; resize: none;" readonly></textarea>
Rencana&nbsp;Mulai <span id="planStart"></span>
Rencana&nbsp;Durasi <span id="planDur"></span>
Selesai&nbsp;Pada <span id="finishedAt"></span>
Status&nbsp;Selesai <span id="doneStat"></span>
<span style="grid-column: span 2;">
Kendala:
</span>
<textarea id="pro" style="grid-column: span 2; width: 35ch; height: 5em; resize: none;" placeholder="(Tidak ada kendala)" readonly></textarea>
<span style="grid-column: span 2;">
Solusi:
</span>
<textarea id="sol" style="grid-column: span 2; width: 35ch; height: 5em; resize: none;" placeholder="(Tidak ada solusi)" readonly></textarea>
<span style="grid-column: span 2;">
Catatan Evaluasi:
</span>
<textarea id="evalnotes" style="grid-column: span 2; width: 35ch; height: 5em; resize: none;" placeholder="Contoh: Bagus, harap pertahankan kinerja saudara."></textarea>
</div>
</div>
<div style="text-align: right;">
<a-button id="submit">Kirim Evaluasi</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);
}
const finJour = data.journal.find(e=>e.status == 4);
const prosol = JSON.parse(finJour.notes);
console.log(data)
µ('#act').val(data.actions);
µ('#pro').val(prosol.kendala);
µ('#sol').val(prosol.solusi);
µ('#planStart').text(data.year + "-" + data.startMonth.toString().padStart(2,"0")+ (data.isInMonth ? "" : "-" + data.startDay.toString().padStart(2,"0")));
µ('#planDur').text(data.timeTarget + " " + (data.isInMonth ? "Bulan" : "Hari"));
µ('#finishedAt').text(finJour.timeStamp.substring(0,16));
µ('#doneStat').text(data.statusText);
µ('iframe')[0].src="/uploads/dokumen/" + finJour.document;
µ('#submit').click(async()=>{
const loadid = moly.loadScreen.show("Mengirim Evaluasi...","sonar","#"+µ('div[id^="db"]')[0].id)
const evalres = await postJson('/api/eval', {prokerid: data.prokerID, notes: µ('#evalnotes').val().length > 0 ? µ('#evalnotes').val(): "-"});
if(evalres.status != 201)
{
moly.alert.show("Pengiriman Evaluaasi Gagal","Tidak dapat mengirim evaluasi. Silakan ulangi kembali beberapa saat lagi.");
moly.loadScreen.close(loadid);
return;
}
moly.loadScreen.close(loadid);
thisDialog.resolve(true);
});
</script>

274
modules/monev.html Normal file
View File

@ -0,0 +1,274 @@
<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: 27ch;">
<col>
<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>
</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)",
"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);
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 == 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 : 3) : (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);
st.append(statusName[v.status]);
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 <= deadline ? "Hampir Deadline" : "Lewat Deadline");
$(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");
v.statusText = $(st).text();
v.statusStyle = statusStyles[v.styleCode];
st.style = statusStyles[v.styleCode];
v.statusNames = statusName;
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)";
$(ro).click(async()=>{
const det = await moly.dialog.show({title: "Monitoring Aksi Perubahan",content:"/modules/monev-detil.html",fetching:true, data:v});
populateProker(det);
})
$('#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>

21
modules/submission.html
View File

@ -7,7 +7,7 @@
<table id="agents" class="bordered selectable">
<colgroup>
<col style="width: 4ch;">
<col style="width: 22ch;">
<col style="width: 27ch;">
<col>
</colgroup>
<thead>
@ -179,10 +179,10 @@
"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; background-color: unset; color: var(--positive-accent)", // belum jadwalnya
"text-align: center; background-color: unset; color: unset", // berjalan
"text-align: center; background-color: unset; color: var(--neutral-n-accent)", // hampir deadline
"text-align: center; background-color: unset; color: var(--negative-accent)" // terlambat
"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)=>{
@ -209,13 +209,14 @@
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);
const deadline = v.isInMonth ? new Date(v.year, v.startMonth + v.timeTarget, 0) : new Date(v.year, v.startMonth -1, v.startDay + v.timeTarget);
const neardeadline = (new Date(deadline)).setDate(deadline.getDate() - 15);
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;
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 : 3) : (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);
st.append(statusName[v.status]);
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 <= deadline ? "Hampir Deadline" : "Lewat Deadline");
$(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 vr = await moly.dialog.show({title: "Detil Program Kerja "+v.owner.name, content: "/modules/submission-view.html", fetching: true, data: {startIndex: i, prokers}});