DOCSEARCHbyAlgolia
Submit Docs

Seatchart

repository·master·Indexed 41 days ago

https://github.com/omahili/seatchart.js

A library for rendering interactive seat maps for theaters or stadiums, featuring seat selection state management and cart total calculations. Version 0.1.0 supports Vanilla JavaScript and React, providing APIs for seat manipulation via setSeat() and getSeat(), and cart management through getCart(), getCartTotal(), and clearCart().

Tokens
2K
Snippets
9
Records
9
Agent score
51%

What's inside Seatchart

  1. Install Seatchart via npm or CDN

    master

    You can install Seatchart as an npm package or include it directly in your project using jsDelivr CDN links for the JavaScript and CSS files.

    npm

    npm install --save seatchart

    jsDelivr CDN

    • JS: https://cdn.jsdelivr.net/npm/seatchart@0.1.0/dist/seatchart.min.js
    • CSS: https://cdn.jsdelivr.net/npm/seatchart@0.1.0/dist/seatchart.min.css

  2. Usage with React

    master

    To use Seatchart in a React application, you should wrap the SeatchartJS instance in a component using forwardRef and useEffect. This allows you to manage the lifecycle of the seat map and expose the Seatchart instance to parent components via a ref.

    Implementation Steps:

    1. Create a wrapper component that initializes new SeatchartJS(element, options) inside a useEffect hook.
    2. Use forwardRef to pass the Seatchart instance up to the parent.
    3. In the parent component, use useRef<SeatchartJS>() to capture the instance and call methods like getSeat() or setSeat().
    4. Import the required CSS: import 'seatchart/dist/seatchart.min.css';.
    // App.tsx snippet showing how to interact with the ref
const App = () => {
  const seatchartRef = useRef<SeatchartJS>();

  const handleClick = () => {
    const index = { row: 0, col: 6 };
    const seat = seatchartRef.current?.getSeat(index);

    seatchartRef.current?.setSeat(index, {
      state: seat?.state === 'selected' ? 'available' : 'selected',
    });
  };

  return (
    <div>
      <button onClick={handleClick}>Toggle Seat</button>
      <Seatchart ref={seatchartRef} options={options} />
    </div>
  );
}

  3. Basic Usage with Vanilla JavaScript

    master

    To use Seatchart in a standard HTML environment, include the CSS and JS files, define a container element, and instantiate the Seatchart class with a target element and an options object.

    The options object requires a map configuration, which includes rows, columns, and seatTypes. You can define a default seat type with a label, cssClass, and price.

    <!DOCTYPE html>
<html lang="en">
  <head>
    <title>Seatchart Example</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/seatchart@0.1.0/dist/seatchart.min.css">
    <style>
      .economy {
        color: white;
        background-color: #43aa8b;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/seatchart@0.1.0/dist/seatchart.min.js"></script>
    <script>
      var element = document.getElementById('container');
      var options = {
        map: {
          rows: 7,
          columns: 7,
          seatTypes: {
            default: {
              label: 'Economy',
              cssClass: 'economy',
              price: 10,
            },
          },
        },
      };

      var sc = new Seatchart(element, options);
    </script>
  </body>
</html>

  4. Initialize Seatchart

    master

    To use Seatchart, instantiate the Seatchart class by providing a target HTMLElement and a configuration object of type Options. The constructor automatically initializes the internal store and the UI component, rendering the seat map into the provided element.

    import Seatchart from 'seatchart';

const container = document.getElementById('seatchart-container')!;
const options = { /* ... your Options object ... */ };

const seatchart = new Seatchart(container, options);

  5. Manage seat data with setSeat() and getSeat()

    master

    You can programmatically update or retrieve information about specific seats using their SeatIndex.

    • setSeat(index, seat): Updates a seat's properties. You can pass a partial object containing label (string), state (SeatState), or type (string).
    • getSeat(index): Returns a SeatInfo object for the specified index.
    // Update a seat's state and label
seatchart.setSeat(12, { state: 'selected', label: 'A12' });

// Retrieve seat information
const seatInfo = seatchart.getSeat(12);

  6. Listen to Seatchart events

    master

    Use addEventListener and removeEventListener to react to user interactions or state changes within the seat map. The event types are defined in the Events type.

    const handleSeatClick = (e: any) => {
  console.log('Seat clicked:', e);
};

// Add listener
seatchart.addEventListener('someEvent', handleSeatClick);

// Remove listener
seatchart.removeEventListener('someEvent', handleSeatClick);

  7. Manage the shopping cart

    master

    Seatchart provides methods to interact with the currently selected seats (the cart):

    • getCart(): Returns an array of SeatInfo objects representing all selected seats.
    • getCartTotal(): Returns the total price of all seats currently in the cart as a number.
    • clearCart(): Removes all selected seats from the cart.
    // Get all selected seats
const selectedSeats = seatchart.getCart();

// Get the total cost
const total = seatchart.getCartTotal();

// Empty the cart
seatchart.clearCart();

  9. Define a SeatIndex object

    master

    The SeatIndex interface represents the coordinate position of a seat within a grid. It is used to identify specific seats using row and column indices.

    export interface SeatIndex {
  /**
   * Row index of the seat.
   */
  row: number;
  /**
   * Column index of the seat.
   */
  col: number;
}