[V0_FILE]typescriptreact:file="src/pages/course-detail/course-detail.html"

{{ selectedCourse?.nameMatter.split(' - ')[1] || selectedCourse?.nameMatter }}

Multimedia y documentos

[V0_FILE]typescriptreact:file="src/pages/course-detail/course-detail.scss" page-course-detail { .course-header { display: flex; flex-direction: column; align-items: center; padding: 20px 0; background-color: #f8f8f8; .avatar-container { margin-bottom: 10px; } .course-avatar { width: 70px; height: 70px; border-radius: 50%; background-color: #f5365c; display: flex; align-items: center; justify-content: center; ion-icon { font-size: 2.5em; color: white; } } h2 { font-size: 1.6rem; font-weight: 500; margin: 0; text-align: center; padding: 0 20px; } } .avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: 500; } .teacher-avatar { background-color: #36b37e; } .student-avatar { // Colors will be assigned dynamically } } [V0_FILE]typescriptreact:file="src/pages/course-detail/course-detail.ts" import { Component } from "@angular/core" import { IonicPage, type NavController, type NavParams } from "ionic-angular" interface Course { nameMatter: string teacher: string | null students: string[] } @IonicPage() @Component({ selector: "page-course-detail", templateUrl: "course-detail.html", }) export class CourseDetailPage { courses: Course[] = [ { nameMatter: "ADMINISTRACIÓN DE SISTEMAS DE INFORMACIÓN _ SEGUNDO2022 (147121)", teacher: null, students: ["ZURITA PINTO LESSIN ALEJANDRO"], }, { nameMatter: "2024-11-06 - ADMINISTRACIÓN DE SISTEMAS II _ SEGUNDO2024 (155301)", teacher: "ALBERTO FREDDY GRAJEDA CHACON", students: [ "ACHABAL ALVAREZ MARIA JOSE", "MALDONADO PEREYRA FREDDY", "VILLARROEL CLAROS ADRIANA", "ZUBIETA HINOJOSA ANDRE NORVAK", "SAAVEDRA JALDIN LUIS ENRIQUE", "ARZE TORREZ NATALIA", "RIOS ZEGARRA ISABEL FABIANA", "VILLARROEL DEHEZA MARIANA NATALIA", "FERNANDEZ BENAVIDES RONALDO ERICK", "ALVAREZ JORDAN ANDREW FERNANDO", "GANDARILLAS CALDERON DIANA", "MENESES ZAMBRANA CRISTIAN RODRIGO", "VARGAS SIRPA OSCAR DANIEL", "ROSAS SAAVEDRA MAYRA SUZETH", "CHAVARRIA COLQUE LAUREN JHANIS", "GALLARDO MENDEZ YERY IMANOL", "KUNO SERRANO PAUL TIMOTHY", "SCHMIDT MARTINEZ PABLO GERHARD", "SOLANO TERAN DIEGO", "VARGAS CRUZ NICOLAS ALEXANDER", "CALVO DIAZ VALENTINA", "VARGAS ORELLANA RODRIGO", ], }, ] selectedCourse: Course avatarColors: string[] = [ "#FF5722", "#E91E63", "#9C27B0", "#673AB7", "#3F51B5", "#2196F3", "#03A9F4", "#00BCD4", "#009688", "#4CAF50", "#8BC34A", "#CDDC39", "#FFC107", "#FF9800", "#795548", ] constructor( public navCtrl: NavController, public navParams: NavParams, ) { // For demo purposes, select the second course which has more students this.selectedCourse = this.courses[1] } getInitials(name: string): string { if (!name) return "" const words = name.split(" ") if (words.length === 1) return words[0].charAt(0) // Get first letter of first name and first letter of last name return (words[0].charAt(0) + words[words.length - 1].charAt(0)).toUpperCase() } getAvatarColor(name: string): string { // Generate a consistent color based on the name const hash = name.split("").reduce((acc, char) => { return char.charCodeAt(0) + ((acc << 5) - acc) }, 0) const index = Math.abs(hash) % this.avatarColors.length return this.avatarColors[index] } getShortCourseName(): string { if (!this.selectedCourse) return "" // Extract the main course name without codes and years const nameParts = this.selectedCourse.nameMatter.split(" - ") if (nameParts.length > 1) { // If format is "2024-11-06 - COURSE NAME _ SEGUNDO2024 (155301)" const coursePart = nameParts[1].split(" _ ")[0] return coursePart } else { // If format is "COURSE NAME _ SEGUNDO2022 (147121)" const coursePart = this.selectedCourse.nameMatter.split(" _ ")[0] return coursePart } } } [V0_FILE]typescriptreact:file="src/pages/home/home.html"

Mis Cursos

[V0_FILE]typescriptreact:file="src/pages/home/home.ts" import { Component } from "@angular/core" import type { NavController } from "ionic-angular" interface Course { nameMatter: string teacher: string | null students: string[] } @Component({ selector: "page-home", templateUrl: "home.html", }) export class HomePage { courses: Course[] = [ { nameMatter: "ADMINISTRACIÓN DE SISTEMAS DE INFORMACIÓN _ SEGUNDO2022 (147121)", teacher: null, students: ["ZURITA PINTO LESSIN ALEJANDRO"], }, { nameMatter: "2024-11-06 - ADMINISTRACIÓN DE SISTEMAS II _ SEGUNDO2024 (155301)", teacher: "ALBERTO FREDDY GRAJEDA CHACON", students: [ "ACHABAL ALVAREZ MARIA JOSE", "MALDONADO PEREYRA FREDDY", "VILLARROEL CLAROS ADRIANA", "ZUBIETA HINOJOSA ANDRE NORVAK", "SAAVEDRA JALDIN LUIS ENRIQUE", "ARZE TORREZ NATALIA", "RIOS ZEGARRA ISABEL FABIANA", "VILLARROEL DEHEZA MARIANA NATALIA", "FERNANDEZ BENAVIDES RONALDO ERICK", "ALVAREZ JORDAN ANDREW FERNANDO", "GANDARILLAS CALDERON DIANA", "MENESES ZAMBRANA CRISTIAN RODRIGO", "VARGAS SIRPA OSCAR DANIEL", "ROSAS SAAVEDRA MAYRA SUZETH", "CHAVARRIA COLQUE LAUREN JHANIS", "GALLARDO MENDEZ YERY IMANOL", "KUNO SERRANO PAUL TIMOTHY", "SCHMIDT MARTINEZ PABLO GERHARD", "SOLANO TERAN DIEGO", "VARGAS CRUZ NICOLAS ALEXANDER", "CALVO DIAZ VALENTINA", "VARGAS ORELLANA RODRIGO", ], }, ] constructor(public navCtrl: NavController) {} openCourseDetail(course: Course) { this.navCtrl.push("CourseDetailPage", { course }) } getShortCourseName(course: Course): string { // Extract the main course name without codes and years const nameParts = course.nameMatter.split(" - ") if (nameParts.length > 1) { // If format is "2024-11-06 - COURSE NAME _ SEGUNDO2024 (155301)" const coursePart = nameParts[1].split(" _ ")[0] return coursePart } else { // If format is "COURSE NAME _ SEGUNDO2022 (147121)" const coursePart = course.nameMatter.split(" _ ")[0] return coursePart } } } [V0_FILE]typescriptreact:file="src/pages/home/home.scss" page-home { .course-avatar { width: 40px; height: 40px; border-radius: 50%; background-color: #3880ff; display: flex; align-items: center; justify-content: center; ion-icon { font-size: 1.8em; color: white; } } } [V0_FILE]typescriptreact:file="src/app/app.module.ts" import { BrowserModule } from "@angular/platform-browser" import { ErrorHandler, NgModule } from "@angular/core" import { IonicApp, IonicErrorHandler, IonicModule } from "ionic-angular" import { SplashScreen } from "@ionic-native/splash-screen" import { StatusBar } from "@ionic-native/status-bar" import { MyApp } from "./app.component" import { HomePage } from "../pages/home/home" @NgModule({ declarations: [MyApp, HomePage], imports: [BrowserModule, IonicModule.forRoot(MyApp)], bootstrap: [IonicApp], entryComponents: [MyApp, HomePage], providers: [StatusBar, SplashScreen, { provide: ErrorHandler, useClass: IonicErrorHandler }], }) export class AppModule {} [V0_FILE]typescriptreact:file="src/app/app.component.ts" import { Component } from "@angular/core" import type { Platform } from "ionic-angular" import type { StatusBar } from "@ionic-native/status-bar" import type { SplashScreen } from "@ionic-native/splash-screen" import { HomePage } from "../pages/home/home" @Component({ templateUrl: "app.html", }) export class MyApp { rootPage: any = HomePage constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) { platform.ready().then(() => { // Okay, so the platform is ready and our plugins are available. // Here you can do any higher level native things you might need. statusBar.styleDefault() splashScreen.hide() }) } } [V0_FILE]typescriptreact:file="src/app/app.html"

{{ getShortCourseName() }}

{{ selectedCourse.teacher }}

{{ student }}

{{ getShortCourseName(course) }}