254 lines
8.5 KiB
HTML
254 lines
8.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en-gb" translate="no">
|
|
<head>
|
|
<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>
|
|
<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">
|
|
<link rel="stylesheet" href="/assets/css/fonts.css">
|
|
<link rel="stylesheet" href="/assets/css/molybdenum.css">
|
|
<script src="/assets/js/jquery.min.js" async></script>
|
|
<script src="/assets/js/molybdenum.js" type="module" async></script>
|
|
<script src="/assets/js/app.js" async></script>
|
|
<style>
|
|
*
|
|
{
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
}
|
|
*::-webkit-scrollbar, .main::-webkit-scrollbar {
|
|
width: .8ch;
|
|
}
|
|
|
|
/* Scrollbar thumb (the draggable part) */
|
|
*::-webkit-scrollbar-thumb, .main::-webkit-scrollbar-thumb {
|
|
background: var(--secondary-background); /* Dark semi-transparent */
|
|
border-radius: .2ch; /* Rounded edges */
|
|
}
|
|
/* body
|
|
{
|
|
height: 100%;
|
|
} */
|
|
h2, h3, h4
|
|
{
|
|
margin: .25em 0;
|
|
}
|
|
aside
|
|
{
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
min-height: 100%;
|
|
width: 30ch;
|
|
background-color: var(--primary-table);
|
|
color: var(--primary-foreground);
|
|
padding: .5ch;
|
|
padding-top: 3.5em;
|
|
box-shadow: var(--primary-foreground) .65ch 0, inset var(--primary-foreground) -13px 0 20px -25px;
|
|
}
|
|
.logobox
|
|
{
|
|
height: 3em;
|
|
position: fixed;
|
|
top: .5ch;
|
|
left: 0;
|
|
width: inherit;
|
|
padding: 0 .5ch .5ch .5ch;
|
|
border-bottom: 1px solid var(--secondary-background);
|
|
}
|
|
.sidebar
|
|
{
|
|
display: block;
|
|
position: absolute;
|
|
top: calc(3em + 1ch);
|
|
left: 0;
|
|
width: calc(100% - .25ch);
|
|
max-height: calc(100% - (3em + 1.5ch));
|
|
overflow-x: auto;
|
|
}
|
|
.sidebar::-webkit-scrollbar, .main::-webkit-scrollbar {
|
|
width: .8ch;
|
|
}
|
|
|
|
/* Scrollbar thumb (the draggable part) */
|
|
.sidebar::-webkit-scrollbar-thumb, .main::-webkit-scrollbar-thumb {
|
|
background: var(--secondary-background); /* Dark semi-transparent */
|
|
border-radius: .2ch; /* Rounded edges */
|
|
}
|
|
.item
|
|
{
|
|
height: 2em;
|
|
line-height: 2em;
|
|
margin-left: 1ch;
|
|
margin-right: 1ch;
|
|
background-color: var(--primary-table);
|
|
padding-left: 1ch;
|
|
padding-right: 1ch;
|
|
border-radius: .25ch;
|
|
cursor: default;
|
|
user-select: none;
|
|
}
|
|
.item:hover
|
|
{
|
|
filter: brightness(1.2);
|
|
}
|
|
.item[data-active]
|
|
{
|
|
filter: brightness(1.4);
|
|
}
|
|
.sub.item
|
|
{
|
|
padding-left: 3ch;
|
|
}
|
|
#main
|
|
{
|
|
display: block;
|
|
position: relative;
|
|
margin-left: 30ch;
|
|
padding: .5ch .5ch .5ch 0;
|
|
height: 100%;
|
|
overflow: auto;
|
|
backdrop-filter: blur(7px);
|
|
background-color: var(--semi-background);
|
|
}
|
|
nav
|
|
{
|
|
display: grid;
|
|
grid-template-columns: auto 1fr auto;
|
|
height: 3em;
|
|
padding-left: 2ch;
|
|
padding-right: 2ch;
|
|
line-height: 3em;
|
|
border-bottom: 1px solid var(--input-background);
|
|
}
|
|
#content
|
|
{
|
|
display: block;
|
|
width: 100%;
|
|
min-height: calc(100% - 6em);
|
|
padding: .5ch 1ch;
|
|
}
|
|
#footer
|
|
{
|
|
height: 3em;
|
|
padding: .5em;
|
|
line-height: 2em;
|
|
border-top: 1px solid var(--input-background);
|
|
display: grid;
|
|
grid-template-columns: auto 1fr auto;
|
|
color: var(--secondary-foreground);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body style="margin: 0; height: 100%; background-color: var(--primary-background);">
|
|
<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;">
|
|
</div>
|
|
<div class="sidebar">
|
|
<div class="item" data-path="dasbor">
|
|
<m-inline>dashboard</m-inline> Dasbor
|
|
</div>
|
|
<div class="item" data-path="kegiatan">
|
|
<m-inline>supervisor_account</m-inline> Kegiatan dan Dokumentasi
|
|
</div>
|
|
<div class="item" data-path="agen">
|
|
<m-inline>supervisor_account</m-inline> Manajemen Agen & User
|
|
</div>
|
|
<div class="item" data-path="laporan">
|
|
<m-inline>quick_references</m-inline> Laporan
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
<div id="main">
|
|
<nav>
|
|
<div>
|
|
<span>
|
|
Agen Perubahan ATR/BPN Kanwil Riau
|
|
</span>
|
|
</div>
|
|
|
|
<div>
|
|
<span id="username">User Name</span>
|
|
<sep-bar></sep-bar>
|
|
<a-button type="blend" id="lo"><m-inline>logout</m-inline> Keluar</a-button>
|
|
</div>
|
|
</nav>
|
|
<div id="content">
|
|
|
|
</div>
|
|
<div id="footer">
|
|
<span>Agen Perubahan Admin Panel <span id="vernum"></span></span>
|
|
|
|
<span>ATR/BPN Kantor Wilayah Provinsi Riau</span>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<script type="module">
|
|
let detail = await fetch("/auth/me").then(r=>r.json()).catch(e=>{
|
|
moly.alert.show("Koneksi Gagal","Gagal menyambung ke server. Harap periksa koneksi jaringan.");
|
|
return {status: 0};
|
|
});
|
|
if (detail.status == 401)
|
|
{
|
|
location = "/login.html";
|
|
}
|
|
window.agents = (await fetch("/api/getagents").then(r=>r.json()).catch(e=>{
|
|
moly.alert.show("Koneksi Gagal","Gagal menyambung ke server. Harap periksa koneksi jaringan.");
|
|
return {data: []};
|
|
})).data;
|
|
window.userDetails = detail.data;
|
|
const loggedInAgent = agents.find(a=>a.agentID == userDetails.agentID)
|
|
// if (!window.evtSource) window.evtSource = new EventSource("/events");
|
|
window.addEventListener("viewChange", async ()=>{
|
|
if (window.evtSource) evtSource.onmessage = null;
|
|
});
|
|
async function domReady()
|
|
{
|
|
$('#vernum').text(`v${vernum}`)
|
|
$('#lo').click(async()=>{
|
|
const res = await fetch('/auth/logout').catch(e=>{
|
|
moly.alert.show("Logout: Koneksi Gagal","Gagal menyambung ke server. Harap periksa koneksi jaringan.");
|
|
return {status: 0};
|
|
});
|
|
if(res.status == 200) location = "/login.html";
|
|
});
|
|
$('#username').text(loggedInAgent.name)
|
|
$('.item, .subitem').click(async (e)=>{
|
|
if (window.shellnavigating) return;
|
|
window.dispatchEvent(new Event("viewChange"));
|
|
window.shellnavigating = true;
|
|
let id = moly.loadScreen.show("Memuat...","sonar","#main");
|
|
$('.item[data-active]').removeAttr("data-active");
|
|
$(e.target.closest(".item")).attr("data-active","");
|
|
let content = e.target.closest(".item").getAttribute("data-path") ? fetch(`/modules/${e.target.closest(".item").getAttribute("data-path")}.html`).then(d => d.text()).catch(e=>{
|
|
return "Gagal menyambung ke server. Harap periksa koneksi jaringan.";
|
|
}) : "";
|
|
$('#content').html(await content);
|
|
moly.loadScreen.close(id);
|
|
window.shellnavigating = false;
|
|
});
|
|
$('#blocker').remove();
|
|
$($('.item')[0]).trigger("click");
|
|
}
|
|
(async ()=>{
|
|
let time = 0
|
|
while (typeof window.moly === "undefined" && time < 10000) {
|
|
await new Promise(resolve => setTimeout(resolve, 50));
|
|
time += 50;
|
|
}
|
|
if (window.moly)
|
|
{
|
|
while (typeof window.moly !== "undefined" && document.readyState !== "complete") {
|
|
await new Promise(resolve => setTimeout(resolve, 100));
|
|
}
|
|
domReady();
|
|
}
|
|
})()
|
|
</script>
|
|
</html> |