Skip to content

Commit

Permalink
Merge pull request #1 from DHTMLX/sp-next-refactor
Browse files Browse the repository at this point in the history 
[add] Changes before release
  • Loading branch information
@tbshag2
tbshag2 authored Nov 6, 2024
2 parents 43e8aab + 3862013 commit 6044562
Show file tree
Hide file tree
Showing 43 changed files with 6,152 additions and 4,733 deletions.
26 changes: 13 additions & 13 deletions docs/api/config/booking-cardshape.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ To configure the card appearance, in the **cardShape** object you can specify th
- `category` - (optional) shows/hides a card's name
- `details` - (optional) shows/hides details
- `preview` - (optional) shows/hides a preview image
- `price` - (optional) shows/hides price
- `price` - (optional) shows/hides price
- `review` - (optional) shows/hides rating information
- `subtitle` - (optional) shows/hides a card's subtitle
- `title` - (optional) shows/hides a card's title
Expand All @@ -40,28 +40,28 @@ To configure the card appearance, in the **cardShape** object you can specify th

~~~jsx {}
const defaultCardShape = {
category: true,
details: true,
preview: true,
price: true,
review: true,
subtitle: false,
title: true,
category: true,
details: true,
preview: true,
price: true,
review: true,
subtitle: false,
title: true
};
~~~

### Example

~~~jsx {}
const cardShape = {
review: false,
subtitle: false,
price: false,
review: false,
subtitle: false,
price: false
};

new booking.Booking("#root", {
cardShape,
// other parameters
cardShape,
// other parameters
});
~~~

Expand Down
97 changes: 49 additions & 48 deletions docs/api/config/booking-data.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,39 +14,38 @@ description: You can learn about the cards config in the documentation of the DH

~~~jsx {}
data: [
{
id: string | number,
title: string,
category?: string,
subtitle?: string,
details?: string,
preview?: string, // link to image
price?: string,
review?: {
stars: number,
count: number,
},
slots: [
{
from: number | string, // hours from 0 to 24
to: number | string, // hours from 0 to 24
size?: number, // length of slot in minutes
gap?: number, // gap between slots in minutes
days?: array, // days of week for which rule can be applied from 0 to 6
dates?: array, // exact dates for which rule can be applied, timestamps
},
],

availableSlots?: [
{
id: string|number,
time:[number, number] //timestamp, length in minutes
},
],
usedSlots?: number[], //timestamps
slotSize?: number, //minutes
slotGap?: number, //minutes
},
{
id: string | number,
title: string,
category?: string,
subtitle?: string,
details?: string,
preview?: string, // link to image
price?: string,
review?: {
stars: number,
count: number
},
slots: [
{
from: number | string, // hours from 0 to 24
to: number | string, // hours from 0 to 24
size?: number, // length of slot in minutes
gap?: number, // gap between slots in minutes
days?: array, // days of week for which rule can be applied from 0 to 6
dates?: array, // exact dates for which rule can be applied, timestamps
}
],
availableSlots?: [
{
id: string|number,
time:[number, number] //timestamp, length in minutes
},
],
usedSlots?: number[], //timestamps
slotSize?: number, //minutes
slotGap?: number //minutes
}
];
~~~

Expand All @@ -67,14 +66,15 @@ For each card object you can specify the following parameters:
- `slots` - (required) an array of objects with the following parameters for each slot object:
- `from` - (required) a slot start time in hours from 0 to 24
- `to` - (required) a slot end time in hours from 0 to 24
- `size` - (optional) the duration of one slot in minutes
- `size` - (optional) the duration of one slot in minutes
- `gap` - (optional) the gap between slots in minutes; 0 is set by default
- `days` - (optional) days of the week when a slot is available for booking; possible values: from 0 to 6 where 0 is Sunday and 6 is Saturday; if no days are specified, all days are applied by default; if days are specified, the slot parameters (**to**, **from**, **size**, **gap**) defined for these days will be applied
- `dates` - (optional) an array of timestamps in milliseconds which are exact dates when a slot is available; the slot parameters (**to**, **from**, **size**, **gap**) for these specified dates will be applied
- `dates` - (optional) an array of timestamps in milliseconds which are exact dates when a slot is available; the slot parameters (**to**, **from**, **size**, **gap**) for these specified dates will be applied

:::note
Slot parameters specified for days will override common parameters defined for all days.
Slot parameters specified for dates will override parameters defined for specific days and all days.
If several slots objects are created for the same day, make sure that slots time ranges (from and to) with **different** size and gap do not overlap, otherwise all slots data for these days will not be applied.
Slot parameters specified for days will override common parameters defined for all days.
Slot parameters specified for dates will override parameters defined for specific days and all days.
If several slots objects are created for the same day, make sure that slots time ranges (from and to) with **different** size and gap do not overlap, otherwise all slots data for these days will not be applied.
:::

