JQuery online seat selection system (high-speed rail edition)

HTML
Like the previous article: jQuery online seat selection (cinema), we use the same html structure, the left side shows the location layout diagram, and the right side shows the seat selection information. For more information about CSS code, download the DEMO source code.
 
<Div class = "container">
<Div id = "seat-map">
<Div class = "front"> 01 car </div>
</Div>
<Div class = "booking-details">
<H3> seat selection information: <Ul id = "selected-seats"> </ul>
<P> Number of Votes: <span id = "counter"> </span> </p>
<P> total: ￥ <span id = "total"> 0 </span> </p>
                    
<Button class = "checkout-button"> confirm purchase </button>
<Div id = "legend"> </div>
</Div>
</Div>
JQuery
Focus on jQuery code. We still use the online Seat selection plug-in: jQuery Seat Charts. First, arrange the seat layout of the high-speed trains. I suppose there are several equal and second-class seats in the carriage 01, which are separated by the entrance and exit channels. The general layout is as follows:
 
Map: [// seat chart
'FF _ ff ',
'FF _ ff ',
'______',
'Eee _ ee ',
'Eee _ ee ',
'Eee _ ee ',
'Eee _ ee ',
'Eee _ ee ',
'Eee _ e'
],
The above code f indicates the first-class seat, e indicates the second-class seat, and the symbol "_" indicates the aisle.
Then we need to define the relevant attributes of the seat type:
 
Seats: {// define seat attributes
F :{
Price: 100,
Classes: 'first-class ',
Category: 'precat'
},
E :{
Price: 40,
Classes: 'economy-class ',
Category: 'second-class title'
    }                    
},
The above code defines the price, category name, and css style of the first and second seats. They can be called later through the data () method.
Next, we use naming to define the row and column information of the seat chart. If the top is set to true, the top horizontal coordinates (rows) are displayed. columns and rows are used to define the horizontal coordinates (rows) respectively) and the column value. getLabel is used to return the seat information. For example, 01A indicates the block a in Row 01.
 
Naming: {// defines information such as columns and columns
Top: true,
Columns: ['A', 'B', 'C', '', 'D', 'F'],
Rows: ['01', '02', '', '03', '04 ', '05', '06', '07 ', '08 ', '09'],
GetLabel: function (character, row, column ){
Return row + column;
    }
},
Then we use legend to define the legend. The element associated with the legend is # legend, and the corresponding style is defined for the seat type.
 
Legend: {// define the legend
Node: $ ('# Legend '),
Items :[
['F', 'available', 'first-class seat '],
['E', 'available', 'second-class seat '],
['F', 'unavailable', 'Sold ']
    ]                    
},
Finally, when you click the position in the seat chart, you can make different processing based on the current seat status, including calculating the number of votes and total amount. You can refer to the cinema description.
 
Click: function (){
If (this. status () = 'available') {// optional seat
$ ('<Li>' + this. data (). category + '<br/> 01 Che' + this. settings. label + '<br/> ￥' + this. data (). price + '</li> ')
. Attr ('id', 'cart-item-'+ this. settings. id)
. Data ('seatid', this. settings. id)
. AppendTo ($ cart );
// Update the number of votes
$ Counter. text (SC. find ('selected'). length + 1 );
// Calculate the total amount
$ Total. text (recalculateTotal (SC) + this. data (). price );
Return 'selected ';
} Else if (this. status () = 'selected') {// selected
$ Counter. text (SC. find ('selected'). length-1 );
$ Total. text (recalculateTotal (SC)-this. data (). price );
// Delete the reserved seat
$ ('# Cart-item-' + this. settings. id). remove ();
Return 'available ';
} Else if (this. status () = 'unavailable') {// sold
// Sold
Return 'unavailable ';
} Else {
Return this. style ();
    }
},
Finally, we use the get () and status () methods to set the available seats.
 
// Unselectable seats sold
SC. get (['01 _ A', '04 _ A', '07 _ B ', '07 _ f']). status ('unavailable ');
It is worth mentioning that when buying tickets on the website very frequently, you need to refresh the seat chart in time. If the seat has been preemptible, it is not optional. We can use ajax for asynchronous requests and set to run every 10 seconds. You can refer to the following code:
 
SetInterval (function (){
$. Ajax ({
Type: 'GET ',
Url: 'Book. Php ',
DataType: 'json ',
Success: function (response ){
// Traverse all seats
$. Each (response. bookings, function (index, booking ){
// Set the status of the sold seats to sold
SC. status (booking. seat_id, 'unavailable ');
});
        }
});
}, 10000); // every 10 seconds