На двери одно расписание, на сайте другое: как собрать недельную сетку в одном файле

Только что дошло, отчего на сайтах секций так часто висит расписание прошлого сезона. Люди не ленятся его обновить — они боятся трогать таблицу, которая сидит глубоко в коде страницы.

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

Представим Всеволода. У него небольшая секция скалолазания: детские группы по будням, вечерние занятия для взрослых и воскресный открытый слот.

На двери в зале висит свежий распечатанный лист. Его правят каждый раз, когда тренер уезжает или группу сдвигают на час.

На сайте до сих пор висит прошлогодняя сетка. Новые люди смотрят её, приходят не в то время и недоумевают: зал пустой или занят другой группой.

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

Трекер №018 — генератор расписания для сайта. Его задача простая: визуально собрать недельную сетку и получить готовый код страницы, который вставляют на сайт.

Код страницы — это фрагмент разметки, из которого браузер рисует таблицу. Обычно её правят прямо в тексте страницы. Здесь сетку собирают мышкой, а код получают уже готовым.

Главные свойства такие же, как у других трекеров каталога:

На компьютере с Windows и телефоне с Android файл открывается прямо в браузере. Для iPhone его сначала нужно загрузить на сайт и открывать по адресу.

Интерфейс из двух колонок. Слева — дерево «категории → расписания». Справа — редактор сетки: время по вертикали, дни недели по горизонтали.

Категории и расписания хранятся в хранилище браузера — встроенной базе на самом устройстве. Расписание привязано к категории, поэтому сетки раскладывают по смыслу, а не сваливают в одну кучу.

Всеволод открывает файл и создаёт категорию. В примерах каталога это «Учёба» или «Работа»; ему ближе своё название — «Учебный сезон».

Внутри категории он создаёт расписание, например «Обычная неделя». По умолчанию появляются семь временных слотов с 09:00 до 15:00 — стартовая сетка, её сразу подгоняют под зал.

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

Временные слоты правят прямо в полях. Если добавить слот, время подставится само: плюс час к последнему. Детские группы идут днём, взрослые — вечером, поэтому он добавляет вечерние слоты. Ненужный слот удаляют крестиком: занятия ниже сдвинутся корректно.

В узком окне левая панель складывается, а таблица прокручивается вбок. Заголовки дней при прокрутке остаются на месте. Поля времени при клике сами выделяют текст.

В ячейке нажимают «+» и добавляют занятие. У него три поля:

В одной ячейке помещается до трёх занятий — для параллельных групп или подгрупп.

Всеволод раскладывает будни: днём — детские группы, вечером — взрослые. В воскресенье ставит открытый слот.

Окно занятия закрывается по Enter — так сохраняют в диалогах. Если передумали, достаточно кликнуть по затемнению вокруг окна.

Расписание можно переименовать или дублировать целиком. Полная копия удобна для чётной и нечётной недели или праздничного варианта: правишь копию, а не собираешь всё заново.

Удаление идёт с подтверждением. Если удалять целую категорию, файл предупредит, сколько вложенных расписаний уйдёт вместе с ней.

В середине недели тренер не сможет провести вечернюю группу. На бумаге у двери Всеволод привык зачеркнуть строку и подписать новое. В сетке это делается иначе.

Занятие можно перетащить в другую ячейку — оно переедет. Если нужно не перенести, а скопировать, при перетаскивании держат Ctrl или Cmd.

Есть и внутренний буфер: кнопка копирования запоминает занятие, а следующий «+» может сразу вставить его в новую клетку.

Важный момент: автосохранения нет. Сетку нужно сохранить самому — кнопкой «Сохранить» или сочетанием Ctrl+S. Если закрыть вкладку и забыть это сделать, правки не запишутся.

Когда сетка готова, Всеволод нажимает кнопку генерации. Файл показывает предпросмотр и текстовое поле с кодом страницы. Копируется всё одной кнопкой.

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

Код автономный: его вставляют на сайт или в конструктор страниц, который принимает блок с кодом страницы. Владелец секции или тот, кто ведёт сайт, заменяет старый блок новым — и посетители видят ту же сетку, что на двери.

Блок на живом сайте статичный. Чтобы поменять публичную версию, снова открывают файл, правят сетку, сохраняют, генерируют код и заменяют старый фрагмент.

Чтобы не держать единственную версию в браузере одного компьютера, есть выгрузка. Экспорт сохраняет всю базу — категории и расписания — в файл обмена данными. Обычно такой файл называют JSON: это обычный текстовый файл, где сведения записаны в структурированном виде. В имени файла есть дата, поэтому копии не путаются.

Импорт загружает данные обратно, проверяет формат и сливает их с тем, что уже есть.

Всеволод оставляет копию себе и отдаёт файл второму тренеру: тот открывает №018 у себя и видит ту же сетку.

Автосохранения нет — это нужно помнить каждый раз, когда правите сетку.

Сгенерированный блок на сайте не меняется сам. Это не онлайн-запись и не личный кабинет для клиентов: человек не выбирает слот и не записывается. Файл помогает собрать и выложить недельную сетку, а не принять заявку.

И это не кнопка «обновить сайт сама собой». Сначала правка в файле, потом генерация, потом замена старого кода. Зато таблицу в коде страницы больше не нужно править руками: сетку собирают визуально, а на сайт уходит готовый фрагмент.

А у вас расписание сейчас как публикуется: фотографией распечатки, таблицей в документе или уже на сайте? Интересно, что в итоге меньше путает новых людей.