Вы сказали:
1 Добавить мобильную версию где левая часть left-panel в мобильной версии выпадает из меню слева
2 Добавить еще скрол когда много .lesson-item не вмещается в экран Как для в мобильной версии так и десктопе
3 Скрыть #lesson-form форму справа Но информацию от нее выводить верху всегда И добавить кнопку в самом верху по которой вызывается это форма для создания и редактирования #lesson-form
<?
error_reporting(E_ALL);
ini_set("display_errors", 1);
?>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Уроки и домашние задания</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<style>
#left-panel {
height: 100vh;
overflow-y: auto;
}
.lesson-item {
cursor: pointer;
}
.lesson-item:hover,.lesson-item.active {
background: #f0f0f0;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<!-- ЛЕВАЯ ПАНЕЛЬ -->
<div class="col-12 col-md-3 col-lg-2 border-end" id="left-panel">
<h5 class="mt-3">Уроки</h5>
<div id="lesson-list"></div>
</div>
<!-- ПРАВАЯ ПАНЕЛЬ -->
<div class="col-12 col-md-9 col-lg-10 p-4">
<h4 id="form-title">Создание урока</h4>
<form id="lesson-form">
<input type="hidden" id="lesson_id">
<!-- Ученик -->
<div class="mb-3">
<label>Ученик</label>
<select id="student" class="form-control"></select>
</div>
<!-- Предмет / тема -->
<div class="mb-3">
<label>Тема урока</label>
<input type="text" id="topic" class="form-control">
</div>
<!-- Дата -->
<div class="mb-3">
<label>Дата</label>
<input type="date" id="lesson_date" class="form-control">
</div>
<!-- Время -->
<div class="row">
<div class="col">
<label>Начало</label>
<input type="time" id="time_start" class="form-control">
</div>
<div class="col">
<label>Конец</label>
<input type="time" id="time_end" class="form-control">
</div>
</div>
<!-- Повтор -->
<div class="mb-3 mt-3">
<label>Повтор</label>
<select id="repeat_type" class="form-control">
<option value="none">Без повтора</option>
<option value="daily">Каждый день</option>
<option value="weekly">Каждую неделю</option>
</select>
</div>
<button type="submit" class="btn btn-primary">Сохранить</button>
</form>
<hr>
<!-- ДОМАШНИЕ ЗАДАНИЯ -->
<h5>Домашние задания</h5>
<button class="btn btn-success mb-2" id="add-homework">Добавить задание</button>
<table class="table table-bordered">
<thead>
<tr>
<th>Дата</th>
<th>Файлы задания</th>
<th>Файлы ответа</th>
<th></th>
</tr>
</thead>
<tbody id="homework-table"></tbody>
</table>
</div>
</div>
</div>
<script>
/*$('#student').select2({
ajax: {
url: 'api.php',
dataType: 'json',
delay: 250,
data: function (params) {
return {
action: 'search_students',
q: params.term
};
},
processResults: function (data) {
return { results: data };
}
}
});*/
$('#student').select2({
tags: true, // разрешаем пользовательский ввод
tokenSeparators: [','],
ajax: {
url: 'api.php',
dataType: 'json',
delay: 250,
data: function (params) {
return {
action: 'search_students',
q: params.term
};
},
processResults: function (data) {
return { results: data };
}
},
createTag: function (params) {
return {
id: params.term, // пользовательский ввод
text: params.term,
newOption: true
};
}
});
/*
function loadLessons() {
$.getJSON('api.php', {action: 'get_lessons'}, function(data) {
$('#lesson-list').html('');
data.forEach(function(lesson) {
$('#lesson-list').append(
<div class="p-2 lesson-item" data-id="${lesson.id}">
<strong>${lesson.topic}</strong><br>
<small>${lesson.date}</small>
</div>
);
});
});
}*/
function loadLessons() {
$.getJSON('api.php', {action: 'get_lessons'}, function(data) {
$('#lesson-list').html('');
if (data.length === 0) {
$('#lesson-list').html('<p>Уроки отсутствуют</p>');
return;
}
data.forEach(function(lesson) {
$('#lesson-list').append(
<div class="p-2 lesson-item" data-id="${lesson.id}">
<strong>${lesson.topic}</strong><br>
<small>${lesson.date} | ${lesson.student_name}</small>
</div>
);
});
}).fail(function(jqXHR, textStatus, errorThrown){
console.log("Ошибка AJAX:", textStatus, errorThrown);
$('#lesson-list').html('<p>Ошибка загрузки уроков</p>');
});
}
loadLessons();
$('#lesson-form').submit(function(e){
e.preventDefault();
let data = {
action: 'save_lesson',
id: $('#lesson_id').val(),
student_id: $('#student').val(),
topic: $('#topic').val(),
date: $('#lesson_date').val(),
start: $('#time_start').val(),
end: $('#time_end').val(),
repeat: $('#repeat_type').val()
};
$.post('api.php', data, function(){
loadLessons();
alert('Сохранено');
});
});
$(document).on('click','.lesson-item',function(){
let id = $(this).data('id');
// Снимаем класс .active со всех уроков
$('.lesson-item').removeClass('active');
// Добавляем класс .active к выбранному
$(this).addClass('active');
$.getJSON('api.php',{action:'get_lesson',id:id},function(data){
$('#lesson_id').val(data.id);
$('#topic').val(data.topic);
$('#lesson_date').val(data.date);
$('#time_start').val(data.time_start);
$('#time_end').val(data.time_end);
$('#repeat_type').val(data.repeat_type).change();
// Обновление селекта ученика
if(data.student_id && data.student_name){
let newOption = new Option(data.student_name, data.student_id, true, true);
$('#student').append(newOption).trigger('change');
}
loadHomework(id);
});
});
function loadHomework(lesson_id){
$.getJSON('api.php',{action:'get_homework',lesson_id:lesson_id},function(data){
$('#homework-table').html('');
data.forEach(function(hw){
$('#homework-table').append(
<tr>
<td>${hw.created_at}</td>
<td>${hw.task_files.join(', ')}</td>
<td>${hw.answer_files.join(', ')}</td>
<td><button class="btn btn-danger btn-sm">Удалить</button></td>
</tr>
);
});
});
}
$('#add-homework').click(function(){
let lesson_id = $('#lesson_id').val();
if(!lesson_id){
alert('Сначала выберите или создайте урок!');
return;
}
$.post('api.php', {action: 'add_homework', lesson_id: lesson_id}, function(data){
if(data.status === 'ok'){
loadHomework(lesson_id);
}
}, 'json');
});
/*function loadHomework(lesson_id){
$.getJSON('api.php',{action:'get_homework',lesson_id:lesson_id},function(data){
$('#homework-table').html('');
data.forEach(function(hw){
$('#homework-table').append(
<tr data-id="${hw.id}">
<td>${hw.created_at}</td>
<td>${hw.task_files.join(', ')}</td>
<td>${hw.answer_files.join(', ')}</td>
<td><button class="btn btn-danger btn-sm delete-homework">Удалить</button></td>
</tr>
);
});
});
}*/
function loadHomework(lesson_id){
$.getJSON('api.php',{action:'get_homework',lesson_id:lesson_id},function(data){
$('#homework-table').html('');
data.forEach(function(hw){
console.log(hw);
//let task_files = hw.task_files.map(f=><span class="file-item" data-id="${f.id}" data-type="task">${f.file_name} <button class="btn btn-sm btn-danger remove-file">x</button></span>).join('<br>');
//let answer_files = hw.answer_files.map(f=><span class="file-item" data-id="${f.id}" data-type="answer">${f.file_name} <button class="btn btn-sm btn-danger remove-file">x</button></span>).join('<br>');
let task_files = hw.task_files.map(f =>
<span class="file-item" data-id="${f.id}" data-type="task"><a href="/uploads/${f.file_name}" target="_blank" download>${f.file_name}</a>
<button class="btn btn-sm btn-danger remove-file">x</button></span>
).join('<br>');
let answer_files = hw.answer_files.map(f =>
<span class="file-item" data-id="${f.id}" data-type="answer"><a href="/uploads/${f.file_name}" target="_blank" download>${f.file_name}</a>
<button class="btn btn-sm btn-danger remove-file">x</button></span>
).join('<br>');
$('#homework-table').append(
<tr data-id="${hw.id}">
<td>
${hw.created_at}<br>
<input type="text" class="form-control comment-th" value="${hw.comment_th}" placeholder="Комментарий">
</td>
<td>
${task_files}
<input type="file" multiple class="task-files" data-homework-id="${hw.id}">
</td>
<td>
${answer_files}
<input type="file" multiple class="answer-files" data-homework-id="${hw.id}">
</td>
<td>
<button class="btn btn-primary btn-sm save-comment">Сохранить</button>
<button class="btn btn-danger btn-sm delete-homework">Удалить</button>
</td>
</tr>
);
});
});
}
$(document).on('change', '.task-files, .answer-files', function(){
let files = this.files;
let homework_id = $(this).data('homework-id');
let type = $(this).hasClass('task-files') ? 'task' : 'answer';
let formData = new FormData();
formData.append('action','upload_homework_file');
formData.append('homework_id', homework_id);
formData.append('type', type);
for(let i=0;i<files.length;i++){
formData.append('files[]', files[i]);
}
$.ajax({
url:'api.php',
type:'POST',
data: formData,
processData:false,
contentType:false,
success:function(){
loadHomework($('#lesson_id').val());
}
});
// очистка input чтобы можно было загрузить новые файлы
$(this).val('');
});
$(document).on('click','.remove-file',function(){
let file_id = $(this).parent().data('id');
if(!confirm('Удалить файл?')) return;
$.post('api.php',{action:'delete_homework_file',file_id:file_id},function(){
loadHomework($('#lesson_id').val());
});
});
$(document).on('click','.save-comment',function(){
let tr = $(this).closest('tr');
let homework_id = tr.data('id');
let comment = tr.find('.comment-th').val();
$.post('api.php',{
action:'save_homework_comment',
homework_id:homework_id,
comment_th:comment
}, function(data){
if(data.status === 'ok'){
alert('Комментарий сохранён!');
loadHomework($('#lesson_id').val());
} else {
alert('Ошибка сохранения');
}
}, 'json');
});
</script>