LIVE DEMO

Seatmap Canvas

An opensource seat selection

What does it do?

In any organization

• Seat selection
• Seat categorizing
• Locating
• Turnstile and Gate information

Installation

npm i @seatmap/canvas --save

Github registry install

npm i @alisaitteke/seatmap-canvas --save

Example Config

{
    "resizable": true,
    "seat_style": {
        "radius": 12,
        "color": "#6796ff",
        "hover": "#5671ff",
        "not_salable": "#424747",
        "selected": "#56aa45",
        "focus": "#435fa4",
        "focus_out": "#56aa45"
    },
    "block_style": {
        "fill": "#e2e2e2",
        "stroke": "#e2e2e2"
    },
    "label_style": {
        "color": "#000",
        "radius": 12,
        "font-size": "12px",
        "bg": "#ffffff"
    }
}

Usage

var seatmap = new SeatmapCanvas(".seats_container",config);

Seat Model

{
  "id": 1,
  "title": "49",
  "x": 0,
  "y": 0,
  "salable": true,
  "note": "note test",
  "color":"#ffffff"
}

Block Model

{
  "blocks": [
    {
      "id": 1,
      "title": "Test Block 1",
      "color": "#2c2828",
      "labels": [
        {
          "title": "A",
          "x": -30,
          "y": 0
        },
        {
          "title": "B",
          "x": 120,
          "y": 30
        }
      ],
      "seats": [
        {
          "id": 1,
          "x": 0,
          "y": 0,
          "salable": true,
          "note": "note test",
          "title": "49"
        },
        {
          "id": 2,
          "x": 30,
          "y": 0,
          "salable": true,
          "note": "note test",
          "title": "47"
        }
      ]
    }
  ]
}

Set Block Data

seatmap.setData(data);

Seat Click Trigger

seatmap.addEventListener("seat_click", (seat) => {
    console.log(seat);
    if (seat.selected) {
        seatmap.seatUnselect(seat);
    } else {
        seatmap.seatSelect(seat);
    }
});

Activated unsalable seat click

click_enable_sold_seats param add to config object

let config = {
    click_enable_sold_seats: true // default false
}

Get selected seat

seatmap.addEventListener("seat_click", (seat) => {
    var data = torch.getSelectedSeats();
});

Contributors

Ali Sait TEKE [email protected]