Создание планировщика управления недвижимостью с помощью Bryntum с использованием ванильного JavaScript
Компонент Bryntum Scheduler — это виджет управления ресурсами JavaScript, который вы можете использовать для управления сложными расписаниями. Это многофункциональное приложение с отличной производительностью, и вы можете настроить его в соответствии со своими потребностями. В этом руководстве мы создадим приложение для управления недвижимостью, чтобы отслеживать бронирование различных квартир, сдаваемых внаем, с помощью планировщика Bryntum. Наш ванильный планировщик JavaScript будет иметь следующие функции:
- Цены на недвижимость отличаются за ночь, и даты могут быть отложены, когда недвижимость недоступна для бронирования.
- Пользователь может добавлять новые заказы, щелкая и перетаскивая курсор в пустые части строк планировщика. Цена проживания будет рассчитана автоматически на основе количества дней и цены за ночь.
- Даты бронирования не могут пересекаться.
- Пользователь может указать детали бронирования: имя клиента, продолжительность пребывания, стоимость и количество гостей.
- Сводная строка, показывающая количество бронирований или количество гостей в день. Пользователь может переключаться между параметрами сводки с помощью кнопок в верхней части планировщика. Можно выбрать несколько строк свойств, чтобы вычислить комбинированные итоговые значения строк для выбранных свойств.
Когда вы закончите, у вас будет планировщик управления недвижимостью, который выглядит так, как показано на изображении ниже и в этом коротком демонстрационном видео.
Или вы можете попробовать живое демо здесь.
Начиная
Для начала мы выполним шаги, описанные в следующем руководстве из документации Bryntum: Начало работы с Bryntum Scheduler с Vanilla JS. Мы будем использовать файлы из папки пробного дистрибутива. Если вы хотите вместо этого использовать npm, вы можете следовать этому руководству из документации.
Загрузите папку с дистрибутивом бесплатной пробной версии планировщика Bryntum версии 5.2.0 здесь. Если вы уже купили лицензионную версию, вы можете войти здесь, чтобы получить ее.
Разархивируйте папку скачанного дистрибутива на вашем ПК. Мы будем использовать следующие папки для создания нашего приложения для управления недвижимостью:
Мы скопируем файлы и папки из них в новую папку для нашего приложения планировщика управления собственностью. В корневой папке вашего проекта создайте папку с именем schedulerDist и добавьте следующие файлы и папки из папки дистрибутива Bryntum Scheduler:
В папке примеров нам нужна только папка браузера и файлы shared.css, shared.css.map и shared.scss.
Теперь добавьте следующие файлы и папки из папки дистрибутива Bryntum Scheduler /examples/booking/ в корневую папку вашего проекта. Это папка, содержащая код для демонстрации, которую мы создадим в этом руководстве:
В папке lib замените импорт файлов в DailyRate.js, DaySelector.js, PropertyModel.js и ReservationModel.js, как показано ниже:
В папке ресурсов выполните следующие поиск и замену файлов импорта:
Создайте файл index.html в корневой папке вашего приложения и добавьте в него следующие строки:
Теперь создайте файл app.js в корневой папке вашего приложения. С этого момента нам нужно будет работать только с этим файлом, чтобы создать планировщик управления свойствами.
Мы используем модули JavaScript, чтобы разделить код на отдельные модули, которые можно импортировать и экспортировать, поэтому для запуска кода нам понадобится локальный HTTP-сервер. Чтобы получить локальный сервер с живой перезагрузкой, вы можете установить пакет npm Live Server. Если вы используете VS Code, вы можете установить расширение Live Server.
Создание экземпляра Планировщика
Чтобы создать планировщик, давайте сначала импортируем все необходимые нам классы из папки schedulerDist/build/ и папки lib в корне нашего приложения:
Теперь давайте создадим экземпляр нашего планировщика и настроим его со встроенными свойствами:
Свойство appendTo указывает идентификатор элемента DOM, к которому планировщик будет добавлен в качестве дочернего элемента. В файле index.html есть элемент ‹div› с идентификатором контейнера.
Если вы сейчас откроете сервер разработки в своем браузере, вы увидите планировщик Bryntum:
Теперь мы приступим к настройке нашего планировщика с дополнительными свойствами, чтобы сделать его полезным приложением для управления бронированием.
Настройка диапазона дат и столбцов
Давайте установим диапазон дат, отображаемый в верхней части планировщика, и создадим столбец для наших ресурсов, которые будут нашими свойствами размещения.
Добавьте в планировщик следующие свойства:
ViewPreset описывает тип представления временной шкалы. В этом случае мы будем использовать представление дня и месяца для календаря. ResourceImagePath содержит изображения свойств размещения, которые будут отображаться в столбце свойств, который мы создадим. Мы устанавливаем начальную и конечную дату представления календаря, используя объекты JavaScript Date.
Добавьте следующее свойство столбцов, чтобы определить наше свойство размещения:
Мы устанавливаем тип resourceInfo, чтобы отображать основную информацию для нашего ресурса планировщика, которая будет свойствами размещения.
Теперь вы увидите столбец «СВОЙСТВА» в своем планировщике, а заголовок календаря будет красиво отформатирован:
Получение данных с помощью Crud Manager
Планировщик включает в себя crudManager для загрузки и сохранения удаленных данных. У него есть свойство loadUrl, которое мы будем использовать для заполнения хранилищ данных планировщика. Добавьте в планировщик следующее свойство crudManager:
Свойство loadUrl определяет источник данных URL, которым является файл data.json в папке данных. Вы также можете настроить crudManager для синхронизации изменений данных с определенным внутренним URL-адресом. Для получения дополнительной информации вы можете прочитать следующее руководство в нашей документации: Сохранение данных.
Мы также определяем три хранилища данных, которые будем использовать. Они используют модели и хранилища, определенные в папке ./lib. ResourceStore содержит данные о наших объектах размещения. Он использует пользовательскую модель PropertyModel, которая расширяет планировщик ResourceModel. Он добавляет к нему дополнительное поле сна. Это дополнительное свойство используется в файле data/data.json в строках ресурсов. Он определяет количество людей, которое может вместить каждый объект недвижимости.
EventStore содержит данные о наших бронированиях. Он использует пользовательскую модель ReservationModel, которая расширяет планировщик EventModel. Он добавляет дополнительные поля guest и pricePerNight. Эти дополнительные свойства используются в файле data/data.json в строках событий.
ResourceTimeRangeStore содержит данные о временных диапазонах ресурсов, которые используются для отображения цен на дату и свойство в календарной части нашего планировщика. Класс DailyRateStore расширяет класс планировщика RecurringTimeSpansMixin, добавляя в планировщик функциональность повторяющихся промежутков времени. Он использует модель DailyRateModel с полем pricePerNight. У него также есть метод getPricePerNightFor, который мы будем использовать для получения цены за ночь для объекта размещения при создании нового бронирования на определенную дату.
В файле data/data.json в строках resourceTimeRanges есть поле pricePerNight и recurrenceRule, описывающее дни, в которые применяются цены. Также есть поле ExceptionDates, которое показывает дни, когда не следует применять цены. Они обозначают дни, когда недвижимость недоступна для бронирования.
Теперь вы увидите свойства и бронирования в своем приложении планировщика бронирования:
Цены на дату и недвижимость не отображаются. Давайте это исправим.
Отображение цен на дату и свойство
Во-первых, давайте увеличим высоту строки и ширину полосы бронирования. Добавьте в планировщик следующие свойства:
Теперь добавьте в планировщик следующие свойства:
Свойство timeRanges используется для визуализации временного диапазона. В этом случае он имитирует время затенения в прошлом. Отображаемый диапазон времени определяется в свойстве timeRanges в файле data/data.json. У него есть свойство cls, которое является пользовательским классом CSS. Затененный класс определен в resources/app.css.
Теперь добавьте в планировщик следующие три свойства под свойством endDate:
Свойства zoomOnTimeAxisDoubleClick и zoomOnMouseWheel предотвращают увеличение или уменьшение текущего представления календаря. Свойство allowOverlap предотвращает перекрытие резервирований. Попробуйте перенести бронирование на дату, когда в вашем приложении-планировщике есть другое бронирование. Это не сработает. Кроме того, вы не можете перемещать заказы в заштрихованной области. Затененный слой предназначен для предотвращения движущихся событий в прошлом.
Вы можете продлить продолжительность бронирования, перетащив края панели бронирования. Мы можем улучшить взаимодействие с пользователем, увеличив ширину панели бронирования на однодневные единицы при изменении ее размера. Добавьте в планировщик следующие свойства под свойством barMargin:
Теперь, когда вы изменяете размер бронирования, ширина увеличивается до следующего дня. Вы не можете, например, заказать полдня.
Вы можете заметить, что мы пока не можем добавлять новые заказы. Добавим эту функцию.
Добавление пользовательской функции добавления бронирования
Давайте добавим пользовательскую функцию, позволяющую пользователю добавлять новые заказы, щелкая и перетаскивая курсор в пустые части строк планировщика. Цена проживания будет рассчитана автоматически на основе количества дней и цены за ночь. Подсказка покажет рассчитанную стоимость и продолжительность пребывания при создании бронирования.
Добавьте следующее свойство в свой планировщик внутри свойства features:
Класс, определяющий эту пользовательскую функцию, находится в lib/DaySelector.js.
Попробуйте добавить событие. Вы заметите, что появится редактор событий. Вы также можете получить доступ к редактору событий, щелкнув правой кнопкой мыши существующее бронирование. Редактор событий пока не содержит всех необходимых нам полей, таких как количество гостей. Мы настроим это дальше.
Настройка всплывающего меню редактирования событий
Чтобы настроить всплывающее окно редактирования события, мы будем использовать функцию eventEdit. Добавьте следующую функцию eventEdit в свой планировщик внутри свойства functions:
Мы устанавливаем поля, которые мы не хотим, в false и определяем поля, которые мы хотим. Для полей «НОЧЕЙ» и «КОЛИЧЕСТВО ГОСТЕЙ» мы устанавливаем мин. единицу. Поле «КОЛИЧЕСТВО ГОСТЕЙ» по умолчанию имеет значение два и является обязательным полем.
Давайте также отключим некоторые функции, которые нам не нужны для этого урока. Добавьте следующие свойства в свойство features:
Если вы создадите бронирование сейчас, вы заметите, что поле «ЦЕНА ЗА НОЧЬ (долл. США)» пусто. Давайте сделаем так, чтобы цена за ночь за первый забронированный день автоматически заполнялась. Добавьте в свой планировщик следующий метод под свойством crudManager:
Событие beforeEventAdd запускается перед добавлением события. Мы добавляем цену за ночь в eventRecord с помощью метода getPricePerNightFor, определенного в lib/DailyRateStore.js.
Теперь, если вы добавите задачу, вы увидите, что поле «ЦЕНА ЗА НОЧЬ (долл. США)» заполняется автоматически.
Изменение текста панели бронирования
Панель бронирования в настоящее время отображает только имя гостя. Давайте изменим его, чтобы он также отображал количество гостей.
Добавьте в планировщик следующий метод eventRenderer под методом onBeforeEventAdd:
Функция eventRenderer вызывается при рендеринге события в планировщике. Возвращается строка, которая создает HTML-код, отображаемый на панели бронирования. Добавляем название бронирования и количество гостей. Мы используем иконку пользователя Font Awesome, чтобы указать количество гостей. Версия Font Awesome, используемая Bryntum, имеет префикс b-fa вместо fa, чтобы предотвратить конфликты с другими версиями Font Awesome на странице. Источник этих значков находится в schedulerDist/build/fonts, и они импортируются как шрифт в /schedulerDist/build/scheduler.stockholm.css.
Теперь вы увидите значок пользователя на панели бронирования с числом, обозначающим количество гостей.
Настройка всплывающей подсказки события
При наведении курсора на бронирование появляется всплывающая подсказка по умолчанию, в которой указаны даты начала и окончания бронирования. Давайте настроим его для отображения даты заезда и продолжительности пребывания. Добавьте следующую функцию eventTooltip в свой планировщик внутри свойства functions:
Функция eventTooltip позволяет настроить шаблон, используемый для отображения всплывающей подсказки. Метод шаблон получает в качестве аргументов данные о событии. Мы используем аргумент eventRecord для отображения строки, отображающей нужные нам данные о бронировании.
Добавление итоговой строки
Последняя функция, которую мы добавим, — это итоговая строка, показывающая количество бронирований или количество гостей в день.
Добавьте следующую сводную функцию в свой планировщик внутри свойства functions:
Функция Сводка отображает сводную строку в нижнем колонтитуле сетки. Он отображает количество бронирований или общее количество гостей, в зависимости от значения группы summaryButton, которую мы вскоре создадим.
Давайте создадим панель инструментов в верхней части нашего планировщика, которая имеет группу summaryButton с переключаемым значением. Добавьте в планировщик следующее свойство:
SummaryButton имеет переключаемое значение, которое может быть либо количеством, либо гостями. При нажатии на один из них значение обновляется путем обновления суммарного значения функции.
Также есть кнопка «Суммировать выбранные строки», которая позволяет нам рассчитать количество забронированных объектов или гостей только для выбранных строк. Чтобы это работало, нам нужно определить метод onSumToggle. Добавьте следующий метод onSumToggle в свой планировщик под методом eventRenderer:
Теперь вы сможете определить количество забронированных объектов или гостей в день для всего планировщика или выбранных строк.
Следующие шаги
Этот учебник дает вам отправную точку для создания собственного планировщика управления недвижимостью с помощью Bryntum с использованием ванильного JavaScript. Есть много способов, которыми вы можете добавить или улучшить планировщик управления недвижимостью. Например, хорошей дополнительной функцией, которую можно добавить, будет ограничение количества гостей для бронирования на основе максимального количества людей, которое может разместить объект размещения. Если у вас есть какие-либо вопросы по этому руководству или вы создали что-то подобное, мы будем рады услышать ваши отзывы.
