up to partial dashboard
This commit is contained in:
parent
6ad2260f3e
commit
3c0684928e
@ -6,7 +6,7 @@
|
|||||||
:root {
|
:root {
|
||||||
color-scheme: light only;
|
color-scheme: light only;
|
||||||
--secondary-table: #1e634a;
|
--secondary-table: #1e634a;
|
||||||
--primary-table: #1182a4;
|
--primary-table: #17253b;
|
||||||
--primary-foreground: #050607;
|
--primary-foreground: #050607;
|
||||||
--secondary-foreground: #aaaaac;
|
--secondary-foreground: #aaaaac;
|
||||||
--primary-background: #fefdfc;
|
--primary-background: #fefdfc;
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 16 KiB |
BIN
assets/images/logo-text.webp
Normal file
BIN
assets/images/logo-text.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
10
index.html
10
index.html
@ -4,7 +4,7 @@
|
|||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width initial-scale=1.0, maximum-scale=1.0"/>
|
<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">
|
<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/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/ss3l.woff2" as="font" type="font/woff2" crossorigin="anonymous">
|
||||||
<link rel="preload" href="/assets/fonts/ss3il.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%;
|
min-height: 100%;
|
||||||
width: 30ch;
|
width: 30ch;
|
||||||
background-color: var(--primary-table);
|
background-color: var(--primary-table);
|
||||||
color: var(--primary-foreground);
|
color: var(--primary-background);
|
||||||
padding: .5ch;
|
padding: .5ch;
|
||||||
padding-top: 3.5em;
|
padding-top: 3.5em;
|
||||||
box-shadow: var(--primary-foreground) .65ch 0, inset var(--primary-foreground) -13px 0 20px -25px;
|
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>
|
<load-screen id="blocker" style="background-color : #fefdfc ; z-index: 1;"><sonar-ping></sonar-ping><load-message>Memuat Aplikasi...</load-message></load-screen>
|
||||||
<aside>
|
<aside>
|
||||||
<div class="logobox">
|
<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>
|
||||||
<div class="sidebar">
|
<div class="sidebar">
|
||||||
<div class="item" data-path="dasbor">
|
<div class="item" data-path="dasbor">
|
||||||
@ -175,7 +175,7 @@ nav
|
|||||||
<nav>
|
<nav>
|
||||||
<div>
|
<div>
|
||||||
<span>
|
<span>
|
||||||
Agen Perubahan ATR/BPN Kanwil Riau
|
SIGAP ASN ATR/BPN Kanwil Riau
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -189,7 +189,7 @@ nav
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div id="footer">
|
<div id="footer">
|
||||||
<span>Agen Perubahan Admin Panel <span id="vernum"></span></span>
|
<span>SIGAP ASN Panel <span id="vernum"></span></span>
|
||||||
|
|
||||||
<span>ATR/BPN Kantor Wilayah Provinsi Riau</span>
|
<span>ATR/BPN Kantor Wilayah Provinsi Riau</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -4,7 +4,7 @@
|
|||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width initial-scale=1.0, maximum-scale=1.0"/>
|
<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">
|
<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/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/ss3l.woff2" as="font" type="font/woff2" crossorigin="anonymous">
|
||||||
<link rel="preload" href="/assets/fonts/ss3il.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>
|
</head>
|
||||||
<body style="margin: 0; height: 100%;">
|
<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>
|
<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">
|
<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;">
|
<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="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>
|
<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>
|
</div>
|
||||||
<div style="height: 3em; background-color: var(--secondary-background); text-align: center; font-size: .8em;">
|
<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
|
Kementerian ATR/BPN Kantor Wilayah Provinsi Riau
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
172
modules/dasbor-level1.html
Normal file
172
modules/dasbor-level1.html
Normal 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
172
modules/dasbor-level2.html
Normal 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
172
modules/dasbor-level3.html
Normal 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>
|
||||||
@ -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
42
modules/kegiatan-proker-evaled.html
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
<div>
|
||||||
|
Sasaran Aksi:
|
||||||
|
</div>
|
||||||
|
<div id="sasaran" style="margin-bottom: .5em;"> </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>
|
||||||
@ -19,9 +19,8 @@
|
|||||||
<script type="module">
|
<script type="module">
|
||||||
const thisDialog = moly.lastDialog();
|
const thisDialog = moly.lastDialog();
|
||||||
const data = thisDialog.data;
|
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);
|
const notes = JSON.parse(journal.notes);
|
||||||
console.log(data)
|
|
||||||
function µ(selector)
|
function µ(selector)
|
||||||
{
|
{
|
||||||
if (selector) return $(thisDialog.box).find(selector);
|
if (selector) return $(thisDialog.box).find(selector);
|
||||||
|
|||||||
@ -17,11 +17,12 @@
|
|||||||
<table id="proker" class="bordered selectable">
|
<table id="proker" class="bordered selectable">
|
||||||
<colgroup>
|
<colgroup>
|
||||||
<col style="width: 4ch;">
|
<col style="width: 4ch;">
|
||||||
<col style="width: 19ch;">
|
<col style="width: 27ch;">
|
||||||
<col>
|
<col>
|
||||||
<col style="width: 8ch;">
|
<col style="width: 8ch;">
|
||||||
<col style="width: 17ch;">
|
<col style="width: 17ch;">
|
||||||
<col style="width: 16ch;">
|
<col style="width: 16ch;">
|
||||||
|
<col style="width: 9ch;">
|
||||||
</colgroup>
|
</colgroup>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@ -31,11 +32,12 @@
|
|||||||
<th>Target Waktu</th>
|
<th>Target Waktu</th>
|
||||||
<th>Waktu Mulai</th>
|
<th>Waktu Mulai</th>
|
||||||
<th>Status</th>
|
<th>Status</th>
|
||||||
|
<th>Evaluasi</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody id="empty">
|
<tbody id="empty">
|
||||||
<tr>
|
<tr>
|
||||||
<td colspan="6" style="text-align: center;">Data Kosong</td>
|
<td colspan="7" style="text-align: center;">Data Kosong</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
<tbody id="pkContent" hidden>
|
<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-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(--neutral-n-accent); color: var(--primary-foreground)",
|
||||||
"text-align: center; background-color: var(--negative-accent); color: var(--primary-background)",
|
"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; box-shadow: inset 0 0 1.5ch 0.25ch var(--positive-accent)", // belum jadwalnya
|
||||||
"text-align: center; background-color: unset; color: unset", // berjalan
|
"text-align: center; box-shadow: inset 0 0 1.5ch 0.25ch var(--neutral-p-accent)", // berjalan
|
||||||
"text-align: center; background-color: unset; color: var(--neutral-n-accent)", // hampir deadline
|
"text-align: center; box-shadow: inset 0 0 1.5ch 0.25ch 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(--negative-accent)" // terlambat
|
||||||
];
|
];
|
||||||
$.each(listedProkers,(i,v)=>{
|
$.each(listedProkers,(i,v)=>{
|
||||||
|
|
||||||
@ -160,12 +162,14 @@
|
|||||||
const tw = moly.newElement("td");
|
const tw = moly.newElement("td");
|
||||||
const wm = moly.newElement("td");
|
const wm = moly.newElement("td");
|
||||||
const st = moly.newElement("td");
|
const st = moly.newElement("td");
|
||||||
|
const ev = moly.newElement("td");
|
||||||
ro.append(no);
|
ro.append(no);
|
||||||
ro.append(kg);
|
ro.append(kg);
|
||||||
ro.append(ss);
|
ro.append(ss);
|
||||||
ro.append(tw);
|
ro.append(tw);
|
||||||
ro.append(wm);
|
ro.append(wm);
|
||||||
ro.append(st);
|
ro.append(st);
|
||||||
|
ro.append(ev);
|
||||||
no.append((i+1)+".");
|
no.append((i+1)+".");
|
||||||
no.style.textAlign = "right";
|
no.style.textAlign = "right";
|
||||||
kg.append(kegiatanName[v.kegiatan]);
|
kg.append(kegiatanName[v.kegiatan]);
|
||||||
@ -176,13 +180,17 @@
|
|||||||
wm.style.textAlign = "right";
|
wm.style.textAlign = "right";
|
||||||
const Now = new Date();
|
const Now = new Date();
|
||||||
const doneline = new Date(v.journal.at(-1).timeStamp);
|
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 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 = v.isInMonth ? new Date(v.year, v.startMonth + v.timeTarget, 0) : new Date(v.year, v.startMonth -1, v.startDay + v.timeTarget);
|
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(deadline)).setDate(deadline.getDate() - 15);
|
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 == 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]);
|
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;
|
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];
|
st.style = statusStyles[v.styleCode];
|
||||||
$(ro).click(async()=>{
|
$(ro).click(async()=>{
|
||||||
const data = v;
|
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});
|
const vw = await moly.dialog.show({title: "Detil Program Kerja", content: "/modules/kegiatan-proker-edit.html", fetching: true, data});
|
||||||
if(vw) populateProker();
|
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)
|
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})
|
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
146
modules/monev-detil.html
Normal 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>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<input type="number" id="target" min="1" style="width: 7ch;" value="1" disabled>
|
||||||
|
|
||||||
|
<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
64
modules/monev-eval.html
Normal 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 Mulai <span id="planStart"></span>
|
||||||
|
Rencana Durasi <span id="planDur"></span>
|
||||||
|
Selesai Pada <span id="finishedAt"></span>
|
||||||
|
Status 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
274
modules/monev.html
Normal 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:
|
||||||
|
<select id="pkYear" style="width: max-content;">
|
||||||
|
|
||||||
|
</select>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
</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>
|
||||||
@ -7,7 +7,7 @@
|
|||||||
<table id="agents" class="bordered selectable">
|
<table id="agents" class="bordered selectable">
|
||||||
<colgroup>
|
<colgroup>
|
||||||
<col style="width: 4ch;">
|
<col style="width: 4ch;">
|
||||||
<col style="width: 22ch;">
|
<col style="width: 27ch;">
|
||||||
<col>
|
<col>
|
||||||
</colgroup>
|
</colgroup>
|
||||||
<thead>
|
<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-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(--neutral-n-accent); color: var(--primary-foreground)",
|
||||||
"text-align: center; background-color: var(--negative-accent); color: var(--primary-background)",
|
"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; box-shadow: inset 0 0 1.5ch 0.25ch var(--positive-accent)", // belum jadwalnya
|
||||||
"text-align: center; background-color: unset; color: unset", // berjalan
|
"text-align: center; box-shadow: inset 0 0 1.5ch 0.25ch var(--neutral-p-accent)", // berjalan
|
||||||
"text-align: center; background-color: unset; color: var(--neutral-n-accent)", // hampir deadline
|
"text-align: center; box-shadow: inset 0 0 1.5ch 0.25ch 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(--negative-accent)" // terlambat
|
||||||
];
|
];
|
||||||
$.each(listedProkers,(i,v)=>{
|
$.each(listedProkers,(i,v)=>{
|
||||||
|
|
||||||
@ -209,13 +209,14 @@
|
|||||||
wm.style.textAlign = "right";
|
wm.style.textAlign = "right";
|
||||||
const Now = new Date();
|
const Now = new Date();
|
||||||
const doneline = new Date(v.journal.at(-1).timeStamp);
|
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 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 = v.isInMonth ? new Date(v.year, v.startMonth + v.timeTarget, 0) : new Date(v.year, v.startMonth -1, v.startDay + v.timeTarget);
|
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(deadline)).setDate(deadline.getDate() - 15);
|
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 == 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]);
|
st.append(statusName[v.status]);
|
||||||
v.styleCode = v.status != 3 ? v.status : Now < lifeline ? 8 : Now < neardeadline ? 9 : Now >= neardeadline && Now < deadline ? 10 : 11;
|
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];
|
st.style = statusStyles[v.styleCode];
|
||||||
$(ro).click(async()=>{
|
$(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}});
|
const vr = await moly.dialog.show({title: "Detil Program Kerja "+v.owner.name, content: "/modules/submission-view.html", fetching: true, data: {startIndex: i, prokers}});
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user