- `availableSlots` - (optional) an array of timestamps of available slots in milliseconds; if available slots are specified here, all slots from the `slots` array are ignored (i.e., become unavailable); each object in the array has the next parameters:
Expand All @@ -86,7 +86,7 @@ If several slots objects are created for the same day, make sure that slots time

### Example

~~~jsx
~~~jsx {}
const data = [
{
id: "5cf364d8-9997-4d8c-9586-48f90f3cb736",
Expand All @@ -99,15 +99,15 @@ const data = [
price: "37 $",
review: {
star: 1,
count: 40,
count: 40
},
slots: [
{
//a common slot rule for all days except those specified for the days and dates below
from: 14,
to: 17,
size: 30,
gap: 10,
gap: 10
},
{
//this rule is applied to days 2 and 5 (Tuesdays and Fridays) except
Expand All @@ -116,7 +116,7 @@ const data = [
to: 17,
size: 50,
gap: 20,
days: [2, 5],
days: [2, 5]
},
{
//this rule is applied to days 3 and 4 (Wednesdays and Thursdays) and exact date
Expand All @@ -126,13 +126,14 @@ const data = [
gap: 20,
days: [3, 4],
dates: [ 1683234000000 ] // exact upcoming date (May 5, 2023, Friday)
},
],
},]

}
]
}
];

new booking.Booking("#root", {
data,
// other parameters
data,
// other parameters
});
~~~

Expand Down
8 changes: 3 additions & 5 deletions docs/api/config/booking-end.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,8 @@ end?: Date;

~~~jsx {}
new booking.Booking("#root", {
data,
end: new Date(2025, 11, 11),
// other parameters
data,
end: new Date(2025, 11, 11),
// other parameters
});
~~~


20 changes: 10 additions & 10 deletions docs/api/config/booking-filtershape.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,14 @@ filterShape: {
text?: boolean | [{
id: string,
label?: string,
suggest?: boolean,
suggest?: boolean
}],
date?: boolean,
time?: boolean | [{
from: number | string,
to: number | string,
label?: string,
}],
label?: string
}],
autoApply?: boolean
};
~~~
Expand All @@ -33,7 +33,7 @@ filterShape: {

- `text` - (optional) if **true**, the text input field is displayed (default); if **false**, the text field is hidden
- `id` - (required) the id of a card
- `suggest` - (required) if **true**, the auto-complete is enabled and the values (from the [`data`](/api/config/booking-data) object) that match a user's input text will be displayed
- `suggest` - (required) if **true**, the auto-complete is enabled and the values (from the [`data`](/api/config/booking-data) object) that match a user's input text will be displayed
- `label` - (optional) the label for the property from the `data` object. See [Default config](#default-config) below.
- `date` - (optional) shows/hides the date field; **true** is set by default (the field is shown)
- `time` - (optional) shows/hides the time field. If set to **true**, it takes an array of objects with default time options for a slot. For each object you can specify the following parameters:
Expand All @@ -49,18 +49,18 @@ If the `time` parameters are not set, the default values are applied: see [Defau
const defaultTimeRanges = [
{ from: 8, to: 12, label: "Morning" },
{ from: 12, to: 17, label: "Afternoon" },
{ from: 17, to: 20, label: "Evening" },
{ from: 17, to: 20, label: "Evening" }
];

const defaultFilterShape = {
text: [
{ id: "category", label: "speciality", suggest: true },
{ id: "title", label: "specialist", suggest: true },
{ id: "details", label: "location" },
{ id: "details", label: "location" }
],
date: true,
time: defaultTimeRanges,
autoApply: false,
autoApply: false
};
~~~

Expand All @@ -73,8 +73,8 @@ const filterShape = {
time: [
{ from: 8, to: 11, label: "Morning" },
{ from: 12, to: 18, label: "Afternoon" },
{ from: 18, to: 21, label: "Evening" },
],
{ from: 18, to: 21, label: "Evening" }
]
};

new booking.Booking("#root", {
Expand All @@ -86,4 +86,4 @@ new booking.Booking("#root", {

The snippet below demonstrates how to configure filter:

<iframe src="https://snippet.dhtmlx.com/b5uj78bs?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>
<iframe src="https://snippet.dhtmlx.com/b5uj78bs?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>
Loading

0 comments on commit 6044562

Please sign in to comment.