Cinema Seats Picker Component (Vue, Svelte)

Web component oriented to movie theaters websites. It offers the functionality of seat selector and customization of the distribution of each room in one single file.

Features:

• Room distribution customization
• Colors customization
• Legend
• Dark mode available
• onSelection event
• Disabled/occupied seats
• Accesibillity seats
• Screen markup

Props:

distribution: An array of lists where each element can be one of the following values: 1, 0 , 's' or 'w', where 1 represents a seat, 0 an empty space or unreachable area, 's' represents stairs and ' w' to represent accessible seats. Thus, a distribution like the following:

const room7Dist = [
  [0, 0, 0, 0, 0, 0, 0, "w", 1, 1, 1, 1, 1, 1, 1],
  [0, 0, 0, 0, 0, 0, 0, "s", 1, 1, 1, 1, 1, 1, 1],
  [0, 0, 0, 0, 0, 0, 0, "s", 1, 1, 1, 1, 1, 1, 1],
  [0, 0, 0, 0, 0, 1, 1, "s", 1, 1, 1, 1, 1, 1, 1],
  [0, 0, 0, 0, 0, 1, 1, "s", 1, 1, 1, 1, 1, 1, 1],
  [1, 1, 1, 1, 1, 1, 1, "s", 1, 1, 1, 1, 1, 1, 1],
];

It will result in the following image:

Room 07 distribution prop applied

seatColor: Defines the non-selected seats color. Default: #04e824

selectedColor: Defines the selection color. Default: #f487b6

roomName: Sets the room name or title.

countBlankSeats: Take in count the empty spaces or zeroes of the rows to establish the indexes of each seat. Default: false. Ex:

Default Room

Room with countBlankSeats=true

countWheelchairs: Take in count the accessibility seats of the rows to establish the indexes of each seat. Default: true.

showLegend: Hide or show legend. Default: true.

showScreen: Hide or show screen template. Default: true.

maxSelectionNumber: Max number of seats to select. Default: 1.

alphabeticalIndex: When enabled the rows index become letters instead of numbers. WARNING: when this is enabled also transform the selected seat object from: {seat:1, row:1} to {seat:1, row: 'A'}. Default: false.

occupiedSeats: Array of occupied seats on the seat map. Example:

const occupied = [
  {
    seat: 11,
    row: 14,
  },
  {
    seat: 10,
    row: 15,
  },
];

When using alphabeticalIndex the array must change to:

const occupied = [
  {
    seat: 11,
    row: 'N',
  },
  {
    seat: 10,
    row:'O',
  },
];

Events:

seatSelected: Emitted when a seat is selected. Pass as data the object of the seat:

{

seat: 1,

row: 1

}

Slots:

title: Title or room name template.

screen: Screen template.

legend: legend template.

Styling:

Following is the list of structural style classes using BEM.

.csp: Main container.

.csp__room-name: Title or Room name.

.csp__table: Seat table map.

.csp__row: Seats table row.

.csp__index: Row index on left and right side.

.csp__seat-container: Seat container.

.csp__seat: Seat available.

.csp__seat--hidden: Blank space.

.csp__seat--selected: Seat selected.

.csp__wu: Accessibility seat.

.csp__screen: Default screen template.

.csp__legend: Default legend container.

.csp__legend-item: Legend item container.

Vue 3 - How to use:

Simply import the component:

<script setup>

import CinemaSeatPicker from './CinemaSeatPicker.vue'

</script>

and use it in the template:

<template>

<CinemaSeatPicker></CinemaSeatPicker>

</template>

Examples:

<script setup>

import CinemaSeatPicker from './CinemaSeatPicker.vue'

const dist = [

[0,0,0,1,'s','w',1,1,1,1],

[0,1,1,1,'s',1,1,1,1,1],

[1,1,1,1,'s',0,0,0,0,0],

[1,1,1,1,'s',1,1,1,1,1]

]

</script>

<template>

<CinemaSeatPicker countBlankSeats :distribution="dist" room-name="First Room"></CinemaSeatPicker>

</template>