Refactor admin frontend into modular SPA
This commit is contained in:
Zuev
185
frontend/admin/js/views/classrooms.js
Normal file
185
frontend/admin/js/views/classrooms.js
Normal file
@@ -0,0 +1,185 @@
|
||||
import { api } from '../api.js';
|
||||
import { escapeHtml, showAlert, hideAlert, initMultiSelect, updateSelectText } from '../utils.js';
|
||||
import { fetchEquipments, renderEquipmentCheckboxes } from './equipments.js';
|
||||
|
||||
export async function initClassrooms() {
|
||||
const classroomsTbody = document.getElementById('classrooms-tbody');
|
||||
const createClassroomForm = document.getElementById('create-classroom-form');
|
||||
|
||||
const equipmentCheckboxes = document.getElementById('equipment-checkboxes');
|
||||
const editEquipmentCheckboxes = document.getElementById('edit-equipment-checkboxes');
|
||||
|
||||
const modalEditClassroom = document.getElementById('modal-edit-classroom');
|
||||
const modalEditClassroomClose = document.getElementById('modal-edit-classroom-close');
|
||||
const editClassroomForm = document.getElementById('edit-classroom-form');
|
||||
|
||||
let allEquipments = [];
|
||||
let editingClassroomData = null;
|
||||
|
||||
initMultiSelect('equipment-select-box', 'equipment-dropdown-menu', 'equipment-select-text', 'equipment-checkboxes');
|
||||
initMultiSelect('edit-equipment-select-box', 'edit-equipment-dropdown-menu', 'edit-equipment-select-text', 'edit-equipment-checkboxes');
|
||||
|
||||
async function loadInitialData() {
|
||||
try {
|
||||
allEquipments = await fetchEquipments();
|
||||
renderEquipmentCheckboxes(allEquipments, 'equipment-checkboxes', 'equipment-select-text');
|
||||
await loadClassrooms();
|
||||
} catch (e) {
|
||||
classroomsTbody.innerHTML = '<tr><td colspan="6" class="loading-row">Ошибка загрузки данных</td></tr>';
|
||||
}
|
||||
}
|
||||
|
||||
async function loadClassrooms() {
|
||||
try {
|
||||
const classrooms = await api.get('/api/classrooms');
|
||||
renderClassrooms(classrooms);
|
||||
} catch (e) {
|
||||
classroomsTbody.innerHTML = '<tr><td colspan="6" class="loading-row">Ошибка загрузки</td></tr>';
|
||||
}
|
||||
}
|
||||
|
||||
function renderClassrooms(classrooms) {
|
||||
if (!classrooms || !classrooms.length) {
|
||||
classroomsTbody.innerHTML = '<tr><td colspan="6" class="loading-row">Нет аудиторий</td></tr>';
|
||||
return;
|
||||
}
|
||||
classroomsTbody.innerHTML = classrooms.map(c => {
|
||||
const equipHtml = c.equipments && c.equipments.length
|
||||
? c.equipments.map(eq => escapeHtml(eq.name)).join(', ')
|
||||
: '—';
|
||||
|
||||
return `
|
||||
<tr>
|
||||
<td>${c.id}</td>
|
||||
<td><strong>${escapeHtml(c.name)}</strong></td>
|
||||
<td>${c.capacity} чел.</td>
|
||||
<td><small>${equipHtml}</small></td>
|
||||
<td>
|
||||
<div class="status-cell">
|
||||
<span class="badge ${c.isAvailable ? 'badge-available' : 'badge-unavailable'}">
|
||||
${c.isAvailable ? 'Доступна' : 'Не доступна'}
|
||||
</span>
|
||||
<button class="btn-icon-toggle" data-id="${c.id}" data-current-status="${c.isAvailable}" title="Сменить статус">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
<td style="text-align: right;">
|
||||
<button class="btn-edit-classroom" data-id="${c.id}">Изменить</button>
|
||||
<button class="btn-delete" data-id="${c.id}" style="margin-left: 0.5rem;">Удалить</button>
|
||||
</td>
|
||||
</tr>`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
createClassroomForm.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
hideAlert('create-classroom-alert');
|
||||
const name = document.getElementById('new-classroom-name').value.trim();
|
||||
const capacity = parseInt(document.getElementById('new-classroom-capacity').value, 10);
|
||||
|
||||
const checkedBoxes = Array.from(equipmentCheckboxes.querySelectorAll('input:checked'));
|
||||
const equipmentIds = checkedBoxes.map(chk => parseInt(chk.value, 10));
|
||||
|
||||
if (!name || isNaN(capacity)) { showAlert('create-classroom-alert', 'Заполните обязательные поля', 'error'); return; }
|
||||
|
||||
try {
|
||||
const data = await api.post('/api/classrooms', { name, capacity, equipmentIds, isAvailable: true });
|
||||
showAlert('create-classroom-alert', `Аудитория "${escapeHtml(data.name)}" добавлена`, 'success');
|
||||
createClassroomForm.reset();
|
||||
updateSelectText('equipment-checkboxes', 'equipment-select-text');
|
||||
loadClassrooms();
|
||||
} catch (e) {
|
||||
showAlert('create-classroom-alert', e.message || 'Ошибка создания', 'error');
|
||||
}
|
||||
});
|
||||
|
||||
classroomsTbody.addEventListener('click', async (e) => {
|
||||
const btnDelete = e.target.closest('.btn-delete');
|
||||
const btnToggleStatus = e.target.closest('.btn-icon-toggle');
|
||||
const btnEdit = e.target.closest('.btn-edit-classroom');
|
||||
|
||||
if (btnDelete) {
|
||||
if (!confirm('Удалить аудиторию?')) return;
|
||||
try {
|
||||
await api.delete('/api/classrooms/' + btnDelete.dataset.id);
|
||||
loadClassrooms();
|
||||
} catch (err) { alert('Ошибка удаления'); }
|
||||
}
|
||||
|
||||
if (btnToggleStatus) {
|
||||
const id = btnToggleStatus.dataset.id;
|
||||
const currentStatus = btnToggleStatus.dataset.currentStatus === 'true';
|
||||
try {
|
||||
await api.put('/api/classrooms/' + id, { isAvailable: !currentStatus });
|
||||
loadClassrooms();
|
||||
} catch (err) { alert('Ошибка изменения статуса'); }
|
||||
}
|
||||
|
||||
if (btnEdit) {
|
||||
openEditClassroomModal(btnEdit.dataset.id);
|
||||
}
|
||||
});
|
||||
|
||||
async function openEditClassroomModal(id) {
|
||||
try {
|
||||
// Can optimize by using already loaded classrooms, but fetch is safer to get fresh data
|
||||
const classrooms = await api.get('/api/classrooms');
|
||||
editingClassroomData = classrooms.find(c => c.id == id);
|
||||
|
||||
if (!editingClassroomData) return;
|
||||
|
||||
document.getElementById('edit-classroom-id').value = editingClassroomData.id;
|
||||
document.getElementById('edit-classroom-name').value = editingClassroomData.name;
|
||||
document.getElementById('edit-classroom-capacity').value = editingClassroomData.capacity;
|
||||
|
||||
const existingEquipIds = editingClassroomData.equipments.map(e => e.id);
|
||||
renderEquipmentCheckboxes(allEquipments, 'edit-equipment-checkboxes', 'edit-equipment-select-text', existingEquipIds);
|
||||
|
||||
hideAlert('edit-classroom-alert');
|
||||
modalEditClassroom.classList.add('open');
|
||||
} catch (e) {
|
||||
alert('Ошибка загрузки данных аудитории');
|
||||
}
|
||||
}
|
||||
|
||||
modalEditClassroomClose.addEventListener('click', () => {
|
||||
modalEditClassroom.classList.remove('open');
|
||||
});
|
||||
|
||||
modalEditClassroom.addEventListener('click', (e) => {
|
||||
if (e.target === modalEditClassroom) {
|
||||
modalEditClassroom.classList.remove('open');
|
||||
}
|
||||
});
|
||||
|
||||
editClassroomForm.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
hideAlert('edit-classroom-alert');
|
||||
const id = document.getElementById('edit-classroom-id').value;
|
||||
const name = document.getElementById('edit-classroom-name').value.trim();
|
||||
const capacity = parseInt(document.getElementById('edit-classroom-capacity').value, 10);
|
||||
|
||||
const checkedBoxes = Array.from(editEquipmentCheckboxes.querySelectorAll('input:checked'));
|
||||
const equipmentIds = checkedBoxes.map(chk => parseInt(chk.value, 10));
|
||||
|
||||
if (!name || isNaN(capacity)) { showAlert('edit-classroom-alert', 'Заполните обязательные поля', 'error'); return; }
|
||||
|
||||
try {
|
||||
const data = await api.put('/api/classrooms/' + id, {
|
||||
name,
|
||||
capacity,
|
||||
equipmentIds,
|
||||
isAvailable: editingClassroomData.isAvailable
|
||||
});
|
||||
modalEditClassroom.classList.remove('open');
|
||||
// We show alert on the main create form area or we could use toast
|
||||
showAlert('create-classroom-alert', `Аудитория "${escapeHtml(data.name)}" обновлена`, 'success');
|
||||
loadClassrooms();
|
||||
} catch (e) {
|
||||
showAlert('edit-classroom-alert', e.message || 'Ошибка обновления', 'error');
|
||||
}
|
||||
});
|
||||
|
||||
loadInitialData();
|
||||
}
|
||||
Reference in New Issue
Block a user