File: /var/www/vhost/disk-apps/pwa.sports-crowd.com/src/app/pages/tickets/tickets.page.html
<ion-content class="ion-text-center ion-no-padding">
<app-empty-component *ngIf="matchEvents && !matchEvents.length" [emptySettingsSlide]="emptySettingsSlide">
</app-empty-component>
<mat-horizontal-stepper linear #stepper (selectionChange)="selectionChange($event)" [selectedIndex]="current_tab"
*ngIf="matchEvents && matchEvents.length" style="height: 100%;">
<mat-step [stepControl]="eventGroup">
<form [formGroup]="eventGroup">
<ng-template matStepLabel>{{ current_match?.name }}</ng-template>
<mat-form-field appearance="fill">
<mat-label>{{ 'tickets.label_events' | translate }}</mat-label>
<mat-select formControlName="match_event" required [(ngModel)]="matchEventId" disabled>
<mat-option *ngFor="let matchEvent of matchEvents" [value]="matchEvent.id"> {{matchEvent.name}}
</mat-option>
</mat-select>
<mat-error *ngIf="matchEventCtrl.hasError('required')"> {{ 'tickets.error_select_event' | translate }}
</mat-error>
<mat-hint>{{matchEventCtrl.value?.sound}}</mat-hint>
</mat-form-field>
</form>
</mat-step>
<mat-step>
<ng-template matStepLabel>{{ name_subzone != '' ? name_subzone : ('tickets.label_location' | translate)
}}</ng-template>
<div class="container_image">
<ion-item lines="none" style="font-size: min(3vw, 12px); --padding-start: 0px;">
<div style="background-color:#D8D8D6; width:32px; height:32px; margin-right: 5px;"></div>
<ion-label>{{ 'tickets.available' | translate }}</ion-label>
</ion-item>
<ion-item lines="none" style="font-size: min(3vw, 12px); --padding-start: 0px;">
<div style="background-color:#6A6A6A; width:32px; height:32px; margin-right: 5px;"></div>
<ion-label>{{ 'tickets.locked' | translate }}</ion-label>
</ion-item>
<ion-item lines="none" style="font-size: min(3vw, 12px); --padding-start: 0px;">
<div style="background-color:#FF0000; width:32px; height:32px; margin-right: 5px;"></div>
<ion-label>{{ 'tickets.no_capacity' | translate }}</ion-label>
</ion-item>
</div>
<div #stadiumContainer style="overflow: auto;">
<div class="zoom-controls">
<button class="zoom-button-in" (click)="zoomIn()">
<ion-icon name="add-outline"></ion-icon>
</button>
<button class="zoom-button-out" (click)="zoomOut()">
<ion-icon name="remove-outline"></ion-icon>
</button>
</div>
<div #stadium [attr.disabled]="stadiumContainerInvalid ? true : null"></div>
</div>
</mat-step>
<mat-step>
<ng-template matStepLabel>{{ 'tickets.seat_selection' | translate }}</ng-template>
<div class="container_image" #container_image (click)="presentPopover($event)">
<ion-item lines="none" style="font-size: min(3vw, 12px); --padding-start: 0px;">
<ion-avatar slot="start">
<img src="{{ cityProvider._urlGallery }}ticketing/seats/available.png?_dc={{ time }}" />
</ion-avatar>
<ion-label>{{ 'tickets.image_1' | translate }}</ion-label>
</ion-item>
<ion-item lines="none" style="font-size: min(3vw, 12px); --padding-start: 0px;">
<ion-avatar slot="start">
<img src="{{ cityProvider._urlGallery }}ticketing/seats/not_available.png?_dc={{ time }}" />
</ion-avatar>
<ion-label>{{ 'tickets.image_3' | translate }}</ion-label>
</ion-item>
</div>
<div *ngFor="let item of group_seats" class="container_row">
<ion-label class="label_letter">{{ item.value[0].letter.name }}</ion-label>
<div *ngFor="let seat of item.value" class="d-i-t" seatSelected (click)="selectSeat($event,seat)">
<img src="{{ cityProvider._urlGallery }}ticketing/seats/available.png?_dc={{ time }}"
*ngIf="!seat.ticket && !seat.ticket_user_block && !seat.presubscription && !seat.match_event_stage.length"
alt="seat_image" class="image_seat" />
<img src="{{ cityProvider._urlGallery }}ticketing/seats/not_available.png?_dc={{ time }}"
*ngIf="seat.ticket || seat.ticket_user_block || seat.presubscription || seat.match_event_stage.length"
alt="seat_image" class="image_seat" />
<ion-label class="m-r-5">{{ seat.code }}</ion-label>
</div>
</div>
</mat-step>
<mat-step>
<ng-template matStepLabel>{{ 'tickets.checkout' | translate }}</ng-template>
<ion-card>
<ion-item lines="full" *ngIf="current_match && current_match.name != ''">
<ion-icon name="ticket-outline" slot="start" size="small" color="secondary"
style="margin-right: 5px;"></ion-icon>
<ion-label color="medium">{{ current_match.name }}</ion-label>
</ion-item>
<ion-list>
<ion-item *ngFor="let buy_ticket of buy_tickets; let i = index"
detail="{{ buy_ticket.ticket_type_id == 2 ? true : false }}"
(click)="openListSuscription(i,buy_ticket.ticket_type_id)">
<ion-label>
<h2 class="not-margin">{{ buy_ticket.ticket_type_id == 1 ? ('tickets.type_1' | translate) :
('tickets.type_2' | translate) }}: {{ buy_ticket.zone_name }}</h2>
<h3 class="not-margin">
{{ 'tickets.label_seat' | translate }}: {{ buy_ticket.seat.letter.name }}{{ buy_ticket.seat.code }}
</h3>
<p>{{ buy_ticket.price | formatCurrency : currency }}</p>
</ion-label>
<ion-chip *ngIf="buy_ticket.ticket_type_id == 2 && buy_ticket.dataTicket">
<ion-avatar>
<img class="radius"
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+" />
</ion-avatar>
<ion-label>{{ buy_ticket.dataTicket.first_name + " " + buy_ticket.dataTicket.last_name }}</ion-label>
</ion-chip>
</ion-item>
</ion-list>
<hr />
<ion-card [disabled]="credit_locked" hidden>
<ion-item lines="none" class="item_coins">
<ion-avatar slot="start">
<img src="assets/img/coins/coin.png" />
</ion-avatar>
<ion-label>{{ 'AVAILABLE_CREDIT' | translate }}</ion-label>
<ion-item lines="none" slot="end">
<app-coin-info [price]="currentCoinsInMoney"></app-coin-info>
<ion-checkbox slot="end" [(ngModel)]="payWithCoins" (ionChange)="validatePayWithCoins()"></ion-checkbox>
</ion-item>
</ion-item>
<ion-item lines="none" class="item_coins" *ngIf="coinsAfterPurchase != 0">
<ion-label>{{ 'COINS_AFTER_PURCHASE' | translate }}</ion-label>
<ion-item lines="none" slot="end">
<app-coin-info [price]="coinsAfterPurchase"></app-coin-info>
</ion-item>
</ion-item>
<ion-item *ngIf="credit_locked">
<ion-label class="noteCoins">{{ 'BLOCKED_USER_CREDIT' | translate }}</ion-label>
</ion-item>
</ion-card>
<ion-grid>
<ion-row>
<ion-col size="12">
<ion-item lines="none">
<ion-label>
<p class="detailPayment"> {{ 'subtotal_label' | translate }} </p>
<p class="detailPayment" *ngIf="serviceChargeEnabled && serviceCharge">
{{ 'service_label' | translate }} </p>
<h2> {{ 'total_label' | translate }} </h2>
</ion-label>
<ion-label slot="end" style="display: flex; flex-flow: column; align-items: flex-end;">
<p class="detailPayment"> {{ subtotal | formatCurrency : currency }} </p>
<p class="detailPayment" *ngIf="serviceChargeEnabled && serviceCharge"> {{ serviceCharge | formatCurrency : currency }} </p>
<h2> {{ total | formatCurrency : currency }} </h2>
<app-coin-info [price]="total" *ngIf="enablePaymentWithCoins"></app-coin-info>
</ion-label>
</ion-item>
<ion-item lines="none">
<ion-button class="payButton" size="large" (click)="createBlocks()">
{{ 'tickets.buy_tickets' | translate}}
</ion-button>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
</ion-card>
</mat-step>
</mat-horizontal-stepper>
<ion-modal [isOpen]="isModalOpen">
<ng-template>
<ion-content>
<ion-toolbar>
<ion-title>{{ 'tickets.type_ticket' | translate}}</ion-title>
<ion-buttons slot="end">
<ion-button color="light" (click)="closeModal()">{{ 'all.close' | translate}}</ion-button>
</ion-buttons>
</ion-toolbar>
<ion-item class="inputBorderRadius ion-margin-bottom" lines="none">
<ion-label position="stacked"></ion-label>
<ion-select interface="popover" name="studentDocumentType" required class="ion-text-center placeholder-select"
placeholder="{{ 'TEXT_OK_SELECT' | translate }}" (ionChange)="onTypeTicketSelect($event)">
<ion-select-option class="ion-text-center" *ngFor="let item of typeTickets" [value]="item">
{{ item.label }}
</ion-select-option>
</ion-select>
</ion-item>
</ion-content>
</ng-template>
</ion-modal>
</ion-content>
<ion-footer class="ion-no-border ion-text-center">
<ion-toolbar style="height: 50px; display: flex;">
<div>
<ion-fab vertical="bottom" horizontal="start" slot="fixed">
<button mat-mini-fab color="light" (click)="presentAlertConfirmExit()">
<ion-icon name="close-outline" size="small"></ion-icon>
</button>
</ion-fab>
<ion-fab vertical="bottom" horizontal="end" slot="fixed" *ngIf="matchEvents && matchEvents.length">
<button mat-mini-fab color="light" *ngIf="current_tab > 1" (click)="buttonsFabsBack()" class="margin-button-r">
<ion-icon name="chevron-back-outline"></ion-icon>
</button>
<button mat-mini-fab color="light" *ngIf="showFabsNextButton && current_tab < 3" (click)="buttonsFabsNext()">
<ion-icon name="chevron-forward-outline"></ion-icon>
</button>
</ion-fab>
</div>
</ion-toolbar>
</ion-footer>