SolidStudies - Added interface

solidjobs · Mar 26, 2023 · f2cf284 · f2cf284
1 parent 792fe0d
commit f2cf284
Show file tree

Hide file tree

Showing 10 changed files with 101 additions and 4 deletions.
diff --git a/src/app/app-components/training-app/course-certificate/course-certificate.component.css b/src/app/app-components/training-app/course-certificate/course-certificate.component.css
diff --git a/src/app/app-components/training-app/course-certificate/course-certificate.component.html b/src/app/app-components/training-app/course-certificate/course-certificate.component.html
@@ -0,0 +1 @@
+<p>course-certificate works!</p>
diff --git a/src/app/app-components/training-app/course-certificate/course-certificate.component.spec.ts b/src/app/app-components/training-app/course-certificate/course-certificate.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CourseCertificateComponent } from './course-certificate.component';
+
+describe('CourseCertificateComponent', () => {
+  let component: CourseCertificateComponent;
+  let fixture: ComponentFixture<CourseCertificateComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CourseCertificateComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CourseCertificateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/app-components/training-app/course-certificate/course-certificate.component.ts b/src/app/app-components/training-app/course-certificate/course-certificate.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-course-certificate',
+  templateUrl: './course-certificate.component.html',
+  styleUrls: ['./course-certificate.component.css']
+})
+export class CourseCertificateComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
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
@@ -70,7 +70,7 @@
   </style>
 </head>
 <body onload="scrollToContent()">
-<div class="container">
+<div class="container" *ngIf="!loading && !course">
   <div class="card z-depth-3">
     <div class="card-image">
       <img class="axolotl-image" src="/assets/img/cv-app/img-header-logo.png" alt="Axolotl">
@@ -105,6 +105,7 @@ <h5>Nota importante:</h5>
     </div>
   </div>
 </div>
+<app-loading *ngIf="loading"></app-loading>
 <script>
   function scrollToContent() {
     const container = document.querySelector('.container');

diff --git a/src/app/app-components/training-app/training-header/training-header.component.css b/src/app/app-components/training-app/training-header/training-header.component.css
@@ -0,0 +1,34 @@
+#margin-content {margin-bottom: 1%;}
+#number{font-size: 1.5em;}
+#round-avatar{border-radius: 50%; }
+#check{margin-left:50%;}
+.text-nowrap{
+  white-space: nowrap;
+}
+
+.user-view {
+  text-align: center;
+}
+
+.circle {
+  margin: 0 auto;
+  position: relative;
+}
+
+@media screen and (max-width: 425px) {
+  .tabs .tab a {
+    font-size: 10px;
+  }
+}
+
+@media screen and (max-width: 375px) {
+  .tabs .tab a {
+    font-size: 9px;
+  }
+}
+
+@media screen and (max-width: 320px) {
+  .tabs .tab a {
+    font-size: 7px;
+  }
+}
diff --git a/src/app/app-components/training-app/training-header/training-header.component.html b/src/app/app-components/training-app/training-header/training-header.component.html
@@ -1 +1,6 @@
-<p>training-header works!</p>
+<div class="row">
+  <ul class="tabs" id="row-tab">
+    <li class="tab col s6"><a [ngClass]="{'active': this.index === 0}" class="active" href="/studies" routerLink="/studies"><span>1.</span>Estudiar</a></li>
+    <li class="tab col s6"><a [ngClass]="{'active': this.index === 1}" href="/studies/certificates" routerLink="/studies/certificates" ><span>2.</span>Certificados</a></li>
+  </ul>
+</div>
diff --git a/src/app/app-components/training-app/training-header/training-header.component.ts b/src/app/app-components/training-app/training-header/training-header.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import {Router} from '@angular/router';
 
 @Component({
   selector: 'app-training-header',
@@ -7,9 +8,17 @@ import { Component, OnInit } from '@angular/core';
 })
 export class TrainingHeaderComponent implements OnInit {
 
-  constructor() { }
+  constructor(private router: Router) { }
+
+  index = 0;
+
+  url_index = {
+    '/studies': 0,
+    '/studies/certificates': 1
+  }
 
   ngOnInit() {
+     this.index = this.url_index[this.router.url];
   }
 
 }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -26,6 +26,7 @@ import { TrainingAppComponent } from './app-components/training-app/training-app
 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';
+import { CourseCertificateComponent } from './app-components/training-app/course-certificate/course-certificate.component';
 
 export function HttpLoaderFactory(http: HttpClient) {
     return new TranslateHttpLoader(http, 'assets/i18n/', '.json');
@@ -47,7 +48,8 @@ export function HttpLoaderFactory(http: HttpClient) {
     TrainingAppComponent,
     CreateCourseComponent,
     TrainingHeaderComponent,
-    CourseComponent
+    CourseComponent,
+    CourseCertificateComponent
   ],
   imports: [
     BrowserModule,

diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
@@ -10,6 +10,7 @@ import {CvAppExportComponent} from './app-components/cv-app/cv-app-export/cv-app
 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';
+import {CourseCertificateComponent} from './app-components/training-app/course-certificate/course-certificate.component';
 
 const appRoutes: Routes = [
   {path: '', component: HomepageComponent},
@@ -41,6 +42,10 @@ const appRoutes: Routes = [
       {
         path: 'course/:uuid',
         component: CourseComponent
+      },
+      {
+        path: 'certificates',
+        component: CourseCertificateComponent
       }
     ]
   }