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 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:

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