agent-user read-write

.gitignore

@@ -1 +1,2 @@
 .DS_Store
+/assets/images/uploads/*

modules/agen-edit.html

@@ -1,46 +1,46 @@
 <div style="font-weight: 600; text-align: center;">Data Diri</div>
 <div style="display: grid; grid-template-columns: auto 1fr; column-gap: 1.5ch; padding: 1ch;">
-    <div style="height: 12em; width: 8em; text-align: center;">
+    <div style="height: 15em; width: 10em; text-align: center;">
-        <img id="UagentPhoto" style="max-height: 12em; max-width: 8em;"/>
+        <img id="UagentPhoto" style="max-height: 99%; max-width: 99%;"/>
     </div>
     <div style="display: grid; grid-template-columns: auto auto 1fr; column-gap:.5ch;">
         <span>NIP</span>
         <span>:</span>
-        <span id="UagentID"></span>
+        <input id="UagentID" type="text" disabled>
-        <span>Nama Agen</span>
+        <span>Nama Agen*</span>
         <span>:</span>
-        <span id="Uname"></span>
+        <input type="text" id="Uname">
-        <span>Jabatan</span>
+        <span>Jabatan*</span>
         <span>:</span>
-        <span id="Ujabatan"></span>
+        <input type="text" id="Ujabatan">
-        <span>Unit Kerja</span>
+        <span>Unit Kerja*</span>
         <span>:</span>
-        <span id="Uunit"></span>
+        <select id="Uunit">
-        <span>No SK Pengangkatan</span>
+
+        </select>
+        <span>No SK Pengangkatan*</span>
         <span>:</span>
-        <span id="Uska"></span>
+        <input type="text" id="Uska">
-        <span>TMT</span>
+        <span>TMT*</span>
         <span>:</span>
-        <span id="Utmta"></span>
+        <input type="date" id="Utmta">
         <span>No SK Perubahan</span>
         <span>:</span>
-        <span id="Uskp"></span>
+        <input type="text" id="Uskp">
         <span>TMT</span>
         <span>:</span>
-        <span id="Utmtp"></span>
+        <input type="date" id="Utmtp">
     </div>
-    <button id="chPicture">Ganti Foto</button>
+    <file-input id="photoInput" accept="image/jpeg, image/png, image/webp" style="width: 20.1ch"></file-input>
 </div>
 <div style="text-align: center; padding: 1ch; text-align: center; font-weight: 600;">
     Visi dan Misi Agen Perubahan
 </div>
-<div style="display: grid; grid-template-columns: auto auto 1fr; column-gap:.5ch;">
+<div style="display: flex; flex-direction: column; align-items: center;">
     <span>Visi</span>
-    <span>:</span>
+    <textarea type="text" id="Uvisi" maxlength="128" style="width: 95%; text-align: center; height: 3.2em; resize: none;"></textarea>
-    <span id="Uvisi"></span>
     <span>Misi</span>
-    <span>:</span>
+    <textarea id="Umisi" maxlength="1024" style="width: 95%; height: 7em; resize: none;"></textarea>
-    <span id="Umisi"></span>
 </div>
 <div style="text-align: center; padding: 1ch; text-align: center; font-weight: 600;">
     Pembentukan Agen Perubahan
@@ -48,43 +48,122 @@
 <div style="display: grid; grid-template-columns: auto auto 1fr; column-gap:.5ch;">
     <span>Seleksi Internal</span>
     <span>:</span>
-    <span id="Uselect"></span>
+    <input type="text" id="Uselect">
     <span>Penilaian dan Pemilihan</span>
     <span>:</span>
-    <span id="Ugrading"></span>
+    <input type="date" id="Ugrading">
     <span>Dokumen Eviden Penetapan SK</span>
     <span>:</span>
-    <span id="Uevidence"></span>
+    <input type="text" id="Uevidence">
-    <span>Dokumentasi Penepatan SK</span>
+    <span>Dokumentasi Penetapan SK</span>
     <span>:</span>
-    <span id="Udocuments"></span>
+    <input type="text" id="Udocuments">
 </div>
-<div style="margin-top: 1em; border-top: 1px solid var(--secondary-foreground);">
+<div style="margin-top: 1em; border-top: 1px solid var(--secondary-foreground); display: grid; grid-template-columns: 1fr auto;">
-    <a-button id="Uupdate">
-        Perbarui
-    </a-button>
     <a-button id="UCancel" type="negative">
         Batal
     </a-button>
+    <a-button id="Uupdate">
+        Perbarui
+    </a-button>
 </div>
+<load-screen id="blocker"><sonar-ping></sonar-ping><load-message>Memuat...</load-message></load-screen>
 <script type="module">
-    const thisDialog = moly._dialogs.at(-1);
+    const thisDialog = moly.lastDialog();
     const data = thisDialog.data;
+    let photo = "";
+    $('#Uunit').empty();
+    $.each(data.allUnits,(_,v)=>{
+        const opt = moly.newElement("option");
+        opt.value = v.deplID;
+        opt.append(v.unitKerja);
+        $('#Uunit').append(opt);
+    });
     $('#UagentPhoto')[0].src = data.photoURL;
-    $('#UagentID').text(data.agentID);
+    $('#UagentID').val(data.agentID);
-    $('#Uname').text(data.name);
+    $('#Uname').val(data.name);
-    $('#Ujabatan').text(data.jabatan);
+    $('#Ujabatan').val(data.jabatan);
-    $('#Uunit').text(data.unitKerja);
+    $('#Uunit').val(data.deplID);
-    $('#Uska').text(data.skAngkat);
+    $('#Uska').val(data.skAngkat);
-    $('#Utmta').text(data.tmt);
+    $('#Utmta').val(data.tmt);
-    $('#Uskp').text(data.skPerb == null ? "-" : data.skPerb);
+    $('#Uskp').val(data.skPerb == null ? "" : data.skPerb);
-    $('#Utmtp').text(data.tmUbah == null ? "-" : data.tmUbah);
+    $('#Utmtp').val(data.tmUbah == null ? null : data.tmUbah);
-    $('#Uvisi').text(data.vision);
+    $('#Uvisi').val(data.vision);
-    $('#Umisi').text(data.mission);
+    $('#Umisi').val(data.mission);
+    $('#Uselect').val(data.seleksi);
+    $('#Ugrading').val(data.nilaiPilih);
+    $('#Uevidence').val(data.eviden);
+    $('#Udocuments').val(data.dokumentasi);
     $('#Uupdate').click(async()=>{
-        thisDialog.resolve({edit: true, data: thisDialog.data});
+        const loadid = moly.loadScreen.show("Memperbarui Data Agen...","sonar","#"+thisDialog.content.id);
+        let updates = {};
+        if(
+            $('#Uname').val().length < 1 ||
+            $('#Ujabatan').val().length < 1 ||
+            $('#Uska').val().length < 1 ||
+            $('#Utmta').val().length < 1
+        )
+        {
+            moly.alert.show("Data Belum Lengkap","Harap pastikan semua kolom sudah terisi dengan benar. Kolom bertanda * wajib diisi.");
+            moly.loadScreen.close(loadid);
+            return;
+        }
+        updates.name = $('#Uname').val() == data.name ? undefined : $('#Uname').val();
+        updates.jabatan = $('#Ujabatan').val() == data.jabatan ? undefined : $('#Ujabatan').val();
+        updates.deplid = Number($('#Uunit').val()) == data.deplID ? undefined : Number($('#Uunit').val());
+        updates.skangkat = $('#Uska').val() == data.skAngkat ? undefined : $('#Uska').val();
+        updates.tmt = $('#Utmta').val() == data.tmt ? undefined : $('#Utmta').val();
+        updates.skperubahan = $('#Uskp').val() == "" ? null : $('#Uskp').val();
+        updates.skperubahan = updates.skperubahan == data.skPerb ? undefined : updates.skperubahan;
+        updates.tgperubahan = $('#Utmtp').val() == "" ? null : $('#Utmtp').val();
+        updates.tgperubahan = updates.tgperubahan == data.tmUbah ? undefined : updates.tgperubahan;
+        updates.vision = $('#Uvisi').val() == data.vision ? undefined : $('#Uvisi').val();
+        updates.mission = $('#Umisi').val() == data.mission ? undefined : $('#Umisi').val();
+        updates.seleksi = $('#Uselect').val() == "" ? null : $('#Uselect').val();
+        updates.seleksi = updates.seleksi == data.seleksi ? undefined : updates.seleksi;
+        updates.nilaipilih = $('#Uggrading').val() == "" ? null : $('#Uggrading').val();
+        updates.nilaipilih = updates.nilaipilih == data.nilaiPilih ? undefined : updates.nilaipilih;
+        updates.eviden = $('#Uevidence').val() == "" ? null : $('#Uevidence').val();
+        updates.eviden = updates.eviden == data.eviden ? undefined : updates.eviden;
+        updates.dokumentasi = $('#Udocuments').val() == "" ? undefined : $('#Udocuments').val();
+        updates.dokumentasi = updates.dokumentasi == data.dokumentasi ? undefined : updates.dokumentasi;
+        updates = JSON.parse(JSON.stringify(updates));
+        if (Object.keys(updates).length <1 && photo.length < 16)
+        {
+            moly.alert.show("Data Tidak Berubah","Tidak ada data yang diubah. Operasi tidak dilanjutkan.");
+            moly.loadScreen.close(loadid);
+            return;
+        }
+        const update = await postJson('/api/chagent',{agentid: data.agentID, photo, updates});
+        if(update.status != 202)
+        {
+            moly.alert.show("Pembaruan Gagal","Data tidak berhasil diperbarui. Silakan ulangi kembali beberapa saat lagi.");
+            moly.loadScreen.close(loadid);
+            return;
+        }
+        moly.loadScreen.close(loadid);
+        thisDialog.resolve(true);
     });
     $('#UCancel').click(async()=>{
         thisDialog.resolve(false);
     });
+    $($('#photoInput')[0]._input).change(async()=>{
+        const me = $('#photoInput')[0]._input;
+        if(me.files.length > 0)
+        {
+            const file = await moly.file.serialise(me.files[0]);
+            photo = "data:";
+            photo += file.type;
+            photo += ";base64,";
+            photo += file.data;
+            $('#UagentPhoto')[0].src = photo;
+        }
+        else
+        {
+            $('#UagentPhoto')[0].src = data.photoURL;
+        }
+    });
+    setTimeout(() => {
+        $('#blocker').remove();
+    }, 500);
 </script>

modules/agen-new.html

@@ -0,0 +1,207 @@
+<div style="font-weight: 600; text-align: center;">Data Diri</div>
+<div style="display: grid; grid-template-columns: auto 1fr; column-gap: 1.5ch; padding: 1ch;">
+    <div style="height: 15em; width: 10em; text-align: center;">
+        <img id="agentPhoto" style="max-height: 99%; max-width: 99%;"/>
+    </div>
+    <div style="display: grid; grid-template-columns: auto auto 1fr; column-gap:.5ch;">
+        <span>NIP*</span>
+        <span>:</span>
+        <input id="agentID" type="text">
+        <span>Nama Agen*</span>
+        <span>:</span>
+        <input type="text" id="name">
+        <span>Jabatan*</span>
+        <span>:</span>
+        <input type="text" id="jabatan">
+        <span>Unit Kerja*</span>
+        <span>:</span>
+        <select id="unit">
+
+        </select>
+        <span>No SK Pengangkatan*</span>
+        <span>:</span>
+        <input type="text" id="ska">
+        <span>TMT*</span>
+        <span>:</span>
+        <input type="date" id="tmta">
+        <span>No SK Perubahan</span>
+        <span>:</span>
+        <input type="text" id="skp">
+        <span>TMT</span>
+        <span>:</span>
+        <input type="date" id="tmtp">
+    </div>
+    <file-input id="photoInput" accept="image/jpeg, image/png, image/webp" style="width: 20.1ch"></file-input>
+</div>
+<div style="text-align: center; padding: 1ch; text-align: center; font-weight: 600;">
+    Visi dan Misi Agen Perubahan
+</div>
+<div style="display: flex; flex-direction: column; align-items: center;">
+    <span>Visi</span>
+    <textarea type="text" id="visi"  maxlength="128" style="width: 95%; text-align: center; height: 3.2em; resize: none;"></textarea>
+    <span>Misi</span>
+    <textarea id="misi" maxlength="1024" style="width: 95%; height: 7em; resize: none;"></textarea>
+</div>
+<div style="text-align: center; padding: 1ch; text-align: center; font-weight: 600;">
+    Pembentukan Agen Perubahan
+</div>
+<div style="display: grid; grid-template-columns: auto auto 1fr; column-gap:.5ch;">
+    <span>Seleksi Internal</span>
+    <span>:</span>
+    <input type="text" id="select">
+    <span>Penilaian dan Pemilihan</span>
+    <span>:</span>
+    <input type="date" id="grading">
+    <span>Dokumen Eviden Penetapan SK</span>
+    <span>:</span>
+    <input type="text" id="evidence">
+    <span>Dokumentasi Penetapan SK</span>
+    <span>:</span>
+    <input type="text" id="documents">
+</div>
+<div style="text-align: center; padding: 1ch; text-align: center; font-weight: 600;">
+    Akun Agen Perubahan
+</div>
+<div>
+    <input type="checkbox" id="createAccount">
+    <label for="createAccount">Buat Akun</label>
+    <group-el id="cA" label="Detil Akun Agen Perubahan" disabled>
+        <div style="display: grid; grid-template-columns: auto auto 1fr; column-gap:.5ch;">
+            <span>Username*</span>
+            <span>:</span>
+            <input type="text" id="unm">
+            <span>Password*</span>
+            <span>:</span>
+            <input type="password" id="pwd">
+            <span>Password Konfirmasi*</span>
+            <span>:</span>
+            <input type="password" id="cPwd">
+            <span>Level*</span>
+            <span>:</span>
+            <select id="lvl">
+                <option value="2">Agen Perubahan</option>
+                <option value="1">Evaluator</option>
+            </select>
+        </div>
+    </group-el>
+</div>
+<div style="margin-top: 1em; border-top: 1px solid var(--secondary-foreground); display: grid; grid-template-columns: 1fr auto;">
+    <a-button id="cancel" type="negative">
+        Batal
+    </a-button>
+    <a-button id="add">
+        Tambah Agen
+    </a-button>
+</div>
+<load-screen id="blocker"><sonar-ping></sonar-ping><load-message>Memuat...</load-message></load-screen>
+<script type="module">
+    const thisDialog = moly.lastDialog();
+    const data = thisDialog.data;
+    let photo = "";
+    $('#agentPhoto')[0].src = "/assets/images/generic-user.webp";
+    $('#unit').empty();
+    $.each(data.units,(_,v)=>{
+        const opt = moly.newElement("option");
+        opt.value = v.deplID;
+        opt.append(v.unitKerja);
+        $('#unit').append(opt);
+    });
+    $('#cancel').click(async()=>{
+        thisDialog.resolve(false);
+    });
+    $('#add').click(async()=>{
+        const loadid = moly.loadScreen.show("Menambahkan Data Agen...", "sonar","#"+thisDialog.content.id);
+        if(
+            $('#agentID').val().length < 1 ||
+            $('#name').val().length < 1 ||
+            $('#jabatan').val().length < 1 ||
+            $('#ska').val().length < 1 ||
+            $('#tmta').val().length < 1 ||
+            $('#createAccount').prop("checked") && (
+            $('#unm').val().length < 1 ||
+            $('#pwd').val().length < 1 ||
+            $('#cPwd').val().length < 1)
+        )
+        {
+            moly.alert.show("Data Belum Lengkap","Harap pastikan semua kolom sudah terisi dengan benar. Kolom bertanda * wajib diisi.");
+            moly.loadScreen.close(loadid);
+            return;
+        }
+        if(data.agents.find(e=>e.agentID == $('#agentID').val()))
+        {
+            moly.alert.show("NIP Agen Telah Terdaftar","Agen dengan NIP " +$('#agentID').val()+" telah ada. Harap periksa kembali atau lakukan pembaruan data jika ingin memperbarui data Agen yang bersangkutan.");
+            moly.loadScreen.close(loadid);
+            return;
+        }
+        if($('#createAccount').prop("checked") && data.users.find(e=>e.username == $('#unm').val()))
+        {
+            moly.alert.show("Username Telah Digunakan","Username " +$('#unm').val()+" telah digunakan. Harap gunakan username lain.");
+            moly.loadScreen.close(loadid);
+            return;
+        }
+        if($('#createAccount').prop("checked") && $('#pwd').val() != $('#cPwd').val())
+        {
+            moly.alert.show("Password Tidak Sama","Password dan Password Konfirmasi yang anda inputkan tidak sama. Harap pastikan Password dan Password Konfirmasi sama.");
+            moly.loadScreen.close(loadid);
+            return;
+        }
+        //["agentid", "name", "jabatan", "deplid", "skangkat", "tmt", 
+        //"skper", "tgper", "vision", "mission", "photo", "seleksi", 
+        // "nilaipilih", "eviden", "dokumentasi", 
+        // "createuser", "uname", "pass", "level"]
+        const agent = 
+        {
+            agentid: $('#agentID').val(),
+            name: $('#name').val(),
+            jabatan: $('#jabatan').val(),
+            deplid: Number($('#unit').val()),
+            skangkat: $('#ska').val(),
+            tmt: $('#tmta').val(),
+            skper: $('#skp').val().length < 1 ? null : $('#skp').val(),
+            tgper: $('#tmtp').val().length < 1 ? null : $('#tmtp').val(),
+            vision: $('#visi').val(),
+            mission: $('#misi').val(),
+            photo,
+            seleksi: $('#select').val().length < 1 ? null : $('#select').val(),
+            nilaipilih: $('#grading').val().length < 1 ? null : $('#grading').val(),
+            eviden: $('#evidence').val().length < 1 ? null : $('#evidence').val(),
+            dokumentasi: $('#documents').val().length < 1 ? null : $('#documents').val(),
+            createuser: $('#createAccount').prop("checked"),
+            uname: $('#unm').val(),
+            pass: $('#pwd').val(),
+            level: Number($('#lvl').val())
+        }
+        const submit = await postJson('/api/addagent',agent);
+        if(submit.status != 201)
+        {
+            moly.alert.show("Gagal Mendaftarkan Agen Perubahan","Data Agen Perubahan tidak berhasil dibuat. Silakan ulangi kembali beberapa saat lagi.");
+            moly.loadScreen.close(loadid);
+            return;
+        }
+        thisDialog.resolve({ca: $('#createAccount').prop("checked")});
+        moly.loadScreen.close(loadid);
+
+    });
+    $('#createAccount').click(()=>{
+        $('#cA').prop("disabled",!$('#createAccount').prop("checked"));
+    });
+    $($('#photoInput')[0]._input).change(async()=>{
+        const me = $('#photoInput')[0]._input;
+        if(me.files.length > 0)
+        {
+            const file = await moly.file.serialise(me.files[0]);
+            photo = "data:";
+            photo += file.type;
+            photo += ";base64,";
+            photo += file.data;
+            $('#agentPhoto')[0].src = photo;
+        }
+        else
+        {
+            $('#agentPhoto')[0].src = "/assets/images/generic-user.webp";
+        }
+    });
+    setTimeout(() => {
+        $('#blocker').remove();
+    }, 500);
+</script>

modules/agen-newaccount.html

@@ -0,0 +1,59 @@
+<div style="display: grid; grid-template-columns: auto auto 1fr; column-gap:.5ch;">
+    <span>Username*</span>
+    <span>:</span>
+    <input type="text" id="unme">
+    <span>Password*</span>
+    <span>:</span>
+    <input type="password" id="pwd">
+    <span>Password Konfirmasi*</span>
+    <span>:</span>
+    <input type="password" id="cPwd">
+    <span>Level*</span>
+    <span>:</span>
+    <select id="lvel">
+        <option value="2">Agen Perubahan</option>
+        <option value="1">Evaluator</option>
+    </select>
+    &nbsp;
+    <span></span>
+    <div style="text-align: right;">
+        <a-button id="create">
+            Buat Akun
+        </a-button>
+    </div>
+</div>
+<script type="module">
+    const thisDialog = moly.lastDialog();
+    const data = thisDialog.data;
+    $('#create').click(async()=>{
+        const loadid = moly.loadScreen.show("Membuat Akun...","sonar","#" + thisDialog.content.id);
+        if ($('#unme').val().length <1 || $('#pwd').val().length <1 || $('#pwd').val() != $('#cPwd').val())
+        {
+            moly.alert.show("Data Belum Lengkap","Harap lengkapi data pembuatan akun. Kolom bertanda * wajib diisi. Pastikan Password dan Password Konfirmasi sama.");
+            moly.loadScreen.close(loadid);
+            return;
+        }
+        if(data.allUsers.find(e=>e.username == $('#unm').val()))
+        {
+            moly.alert.show("Username Telah Digunakan","Username " +$('#unm').val()+" telah digunakan. Harap gunakan username lain.");
+            moly.loadScreen.close(loadid);
+            return;
+        }
+        const newAccount = 
+        {
+            username: $('#unme').val(),
+            password: $('#pwd').val(),
+            agentid: data.agentID,
+            level: Number($('#lvel').val())
+        }
+        const create = await postJson('/api/adduser', newAccount);
+        if (create.status != 201)
+        {
+            moly.alert.show("Pembuatan Akun Gagal","Akun tidak berhasil dibuat. Silakan coba beberapa saat lagi.");
+            moly.loadScreen.close(loadid);
+            return;
+        }
+        moly.loadScreen.close(loadid);
+        thisDialog.resolve(true);
+    });
+</script>

modules/agen-profil.html

@@ -34,12 +34,10 @@
 <div style="text-align: center; padding: 1ch; text-align: center; font-weight: 600;">
     Visi dan Misi Agen Perubahan
 </div>
-<div style="display: grid; grid-template-columns: auto auto 1fr; column-gap:.5ch;">
+<div style="display: flex; flex-direction: column; align-items: center;">
     <span>Visi</span>
-    <span>:</span>
     <span id="visi"></span>
     <span>Misi</span>
-    <span>:</span>
     <span id="misi"></span>
 </div>
 <div style="text-align: center; padding: 1ch; text-align: center; font-weight: 600;">
@@ -55,17 +53,35 @@
     <span>Dokumen Eviden Penetapan SK</span>
     <span>:</span>
     <span id="evidence"></span>
-    <span>Dokumentasi Penepatan SK</span>
+    <span>Dokumentasi Penetapan SK</span>
     <span>:</span>
     <span id="documents"></span>
 </div>
-<div style="margin-top: 1em; border-top: 1px solid var(--secondary-foreground);">
+<div style="text-align: center; padding: 1ch; text-align: center; font-weight: 600;">
+    Akun Agen Perubahan
+</div>
+<div id="hasntAc" hidden>
+    <a-button id="makeAcc">Buat Akun</a-button>
+</div>
+<div id="hasAc" hidden>
+    <div style="display: grid; grid-template-columns: auto auto 1fr; column-gap:.5ch;">
+        <span>Username</span>
+        <span>:</span>
+        <span id="unm"></span>
+        <span>Level</span>
+        <span>:</span>
+        <span id="lvl"></span>
+    </div>
+</div>
+<div style="margin-top: 1em; border-top: 1px solid var(--secondary-foreground); display: grid; grid-template-columns: 1fr auto;">
+    &nbsp;
     <a-button id="update">
         Update Profil Agen
     </a-button>
 </div>
+<load-screen id="blocker"><sonar-ping></sonar-ping><load-message>Memuat...</load-message></load-screen>
 <script type="module">
-    const thisDialog = moly._dialogs.at(-1);
+    const thisDialog = moly.lastDialog();
     const data = thisDialog.data;
     if(data.photoURL == null) data.photoURL = "/assets/images/generic-user.webp";
     $('#agentPhoto')[0].src = data.photoURL;
@@ -79,6 +95,29 @@
     $('#tmtp').text(data.tmUbah == null ? "-" : data.tmUbah);
     $('#visi').text(data.vision);
     $('#misi').text(data.mission);
+    $('#select').text(data.seleksi);
+    $('#grading').text(data.nilaiPilih);
+    $('#evidence').text(data.eviden);
+    $('#documents').text(data.dokumentasi);
+    if (data.userAccount)
+    {
+        $('#hasAc').prop("hidden",false);
+        $('#hasntAc').prop("hidden",true);
+        $('#unm').text(data.userAccount.username);
+        $('#lvl').text(data.userAccount.level == 0 ? "Super Admin" : data.userAccount.level == 1 ? "Evaluator" : data.userAccount.level == 2 ? "Agen Perubahan" : "Tidak Diketahui: "+ data.userAccount.level);
+    }
+    else
+    {
+        $('#hasAc').prop("hidden",true);
+        $('#hasntAc').prop("hidden",false);
+        $('#makeAcc').click(async ()=>{
+            const mk = await moly.dialog.show({title: "Buat Akun Agen "+ data.name, content:"/modules/agen-newaccount.html", fetching: true, data});
+            if(mk)
+            {
+                thisDialog.resolve({adduser: true});
+            }
+        });
+    }
     $('#update').click(async()=>{
         thisDialog.resolve({edit: true, data: data});
     });
@@ -86,8 +125,12 @@
         const imdiv = moly.newElement("div");
         const img = moly.newElement("img");
         img.src= data.photoURL;
+        img.style = "max-width: 100%";
         imdiv.style = "overflow-x: hidden;"
         imdiv.append(img);
         moly.dialog.show({title: "Foto Agen " + data.name ,content: imdiv,fetching: false});
     });
+    setTimeout(() => {
+        $('#blocker').remove();
+    }, 500);
 </script>

modules/agen-usermod.html

@@ -0,0 +1,66 @@
+<div style="display: grid; grid-template-columns: auto auto 1fr; column-gap:.5ch;">
+    <span>Username*</span>
+    <span>:</span>
+    <input type="text" id="unme" disabled>
+    <span>Password*</span>
+    <span>:</span>
+    <input type="password" id="pwd">
+    <span>Password Konfirmasi*</span>
+    <span>:</span>
+    <input type="password" id="cPwd">
+    <span>Level*</span>
+    <span>:</span>
+    <select id="lvel" disabled>
+        <option value="2">Agen Perubahan</option>
+        <option value="1">Evaluator</option>
+    </select>
+    <div style="text-align: right;">
+        <a-button id="toggle">
+            
+        </a-button>
+    </div>
+    &nbsp;
+    <div style="text-align: right;">
+        <a-button id="passwd">
+            Ubah Password
+        </a-button>
+    </div>
+</div>
+<script type="module">
+    const thisDialog = moly.lastDialog();
+    const data = thisDialog.data;
+    $('#toggle').text((data.active ? "D" : "R") + "eaktivasi");
+    $('#toggle').attr("type",data.active ? "negative" : "");
+    $('#unme').val(data.username);
+    $('#lvel').val(data.level);
+    $('#passwd').click(async()=>{
+        const loadid = moly.loadScreen.show("Membuat Akun...","sonar","#" + thisDialog.content.id);
+        if($('#pwd').val().length < 1 || $('#pwd').val() != $('#cPwd').val())
+        {
+            moly.alert.show("Ubah Password","Pastikan Password telah diisi dan Password Konfirmasi telah cocok untuk mengubah Password.");
+            moly.loadScreen.close(loadid);
+            return;
+        }
+        const passwd = await postJson('/api/passwd',{username: data.username, password:$('#pwd').val() })
+        if(passwd.status != 202)
+        {
+            moly.alert.show("Ubah Password Gagal","Operasi penggantian password tidak berhasil. Silakan ulangi beberapa saat lagi.");
+            moly.loadScreen.close(loadid);
+            return;
+        }
+        moly.loadScreen.close(loadid);
+        thisDialog.resolve({passwd: true});
+    });
+    $('#toggle').click(async()=>{
+        const loadid = moly.loadScreen.show("Membuat Akun...","sonar","#" + thisDialog.content.id);
+        const toggle = await postJson('/api/toggleuser',{username: data.username})
+        if(toggle.status != 202)
+        {
+            moly.alert.show(`${data.active ? "D" : "R"}eaktivasi Akun Gagal`,`Operasi ${data.active ? "D" : "R"}eaktivasi Akun Agen tidak berhasil. Silakan ulangi beberapa saat lagi.`);
+            moly.loadScreen.close(loadid);
+            return;
+        }
+        moly.loadScreen.close(loadid);
+        thisDialog.resolve({toggle: true});
+    });
+</script>

modules/agen.html

@@ -14,6 +14,7 @@
             </tr>
         </tbody>
     </table>
+    <a-button id="newAgent">Tambah Agen</a-button>
 </group-el>
 <group-el label="Manajemen Akun Pengguna" style="padding: 3ch 1ch;">
     <table id="users" class="fullwidth bordered selectable">
@@ -22,7 +23,7 @@
                 <th style="width: 22ch;">NIP</th>
                 <th style="min-width: 12ch;">Username</th>
                 <th style="width: 12ch;">Level</th>
-                <th style="width: 6ch;">Active</th>
+                <th style="width: 6ch;">Aktif</th>
             </tr>
         </thead>
         <tbody id="usContent">
@@ -38,11 +39,18 @@
     let users = {};
     async function populateAgents()
     {
+        const loadid = moly.loadScreen.show("","bar","#agents");
         units = await getJson('/api/getunits');
-        if (units.status != 200) return false;
+        if (units.status != 200) {
+            moly.loadScreen.close(loadid);
+            return false;
+        }
         units = units.data;
         agents = await getJson('/api/getagents');
-        if (agents.status != 200) return false;
+        if (agents.status != 200) {
+            moly.loadScreen.close(loadid);
+            return false;
+        }
         agents = agents.data;
         $('#agContent').empty();
         $.each(agents,(_,v)=>{
@@ -63,18 +71,35 @@
             uk.append(v.unitKerja);
             $('#agContent').append(ro);
             $(ro).click(async()=>{
+                v.allUnits = units;
+                v.userAccount = users.find(e=>e.agentID == v.agentID);
+                v.allUsers = users;
                 const aksi = await moly.dialog.show({title: "Profil Agen Perubahan",content:"/modules/agen-profil.html",fetching: true, data: v});
                 if(aksi.edit) 
                 {
-                    const edit = await moly.dialog.show({title: "Update Agen Perubahan",content:"/modules/agen-edit.html",fetching: true, data: aksi.data});   
+                    const edit = await moly.dialog.show({title: "Update Agen Perubahan",content:"/modules/agen-edit.html",fetching: true, data: aksi.data});  
+                    if (edit) 
+                    {
+                        populateAgents();
+                    } 
+                }
+                else if (aksi.adduser)
+                {
+                    populateUsers();
                 }
             });
         });
+        moly.loadScreen.close(loadid);
+        return true;
     }
     async function populateUsers()
     {
+        const loadid = moly.loadScreen.show("","bar","#users");
         users = await getJson('/api/getusers');
-        if (users.status != 200) return false;
+        if (users.status != 200) {
+            moly.loadScreen.close(loadid);
+            return false;
+        }
         users = users.data;
         $('#usContent').empty();
         $.each(users,(_,v)=>{
@@ -90,11 +115,26 @@
             ro.append(ac);
             id.append(v.agentID);
             un.append(v.username);
-            lv.append(v.level);
+            lv.append(v.level == 0 ? "Super Admin" : v.level == 1 ? "Evaluator" : v.level == 2 ? "Agen" : "Tidak Diketahui: "+ v.level );
             ac.append(v.active ? "Ya" : "Tidak");
+            $(ro).click(async()=>{
+                const aksi = await moly.dialog.show({title: "Modifikasi Akun Agen",content:"/modules/agen-usermod.html",fetching: true, data: v});
+                if(aksi && aksi.toggle)
+                {
+                    populateUsers();   
+                }
+            })
             $('#usContent').append(ro);
         });
+        moly.loadScreen.close(loadid);
+        return true;
     }
-    await populateAgents();
+    $('#newAgent').click(async()=>{
-    await populateUsers();
+        const na = await moly.dialog.show({title: "Tambah Agen Perubahan", content: "/modules/agen-new.html", fetching: true, data: {agents, units, users}});
+        if(!na) return;
+        populateAgents();
+        if(na.ca) populateUsers();
+    });
+    populateAgents();
+    populateUsers();
 </script>