agper-agen/modules/agen-new.html

208 lines
8.3 KiB
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: 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" maxlength="16">
<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="3">Agen Perubahan</option>
<option value="2">Supervisor</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>