ngx-seat-system

Library for Angular seat mapping, useful for applications such as movie theaters, airport seating systems, and more.

ngx-seat-system enables the creation and management of seat layouts in a 2D interface. It includes two main modules: the Seat Editor and the Seat Viewer, each providing specific functionalities to create and view seat configurations.

Features

• Seat Editor: Add, move, and delete seats on a 2D map. You can define areas where seats can be placed.
• Seat Viewer: Allows interaction with already created seats, adding actions such as booking seats on click.

Installation

Install the library using npm:

npm install ngx-seat-system

Importing Modules

To use the seat editor and viewer, import the modules in your Angular component.

import { Component } from "@angular/core";
import { NgxSeatEditorModule, NgxSeatLectorModule } from "ngx-seat-system";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [NgxSeatEditorModule, NgxSeatLectorModule],
  templateUrl: "./app.component.html",
  styleUrl: "./app.component.css",
})
export class AppComponent {
  title = "Seat Editor";
}

Module Configuration

Seat Editor Configuration

The NgxSeatEditor module allows you to configure various aspects of the seat editor.

export interface configSeatEditor {
  sections: sectionInterface[];
  img?: Blob;
  seats?: seatPosInterface<any>[];
  maxSeats?: number; // Maximum seats allowed (default: 100)
  sizeSeat?: number; // Seat size as a percentage of map width
  requestDeleteSection?: sectionDeleteRequest;
  areasPermit?: squarePosInterface[]; // Allowed areas for placing seats
  permission?: permissionSeatEditor; // Editing permissions
  imgSeat?: HTMLImageElement; // Seat icon
}

Structure of Sections and Seats

• Sections: Define different seat sections, such as economy class, business class, etc.

  export interface sectionInterface {
    id?: number | string;
    name: string;
    color: color;
  }

• Seats: Each seat has a position and can be associated with a section.

  export interface seatPosInterface<t> {
    code: string;
    position: posInterface;
    data?: t; // Additional info (e.g., price)
    clase: sectionInterface;
  }
  
  export interface posInterface {
    x: number; // X coordinate (0 to 100)
    y: number; // Y coordinate (0 to 100)
  }

Allowed Areas and Editing Permissions

• Allowed Areas: Define square areas where seats can be placed.

  export interface squarePosInterface {
    init: posInterface;
    end: posInterface;
  }

• Editing Permissions: Control access to different sections for each user.

  export interface permissionSeatEditor {
    ShowTabPlane?: boolean;
    showTabActions?: boolean;
    showTabConfig?: boolean;
    showTabSections?: boolean;
    showTabGrid?: boolean;
    showTabAreas?: boolean;
  }

Seat Editor Events

The editor emits various events (@Output) for handling specific actions:

• notificationEmitter: Emits notifications about editor events (e.g., alerts or success messages).

  export interface notificationPlaneInterface {
    message: string;
    type: "success" | "error" | "warning" | "info";
  }

• finishEmitter: Triggers when the user saves seat configurations.

  export interface finishSeatInterface<t> {
    seats: seatPosInterface<t>[];
    sections: sectionInterface[];
    sizeSeat: number;
    img: Blob;
    areas: squarePosInterface[];
  }

• cancelEmitter: Triggers when the user cancels seat configuration.

Example Usage of Seat Editor

<ngx-seat-editor [config]="config" (notificationEmitter)="notification($event)" (cancelEmitter)="cancel()" (finishEmitter)="save($event)"></ngx-seat-editor>

Seat Viewer Configuration

The NgxSeatLector module allows you to configure how created seats will be displayed and interacted with.

export interface configSeaLector<t> {
  blockSeat?: (seat: seatPosInterface<t>) => boolean; // Seat blocking function
  sizeWidth: number; // Seat size as a percentage of map width
  img: Blob; // Map image
  renderSeat?: (seat: seatPosInterface<any>) => renderPropsInterface; // Custom rendering
  tooltip?: (seat: seatPosInterface<t>) => string; // Tooltip on hover
}

Seat Viewer Events

• notificationEmitter: Emits notifications similar to the editor.
• selectSeat: Returns the selected seat when clicked.

Example Usage of Seat Viewer

<ngx-seat-lector [configSeaLector]="configLector" [seats]="seats" (selectSeat)="clickSeat($event)" (notificationEmitter)="messageShow($event)"></ngx-seat-lector>

You can try the library here: Demo on StackBlitz

License

This project is licensed under the MIT License.

ngx-seat-system

Librería para Angular de mapeado de asientos, útil para aplicaciones de salas de cine, sistemas de asientos de aeropuertos y más.

ngx-seat-system permite la creación y gestión de planos de asientos en una interfaz 2D. Incluye dos módulos principales: el Editor de Asientos y el Lector de Asientos, cada uno con funcionalidades específicas para crear y visualizar configuraciones de asientos.

Características

• Editor de Asientos: Agrega, mueve y elimina asientos en un plano 2D. Permite definir áreas donde se pueden colocar asientos.
• Lector de Asientos: Permite interactuar con los asientos creados, agregando acciones como apartar asientos al hacer clic.

