/
Cooolprogrammers
/
web-nodejs-labs
Обзор
Документация
Войти
/
Cooolprogrammers
/
web-nodejs-labs
Код
Запросы
0
Задачи
Пакеты
0
Релизы
0
Аналитика
Безопасность
main
public/lab11/task3/schedule.html
237 строк
11 KB
darkvoid6@mail.ru
ЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫ
18 дек 2025, 07:59
18 дек 2025, 07:59
f2c4f06
Код
Авторство
О чём код?
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Расписание (Админка)</title> <link rel="stylesheet" href="style.css"> </head> <body> <nav class="navbar"> <a href="index.html" class="nav-brand">📚 SecureEdu</a> <div class="nav-links"> <a href="index.html">Справочники</a> <a href="schedule.html" class="active">Расписание</a> </div> <div class="user-panel"> <div id="userInfo" class="user-info">Гость</div> <button id="authBtn" class="btn btn-outline" style="width:auto" onclick="openLoginModal()">Войти</button> </div> </nav> <div class="container"> <div class="page-header"> <h1 style="color: var(--primary);">📅 Расписание занятий</h1> <div style="display:flex; gap:1rem"> <button class="btn btn-outline" style="width:auto" onclick="loadSchedule()">Обновить</button> <button id="addLessonBtn" class="btn btn-primary hidden" style="width:auto" onclick="openLessonModal()">+ Добавить занятие</button> </div> </div> <div style="background: var(--bg-card); border-radius: 12px; border: 1px solid var(--border); overflow: hidden;"> <table class="schedule-table"> <thead> <tr> <th>День</th> <th>Время</th> <th>Предмет</th> <th>Группа</th> <th>Преподаватель</th> <th id="actionsHead" class="hidden">Действия</th> </tr> </thead> <tbody id="scheduleBody"></tbody> </table> </div> </div> <!-- Модалка ВХОДА --> <div id="loginModal" class="modal hidden"> <div class="modal-content"> <h2 style="color: var(--primary); margin-bottom: 20px;">🔐 Вход</h2> <form id="loginForm"> <div class="form-group"> <input type="text" name="login" placeholder="Логин" required style="background: #0f172a; color: var(--text-main);"> </div> <div class="form-group"> <input type="password" name="password" placeholder="Пароль" required style="background: #0f172a; color: var(--text-main);"> </div> <div style="display: flex; gap: 10px;"> <button type="submit" class="btn btn-primary">Войти</button> <button type="button" class="btn btn-outline" onclick="closeLoginModal()">Отмена</button> </div> </form> </div> </div> <!-- Модалка УРОКА --> <div id="lessonModal" class="modal hidden"> <div class="modal-content" style="width: 500px;"> <h2 id="lessonModalTitle" style="color: var(--primary); margin-bottom: 20px;">Занятие</h2> <form id="lessonForm"> <input type="hidden" name="id"> <div class="form-group"> <label style="color: var(--text-main);">День недели</label> <select name="day_of_week" required style="background: #0f172a; color: var(--text-main); border: 1px solid var(--border);"> <option value="1">Понедельник</option> <option value="2">Вторник</option> <option value="3">Среда</option> <option value="4">Четверг</option> <option value="5">Пятница</option> <option value="6">Суббота</option> </select> </div> <div style="display:flex; gap:1rem"> <div class="form-group" style="flex:1"> <label style="color: var(--text-main);">Начало</label> <input type="time" name="start_time" required style="background: #0f172a; color: var(--text-main); border: 1px solid var(--border);"> </div> <div class="form-group" style="flex:1"> <label style="color: var(--text-main);">Конец</label> <input type="time" name="end_time" required style="background: #0f172a; color: var(--text-main); border: 1px solid var(--border);"> </div> </div> <div class="form-group"> <label style="color: var(--text-main);">Тип занятия</label> <input type="text" name="lesson_type" placeholder="Лекция/Практика" required style="background: #0f172a; color: var(--text-main); border: 1px solid var(--border);"> </div> <!-- Словари загружаются JS-ом --> <div class="form-group"> <label style="color: var(--text-main);">Предмет</label> <select name="subject_id" id="subjSelect" required style="background: #0f172a; color: var(--text-main); border: 1px solid var(--border);"></select> </div> <div class="form-group"> <label style="color: var(--text-main);">Группа</label> <select name="group_id" id="groupSelect" required style="background: #0f172a; color: var(--text-main); border: 1px solid var(--border);"></select> </div> <div class="form-group"> <label style="color: var(--text-main);">Преподаватель</label> <select name="teacher_id" id="teacherSelect" required style="background: #0f172a; color: var(--text-main); border: 1px solid var(--border);"></select> </div> <div class="form-group"> <label style="color: var(--text-main);">Аудитория</label> <select name="classroom_id" id="roomSelect" required style="background: #0f172a; color: var(--text-main); border: 1px solid var(--border);"></select> </div> <div style="display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px;"> <button type="submit" class="btn btn-primary">Сохранить</button> <button type="button" class="btn btn-outline" onclick="document.getElementById('lessonModal').classList.add('hidden')">Отмена</button> </div> </form> </div> </div> <script src="script.js"></script> <script> document.addEventListener('DOMContentLoaded', () => { initApp(); loadSchedule(); loadDictionaries(); // Загружаем списки для формы }); async function loadDictionaries() { const res = await apiCall('/api/lab10/schedule/dictionaries', 'GET'); if (!res.ok) return; const fill = (id, arr, labelKey = 'name') => { const el = document.getElementById(id); el.innerHTML = arr.map(i => `<option value="${i.id}" style="background: #0f172a; color: var(--text-main);">${i[labelKey] || i.number}</option>`).join(''); }; fill('subjSelect', res.data.subjects); fill('groupSelect', res.data.groups); fill('teacherSelect', res.data.teachers); fill('roomSelect', res.data.classrooms, 'number'); } async function loadSchedule() { const res = await apiCall('/api/lab10/schedule', 'GET'); const tbody = document.getElementById('scheduleBody'); tbody.innerHTML = ''; const isAdmin = currentUser && currentUser.role === 'admin'; if (isAdmin) { document.getElementById('addLessonBtn').classList.remove('hidden'); document.getElementById('actionsHead').classList.remove('hidden'); } const days = ['', 'ПН', 'ВТ', 'СР', 'ЧТ', 'ПТ', 'СБ']; res.data.forEach(row => { tbody.innerHTML += ` <tr style="border-bottom: 1px solid var(--border);"> <td><b style="color: var(--primary);">${days[row.day_of_week]}</b></td> <td>${row.start_time} - ${row.end_time}</td> <td>${row.subject_name} <br><small style="color: var(--text-muted);">${row.lesson_type}</small></td> <td>${row.group_name}</td> <td>${row.teacher_name} <br><small style="color: var(--text-muted);">Ауд. ${row.classroom_number}</small></td> ${isAdmin ? ` <td> <button class="btn btn-outline" style="width:40px; padding:5px; border-color: var(--danger); color: var(--danger);" onclick="deleteLesson(${row.id})">🗑️</button> </td>` : ''} </tr> `; }); } function openLessonModal() { document.getElementById('lessonModal').classList.remove('hidden'); document.getElementById('lessonForm').reset(); document.getElementById('lessonForm').elements.id.value = ''; } document.getElementById('lessonForm').addEventListener('submit', async (e) => { e.preventDefault(); const body = Object.fromEntries(new FormData(e.target)); const method = body.id ? 'PUT' : 'POST'; const url = body.id ? `/api/lab10/schedule/${body.id}` : '/api/lab10/schedule'; const res = await apiCall(url, method, body); if (res.ok) { document.getElementById('lessonModal').classList.add('hidden'); loadSchedule(); } else { alert('Ошибка: ' + res.data.error); } }); async function deleteLesson(id) { if (!confirm('Удалить занятие?')) return; const res = await apiCall(`/api/lab10/schedule/${id}`, 'DELETE'); if (res.ok) loadSchedule(); } // Функции для модалки входа (если их нет в script.js) function openLoginModal() { document.getElementById('loginModal').classList.remove('hidden'); } function closeLoginModal() { document.getElementById('loginModal').classList.add('hidden'); } document.getElementById('loginForm').addEventListener('submit', async (e) => { e.preventDefault(); const formData = new FormData(e.target); const data = Object.fromEntries(formData.entries()); const res = await apiCall('/api/lab10/login', 'POST', data); if (res.ok) { closeLoginModal(); initApp(); loadSchedule(); } else { alert('Ошибка входа: ' + (res.data.error || 'Неверные данные')); } }); </script> </body> </html>