SolidStudies - Added interface

src/app/app-components/training-app/course/course.component.css

@@ -0,0 +1,29 @@
+.container {
+  max-width: 100%;
+}
+
+.video-container {
+  position: relative;
+  padding-bottom: 56.25%;
+  height: 0;
+  overflow: hidden;
+}
+
+.video-container iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.lecture-navigation {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 1rem;
+}
+
+.lecture-action {
+  display: flex;
+  justify-content: center;
+}

src/app/app-components/training-app/course/course.component.html

@@ -0,0 +1,26 @@
+<div class="container" *ngIf="course && lectures">
+  <h5>{{ course.title }}</h5>
+  <h6>Lección {{ currentLectureIndex + 1 }} de {{ lectures.length }}</h6>
+  <div class="video-container">
+    <iframe
+      [src]="getVideoUrl(lectures[currentLectureIndex]?.youtube_code)"
+      frameborder="0"
+      allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+      allowfullscreen
+    ></iframe>
+  </div>
+  <div class="lecture-navigation">
+    <button class="btn" (click)="goToPreviousLecture()" [disabled]="currentLectureIndex === 0">&larr;</button>
+    <button class="btn" (click)="goToNextLecture()" [disabled]="currentLectureIndex === lectures.length - 1">&rarr;</button>
+  </div>
+  <div class="lecture-action">
+    <label>
+      <input type="checkbox" (change)="markAsDone(lectures[currentLectureIndex])" [disabled]="lectures[currentLectureIndex]?.status === 1" />
+      <span>Visto</span>
+    </label>
+  </div>
+  <div *ngIf="isCourseCompleted()">
+    <a class="btn" href="https://studies.solidjobs.org/course/{{courseUuid}}/certificate">Obtén tu certificado</a>
+  </div>
+</div>
+<app-loading *ngIf="this.loading"></app-loading>

src/app/app-components/training-app/course/course.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CourseComponent } from './course.component';
+
+describe('CourseComponent', () => {
+  let component: CourseComponent;
+  let fixture: ComponentFixture<CourseComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CourseComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CourseComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/app-components/training-app/course/course.component.ts

@@ -0,0 +1,76 @@
+import {Component, OnInit} from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
+import {HttpClient} from '@angular/common/http';
+import {DomSanitizer, SafeResourceUrl} from '@angular/platform-browser';
+
+@Component({
+  selector: 'app-course',
+  templateUrl: './course.component.html',
+  styleUrls: ['./course.component.css']
+})
+export class CourseComponent implements OnInit {
+  courseUuid: string;
+  course: any;
+  lectures: any[];
+  currentLectureIndex: number = 0;
+  loading = true;
+
+  constructor(private route: ActivatedRoute, private http: HttpClient, private sanitizer: DomSanitizer) {
+  }
+
+  ngOnInit() {
+    this.courseUuid = this.route.snapshot.paramMap.get('uuid');
+
+    this.getCourse();
+    this.getLectures();
+  }
+
+  getCourse() {
+    const token = localStorage.getItem('session');
+    const headers = {token: token};
+    this.http.get('https://studies.solidjobs.org/course', {headers}).subscribe((courses: any[]) => {
+      this.course = courses.find(course => course.uuid === this.courseUuid);
+    });
+  }
+
+  getLectures() {
+    const token = localStorage.getItem('session');
+    const headers = {token: token};
+    this.http.get(`https://studies.solidjobs.org/course/${this.courseUuid}`, {headers}).subscribe((lectures: any[]) => {
+      this.lectures = lectures;
+      this.loading = false;
+    });
+  }
+
+  markAsDone(lecture) {
+    const token = localStorage.getItem('session');
+    const headers = {token: token};
+    const body = {status: 1};
+    this.http
+      .put(`https://studies.solidjobs.org/course/${this.courseUuid}/lecture/${lecture.uuid}`, body, {headers})
+      .subscribe(() => {
+        lecture.status = 1;
+        this.goToNextLecture();
+      });
+  }
+
+  goToNextLecture() {
+    if (this.currentLectureIndex < this.lectures.length - 1) {
+      this.currentLectureIndex++;
+    }
+  }
+
+  goToPreviousLecture() {
+    if (this.currentLectureIndex > 0) {
+      this.currentLectureIndex--;
+    }
+  }
+
+  isCourseCompleted() {
+    return this.lectures.every(lecture => lecture.status === 1);
+  }
+
+  getVideoUrl(youtubeCode: string): SafeResourceUrl {
+    return this.sanitizer.bypassSecurityTrustResourceUrl(`https://www.youtube.com/embed/${youtubeCode}?autoplay=1`);
+  }
+}

src/app/app-components/training-app/create-course/create-course.component.ts

@@ -1,4 +1,6 @@
 import { Component, OnInit } from '@angular/core';
+import {HttpClient} from '@angular/common/http';
+import {Router} from '@angular/router';
 
 @Component({
   selector: 'app-create-course',
@@ -7,9 +9,31 @@ import { Component, OnInit } from '@angular/core';
 })
 export class CreateCourseComponent implements OnInit {
 
-  constructor() { }
+  private course: any;
+  private loading = true;
+
+  constructor(private http: HttpClient, private router: Router) {}
 
   ngOnInit() {
+    this.getCourse();
+  }
+
+  getCourse() {
+    const token = localStorage.getItem('session');
+    const headers = {token: token};
+    this.http.get('https://studies.solidjobs.org/course', {headers}).subscribe((courses: any[]) => {
+      this.course = courses.find(course => course.status === 0);
+      this.loading = false;
+      this.evalAction();
+    });
+  }
+
+  evalAction() {
+    if (this.course) {
+      this.router.navigate(['/studies/course', this.course.uuid]);
+    } else {
+      this.loading = false;
+    }
   }
 
 }

src/app/app.module.ts

@@ -25,6 +25,7 @@ import {PanelApiTokenService} from './services/panel-api-services/panel-api-toke
 import { TrainingAppComponent } from './app-components/training-app/training-app.component';
 import { CreateCourseComponent } from './app-components/training-app/create-course/create-course.component';
 import { TrainingHeaderComponent } from './app-components/training-app/training-header/training-header.component';
+import { CourseComponent } from './app-components/training-app/course/course.component';
 
 export function HttpLoaderFactory(http: HttpClient) {
     return new TranslateHttpLoader(http, 'assets/i18n/', '.json');
@@ -45,8 +46,8 @@ export function HttpLoaderFactory(http: HttpClient) {
     LoadingComponent,
     TrainingAppComponent,
     CreateCourseComponent,
-    TrainingHeaderComponent
-
+    TrainingHeaderComponent,
+    CourseComponent
   ],
   imports: [
     BrowserModule,

src/app/app.routes.ts

@@ -9,6 +9,7 @@ import {CvAppContentComponent} from './app-components/cv-app/cv-app-content/cv-a
 import {CvAppExportComponent} from './app-components/cv-app/cv-app-export/cv-app-export.component';
 import {TrainingAppComponent} from "./app-components/training-app/training-app.component";
 import {CreateCourseComponent} from './app-components/training-app/create-course/create-course.component';
+import {CourseComponent} from './app-components/training-app/course/course.component';
 
 const appRoutes: Routes = [
   {path: '', component: HomepageComponent},
@@ -37,6 +38,10 @@ const appRoutes: Routes = [
         path: '',
         component: CreateCourseComponent
       },
+      {
+        path: 'course/:uuid',
+        component: CourseComponent
+      }
     ]
   }
 ];