Zuev/magistr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

сделал настройку временных слотов

Browse Source
This commit is contained in:
Zuev
2026-05-01 20:55:49 +03:00
parent bf02efb8b8
commit 3cb311f469
32 changed files with 2130 additions and 383 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
frontend/admin/settings/js/main.js
View File

@@ -1,27 +1,35 @@
// Settings page main.js
// Основной модуль страницы настроек
import { startDropdownAutoObserver, initAllCustomDropdowns } from '../../js/dropdown.js';
// Auth check
// Проверка авторизации
const token = localStorage.getItem('token');
const role = localStorage.getItem('role');
if (!token || role !== 'ADMIN') {
window.location.href = '/';
}
// Global initialization for Custom Selects
// Глобальная инициализация кастомных списков
document.addEventListener('DOMContentLoaded', () => {
initAllCustomDropdowns(document.body);
startDropdownAutoObserver();
});
// Configuration
// Настройка вкладок
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();
}
},
};
let currentTab = null;
// DOM Elements
// DOM-элементы
const appContent = document.getElementById('app-content');
const pageTitle = document.getElementById('page-title');
const navItems = document.querySelectorAll('.nav-item[data-tab]');
@@ -31,13 +39,13 @@ const menuToggle = document.getElementById('menu-toggle');
const sidebarCloseBtn = document.getElementById('sidebar-close-btn');
const main = document.querySelector('.main');
// Init sidebar state from localStorage
// Состояние боковой панели из localStorage
if (window.innerWidth > 768 && localStorage.getItem('sidebar-collapsed') === 'true') {
sidebar.classList.add('collapsed');
main.classList.add('sidebar-collapsed');
}
// Menu Toggle (Hamburger)
// Кнопка меню
menuToggle.addEventListener('click', () => {
if (window.innerWidth <= 768) {
sidebar.classList.toggle('open');
@@ -49,7 +57,7 @@ menuToggle.addEventListener('click', () => {
}
});
// Sidebar Close (X button)
// Сворачивание боковой панели
sidebarCloseBtn?.addEventListener('click', () => {
if (window.innerWidth <= 768) {
sidebar.classList.remove('open');
@@ -66,7 +74,7 @@ sidebarOverlay.addEventListener('click', () => {
sidebarOverlay.classList.remove('open');
});
// Navigation
// Навигация
navItems.forEach(item => {
item.addEventListener('click', (e) => {
e.preventDefault();
@@ -85,10 +93,14 @@ async function switchTab(tab) {
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('Failed to load view');
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) {
@@ -96,10 +108,10 @@ async function switchTab(tab) {
console.error(e);
}
// Close mobile menu if open
// Закрываем мобильное меню после перехода
sidebar.classList.remove('open');
sidebarOverlay.classList.remove('open');
}
// Load default tab
// Вкладка по умолчанию
switchTab('general');

358
frontend/admin/settings/js/views/time-slots.js Normal file
View File

@@ -0,0 +1,358 @@
import { api } from '../../../js/api.js';
import { escapeHtml, hideAlert, showAlert } from '../../../js/utils.js';
const APPLY_MODE_LABELS = {
DEFAULT: 'применяется по умолчанию',
WEEKDAY: 'применяется автоматически',
MANUAL: 'применяется вручную'
};
const DAY_SHORT_LABELS = {
1: 'Пн',
2: 'Вт',
3: 'Ср',
4: 'Чт',
5: 'Пт',
6: 'Сб',
7: 'Вс'
};
export async function initTimeSlotsSettings() {
const scopeSelect = document.getElementById('time-slot-scope-select');
const scopeSummary = document.getElementById('time-slot-scope-summary');
const scopeNameInput = document.getElementById('time-slot-scope-name');
const scopeAddButton = document.getElementById('time-slot-scope-add');
const scopeDeleteButton = document.getElementById('time-slot-scope-delete');
const assignmentForm = document.getElementById('time-slot-assignment-form');
const assignmentDateInput = document.getElementById('time-slot-assignment-date');
const assignmentScopeSelect = document.getElementById('time-slot-assignment-scope');
const assignmentsTbody = document.getElementById('time-slot-assignments-tbody');
const form = document.getElementById('time-slot-form');
const title = document.getElementById('time-slot-form-title');
const idInput = document.getElementById('time-slot-id');
const orderInput = document.getElementById('time-slot-order');
const startInput = document.getElementById('time-slot-start');
const endInput = document.getElementById('time-slot-end');
const durationInput = document.getElementById('time-slot-duration');
const resetButton = document.getElementById('time-slot-reset');
const refreshButton = document.getElementById('time-slots-refresh');
const tbody = document.getElementById('time-slots-tbody');
let scopes = [];
let slots = [];
let assignments = [];
let activeScopeId = null;
scopeSelect?.addEventListener('change', () => {
activeScopeId = Number(scopeSelect.value);
resetForm();
render();
});
scopeAddButton?.addEventListener('click', createScope);
scopeDeleteButton?.addEventListener('click', deleteActiveScope);
assignmentForm?.addEventListener('submit', saveAssignment);
form?.addEventListener('submit', saveSlot);
resetButton?.addEventListener('click', resetForm);
refreshButton?.addEventListener('click', loadAll);
startInput?.addEventListener('change', fillDurationIfEmpty);
endInput?.addEventListener('change', fillDurationIfEmpty);
tbody?.addEventListener('click', handleSlotTableClick);
assignmentsTbody?.addEventListener('click', handleAssignmentTableClick);
await loadAll();
async function loadAll() {
tbody.innerHTML = '<tr><td colspan="5" class="loading-row">Загрузка...</td></tr>';
assignmentsTbody.innerHTML = '<tr><td colspan="3" class="loading-row">Загрузка...</td></tr>';
hideAlert('time-slot-alert');
hideAlert('time-slot-assignment-alert');
try {
[scopes, slots, assignments] = await Promise.all([
api.get('/api/admin/time-slots/scopes'),
api.get('/api/admin/time-slots'),
api.get('/api/admin/time-slots/date-assignments')
]);
if (!activeScopeId || !scopes.some(scope => scope.id === activeScopeId)) {
activeScopeId = defaultScope()?.id || scopes[0]?.id || null;
}
render();
} catch (error) {
tbody.innerHTML = `<tr><td colspan="5" class="loading-row">Ошибка загрузки: ${escapeHtml(error.message)}</td></tr>`;
assignmentsTbody.innerHTML = '<tr><td colspan="3" class="loading-row">Нет данных</td></tr>';
}
}
function render() {
renderScopeSelects();
renderScopeSummary();
renderSlots();
renderAssignments();
}
function renderScopeSelects() {
scopeSelect.innerHTML = scopes.map(scope => `
<option value="${scope.id}" ${scope.id === activeScopeId ? 'selected' : ''}>${escapeHtml(scopeOptionLabel(scope))}</option>
`).join('');
const manualScopes = scopes.filter(scope => scope.applyMode === 'MANUAL');
assignmentScopeSelect.innerHTML = manualScopes.length
? manualScopes.map(scope => `<option value="${scope.id}">${escapeHtml(scope.name)}</option>`).join('')
: '<option value="">Нет ручных сеток</option>';
assignmentScopeSelect.disabled = manualScopes.length === 0;
const activeScope = selectedScope();
scopeDeleteButton.disabled = !activeScope || activeScope.systemScope;
}
function renderScopeSummary() {
const scope = selectedScope();
if (!scope) {
scopeSummary.innerHTML = '<span class="muted">Сетки времени не настроены</span>';
return;
}
const mode = APPLY_MODE_LABELS[scope.applyMode] || scope.applyMode;
const day = scope.applyMode === 'WEEKDAY' ? `, ${dayShort(scope.dayOfWeek)}` : '';
const slotCount = slots.filter(slot => slot.scopeId === scope.id).length;
scopeSummary.innerHTML = `
<span class="scope-badge ${scope.applyMode === 'DEFAULT' ? 'scope-badge-base' : ''}">${escapeHtml(scopeBadgeLabel(scope))}</span>
<span>${escapeHtml(mode + day)}. Слотов: ${slotCount}.</span>
`;
}
function renderSlots() {
const scopeSlots = slots
.filter(slot => slot.scopeId === activeScopeId)
.sort((a, b) => (a.orderNumber || 0) - (b.orderNumber || 0));
if (!scopeSlots.length) {
tbody.innerHTML = '<tr><td colspan="5" class="loading-row">В выбранной сетке нет слотов</td></tr>';
return;
}
tbody.innerHTML = scopeSlots.map(slot => `
<tr>
<td>${escapeHtml(String(slot.orderNumber ?? '-'))}</td>
<td>${escapeHtml(trimTime(slot.startTime))}</td>
<td>${escapeHtml(trimTime(slot.endTime))}</td>
<td>${escapeHtml(String(slot.durationMinutes ?? '-'))}</td>
<td class="actions-cell">
<button type="button" class="btn-secondary btn-edit-time-slot" data-id="${slot.id}">Изменить</button>
<button type="button" class="btn-delete btn-delete-time-slot" data-id="${slot.id}">Удалить</button>
</td>
</tr>
`).join('');
}
function renderAssignments() {
if (!assignments.length) {
assignmentsTbody.innerHTML = '<tr><td colspan="3" class="loading-row">Ручных назначений нет</td></tr>';
return;
}
assignmentsTbody.innerHTML = assignments.map(assignment => `
<tr>
<td>${escapeHtml(formatDate(assignment.date))}</td>
<td>${escapeHtml(assignment.scopeName || '-')}</td>
<td class="actions-cell">
<button type="button" class="btn-delete btn-delete-assignment" data-id="${assignment.id}">Убрать</button>
</td>
</tr>
`).join('');
}
async function createScope() {
const name = scopeNameInput.value.trim();
if (!name) {
showAlert('time-slot-alert', 'Введите название ручной сетки', 'error');
return;
}
try {
const saved = await api.post('/api/admin/time-slots/scopes', { name });
scopeNameInput.value = '';
activeScopeId = saved.id;
showAlert('time-slot-alert', 'Сетка времени создана', 'success');
await loadAll();
} catch (error) {
showAlert('time-slot-alert', error.message || 'Ошибка создания сетки времени', 'error');
}
}
async function deleteActiveScope() {
const scope = selectedScope();
if (!scope || scope.systemScope) return;
if (!confirm(`Удалить сетку "${scope.name}" вместе с её слотами и ручными назначениями?`)) return;
try {
await api.delete('/api/admin/time-slots/scopes/' + scope.id);
activeScopeId = defaultScope()?.id || null;
resetForm();
showAlert('time-slot-alert', 'Сетка времени удалена', 'success');
await loadAll();
} catch (error) {
showAlert('time-slot-alert', error.message || 'Ошибка удаления сетки времени', 'error');
}
}
async function saveAssignment(event) {
event.preventDefault();
hideAlert('time-slot-assignment-alert');
const payload = {
date: assignmentDateInput.value,
scopeId: assignmentScopeSelect.value ? Number(assignmentScopeSelect.value) : null
};
if (!payload.date || !payload.scopeId) {
showAlert('time-slot-assignment-alert', 'Выберите дату и ручную сетку', 'error');
return;
}
try {
await api.post('/api/admin/time-slots/date-assignments', payload);
assignmentForm.reset();
showAlert('time-slot-assignment-alert', 'Сетка применена к дате', 'success');
await loadAll();
} catch (error) {
showAlert('time-slot-assignment-alert', error.message || 'Ошибка назначения сетки', 'error');
}
}
async function handleAssignmentTableClick(event) {
const deleteButton = event.target.closest('.btn-delete-assignment');
if (!deleteButton) return;
if (!confirm('Убрать ручное применение сетки на эту дату?')) return;
try {
await api.delete('/api/admin/time-slots/date-assignments/' + deleteButton.dataset.id);
showAlert('time-slot-assignment-alert', 'Ручное назначение удалено', 'success');
await loadAll();
} catch (error) {
showAlert('time-slot-assignment-alert', error.message || 'Ошибка удаления назначения', 'error');
}
}
async function saveSlot(event) {
event.preventDefault();
hideAlert('time-slot-alert');
const payload = {
id: idInput.value ? Number(idInput.value) : null,
orderNumber: Number(orderInput.value),
scopeId: activeScopeId,
startTime: startInput.value,
endTime: endInput.value,
durationMinutes: durationInput.value ? Number(durationInput.value) : null
};
try {
validateSlotPayload(payload);
const id = idInput.value;
await (id
? api.put('/api/admin/time-slots/' + id, payload)
: api.post('/api/admin/time-slots', payload));
showAlert('time-slot-alert', 'Временной слот сохранён', 'success');
resetForm();
await loadAll();
} catch (error) {
showAlert('time-slot-alert', error.message || 'Ошибка сохранения временного слота', 'error');
}
}
async function handleSlotTableClick(event) {
const editButton = event.target.closest('.btn-edit-time-slot');
const deleteButton = event.target.closest('.btn-delete-time-slot');
if (editButton) {
const slot = slots.find(item => String(item.id) === String(editButton.dataset.id));
if (!slot) return;
activeScopeId = slot.scopeId;
title.textContent = 'Редактирование слота';
idInput.value = slot.id;
orderInput.value = slot.orderNumber || '';
startInput.value = trimTime(slot.startTime);
endInput.value = trimTime(slot.endTime);
durationInput.value = slot.durationMinutes || '';
hideAlert('time-slot-alert');
render();
form.scrollIntoView({ behavior: 'smooth', block: 'start' });
return;
}
if (deleteButton) {
if (!confirm('Удалить временной слот?')) return;
try {
await api.delete('/api/admin/time-slots/' + deleteButton.dataset.id);
showAlert('time-slot-alert', 'Временной слот удалён', 'success');
resetForm();
await loadAll();
} catch (error) {
showAlert('time-slot-alert', error.message || 'Ошибка удаления временного слота', 'error');
}
}
}
function validateSlotPayload(payload) {
if (!payload.scopeId) {
throw new Error('Выберите сетку времени');
}
if (!payload.orderNumber || payload.orderNumber <= 0) {
throw new Error('Укажите номер пары');
}
if (!payload.startTime || !payload.endTime) {
throw new Error('Укажите время начала и окончания');
}
if (payload.startTime >= payload.endTime) {
throw new Error('Время начала должно быть раньше времени окончания');
}
}
function fillDurationIfEmpty() {
if (durationInput.value || !startInput.value || !endInput.value || startInput.value >= endInput.value) return;
const [startHour, startMinute] = startInput.value.split(':').map(Number);
const [endHour, endMinute] = endInput.value.split(':').map(Number);
durationInput.value = String((endHour * 60 + endMinute) - (startHour * 60 + startMinute));
}
function resetForm() {
form.reset();
idInput.value = '';
title.textContent = 'Новый слот';
hideAlert('time-slot-alert');
}
function selectedScope() {
return scopes.find(scope => scope.id === activeScopeId) || null;
}
function defaultScope() {
return scopes.find(scope => scope.applyMode === 'DEFAULT') || null;
}
}
function scopeOptionLabel(scope) {
const suffix = scope.applyMode === 'WEEKDAY'
? `, ${dayShort(scope.dayOfWeek)}`
: '';
return `${scope.name} - ${APPLY_MODE_LABELS[scope.applyMode] || scope.applyMode}${suffix}`;
}
function scopeBadgeLabel(scope) {
if (scope.applyMode === 'DEFAULT') return 'Базовая';
if (scope.applyMode === 'WEEKDAY') return dayShort(scope.dayOfWeek);
return 'Ручная';
}
function dayShort(dayOfWeek) {
return DAY_SHORT_LABELS[Number(dayOfWeek)] || '-';
}
function trimTime(value) {
return value ? String(value).slice(0, 5) : '';
}
function formatDate(value) {
if (!value) return '-';
const [year, month, day] = String(value).split('-');
return `${day}.${month}.${year}`;
}