|
1 | 1 | --- |
2 | | -sidebar_label: Saving slots reservations to server |
3 | | -title: Saving slots reservations to the server |
4 | | -description: You can learn about saving slots reservations to server in the documentation of the DHTMLX JavaScript Booking library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Booking. |
| 2 | +sidebar_label: Working with server |
| 3 | +title: Working with server |
| 4 | +description: You can learn about working with server in the documentation of the DHTMLX JavaScript Booking library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Booking. |
5 | 5 | --- |
6 | 6 |
|
7 | | -# Saving slots reservations to the server |
| 7 | +# Working with server |
8 | 8 |
|
9 | | -About loading data from the server see here: [Loading data](/guides/loading-data#loading-data-1). |
| 9 | +## Loading data |
| 10 | + |
| 11 | +To get server data, you can send the request for data using the native **fetch** method (or any other way): |
| 12 | + |
| 13 | +~~~jsx {} |
| 14 | +const booking = new booking.Booking("#booking", {data: []}); |
| 15 | +const server = "https://some-backend-url"; |
| 16 | + |
| 17 | +fetch(server + "/data").then((res) => res.json()).then((data) => { |
| 18 | + booking.setConfig({data}); |
| 19 | +}); |
| 20 | +~~~ |
| 21 | + |
| 22 | +## Saving slots reservations to the server |
10 | 23 |
|
11 | 24 | To handle slots reservation, you should apply the [`setConfirmHandler`](/api/methods/booking-setconfirmhandler-method) method. |
12 | 25 |
|
@@ -51,6 +64,93 @@ fetch("/server/url") |
51 | 64 | }); |
52 | 65 | ~~~ |
53 | 66 |
|
| 67 | +## Working with UTC data |
| 68 | + |
| 69 | +The widget applies a local timezone but if you have UTC data it's necessary to convert data to a local timezone. |
| 70 | + |
| 71 | +For example, if you have UTC timestamps, you can apply the functions provided in the example below to convert them. The **g2l** function converts a UTC timestamp into the local timezone. During the data loading process, this function is used to convert the times in *usedSlots* and *slots* from UTC to the local time. The **l2g** function converts a local time back to UTC. It's applied during slots reservation, namely, the **l2g** function is used to convert the local time (from slot.time[0]) to UTC before sending it to the server. |
| 72 | + |
| 73 | +~~~jsx |
| 74 | +const serverURL = "https://some-backend-url"; |
| 75 | + |
| 76 | +function g2l(v) { |
| 77 | + const utcDate = new Date(v); |
| 78 | + return new Date( |
| 79 | + utcDate.getUTCFullYear(), |
| 80 | + utcDate.getUTCMonth(), |
| 81 | + utcDate.getUTCDate(), |
| 82 | + utcDate.getUTCHours(), |
| 83 | + utcDate.getUTCMinutes(), |
| 84 | + utcDate.getUTCSeconds(), |
| 85 | + utcDate.getUTCMilliseconds(), |
| 86 | + ).valueOf(); |
| 87 | +} |
| 88 | + |
| 89 | +function l2g(v) { |
| 90 | + const date = new Date(v); |
| 91 | + return Date.UTC( |
| 92 | + date.getFullYear(), |
| 93 | + date.getMonth(), |
| 94 | + date.getDate(), |
| 95 | + date.getHours(), |
| 96 | + date.getMinutes(), |
| 97 | + date.getSeconds(), |
| 98 | + date.getMilliseconds(), |
| 99 | + ); |
| 100 | +} |
| 101 | + |
| 102 | +const handleSlotReservation = event => { |
| 103 | + const { confirm, slot, data } = event; |
| 104 | + |
| 105 | + const info = { |
| 106 | + doctor: slot.id, |
| 107 | + date: l2g(slot.time[0]), |
| 108 | + form: { |
| 109 | + name: data.name, |
| 110 | + email: data.email, |
| 111 | + details: data.description, |
| 112 | + }, |
| 113 | + }; |
| 114 | + |
| 115 | + fetch( serverURL + "/doctors/reservations", { |
| 116 | + method: "POST", |
| 117 | + body: JSON.stringify(info), |
| 118 | + }).then(response => { |
| 119 | + if (response.ok) confirm.done(); |
| 120 | + else confirm.error(); |
| 121 | + }); |
| 122 | +}; |
| 123 | + |
| 124 | +// widget initialization |
| 125 | +const widget = new booking.Booking("#root", { |
| 126 | + data: [], |
| 127 | +}); |
| 128 | + |
| 129 | +// data loading |
| 130 | +fetch( serverURL + "/units") |
| 131 | + .then(res => res.json()) |
| 132 | + .then(units => { |
| 133 | + units.forEach(unit => { |
| 134 | + if (unit.usedSlots) unit.usedSlots = unit.usedSlots.map(g2l); |
| 135 | + if (unit.slots) { |
| 136 | + unit.slots = unit.slots.map(slot => { |
| 137 | + if (slot.dates) { |
| 138 | + return { |
| 139 | + ...slot, |
| 140 | + dates: slot.dates.map(g2l) |
| 141 | + }; |
| 142 | + } |
| 143 | + return slot; |
| 144 | + }); |
| 145 | + }; |
| 146 | + }); |
| 147 | + |
| 148 | + widget.setConfig({ data: units }); |
| 149 | + widget.setConfirmHandler(handleSlotReservation); |
| 150 | + }); |
| 151 | +~~~ |
| 152 | + |
| 153 | + |
54 | 154 | ## Example |
55 | 155 |
|
56 | 156 | <iframe src="https://snippet.dhtmlx.com/dpbmyr8j?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe> |
|
0 commit comments