com.sabre.redapp.example3.web.reservation Sample

As a Red App developer, you are able to display the Reservation data from the new PNR (Passenger Name Record) model. The sample code snippets below demonstrate how to present this data in a customized modal window.

! Please remember that the Reservation data model is still under development.

Create Main class
```
export class Main extends Module {
```

Initialize it

init(): void {
        super.init();
        const xp = getService(ExtensionPointService);

        const sidepanelConfig = new RedAppSidePanelConfig([
            // add Red App button and bound action 'this.getReservation()'
            // that will be executed on button click
            new RedAppSidePanelButton('Reservation', 'btn btn-secondary side-panel-button', () => this.getReservation()),
            // add Red App button and bound action 'this.getAirSegments()'
            // that will be executed on button click
            new RedAppSidePanelButton('Reservation Air Segments', 'btn btn-secondary side-panel-button redapp-web-reservation-air', () => this.getAirSegments())
        ]);

        xp.addConfig('redAppSidePanel', sidepanelConfig);
+

Create a method to get NgvPromise from the 'getReservation' method.

    private getReservation(): void {
        console.log("Show reservation in modal");
        let reservationPromise: Promise<CommandMessageReservationRs> = getService(IReservationService).getReservation();

Resolve the promise by binding the method 'displayReservationModel' which will consume and display the passenger and remarks from reservation data.

        reservationPromise.then(this.displayReservationModel.bind(this)).catch((error) => {
            console.log("Error while receiving reservation");
            console.log(error);
        });
    }

Similarly, we create the 'getAirSegments' that will be displaying the air segments from reservation data.

    private getAirSegments(): void {
        console.log("Show air segment in modal");
        let reservationPromise: Promise<CommandMessageReservationRs> = getService(IReservationService).getReservation();

        reservationPromise.then(this.displayAirSegment.bind(this)).catch((error) => {
            console.log("Error while receiving reservation");
            console.log(error);
        });
    }

Create a method (how to do so is mentioned in step 4) to map the retrieved passenger and remark data from reservation into a reservation model, and show this mapped data in a modal window.

    private displayReservationModel(commandMessageReservationRs: CommandMessageReservationRs): void {
        var reservation = commandMessageReservationRs['Data'];
        this.sortPassengersById(reservation);
        this.sortRemarksByOrderNumber(reservation);
        getService(LayerService).showInModal(new ReservationView({
            model: {reservation: {reservation}}
        }), {title: "Reservation"}, {display: 'areaView'});
    }

Create a method to map the retrieved first air segment from reservation into the air model, and show this mapped data in a modal window.

    private displayAirSegment(commandMessageReservationRs: CommandMessageReservationRs): void {
        var reservation = commandMessageReservationRs['Data'];
        var air = reservation.Segments.AirSegments.Air[0];
        getService(LayerService).showInModal(new AirSegmentsView({
            model: {air: {air}}
        }), {title: "Air segments"}, {display: 'areaView'});
    }

Additionally, to see the data in the modal window you will need to create a View (e.g. ReservationView, as shown above) with an HTML template:

@CssClass('com-sabre-redapp-example3-web-reservation-web-module')
@Template('com-sabre-redapp-example3-web-reservation-web-module:ReservationView')
export class ReservationView extends AbstractView<AbstractModel> {

    initialize(options: AbstractActionOptions) {
        super.initialize(options);
    }
}

A sample HTML template for the remarks data:

<div>
    <table class="table travellers-table">
        <caption class="travellers-title">Travellers</caption>
        <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">NameNumber</th>
            <th scope="col">GivenName</th>
            <th scope="col">Surname</th>
            <th scope="col">Type</th>
        </tr>
        </thead>
        <tbody>
        {{#each reservation.reservation.Passengers.Passenger}}
        <tr class="traveller-item-{{Id}}">
            <td>{{Id}}</td>
            <td>{{NameNumber}}</td>
            <td>{{GivenName}}</td>
            <td>{{Surname}}</td>
            <td>{{Type}}</td>
        </tr>
        {{/each}}
        </tbody>
    </table>

    <table class="table remarks-table">
        <caption class="remarks-title">Remarks</caption>
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">Code</th>
                <th scope="col">Type</th>
                <th scope="col">Text</th>
            </tr>
        </thead>
        <tbody>
            {{#each reservation.reservation.Remarks.Remark}}
                <tr class="remark-item-{{OrderNumber}}">
                    <td>{{OrderNumber}}</td>
                    <td>{{Code}}</td>
                    <td>{{Type}}</td>
                    <td>{{Text}}</td>
                </tr>
            {{/each}}
        </tbody>
    </table>
</div>

Similarly, we create a view for air segment and it’s template

@CssClass('com-sabre-redapp-example3-web-reservation-web-module')
@Template('com-sabre-redapp-example3-web-reservation-web-module:AirSegmentsView')
export class AirSegmentsView extends AbstractView<AbstractModel> {

    initialize(options: AbstractActionOptions) {
        super.initialize(options);
    }
}

<div>
    <ol>
        {{#with air.air}}
        <li>Id: {{Id}}</li>
        <li>Destination airport code: {{Arrival.LocationCode}}</li>
        <li>Arrival datetime: {{Arrival.ScheduleDateTime}}</li>
        <li>Origin airport code: {{Departure.LocationCode}}</li>
        <li>Departure datetime: {{Departure.ScheduleDateTime}}</li>
        <li>Marketing airline code: {{MarketingCarrier.Code}}</li>
        <li>Marketing airline flight number: {{MarketingCarrier.FlightNumber}}</li>
        <li>Booking class: {{BookingClass}}</li>
        <li>Number in party: {{NumberInParty}}</li>
        <li>Status: {{Status}}</li>
        <li>OrderNumber: {{OrderNumber}}</li>
        <li>SegmentNumber: {{SegmentNumber}}</li>
        {{/with}}
    </ol>
</div>

Directly accessing the data returned by ReservationService

While this sample shows how to map data to model and display it via modal with a template, it is also possible to access the data directly (assuming it was present in the PNR), example:

    private displayReservationModel(commandMessageReservationRs: CommandMessageReservationRs): void {
        var reservation = commandMessageReservationRs['Data'];
        reservation.Passengers; //an array containing passengers
        reservation.Passengers[0].GivenName     //is used to return the passenger's given name.
        reservation.Passengers[0].Id            //s used to return the passenger's id.
        reservation.Passengers[0].NameNumber    //is used to return the passenger's name number.
        reservation.Passengers[0].Surname       //is used to return the passenger's last name.
        reservation.Passengers[0].Type          //is used to return the passenger's type.
        reservation.Passengers[0].Source        //is used to hold information about origin of element(original id, from which service it was received).

        reservation.Segments; //holds an array per segment type
        reservation.Segments.AirSegments //holds an array containing air segments
        reservation.Segments.AirSegments.Air[0].Arrival.LocationCode            //is used to return the destination airport code.
        reservation.Segments.AirSegments.Air[0].Arrival.ScheduleDateTime        //is used to return the arrival datetime.
        reservation.Segments.AirSegments.Air[0].Departure.LocationCode          //is used to return the origin airport code.
        reservation.Segments.AirSegments.Air[0].Departure.ScheduleDateTime      //is used to return the departure datetime.
        reservation.Segments.AirSegments.Air[0].MarketingCarrier.Code           //is used to return the marketing airline code.
        reservation.Segments.AirSegments.Air[0].MarketingCarrier.FlightNumber   //is used to return the marketing airline code.
        reservation.Segments.AirSegments.Air[0].BookingClass                    //is used to return the booking class.
        reservation.Segments.AirSegments.Air[0].NumberInParty                   //is used to return the number in party.
        reservation.Segments.AirSegments.Air[0].Status                          //is used to return the segment status.
        reservation.Segments.AirSegments.Air[0].Id                              //is used to return the segment id.
        reservation.Segments.AirSegments.Air[0].Source                          //is used to hold information about origin of element(original id, from which service it was received).
        reservation.Segments.AirSegments.Air[0].OrderNumber                     //is used to return the PNR order number of the segment
        reservation.Segments.AirSegments.Air[0].SegmentNumber                   //is used to return the segment number.
    }