arclight-seat-map-web

Arclight Cinema seat layout library for web. React project by savantis solutions.

Usage no npm install needed!

<script type="module">
  import arclightSeatMapWeb from 'https://cdn.skypack.dev/arclight-seat-map-web';
</script>

README

arclight-seat-map-web

Arclight Cinema seat layout library for web. React project by savantis solutions.

NPM JavaScript Style Guide

Usage

ADD arclight-seat-map-web FROM GITLAB

  "arclight-seat-map-web": "git+ssh://git@gitlab.com:savantis/arclight-seat-map-web.git"
import React, { Component } from "react";

import SeatMapWeb from "arclight-seat-map-web";

class Example extends Component {
  onSeatClick = slot => {
    console.log(slot);
  };
  render() {
    return (
      <SeatMapWeb
        canvas_width={this.state.canvas_width}
        canvas_height={this.state.canvas_height}
        seats={this.state.seats}
        ui_components={this.state.ui_components}
        mark_seats={this.state.markSlot}
        reset_seats={this.state.resetSlot}
        booked_seats={this.state.seatStatus}
        display_legend={true}
        view_only={false}
        legend_position={"TOP"}
        mode={"LIGHT"}
        responsive={false}
        zoom_enable={true}
        select_many={true}
        select_many_max={5}
        pre_selected_seats={["a-25", "a-24", "a-23"]}
        master_configs={{
          colors: {
            default: "rgb(255, 255, 255)",
            broken: "rgb(209, 209, 209)",
            booked: "rgb(209, 209, 209)",
            selected: "rgb(245, 15, 185)",
            marked: "rgb(42, 209, 86)",
            wheelchair: "rgb(101, 162, 245)"
          },
          font_sizes: {
            seat_label: 15,
            seat_label_bold: true,
            screen_label: 30,
            screen_label_bold: false,
            legend_label: 20,
            legend_label_bold: true
          },
          font_families: {
            general: "'Lobster', cursive",
            seat_label: "",
            screen_label: "",
            legend_label: "'Sacramento', cursive"
          }
        }}
        alignment_configs={{
          GAP_BETWEEN_SEATS_DEFAULT_X: 20,
          GAP_BETWEEN_SEATS_DEFAULT_Y: 15,
          SEAT_DEFAULT_WIDTH: 45,
          SEAT_DEFAULT_HEIGHT: 45,
          ROW_LABEL_LEFT_MARGIN: 30,
          ROW_LABEL_RIGHT_MARGIN: 40,
          SEAT_NUMBER_BOTTOM_LABEL_SPACE: 30
        }}
        show_row_label={true}
        seat_number_position="MIDDLE"
        show_seat_number={false}
        full_seat_number={false}
        OnSeatClick={this.onSeatClick}
        GetSelectedSeats={this.getSelectedSeats}
      />
    );
  }
}
Prop Description Default Value Example
seats Array of slots object [] [{id: 7253,x: 4895,y: 5173,rowLabel: "A",slotNumber: "32",category: "REGULAR",status: "BROKEN",capacity: 1,zone: "",repairStartDate: null,repairEndDate: null,slotScore: null,createdAt: 1534177180963,updatedAt: 1565951644518,slotCategory: {id: 1,name: "REGULAR",createdAt: "2018-05-24T19:18:50.000+0000",updatedAt: "2018-05-24T19:18:50.000+0000"}}]
canvas_width Canvas Max width. (maximum column number) 0
canvas_height Canvas Max height. (maximum row number) 0
ui_components Array of uiComponents object [] [ {id: "880",x: "4716",y: "5107",label: "Emergency Exit",type: "TEXT",width: "0",height: "0",createdAt: "2018-08-16T12:36:08.455+0000",updatedAt: "2019-08-16T10:34:04.557+0000"}]
mark_seats mark single seat by passing slotId and marked status null { slotId : "a-32" , marked : true }
reset_seats reset single seat by passing slotId. status: "ACTIVE", isSelected: false, isMarked: false null { slotId : "a-32" }
booked_seats update performances after getting seats booked status. [] [{id:"K-33a", status:"BROKEN",type:"REGULAR"}]
display_legend Show legends inside seats layout. false
view_only Disable canvas OnClick event. false
select_many Enable multiple select option false
select_many_max Multiple selection maximum seats count 10
pre_selected_seats Pre selected seats. null ["a-25", "a-24", "a-23"]
responsive Responsive seats sizes to container width. true
zoom_enable Zoom in canvas on first click. Then can be select seats. true
legend_position Specify the position of the legend. available positions: TOP, BOTTOM BOTTOM
mode seat library display mode. available modes: DARK, LIGHT DARK
distancing_disabled distancing seats on click event trigger or do nothing toggler true
show_row_label Show row label from left and right side in seat map library false
show_seat_number Show seat number. this will hide seat number in default view but it will appear when zoomed. true
seat_number_position Seats number display position. available positions: BOTTOM, MIDDLE MIDDLE
full_seat_number Show only slot number or combined with row label false
master_configs seat library master configurations.

