arclight-seat-map-web

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

Usage

ADD arclight-seat-map-web FROM GITLAB

  "arclight-seat-map-web": "git+ssh://[email protected]: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