Create Seat Selection Page

[Ahmed-Khaled-dev]

Seat Selection Details

Deadline: 5/Dec/2023 8:00 PM

Looks:

Try to implement the below designs as close to them as possible

• Get chairs and plane pictures from @Abdallah-Moe-dev
• You don't need to write exactly what is written in the chair class description, Just write things along the same idea
• We will still fix the "First class" chair design since it looks a bit weird, so keep in contact with @Abdallah-Moe-dev to get the fixed chair design
• Seat colors in the plane seating layout should match the seat colors in the right-side menu
• Make all rectangles rounded
• Should darken the color of the "Next Seat" button when hovering on it to give a hover effect
• Try to find a font similar to the one in the designs
• Important Note: Add a Flights tab at the top right corner to be able to go back if the user wants (This is not added in the design by mistake)
• Important Note: In the design we forgot to write the price of each seat class next to it, so add it

Design at the beginning (Note that the Seat Number at the bottom should contain nothing, It should be empty) An example of this is in the second image)

Empty Seat Number before the user chooses a seat

Design after user has chosen a seat

Design when the user is scrolling down

Functionality

• Create a seat class (With all of its types)
• Create a seat layout class (Maybe, Not sure if we will need this)
• The User shouldn't be able to press the "Next Seat" Button Unless he has chosen a Seat for the current passenger
• Your controller should view the number of passengers/scenes dynamically, Meaning it should receive something like an array of passenger names, (Just for example let's say it has received 3 names in this array), Then you will ask the user for Passenger 1 to choose a seat (You should write the user name as in the design), then after he chooses a seat from the available ones (We should write the chosen seat number as in the design) and presses "Next Seat" you will ask for Passenger 2, BUT the seat that passenger 1 has chosen shouldn't be available for passenger 2, then ask for Passenger 3's seat, and when he chooses for Passenger 3, we will give him a button that says "Continue to Payment", not "Next Seat", so if you take an array of (10 passenger names), then you should do the above from Passenger 1 till Passenger 10
• The flights tab at the top right should reset the whole process and make the user start again from the first passenger
• Should be able to know which passenger is in which seat when the user presses the "Next Seat" button
• Should be able to scroll through the seat map, if unable to do this or will take a lot of time, then can use the below design without scrolling: