root
261 lines
10 KiB
PHP
261 lines
10 KiB
PHP
<?= $this->extend('layout/management_layout') ?>
|
|
<?= $this->section('content') ?>
|
|
<div class="container-fluid">
|
|
<div class="wrapper">
|
|
<div class="content">
|
|
<h2 class="text-center mt-4 mb-3">Auto-Distribute Students into Sections</h2>
|
|
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="row g-3 align-items-end mb-2">
|
|
<div class="col-md-2">
|
|
<label for="sectionCount" class="form-label">Number of Sections</label>
|
|
<input type="number" min="1" id="sectionCount" class="form-control" placeholder="e.g. 2" />
|
|
</div>
|
|
<div class="col-md-2">
|
|
<label for="minStudents" class="form-label">Minimum Students</label>
|
|
<input type="number" min="1" id="minStudents" class="form-control" placeholder="e.g. 20" />
|
|
</div>
|
|
<div class="col-md-2">
|
|
<label for="maxStudents" class="form-label">Maximum Students</label>
|
|
<input type="number" min="1" id="maxStudents" class="form-control" placeholder="Optional" />
|
|
</div>
|
|
<div class="col-md-3 d-flex gap-2">
|
|
<button type="button" id="refreshTotalsBtn" class="btn btn-outline-secondary">Refresh Totals</button>
|
|
<button type="button" id="generateAllBtn" class="btn btn-primary">Generate All</button>
|
|
</div>
|
|
<div class="col-md-3 text-end">
|
|
<span id="pageMsg" class="small text-muted"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="table-responsive">
|
|
<table class="table table-sm table-striped align-middle no-mgmt-sticky" id="classesTable">
|
|
<thead class="table-light">
|
|
<tr id="tblHeader">
|
|
<th>Class</th>
|
|
<th>Total</th>
|
|
<th>Sections</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="tblBody"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<?= $this->endSection() ?>
|
|
|
|
<?= $this->section('scripts') ?>
|
|
<input type="hidden" id="csrfName" value="<?= esc(csrf_token()) ?>" />
|
|
<input type="hidden" id="csrfValue" value="<?= esc(csrf_hash()) ?>" />
|
|
<script>
|
|
(function(){
|
|
const selectedYear = '<?= esc($selectedYear ?? '') ?>';
|
|
const totalsUrl = '<?= site_url('administrator/sections/promotion-totals') ?>?school_year=' + encodeURIComponent(selectedYear);
|
|
const distUrl = '<?= site_url('administrator/sections/auto-distribute') ?>';
|
|
|
|
const tblBody = document.getElementById('tblBody');
|
|
const tblHeader = document.getElementById('tblHeader');
|
|
const sectionCountInput = document.getElementById('sectionCount');
|
|
const minInput = document.getElementById('minStudents');
|
|
const maxInput = document.getElementById('maxStudents');
|
|
const msgEl = document.getElementById('pageMsg');
|
|
const refreshBtn= document.getElementById('refreshTotalsBtn');
|
|
|
|
let headerSections = []; // list of generated section names as columns
|
|
let rowIndexByClassId = {}; // mapping to locate rows
|
|
|
|
function selectedSectionCount() {
|
|
const count = parseInt(sectionCountInput.value || '0', 10);
|
|
return count > 0 ? count : '';
|
|
}
|
|
|
|
function ensureSectionColumns(sectionNames) {
|
|
// Add any new section name as a column if not already present
|
|
sectionNames.forEach(function(name){
|
|
if (!name) return;
|
|
if (headerSections.indexOf(name) >= 0) return;
|
|
headerSections.push(name);
|
|
const th = document.createElement('th');
|
|
th.textContent = name;
|
|
tblHeader.appendChild(th);
|
|
// Also add empty cell to each existing row
|
|
document.querySelectorAll('#tblBody tr').forEach(function(tr){
|
|
const td = document.createElement('td');
|
|
td.dataset.section = name;
|
|
td.textContent = '';
|
|
tr.appendChild(td);
|
|
});
|
|
});
|
|
}
|
|
|
|
function buildInitialTable(rows) {
|
|
tblBody.innerHTML = '';
|
|
rowIndexByClassId = {};
|
|
headerSections = [];
|
|
// Remove dynamically-added section cols, keep the first four fixed
|
|
while (tblHeader.children.length > 4) tblHeader.removeChild(tblHeader.lastElementChild);
|
|
|
|
rows.forEach(function(r){
|
|
const tr = document.createElement('tr');
|
|
tr.dataset.classId = r.class_id;
|
|
tr.dataset.classSectionId = r.class_section_id;
|
|
tr.dataset.className = r.class_section_name || '';
|
|
|
|
const tdName = document.createElement('td');
|
|
tdName.textContent = r.class_section_name || '';
|
|
tr.appendChild(tdName);
|
|
|
|
const tdTotal = document.createElement('td');
|
|
tdTotal.className = 'text-end';
|
|
tdTotal.textContent = r.total;
|
|
tr.appendChild(tdTotal);
|
|
|
|
const tdNeed = document.createElement('td');
|
|
tdNeed.className = 'text-end need-cell';
|
|
tdNeed.textContent = selectedSectionCount();
|
|
tr.appendChild(tdNeed);
|
|
|
|
const tdAct = document.createElement('td');
|
|
const btn = document.createElement('button');
|
|
btn.className = 'btn btn-sm btn-primary';
|
|
btn.textContent = 'Generate Sections';
|
|
btn.addEventListener('click', function(){ runDistribution(r.class_section_id, r.class_section_name); });
|
|
tdAct.appendChild(btn);
|
|
tr.appendChild(tdAct);
|
|
|
|
tblBody.appendChild(tr);
|
|
rowIndexByClassId[r.class_id] = tr;
|
|
});
|
|
|
|
rows.forEach(function(r){
|
|
if (Array.isArray(r.sections) && r.sections.length) {
|
|
renderSectionsForRow(r.class_section_name || '', r.sections);
|
|
}
|
|
});
|
|
}
|
|
|
|
function updateNeeds() {
|
|
document.querySelectorAll('#tblBody tr').forEach(function(tr){
|
|
const needCell = tr.querySelector('.need-cell');
|
|
if (needCell) needCell.textContent = selectedSectionCount();
|
|
});
|
|
}
|
|
|
|
function runDistribution(baseSectionId, baseName) {
|
|
const sectionCount = parseInt(sectionCountInput.value || '0', 10);
|
|
const minStudents = parseInt(minInput.value || '0', 10);
|
|
const maxStudents = parseInt(maxInput.value || '0', 10);
|
|
if (!sectionCount || sectionCount <= 0 || !minStudents || minStudents <= 0) {
|
|
msgEl.textContent = 'Enter number of sections and minimum students first.';
|
|
return;
|
|
}
|
|
|
|
msgEl.textContent = 'Distributing ' + (baseName || '') + '...';
|
|
const fd = new FormData();
|
|
fd.append('class_section_id', String(baseSectionId));
|
|
fd.append('section_count', String(sectionCount));
|
|
fd.append('min_students_per_section', String(minStudents));
|
|
if (maxStudents > 0) fd.append('max_students_per_section', String(maxStudents));
|
|
fd.append('school_year', selectedYear);
|
|
// CSRF
|
|
const csrfNameEl = document.getElementById('csrfName');
|
|
const csrfValueEl= document.getElementById('csrfValue');
|
|
if (csrfNameEl && csrfValueEl) {
|
|
fd.append(csrfNameEl.value, csrfValueEl.value);
|
|
}
|
|
return fetch(distUrl, { method: 'POST', headers: { 'X-Requested-With': 'XMLHttpRequest' }, body: fd })
|
|
.then(r => r.json())
|
|
.then(res => {
|
|
// refresh CSRF if provided
|
|
if (res && res.csrfTokenName && res.csrfHash) {
|
|
if (csrfNameEl) csrfNameEl.value = res.csrfTokenName;
|
|
if (csrfValueEl) csrfValueEl.value = res.csrfHash;
|
|
}
|
|
|
|
if (!res || !res.ok || !Array.isArray(res.sections)) {
|
|
msgEl.textContent = res && res.message ? res.message : 'Distribution finished with no sections.';
|
|
return;
|
|
}
|
|
|
|
msgEl.textContent = res && res.message ? res.message : 'Completed.';
|
|
|
|
renderSectionsForRow(baseName || '', res.sections);
|
|
})
|
|
.catch(() => { msgEl.textContent = 'Failed to distribute. Please try again.'; });
|
|
}
|
|
|
|
function renderSectionsForRow(baseName, sections) {
|
|
const names = sections.map(s => s.class_section_name).filter(Boolean);
|
|
ensureSectionColumns(names);
|
|
|
|
const tr = Array.from(document.querySelectorAll('#tblBody tr')).find(function(_tr){
|
|
return (_tr.children[0].textContent || '') === (baseName || '');
|
|
});
|
|
if (!tr) return;
|
|
|
|
sections.forEach(function(s){
|
|
const td = Array.from(tr.querySelectorAll('td[data-section]')).find(cell => cell.dataset.section === s.class_section_name);
|
|
if (!td) return;
|
|
|
|
const studentNames = Array.isArray(s.student_names) ? s.student_names : [];
|
|
td.innerHTML = '';
|
|
const count = document.createElement('div');
|
|
count.className = 'fw-semibold small mb-1';
|
|
count.textContent = (s.total ?? studentNames.length) + ' students';
|
|
td.appendChild(count);
|
|
|
|
const list = document.createElement('div');
|
|
list.className = 'small';
|
|
list.style.whiteSpace = 'normal';
|
|
list.textContent = studentNames.length ? studentNames.join(', ') : 'No students assigned';
|
|
td.appendChild(list);
|
|
});
|
|
}
|
|
|
|
function loadTotals() {
|
|
msgEl.textContent = 'Loading totals...';
|
|
fetch(totalsUrl, { headers: { 'X-Requested-With': 'XMLHttpRequest' }})
|
|
.then(r => r.json())
|
|
.then(res => {
|
|
if (!res || !res.ok) { msgEl.textContent = res && res.message ? res.message : 'Failed to load totals.'; return; }
|
|
buildInitialTable(res.rows || []);
|
|
updateNeeds();
|
|
msgEl.textContent = '';
|
|
})
|
|
.catch(() => { msgEl.textContent = 'Failed to load totals.'; });
|
|
}
|
|
|
|
refreshBtn.addEventListener('click', function(){ loadTotals(); });
|
|
document.getElementById('generateAllBtn').addEventListener('click', async function(){
|
|
const sectionCount = parseInt(sectionCountInput.value || '0', 10);
|
|
const minStudents = parseInt(minInput.value || '0', 10);
|
|
if (!sectionCount || sectionCount <= 0 || !minStudents || minStudents <= 0) {
|
|
msgEl.textContent = 'Enter number of sections and minimum students first.';
|
|
return;
|
|
}
|
|
// Collect base sections from rows
|
|
const rows = Array.from(document.querySelectorAll('#tblBody tr'))
|
|
.map(tr => ({ id: tr.dataset.classSectionId, name: tr.dataset.className }))
|
|
.filter(r => r.id);
|
|
for (let i = 0; i < rows.length; i++) {
|
|
const r = rows[i];
|
|
msgEl.textContent = 'Distributing ' + (r.name || r.id) + ' (' + (i+1) + '/' + rows.length + ')...';
|
|
// eslint-disable-next-line no-await-in-loop
|
|
await runDistribution(r.id, r.name);
|
|
}
|
|
msgEl.textContent = 'All distributions completed.';
|
|
});
|
|
sectionCountInput.addEventListener('input', function(){ updateNeeds(); });
|
|
|
|
loadTotals();
|
|
})();
|
|
</script>
|
|
<?= $this->endSection() ?>
|