colors :
legends colors can be change using colors property.

font_sizes :
label's font sizes can be change using. font_sizes property of the particular object. Also you can bold the text.

font_families:
This will allow the user to override the default font-family of the seat-map-library. So, you may define a general font-family to override the default font-family. It will apply all over the seat-map-library. To do that you have to define font_families.general attribute. If you want to apply different font-family to each label you can apply the desired font-family as follows.

font_families.seat_label for the seat label and row label,

font_families.screen_label for Screen text of the seat-map-library and

font_families.legend_label to change legend label font-family.

N.B. Default font-family will be Open Sans
null {colors: {default: "rgb(255, 255, 255)",broken: "rgb(209, 209, 209)",booked: "rgb(209, 209, 209)",selected: "rgb(245, 15, 185)",marked: "rgb(42, 209, 86)",wheelchair: "rgb(101, 162, 245)"},font_sizes: {seat_label: 13,seat_label_bold: false,screen_label: 30,screen_label_bold: false,legend_label: null, legend_label_bold: false}, font_families: {general: "'Lobster', cursive", seat_label: "", screen_label: "",legend_label: "'Sacramento', cursive"}}
OnSeatClick OnSeatClick callback function. returns particular slot object with it.
alignment_configs Master Alignments. seat width, height,... etc. null {GAP_BETWEEN_SEATS_DEFAULT_X: 20,GAP_BETWEEN_SEATS_DEFAULT_Y: 15,SEAT_DEFAULT_WIDTH: 45,SEAT_DEFAULT_HEIGHT: 45,ROW_LABEL_LEFT_MARGIN: 30,ROW_LABEL_RIGHT_MARGIN: 40,SEAT_NUMBER_BOTTOM_LABEL_SPACE: 30}
OnSeatClick OnSeatClick callback function. returns particular slot object with it.
GetSelectedSeats GetSelectedSeats callback function. returns all selected seats when select a new seat.

Sample GIF

Install

npm install --save arclight-seat-map-web

Getting Start Dev

  • Clone project from repository
    $ git clone https://gitlab.com/savantis/arclight-seat-map-web.git
    
  • Change directoty and run project after npm install
    $ cd arclight-seat-map-web
    $ npm install
    $ npm start
    

Test before add to seperate project.

  • change directory to example folder
     $ cd example
    
  • Start example project.
     $ npm start
    

Use a Local Javascript Package in a Real Project

  • go to library folder arclight-seat-map-web
  • run link command as below.
    $ npm link
    
  • then go to the local project root folder that going to use arclight-seat-map-web
  • then inside the local project's root. Run below command to add our custom package.
    $ npm link arclight-seat-map-web
    

CHEERS. YOU ARE GOOD TO GO...

License

MIT © v4irajvimu