MuhammadFarras/student-web-if-development-kit
1
0
Fork 0
forked from izu/student-web-if-development-kit
Code Pull Requests 1 Activity

refactor(m4n1fest): update statistik hero dan lengkapi translasi bilingual

Browse Source
This commit is contained in:
Mhanif26
2026-06-06 13:21:18 +07:00
parent 28cbd24338
commit ff223ea289
2 changed files with 2997 additions and 1719 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/global/localization.js
+1658 -424
View File
File diff suppressed because it is too large Load Diff
groups/M4N1FEST/index.html
+64 -20
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="id" class="scroll-smooth">
<head>
<meta charset="UTF-8">
@@ -1188,7 +1188,7 @@
<div class="custom-stats">
<div class="custom-stat-box">
<div class="custom-stat-num custom-serif">212<span class="custom-stat-plus">+</span></div>
<div class="custom-stat-num custom-serif">212</div>
<div class="custom-stat-label" data-i18n="grp_m4n1fest_hero_stat_alumni">TOTAL ALUMNI</div>
<div class="custom-stat-desc" style="font-size: 0.65rem; color: #a1a1aa; margin-top: 4px; line-height: 1.35; font-weight: normal; font-family: sans-serif;" data-i18n="grp_m4n1fest_hero_stat_alumni_desc">data diperoleh dari alumni terdata di tracer study</div>
</div>
@@ -1197,7 +1197,7 @@
<div class="custom-stat-label" data-i18n="grp_m4n1fest_hero_stat_batch">ANGKATAN</div>
</div>
<div class="custom-stat-box" style="border-right: none;">
<div class="custom-stat-num custom-serif">202<span class="custom-stat-plus">+</span></div>
<div class="custom-stat-num custom-serif">180</div>
<div class="custom-stat-label" data-i18n="grp_m4n1fest_hero_stat_company">PERUSAHAAN</div>
</div>
</div>
@@ -1445,7 +1445,7 @@
class="logo-initials"
style="background: #f3f4f6; color: #4b5563"
>
202+
180
</div>
<span class="logo-name" style="color: #6b7280" data-i18n="grp_m4n1fest_logo_others">Lainnya</span>
</div>
@@ -1593,23 +1593,23 @@
</thead>
<tbody>
<tr style="background: #fff; border-bottom: 1px solid #f1f5f9;">
<td style="padding: 14px 20px;">2024 Genap</td>
<td style="padding: 14px 20px;" data-i18n="grp_m4n1fest_table_p1">2024 Genap</td>
<td style="padding: 14px 20px; text-align: right;">50</td>
</tr>
<tr style="background: #f8fafc; border-bottom: 1px solid #f1f5f9;">
<td style="padding: 14px 20px;">2024 Ganjil</td>
<td style="padding: 14px 20px;" data-i18n="grp_m4n1fest_table_p2">2024 Ganjil</td>
<td style="padding: 14px 20px; text-align: right;">27</td>
</tr>
<tr style="background: #fff; border-bottom: 1px solid #f1f5f9;">
<td style="padding: 14px 20px;">2023 Genap</td>
<td style="padding: 14px 20px;" data-i18n="grp_m4n1fest_table_p3">2023 Genap</td>
<td style="padding: 14px 20px; text-align: right;">63</td>
</tr>
<tr style="background: #f8fafc; border-bottom: 1px solid #f1f5f9;">
<td style="padding: 14px 20px;">2023 Ganjil</td>
<td style="padding: 14px 20px;" data-i18n="grp_m4n1fest_table_p4">2023 Ganjil</td>
<td style="padding: 14px 20px; text-align: right;">27</td>
</tr>
<tr style="background: #fff; border-bottom: 1px solid #e2e8f0;">
<td style="padding: 14px 20px;">2022 Genap</td>
<td style="padding: 14px 20px;" data-i18n="grp_m4n1fest_table_p5">2022 Genap</td>
<td style="padding: 14px 20px; text-align: right;">45</td>
</tr>
</tbody>
@@ -2047,7 +2047,7 @@
<option>Cybersecurity</option>
<option>Machine Learning / AI</option>
<option>Database</option>
<option>Lainnya</option>
<option value="Lainnya" data-i18n="grp_m4n1fest_form_skill_others">Lainnya</option>
</select>
</div>
<div class="form-group">
@@ -2062,7 +2062,7 @@
<option>Cybersecurity</option>
<option>Machine Learning / AI</option>
<option>Database</option>
<option>Lainnya</option>
<option value="Lainnya" data-i18n="grp_m4n1fest_form_skill_others">Lainnya</option>
</select>
</div>
<div class="form-group">
@@ -2077,7 +2077,7 @@
<option>Cybersecurity</option>
<option>Machine Learning / AI</option>
<option>Database</option>
<option>Lainnya</option>
<option value="Lainnya" data-i18n="grp_m4n1fest_form_skill_others">Lainnya</option>
</select>
</div>
</div>
@@ -2844,19 +2844,58 @@
const spinnerElement = document.getElementById('skill-note-spinner');
const noteTextElement = document.getElementById('skill-note-text');
// Menampilkan catatan status di bawah grafik keahlian
function setSkillNote(text, shouldSpin, shouldShowCta) {
let alumniCount = 0;
let isDataFetched = false;
let isFetchFailed = false;
// Menampilkan catatan status di bawah grafik keahlian dengan dukungan bilingual
function setSkillNote(shouldSpin) {
if (spinnerElement) {
spinnerElement.style.animation = shouldSpin ? 'spin 1s linear infinite' : 'none';
if (!shouldSpin) {
spinnerElement.style.display = 'none';
} else {
spinnerElement.style.display = 'inline-block';
}
}
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>`;
const currentLang = typeof getLang === 'function' ? getLang() : 'id';
if (!isDataFetched) {
if (isFetchFailed) {
if (currentLang === 'en') {
noteTextElement.innerHTML = `Skill data is empty, help us complete this data! <a href="#kontribusi" style="color:#2352a0;font-weight:700;text-decoration:underline;text-underline-offset:2px;">Fill out contribution form</a>`;
} else {
noteTextElement.textContent = text;
noteTextElement.innerHTML = `Data skill masih kosong, bantu kami lengkapi data ini! <a href="#kontribusi" style="color:#2352a0;font-weight:700;text-decoration:underline;text-underline-offset:2px;">Isi form kontribusi</a>`;
}
} else {
noteTextElement.textContent = currentLang === 'en' ? 'Loading alumni skill data...' : 'Memuat data skill alumni...';
}
} else {
if (alumniCount === 0) {
if (currentLang === 'en') {
noteTextElement.innerHTML = `Skill data is empty, help us complete this data! <a href="#kontribusi" style="color:#2352a0;font-weight:700;text-decoration:underline;text-underline-offset:2px;">Fill out contribution form</a>`;
} else {
noteTextElement.innerHTML = `Data skill masih kosong, bantu kami lengkapi data ini! <a href="#kontribusi" style="color:#2352a0;font-weight:700;text-decoration:underline;text-underline-offset:2px;">Isi form kontribusi</a>`;
}
} else {
if (currentLang === 'en') {
noteTextElement.textContent = `Data from ${alumniCount} verified alumni.`;
} else {
noteTextElement.textContent = `Data dari ${alumniCount} alumni yang diverifikasi.`;
}
}
}
}
// Terapkan translasi teks saat memuat halaman
setSkillNote(true);
// Pasang event listener untuk menangani pergantian bahasa dinamis
document.addEventListener('languageChanged', () => {
setSkillNote(isDataFetched ? false : !isFetchFailed);
});
// Menyaring dan mengelompokkan teks bebas ke kategori keahlian terstandar
function normalizeSkill(rawSkillText) {
@@ -2920,17 +2959,22 @@
.then(responseText => {
const rows = parseGoogleSheetsJson(responseText);
isDataFetched = true;
if (rows.length === 0) {
setSkillNote('Data skill masih kosong, bantu kami lengkapi data ini!', false, false);
alumniCount = 0;
setSkillNote(false);
return;
}
alumniCount = rows.length;
const counts = calculateSkillCounts(rows);
updateSkillBarsUI(counts);
setSkillNote(`Data dari ${rows.length} alumni yang diverifikasi.`, false, false);
setSkillNote(false);
})
.catch(() => {
setSkillNote('Data skill masih kosong, bantu kami lengkapi data ini!', false, false);
isDataFetched = false;
isFetchFailed = true;
setSkillNote(false);
});
})();