Кто может помочь создать скрипт для организации и компоновки блоков в расписании уроков? 

Здравствуйте. Я разработал верстку для расписания, которая включает следующий код: <br/> <pre><code class="php">$body .= '
			&lt;div class="lessons-per-group" id="mask-per-day"&gt;
				&lt;div class="lessons-per-grid-day"&gt;
					&lt;div class="lessons-per-time"&gt;&lt;/div&gt;
					&lt;div class="lessons-per-content"&gt;';
		
		$z = 2;

		foreach($lessons as $lesson){

			if(($lesson['time'] &gt;= $time1) AND ($lesson['time'] &lt;= $time2)){

				$top = ($lesson['time'] - $time1) / 1800 * 22;

				$height = $lesson['duration'] / 30 * 22;

				$time_end = $lesson['time'] + $lesson['duration'] * 60;

				$body .= '
					&lt;div class="body-table-block-lesson" style="height:'.$height.'px; inset: '.$top.'px  0px 0px 0%;border-color:'.$_LTYPES[$lesson['type']]['color'].';z-index:'.$z.';width:'.$w.'%;" data-admin="'.$lesson['admin'].'" data-user="'.$lesson['user'].'" data-type="'.$lesson['type'].'" data-status="'.$lesson['status'].'" data-lessonid="'.$lesson['id'].'"&gt;
						&lt;b&gt;'.$_LTYPES[$lesson['type']]['title'].'&lt;/b&gt; ('.date('H:i',$lesson['time']).' - '.date('H:i',$time_end).')
		            	'.$lsinfo.'
		            &lt;/div&gt;';
			}
		}

		$body .= '&lt;/div&gt;
				&lt;/div&gt;';</code></pre> <br/> и такие CSS-стили: <br/> <pre><code class="css">.lessons-per-group{
	position: absolute;
	top: 0;
	width: 100%;
	bottom: 0;
	z-index: 1;
}
.lessons-per-grid-day{
	display: grid;
	grid-template-columns: 85px auto;
	padding-top: 35.5px;
	height: calc(100% - 35.5px);
}.body-table-block-lesson{
	position: absolute;
	border-width: 1px;
	padding: 1px;
	overflow: hidden;
	right: 0;
	border-bottom-width: 6px;
	box-sizing: border-box;
	border-style: solid;
	background-color: white;
	border-bo
  • 17 сентября 2024 г. 6:03
Ответы на вопрос 2 
Здравствуйте! Изучив ваш код, я вижу, что у вас уже есть основа для создания расписания уроков на PHP и CSS. Давайте добавим необходимую логику для компоновки блоков в расписании на основе заданного времени и длительности уроков.

### PHP Код для создания расписания

Ваш текущий код уже представляет структуру, но чтобы добавить функциональность и организовать уроки в расписании, вы можете воспользоваться следующим улучшением:

```php
$body .= '
    <div class="lessons-per-group" id="mask-per-day">
        <div class="lessons-per-grid-day">
            <div class="lessons-per-time"></div>
            <div class="lessons-per-content">';

$z = 2; // z-index для раскладки блоков
$w = 100; // ширина блока урока (можно менять)

foreach ($lessons as $lesson) {
    // Проверка на соответствие времени
    if (($lesson['time'] >= $time1) && ($lesson['time'] <= $time2)) {
        // Расчет позиций и высоты
        $top = ($lesson['time'] - $time1) / 1800 * 22; // Преобразование времени в пиксели
        $height = $lesson['duration'] / 30 * 22; // Преобразование длительности в пиксели
        $time_end = $lesson['time'] + $lesson['duration'] * 60; // Время конца урока

        // Добавление блока урока в расписание
        $body .= '
            <div class="body-table-block-lesson" style="height:' . $height . 'px; inset: ' . $top . 'px 0 0 0; border-color:' . $_LTYPES[$lesson['type']]['color'] . '; z-index:' . $z . '; width:' . $w . '%;" data-admin="' . $lesson['admin'] . '" data-user="' . $lesson['user'] . '" data-type="' . $lesson['type'] . '" data-status="' . $lesson['status'] . '" data-lessonid="' . $lesson['id'] . '">
                <b>' . $_LTYPES[$lesson['type']]['title'] . '</b> (' . date('H:i', $lesson['time']) . ' - ' . date('H:i', $time_end) . ')
                ' . $lsinfo . '
            </div>';
    }
}

$body .= '
            </div>
        </div>
    </div>';
```

### CSS стили для визуализации

Ваши стили уже выглядят хорошо, но убедитесь, что они правильно применены ко всем элементам. Добавьте следующие стили для оформления блоков уроков:

```css
.body-table-block-lesson {
    position: absolute;
    border: 1px solid; /* Убираем border-width, вместо этого теперь используется border */
    padding: 5px; /* Добавлено немного внутреннего отступа */
    background-color: rgba(255, 255, 255, 0.8); /* Полупрозрачный фон */
    border-radius: 4px; /* Скругленный угол */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Тень для блоков*/
    transition: background-color 0.2s; /* Плавный переход фона */
}

.body-table-block-lesson:hover {
    background-color: rgba(255, 255, 200, 0.5); /* Эффект при наведении */
}
```

### Примечания
1. **Перекрытие блоков**: Возможно, вам нужно будет реализовать логику для обработки перекрывающихся уроков (например, изменением z-index или объединением блоков).
   
2. **Адаптивность**: Если вы планируете использовать расписание на разных устройствах, рекомендуется также рассмотреть возможность использования медиа-запросов для адаптивной верстки.

3. **Динамическая загрузка**: Если уроки загружаются динамически, вы можете рассмотреть AJAX для обновления расписания без перезагрузки страницы.

Если у вас есть конкретные требования или сложности, пожалуйста, дайте знать, и я помогу вам более подробно!
не понимаю зачем такие сложности, если теоретически можно заставить grid делать всё самостоятельно <br/> <br/> понятно, этот пример ещё нужно доработать напильником, но основная мысль, думаю, ясна
Похожие вопросы
    Показать ещё