SolidStudies - Added interface

solidjobs · Mar 26, 2023 · 47fff29 · 47fff29
1 parent b3c1c12
commit 47fff29
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 4 deletions.
diff --git a/src/app/app-components/training-app/course/course.component.html b/src/app/app-components/training-app/course/course.component.html
@@ -27,6 +27,7 @@ <h6>Lección {{ currentLectureIndex + 1 }} de {{ lectures.length }}: <b>{{ lectu
     <p>¡Enhorabuena! Has conseguido terminar el curso, aquí está tu certificado.</p>
     <a class="btn right" target="_blank" href="https://studies.solidjobs.org/course/{{courseUuid}}/certificate">Obtén tu certificado</a>
     <p style="clear: both">Y recuerda <a href="/cv">agregarlo a tu CV.</a></p>
+    <p>Si este curso te ha sido de utilidad, también puedes aportar en <a href="https://solidjobs.org/colabora">COLABORA</a>.</p>
   </div>
 </div>
 <app-loading *ngIf="this.loading"></app-loading>
diff --git a/src/app/app-components/training-app/create-course/create-course.component.html b/src/app/app-components/training-app/create-course/create-course.component.html
@@ -79,7 +79,7 @@
       <div class="list-container">
         <h5>¿Cómo funciona?</h5>
         <ul>
-          <li><b>Escribe lo que quieres estudiar</b> y Ote generará un curso personalizado para ti.</li>
+          <li><b>Escribe lo que quieres estudiar</b> y Ote generará un curso personalizado para ti usando su <i>IA (Inteligencia Artificial)</i>.</li>
           <li>Al completar el curso, <b>recibirás un certificado</b> que indica las horas dedicadas, por ejemplo: "Certificado de 6 horas en 'Retoque fotográfico con Photoshop'".</li>
         </ul>
 
@@ -93,12 +93,18 @@ <h5>Consejos para generar tu curso:</h5>
         <h5>Nota importante:</h5>
         <p>Ote está en constante desarrollo y es posible que encuentres errores o demoras al generar un curso. ¡Ten paciencia! Estamos trabajando para mejorar la plataforma en los próximos meses.</p>
 
+        <div *ngIf="!errorMessage" class="error-message-container">
+          <h5 style="color: red">¿Por qué ha ocurrido este error?</h5>
+          <p>Parece que: {{ errorMessage }}.</p>
+          <p>Por favor, ten en cuenta que esto es un Proof Of Concept y muchas cosas serán mejoradas tras estudiar el producto.</p>
+          <p><i>Puedes volver a intentarlo en un minuto.</i></p>
+        </div>
       </div>
     </div>
     <div class="card-action">
       <div class="course-query-container">
         <label for="course-query">Quiero aprender</label>
-        <input id="course-query" type="text" placeholder="Inglés nivel básico">
+        <input [(ngModel)]="courseQuery" id="course-query" type="text" placeholder="Inglés nivel básico">
         <button class="btn-small waves-effect waves-light btn-send"><i class="material-icons">send</i>
         </button>
       </div>

diff --git a/src/app/app-components/training-app/create-course/create-course.component.ts b/src/app/app-components/training-app/create-course/create-course.component.ts
@@ -9,8 +9,11 @@ import {Router} from '@angular/router';
 })
 export class CreateCourseComponent implements OnInit {
 
-  private course: any;
-  private loading = true;
+  course: any;
+  loading = true;
+  courseQuery: string;
+  errorMessage: string;
+  error: any;
 
   constructor(private http: HttpClient, private router: Router) {}
 
@@ -36,4 +39,38 @@ export class CreateCourseComponent implements OnInit {
     }
   }
 
+  createCourse() {
+    this.loading = true;
+    this.errorMessage = null;
+
+    const token = localStorage.getItem('session');
+    const headers = {token: token};
+    this.http.post('https://studies.solidjobs.org/course', {prompt: this.courseQuery}, {headers}).subscribe((course: any) => {
+      this.router.navigate(['/studies/course', course.uuid]);
+    }, (error) => {
+      this.loading = false;
+      this.handleErrorResponse(error);
+    });
+  }
+
+  handleErrorResponse(error) {
+    if (error.status === 429) {
+      this.errorMessage = 'Has superado el límite de solicitudes. Por favor, inténtalo de nuevo más tarde.';
+    } else {
+      switch (error.error.type) {
+        case 'COURSE_RATIO':
+          this.errorMessage = 'Ha ocurrido un error al generar el curso. Por favor, inténtalo de nuevo.';
+          break;
+        case 'API_COMMUNICATION':
+          this.errorMessage = 'No se ha podido comunicar con la API. Por favor, inténtalo de nuevo.';
+          break;
+        case 'UNKNOWN':
+        default:
+          this.errorMessage = 'Ha ocurrido un error desconocido. Por favor, inténtalo de nuevo.';
+          break;
+      }
+    }
+
+    this.error = error.error;
+  }
 }