273 lines
9.4 KiB
HTML
273 lines
9.4 KiB
HTML
<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" id="pacts">
|
|
0
|
|
</div>
|
|
<div class="texts">
|
|
Rencana<br>
|
|
Aksi
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="numbers" id="dacts">
|
|
0
|
|
</div>
|
|
<div class="texts">
|
|
Aksi<br>
|
|
dalam Draf
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="numbers warn" id="oacts">
|
|
0
|
|
</div>
|
|
<div class="texts">
|
|
Pengajuan<br>
|
|
Menunggu 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" id="racts">
|
|
0
|
|
</div>
|
|
<div class="texts">
|
|
Pengajuan<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">
|
|
const Now = new Date();
|
|
let prokers = [];
|
|
async function getProkers()
|
|
{
|
|
const loadid = moly.loadScreen.show("Menyusun dasbor...","dots","#content");
|
|
const years = [];
|
|
const pro = await getJson("/api/getprokers");
|
|
if(pro.status != 200)
|
|
{
|
|
moly.loadScreen.close(loadid);
|
|
return;
|
|
}
|
|
prokers = pro.data.reduce((a,v)=>{
|
|
const aindex = a.findIndex(e=>e.prokerID == v.prokerID);
|
|
if(!years.includes(v.year))
|
|
{
|
|
years.push(v.year);
|
|
const opt = moly.newElement("option");
|
|
opt.value = v.year;
|
|
opt.append(v.year);
|
|
$('#pkYear').append(opt);
|
|
}
|
|
if(aindex >=0)
|
|
{
|
|
a[aindex].journal.push({
|
|
journalID: v.journalID,
|
|
submitterID: v.submitterID,
|
|
notes: v.notes,
|
|
status: v.status,
|
|
document: v.document,
|
|
timeStamp: v.timeStamp.replace("T"," ")
|
|
})
|
|
a[aindex].journal.sort((ja,jb)=>ja.journalID.localeCompare(jb.journalID));
|
|
}
|
|
else
|
|
{
|
|
const nv = JSON.parse(JSON.stringify(v));
|
|
nv.journal= [{
|
|
journalID: v.journalID,
|
|
submitterID: v.submitterID,
|
|
notes: v.notes,
|
|
status: v.status,
|
|
document: v.document,
|
|
timeStamp: v.timeStamp.replace("T"," ")
|
|
}]
|
|
const owner = agents.find(e=> e.agentID == v.ownerID)
|
|
if (owner)
|
|
{
|
|
nv.owner = owner
|
|
delete nv.ownerID
|
|
}
|
|
delete nv.journalID;
|
|
delete nv.submitterID;
|
|
delete nv.notes;
|
|
delete nv.status;
|
|
delete nv.document;
|
|
delete nv.timeStamp;
|
|
a.push(nv);
|
|
}
|
|
return a;
|
|
},[]);
|
|
prokers = prokers.filter(p=>p.owner);
|
|
const currProkers = prokers.filter(p=>p.year == Now.getFullYear());
|
|
const draftProkers = currProkers.filter(p=>p.journal.at(-1).status == 0);
|
|
const propProkers = currProkers.filter(p=>p.journal.at(-1).status == 2);
|
|
const respProkers = currProkers.filter(p=>p.journal.at(-1).status == 1 || p.journal.at(-1).status >= 3);
|
|
µ('#pacts').text(currProkers.length);
|
|
µ('#dacts').text(draftProkers.length);
|
|
µ('#oacts').text(propProkers.length);
|
|
µ('#racts').text(respProkers.length);
|
|
$.each(currProkers,(_,v)=>{
|
|
const doneline = new Date(v.journal.at(-1).timeStamp);
|
|
const lifeline = (v.isInMonth ? new Date(v.year, v.startMonth -1, 1) : new Date(v.year, v.startMonth -1, v.startDay)).setHours(0,0,0,0);
|
|
const deadline = new Date((v.isInMonth ? new Date(v.year, v.startMonth + v.timeTarget, 0) : new Date(v.year, v.startMonth -1, v.startDay + v.timeTarget)).setHours(23,59,59));
|
|
v.deadline = deadline;
|
|
});
|
|
const sortedProkers = [...currProkers].filter(r=>r.journal.at(-1).status >= 1 && r.journal.at(-1).status <=3 ).sort((a,b)=>a.deadline - b.deadline);
|
|
const closest = sortedProkers.find(p=>p.journal.at(-1).status == 2);
|
|
µ('#udate').text(closest ? `${closest.deadline.getFullYear()}/${(closest.deadline.getMonth()+1).toString().padStart(2,"0")}/${closest.deadline.getDate().toString().padStart(2,"0")}` : "");
|
|
µ('#utext').text(closest ? closest.sasaran : "");
|
|
const todayActs = sortedProkers.filter(p=>
|
|
{
|
|
const today = new Date();
|
|
today.setHours(0,0,0,0);
|
|
const ts = new Date(p.journal.at(-1).timeStamp)
|
|
ts.setHours(0,0,0,0);
|
|
return ts.getTime() == today.getTime();
|
|
}
|
|
)
|
|
if(todayActs.length>0) µ('#htoday').empty();
|
|
$.each(todayActs,(_,v)=>{
|
|
const d = moly.newElement("div");
|
|
const s = moly.newElement("span");
|
|
const t = moly.newElement("span");
|
|
d.append(s);
|
|
d.append(t);
|
|
s.append(v.journal.at(-1).status == 1 ? `Ditolak: `: v.journal.at(-1).status == 2 ? `Diajukan: ` : `Disetujui: `);
|
|
s.style.fontWeight = "600"
|
|
s.style.color = v.journal.at(-1).status == 1 ? "var(--neutral-p-accent)": v.journal.at(-1).status == 2 ? "var(--neutral-n-accent)" : "var(--positive-accent)"
|
|
t.append(v.sasaran)
|
|
µ('#htoday').append(d);
|
|
});
|
|
moly.loadScreen.close(loadid);
|
|
}
|
|
function µ(selector)
|
|
{
|
|
if (selector) return $('body>#main>#content').find(selector);
|
|
return $('body>#main>#content');
|
|
}
|
|
µ('#uk').text(userDetails.info.unitKerja);
|
|
µ('#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();
|
|
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();
|
|
await getProkers()
|
|
</script> |