From 2edbcb0c889a47bb1dbb4218ae80e837043f6219 Mon Sep 17 00:00:00 2001 From: cygouw Date: Thu, 4 Jun 2026 23:31:09 +0700 Subject: [PATCH] feat(ui): add language switcher for Indonesian and English --- assets/global/localization.js | 80 +++++++++++++++++++++++++++++++++++ groups/C4A/index.html | 42 +++++++++--------- groups/C4A/js/data.js | 2 + groups/C4A/js/main.js | 18 ++++++-- groups/C4A/js/ui.js | 62 ++++++++++++++++++--------- 5 files changed, 159 insertions(+), 45 deletions(-) diff --git a/assets/global/localization.js b/assets/global/localization.js index 82d1ca7..dfcc686 100644 --- a/assets/global/localization.js +++ b/assets/global/localization.js @@ -569,6 +569,46 @@ const translations = { kontrib_guideline_3: "Sertakan fakta dan data yang akurat dan dapat diverifikasi.", kontrib_guideline_4: "Hindari plagiarisme. Karya harus orisinal.", kontrib_guideline_5: "Tim redaksi berhak menyunting konten untuk keperluan editorial.", + + // --- Group C4A: Staf Pendukung & SOP --- + grp_c4a_hero_tag: "LAYANAN AKADEMIK \u2022 INFORMATIKA UNTAN", + grp_c4a_hero_title: "Staf Pendukung &
Standar Operasional Prosedur (SOP)", + grp_c4a_hero_desc: "Halaman ini menampilkan informasi petugas layanan akademik serta prosedur administrasi mahasiswa Program Studi Informatika UNTAN.", + grp_c4a_stat_staf: "Staf Aktif", + grp_c4a_stat_sop: "Jenis SOP", + grp_c4a_staff_tag: "Tim Kami", + grp_c4a_staff_title: "Staf Pendukung", + grp_c4a_staff_subtitle: "Staf yang siap melayani kebutuhan akademik dan operasional laboratorium di Prodi Informatika UNTAN.", + grp_c4a_sop_tag: "Prosedur Resmi", + grp_c4a_sop_title: "Standar Operasional Prosedur (SOP)", + grp_c4a_sop_subtitle: "Standar Operasional Prosedur untuk berbagai kebutuhan administrasi akademik mahasiswa. Gunakan pencarian atau filter untuk menemukan SOP yang Anda butuhkan.", + grp_c4a_sop_search_placeholder: "Cari SOP berdasarkan judul...", + grp_c4a_sop_chip_semua: "Semua", + grp_c4a_sop_chip_akademik: "Akademik", + grp_c4a_sop_chip_praktikum: "Praktikum", + grp_c4a_sop_empty_title: "SOP tidak ditemukan", + grp_c4a_sop_empty_desc: "Coba kata kunci lain atau reset filter pencarian.", + grp_c4a_sop_reset_btn: "Reset Pencarian", + grp_c4a_faq_tag: "Pertanyaan Umum", + grp_c4a_faq_title: "Pertanyaan yang Sering Diajukan", + grp_c4a_faq_subtitle: "Temukan jawaban cepat atas pertanyaan umum mahasiswa seputar layanan akademik prodi.", + grp_c4a_empty_staff: "Data staf pendukung tidak tersedia saat ini.", + grp_c4a_empty_sop: "Data SOP tidak tersedia saat ini.", + grp_c4a_empty_faq: "Data FAQ tidak tersedia saat ini.", + grp_c4a_label_location: "Lokasi", + grp_c4a_label_service_hours: "Jam Layanan", + grp_c4a_label_wa_contact: "Kontak WhatsApp", + grp_c4a_label_tasks: "Tugas & Tanggung Jawab", + grp_c4a_label_send_wa: "Kirim Pesan WA", + grp_c4a_label_steps: "Langkah", + grp_c4a_label_view_detail: "Lihat Detail", + grp_c4a_label_responsible_staff: "Staf Bertanggung Jawab (Bersifat Opsional)", + grp_c4a_label_additional_info: "Informasi Tambahan (Bersifat Opsional):", + grp_c4a_label_purpose: "Tujuan", + grp_c4a_label_requirements: "Persyaratan", + grp_c4a_label_procedure: "Alur Prosedur", + grp_c4a_sop_showing_all: "Menampilkan {total} SOP", + grp_c4a_sop_showing_filtered: "Menampilkan {shown} dari {total} SOP", }, en: { @@ -1135,6 +1175,46 @@ const translations = { kontrib_guideline_3: "Include accurate and verifiable facts and data.", kontrib_guideline_4: "Avoid plagiarism. Work must be original.", kontrib_guideline_5: "The editorial team reserves the right to edit content for editorial purposes.", + + // --- Group C4A: Supporting Staff & SOP --- + grp_c4a_hero_tag: "ACADEMIC SERVICES \u2022 INFORMATICS UNTAN", + grp_c4a_hero_title: "Supporting Staff &
Standard Operating Procedures (SOP)", + grp_c4a_hero_desc: "This page presents information about academic service officers and administrative procedures for students of the Informatics Study Program at UNTAN.", + grp_c4a_stat_staf: "Active Staff", + grp_c4a_stat_sop: "SOP Types", + grp_c4a_staff_tag: "Our Team", + grp_c4a_staff_title: "Supporting Staff", + grp_c4a_staff_subtitle: "Staff ready to serve academic and laboratory operational needs at the Informatics Study Program, UNTAN.", + grp_c4a_sop_tag: "Official Procedures", + grp_c4a_sop_title: "Standard Operating Procedures (SOP)", + grp_c4a_sop_subtitle: "Standard Operating Procedures for various student academic administration needs. Use search or filter to find the SOP you need.", + grp_c4a_sop_search_placeholder: "Search SOP by title...", + grp_c4a_sop_chip_semua: "All", + grp_c4a_sop_chip_akademik: "Academic", + grp_c4a_sop_chip_praktikum: "Practicum", + grp_c4a_sop_empty_title: "No SOP found", + grp_c4a_sop_empty_desc: "Try another keyword or reset the search filter.", + grp_c4a_sop_reset_btn: "Reset Search", + grp_c4a_faq_tag: "Frequently Asked", + grp_c4a_faq_title: "Frequently Asked Questions", + grp_c4a_faq_subtitle: "Find quick answers to common student questions about the study program's academic services.", + grp_c4a_empty_staff: "Staff data is currently unavailable.", + grp_c4a_empty_sop: "SOP data is currently unavailable.", + grp_c4a_empty_faq: "FAQ data is currently unavailable.", + grp_c4a_label_location: "Location", + grp_c4a_label_service_hours: "Service Hours", + grp_c4a_label_wa_contact: "WhatsApp Contact", + grp_c4a_label_tasks: "Tasks & Responsibilities", + grp_c4a_label_send_wa: "Send WA Message", + grp_c4a_label_steps: "Steps", + grp_c4a_label_view_detail: "View Details", + grp_c4a_label_responsible_staff: "Responsible Staff (Optional)", + grp_c4a_label_additional_info: "Additional Information (Optional):", + grp_c4a_label_purpose: "Purpose", + grp_c4a_label_requirements: "Requirements", + grp_c4a_label_procedure: "Procedure Flow", + grp_c4a_sop_showing_all: "Showing {total} SOP", + grp_c4a_sop_showing_filtered: "Showing {shown} of {total} SOP", } }; diff --git a/groups/C4A/index.html b/groups/C4A/index.html index de2df19..e6f10bd 100644 --- a/groups/C4A/index.html +++ b/groups/C4A/index.html @@ -1,4 +1,4 @@ -īģŋ + @@ -1159,13 +1159,13 @@
-
LAYANAN AKADEMIK • INFORMATIKA UNTAN +
LAYANAN AKADEMIK • INFORMATIKA UNTAN
-

+

Staf Pendukung &
Standar Operasional Prosedur (SOP)

-

Halaman ini menampilkan informasi petugas +

Halaman ini menampilkan informasi petugas layanan akademik serta prosedur administrasi mahasiswa @@ -1173,12 +1173,12 @@

0
-
Staf Aktif
+
Staf Aktif
0
-
Jenis SOP
+
Jenis SOP
@@ -1187,10 +1187,10 @@
-
Tim +
Tim Kami
-

Staf Pendukung

-

Staf yang siap melayani kebutuhan +

Staf Pendukung

+

Staf yang siap melayani kebutuhan akademik dan operasional laboratorium di Prodi Informatika UNTAN.

@@ -1202,10 +1202,10 @@
-
Prosedur +
Prosedur Resmi
-

Standar Operasional Prosedur (SOP)

-

Standar Operasional Prosedur untuk +

Standar Operasional Prosedur (SOP)

+

Standar Operasional Prosedur untuk berbagai kebutuhan administrasi akademik mahasiswa. Gunakan pencarian atau filter untuk menemukan SOP yang Anda butuhkan.

@@ -1216,6 +1216,7 @@
- +
@@ -1243,8 +1244,8 @@ + `; container.appendChild(card); @@ -165,8 +178,11 @@ const CATEGORY_COLORS = { * @returns {string} Label kategori */ function getCatLabel(category) { - const map = { akademik: 'Akademik', praktikum: 'Praktikum' }; - return map[category] || 'Akademik'; + const map = { + akademik: t('grp_c4a_sop_chip_akademik', 'Akademik'), + praktikum: t('grp_c4a_sop_chip_praktikum', 'Praktikum') + }; + return map[category] || t('grp_c4a_sop_chip_akademik', 'Akademik'); } /** @@ -204,10 +220,10 @@ function buildSopCard(sop) {
- ${procedures.length} Langkah + ${procedures.length} ${t('grp_c4a_label_steps', 'Langkah')}
-
`; @@ -244,7 +260,7 @@ function buildSopModalContent(sop) { : ''; const staffBlockHTML = hasStaff ? `
-
Staf Bertanggung Jawab (Bersifat Opsional)
+
${t('grp_c4a_label_responsible_staff', 'Staf Bertanggung Jawab (Bersifat Opsional)')}
${staffHTML}
` : ''; @@ -253,7 +269,7 @@ function buildSopModalContent(sop) { const additionalInfoHTML = additionalInfo ? `
ℹī¸ -

Informasi Tambahan (Bersifat Opsional): ${additionalInfo}

+

${t('grp_c4a_label_additional_info', 'Informasi Tambahan (Bersifat Opsional):')} ${additionalInfo}

` : ''; @@ -274,16 +290,16 @@ function buildSopModalContent(sop) {
-
Tujuan
+
${t('grp_c4a_label_purpose', 'Tujuan')}

${purpose}

-
Persyaratan
+
${t('grp_c4a_label_requirements', 'Persyaratan')}
    ${reqsHTML}
-
Alur Prosedur
+
${t('grp_c4a_label_procedure', 'Alur Prosedur')}
    ${procsHTML}
@@ -305,7 +321,7 @@ export function renderSopCards(sops) { // Tampilkan pesan jika data SOP kosong atau gagal dimuat if (!sops || sops.length === 0) { - container.innerHTML = `

Data SOP tidak tersedia saat ini.

`; + container.innerHTML = `

${t('grp_c4a_empty_sop', 'Data SOP tidak tersedia saat ini.')}

`; updateResultInfo(0, 0); return; } @@ -319,16 +335,18 @@ function updateResultInfo(shown, total) { const el = document.getElementById('sop-result-info'); if (!el) return; if (shown === total) { - el.textContent = `Menampilkan ${total} SOP`; + const allTemplate = t('grp_c4a_sop_showing_all', 'Menampilkan {total} SOP'); + el.textContent = allTemplate.replace('{total}', total); } else { - el.textContent = `Menampilkan ${shown} dari ${total} SOP`; + const filteredTemplate = t('grp_c4a_sop_showing_filtered', 'Menampilkan {shown} dari {total} SOP'); + el.textContent = filteredTemplate.replace('{shown}', shown).replace('{total}', total); } } /** * Memfilter dan menyaring kartu SOP berdasarkan query pencarian dan chip filter aktif. */ -function applySopFilter() { +export function applySopFilter() { const container = document.getElementById('sop-cards-container'); if (!container) return; @@ -358,6 +376,7 @@ function applySopFilter() { updateResultInfo(visibleCount, cards.length); } + /** * Membuka modal detail untuk SOP tertentu berdasarkan tab_id. * @param {string} tabId - ID unik tab/SOP yang ingin ditampilkan @@ -595,10 +614,11 @@ export function renderFaqSection(faqs) { if (!container) return; if (!faqs || faqs.length === 0) { - container.innerHTML = `

Data FAQ tidak tersedia saat ini.

`; + container.innerHTML = `

${t('grp_c4a_empty_faq', 'Data FAQ tidak tersedia saat ini.')}

`; return; } + const delayClasses = ['reveal-delay-1', 'reveal-delay-2', 'reveal-delay-3']; const itemsHTML = faqs.map((faq, index) => {