SolidStudies - Added interface

solidjobs · Mar 26, 2023 · 8db03e1 · 8db03e1
1 parent 12e288e
commit 8db03e1
Show file tree

Hide file tree

Showing 15 changed files with 253 additions and 4 deletions.
diff --git a/Makefile b/Makefile
@@ -5,5 +5,8 @@ up:
 down:
 	@docker-compose down || docker compose down
 
+shell:
+	@docker-compose run -it solidjobs-web bash || docker compose run -it solidjobs-web bash
+
 build:
 	@docker-compose run -it solidjobs-web ng build --prod || docker compose run -it solidjobs-web ng build --prod
diff --git a/src/app/app-components/training-app/create-course/create-course.component.css b/src/app/app-components/training-app/create-course/create-course.component.css
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
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>SolidStudies</title>
+  <style>
+    body {
+      font-family: 'Roboto', sans-serif;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      min-height: 100vh;
+      margin: 0;
+      background-color: #f5f5f5;
+    }
+
+    .axolotl-image {
+      height: 112px;
+      width: 140px !important;
+      margin: 0 auto;
+    }
+
+    .list-container {
+      padding-left: 1rem;
+    }
+
+    .list-container li {
+      padding: 4px 0;
+    }
+
+    .list-container ul {
+      list-style-type: circle;
+      padding-left: 20px;
+    }
+
+    .course-query-container {
+      display: flex;
+      align-items: center;
+    }
+
+    .course-query-container label {
+      font-size: 1.2rem;
+      margin-right: 10px;
+    }
+
+    .course-query-container input {
+      flex-grow: 1;
+    }
+
+    .btn-send {
+      margin-left: 10px;
+    }
+
+    .list-container li::before {
+      content: '•' !important;
+      display: inline-block;
+      margin-right: 6px;
+    }
+
+    .list-container ul li::before {
+      content: '';
+    }
+
+    @media (min-width: 601px) {
+      .container {
+        width: 50%;
+      }
+    }
+  </style>
+</head>
+<body onload="scrollToContent()">
+<div class="container">
+  <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">
+    </div>
+    <div class="card-content">
+      <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>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>
+
+        <h5>Consejos para generar tu curso:</h5>
+        <ul>
+          <li><b>Usa un lenguaje preciso</b> al describir lo que deseas aprender, como "Desarrollo web con Wordpress" en lugar de simplemente "aprender web".</li>
+          <li><b>Enfócate en un curso a la vez:</b> nuestro objetivo es ayudarte a completar un curso en lugar de empezar varios y no terminar ninguno.</li>
+          <li><b>Los cursos se basan en vídeos</b>, pero planeamos agregar más funciones y tipos de contenido en el futuro.</li>
+        </ul>
+
+        <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>
+    </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">
+        <button class="btn-small waves-effect waves-light btn-send"><i class="material-icons">send</i>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+  function scrollToContent() {
+    const container = document.querySelector('.container');
+    container.scrollIntoView({behavior: 'smooth', block: 'start'});
+  }
+</script>
+</body>
+</html>
diff --git a/src/app/app-components/training-app/create-course/create-course.component.spec.ts b/src/app/app-components/training-app/create-course/create-course.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CreateCourseComponent } from './create-course.component';
+
+describe('CreateCourseComponent', () => {
+  let component: CreateCourseComponent;
+  let fixture: ComponentFixture<CreateCourseComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CreateCourseComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CreateCourseComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
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
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-create-course',
+  templateUrl: './create-course.component.html',
+  styleUrls: ['./create-course.component.css']
+})
+export class CreateCourseComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/app-components/training-app/training-app.component.html b/src/app/app-components/training-app/training-app.component.html
@@ -1 +1,41 @@
-<p>training-app works!</p>
+<!-- Menu lateral -->
+<div class="left-align white">
+  <ul id="slide-out" class="sidenav">
+    <li><a class="waves-effect" href="/cv"><i aria-label="Crear CV" class="material-icons">create</i>Crea tu currículum</a></li>
+    <li>
+      <div class="divider"></div>
+    </li>
+    <li><a class="waves-effect" href="https://solidjobs.org/colabora/" target="_blank"><i class="material-icons">account_balance_wallet</i>Colabora, te necesitamos.</a></li>
+
+    <li>
+      <div class="divider"></div>
+    </li>
+
+    <li><a class="waves-effect" href="https://solidjobs.org/politica-de-privacidad/" target="_blank"><i class="material-icons">subject</i>Política de privacidad</a></li>
+    <li><a class="waves-effect" href="https://solidjobs.org/avisos-legales/" target="_blank"><i class="material-icons">description</i>Avisos legales</a></li>
+    <li><a class="waves-effect" href="https://solidjobs.org/politica-de-cookies/" target="_blank"><i class="material-icons">description</i>Política de cookies</a></li>
+    <li><a class="waves-effect" href="https://solidjobs.org/" target="_blank"><i class="material-icons">home</i>Ir a solidjobs.org</a></li>
+    <li><a class="waves-effect" href="https://solidjobs.org/contacto/" target="_blank"><i class="material-icons">mail</i>Contacto</a></li>
+  </ul>
+
+  <nav>
+    <div class="nav-wrapper white">
+      <a href="#" data-target="slide-out" style="display: block !important;" class="sidenav-trigger left">
+        <i class="material-icons pink-text">menu</i>
+      </a>
+      <ul class="brand-logo center">
+        <li>
+          <img alt="Logo SolidJobs" src="/assets/img/cv-app/img-header-logo.png" style="max-width: 70px;" />
+        </li>
+      </ul>
+    </div>
+  </nav>
+
+  <div style="text-align: center;margin: 5px 0;">
+    <img alt="Solidjobs, crea tu currículum fácil" src="/assets/img/studies-app/right-arrow2.png" style="width: 70%;max-width: 538px;" />
+  </div>
+</div>
+
+<app-training-header></app-training-header>
+
+<router-outlet></router-outlet>
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
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
@@ -0,0 +1 @@
+<p>training-header works!</p>
diff --git a/src/app/app-components/training-app/training-header/training-header.component.spec.ts b/src/app/app-components/training-app/training-header/training-header.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TrainingHeaderComponent } from './training-header.component';
+
+describe('TrainingHeaderComponent', () => {
+  let component: TrainingHeaderComponent;
+  let fixture: ComponentFixture<TrainingHeaderComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TrainingHeaderComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TrainingHeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
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
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-training-header',
+  templateUrl: './training-header.component.html',
+  styleUrls: ['./training-header.component.css']
+})
+export class TrainingHeaderComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -23,6 +23,8 @@ import {PanelApiCvExportPdfService} from './services/panel-api-services/panel-ap
 import {LoadingComponent} from './app-components/commons/loading/loading.component';
 import {PanelApiTokenService} from './services/panel-api-services/panel-api-token.service';
 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';
 
 export function HttpLoaderFactory(http: HttpClient) {
     return new TranslateHttpLoader(http, 'assets/i18n/', '.json');
@@ -41,7 +43,9 @@ export function HttpLoaderFactory(http: HttpClient) {
     CvAppPersonalDataComponent,
     CvAppHeaderComponent,
     LoadingComponent,
-    TrainingAppComponent
+    TrainingAppComponent,
+    CreateCourseComponent,
+    TrainingHeaderComponent
 
   ],
   imports: [

diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
@@ -8,6 +8,7 @@ import {CvAppPersonalDataComponent} from './app-components/cv-app/cv-app-persona
 import {CvAppContentComponent} from './app-components/cv-app/cv-app-content/cv-app-content.component';
 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';
 
 const appRoutes: Routes = [
   {path: '', component: HomepageComponent},
@@ -30,8 +31,13 @@ const appRoutes: Routes = [
     ]
   },
   {
-    path: 'training', component: TrainingAppComponent, canActivate: [AuthGuardService],
-    children: []
+    path: 'studies', component: TrainingAppComponent, canActivate: [AuthGuardService],
+    children: [
+      {
+        path: '',
+        component: CreateCourseComponent
+      },
+    ]
   }
 ];
 

diff --git a/src/assets/img/studies-app/btn_small_ss.png b/src/assets/img/studies-app/btn_small_ss.png
diff --git a/src/assets/img/studies-app/right-arrow copy.png b/src/assets/img/studies-app/right-arrow copy.png
diff --git a/src/assets/img/studies-app/right-arrow2.png b/src/assets/img/studies-app/right-arrow2.png