Seat-Chart-Generator is a seat chart app made in Angular 6, an inspiration from jQuery Seat Charts

Bus Seat Layout
Hall/Theatere Layout

Bootstrap
Ngx-bootstrap

 //Sample JSON for seatConfig [ { "seat_price": 250, "seat_map": [ { "seat_label": "1", "layout": "g_____" }, { "seat_label": "2", "layout": "gg__gg" }, { "seat_label": "3", "layout": "gg__gg" } ] }, { "seat_price": 450, "seat_map": [ { "seat_label": "4", "layout": "g_____" }, { "seat_label": "5", "layout": "gg__gg" }, { "seat_label": "6", "layout": "gg__gg" } ] } ] 

The array that contains the "seat_label" for each row and the corresponding layout for that row is defined in the "layout" property.

A seat is defined using 'g' and a space is defined using '_' character in the layout property.

Defines the price for each "seat_map[]".

seatChartConfig = { showRowsLabel : false, showRowWisePricing : false, newSeatNoForRow : false } 

JSON which manages the basic settings of the map.

showRowsLabel : Boolean variable to check if we want to display the Label for the row.

showRowWisePricing: Boolean variable to display price after each seat map block.

newSeatNoForRow: Continue the seat no for the next row.

Pass the configured seatConfig JSON to the processSeatChart() function.

this.seatConfig = [ { "seat_price": 250, "seat_map": [ { "seat_label": "1", "layout": "g_____" }, { "seat_label": "2", "layout": "gg__gg" } ] } ]; this.processSeatChart(this.seatConfig); 

Want to block seats beforehand? Pass in a string of seat-ids to block to the blockSeats() function.

 this.blockSeats("7_1,7_2"); 

Don't like the seat colors? No worries!
Go to app.component.scss file and edit the below SASS variables according to your favorite color

$seat-available-bg: white; $seat-available-color: #a0a0a0; $seat-booked-bg: #a0a0a0; $seat-booked-color: white; $seat-unavailable-bg: black; $seat-unavailable-color: white; 

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

MIT