From 8caba201fc4cbb950cbc30bc5fc7ca558fc3e14c Mon Sep 17 00:00:00 2001 From: SooryaSoorya Date: Tue, 28 Apr 2020 17:27:38 +0300 Subject: [PATCH] ui changes, added nav-bar menu --- src/app/app.component.spec.ts | 35 ++++----- src/app/app.module.ts | 8 +- .../movie-detail/movie-detail.component.html | 27 ++++--- .../movie-detail/movie-detail.component.scss | 71 ++++++++++++------ .../movie-detail.component.spec.ts | 1 + .../movie-detail/movie-detail.component.ts | 2 + src/app/movie-detail/movie-detail.module.ts | 6 +- src/app/movie/models/genre.model.ts | 13 ++++ src/app/movie/models/movie.models.ts | 50 +++++++++--- src/app/movie/movie.component.html | 24 +++--- src/app/movie/movie.component.scss | 40 ++++++---- src/app/movie/movie.component.ts | 15 +++- src/app/movie/movie.module.ts | 13 ++-- src/app/movie/services/movie.services.ts | 2 +- src/app/movie/services/movies.service.spec.ts | 48 ++++++++++++ src/app/movie/test-data/sample-data.ts | 16 ++++ src/app/nav-menu/nav-menu-routing.module.ts | 11 +++ src/app/nav-menu/nav-menu.component.html | 13 ++++ src/app/nav-menu/nav-menu.component.scss | 64 ++++++++++++++++ src/app/nav-menu/nav-menu.component.spec.ts | 25 ++++++ src/app/nav-menu/nav-menu.component.ts | 44 +++++++++++ src/app/nav-menu/nav-menu.module.ts | 13 ++++ src/app/search-bar/search-bar.component.scss | 2 +- .../search-bar/search-bar.component.spec.ts | 1 + src/app/search-bar/search-bar.component.ts | 8 +- src/app/search-bar/search-bar.module.ts | 5 +- src/app/shared/enumToArray.pipe.ts | 15 ++++ src/app/shared/shared.module.ts | 9 +-- src/app/sidebar/sidebar.component.html | 12 +-- src/app/sidebar/sidebar.component.scss | 11 ++- src/assets/icons/director.svg | 1 + src/assets/icons/favorite.svg | 1 + src/assets/icons/folder.svg | 45 +---------- src/assets/icons/monitor.svg | 45 +---------- src/assets/icons/movie.svg | 1 + src/assets/icons/notfound.svg | 1 + src/assets/icons/search.svg | 2 +- src/assets/icons/watch.svg | 1 + src/favicon.ico | Bin 4286 -> 29390 bytes src/sass/_variables.scss | 5 +- src/sass/styles.css | 26 +++++++ src/styles.css | 2 + 42 files changed, 524 insertions(+), 210 deletions(-) create mode 100644 src/app/movie/models/genre.model.ts create mode 100644 src/app/movie/services/movies.service.spec.ts create mode 100644 src/app/movie/test-data/sample-data.ts create mode 100644 src/app/nav-menu/nav-menu-routing.module.ts create mode 100644 src/app/nav-menu/nav-menu.component.html create mode 100644 src/app/nav-menu/nav-menu.component.scss create mode 100644 src/app/nav-menu/nav-menu.component.spec.ts create mode 100644 src/app/nav-menu/nav-menu.component.ts create mode 100644 src/app/nav-menu/nav-menu.module.ts create mode 100644 src/app/shared/enumToArray.pipe.ts create mode 100644 src/assets/icons/director.svg create mode 100644 src/assets/icons/favorite.svg create mode 100644 src/assets/icons/movie.svg create mode 100644 src/assets/icons/notfound.svg create mode 100644 src/assets/icons/watch.svg create mode 100644 src/sass/styles.css create mode 100644 src/styles.css diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts index 10886dc..0bc5cd2 100644 --- a/src/app/app.component.spec.ts +++ b/src/app/app.component.spec.ts @@ -1,20 +1,28 @@ -import { TestBed, async } from '@angular/core/testing'; -import { RouterTestingModule } from '@angular/router/testing'; -import { AppComponent } from './app.component'; +import { TestBed, async } from "@angular/core/testing"; +import { RouterTestingModule } from "@angular/router/testing"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { NoopAnimationsModule } from "@angular/platform-browser/animations"; +import { HttpClientTestingModule } from "@angular/common/http/testing"; -describe('AppComponent', () => { +import { AppComponent } from "./app.component"; +import { SidebarComponent } from "./sidebar/sidebar.component"; +import { MovieService } from "../app/movie/services/movie.services"; + +describe("AppComponent", () => { beforeEach(async(() => { TestBed.configureTestingModule({ imports: [ - RouterTestingModule - ], - declarations: [ - AppComponent + BrowserAnimationsModule, + NoopAnimationsModule, + HttpClientTestingModule, + RouterTestingModule, ], + declarations: [AppComponent, SidebarComponent], + providers: [MovieService], }).compileComponents(); })); - it('should create the app', () => { + it("should create the app", () => { const fixture = TestBed.createComponent(AppComponent); const app = fixture.componentInstance; expect(app).toBeTruthy(); @@ -23,13 +31,6 @@ describe('AppComponent', () => { it(`should have as title 'ng-movie-app'`, () => { const fixture = TestBed.createComponent(AppComponent); const app = fixture.componentInstance; - expect(app.title).toEqual('ng-movie-app'); - }); - - it('should render title', () => { - const fixture = TestBed.createComponent(AppComponent); - fixture.detectChanges(); - const compiled = fixture.nativeElement; - expect(compiled.querySelector('.content span').textContent).toContain('ng-movie-app app is running!'); + expect(app.title).toEqual("ng-movie-app"); }); }); diff --git a/src/app/app.module.ts b/src/app/app.module.ts index ac756a2..e03348f 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -3,13 +3,16 @@ import { NgModule } from "@angular/core"; import { AppRoutingModule } from "./app-routing.module"; import { AppComponent } from "./app.component"; +import { SharedModule } from "./shared/shared.module"; import { SidebarModule } from "./sidebar/sidebar.module"; import { MovieModule } from "./movie/movie.module"; import { SearchBarModule } from "./search-bar/search-bar.module"; import { LoaderModule } from "./loader/loader.module"; import { MovieDetailModule } from "./movie-detail/movie-detail.module"; import { NoDataModule } from "./no-data/no-data.module"; -import { SharedModule } from './shared/shared.module'; +import { NavMenuModule } from "./nav-menu/nav-menu.module"; + +import { MovieService } from "./movie/services/movie.services"; @NgModule({ declarations: [AppComponent], @@ -22,7 +25,8 @@ import { SharedModule } from './shared/shared.module'; SearchBarModule, LoaderModule, MovieDetailModule, - NoDataModule + NoDataModule, + NavMenuModule, ], providers: [], bootstrap: [AppComponent], diff --git a/src/app/movie-detail/movie-detail.component.html b/src/app/movie-detail/movie-detail.component.html index a614e2c..6839e61 100644 --- a/src/app/movie-detail/movie-detail.component.html +++ b/src/app/movie-detail/movie-detail.component.html @@ -1,9 +1,9 @@
-
- movie cover -
+
+ movie cover +
movie poster @@ -12,15 +12,15 @@

{{movie.Title}}

- + movie poster {{movie.imdbRating}} - +
- movie poster + movie poster {{movie.Runtime}} - +
Ratings: @@ -37,14 +37,21 @@

{{movie.Title}}

- +

movie poster {{movie.Plot}}

-
+
+ +
+
+

{{movie.Director}}

+ -
+

{{actor}}

 diff --git a/src/app/movie-detail/movie-detail.component.scss b/src/app/movie-detail/movie-detail.component.scss index fb4c0b3..ec04799 100644 --- a/src/app/movie-detail/movie-detail.component.scss +++ b/src/app/movie-detail/movie-detail.component.scss @@ -1,28 +1,43 @@ -@import 'variables'; +@import "variables"; -.ngmp-movie-details-container{ +.ngmp-movie-details-container { width: 100%; } -.ngmp-movie-cover{ +.ngmp-movie-cover { position: relative; max-height: 25em; overflow: hidden; - img{ + img { width: 100%; } - &:after{ - content: ''; + &:after { + content: ""; position: absolute; - top:0; + top: 0; left: 0; width: 100%; height: 100%; - background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(4,6,13,0) 15%, rgba(237, 103, 30,.4) 100%); /* FF3.6-15 */ - background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(4,6,13,0) 15%,rgba(237, 103, 30,.4) 100%); /* Chrome10-25,Safari5.1-6 */ - background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(4,6,13,0) 15%,rgba(237, 103, 30,.4) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ + background: -moz-linear-gradient( + top, + rgba(0, 0, 0, 0) 0%, + rgba(4, 6, 13, 0) 15%, + rgba(237, 103, 30, 0.4) 100% + ); /* FF3.6-15 */ + background: -webkit-linear-gradient( + top, + rgba(0, 0, 0, 0) 0%, + rgba(4, 6, 13, 0) 15%, + rgba(237, 103, 30, 0.4) 100% + ); /* Chrome10-25,Safari5.1-6 */ + background: linear-gradient( + to bottom, + rgba(0, 0, 0, 0) 0%, + rgba(4, 6, 13, 0) 15%, + rgba(237, 103, 30, 0.4) 100% + ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#182b54',GradientType=0 ); /* IE6-9 */ } } @@ -40,7 +55,7 @@ padding: 0 1em; color: darken($light, 35); - h2{ + h2 { color: $primary-title; margin-top: 0; font-size: 44px; @@ -57,16 +72,16 @@ margin-right: 1em; } - strong{ + strong { color: $primary-title; } - .icon-container{ + .ngma-icon-container { background-position: center; background-size: cover; - border: 1px solid $green; + border: 1px solid $orange; line-height: 2; } - .avatar { + .ngma-avatar { flex-shrink: 0; width: 35px; height: 35px; @@ -74,6 +89,9 @@ -o-object-fit: cover; object-fit: cover; } + .ngma-actorname { + font-size: 12px; + } .ngma-actor-details { display: flex; flex-direction: column; @@ -84,8 +102,8 @@ } } - .ngmp-movie-rating-container{ - a{ + .ngmp-movie-rating-container { + a { margin-left: 0.5em; background-color: $secondary-color; color: $grey; @@ -100,7 +118,7 @@ line-height: 1.8; } - .ngmp-plot-img{ + .ngmp-plot-img { top: 10px; position: relative; height: 25px; @@ -114,32 +132,37 @@ width: 25px; } - .ngmp-duration-img{ + .ngmp-duration-img { top: 10px; position: relative; height: 20px; } } -@media only screen and (max-width : 48em) { +@media only screen and (max-width: 48em) { .ngmp-movie-details { flex-direction: column-reverse; transform: translateY(0); padding: 0 0.5em; - .ngmp-movie-poster{ + .ngmp-movie-poster { padding: 0 1em; } .ngmp-movie-info { - flex-direction: column; - + display: block; div { + flex-direction: column; + display: flex; + justify-content: flex-start; + text-transform: capitalize; + margin-top: 25px; margin-right: 0; margin-bottom: 1em; } } .ngmp-movie-rating-container { - span{ + flex-direction: column; + span { display: block; margin-bottom: 1em; } diff --git a/src/app/movie-detail/movie-detail.component.spec.ts b/src/app/movie-detail/movie-detail.component.spec.ts index 9f33ab1..f78c44b 100644 --- a/src/app/movie-detail/movie-detail.component.spec.ts +++ b/src/app/movie-detail/movie-detail.component.spec.ts @@ -5,6 +5,7 @@ import { MovieDetailComponent } from './movie-detail.component'; describe('MovieDetailComponent', () => { let component: MovieDetailComponent; let fixture: ComponentFixture; + beforeEach(async(() => { TestBed.configureTestingModule({ diff --git a/src/app/movie-detail/movie-detail.component.ts b/src/app/movie-detail/movie-detail.component.ts index 750def6..dfe3181 100644 --- a/src/app/movie-detail/movie-detail.component.ts +++ b/src/app/movie-detail/movie-detail.component.ts @@ -5,6 +5,7 @@ import { Movie } from "../movie/models/movie.models"; import { MovieService } from "../movie/services/movie.services"; import { FadeIn } from "../shared/animation"; +import { MOVIE_PROPS } from "../shared/constants"; @Component({ selector: "app-movie-detail", templateUrl: "./movie-detail.component.html", @@ -15,6 +16,7 @@ export class MovieDetailComponent implements OnInit { public loading: boolean; public movie: any; public error: string = ""; + public MOVIE_PROPS = MOVIE_PROPS; constructor( private movieService: MovieService, diff --git a/src/app/movie-detail/movie-detail.module.ts b/src/app/movie-detail/movie-detail.module.ts index 29a70f6..a8ac51e 100644 --- a/src/app/movie-detail/movie-detail.module.ts +++ b/src/app/movie-detail/movie-detail.module.ts @@ -1,14 +1,16 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; - +import { HttpClient } from "@angular/common/http"; import { MovieDetailRoutingModule } from './movie-detail-routing.module'; +import { MovieService } from "../movie/services/movie.services"; @NgModule({ declarations: [], imports: [ CommonModule, MovieDetailRoutingModule - ] + ], + providers: [HttpClient, MovieService], }) export class MovieDetailModule { } diff --git a/src/app/movie/models/genre.model.ts b/src/app/movie/models/genre.model.ts new file mode 100644 index 0000000..dd2a411 --- /dev/null +++ b/src/app/movie/models/genre.model.ts @@ -0,0 +1,13 @@ +export enum MovieGenre { + Action = "action", + Adventure = "adventure", + Comedy = "comedy", + Crime = "crime", + Horror = "horror", + History = "history", + Mystery = "mystery", + Science = "Science", + Animation = "animation", + Sport = "sport", + Thriller = "thriller", +} diff --git a/src/app/movie/models/movie.models.ts b/src/app/movie/models/movie.models.ts index df5193f..cacc2f4 100644 --- a/src/app/movie/models/movie.models.ts +++ b/src/app/movie/models/movie.models.ts @@ -1,10 +1,42 @@ -export interface Movie { - id: number; - key: string; - name: string; - description: string; - rate: string; - length: string; - img: string; - cover: string; +export class Movie { + public title: string; + public year: string; + public rated: string; + public released: string; + public runtime: string; + public plot: string; + public poster: string; + public imdbLink: string; + public imdbID: string; + + constructor( + title?: string, + year?: string, + rated?: string, + released?: string, + runtime?: string, + plot?: string, + poster?: string, + imdbID?: string, + imdbLink?:String + ) { + (title = title), + (year = year), + (rated = rated), + (released = released), + (runtime = runtime), + (plot = plot), + (poster = this.parsePosterId(poster)), + (imdbID = imdbID), + (imdbLink = `http://imdb.com/title/${imdbID}`); + } + + parsePosterId(url: any) { + let prefix = "https://m.media-amazon.com/images/M/"; // should abstract this to config value + if (url && url.includes(prefix)) { + return url.replace("https://m.media-amazon.com/images/M/", ""); + } else { + return "not-found"; // can use this to propagate an error + } + } } diff --git a/src/app/movie/movie.component.html b/src/app/movie/movie.component.html index 9396ae5..ec5961d 100644 --- a/src/app/movie/movie.component.html +++ b/src/app/movie/movie.component.html @@ -1,4 +1,5 @@ - + +
@@ -19,17 +20,20 @@
- -
- movie poster -
- +
+ search icon +
+ +
+ movie poster +
+

{{movie.Title}}

-

{{movie.Year}}

+

+ movie poster + {{movie.Year}}
diff --git a/src/app/movie/movie.component.scss b/src/app/movie/movie.component.scss index 00f9fe0..bb2931c 100644 --- a/src/app/movie/movie.component.scss +++ b/src/app/movie/movie.component.scss @@ -1,4 +1,4 @@ -@import 'variables'; +@import "variables"; :host { display: flex; @@ -6,7 +6,6 @@ flex-direction: column; } - .ngmp-main-container { display: flex; justify-content: flex-start; @@ -63,7 +62,7 @@ } .ngmp-movie { - margin-bottom: 1.8em; + margin-bottom: 1em; flex-basis: 25%; a { @@ -82,9 +81,9 @@ } img { - -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); - -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); - box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); + -webkit-box-shadow: 0px 0px 10px 0px $shadow; + -moz-box-shadow: 0px 0px 10px 0px $shadow; + box-shadow: 0px 0px 10px 0px $shadow; } } @@ -94,13 +93,13 @@ } .ngmp-movie-title, - .ngmp-movie-rate { - display: block; - // margin-top: 0.3em; + .ngmp-movie-year { + text-decoration: none; + display: inline-block; } .ngmp-movie-title { - color: $green; + color: $orange; margin: 15px 0 5px 42px; overflow: hidden; white-space: nowrap; @@ -108,19 +107,29 @@ width: 300px; } - .ngmp-movie-rate { + .ngmp-movie-year { color: $grey; margin: 0; - margin-left: 42px; + margin-left: 34px; + } + .ngma-rateimg { + height: 16px; + position: relative; + width: 25px; } - .ngmp-noimageposter { -text-align: center; + text-align: center; + height: 100px; + } + .ngmp-noimage { + text-align: center; + height: 100px; + margin-right: 100px; } } } -@media only screen and (max-width : 48em) { +@media only screen and (max-width: 48em) { .main-container { flex-direction: column; @@ -172,3 +181,4 @@ text-align: center; } } } + diff --git a/src/app/movie/movie.component.ts b/src/app/movie/movie.component.ts index a8aea07..bd71631 100644 --- a/src/app/movie/movie.component.ts +++ b/src/app/movie/movie.component.ts @@ -1,9 +1,8 @@ import { Component, OnInit } from "@angular/core"; -import { Router, NavigationEnd } from '@angular/router'; +import { Router, NavigationEnd } from "@angular/router"; -import { Movie } from "./models/movie.models"; import { MovieService } from "./services/movie.services"; - +import { Movie } from "./models/movie.models"; import { MOVIE_PROPS } from "../shared/constants"; @Component({ @@ -25,7 +24,6 @@ export class MovieComponent implements OnInit { movieService.getMovies().subscribe( (movies) => { this.movies = movies; - this.l("getMovies", movies); this.loading = false; }, (error) => (this.loading = false) @@ -37,4 +35,13 @@ export class MovieComponent implements OnInit { onSearch(movies: Movie[]) { this.movies = movies; } + + onNavMenuChange(movies: Movie[]) { + console.log("onNavMenuChange", movies); + this.movies = movies; + } + + showLoading(loading: boolean) { + this.loading = loading; + } } diff --git a/src/app/movie/movie.module.ts b/src/app/movie/movie.module.ts index 5ea7545..91f2152 100644 --- a/src/app/movie/movie.module.ts +++ b/src/app/movie/movie.module.ts @@ -3,25 +3,28 @@ import { CommonModule } from "@angular/common"; import { FormsModule } from "@angular/forms"; import { RouterModule } from "@angular/router"; import { HttpClientModule } from "@angular/common/http"; - +import { HttpClient } from "@angular/common/http"; import { MovieRoutingModule } from "./movie-routing.module"; + import { MovieComponent } from "./movie.component"; -import { SearchBarComponent } from "../search-bar/search-bar.component"; import { LoaderComponent } from "../loader/loader.component"; +import { SearchBarComponent } from "../search-bar/search-bar.component"; import { MovieDetailComponent } from "../movie-detail/movie-detail.component"; import { NoDataComponent } from "../no-data/no-data.component"; +import { NavMenuComponent } from "../nav-menu/nav-menu.component"; import { MovieService } from "./services/movie.services"; @NgModule({ declarations: [ MovieComponent, - SearchBarComponent, LoaderComponent, + SearchBarComponent, MovieDetailComponent, - NoDataComponent + NoDataComponent, + NavMenuComponent ], imports: [CommonModule, MovieRoutingModule, FormsModule, HttpClientModule], - providers: [HttpClientModule, MovieService], + providers: [HttpClientModule, HttpClient, MovieService], }) export class MovieModule {} diff --git a/src/app/movie/services/movie.services.ts b/src/app/movie/services/movie.services.ts index 95bdc85..d6fd825 100644 --- a/src/app/movie/services/movie.services.ts +++ b/src/app/movie/services/movie.services.ts @@ -15,7 +15,7 @@ export class MovieService { constructor(private http: HttpClient) {} getMovies() { - var url: string = `${this.moviesEndpoint}&s=people`; + var url: string = `${this.moviesEndpoint}&s=avenger`; return this.http.get(url).pipe( map((res: any) => res.Search), catchError(this.handleError("getMovies", [])) diff --git a/src/app/movie/services/movies.service.spec.ts b/src/app/movie/services/movies.service.spec.ts new file mode 100644 index 0000000..ebf3315 --- /dev/null +++ b/src/app/movie/services/movies.service.spec.ts @@ -0,0 +1,48 @@ +import { TestBed, inject } from "@angular/core/testing"; +import { + HttpClientTestingModule, + HttpTestingController, +} from "@angular/common/http/testing"; + +import { API_CONIG } from "../../shared/constants"; +import { MovieService } from "./movie.services"; +import { dataSet1, dataSet2 } from "../test-data/sample-data"; + +describe("Movie Service", () => { + let httpTestingController: HttpTestingController; + let service: MovieService; + + const movies = [dataSet1, dataSet2]; + const moviesEndpoint = `${API_CONIG.API_ENDPOINT}?apikey=${API_CONIG.API_KEY}`; + + beforeEach(() => { + TestBed.configureTestingModule({ + imports: [HttpClientTestingModule], + providers: [MovieService], + }); + + httpTestingController = TestBed.get(HttpTestingController); + service = TestBed.get(MovieService); + }); + + describe("getMovies", () => { + it("should call get method to retrieve all movies initial time", () => { + service.getMovies().subscribe((movies) => { + expect(movies[1].Title).toEqual("The Avenger"); + }); + }); + }); + + describe("getMovieById", () => { + it("should call get method to retrieve the movie by id", () => { + service.getMovieById(movies[0]["imdbID"]).subscribe((data:any) => { + expect(data['Title']).toEqual(movies[0].Title); + }); + + const req = httpTestingController.expectOne(`${moviesEndpoint}&i=${movies[0]["imdbID"]}&plot=full`); + // console.log(req); + // req.flush(movies[0]); + // httpTestingController.verify(); + }); + }); +}); diff --git a/src/app/movie/test-data/sample-data.ts b/src/app/movie/test-data/sample-data.ts new file mode 100644 index 0000000..8bbb133 --- /dev/null +++ b/src/app/movie/test-data/sample-data.ts @@ -0,0 +1,16 @@ +export const dataSet1 = { + Poster: + "https://m.media-amazon.com/images/M/MV5BMTYzOTc2NzU3N15BMl5BanBnXkFtZTcwNjY3MDE3NQ@@._V1_SX300.jpg", + Title: "Captain America: The First Avenger", + Type: "movie", + Year: "2011", + imdbID: "tt0458339", +}; +export const dataSet2 = { + Poster: + "https://m.media-amazon.com/images/M/MV5BNzU5YzM3MmEtNTE2MS00MzVjLWI5Y2EtNGU3M2YwMGYzMGQ0XkEyXkFqcGdeQXVyMDExMzA0Mw@@._V1_SX300.jpg", + Title: "The Avenger", + Type: "movie", + Year: "1960", + imdbID: "tt0054257", +}; diff --git a/src/app/nav-menu/nav-menu-routing.module.ts b/src/app/nav-menu/nav-menu-routing.module.ts new file mode 100644 index 0000000..1f151e1 --- /dev/null +++ b/src/app/nav-menu/nav-menu-routing.module.ts @@ -0,0 +1,11 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; + + +const routes: Routes = []; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class NavMenuRoutingModule { } diff --git a/src/app/nav-menu/nav-menu.component.html b/src/app/nav-menu/nav-menu.component.html new file mode 100644 index 0000000..cb69d0c --- /dev/null +++ b/src/app/nav-menu/nav-menu.component.html @@ -0,0 +1,13 @@ +
+ +
\ No newline at end of file diff --git a/src/app/nav-menu/nav-menu.component.scss b/src/app/nav-menu/nav-menu.component.scss new file mode 100644 index 0000000..9a4c3da --- /dev/null +++ b/src/app/nav-menu/nav-menu.component.scss @@ -0,0 +1,64 @@ +@import "variables"; + +.ngma-nav-bar-container { + width: 100%; + margin: 0 auto; + + a { + color: $primary-title; + font-weight: 300; + letter-spacing: 2px; + text-decoration: none; + background: lighten($primary-color, 15); + padding: 20px 5px; + display: inline-block; + width: 100%; + text-align: center; + + &:hover { + opacity: 0.7; + } + + &.active { + opacity: 1; + background: $secondary-color; + } + } + + .main { + } + + .ngma-navigation { + ul { + border: 1px solid $primary-color-light; + list-style: none; + margin: 0; + padding: 0; + display: flex; + } + + li { + flex: 3; + } + } + + @media all and (max-width: 1000px) { + .navigation { + ul { + flex-wrap: wrap; + } + + li { + flex: 1 1 50%; + } + } + } + + @media all and (max-width: 480px) { + .navigation { + li { + flex-basis: 100%; + } + } + } +} diff --git a/src/app/nav-menu/nav-menu.component.spec.ts b/src/app/nav-menu/nav-menu.component.spec.ts new file mode 100644 index 0000000..c6e15c5 --- /dev/null +++ b/src/app/nav-menu/nav-menu.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { NavMenuComponent } from './nav-menu.component'; + +describe('NavMenuComponent', () => { + let component: NavMenuComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ NavMenuComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(NavMenuComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/nav-menu/nav-menu.component.ts b/src/app/nav-menu/nav-menu.component.ts new file mode 100644 index 0000000..8a1eb97 --- /dev/null +++ b/src/app/nav-menu/nav-menu.component.ts @@ -0,0 +1,44 @@ +import { Component, OnInit , Output, EventEmitter } from "@angular/core"; + +import { MovieService } from "../movie/services/movie.services"; +import { MovieGenre } from "../movie/models/genre.model"; +import { Movie } from "../movie/models/movie.models"; + +@Component({ + selector: "app-nav-menu", + templateUrl: "./nav-menu.component.html", + styleUrls: ["./nav-menu.component.scss"], +}) +export class NavMenuComponent implements OnInit { + public movies: any; + public movieGenre = MovieGenre; + public loading: boolean; + + selectedGenre = "action"; + objectKeys = Object.keys; + + @Output() onNavMenuChange = new EventEmitter(); + @Output() showLoading = new EventEmitter(); + + constructor(private movieService: MovieService) {} + + ngOnInit(): void {} + + changeMenuItem(event: any) { + event.preventDefault(); + const CurrentGenre = event.target.innerText.toLowerCase(); + this.applyChange(CurrentGenre); + } + + private applyChange(filterBy: string) { + this.selectedGenre = filterBy; + this.showLoading.emit(true); + this.movieService.getMovieByTitle(filterBy).subscribe( + (movies) => { + this.onNavMenuChange.emit(movies); + this.showLoading.emit(false); + }, + (error) => (this.loading = false) + ); + } +} diff --git a/src/app/nav-menu/nav-menu.module.ts b/src/app/nav-menu/nav-menu.module.ts new file mode 100644 index 0000000..3495a72 --- /dev/null +++ b/src/app/nav-menu/nav-menu.module.ts @@ -0,0 +1,13 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { NavMenuRoutingModule } from './nav-menu-routing.module'; + +@NgModule({ + declarations: [], + imports: [ + CommonModule, + NavMenuRoutingModule + ], + providers:[] +}) +export class NavMenuModule { } diff --git a/src/app/search-bar/search-bar.component.scss b/src/app/search-bar/search-bar.component.scss index 8a771b7..02f1cd7 100644 --- a/src/app/search-bar/search-bar.component.scss +++ b/src/app/search-bar/search-bar.component.scss @@ -12,7 +12,7 @@ padding: 1.5em; border: none; outline: none; - font-size: 1em; + font-size: 1.1em; padding-left: 4em; &::-webkit-input-placeholder { diff --git a/src/app/search-bar/search-bar.component.spec.ts b/src/app/search-bar/search-bar.component.spec.ts index de8089e..ce49237 100644 --- a/src/app/search-bar/search-bar.component.spec.ts +++ b/src/app/search-bar/search-bar.component.spec.ts @@ -6,6 +6,7 @@ describe('SearchBarComponent', () => { let component: SearchBarComponent; let fixture: ComponentFixture; + beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ SearchBarComponent ] diff --git a/src/app/search-bar/search-bar.component.ts b/src/app/search-bar/search-bar.component.ts index b971e64..f22c704 100644 --- a/src/app/search-bar/search-bar.component.ts +++ b/src/app/search-bar/search-bar.component.ts @@ -1,6 +1,7 @@ import { Component, OnInit, Output, EventEmitter } from "@angular/core"; import { MovieService } from "../movie/services/movie.services"; + import { Movie } from "../movie/models/movie.models"; @Component({ selector: "app-search-bar", @@ -9,16 +10,15 @@ import { Movie } from "../movie/models/movie.models"; }) export class SearchBarComponent implements OnInit { searchText: any = ""; - public movies :any; - @Output() search = new EventEmitter(); + public movies: any; + @Output() onSearch = new EventEmitter(); constructor(private movieService: MovieService) {} ngOnInit(): void {} onEnter() { this.movieService.getMovieByTitle(this.searchText).subscribe((movies) => { - console.log(movies); - this.search.emit(movies); + this.onSearch.emit(movies); }); } } diff --git a/src/app/search-bar/search-bar.module.ts b/src/app/search-bar/search-bar.module.ts index d033bcc..875b60c 100644 --- a/src/app/search-bar/search-bar.module.ts +++ b/src/app/search-bar/search-bar.module.ts @@ -1,6 +1,6 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; - +import { HttpClient } from "@angular/common/http"; import { SearchBarRoutingModule } from './search-bar-routing.module'; @@ -9,6 +9,7 @@ import { SearchBarRoutingModule } from './search-bar-routing.module'; imports: [ CommonModule, SearchBarRoutingModule - ] + ], + providers: [HttpClient], }) export class SearchBarModule { } diff --git a/src/app/shared/enumToArray.pipe.ts b/src/app/shared/enumToArray.pipe.ts new file mode 100644 index 0000000..13322a2 --- /dev/null +++ b/src/app/shared/enumToArray.pipe.ts @@ -0,0 +1,15 @@ +import { Pipe, PipeTransform } from "@angular/core"; + +@Pipe({ + name: "enumToArray", + pure: true, +}) + +export class EnumToArrayPipe implements PipeTransform { + transform(data: object) { + const keys = Object.keys(data); + return keys; + } + + +} diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index 5c31258..099c9a2 100644 --- a/src/app/shared/shared.module.ts +++ b/src/app/shared/shared.module.ts @@ -3,19 +3,16 @@ import { CommonModule } from '@angular/common'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import {NoopAnimationsModule} from '@angular/platform-browser/animations'; - @NgModule({ imports: [ CommonModule, BrowserAnimationsModule, NoopAnimationsModule ], - declarations: [ - ], + declarations: [], exports: [ CommonModule, BrowserAnimationsModule - ], - providers: [ ] + ] }) -export class SharedModule { } +export class SharedModule {} diff --git a/src/app/sidebar/sidebar.component.html b/src/app/sidebar/sidebar.component.html index f6a6398..c3874cc 100644 --- a/src/app/sidebar/sidebar.component.html +++ b/src/app/sidebar/sidebar.component.html @@ -1,17 +1,17 @@ -
- BM +
+ MovieApp
\ No newline at end of file diff --git a/src/app/sidebar/sidebar.component.scss b/src/app/sidebar/sidebar.component.scss index ea6b331..ad6a434 100644 --- a/src/app/sidebar/sidebar.component.scss +++ b/src/app/sidebar/sidebar.component.scss @@ -1,17 +1,19 @@ @import "variables"; -.sidebar { +.ngma-sidebar { width: 100px; - height: 100vh; + height: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; padding: 1em 0; - border-right: 1px solid; + -webkit-box-shadow: 0px 0px 10px 0px $shadow; + -moz-box-shadow: 0px 0px 10px 0px $shadow; + box-shadow: 0px 0px 10px 0px $shadow; a { - color: $light; + color: $secondary-color; } nav { @@ -24,6 +26,7 @@ a { padding: 0.5em; margin-bottom: 0.5em; + height: 50px; &.active { background-color: $secondary-color; diff --git a/src/assets/icons/director.svg b/src/assets/icons/director.svg new file mode 100644 index 0000000..a8793d8 --- /dev/null +++ b/src/assets/icons/director.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/favorite.svg b/src/assets/icons/favorite.svg new file mode 100644 index 0000000..eb3c22d --- /dev/null +++ b/src/assets/icons/favorite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/folder.svg b/src/assets/icons/folder.svg index 52f928e..5ac11fa 100644 --- a/src/assets/icons/folder.svg +++ b/src/assets/icons/folder.svg @@ -1,41 +1,4 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + \ No newline at end of file diff --git a/src/assets/icons/monitor.svg b/src/assets/icons/monitor.svg index 9461e02..3655a65 100644 --- a/src/assets/icons/monitor.svg +++ b/src/assets/icons/monitor.svg @@ -1,44 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +Artboard 68 \ No newline at end of file diff --git a/src/assets/icons/movie.svg b/src/assets/icons/movie.svg new file mode 100644 index 0000000..ac4f227 --- /dev/null +++ b/src/assets/icons/movie.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/notfound.svg b/src/assets/icons/notfound.svg new file mode 100644 index 0000000..2caedd2 --- /dev/null +++ b/src/assets/icons/notfound.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/search.svg b/src/assets/icons/search.svg index a1de81a..9d30039 100644 --- a/src/assets/icons/search.svg +++ b/src/assets/icons/search.svg @@ -8,7 +8,7 @@ } .fil0 { - fill: #ED671E; + fill: #f39a69; fill-rule: nonzero } diff --git a/src/assets/icons/watch.svg b/src/assets/icons/watch.svg new file mode 100644 index 0000000..512b85a --- /dev/null +++ b/src/assets/icons/watch.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/favicon.ico b/src/favicon.ico index d00cafc07bbec54b161a6ccb4d0cd27f97b97939..fbf5825a1379860d1818ba25f7cd7c0f0c94c959 100644 GIT binary patch literal 29390 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 WLe7d2#ef)ER7UVbA90rWFXcZ+D@PCj diff --git a/src/sass/_variables.scss b/src/sass/_variables.scss index d94a77e..74005e4 100644 --- a/src/sass/_variables.scss +++ b/src/sass/_variables.scss @@ -1,16 +1,17 @@ -$green: #ED671E; +$orange: #ED671E; $grey: #f3f3f3; $blue: #25282d; $lightBlue: #00B5E9; $light: #ffffff; $dark: #000000; $yellow: #FFB11A; +$shadow: rgba(0, 0, 0, 0.5); $primary-color: $blue; $primary-color-dark: darken($primary-color, 8); $primary-color-light: lighten($primary-color, 10); -$secondary-color: $green; +$secondary-color: $orange; $primary-link: $blue; $secondary-link: $lightBlue; diff --git a/src/sass/styles.css b/src/sass/styles.css new file mode 100644 index 0000000..3df1390 --- /dev/null +++ b/src/sass/styles.css @@ -0,0 +1,26 @@ +html { + font-size: 62.5%; + /* with the standard base font size of 16px this will be equal to 10px */ +} + +body { + font-size: 160%; + /* 160% of 10px ~ 16px, understood by all browsers */ + font-size: 1.6rem; + /* 1.6 * 10px ~ 16px, understood by all major browsers and IE9+ */ + margin: 0; + padding: 0; + background: #25282d; + -webkit-box-sizing: border-box; + box-sizing: border-box; + font-family: -apple-system, 'BlinkMacSystemFont', '.SFNSDisplay-Regular', 'San Francisco', 'Roboto', 'Segoe UI', 'Helvetica Neue', 'Lucida Grande', sans-serif; +} + +*, +*:before, +*:after { + -webkit-box-sizing: inherit; + box-sizing: inherit; + font-family: inherit; +} +/*# sourceMappingURL=styles.css.map */ \ No newline at end of file diff --git a/src/styles.css b/src/styles.css new file mode 100644 index 0000000..9711e95 --- /dev/null +++ b/src/styles.css @@ -0,0 +1,2 @@ +/* You can add global styles to this file, and also import other style files */ +/*# sourceMappingURL=styles.css.map */ \ No newline at end of file