seatsio-angular v0.0.1

seatsio-angular, the official Seats.io Angular 7 wrapper

Angular 7 wrapper for rendering Seats.io seating charts. Brought to you by the Seats.io team.

Installation

npm install --save @seatsio/seatsio-angular

Usage

Import SeatsioAngularModule in your own module:

import { SeatsioAngularModule } from '@seatsio/seatsio-angular';

@NgModule({
  ...
  imports: [
    SeatsioAngularModule
  ]
  ...
})

Regular charts

Minimal:

Make sure you expose config in your component. For example:

config = {
    publicKey: "<yourPublicKey>",
    event: "<yourEventKey>"
  }

<si-seatsio-seating-chart
    [config]="config"
></si-seatsio-seating-chart>

Custom chart div ID:

<si-seatsio-seating-chart
    divId="<customId>"
    [config]="config"
></si-seatsio-seating-chart>

Custom chart div class:

<si-seatsio-seating-chart
    class="<customClass>"
    [config]="config"
></si-seatsio-seating-chart>

onRenderStarted is fired when the chart has started loading, but hasn't rendered yet:

config = {
    publicKey: "<yourPublicKey>",
    event: "<yourEventKey>",
    onRenderStarted: (chart) => {
      console.info('Render Started')
    }
  }

If you store the chart object that's passed to onRenderStarted, you can access the properties defined on the wrapped seatsio.SeatingChart:

let chart = null

config = {
    publicKey: "<yourPublicKey>",
    event: "<yourEventKey>",
    onRenderStarted: {createdChart => { chart = createdChart }}
  }

onChartRendered is fired when the chart is rendered successfully:

config = {
    publicKey: "<yourPublicKey>",
    event: "<yourEventKey>",
    onRenderRendered: (chart) => {
      console.info('Render Finished')
    }
  }

Other parameters are supported as well. For a full list, check https://docs.seats.io/docs/renderer-configure-your-floor-plan

config = {
    publicKey: "<yourPublicKey>",
    event: "<yourEventKey>",
    pricing: {[
        {'category': 1, 'price': 30},
        {'category': 2, 'price': 40},
        {'category': 3, 'price': 50}
    ]},
    priceFormatter: price => ('$' + price)
  }

Event manager

eventManagerConfig = {
  secretKey: "<yourSecretKey>",
  event: "<yourEventKey>",
  mode: "<manageObjectStatus or another mode>"
}

<si-seatsio-event-manager
  [config]="eventManagerConfig"
></si-seatsio-event-manager>

Other parameters are supported as well. For a full list, check https://docs.seats.io/docs/configuring-event-manager

Seating Chart Designer

To embed the seating chart designer for the purpose of creating a new chart, do this:

seatingChartConfig = {
  publicKey: "<yourPublicKey>",
  event: "<yourEventKey>",
  onRenderStarted: () => {
    console.info('Render Started')
  },
  onChartRendered: () => {
    console.info('Render Finished')
  },
  priceFormatter: price => ('$' + price)
}

<si-seatsio-designer
  [config]="seatingChartConfig"
></si-seatsio-designer>

To be able to edit a chart from an embedded designer, you need to specify the chart to load:

seatingChartConfig = {
  publicKey: "<yourPublicKey>",
  event: "<yourEventKey>",
  chartKey: "<yourChartKey>",
  onRenderStarted: () => {
    console.info('Render Started')
  },
  onChartRendered: () => {
    console.info('Render Finished')
  },
  priceFormatter: price => ('$' + price)
}

Other parameters are supported as well. For a full list, check https://docs.seats.io/docs/embedded-designer-configuration