Instalación

Instala la librería usando npm:

npm install ngx-seat-system

Importación de Módulos

Para utilizar el editor y lector de asientos, importa los módulos en tu componente Angular.

import { Component } from "@angular/core";
import { NgxSeatEditorModule, NgxSeatLectorModule } from "ngx-seat-system";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [NgxSeatEditorModule, NgxSeatLectorModule],
  templateUrl: "./app.component.html",
  styleUrl: "./app.component.css",
})
export class AppComponent {
  title = "Editor de Asientos";
}

Configuración de los Módulos

Configuración del Editor de Asientos

El módulo NgxSeatEditor permite configurar varios aspectos del editor de asientos.

export interface configSeatEditor {
  sections: sectionInterface[];
  img?: Blob;
  seats?: seatPosInterface<any>[];
  maxSeats?: number; // Máximo de asientos permitidos (default: 100)
  sizeSeat?: number; // Tamaño del asiento en porcentaje de la anchura del plano
  requestDeleteSection?: sectionDeleteRequest;
  areasPermit?: squarePosInterface[]; // Áreas permitidas para colocar asientos
  permission?: permissionSeatEditor; // Permisos de edición
  imgSeat?: HTMLImageElement; // Ícono de los asientos
}

Estructura de Secciones y Asientos

• Secciones: Define diferentes tipos de secciones de asientos, como clase económica, clase ejecutiva, etc.

  export interface sectionInterface {
    id?: number | string;
    name: string;
    color: color;
  }

• Asientos: Cada asiento tiene una posición y puede estar asociado a una sección.

  export interface seatPosInterface<t> {
    code: string;
    position: posInterface;
    data?: t; // Información adicional (e.g., precio)
    clase: sectionInterface;
  }
  
  export interface posInterface {
    x: number; // Coordenada X (0 a 100)
    y: number; // Coordenada Y (0 a 100)
  }

Áreas Permitidas y Permisos de Edición

• Áreas Permitidas: Define áreas cuadradas donde se pueden colocar los asientos.

  export interface squarePosInterface {
    init: posInterface;
    end: posInterface;
  }

• Permisos de Edición: Controla el acceso a diferentes secciones de edición para cada usuario.

  export interface permissionSeatEditor {
    ShowTabPlane?: boolean;
    showTabActions?: boolean;
    showTabConfig?: boolean;
    showTabSections?: boolean;
    showTabGrid?: boolean;
    showTabAreas?: boolean;
  }

Eventos del Editor de Asientos

El editor emite varios eventos (@Output) para manejar acciones específicas:

• notificationEmitter: Emite notificaciones sobre eventos del editor (e.g., alertas o mensajes de éxito).

  export interface notificationPlaneInterface {
    message: string;
    type: "success" | "error" | "warning" | "info";
  }

• finishEmitter: Se activa al guardar la configuración de los asientos.

  export interface finishSeatInterface<t> {
    seats: seatPosInterface<t>[];
    sections: sectionInterface[];
    sizeSeat: number;
    img: Blob;
    areas: squarePosInterface[];
  }

• cancelEmitter: Se activa al cancelar la configuración de los asientos.

Ejemplo de Uso del Editor de Asientos

<ngx-seat-editor [config]="config" (notificationEmitter)="notification($event)" (cancelEmitter)="cancel()" (finishEmitter)="save($event)"></ngx-seat-editor>

Configuración del Lector de Asientos

El módulo NgxSeatLector permite configurar cómo se mostrarán e interactuarán los asientos creados.

export interface configSeaLector<t> {
  blockSeat?: (seat: seatPosInterface<t>) => boolean; // Función de bloqueo de asiento
  sizeWidth: number; // Tamaño del asiento en porcentaje de la anchura del plano
  img: Blob; // Imagen del plano
  renderSeat?: (seat: seatPosInterface<any>) => renderPropsInterface; // Renderizado personalizado
  tooltip?: (seat: seatPosInterface<t>) => string; // Tooltip al hacer hover
}

Eventos del Lector de Asientos

• notificationEmitter: Emite notificaciones similares a las del editor.
• selectSeat: Devuelve el asiento seleccionado cuando se hace clic.

Ejemplo de Uso del Lector de Asientos

<ngx-seat-lector [configSeaLector]="configLector" [seats]="seats" (selectSeat)="clickSeat($event)" (notificationEmitter)="messageShow($event)"></ngx-seat-lector>

Puedes probar la librería aquí: Demo en StackBlitz

Licencia

Este proyecto está bajo la licencia MIT.

Note / Nota

English

Please note:

• The browser zoom will not work with the seat-system-editor. Specific buttons have been added to control zoom for this component.
• Notifications returned by the notificationEmitter will be in Spanish.

Español

Por favor, tenga en cuenta:

• El zoom del navegador no funcionará en el seat-system-editor. Se han agregado botones específicos para controlar el zoom en este componente.
• Las notificaciones devueltas por el notificationEmitter estarán en español.