seatyjs
v0.2.14
Published
Event seating interactive map component. Dynamically loads the SVG event map and renders available seats on it
Downloads
134
Maintainers
Readme
SeatyJS
SeatyJS is a toolkit for drawing event schemes and seating plans.
Sample usage for v-Ticket system:
import * as Seaty from "seatyjs";
// The most important entry data for the map
const eventId = "123";
const rootTierId = "924";
const seatyContainerId = "venue-map";
// Main application function launched after all dependencies been resolved and DOM is ready
$(document).ready(() => {
// Preparing seating plan configuration
// Constructing metadata adapter
const metadataMapper = new Seaty.VTicketMetadataMapper(
// Feeding it with attribute mapper class
new Seaty.AttributeMapper(Seaty.vTicketMetadataDictionary),
// Feeding it with the concrete render hook service, which is needed
// to handle all SVG specifics of the v-Ticket implementation
new Seaty.VTicketRenderHookService(),
// Feeding it with the seat status options storage
// This storage defines which seat statuses to be displayed and interacted with on the map
new Seaty.VTicketSeatStatusDisplayOptionsService()
);
// Constructing Seaty map config
const seatyConfig: Seaty.ISeatyConfig = {
// Feeding it with the DOM element it should live in
seatyContainer : document.getElementById(seatyContainerId),
// Declaring the event id of the map
eventId : eventId,
// Declaring the root tier id (the initial layer map should display)
rootTierId : rootTierId,
// Passing the metadata mapper we've constructed above
metadataMapper : metadataMapper,
// Constructing the data provider object, that will handle all request for map tiers (layers)
tierDataProvider: new Seaty.TierDataProviderService(
// Passing the event id
eventId,
// Passing root tier id
rootTierId,
// Passing metadata mapper again
metadataMapper,
// Constructing the metadata transport object
new Seaty.VTicketTestMetadataTransportService("/src/assets/", "_quote.json"),
// Constructing the SVG transport object
new Seaty.VTicketTestSvgTransportService("/src/assets", "/sector/", "_svg.svg")
),
// Constructing the mediator service, which serves as a bridge between SeatyJS map and client code
mediatorService : new Seaty.MediatorService(
// Passing the DOM id of the element (div be default) that should host the hint element of the map
// If the element doesn't exist it will be created
new Seaty.HintComponent({
id : "venue-map-hint",
}),
// Passing the hint text provider object, specifying the current language
new Seaty.VTicketHintTextProviderService("ru")
),
// Constructing the legend component, specifying the language.
// This component will display the ticket prices in the upper right corner (component is optional)
legendComponent : new Seaty.LegendComponent("ru"),
// Constructing the loader component and passing DOM id that will host it.
// This component should display a message of 'please wait...'-style to the user, while background operations
// (Component is optional)
loaderComponent : new Seaty.LoaderComponent("venue-map-loader"),
};
// Instantiating a new SeatyJS leaflet object
const seaty = new Seaty.Map(seatyConfig);
});
The bundle has most dependencies built-in, apart from BackboneJS, UndescoreJS and JQuery (Zepro recommended instead) and is compiled as a UMD
-module, so all types of loaders can be used.
The bundle also carries .js.gz
version, which can be served to all current browsers apart from Safari.
Global Events
SeatyJS generates global events via Backbone.trigger() at various stages of its lifecycle, which you can subscribe to.
List of events:
seatyjs:loading:start
– fired upon initialization of SeatyJSseatyjs:loading:done
– fired upon successful load of the root tierseatyjs:loading:fail
– fired upon a fail in initial load of SeatyJSseatyjs:tier:load
– fired upon a nested tier load, carries nestedTierId as a payloadseatyjs:tier:error
– fired upon a tier load error, carrier a reason payload (which normally has a .message property)seatyjs:tier:done
– fired upon a tier has been loaded successfully, carries tierId payload
You can subscribe to these events like this:
Backbone.on("seatyjs:tier:load", this.triggerTierSwitch, this);
Adding new adapters
Every backend needs a respectful set of adapters for SeatyJS to process corretly the map assets (SVG and metadata).
SeatyJS is being shipped with the following set of adapters:
- v-ticket v1 front-end
- concert.ua v3 front-end
You can mix and match the existing set of adapter's components if they fit your particular needs.
SeatyJS uses dictionary to adapt to your backend's output of metadata.
It must have the following parameters (see examples in src/seatyjs/adapters/ folder):
containers:
- fanZone
- nestedSectorContents
- seatMetadata
- sectorMetadata
- seatStatuses
- ticketTypes
seat:
- id
- seatId
- seatStatusId
- sectorElId
- row
- seat
- sectorTitle
- seatHint
- ticketTypeId
- seatContainer
- extraInfo
fanZone:
- id
- sectorId
- title
- sectorElId
- ticketTypeId
- zoneType
- numAvailable
sector:
- id
- tierId
- name
- tagIdName
- nested
- color
- className
ticketType:
- id
- color
- currencyCode
- price
- className
- groupId
- childTypeId
- childTypeMinLimit
- childTypeMaxLimit
- titlePrint
sectorContent:
- id
- contentArray
- currencyCode
- numAvailable
- price
- sectorId
seatStatuses:
- undefined
- available
- inCart
- sold
- reserved
- outToRetail
- paymentPending
- booked
- defaultClass
- id
- statusName
- fill
- stroke
- className
- statusDescription