Reservia Admin
Приложение для администрации и резервирования столов в заведениях
Стэк технологий
- React
- TailwindCSS
- ReactRouter
- NextJS
- TypeScript
Интересные моменты в разработке
Редактор карты
В проекте был предусмотрен редактор карты для заведений, до этого проекта не сталкивался с canvas в таком виде.
Нужно было реализовать регистер моделей и их рендер на карте, помимо этого на заднем фоне есть сетка. Помимо этого было интересно оптимизировать рендер, например, изначально рендерились все модели и была добавлена проверка на видимость моделей и отрисовывались только те, которые находятся в зоне видимости.
Модели добавлялись через нажатие на модель и нажатие на карту. Модель следует за курсором до нажатия на карту или отмены добавления модели. Второй вариант, это зажатие левой кнопки мыши на модели и перетаскивания модели на карту.
Помимо этого на канвасом есть оверлей, который отвечает за контекстное меня для столов, кнопки для управления зумом и прочее.
Таймлайн
Таймлайн, один из вариантов отображения бронирования для заведений. Здесь из интересного, это динамический отрезок времени, который вычисляется из расписания ресторана, столы и их названия из редактора карты, столы можно вкл./выкл. в любое время. Бронирования можно перетаскивать горизонтально, чтобы сменить время бронирования. Также вертикальное перетаскивание, позволяет сменить стол при необходимости, также можно изменить начало и/или конец бронирования, потянув за крайние стороны бронирования.
Из интересного была фича для скролла до бронирований. Был такой кейс, что смена в заведении длинная, и некоторые брони начинают не вмещаться на экране и тогда в строках столов появлялась кнопка в цвет статуса бронирования для быстрого перемещения к ней.
