forked from izu/student-web-if-development-kit
Merge pull request 'feat(m4n1fest): menerapkan clean code pada kode dan tambah komen untuk memudahkan pembacaan' (#4) from feat/clean-code into development
Reviewed-on: #4
This commit was merged in pull request #4.
This commit is contained in:
+339
-222
@@ -2532,13 +2532,15 @@
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// Manajemen Mega Menu Navigasi Desktop
|
||||
(function () {
|
||||
const menuItems = document.querySelectorAll('[data-menu]');
|
||||
const megaOverlay = document.getElementById('mega-overlay');
|
||||
|
||||
let activeMenu = null;
|
||||
let activeMenuId = null; // Menyimpan ID menu yang sedang aktif/terbuka
|
||||
|
||||
const menuMap = {
|
||||
// Pemetaan menu ke panel konten mega menu
|
||||
const menuPanelMap = {
|
||||
tentang: 'mega-tentang',
|
||||
program: 'mega-program',
|
||||
sdm: 'mega-sdm',
|
||||
@@ -2547,98 +2549,127 @@
|
||||
kontak: 'mega-kontak'
|
||||
};
|
||||
|
||||
function setButtonState(menuId) {
|
||||
menuItems.forEach(item => {
|
||||
const isActive = item.getAttribute('data-menu') === menuId;
|
||||
const btn = item.querySelector('.nav-menu-btn');
|
||||
const chevron = item.querySelector('.fa-chevron-down');
|
||||
// Mengubah status visual tombol navigasi berdasarkan menu aktif
|
||||
function setMenuButtonState(menuId) {
|
||||
menuItems.forEach(menuItemElement => {
|
||||
const isActive = menuItemElement.getAttribute('data-menu') === menuId;
|
||||
const buttonElement = menuItemElement.querySelector('.nav-menu-btn');
|
||||
const chevronIconElement = menuItemElement.querySelector('.fa-chevron-down');
|
||||
|
||||
btn.classList.toggle('active', isActive);
|
||||
btn.setAttribute('aria-expanded', isActive ? 'true' : 'false');
|
||||
chevron.style.transform = isActive ? 'rotate(180deg)' : '';
|
||||
if (buttonElement) {
|
||||
buttonElement.classList.toggle('active', isActive);
|
||||
buttonElement.setAttribute('aria-expanded', isActive ? 'true' : 'false');
|
||||
}
|
||||
if (chevronIconElement) {
|
||||
chevronIconElement.style.transform = isActive ? 'rotate(180deg)' : '';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function closeMenus() {
|
||||
Object.values(menuMap).forEach(panelId => {
|
||||
const panel = document.getElementById(panelId);
|
||||
if (panel) panel.classList.remove('active');
|
||||
// Menutup semua panel mega menu yang sedang terbuka
|
||||
function closeActiveMenus() {
|
||||
Object.values(menuPanelMap).forEach(panelId => {
|
||||
const panelElement = document.getElementById(panelId);
|
||||
if (panelElement) {
|
||||
panelElement.classList.remove('active');
|
||||
}
|
||||
});
|
||||
|
||||
megaOverlay.classList.remove('active');
|
||||
setButtonState(null);
|
||||
activeMenu = null;
|
||||
if (megaOverlay) {
|
||||
megaOverlay.classList.remove('active');
|
||||
}
|
||||
setMenuButtonState(null);
|
||||
activeMenuId = null;
|
||||
}
|
||||
|
||||
function openMenu(menuId) {
|
||||
const targetPanel = document.getElementById(menuMap[menuId]);
|
||||
if (!targetPanel) return;
|
||||
// Membuka panel mega menu tertentu dan menutup yang lainnya
|
||||
function openSelectedMenu(menuId) {
|
||||
const targetPanelElement = document.getElementById(menuPanelMap[menuId]);
|
||||
if (!targetPanelElement) return;
|
||||
|
||||
Object.values(menuMap).forEach(panelId => {
|
||||
const panel = document.getElementById(panelId);
|
||||
if (panel) panel.classList.remove('active');
|
||||
Object.values(menuPanelMap).forEach(panelId => {
|
||||
const panelElement = document.getElementById(panelId);
|
||||
if (panelElement) {
|
||||
panelElement.classList.remove('active');
|
||||
}
|
||||
});
|
||||
|
||||
targetPanel.classList.add('active');
|
||||
megaOverlay.classList.add('active');
|
||||
setButtonState(menuId);
|
||||
activeMenu = menuId;
|
||||
targetPanelElement.classList.add('active');
|
||||
if (megaOverlay) {
|
||||
megaOverlay.classList.add('active');
|
||||
}
|
||||
setMenuButtonState(menuId);
|
||||
activeMenuId = menuId;
|
||||
}
|
||||
|
||||
menuItems.forEach(item => {
|
||||
const menuId = item.getAttribute('data-menu');
|
||||
const button = item.querySelector('.nav-menu-btn');
|
||||
// Menginisialisasi event listener untuk setiap tombol navigasi
|
||||
menuItems.forEach(menuItemElement => {
|
||||
const menuId = menuItemElement.getAttribute('data-menu');
|
||||
const buttonElement = menuItemElement.querySelector('.nav-menu-btn');
|
||||
if (!buttonElement) return;
|
||||
|
||||
button.setAttribute('aria-haspopup', 'true');
|
||||
button.setAttribute('aria-expanded', 'false');
|
||||
buttonElement.setAttribute('aria-haspopup', 'true');
|
||||
buttonElement.setAttribute('aria-expanded', 'false');
|
||||
|
||||
button.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
buttonElement.addEventListener('click', (event) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
if (activeMenu === menuId) {
|
||||
closeMenus();
|
||||
if (activeMenuId === menuId) {
|
||||
closeActiveMenus();
|
||||
} else {
|
||||
openMenu(menuId);
|
||||
openSelectedMenu(menuId);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
megaOverlay.addEventListener('click', closeMenus);
|
||||
// Menutup menu ketika overlay (latar belakang redup) diklik
|
||||
if (megaOverlay) {
|
||||
megaOverlay.addEventListener('click', closeActiveMenus);
|
||||
}
|
||||
|
||||
document.addEventListener('click', (e) => {
|
||||
const clickedInsideNav = e.target.closest('#main-nav');
|
||||
const clickedInsidePanel = e.target.closest('.mega-panel');
|
||||
// Menutup menu jika klik dilakukan di luar area navigasi dan panel menu
|
||||
document.addEventListener('click', (event) => {
|
||||
const isClickInsideNav = event.target.closest('#main-nav');
|
||||
const isClickInsidePanel = event.target.closest('.mega-panel');
|
||||
|
||||
if (!clickedInsideNav && !clickedInsidePanel && activeMenu) {
|
||||
closeMenus();
|
||||
if (!isClickInsideNav && !isClickInsidePanel && activeMenuId) {
|
||||
closeActiveMenus();
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape' && activeMenu) {
|
||||
closeMenus();
|
||||
// Menutup menu jika menekan tombol Escape keyboard
|
||||
document.addEventListener('keydown', (event) => {
|
||||
if (event.key === 'Escape' && activeMenuId) {
|
||||
closeActiveMenus();
|
||||
}
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script>
|
||||
// Manajemen Menu Navigasi Seluler (Mobile Menu)
|
||||
(function() {
|
||||
const mobileBtn = document.getElementById('mobile-menu-button');
|
||||
const mobileMenu = document.getElementById('mobile-menu');
|
||||
const closeMobileBtn= document.getElementById('close-mobile-menu');
|
||||
if (mobileBtn && mobileMenu) {
|
||||
mobileBtn.addEventListener('click', function() {
|
||||
const isOpen = !mobileMenu.classList.contains('-translate-x-full');
|
||||
mobileMenu.classList.toggle('-translate-x-full');
|
||||
mobileBtn.setAttribute('aria-expanded', isOpen ? 'false' : 'true');
|
||||
const mobileMenuButton = document.getElementById('mobile-menu-button');
|
||||
const mobileMenuPanel = document.getElementById('mobile-menu');
|
||||
const closeMobileMenuButton = document.getElementById('close-mobile-menu');
|
||||
|
||||
// Menampilkan atau menyembunyikan menu seluler saat tombol menu diklik
|
||||
if (mobileMenuButton && mobileMenuPanel) {
|
||||
mobileMenuButton.addEventListener('click', () => {
|
||||
const isHidden = mobileMenuPanel.classList.contains('-translate-x-full');
|
||||
mobileMenuPanel.classList.toggle('-translate-x-full');
|
||||
mobileMenuButton.setAttribute('aria-expanded', isHidden ? 'true' : 'false');
|
||||
});
|
||||
}
|
||||
if (closeMobileBtn && mobileMenu) {
|
||||
closeMobileBtn.addEventListener('click', function() {
|
||||
mobileMenu.classList.add('-translate-x-full');
|
||||
if (mobileBtn) mobileBtn.setAttribute('aria-expanded', 'false');
|
||||
|
||||
// Menyembunyikan kembali menu seluler saat tombol silang (tutup) diklik
|
||||
if (closeMobileMenuButton && mobileMenuPanel) {
|
||||
closeMobileMenuButton.addEventListener('click', () => {
|
||||
mobileMenuPanel.classList.add('-translate-x-full');
|
||||
if (mobileMenuButton) {
|
||||
mobileMenuButton.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
});
|
||||
}
|
||||
})();
|
||||
@@ -2646,219 +2677,305 @@
|
||||
|
||||
<!-- Scroll Reveal Observer & Chart.js Initialization -->
|
||||
<script>
|
||||
/* ── IKA FORM SUBMIT ── */
|
||||
// Silakan ganti URL di bawah dengan Web App URL (akhiran /exec) hasil Deploy project Apps Script Anda.
|
||||
// Cara Deploy: di Apps Script editor -> Deploy -> New deployment -> Web app -> Who has access: Anyone.
|
||||
// URL Web App Google Apps Script untuk penanganan pengiriman form IKA
|
||||
const IKA_SCRIPT_URL = "https://script.google.com/macros/s/AKfycbwrXG3YFu4PEY3Z3acYeFTLCozM6iERfA7_yWxXaiJn7ULwau5vTIpt0Zv04OziMit-/exec";
|
||||
|
||||
// Checkbox visual toggle
|
||||
const consentCheck = document.getElementById('ika-consent');
|
||||
if (consentCheck) {
|
||||
consentCheck.addEventListener('change', function() {
|
||||
const box = document.getElementById('ika-consent-box');
|
||||
if (box) {
|
||||
if (this.checked) {
|
||||
box.innerHTML = `<svg width="10" height="10" viewBox="0 0 24 24" fill="none"
|
||||
stroke="#2352A0" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="20 6 9 17 4 12"/></svg>`;
|
||||
} else {
|
||||
box.innerHTML = '';
|
||||
}
|
||||
// Efek visual checkbox kustom pada Form Persetujuan
|
||||
const consentCheckbox = document.getElementById('ika-consent');
|
||||
if (consentCheckbox) {
|
||||
consentCheckbox.addEventListener('change', (event) => {
|
||||
const consentBoxElement = document.getElementById('ika-consent-box');
|
||||
if (!consentBoxElement) return;
|
||||
|
||||
const isChecked = event.target.checked;
|
||||
if (isChecked) {
|
||||
consentBoxElement.innerHTML = `<svg width="10" height="10" viewBox="0 0 24 24" fill="none"
|
||||
stroke="#2352A0" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="20 6 9 17 4 12"/></svg>`;
|
||||
} else {
|
||||
consentBoxElement.innerHTML = '';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function submitIkaForm() {
|
||||
const nama = document.getElementById('ika-nama').value.trim();
|
||||
const nim = document.getElementById('ika-nim').value.trim();
|
||||
const angkatan = document.getElementById('ika-angkatan').value.trim();
|
||||
const hp = document.getElementById('ika-hp').value.trim();
|
||||
const email = document.getElementById('ika-email').value.trim();
|
||||
const status = document.getElementById('ika-status').value;
|
||||
const instansi = document.getElementById('ika-instansi').value.trim();
|
||||
const skill1 = document.getElementById('ika-skill1').value;
|
||||
const skill2 = document.getElementById('ika-skill2').value;
|
||||
const skill3 = document.getElementById('ika-skill3').value;
|
||||
const consent = document.getElementById('ika-consent').checked;
|
||||
// Mengumpulkan dan merapikan data masukan dari form
|
||||
function getIkaFormData() {
|
||||
return {
|
||||
nama: document.getElementById('ika-nama').value.trim(),
|
||||
nim: document.getElementById('ika-nim').value.trim(),
|
||||
angkatan: document.getElementById('ika-angkatan').value.trim(),
|
||||
hp: document.getElementById('ika-hp').value.trim(),
|
||||
email: document.getElementById('ika-email').value.trim(),
|
||||
status: document.getElementById('ika-status').value,
|
||||
instansi: document.getElementById('ika-instansi').value.trim(),
|
||||
skill1: document.getElementById('ika-skill1').value,
|
||||
skill2: document.getElementById('ika-skill2').value,
|
||||
skill3: document.getElementById('ika-skill3').value,
|
||||
hasConsent: document.getElementById('ika-consent').checked
|
||||
};
|
||||
}
|
||||
|
||||
const msg = document.getElementById('ika-status-msg');
|
||||
// Melakukan validasi pengisian field wajib dan persetujuan checkbox
|
||||
function validateIkaFormData(formData) {
|
||||
const hasRequiredFields = formData.nama &&
|
||||
formData.angkatan &&
|
||||
formData.hp &&
|
||||
formData.email &&
|
||||
formData.status &&
|
||||
formData.skill1 &&
|
||||
formData.hasConsent;
|
||||
return !!hasRequiredFields;
|
||||
}
|
||||
|
||||
// Validasi
|
||||
if (!nama || !angkatan || !hp || !email || !status || !skill1 || !consent) {
|
||||
msg.textContent = '⚠️ Lengkapi semua field wajib (*) dan centang persetujuan.';
|
||||
msg.style.color = '#ef4444';
|
||||
return;
|
||||
}
|
||||
|
||||
const btn = document.getElementById('ika-submit-btn');
|
||||
btn.disabled = true;
|
||||
btn.textContent = 'Mengirim...';
|
||||
msg.textContent = 'Sedang mengirim data...';
|
||||
msg.style.color = '#9ca3af';
|
||||
|
||||
try {
|
||||
const params = new URLSearchParams({
|
||||
nama, nim, angkatan, noHp: hp,
|
||||
email, status, instansi, skill1, skill2, skill3
|
||||
});
|
||||
|
||||
await fetch(IKA_SCRIPT_URL + "?" + params.toString(), {
|
||||
method: 'GET',
|
||||
mode: 'no-cors',
|
||||
});
|
||||
|
||||
msg.textContent = '✅ Data berhasil dikirim! Admin akan menghubungimu dalam 1–2 hari kerja.';
|
||||
msg.style.color = '#16a34a';
|
||||
btn.textContent = 'Terkirim ✓';
|
||||
// Reset form
|
||||
['ika-nama','ika-nim','ika-angkatan','ika-hp','ika-email','ika-instansi']
|
||||
.forEach(id => document.getElementById(id).value = '');
|
||||
['ika-status','ika-skill1','ika-skill2','ika-skill3']
|
||||
.forEach(id => document.getElementById(id).selectedIndex = 0);
|
||||
document.getElementById('ika-consent').checked = false;
|
||||
const consentBox = document.getElementById('ika-consent-box');
|
||||
if (consentBox) consentBox.innerHTML = '';
|
||||
|
||||
} catch (err) {
|
||||
msg.textContent = '❌ Gagal mengirim. Coba lagi atau hubungi admin.';
|
||||
msg.style.color = '#ef4444';
|
||||
btn.disabled = false;
|
||||
btn.textContent = 'Daftar Sekarang';
|
||||
// Memperbarui pesan status pengiriman pada UI
|
||||
function updateIkaFormStatusMessage(message, color) {
|
||||
const statusMessageElement = document.getElementById('ika-status-msg');
|
||||
if (statusMessageElement) {
|
||||
statusMessageElement.textContent = message;
|
||||
statusMessageElement.style.color = color;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── SKILL DISTRIBUTION — Live fetch from Google Sheets (approved rows only) ── */
|
||||
// Mengubah kondisi tombol kirim dan pesan selama proses mengunggah data
|
||||
function setIkaFormLoadingState(isLoading) {
|
||||
const submitButtonElement = document.getElementById('ika-submit-btn');
|
||||
if (!submitButtonElement) return;
|
||||
|
||||
if (isLoading) {
|
||||
submitButtonElement.disabled = true;
|
||||
submitButtonElement.textContent = 'Mengirim...';
|
||||
updateIkaFormStatusMessage('Sedang mengirim data...', '#9ca3af');
|
||||
} else {
|
||||
submitButtonElement.disabled = false;
|
||||
submitButtonElement.textContent = 'Daftar Sekarang';
|
||||
}
|
||||
}
|
||||
|
||||
// Mengirimkan data form ke Google Apps Script via GET fetch (mode no-cors)
|
||||
async function sendIkaFormData(formData) {
|
||||
const params = new URLSearchParams({
|
||||
nama: formData.nama,
|
||||
nim: formData.nim,
|
||||
angkatan: formData.angkatan,
|
||||
noHp: formData.hp,
|
||||
email: formData.email,
|
||||
status: formData.status,
|
||||
instansi: formData.instansi,
|
||||
skill1: formData.skill1,
|
||||
skill2: formData.skill2,
|
||||
skill3: formData.skill3
|
||||
});
|
||||
|
||||
const targetUrl = `${IKA_SCRIPT_URL}?${params.toString()}`;
|
||||
await fetch(targetUrl, {
|
||||
method: 'GET',
|
||||
mode: 'no-cors'
|
||||
});
|
||||
}
|
||||
|
||||
// Mereset isian seluruh kolom formulir kembali ke kosong/awal
|
||||
function resetIkaForm() {
|
||||
const inputIds = ['ika-nama', 'ika-nim', 'ika-angkatan', 'ika-hp', 'ika-email', 'ika-instansi'];
|
||||
inputIds.forEach(id => {
|
||||
const inputElement = document.getElementById(id);
|
||||
if (inputElement) inputElement.value = '';
|
||||
});
|
||||
|
||||
const selectIds = ['ika-status', 'ika-skill1', 'ika-skill2', 'ika-skill3'];
|
||||
selectIds.forEach(id => {
|
||||
const selectElement = document.getElementById(id);
|
||||
if (selectElement) selectElement.selectedIndex = 0;
|
||||
});
|
||||
|
||||
const consentCheckbox = document.getElementById('ika-consent');
|
||||
if (consentCheckbox) consentCheckbox.checked = false;
|
||||
|
||||
const consentBoxElement = document.getElementById('ika-consent-box');
|
||||
if (consentBoxElement) consentBoxElement.innerHTML = '';
|
||||
}
|
||||
|
||||
// Alur utama penanganan tombol submit pendaftaran IKA
|
||||
async function submitIkaForm() {
|
||||
const formData = getIkaFormData();
|
||||
|
||||
const isValid = validateIkaFormData(formData);
|
||||
if (!isValid) {
|
||||
updateIkaFormStatusMessage('⚠️ Lengkapi semua field wajib (*) dan centang persetujuan.', '#ef4444');
|
||||
return;
|
||||
}
|
||||
|
||||
setIkaFormLoadingState(true);
|
||||
|
||||
try {
|
||||
await sendIkaFormData(formData);
|
||||
|
||||
updateIkaFormStatusMessage('✅ Data berhasil dikirim! Admin akan menghubungimu dalam 1–2 hari kerja.', '#16a34a');
|
||||
|
||||
const submitButtonElement = document.getElementById('ika-submit-btn');
|
||||
if (submitButtonElement) {
|
||||
submitButtonElement.textContent = 'Terkirim ✓';
|
||||
}
|
||||
|
||||
resetIkaForm();
|
||||
} catch (error) {
|
||||
updateIkaFormStatusMessage('❌ Gagal mengirim. Coba lagi atau hubungi admin.', '#ef4444');
|
||||
setIkaFormLoadingState(false);
|
||||
}
|
||||
}
|
||||
|
||||
// Manajemen Penarikan Data Keahlian Alumni dari Google Sheets secara Live
|
||||
(function fetchSkillData() {
|
||||
const SHEET_ID = '1mtVB1vLev-OWz6aTuuddGKPS8tCv8MJcGpzws8irpxk';
|
||||
// Col I=Skill1, J=Skill2, K=Skill3, L=Approved (admin status)
|
||||
const query = encodeURIComponent("select I,J,K where lower(L)='approved'");
|
||||
const url = `https://docs.google.com/spreadsheets/d/${SHEET_ID}/gviz/tq?tqx=out:json&tq=${query}`;
|
||||
const url = `https://docs.google.com/spreadsheets/d/${SHEET_ID}/gviz/tq?tqx=out:json&tq=${query}`;
|
||||
|
||||
// Map: skill label → bar id prefix (must match id="bar-XXX" and id="pct-XXX" in HTML)
|
||||
// Pemetaan kategori keahlian ke ID element grafik di HTML
|
||||
const SKILL_MAP = {
|
||||
'Web Development' : 'web-development',
|
||||
'Mobile Development' : 'mobile-development',
|
||||
'Web Development': 'web-development',
|
||||
'Mobile Development': 'mobile-development',
|
||||
'Python / Data Science': 'python-data-science',
|
||||
'UI/UX Design' : 'uiux-design',
|
||||
'Networking / DevOps' : 'networking-devops',
|
||||
'Cybersecurity' : 'cybersecurity',
|
||||
'UI/UX Design': 'uiux-design',
|
||||
'Networking / DevOps': 'networking-devops',
|
||||
'Cybersecurity': 'cybersecurity',
|
||||
'Machine Learning / AI': 'machine-learning-ai',
|
||||
'Database' : 'database',
|
||||
'Database': 'database',
|
||||
};
|
||||
|
||||
const spinner = document.getElementById('skill-note-spinner');
|
||||
const noteText = document.getElementById('skill-note-text');
|
||||
const spinnerElement = document.getElementById('skill-note-spinner');
|
||||
const noteTextElement = document.getElementById('skill-note-text');
|
||||
|
||||
function setNote(text, spin, isCta) {
|
||||
if (spinner) spinner.style.animation = spin ? 'spin 1s linear infinite' : 'none';
|
||||
if (!noteText) return;
|
||||
if (isCta) {
|
||||
noteText.innerHTML = text + ' <a href="#kontribusi" style="color:#2352a0;font-weight:700;text-decoration:underline;text-underline-offset:2px;">Isi form kontribusi</a>';
|
||||
// Menampilkan catatan status di bawah grafik keahlian
|
||||
function setSkillNote(text, shouldSpin, shouldShowCta) {
|
||||
if (spinnerElement) {
|
||||
spinnerElement.style.animation = shouldSpin ? 'spin 1s linear infinite' : 'none';
|
||||
}
|
||||
if (!noteTextElement) return;
|
||||
|
||||
if (shouldShowCta) {
|
||||
noteTextElement.innerHTML = `${text} <a href="#kontribusi" style="color:#2352a0;font-weight:700;text-decoration:underline;text-underline-offset:2px;">Isi form kontribusi</a>`;
|
||||
} else {
|
||||
noteText.textContent = text;
|
||||
noteTextElement.textContent = text;
|
||||
}
|
||||
}
|
||||
|
||||
function normalizeSkill(val) {
|
||||
if (!val) return null;
|
||||
const s = val.toLowerCase().trim();
|
||||
if (s.includes('web')) return 'Web Development';
|
||||
if (s.includes('mobile')) return 'Mobile Development';
|
||||
if (s.includes('python') || s.includes('data science') || s.includes('data science')) return 'Python / Data Science';
|
||||
if (s.includes('ui') || s.includes('ux')) return 'UI/UX Design';
|
||||
if (s.includes('network') || s.includes('devops')) return 'Networking / DevOps';
|
||||
if (s.includes('cyber')) return 'Cybersecurity';
|
||||
if (s.includes('machine') || s.includes('ai') || s.includes('artificial')) return 'Machine Learning / AI';
|
||||
if (s.includes('database') || s.includes('db')) return 'Database';
|
||||
// Menyaring dan mengelompokkan teks bebas ke kategori keahlian terstandar
|
||||
function normalizeSkill(rawSkillText) {
|
||||
if (!rawSkillText) return null;
|
||||
const lowercasedSkill = rawSkillText.toLowerCase().trim();
|
||||
if (lowercasedSkill.includes('web')) return 'Web Development';
|
||||
if (lowercasedSkill.includes('mobile')) return 'Mobile Development';
|
||||
if (lowercasedSkill.includes('python') || lowercasedSkill.includes('data science')) return 'Python / Data Science';
|
||||
if (lowercasedSkill.includes('ui') || lowercasedSkill.includes('ux')) return 'UI/UX Design';
|
||||
if (lowercasedSkill.includes('network') || lowercasedSkill.includes('devops')) return 'Networking / DevOps';
|
||||
if (lowercasedSkill.includes('cyber')) return 'Cybersecurity';
|
||||
if (lowercasedSkill.includes('machine') || lowercasedSkill.includes('ai') || lowercasedSkill.includes('artificial')) return 'Machine Learning / AI';
|
||||
if (lowercasedSkill.includes('database') || lowercasedSkill.includes('db')) return 'Database';
|
||||
return null;
|
||||
}
|
||||
|
||||
// Memotong pembungkus JSONP Google Sheets agar diperoleh array baris murni
|
||||
function parseGoogleSheetsJson(responseText) {
|
||||
const sanitizedText = responseText.replace(/^[^{]+/, '').replace(/[);]+$/, '');
|
||||
const parsedData = JSON.parse(sanitizedText);
|
||||
return (parsedData.table && parsedData.table.rows) ? parsedData.table.rows : [];
|
||||
}
|
||||
|
||||
// Menghitung kemunculan setiap kategori keahlian dari data Sheets
|
||||
function calculateSkillCounts(rows) {
|
||||
const counts = {};
|
||||
rows.forEach(row => {
|
||||
[0, 1, 2].forEach(colIndex => {
|
||||
const cell = row.c && row.c[colIndex];
|
||||
const rawValue = cell && cell.v ? String(cell.v).trim() : '';
|
||||
const normalized = normalizeSkill(rawValue);
|
||||
if (normalized) {
|
||||
counts[normalized] = (counts[normalized] || 0) + 1;
|
||||
}
|
||||
});
|
||||
});
|
||||
return counts;
|
||||
}
|
||||
|
||||
// Memperbarui lebar progress bar keahlian dan persentase teks di UI
|
||||
function updateSkillBarsUI(counts) {
|
||||
const totalMentions = Object.values(counts).reduce((sum, count) => sum + count, 0);
|
||||
const maxCount = Math.max(...Object.values(counts), 0);
|
||||
|
||||
Object.entries(SKILL_MAP).forEach(([label, idKey]) => {
|
||||
const count = counts[label] || 0;
|
||||
const percentage = totalMentions > 0 ? Math.round((count / totalMentions) * 100) : 0;
|
||||
const barPercentage = maxCount > 0 ? Math.round((count / maxCount) * 100) : 0;
|
||||
|
||||
const barElement = document.getElementById(`bar-${idKey}`);
|
||||
const percentElement = document.getElementById(`pct-${idKey}`);
|
||||
|
||||
if (barElement) barElement.style.width = `${barPercentage}%`;
|
||||
if (percentElement) percentElement.textContent = count > 0 ? `${percentage}%` : '—';
|
||||
});
|
||||
}
|
||||
|
||||
// Melakukan fetch data live dari spreadsheet
|
||||
fetch(url)
|
||||
.then(res => res.text())
|
||||
.then(raw => {
|
||||
const json = JSON.parse(raw.replace(/^[^{]+/, '').replace(/[);]+$/, ''));
|
||||
const rows = (json.table && json.table.rows) ? json.table.rows : [];
|
||||
.then(response => response.text())
|
||||
.then(responseText => {
|
||||
const rows = parseGoogleSheetsJson(responseText);
|
||||
|
||||
if (rows.length === 0) {
|
||||
setNote('Data skill masih kosong, bantu kami lengkapi data ini!', false, false);
|
||||
setSkillNote('Data skill masih kosong, bantu kami lengkapi data ini!', false, false);
|
||||
return;
|
||||
}
|
||||
|
||||
// Count normalized skill mentions
|
||||
const counts = {};
|
||||
rows.forEach(row => {
|
||||
[0, 1, 2].forEach(colIdx => {
|
||||
const cell = row.c && row.c[colIdx];
|
||||
const val = cell && cell.v ? String(cell.v).trim() : '';
|
||||
const normalized = normalizeSkill(val);
|
||||
if (normalized) {
|
||||
counts[normalized] = (counts[normalized] || 0) + 1;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const totalMentions = Object.values(counts).reduce((s, c) => s + c, 0);
|
||||
const maxCount = Math.max(...Object.values(counts), 0);
|
||||
|
||||
// Update bars for predefined skills
|
||||
Object.entries(SKILL_MAP).forEach(([label, idKey]) => {
|
||||
const count = counts[label] || 0;
|
||||
const pct = totalMentions > 0 ? Math.round((count / totalMentions) * 100) : 0;
|
||||
const barPct = maxCount > 0 ? Math.round((count / maxCount) * 100) : 0;
|
||||
|
||||
const barEl = document.getElementById('bar-' + idKey);
|
||||
const pctEl = document.getElementById('pct-' + idKey);
|
||||
if (barEl) barEl.style.width = barPct + '%';
|
||||
if (pctEl) pctEl.textContent = count > 0 ? pct + '%' : '—';
|
||||
});
|
||||
|
||||
setNote(`Data dari ${rows.length} alumni yang diverifikasi.`, false, false);
|
||||
const counts = calculateSkillCounts(rows);
|
||||
updateSkillBarsUI(counts);
|
||||
setSkillNote(`Data dari ${rows.length} alumni yang diverifikasi.`, false, false);
|
||||
})
|
||||
.catch(() => {
|
||||
setNote('Data skill masih kosong, bantu kami lengkapi data ini!', false, false);
|
||||
setSkillNote('Data skill masih kosong, bantu kami lengkapi data ini!', false, false);
|
||||
});
|
||||
})();
|
||||
|
||||
/* ── REVEAL ON SCROLL ── */
|
||||
const ro = new IntersectionObserver(
|
||||
// Observer Efek Muncul Perlahan saat Pengguliran Halaman (Scroll Reveal)
|
||||
const revealObserver = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((e) => {
|
||||
if (e.isIntersecting) e.target.classList.add("in");
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add("in");
|
||||
}
|
||||
});
|
||||
},
|
||||
{ threshold: 0.08 },
|
||||
{ threshold: 0.08 }
|
||||
);
|
||||
document.querySelectorAll(".rv").forEach((el) => ro.observe(el));
|
||||
document.querySelectorAll(".rv").forEach((el) => revealObserver.observe(el));
|
||||
|
||||
/* ── FAQ TOGGLE ── */
|
||||
// Menampilkan atau menyembunyikan panel jawaban FAQ
|
||||
function toggleFaq(item) {
|
||||
item.classList.toggle("open");
|
||||
}
|
||||
|
||||
/* ── CHART.JS WITH BILINGUAL SUPPORT ── */
|
||||
window.addEventListener("load", function () {
|
||||
// Inisialisasi Grafik Jumlah Kelulusan (Chart.js) dengan Dukungan Bilingual
|
||||
window.addEventListener("load", () => {
|
||||
if (typeof Chart === "undefined") return;
|
||||
const ctx = document.getElementById("kelulusanChart");
|
||||
if (!ctx) return;
|
||||
const chartCanvasElement = document.getElementById("kelulusanChart");
|
||||
if (!chartCanvasElement) return;
|
||||
|
||||
const getChartLabels = (lang) => {
|
||||
if (lang === 'en') {
|
||||
return ['2022 Even', '2023 Odd', '2023 Even', '2024 Odd', '2024 Even'];
|
||||
}
|
||||
return ['2022 Genap', '2023 Ganjil', '2023 Genap', '2024 Ganjil', '2024 Genap'];
|
||||
// Mengembalikan nama label kuartal berdasarkan pilihan bahasa aktif
|
||||
const getChartLabels = (languageCode) => {
|
||||
return languageCode === 'en'
|
||||
? ['2022 Even', '2023 Odd', '2023 Even', '2024 Odd', '2024 Even']
|
||||
: ['2022 Genap', '2023 Ganjil', '2023 Genap', '2024 Ganjil', '2024 Genap'];
|
||||
};
|
||||
|
||||
const initialLang = typeof getLang === 'function' ? getLang() : 'id';
|
||||
const initialLanguageCode = typeof getLang === 'function' ? getLang() : 'id';
|
||||
|
||||
window.kelulusanChartInstance = new Chart(ctx.getContext("2d"), {
|
||||
window.kelulusanChartInstance = new Chart(chartCanvasElement.getContext("2d"), {
|
||||
type: "bar",
|
||||
data: {
|
||||
labels: getChartLabels(initialLang),
|
||||
labels: getChartLabels(initialLanguageCode),
|
||||
datasets: [
|
||||
{
|
||||
label: initialLang === 'en' ? 'Number of Graduates' : 'Jumlah Lulusan',
|
||||
label: initialLanguageCode === 'en' ? 'Number of Graduates' : 'Jumlah Lulusan',
|
||||
data: [45, 27, 63, 27, 50],
|
||||
backgroundColor: "#299bc1", // sesuai dengan warna biru pada gambar
|
||||
backgroundColor: "#299bc1",
|
||||
borderRadius: 0,
|
||||
borderSkipped: false,
|
||||
}
|
||||
@@ -2881,9 +2998,9 @@
|
||||
cornerRadius: 8,
|
||||
callbacks: {
|
||||
label: (context) => {
|
||||
const lang = typeof getLang === 'function' ? getLang() : 'id';
|
||||
const text = lang === 'en' ? 'Graduates' : 'Jumlah';
|
||||
const unit = lang === 'en' ? 'People' : 'Orang';
|
||||
const languageCode = typeof getLang === 'function' ? getLang() : 'id';
|
||||
const text = languageCode === 'en' ? 'Graduates' : 'Jumlah';
|
||||
const unit = languageCode === 'en' ? 'People' : 'Orang';
|
||||
return ` ${text}: ${context.raw} ${unit}`;
|
||||
},
|
||||
},
|
||||
@@ -2914,12 +3031,12 @@
|
||||
},
|
||||
});
|
||||
|
||||
// Listen for languageChanged event to dynamically update the chart
|
||||
document.addEventListener('languageChanged', (e) => {
|
||||
const lang = e.detail.lang;
|
||||
// Memperbarui grafik secara dinamis saat terjadi event pergantian bahasa
|
||||
document.addEventListener('languageChanged', (event) => {
|
||||
const languageCode = event.detail.lang;
|
||||
if (window.kelulusanChartInstance) {
|
||||
window.kelulusanChartInstance.data.labels = getChartLabels(lang);
|
||||
window.kelulusanChartInstance.data.datasets[0].label = lang === 'en' ? 'Number of Graduates' : 'Jumlah Lulusan';
|
||||
window.kelulusanChartInstance.data.labels = getChartLabels(languageCode);
|
||||
window.kelulusanChartInstance.data.datasets[0].label = languageCode === 'en' ? 'Number of Graduates' : 'Jumlah Lulusan';
|
||||
window.kelulusanChartInstance.update();
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user