143 lines
4.9 KiB
JavaScript
143 lines
4.9 KiB
JavaScript
// Основной модуль страницы настроек
|
||
import { startDropdownAutoObserver, initAllCustomDropdowns } from '../../js/dropdown.js';
|
||
|
||
import { getToken } from '../../js/api.js';
|
||
|
||
// Проверка авторизации
|
||
const role = localStorage.getItem('role');
|
||
if (!getToken() || !['ADMIN', 'EDUCATION_OFFICE'].includes(role)) {
|
||
window.location.href = '/';
|
||
}
|
||
|
||
// Глобальная инициализация кастомных списков
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
initAllCustomDropdowns(document.body);
|
||
startDropdownAutoObserver();
|
||
});
|
||
|
||
// Настройка вкладок
|
||
const ROUTES = {
|
||
general: { title: 'Общие настройки', file: 'views/general.html' },
|
||
'time-slots': {
|
||
title: 'Временные слоты',
|
||
file: 'views/time-slots.html',
|
||
init: async () => {
|
||
const module = await import('./views/time-slots.js');
|
||
await module.initTimeSlotsSettings();
|
||
}
|
||
},
|
||
database: {
|
||
title: 'База данных',
|
||
file: 'views/database.html',
|
||
init: async () => {
|
||
const module = await import('./views/database.js');
|
||
await module.initDatabase();
|
||
}
|
||
},
|
||
'edu-forms': {
|
||
title: 'Формы обучения',
|
||
file: 'views/edu-forms.html',
|
||
init: async () => {
|
||
const module = await import('./views/edu-forms.js');
|
||
await module.initEduForms();
|
||
}
|
||
},
|
||
};
|
||
|
||
const ROLE_TABS = {
|
||
ADMIN: ['general', 'time-slots', 'database', 'edu-forms'],
|
||
EDUCATION_OFFICE: ['time-slots', 'edu-forms']
|
||
};
|
||
const allowedTabs = new Set(ROLE_TABS[role] || []);
|
||
const defaultTab = role === 'EDUCATION_OFFICE' ? 'time-slots' : 'general';
|
||
|
||
let currentTab = null;
|
||
|
||
// DOM-элементы
|
||
const appContent = document.getElementById('app-content');
|
||
const pageTitle = document.getElementById('page-title');
|
||
const navItems = document.querySelectorAll('.nav-item[data-tab]');
|
||
const sidebar = document.querySelector('.sidebar');
|
||
const sidebarOverlay = document.getElementById('sidebar-overlay');
|
||
const menuToggle = document.getElementById('menu-toggle');
|
||
const sidebarCloseBtn = document.getElementById('sidebar-close-btn');
|
||
const main = document.querySelector('.main');
|
||
|
||
// Состояние боковой панели из localStorage
|
||
if (window.innerWidth > 768 && localStorage.getItem('sidebar-collapsed') === 'true') {
|
||
sidebar.classList.add('collapsed');
|
||
main.classList.add('sidebar-collapsed');
|
||
}
|
||
|
||
// Кнопка меню
|
||
menuToggle.addEventListener('click', () => {
|
||
if (window.innerWidth <= 768) {
|
||
sidebar.classList.toggle('open');
|
||
sidebarOverlay.classList.toggle('open');
|
||
} else {
|
||
sidebar.classList.remove('collapsed');
|
||
main.classList.remove('sidebar-collapsed');
|
||
localStorage.setItem('sidebar-collapsed', 'false');
|
||
}
|
||
});
|
||
|
||
// Сворачивание боковой панели
|
||
sidebarCloseBtn?.addEventListener('click', () => {
|
||
if (window.innerWidth <= 768) {
|
||
sidebar.classList.remove('open');
|
||
sidebarOverlay.classList.remove('open');
|
||
} else {
|
||
sidebar.classList.toggle('collapsed');
|
||
main.classList.toggle('sidebar-collapsed');
|
||
localStorage.setItem('sidebar-collapsed', sidebar.classList.contains('collapsed'));
|
||
}
|
||
});
|
||
|
||
sidebarOverlay.addEventListener('click', () => {
|
||
sidebar.classList.remove('open');
|
||
sidebarOverlay.classList.remove('open');
|
||
});
|
||
|
||
// Навигация
|
||
navItems.forEach(item => {
|
||
item.hidden = !allowedTabs.has(item.dataset.tab);
|
||
item.addEventListener('click', (e) => {
|
||
e.preventDefault();
|
||
const tab = item.dataset.tab;
|
||
switchTab(tab);
|
||
});
|
||
});
|
||
|
||
async function switchTab(tab) {
|
||
if (currentTab === tab || !ROUTES[tab] || !allowedTabs.has(tab)) return;
|
||
|
||
navItems.forEach(n => n.classList.remove('active'));
|
||
document.querySelector(`.nav-item[data-tab="${tab}"]`)?.classList.add('active');
|
||
pageTitle.textContent = ROUTES[tab].title;
|
||
|
||
try {
|
||
appContent.innerHTML = '<div style="text-align:center;color:var(--text-secondary);padding:2rem;">Загрузка...</div>';
|
||
const response = await fetch(ROUTES[tab].file);
|
||
if (!response.ok) throw new Error('Не удалось загрузить вкладку');
|
||
|
||
const html = await response.text();
|
||
appContent.innerHTML = html;
|
||
initAllCustomDropdowns(appContent);
|
||
if (ROUTES[tab].init) {
|
||
await ROUTES[tab].init();
|
||
}
|
||
|
||
currentTab = tab;
|
||
} catch (e) {
|
||
appContent.innerHTML = `<div style="padding:1rem;color:var(--error);">Ошибка загрузки: ${e.message}</div>`;
|
||
console.error(e);
|
||
}
|
||
|
||
// Закрываем мобильное меню после перехода
|
||
sidebar.classList.remove('open');
|
||
sidebarOverlay.classList.remove('open');
|
||
}
|
||
|
||
// Вкладка по умолчанию
|
||
switchTab(defaultTab);
|