seatyjs

SeatyJS
====================

SeatyJS is a toolkit for drawing event schemes and seating plans.

*

Sample usage for v-Ticket system:
``typescript
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 SeatyJS
- seatyjs:loading:done – fired upon successful load of the root tier
- seatyjs:loading:fail – fired upon a fail in initial load of SeatyJS
- seatyjs:tier:load – fired upon a nested tier load, carries nestedTierId as a payload
- seatyjs: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:
`typescript
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