agper-agen/modules/agen-profil.html

<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;">
        <img id="agentPhoto" style="max-height: 12em; max-width: 8em;"/>
    </div>
    <div style="display: grid; grid-template-columns: auto auto 1fr; column-gap:.5ch;">
        <span>NIP</span>
        <span>:</span>
        <span id="agentID"></span>
        <span>Nama Agen</span>
        <span>:</span>
        <span id="name"></span>
        <span>Jabatan</span>
        <span>:</span>
        <span id="jabatan"></span>
        <span>Unit Kerja</span>
        <span>:</span>
        <span id="unit"></span>
        <span>No SK Pengangkatan</span>
        <span>:</span>
        <span id="ska"></span>
        <span>TMT</span>
        <span>:</span>
        <span id="tmta"></span>
        <span>No SK Perubahan</span>
        <span>:</span>
        <span id="skp"></span>
        <span>TMT</span>
        <span>:</span>
        <span id="tmtp"></span>
    </div>
    <button id="opPicture">Lihat Foto</button>
</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>
    <span id="visi"></span>
    <span>Misi</span>
    <span id="misi"></span>
</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>
    <span id="select"></span>
    <span>Penilaian dan Pemilihan</span>
    <span>:</span>
    <span id="grading"></span>
    <span>Dokumen Eviden Penetapan SK</span>
    <span>:</span>
    <span id="evidence"></span>
    <span>Dokumentasi Penetapan SK</span>
    <span>:</span>
    <span id="documents"></span>
</div>
<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.lastDialog();
    const data = thisDialog.data;
    if(data.photoURL == null) data.photoURL = "/assets/images/generic-user.webp";
    $('#agentPhoto')[0].src = data.photoURL;
    $('#agentID').text(data.agentID);
    $('#name').text(data.name);
    $('#jabatan').text(data.jabatan);
    $('#unit').text(data.unitKerja);
    $('#ska').text(data.skAngkat);
    $('#tmta').text(data.tmt);
    $('#skp').text(data.skPerb == null ? "-" : data.skPerb);
    $('#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});
    });
    $('#opPicture').click(async()=>{
        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>