Seat Selector
The seat selector provides convenience wrappers to render a seat map in the browser. You can modify the behaviour and subscribe to certain callbacks to react to certain events e.g. a user selecting a seat in the map.
Initialize
Required attributes
- Name
holder- Type
- string
- Description
The id of the element to hold the map
- Name
baseUrl- Type
- enum(https://seatmap.vivenu.com, https://seatmap.vivenu.dev)
- Description
The baseUrl of the seating backend service
- Name
eventId- Type
- string
- Description
The ID of the seating event which holds the state.
Optional attributes
- Name
childEventIds- Type
- array<string>
- Description
An array of IDs of the seating events that belongs to the seating event. Important for season events
- Name
callbacks- Type
- object
- Description
The callbacks are described in the [callbacks](#callbacks) section
- Name
language- Type
- string
- Description
The display language of the seatmap
- Name
theme- Type
- enum(light, dark)
- Description
The color theme to be used to display the map
- Name
options- Type
- object
- Description
The options are described in the [options](#options) section
Example
{
"holder": "string",
"baseUrl": "https://seatmap.vivenu.com",
"eventId": "507f191e810c19729de860ea",
"childEventIds": [
"string"
],
"callbacks": {},
"language": "string",
"theme": "light",
"options": {}
}Options
Required attributes
- Name
categories- Type
- array<object>
- Description
A configuration about categories for this event
Required nested attributes (3)
- Name
ref- Type
- string
- Description
The reference of the category. This ref is used to map ticketTypes to categories
- Name
seatingReference- Type
- string
- Description
This reference is used to map a category to a defined category in the seat map
- Name
v- Type
- integer
- Description
The remaining sale volume for this category
- Name
ticketTypes- Type
- array<object>
- Description
A configuration about ticket types for this event
Required nested attributes (4)
- Name
categoryRef- Type
- string
- Description
The reference of the category this ticket type belongs to
- Name
active- Type
- boolean
- Description
Whether the ticket type is active and can be purchased
- Name
price- Type
- number
- Description
The price of this particular ticket type
- Name
v- Type
- integer
- Description
The remaining sale volume for this category
Optional nested attributes (1)
- Name
ignoredForStartingPrice- Type
- boolean
- Description
Whether this ticket type should be ignored for starting price of a seat
Optional attributes
- Name
orphan- Type
- object
- Description
Optional nested attributes (2)
- Name
minSeatDistance- Type
- integer
- Description
The minimum number of free seats that should be left in order to avoid orphan seats
- Name
edgeSeatsOrphaning- Type
- boolean
- Description
Select if orphan seats at aisles should also be avoided.
- Name
theme- Type
- enum(light, dark)
- Description
The color theme to be used to display the map
- Name
contingents- Type
- array<string>
- Description
An array of contingents IDs to be available
- Name
allowSelectionOfUnavailableObjects- Type
- boolean
- Description
Whether unavailable objects can be selected
- Name
highlightSeatsBlockedByContingent- Type
- boolean
- Description
Whether seats that are blocked by a contingent should be highlighted different
- Name
currency- Type
- enum(EUR, USD, GBP, AUD, CHF, THB, ILS, COP, MXN, DKK, NOK, SEK, QAR, SAR)
- Description
An ISO 4217 3-character code of the currency
- Name
visibleLayers- Type
- array<string>
- Description
Array of Layer IDs, which are always displayed, ignoring their hidden layer state. Layer Id 'all' means 'all layers shown'
- Name
preloadedMap- Type
- object
- Description
Map object to be used. Useful if you want to preload the map before the user access the selector
- Name
tooltip- Type
- object
- Description
Optional nested attributes (3)
- Name
enabled- Type
- boolean
- Description
Whether tooltips are enabled
- Name
showPrice- Type
- boolean
- Description
Whether prices are shown in the tooltip
- Name
includeViewFromSeat- Type
- boolean
- Description
Whether the view from seat image is shown in the tooltip
Example
{
"categories": [
{
"ref": "68355747-b7c0-4bc4-89c6-38af352e6de1",
"seatingReference": "6082a1ed75a4b008a1ad4659",
"v": 200
}
],
"ticketTypes": [
{
"categoryRef": "68355747-b7c0-4bc4-89c6-38af352e6de1",
"active": true,
"price": 54.99,
"v": 200,
"ignoredForStartingPrice": true
}
],
"orphan": {
"minSeatDistance": 1,
"edgeSeatsOrphaning": false
},
"theme": "light",
"contingents": [],
"allowSelectionOfUnavailableObjects": false,
"highlightSeatsBlockedByContingent": false,
"currency": "EUR",
"visibleLayers": [
"layerid1",
"layerid2"
],
"preloadedMap": {},
"tooltip": {
"enabled": true,
"showPrice": true,
"includeViewFromSeat": true
}
}Seat Object
Required attributes
- Name
_id- Type
- string
- Description
The id of the seat. This id is used in the callbacks
- Name
_type- Type
- enum(6)
- Description
Is used to determine the type of the object.
- Name
categoryId- Type
- string
- Description
The Id of the seating category
- Name
groupName- Type
- string
- Description
The name of the row group where the seat is located
- Name
rowName- Type
- string
- Description
The name of the row where the seat is located
- Name
seatName- Type
- string
- Description
The seat name
- Name
statusId- Type
- string
- Description
An Id that holds the status of the seat. This id is used to reserve/book/free the seat
Optional attributes
- Name
sectionName- Type
- string
- Description
The name of the section where the seat is located
- Name
gate- Type
- string
- Description
The name of the gate to enter the venue
- Name
seatType- Type
- enum(handicapped, limitedView, foldable)
- Description
Whether the seat has a special type
- Name
meta- Type
- object
- Description
A Key-Value object with meta information about the object. Those information are user defined
Example
{
"_id": "507f191e810c19729de860ea",
"_type": 6,
"categoryId": "507f191e810c19729de860ea",
"groupName": "G",
"rowName": "10",
"seatName": "55",
"statusId": "5e7aa965-27b7-4f44-97bd-f4eb62b15243",
"sectionName": "S",
"gate": "G-10",
"seatType": null,
"meta": {
"key_1": "value_1",
"key_2": "value_2"
}
}General Admission Object
Required attributes
- Name
_id- Type
- string
- Description
The id of the seat. This id is used in the callbacks
- Name
_type- Type
- enum(7)
- Description
Is used to determine the type of the object.
- Name
categoryId- Type
- string
- Description
The Id of the seating category
- Name
statusId- Type
- string
- Description
An Id that holds the status of the general admission. This id is used to reserve/book/free seats inside the GA
- Name
name- Type
- string
- Description
The name for the general admission
Optional attributes
- Name
gate- Type
- string
- Description
The name of the gate to enter the venue
- Name
meta- Type
- object
- Description
A Key-Value object with meta information about the object. Those information are user defined
Example
{
"_id": "507f191e810c19729de860ea",
"_type": 7,
"categoryId": "507f191e810c19729de860ea",
"statusId": "f451e2a4-05a3-43e5-82c2-da5c6c9ecf3b",
"name": "Standing Block A",
"gate": "G-10",
"meta": {
"key_1": "value_1",
"key_2": "value_2"
}
}Callbacks
| Event | Trigger |
|---|---|
| onObjectSelected | When an object gets selected. An object is either a Seat or a GeneralAdmission |
| onObjectDeselected | When a Seat gets deselected. This event does not apply to GeneralAdmission |
| onSelectionValid | When a selection get validated and is valid |
| onSelectionInvalid | When a selection get validated and is invalid. Example for an invalid selection is when the selected seats do not satisfy orphanage constraints |
| onLoadDone | When the initial loading of the Seatmap is done |
onObjectSelected
This event occurs when an object gets selected. An object can be of type Seat and of type GeneralAdmission.
/**
* This event occurs when an object gets selected.
* @param {string} type - The type of the event. "onObjectSelected"
* @param {string} id - The id of the object which got selected
* @param {SeatInfo|GeneralAdmissionInfo} - resource The resource
*/
const onObjectSelected = (type, id, resource) => {
console.log(id);
console.log(resource);
}
onObjectDeselected
This event occurs when an Seat gets deselected.
Caution: This event does not apply to GeneralAdmission. General admission can only be deselected through the setSelectedObjects method.
/**
* This event occurs when an object gets selected.
* @param {string} type - The type of the event. "onObjectDeselected"
* @param {string} id - The id of the object which got selected
* @param {SeatInfo} resource - The resource
*/
const onObjectDeselected = (type, id, resource) => {
console.log(id);
console.log(resource);
}
onSelectionInvalid
When a selection get validated and is invalid. Example for an invalid selection is when the selected seats do not satisfy orphanage constraints
interface Violations {
orphans?: SeatInfo[];
}
/**
* The event occurs when a selection get validated and is invalid
* @param {string} type - The type of the event. "onSelectionInvalid"
* @param {Violations} violations - An object containing information about invalid selection
*/
const onSelectionInvalid = (type, violations) => {
console.log(violations);
if (violations.orphans) {
console.log("There are orphans in your current selection");
console.log(violations.orphans);
}
}
Set selected objects
You can update the selection of the user with calling the function selectObjectsInSeatSelector on the VIInit instance.
Notice: You need to call this function in order to get a general admission deselected.
/**
* Set the objects of the user selection
* @param {Array<string>} ids - An array of Object-IDs to be selected
*/
selectObjectsInSeatSelector(ids: string[]): void;
Set categories
You can update the configuration of the category and their availabilities with calling the function setCategories on the VIInit instance.
Notice: Please make sure that you call this function after initialization is done.
/**
* Set the category configuration
* @param {Array<SeatMapCategory>} categories - An array of categories
*/
setCategories(categories: SeatMapCategories[]): void;
Get best available seats
Through this function you can get the best available seats on the map. This function takes key-value pairs as parameters, where the key is the categoryRef and the value is the requested amount of seats in this category.
The function returns key-value pairs, where the key is the categoryRef and the value is array of SeatInfoResource.
Notice: Best available seats are calculated by the distance to the focal point. If a focal point does not exist on the map then the center of the map is considered as the focal point.
interface BestAvailableSeatsParams {
[categoryRef: string]: number
}
interface BestAvailableSeatsResponse {
[categoryRef: string]: SeatInfoResource[]
}
/**
* Get best available seats
* @param {BestAvailableSeatsParams}
*/
getBestAvailableSeats(params: BestAvailableSeatsParams): Promise<BestAvailableSeatsResponse>;
Get view from seat
Through this function you can get the closest viewpoint to a seat. This function takes the seat id as a parameter. The function returns the closest viewpoint to the seat, if the seatmap has atleast one viewpoint placed on the seats layer. Otherwise it returns undefined.
interface ViewPoint {
_id: string
_type: number
imageType: ImageType
image: string
}
/**
* Get view from seat
* @param {string} seatId - The id of the seat
*/
getViewFromSeat(seatId: string): Promise<ViewPoint | undefined>;
Unmount
You can unmount the seat selector instance. Useful if you're hosting a single page application.
Will remove any seating frames inside holder and close any open socket connections.
/**
* Unmount the seat selector instance.
*/
unmount(): Promise<void>;