Загрузка данных

Виджет Booking принимает один массив данных через объект конфигурации:

• data — массив объектов карточек с правилами слотов

подсказка

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

Подготовка примера набора данных

Храните данные карточек в отдельном файле, чтобы использовать набор данных на разных страницах и в тестах. Каждый объект карточки включает поля идентификации, поля отображения и массив slots, который определяет правила доступности.

Следующий фрагмент кода определяет три объекта карточек в модуле data.js. Вспомогательная функция getDate(addDays, hours, minutes) возвращает временную метку для даты относительно сегодняшнего дня (например, getDate(0, 12) — это сегодня в 12:00 по местному времени):

data.js

// возвращает временную метку для "сегодня + addDays" в указанные часы:минуты (местное время)
function getDate(addDays, hours = 0, minutes = 0) {
    const date = new Date();
    date.setDate(date.getDate() + addDays);
    date.setHours(hours, minutes, 0, 0);
    return date.getTime();
}

const data = [
    {
        id: "ee828b5d-a034-420c-889b-978840015d6a",
        title: "Natalie Tyson",
        category: "Therapist",
        subtitle: "2 years of experience",
        details: "Cleveland Clinic\n9500 Euclid Ave",
        preview: "https://snippet.dhtmlx.com/codebase/data/booking/01/img/01.jpg",
        price: "$35",
        review: {
            stars: 4,
            count: 120
        },
        slots: [
            {
                from: 9, to: 20,
                days: [1, 2, 3, 4, 5]
            },
            {
                from: 10, to: 18,
                days: [6, 0]
            }
        ]
    },
    {
        id: "5c9b64ad-1830-4e5b-a5f9-8acea10706df",
        title: "James Anderson",
        category: "Allergist",
        subtitle: "3 years of experience",
        details: "UCLA Medical Center\n57 Westwood Plaza",
        preview: "https://snippet.dhtmlx.com/codebase/data/booking/01/img/11.jpg",
        price: "$30",
        review: {
            stars: 4,
            count: 64
        },
        slotSize: 45,
        slotGap: 10,
        slots: [
            {
                from: "9:15", to: 17,
                days: [1, 2, 3, 4, 5]
            }
        ]
    },
    {
        id: "9b037564-77be-429f-b719-eebbe499027a",
        title: "Emma Johnson",
        category: "Cardiologist",
        subtitle: "2 years of experience",
        details: "Stanford Health Care\n1468 Madison Ave",
        preview: "https://snippet.dhtmlx.com/codebase/data/booking/01/img/03.jpg",
        price: "$25",
        review: {
            stars: 5,
            count: 10
        },
        slots: [
            {
                from: 14, to: 17,
                size: 30, gap: 10
            },
            {
                from: 12, to: 19,
                size: 50, gap: 20,
                days: [2], dates: [getDate(0)]
            },
            {
                from: "18:30", to: 20,
                size: 20, gap: 20,
                days: [3, 4, 5]
            },
        ],
        usedSlots: [getDate(0, 12), getDate(0, 18)]
    }
];

Загрузка данных из локального файла

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

Следующий фрагмент кода определяет getData(), которая возвращает и data, и конфигурацию cardShape:

function getData() {
    return {
        data,
        cardShape
    };
}

const data = [
    {
        id: "ee828b5d-a034-420c-889b-978840015d6a",
        title: "Natalie Tyson",
        category: "Therapist",
        subtitle: "2 years of experience",
        details: "Cleveland Clinic\n9500 Euclid Ave",
        preview: "https://snippet.dhtmlx.com/codebase/data/booking/01/img/01.jpg",
        price: "$35",
        review: {
            stars: 4,
            count: 120
        },
        slots: [
            {
                from: 9, to: 20,
                days: [1, 2, 3, 4, 5]
            },
            {
                from: 10, to: 18,
                days: [6, 0]
            }
        ]
    },
    // другие карточки
];

const cardShape = {
    preview: true,
    review: true,
    category: true,
    title: true,
    subtitle: true,
    price: true,
    details: true
};

Подключите файл данных на странице после исходных файлов Booking.

Следующий фрагмент кода подключает модуль data.js в index.html:

index.html

<script type="text/javascript" src="./dist/booking.js"></script>
<link rel="stylesheet" href="./dist/booking.css">

<script src="./common/data.js"></script>

Передайте набор данных, возвращённый функцией getData(), в конструктор Booking.

Следующий фрагмент кода создаёт экземпляр Booking с загруженными данными:

const { data } = getData();
const widget = new booking.Booking("#root", { data });

Обновление данных после инициализации

Чтобы заменить набор данных после инициализации Booking, вызовите метод setConfig() с новым массивом data. Метод повторно инициализирует виджет с объединённой конфигурацией.

Следующий фрагмент кода получает свежий набор данных с сервера и применяет его к существующему экземпляру Booking:

fetch("/api/cards")
    .then(res => res.json())
    .then(data => {
        widget.setConfig({ data });
    });

Для серверного сохранения бронирований см. руководство Сохранение бронирований на сервере.

---

Связанные статьи:

• confirm-slot — обработка подтверждения бронирования слота
• setConfig() — обновление конфигурации виджета после инициализации
• setConfirmHandler() — определение обработчика подтверждения слота
• renderType — переключение между стандартным и ленивым рендерингом
• Сохранение бронирований на сервере — серверное сохранение бронирований