100 lines
4.3 KiB
PHP
100 lines
4.3 KiB
PHP
<div class="space-y-6">
|
|
<h1 class="text-xl font-semibold">Schedule Builder</h1>
|
|
<p class="text-gray-600 dark:text-gray-400">Pilih kelas lalu buka builder untuk mengatur jadwal mingguan.</p>
|
|
|
|
<div id="index-loading" class="rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-12 text-center text-gray-500 dark:text-gray-400">
|
|
Loading kelas…
|
|
</div>
|
|
<div id="index-error" class="hidden rounded-2xl border border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-900/20 p-6 text-red-700 dark:text-red-300"></div>
|
|
<div id="index-content" class="hidden rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-sm overflow-hidden">
|
|
<div class="p-6">
|
|
<label for="class-select" class="block text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">Kelas</label>
|
|
<select id="class-select" class="w-full max-w-xs rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-3 py-2 text-sm focus:ring-2 focus:ring-primary">
|
|
<option value="">— Pilih kelas —</option>
|
|
</select>
|
|
<div class="mt-4">
|
|
<a id="btn-open-builder" href="#" class="inline-flex items-center gap-2 rounded-lg bg-primary px-4 py-2.5 text-sm font-medium text-white hover:opacity-90 focus:ring-2 focus:ring-primary/50 disabled:opacity-50 disabled:pointer-events-none">
|
|
<i class="bx bx-grid-alt text-lg"></i>
|
|
<span>Open Builder</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
(function() {
|
|
var baseUrl = '<?= base_url() ?>'.replace(/\/$/, '');
|
|
var apiUrl = baseUrl + '/api/academic/classes';
|
|
var builderBaseUrl = baseUrl + '/dashboard/academic/schedule-builder/';
|
|
|
|
var loading = document.getElementById('index-loading');
|
|
var errorEl = document.getElementById('index-error');
|
|
var content = document.getElementById('index-content');
|
|
var select = document.getElementById('class-select');
|
|
var btnOpen = document.getElementById('btn-open-builder');
|
|
|
|
function showLoading() {
|
|
loading.classList.remove('hidden');
|
|
errorEl.classList.add('hidden');
|
|
content.classList.add('hidden');
|
|
}
|
|
function showError(msg) {
|
|
loading.classList.add('hidden');
|
|
content.classList.add('hidden');
|
|
errorEl.classList.remove('hidden');
|
|
errorEl.textContent = msg;
|
|
}
|
|
function showContent() {
|
|
loading.classList.add('hidden');
|
|
errorEl.classList.add('hidden');
|
|
content.classList.remove('hidden');
|
|
}
|
|
|
|
function updateButton() {
|
|
var val = select.value;
|
|
if (val) {
|
|
btnOpen.href = builderBaseUrl + val;
|
|
btnOpen.classList.remove('disabled', 'opacity-50', 'pointer-events-none');
|
|
} else {
|
|
btnOpen.href = '#';
|
|
btnOpen.classList.add('disabled', 'opacity-50', 'pointer-events-none');
|
|
}
|
|
}
|
|
|
|
fetch(apiUrl, { method: 'GET', credentials: 'same-origin', headers: { 'X-Requested-With': 'XMLHttpRequest' } })
|
|
.then(function(res) { return res.json().then(function(j) { return { ok: res.ok, data: j }; }); })
|
|
.then(function(r) {
|
|
if (!r.ok) {
|
|
showError(r.data && r.data.message ? r.data.message : 'Gagal memuat daftar kelas');
|
|
return;
|
|
}
|
|
var list = r.data && r.data.data ? r.data.data : r.data;
|
|
if (!Array.isArray(list)) {
|
|
showError('Invalid response');
|
|
return;
|
|
}
|
|
list.forEach(function(c) {
|
|
var opt = document.createElement('option');
|
|
var label = c.full_label;
|
|
if (!label) {
|
|
var parts = [];
|
|
if (c.grade) parts.push(c.grade);
|
|
if (c.major) parts.push(c.major);
|
|
if (c.name) parts.push(c.name);
|
|
label = parts.join(' ').trim() || ('Kelas ' + c.id);
|
|
}
|
|
opt.value = c.id;
|
|
opt.textContent = label;
|
|
select.appendChild(opt);
|
|
});
|
|
showContent();
|
|
select.addEventListener('change', updateButton);
|
|
updateButton();
|
|
})
|
|
.catch(function() {
|
|
showError('Network error');
|
|
});
|
|
})();
|
|
</script>
|