feat: status + test koneksi E-Jurnal di sinkronisasi

This commit is contained in:
Bro
2026-07-24 19:43:18 +07:00
parent 9c32843254
commit b82b34e542
+83
View File
@@ -121,6 +121,30 @@
<p class="text-sm text-gray-500 mt-1">Generate token untuk diinput di Aplikasi E-Jurnal Guru agar bisa push data presensi.</p>
</div>
{{-- Status + Test Connection --}}
@if($hasEjurnalToken)
<div id="ejurnal-status" class="p-4 bg-slate-50 border border-slate-200 rounded-xl">
<div class="flex items-start justify-between gap-4">
<div>
<div class="flex items-center gap-2">
<span id="ejurnal-status-dot" class="inline-block w-2.5 h-2.5 rounded-full bg-slate-300"></span>
<span id="ejurnal-status-text" class="text-sm font-semibold text-slate-500">Belum diverifikasi</span>
</div>
<p id="ejurnal-status-detail" class="mt-1 text-xs text-slate-400">Masukkan URL E-Jurnal dan klik Test Koneksi.</p>
</div>
</div>
<div class="mt-3 flex items-center gap-2">
<input type="text" id="ejurnal-test-url" placeholder="https://ejurnal.sekolah.sch.id"
class="flex-1 px-3 py-2 border border-gray-200 rounded-lg text-xs focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500">
<button type="button" id="test-ejurnal-btn"
class="shrink-0 inline-flex items-center gap-1.5 rounded-lg border border-blue-200 bg-blue-50 px-4 py-2 text-xs font-semibold text-blue-700 hover:bg-blue-100 transition">
<i class="fa-solid fa-plug"></i>
Test Koneksi
</button>
</div>
</div>
@endif
{{-- Token display --}}
@if($hasEjurnalToken)
<div class="p-4 bg-emerald-50 border border-emerald-200 rounded-xl">
@@ -277,6 +301,65 @@
}
});
}
// === E-Jurnal Connection Test ===
const ejBtn = document.getElementById('test-ejurnal-btn');
const ejSt = document.getElementById('ejurnal-status');
const ejDot = document.getElementById('ejurnal-status-dot');
const ejTxt = document.getElementById('ejurnal-status-text');
const ejDet = document.getElementById('ejurnal-status-detail');
const ejUrlInput = document.getElementById('ejurnal-test-url');
if (ejBtn && ejSt && ejDot && ejTxt && ejDet && ejUrlInput) {
ejBtn.addEventListener('click', async function () {
const tokenDisplay = document.getElementById('ejurnalTokenDisplay');
const token = tokenDisplay ? tokenDisplay.textContent.trim() : '';
const url = ejUrlInput.value.trim().replace(/\/+$/, '');
if (!url || !token) {
ejSt.className = 'p-4 bg-amber-50 border border-amber-200 rounded-xl';
ejDot.className = 'inline-block w-2.5 h-2.5 rounded-full bg-amber-400';
ejTxt.className = 'text-sm font-semibold text-amber-800';
ejTxt.textContent = '⚠️ URL atau token belum lengkap';
ejDet.textContent = 'Isi URL E-Jurnal dan pastikan token sudah digenerate.';
return;
}
ejBtn.disabled = true;
ejBtn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Testing...';
ejSt.className = 'p-4 bg-slate-50 border border-slate-200 rounded-xl';
ejDot.className = 'inline-block w-2.5 h-2.5 rounded-full bg-slate-300';
ejTxt.className = 'text-sm font-semibold text-slate-500';
ejTxt.textContent = 'Menguji koneksi...';
ejDet.textContent = 'Menghubungi ' + url + '...';
try {
const resp = await fetch(url + '/api/v1/ping?token=' + encodeURIComponent(token));
const data = await resp.json();
if (resp.ok && data.success) {
ejSt.className = 'p-4 bg-emerald-50 border border-emerald-200 rounded-xl';
ejDot.className = 'inline-block w-2.5 h-2.5 rounded-full bg-emerald-500';
ejTxt.className = 'text-sm font-semibold text-emerald-800';
ejTxt.textContent = '✅ Terhubung ke E-Jurnal';
ejDet.innerHTML = 'Siswa: ' + (data.data?.students || '?') + ' terdata';
} else {
throw new Error(data.message || 'Token tidak valid');
}
} catch (err) {
ejSt.className = 'p-4 bg-red-50 border border-red-200 rounded-xl';
ejDot.className = 'inline-block w-2.5 h-2.5 rounded-full bg-red-500';
ejTxt.className = 'text-sm font-semibold text-red-800';
ejTxt.textContent = '❌ Tidak Terhubung';
ejDet.textContent = err.message.includes('Failed to fetch')
? 'Tidak dapat menjangkau ' + url + '. Periksa URL.'
: err.message;
} finally {
ejBtn.disabled = false;
ejBtn.innerHTML = '<i class="fa-solid fa-plug"></i> Test Koneksi';
}
});
}
});
</script>
</div>