56 lines
1.9 KiB
HTML
56 lines
1.9 KiB
HTML
<ion-header>
|
|
<ion-toolbar color="primary">
|
|
<ion-title>Mis Reservas</ion-title>
|
|
</ion-toolbar>
|
|
</ion-header>
|
|
|
|
<ion-content>
|
|
<div *ngIf="cargando" class="ion-text-center ion-padding">
|
|
<ion-spinner></ion-spinner>
|
|
<p>Cargando tus reservas...</p>
|
|
</div>
|
|
|
|
<ion-list *ngIf="!cargando && reservas.length > 0">
|
|
<ion-list-header>
|
|
<ion-label>Próximas Clases</ion-label>
|
|
</ion-list-header>
|
|
|
|
<ion-item-sliding *ngFor="let booking of reservas">
|
|
<ion-item>
|
|
<ion-thumbnail slot="start">
|
|
<img [src]="getClassImage(booking)" onerror="this.src='https://cdn-icons-png.flaticon.com/512/42/42829.png'">
|
|
</ion-thumbnail>
|
|
<ion-label>
|
|
<h2>{{ booking.className }}</h2>
|
|
<p>{{ obtenerFechaClase(booking) | date:'EEE, d MMM, h:mm a' }}</p>
|
|
<ion-badge [color]="getStatusColor(booking.status)">
|
|
{{ getStatusText(booking.status) }}
|
|
</ion-badge>
|
|
</ion-label>
|
|
</ion-item>
|
|
|
|
<ion-item-options side="end">
|
|
<ion-item-option color="danger" (click)="confirmarCancelacion(booking)"
|
|
*ngIf="booking.status === 'confirmed'">
|
|
<ion-icon slot="icon-only" name="trash"></ion-icon>
|
|
Cancelar
|
|
</ion-item-option>
|
|
</ion-item-options>
|
|
</ion-item-sliding>
|
|
</ion-list>
|
|
|
|
<ion-refresher slot="fixed" (ionRefresh)="refrescarReservas($event)">
|
|
<ion-refresher-content></ion-refresher-content>
|
|
</ion-refresher>
|
|
|
|
<div *ngIf="!cargando && reservas.length === 0" class="ion-text-center ion-padding empty-state">
|
|
<ion-icon name="calendar-outline" class="large-icon"></ion-icon>
|
|
<h3>No tienes reservas activas</h3>
|
|
<p>Explora las clases disponibles y haz tu primera reserva</p>
|
|
<ion-button expand="block" routerLink="/tabs/classes">
|
|
<ion-icon name="fitness" slot="start"></ion-icon>
|
|
Ver Clases Disponibles
|
|
</ion-button>
|
|
</div>
|
|
</ion-content>
|