- -
- - Rocket Ship - - - - - - - - - - {{ title }} app is running! - - - Rocket Ship Smoke - - -
- - -

Resources

-

Here are some links to help you get started:

- -
- - - - - - Learn Angular - - - - - - - - - - - - CLI Documentation - - - - - - - - - - - - Angular Blog - - - - - -
- - -

Next Steps

-

What do you want to do next with your app?

- - - -
-
- - - - - New Component -
- -
- - - - - Angular Material -
- -
- - - - - Add PWA Support -
- -
- - - - - Add Dependency -
- -
- - - - - Run and Watch Tests -
- -
- - - - - Build for Production -
+
+
- -
- 
ng generate component xyz
- 
ng add @angular/material
- 
ng add @angular/pwa
- 
ng add _____
- 
ng test
- 
ng build
-
- - -
- - - - - - - - - - - - - Angular CLI Logo - - - - - - - - - - - - - Meetup Logo - - - - - - - Discord Logo - - - - -
- - - - - Gray Clouds Background - -
- - - - - - - - - - diff --git a/src/app/app.component.scss b/src/app/app.component.scss index e69de29..e51aae2 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -0,0 +1,6 @@ +.pages-container { + background-color: whitesmoke; + height: calc(100vh - 192px); + overflow-y: overlay; + padding: 0px 50px; +} diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts index 2e7cfc8..882e31d 100644 --- a/src/app/app.component.spec.ts +++ b/src/app/app.component.spec.ts @@ -16,18 +16,18 @@ describe('AppComponent', () => { expect(app).toBeTruthy(); }); - it(`should have as title 'courses-app'`, () => { + it(`should have as title 'video-course'`, () => { const fixture = TestBed.createComponent(AppComponent); const app = fixture.componentInstance; - expect(app.title).toEqual('courses-app'); + expect(app.title).toEqual('video-course'); }); it('should render title', () => { const fixture = TestBed.createComponent(AppComponent); fixture.detectChanges(); - const compiled = fixture.nativeElement; - expect(compiled.querySelector('.content span').textContent).toContain( - 'courses-app app is running!', + const compiled = fixture.nativeElement as HTMLElement; + expect(compiled.querySelector('.content span')?.textContent).toContain( + 'video-course app is running!', ); }); }); diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 5ec3950..8f5b6ea 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -6,5 +6,5 @@ import { Component } from '@angular/core'; styleUrls: ['./app.component.scss'], }) export class AppComponent { - title = 'courses-app'; + title = 'video-course'; } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 8cd9343..730abe4 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,11 +1,25 @@ import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { BreadcrumbModule } from 'angular-crumbs'; + import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; +import { CoreModule } from './core/core.module'; +import { PagesModule } from './pages/pages.module'; +import { SharedModule } from './shared/shared.module'; @NgModule({ declarations: [AppComponent], - imports: [BrowserModule, AppRoutingModule], + imports: [ + AppRoutingModule, + BreadcrumbModule, + BrowserAnimationsModule, + BrowserModule, + CoreModule, + PagesModule, + SharedModule, + ], providers: [], bootstrap: [AppComponent], }) diff --git a/src/app/core/constants/routes.ts b/src/app/core/constants/routes.ts new file mode 100644 index 0000000..8a842b0 --- /dev/null +++ b/src/app/core/constants/routes.ts @@ -0,0 +1,3 @@ +export const HOME = 'home'; +export const COURSES = 'courses'; +export const EDIT_COURSE = 'edit-course'; diff --git a/src/app/core/core.module.ts b/src/app/core/core.module.ts new file mode 100644 index 0000000..339a911 --- /dev/null +++ b/src/app/core/core.module.ts @@ -0,0 +1,12 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + + + +@NgModule({ + declarations: [], + imports: [ + CommonModule + ] +}) +export class CoreModule { } diff --git a/src/app/core/models/course_model.ts b/src/app/core/models/course_model.ts new file mode 100644 index 0000000..5d8bf27 --- /dev/null +++ b/src/app/core/models/course_model.ts @@ -0,0 +1,7 @@ +export interface Course { + id: number; + title: string; + creationDate: string; + duration: number; + description: string; +} diff --git a/src/app/core/models/user_model.ts b/src/app/core/models/user_model.ts new file mode 100644 index 0000000..027dcf1 --- /dev/null +++ b/src/app/core/models/user_model.ts @@ -0,0 +1,5 @@ +export interface User { + id: number; + firstName: string; + lastName: string; +} diff --git a/src/app/core/services/courses_data_service.ts b/src/app/core/services/courses_data_service.ts new file mode 100644 index 0000000..461fcb9 --- /dev/null +++ b/src/app/core/services/courses_data_service.ts @@ -0,0 +1,52 @@ +import { Injectable } from '@angular/core'; +import { Course } from '../models/course_model'; + +@Injectable({ providedIn: 'root' }) +export class CoursesService { + public defaultCourses: Course[] = [ + { + id: 1, + title: 'Course 1 - Lorem ipsum dolor sit', + creationDate: new Date(Date.UTC(new Date().getFullYear(), 0, 1)) + .toISOString() + .substring(0, 10), + duration: 135, + description: + 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi ex, hic ullam ab maxime atque fuga, dolorem dignissimos dicta praesentium iure, quia odit. Accusamus, doloremque.', + }, + { + id: 2, + title: 'Course 2 - A veniam ut vel velit', + creationDate: new Date(Date.UTC(new Date().getFullYear(), 2, 5)) + .toISOString() + .substring(0, 10), + duration: 213, + description: + 'A veniam ut vel velit sint iure quo nihil sit amet consectetur adipisicing. Dignissimos odio mollitia nam tempore.', + }, + { + id: 3, + title: 'Course 3 - Lorem ipsum dolor sit amet', + creationDate: new Date(Date.UTC(new Date().getFullYear(), 1, 21)) + .toISOString() + .substring(0, 10), + duration: 97, + description: + 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis quaerat quo soluta iure vero aliquam libero tenetur, consequatur deleniti consectetur, quam voluptate deserunt perferendis, magni sit quisquam fuga ipsum ex mollitia unde exercitationem. Voluptate earum reprehenderit aliquid quisquam eum dicta.', + }, + { + id: 4, + title: 'Course 4 - Facilis quaerat quo soluta', + creationDate: new Date(Date.UTC(new Date().getFullYear(), 3, 17)) + .toISOString() + .substring(0, 10), + duration: 88, + description: + 'Facilis quaerat quo soluta iure vero aliquam libero tenetur, consequatur deleniti consectetur, quam voluptate deserunt perferendis, magni sit quisquam fuga ipsum ex mollitia unde exercitationem.', + }, + ]; + + getCourses(): Course[] { + return this.defaultCourses; + } +} diff --git a/src/app/pages/courses/components/add-course/add-course.component.html b/src/app/pages/courses/components/add-course/add-course.component.html new file mode 100644 index 0000000..b2a2345 --- /dev/null +++ b/src/app/pages/courses/components/add-course/add-course.component.html @@ -0,0 +1,3 @@ +
+ +
diff --git a/src/app/pages/courses/components/add-course/add-course.component.scss b/src/app/pages/courses/components/add-course/add-course.component.scss new file mode 100644 index 0000000..1f645fa --- /dev/null +++ b/src/app/pages/courses/components/add-course/add-course.component.scss @@ -0,0 +1,22 @@ +.add-container { + display: flex; + justify-content: flex-end; + + button { + align-items: center; + background-color: blue; + border: none; + border-radius: 2px; + color: white; + display: flex; + gap: 5px; + margin-left: 4px; + padding: 5px 15px 5px 10px; + transition: all 0.5s ease; + + &:hover { + background-color: rgb(0, 0, 192); + cursor: pointer; + } + } +} diff --git a/src/app/pages/courses/components/add-course/add-course.component.spec.ts b/src/app/pages/courses/components/add-course/add-course.component.spec.ts new file mode 100644 index 0000000..ee3154b --- /dev/null +++ b/src/app/pages/courses/components/add-course/add-course.component.spec.ts @@ -0,0 +1,24 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AddCourseComponent } from './add-course.component'; + +describe('AddCourseComponent', () => { + let component: AddCourseComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [AddCourseComponent], + }).compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(AddCourseComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pages/courses/components/add-course/add-course.component.ts b/src/app/pages/courses/components/add-course/add-course.component.ts new file mode 100644 index 0000000..e34660e --- /dev/null +++ b/src/app/pages/courses/components/add-course/add-course.component.ts @@ -0,0 +1,12 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-add-course', + templateUrl: './add-course.component.html', + styleUrls: ['./add-course.component.scss'], +}) +export class AddCourseComponent implements OnInit { + constructor() {} + + ngOnInit(): void {} +} diff --git a/src/app/pages/courses/components/courses-list/courses-list.component.html b/src/app/pages/courses/components/courses-list/courses-list.component.html new file mode 100644 index 0000000..e6c85c9 --- /dev/null +++ b/src/app/pages/courses/components/courses-list/courses-list.component.html @@ -0,0 +1,34 @@ + + +
+
+ {{ course.title }} + + access_time + {{ course.duration | m2h }} + calendar_today + {{ course.creationDate | date }} + +
+ +

+ {{ course.description }} +

+ +
+ + + + + + + +
+ + + +
diff --git a/src/app/pages/courses/components/courses-list/courses-list.component.scss b/src/app/pages/courses/components/courses-list/courses-list.component.scss new file mode 100644 index 0000000..0f31f02 --- /dev/null +++ b/src/app/pages/courses/components/courses-list/courses-list.component.scss @@ -0,0 +1,106 @@ +.course-card { + background-color: white; + box-shadow: 0px 0px 10px rgba(128, 128, 128, 0.3); + display: flex; + justify-content: space-between; + margin-top: 10px; + margin-bottom: 20px; + transition: all 0.5s ease; + + &:hover { + box-shadow: 0px 0px 10px grey; + } + + .card-container { + width: 100%; + } + + .card-header { + align-items: center; + display: flex; + height: 40px; + justify-content: space-between; + width: 100%; + + .card-title { + color: black; + line-height: 28px; + margin: 0; + max-width: 600px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + .card-subtitle { + align-items: center; + color: grey; + display: flex; + margin: 0; + white-space: nowrap; + + mat-icon { + font-size: 16px; + height: 16px; + padding: 0px 5px 0px 15px; + width: 16px; + } + } + } + + .card-content { + color: grey; + line-height: 25px; + margin: 0; + padding: 0; + padding-top: 8px; + } + + .card-actions { + align-items: flex-end; + display: flex; + justify-content: flex-end; + margin: 0; + margin-right: 0; + padding-bottom: 10px; + width: 350px; + + button { + align-items: center; + background-color: blue; + border: none; + border-radius: 2px; + color: white; + display: flex; + gap: 5px; + margin-left: 5px; + padding: 5px 15px 5px 10px; + transition: all 0.5s ease; + + mat-icon { + font-size: 18px; + height: 18px; + } + + &:hover { + background-color: rgb(0, 0, 192); + cursor: pointer; + } + } + } +} + +.load-more-btn { + background-color: transparent; + border: none; + color: blue; + margin: 0 auto; + text-decoration: underline; + text-transform: uppercase; + transition: all 0.5s ease; + + &:hover { + color: rgb(0, 0, 192); + cursor: pointer; + } +} diff --git a/src/app/pages/courses/components/courses-list/courses-list.component.spec.ts b/src/app/pages/courses/components/courses-list/courses-list.component.spec.ts new file mode 100644 index 0000000..615781b --- /dev/null +++ b/src/app/pages/courses/components/courses-list/courses-list.component.spec.ts @@ -0,0 +1,24 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CoursesListComponent } from './courses-list.component'; + +describe('CoursesListComponent', () => { + let component: CoursesListComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [CoursesListComponent], + }).compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(CoursesListComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pages/courses/components/courses-list/courses-list.component.ts b/src/app/pages/courses/components/courses-list/courses-list.component.ts new file mode 100644 index 0000000..fcb945b --- /dev/null +++ b/src/app/pages/courses/components/courses-list/courses-list.component.ts @@ -0,0 +1,28 @@ +import { Component, OnInit, Input } from '@angular/core'; +import { Router } from '@angular/router'; +import { Course } from '../../../../core/models/course_model'; +import { COURSES, EDIT_COURSE } from '../../../../core/constants/routes'; + +@Component({ + selector: 'app-courses-list', + templateUrl: './courses-list.component.html', + styleUrls: ['./courses-list.component.scss'], +}) +export class CoursesListComponent implements OnInit { + public loadMore: boolean = false; + public preShowNumber: number = 2; + + @Input() courses!: Course[]; + + constructor(private router: Router) {} + + ngOnInit(): void {} + + loadMoreToggle(): void { + this.loadMore = !this.loadMore; + } + + openCourseEdit(id: number): void { + this.router.navigate([`${COURSES}/${EDIT_COURSE}`, id]); + } +} diff --git a/src/app/pages/courses/components/find-course/find-course.component.html b/src/app/pages/courses/components/find-course/find-course.component.html new file mode 100644 index 0000000..6d56d18 --- /dev/null +++ b/src/app/pages/courses/components/find-course/find-course.component.html @@ -0,0 +1,7 @@ +
+
+ search + +
+ +
diff --git a/src/app/pages/courses/components/find-course/find-course.component.scss b/src/app/pages/courses/components/find-course/find-course.component.scss new file mode 100644 index 0000000..d693fc3 --- /dev/null +++ b/src/app/pages/courses/components/find-course/find-course.component.scss @@ -0,0 +1,45 @@ +.search-container { + align-items: center; + display: flex; + padding-top: 20px; + + .search-btn { + color: white; + background-color: rgb(0, 179, 0); + border: none; + border-radius: 2px; + height: 35px; + margin-left: 4px; + padding: 0 10px; + transition: all 0.5s ease; + + &:hover { + background-color: green; + cursor: pointer; + } + } +} + +.search-field { + align-items: center; + background-color: white; + border: 1px solid #ddd; + border-radius: 2px; + display: flex; + height: 35px; + width: 300px; + + mat-icon { + color: grey; + padding: 5px; + transform: rotate(360deg) scaleX(-1); + width: 25px; + } + + .search-input { + background-color: transparent; + border: none; + outline: none; + width: 260px; + } +} diff --git a/src/app/pages/courses/components/find-course/find-course.component.spec.ts b/src/app/pages/courses/components/find-course/find-course.component.spec.ts new file mode 100644 index 0000000..616a9ba --- /dev/null +++ b/src/app/pages/courses/components/find-course/find-course.component.spec.ts @@ -0,0 +1,24 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { FindCourseComponent } from './find-course.component'; + +describe('FindCourseComponent', () => { + let component: FindCourseComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [FindCourseComponent], + }).compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(FindCourseComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pages/courses/components/find-course/find-course.component.ts b/src/app/pages/courses/components/find-course/find-course.component.ts new file mode 100644 index 0000000..2505a0a --- /dev/null +++ b/src/app/pages/courses/components/find-course/find-course.component.ts @@ -0,0 +1,12 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-find-course', + templateUrl: './find-course.component.html', + styleUrls: ['./find-course.component.scss'], +}) +export class FindCourseComponent implements OnInit { + constructor() {} + + ngOnInit(): void {} +} diff --git a/src/app/pages/courses/courses.component.html b/src/app/pages/courses/courses.component.html new file mode 100644 index 0000000..13cf129 --- /dev/null +++ b/src/app/pages/courses/courses.component.html @@ -0,0 +1,6 @@ +
+ + +
+ + diff --git a/src/app/pages/courses/courses.component.scss b/src/app/pages/courses/courses.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/pages/courses/courses.component.spec.ts b/src/app/pages/courses/courses.component.spec.ts new file mode 100644 index 0000000..5735004 --- /dev/null +++ b/src/app/pages/courses/courses.component.spec.ts @@ -0,0 +1,24 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CoursesComponent } from './courses.component'; + +describe('CoursesComponent', () => { + let component: CoursesComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [CoursesComponent], + }).compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(CoursesComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pages/courses/courses.component.ts b/src/app/pages/courses/courses.component.ts new file mode 100644 index 0000000..59f5bd5 --- /dev/null +++ b/src/app/pages/courses/courses.component.ts @@ -0,0 +1,18 @@ +import { Component, OnInit } from '@angular/core'; +import { CoursesService } from '../../core/services/courses_data_service'; +import { Course } from '../../core/models/course_model'; + +@Component({ + selector: 'app-courses', + templateUrl: './courses.component.html', + styleUrls: ['./courses.component.scss'], +}) +export class CoursesComponent implements OnInit { + public courses!: Course[]; + + constructor(private readonly coursesService: CoursesService) {} + + ngOnInit(): void { + this.courses = this.coursesService.getCourses(); + } +} diff --git a/src/app/pages/courses/courses.module.ts b/src/app/pages/courses/courses.module.ts new file mode 100644 index 0000000..1a520ec --- /dev/null +++ b/src/app/pages/courses/courses.module.ts @@ -0,0 +1,31 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { MatCardModule } from '@angular/material/card'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatIconModule } from '@angular/material/icon'; +import { MatInputModule } from '@angular/material/input'; + +import { AddCourseComponent } from './components/add-course/add-course.component'; +import { CoursesComponent } from './courses.component'; +import { CoursesListComponent } from './components/courses-list/courses-list.component'; +import { FindCourseComponent } from './components/find-course/find-course.component'; +import { SharedModule } from 'src/app/shared/shared.module'; + +@NgModule({ + declarations: [ + AddCourseComponent, + CoursesComponent, + CoursesListComponent, + FindCourseComponent, + ], + imports: [ + CommonModule, + MatCardModule, + MatFormFieldModule, + MatIconModule, + MatInputModule, + SharedModule, + ], + exports: [CoursesComponent, FindCourseComponent], +}) +export class CoursesModule {} diff --git a/src/app/pages/edit-course/edit-course.component.html b/src/app/pages/edit-course/edit-course.component.html new file mode 100644 index 0000000..d9d8e42 --- /dev/null +++ b/src/app/pages/edit-course/edit-course.component.html @@ -0,0 +1 @@ +

edit-course works!

diff --git a/src/app/pages/edit-course/edit-course.component.scss b/src/app/pages/edit-course/edit-course.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/pages/edit-course/edit-course.component.spec.ts b/src/app/pages/edit-course/edit-course.component.spec.ts new file mode 100644 index 0000000..0ba4996 --- /dev/null +++ b/src/app/pages/edit-course/edit-course.component.spec.ts @@ -0,0 +1,24 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { EditCourseComponent } from './edit-course.component'; + +describe('EditCourseComponent', () => { + let component: EditCourseComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [EditCourseComponent], + }).compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(EditCourseComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pages/edit-course/edit-course.component.ts b/src/app/pages/edit-course/edit-course.component.ts new file mode 100644 index 0000000..9fa97ad --- /dev/null +++ b/src/app/pages/edit-course/edit-course.component.ts @@ -0,0 +1,12 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-edit-course', + templateUrl: './edit-course.component.html', + styleUrls: ['./edit-course.component.scss'], +}) +export class EditCourseComponent implements OnInit { + constructor() {} + + ngOnInit(): void {} +} diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html new file mode 100644 index 0000000..038b202 --- /dev/null +++ b/src/app/pages/home/home.component.html @@ -0,0 +1,6 @@ +
+ +
diff --git a/src/app/pages/home/home.component.scss b/src/app/pages/home/home.component.scss new file mode 100644 index 0000000..3fd9401 --- /dev/null +++ b/src/app/pages/home/home.component.scss @@ -0,0 +1,29 @@ +.home-page-container { + align-items: center; + display: flex; + height: 100%; + justify-content: center; + + .start-btn { + align-items: center; + background-color: transparent; + border: none; + color: black; + display: flex; + font-size: 24px; + font-weight: bold; + margin: 0 auto; + text-transform: uppercase; + transition: all 0.5s ease; + + img { + margin-right: 10px; + width: 60px; + } + + &:hover { + color: rgb(124, 196, 255); + cursor: pointer; + } + } +} diff --git a/src/app/pages/home/home.component.spec.ts b/src/app/pages/home/home.component.spec.ts new file mode 100644 index 0000000..9deb854 --- /dev/null +++ b/src/app/pages/home/home.component.spec.ts @@ -0,0 +1,24 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HomeComponent } from './home.component'; + +describe('HomeComponent', () => { + let component: HomeComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [HomeComponent], + }).compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(HomeComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pages/home/home.component.ts b/src/app/pages/home/home.component.ts new file mode 100644 index 0000000..538be34 --- /dev/null +++ b/src/app/pages/home/home.component.ts @@ -0,0 +1,18 @@ +import { Component, OnInit } from '@angular/core'; +import { Router } from '@angular/router'; +import { COURSES } from '../../core/constants/routes'; + +@Component({ + selector: 'app-home', + templateUrl: './home.component.html', + styleUrls: ['./home.component.scss'], +}) +export class HomeComponent implements OnInit { + constructor(private router: Router) {} + + ngOnInit(): void {} + + openCoursesPage(): void { + this.router.navigate([COURSES]); + } +} diff --git a/src/app/pages/pages.module.ts b/src/app/pages/pages.module.ts new file mode 100644 index 0000000..576e793 --- /dev/null +++ b/src/app/pages/pages.module.ts @@ -0,0 +1,13 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { CoursesModule } from './courses/courses.module'; +import { EditCourseComponent } from './edit-course/edit-course.component'; +import { HomeComponent } from './home/home.component'; + +@NgModule({ + declarations: [EditCourseComponent, HomeComponent], + imports: [CommonModule, CoursesModule], + exports: [EditCourseComponent, HomeComponent], +}) +export class PagesModule {} diff --git a/src/app/shared/components/breadcrumbs/breadcrumbs.component.html b/src/app/shared/components/breadcrumbs/breadcrumbs.component.html new file mode 100644 index 0000000..86b62be --- /dev/null +++ b/src/app/shared/components/breadcrumbs/breadcrumbs.component.html @@ -0,0 +1,13 @@ + + + diff --git a/src/app/shared/components/breadcrumbs/breadcrumbs.component.scss b/src/app/shared/components/breadcrumbs/breadcrumbs.component.scss new file mode 100644 index 0000000..6158e6b --- /dev/null +++ b/src/app/shared/components/breadcrumbs/breadcrumbs.component.scss @@ -0,0 +1,20 @@ +.breadcrumb { + border-bottom: 1px solid whitesmoke; + box-sizing: border-box; + display: flex; + height: 64px; + list-style: none; + margin: 0; + padding: 0 50px; + + .breadcrumb-item { + align-items: center; + display: flex; + font-weight: bold; + height: 100%; + + a { + text-decoration: none; + } + } +} diff --git a/src/app/shared/components/breadcrumbs/breadcrumbs.component.spec.ts b/src/app/shared/components/breadcrumbs/breadcrumbs.component.spec.ts new file mode 100644 index 0000000..9c54e6c --- /dev/null +++ b/src/app/shared/components/breadcrumbs/breadcrumbs.component.spec.ts @@ -0,0 +1,24 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { BreadcrumbsComponent } from './breadcrumbs.component'; + +describe('BreadcrumbsComponent', () => { + let component: BreadcrumbsComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [BreadcrumbsComponent], + }).compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(BreadcrumbsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/shared/components/breadcrumbs/breadcrumbs.component.ts b/src/app/shared/components/breadcrumbs/breadcrumbs.component.ts new file mode 100644 index 0000000..13ea0cb --- /dev/null +++ b/src/app/shared/components/breadcrumbs/breadcrumbs.component.ts @@ -0,0 +1,12 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-breadcrumbs', + templateUrl: './breadcrumbs.component.html', + styleUrls: ['./breadcrumbs.component.scss'], +}) +export class BreadcrumbsComponent implements OnInit { + constructor() {} + + ngOnInit(): void {} +} diff --git a/src/app/shared/components/footer/footer.component.html b/src/app/shared/components/footer/footer.component.html new file mode 100644 index 0000000..beeac62 --- /dev/null +++ b/src/app/shared/components/footer/footer.component.html @@ -0,0 +1,3 @@ + + Copyright © Videocourses. All rights reserved + diff --git a/src/app/shared/components/footer/footer.component.scss b/src/app/shared/components/footer/footer.component.scss new file mode 100644 index 0000000..8404879 --- /dev/null +++ b/src/app/shared/components/footer/footer.component.scss @@ -0,0 +1,6 @@ +.footer { + font-size: 12px; + font-weight: 400; + justify-content: flex-end; + padding: 0 50px; +} diff --git a/src/app/shared/components/footer/footer.component.spec.ts b/src/app/shared/components/footer/footer.component.spec.ts new file mode 100644 index 0000000..910cf4a --- /dev/null +++ b/src/app/shared/components/footer/footer.component.spec.ts @@ -0,0 +1,24 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { FooterComponent } from './footer.component'; + +describe('FooterComponent', () => { + let component: FooterComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [FooterComponent], + }).compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(FooterComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/shared/components/footer/footer.component.ts b/src/app/shared/components/footer/footer.component.ts new file mode 100644 index 0000000..6e29889 --- /dev/null +++ b/src/app/shared/components/footer/footer.component.ts @@ -0,0 +1,12 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-footer', + templateUrl: './footer.component.html', + styleUrls: ['./footer.component.scss'], +}) +export class FooterComponent implements OnInit { + constructor() {} + + ngOnInit(): void {} +} diff --git a/src/app/shared/components/header/header.component.html b/src/app/shared/components/header/header.component.html new file mode 100644 index 0000000..6fd516b --- /dev/null +++ b/src/app/shared/components/header/header.component.html @@ -0,0 +1,16 @@ + + + + + + diff --git a/src/app/shared/components/header/header.component.scss b/src/app/shared/components/header/header.component.scss new file mode 100644 index 0000000..aa0e4be --- /dev/null +++ b/src/app/shared/components/header/header.component.scss @@ -0,0 +1,30 @@ +.header { + padding: 0 16px 0 50px; + + .spacer { + flex: 1 1 auto; + } + + .icon-button { + align-items: center; + background-color: transparent; + border: none; + color: white; + display: flex; + gap: 5px; + margin: 0 10px; + transition: all 0.5s ease; + + &:hover { + color: rgb(124, 196, 255); + cursor: pointer; + } + } + + .home-btn { + font-size: 16px; + margin: 0; + text-decoration: none; + text-transform: uppercase; + } +} diff --git a/src/app/shared/components/header/header.component.spec.ts b/src/app/shared/components/header/header.component.spec.ts new file mode 100644 index 0000000..4b96ac0 --- /dev/null +++ b/src/app/shared/components/header/header.component.spec.ts @@ -0,0 +1,24 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HeaderComponent } from './header.component'; + +describe('HeaderComponent', () => { + let component: HeaderComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [HeaderComponent], + }).compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(HeaderComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/shared/components/header/header.component.ts b/src/app/shared/components/header/header.component.ts new file mode 100644 index 0000000..9edf6ce --- /dev/null +++ b/src/app/shared/components/header/header.component.ts @@ -0,0 +1,12 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-header', + templateUrl: './header.component.html', + styleUrls: ['./header.component.scss'], +}) +export class HeaderComponent implements OnInit { + constructor() {} + + ngOnInit(): void {} +} diff --git a/src/app/shared/components/logo/logo.component.html b/src/app/shared/components/logo/logo.component.html new file mode 100644 index 0000000..b5cf6b4 --- /dev/null +++ b/src/app/shared/components/logo/logo.component.html @@ -0,0 +1,4 @@ + diff --git a/src/app/shared/components/logo/logo.component.scss b/src/app/shared/components/logo/logo.component.scss new file mode 100644 index 0000000..750d48d --- /dev/null +++ b/src/app/shared/components/logo/logo.component.scss @@ -0,0 +1,22 @@ +.logo { + margin-right: 10px; + width: 40px; +} + +.logo-btn { + align-items: center; + background-color: transparent; + border: none; + color: white; + display: flex; + font-size: 18px; + font-weight: bold; + margin: 0 auto; + text-transform: uppercase; + transition: all 0.5s ease; + + &:hover { + color: rgb(124, 196, 255); + cursor: pointer; + } +} diff --git a/src/app/shared/components/logo/logo.component.spec.ts b/src/app/shared/components/logo/logo.component.spec.ts new file mode 100644 index 0000000..84e5811 --- /dev/null +++ b/src/app/shared/components/logo/logo.component.spec.ts @@ -0,0 +1,24 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { LogoComponent } from './logo.component'; + +describe('LogoComponent', () => { + let component: LogoComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [LogoComponent], + }).compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(LogoComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/shared/components/logo/logo.component.ts b/src/app/shared/components/logo/logo.component.ts new file mode 100644 index 0000000..9782ba5 --- /dev/null +++ b/src/app/shared/components/logo/logo.component.ts @@ -0,0 +1,18 @@ +import { Component, OnInit } from '@angular/core'; +import { Router } from '@angular/router'; +import { HOME } from '../../../core/constants/routes'; + +@Component({ + selector: 'app-logo', + templateUrl: './logo.component.html', + styleUrls: ['./logo.component.scss'], +}) +export class LogoComponent implements OnInit { + constructor(private router: Router) {} + + ngOnInit(): void {} + + openCoursesPage(): void { + this.router.navigate([HOME]); + } +} diff --git a/src/app/shared/pipes/time_pipe.ts b/src/app/shared/pipes/time_pipe.ts new file mode 100644 index 0000000..4293d64 --- /dev/null +++ b/src/app/shared/pipes/time_pipe.ts @@ -0,0 +1,12 @@ +import { Pipe, PipeTransform } from '@angular/core'; + +@Pipe({ + name: 'm2h', +}) +export class MinutesToHours implements PipeTransform { + transform(value: number): string { + let hours = Math.floor(value / 60); + let minutes = Math.floor(value % 60); + return hours + 'h ' + minutes + 'min'; + } +} diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts new file mode 100644 index 0000000..35381cb --- /dev/null +++ b/src/app/shared/shared.module.ts @@ -0,0 +1,35 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { MatIconModule } from '@angular/material/icon'; +import { MatSlideToggleModule } from '@angular/material/slide-toggle'; +import { MatToolbarModule } from '@angular/material/toolbar'; +import { MatTooltipModule } from '@angular/material/tooltip'; + +import { AppRoutingModule } from '../app-routing.module'; +import { BreadcrumbsComponent } from './components/breadcrumbs/breadcrumbs.component'; +import { BreadcrumbModule } from 'angular-crumbs'; +import { FooterComponent } from './components/footer/footer.component'; +import { HeaderComponent } from './components/header/header.component'; +import { LogoComponent } from './components/logo/logo.component'; +import { MinutesToHours } from './pipes/time_pipe'; + +@NgModule({ + declarations: [ + BreadcrumbsComponent, + FooterComponent, + HeaderComponent, + LogoComponent, + MinutesToHours, + ], + imports: [ + AppRoutingModule, + BreadcrumbModule, + CommonModule, + MatIconModule, + MatSlideToggleModule, + MatToolbarModule, + MatTooltipModule, + ], + exports: [BreadcrumbsComponent, FooterComponent, HeaderComponent, MinutesToHours], +}) +export class SharedModule {} diff --git a/src/assets/images/player-icon.png b/src/assets/images/player-icon.png new file mode 100644 index 0000000..6a3549f Binary files /dev/null and b/src/assets/images/player-icon.png differ diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts index 3612073..da7c84f 100644 --- a/src/environments/environment.prod.ts +++ b/src/environments/environment.prod.ts @@ -1,3 +1,3 @@ export const environment = { - production: true + production: true, }; diff --git a/src/index.html b/src/index.html index 45de632..a1dcb82 100644 --- a/src/index.html +++ b/src/index.html @@ -1,13 +1,22 @@ - + - - - CoursesApp - - - - - - - + + + Video Course + + + + + + + + + + diff --git a/src/main.ts b/src/main.ts index a576b2e..207c6dd 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,5 +1,6 @@ import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + import { AppModule } from './app/app.module'; import { environment } from './environments/environment'; diff --git a/src/polyfills.ts b/src/polyfills.ts index 8a120c3..e4555ed 100644 --- a/src/polyfills.ts +++ b/src/polyfills.ts @@ -8,8 +8,8 @@ * file. * * The current setup is for so-called "evergreen" browsers; the last versions of browsers that - * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), - * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * automatically update themselves. This includes recent versions of Safari, Chrome (including + * Opera), Edge on the desktop, and iOS and Chrome on mobile. * * Learn more in https://angular.io/guide/browser-support */ @@ -18,18 +18,6 @@ * BROWSER POLYFILLS */ -/** - * IE11 requires the following for NgClass support on SVG elements - */ -// import 'classlist.js'; // Run `npm install --save classlist.js`. - -/** - * Web Animations `@angular/platform-browser/animations` - * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. - * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). - */ -// import 'web-animations-js'; // Run `npm install --save web-animations-js`. - /** * By default, zone.js will patch all possible macroTask and DomEvents * user can disable parts of macroTask/DomEvents patch by setting following flags diff --git a/src/styles.scss b/src/styles.scss index 90d4ee0..a32fefe 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1 +1,20 @@ /* You can add global styles to this file, and also import other style files */ + +html, +body { + height: 100%; +} +body { + font-family: Roboto, "Helvetica Neue", sans-serif; + margin: 0; + min-width: 1200px; +} + +html, +body { + height: 100%; +} +body { + font-family: Roboto, "Helvetica Neue", sans-serif; + margin: 0; +} diff --git a/src/test.ts b/src/test.ts index fb39732..00025da 100644 --- a/src/test.ts +++ b/src/test.ts @@ -1,28 +1,25 @@ // This file is required by karma.conf.js and loads recursively all the .spec and framework files +import 'zone.js/testing'; import { getTestBed } from '@angular/core/testing'; import { - BrowserDynamicTestingModule, - platformBrowserDynamicTesting, + BrowserDynamicTestingModule, + platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing'; -import 'zone.js/testing'; declare const require: { - context( - path: string, - deep?: boolean, - filter?: RegExp, - ): { - keys(): string[]; - (id: string): T; - }; + context(path: string, deep?: boolean, filter?: RegExp): { + (id: string): T; + keys(): string[]; + }; }; // First, initialize the Angular testing environment. getTestBed().initTestEnvironment( - BrowserDynamicTestingModule, - platformBrowserDynamicTesting(), + BrowserDynamicTestingModule, + platformBrowserDynamicTesting(), ); + // Then we find all the tests. const context = require.context('./', true, /\.spec\.ts$/); // And load the modules.