Obtener Rodada

¿Cómo implementar una pantalla de detalles en una aplicación de rodadas?

Para mejorar la experiencia del usuario en tu aplicación de rodadas, es crucial poder acceder a los detalles específicos de cada evento, como temperaturas, distancias y tiempos. Actualmente, sólo se muestran el título y la fecha de cada rodada. Es por eso que implementar una pantalla detallada para cada rodada enriquecerá significativamente tu aplicación. Aquí te explicamos cómo lograrlo.

¿Cómo se crea una nueva pantalla para los detalles de una rodada?

Inicialmente, debes generar una nueva pantalla dedicada a mostrar los detalles de una rodada específica.

• Generación de la pantalla: Crea un archivo nuevo llamado raid.page.ts.
• Definición de la ruta: Añade una nueva ruta en el archivo de rutas existente para enlazar esta pantalla.
• Configuración de la pantalla: Utiliza la estructura de la pantalla existente raids.page.ts como base y cópiala en el nuevo archivo.

@Component({
  selector: 'app-raid',
  templateUrl: './raid.page.html',
  styleUrls: ['./raid.page.scss'],
})
export class RaidPage implements OnInit {
  raid: Raid;

  constructor(private raidService: RaidService, private navCtrl: NavController) {}

  ngOnInit() {
    this.raid = this.raidService.getRaidDetails(this.route.snapshot.paramMap.get('id'));
  }

  deleteRaid() {
    this.raidService.deleteRaid(this.raid.id);
    this.navCtrl.pop();
  }
}

¿Cómo ajustar la navegación y la estructura de HTML?

Una vez creada la estructura básica, es momento de ajustar la navegación y los detalles de HTML en tu aplicación.

• Modificar HTML y navegación: Retira cualquier lista que iteraba sobre múltiples rodadas y ajusta la interfaz de usuario en raid.page.html.

<ion-header>
  <ion-toolbar>
    <ion-title>{{ raid.title }}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <!-- Detalles de la rodada -->
  <ion-card *ngIf="raid">
    <ion-card-header>
      <ion-card-title>{{ raid.title }}</ion-card-title>
      <ion-card-subtitle>{{ raid.date }}</ion-card-subtitle>
    </ion-card-header>
    <ion-card-content>
      <p>Distancia: {{ raid.distance }} km</p>
      <p>Temperatura: {{ raid.temperature }} °C</p>
      <p>Tiempo estimado: {{ raid.time }} hrs</p>
    </ion-card-content>
  </ion-card>

  <!-- Botón de regresar -->
  <ion-button (click)="navCtrl.pop()">Regresar</ion-button>
</ion-content>

• Configurar la nave control: Inyecta NavController para gestionar la navegación cuando el usuario desea regresar a la lista principal de rodadas.

¿Cómo aplicar estilos para mejorar la interfaz?

La apariencia también es vital. Para hacer la vista más atractiva:

• Estilo oscuro y botón 'Back': Asegúrate de que las configuraciones de estilo se adapten al modo oscuro y añade un botón para facilitar el regreso a la pantalla anterior.

.page-raid {
  ion-card {
    background-color: #1e1e1e;
    color: white;
  }
  
  ion-button {
    --background: #3b83f6;
    color: white;
  }
}

Este diseño no solo mejora la navegación dentro de la aplicación, sino que también ofrece una interface intuitiva y acorde a las expectativas de los usuarios modernos de aplicaciones móviles. Continúa desarrollando y optimizando tu aplicación con nuevas características que respondan a las necesidades de tus usuarios, y considera integrar validaciones y seguridad en el backend en próximas etapas.