From b6f2ad8782454f6b178cee7c4ab94b5f260bbd59 Mon Sep 17 00:00:00 2001 From: SooryaSoorya Date: Mon, 27 Apr 2020 00:58:37 +0300 Subject: [PATCH] movie details page added, UI changes --- .vscode/settings.json | 11 ++ src/app/app.module.ts | 8 +- .../movie-detail-routing.module.ts | 11 ++ .../movie-detail/movie-detail.component.html | 54 +++++++ .../movie-detail/movie-detail.component.scss | 151 ++++++++++++++++++ .../movie-detail.component.spec.ts | 25 +++ .../movie-detail/movie-detail.component.ts | 42 +++++ src/app/movie-detail/movie-detail.module.ts | 14 ++ src/app/movie/movie-routing.module.ts | 14 +- src/app/movie/movie.component.html | 21 ++- src/app/movie/movie.component.scss | 98 ++++++++---- src/app/movie/movie.component.ts | 23 ++- src/app/movie/movie.module.ts | 10 +- src/app/movie/services/movie.services.ts | 24 +-- src/app/no-data/no-data-routing.module.ts | 11 ++ src/app/no-data/no-data.component.html | 1 + src/app/no-data/no-data.component.scss | 9 ++ src/app/no-data/no-data.component.spec.ts | 25 +++ src/app/no-data/no-data.component.ts | 15 ++ src/app/no-data/no-data.module.ts | 14 ++ src/app/search-bar/search-bar.component.html | 3 +- src/app/search-bar/search-bar.component.scss | 7 +- src/app/search-bar/search-bar.component.ts | 25 ++- src/app/shared/animation.ts | 22 +++ src/app/shared/constants.ts | 11 +- src/app/shared/shared.module.ts | 21 +++ src/assets/icons/avatar.svg | 1 + src/assets/icons/duration.svg | 5 + src/assets/icons/plot.svg | 1 + src/assets/icons/search.svg | 78 ++++----- src/assets/icons/star.svg | 7 + src/sass/_variables.scss | 2 +- 32 files changed, 649 insertions(+), 115 deletions(-) create mode 100644 .vscode/settings.json create mode 100644 src/app/movie-detail/movie-detail-routing.module.ts create mode 100644 src/app/movie-detail/movie-detail.component.html create mode 100644 src/app/movie-detail/movie-detail.component.scss create mode 100644 src/app/movie-detail/movie-detail.component.spec.ts create mode 100644 src/app/movie-detail/movie-detail.component.ts create mode 100644 src/app/movie-detail/movie-detail.module.ts create mode 100644 src/app/no-data/no-data-routing.module.ts create mode 100644 src/app/no-data/no-data.component.html create mode 100644 src/app/no-data/no-data.component.scss create mode 100644 src/app/no-data/no-data.component.spec.ts create mode 100644 src/app/no-data/no-data.component.ts create mode 100644 src/app/no-data/no-data.module.ts create mode 100644 src/app/shared/animation.ts create mode 100644 src/app/shared/shared.module.ts create mode 100644 src/assets/icons/avatar.svg create mode 100644 src/assets/icons/duration.svg create mode 100644 src/assets/icons/plot.svg create mode 100644 src/assets/icons/star.svg diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..c8b6db8 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,11 @@ +{ + "cSpell.ignoreWords": [ + "actorname", + "lastest", + "ngma", + "ngmp", + "nodata", + "noimageposter" + ], + "git.ignoreLimitWarning": true +} \ No newline at end of file diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 6e3e61a..ac756a2 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -7,16 +7,22 @@ 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'; @NgModule({ declarations: [AppComponent], imports: [ BrowserModule, AppRoutingModule, + SharedModule, SidebarModule, MovieModule, SearchBarModule, - LoaderModule + LoaderModule, + MovieDetailModule, + NoDataModule ], providers: [], bootstrap: [AppComponent], diff --git a/src/app/movie-detail/movie-detail-routing.module.ts b/src/app/movie-detail/movie-detail-routing.module.ts new file mode 100644 index 0000000..90dd18b --- /dev/null +++ b/src/app/movie-detail/movie-detail-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 MovieDetailRoutingModule { } diff --git a/src/app/movie-detail/movie-detail.component.html b/src/app/movie-detail/movie-detail.component.html new file mode 100644 index 0000000..a614e2c --- /dev/null +++ b/src/app/movie-detail/movie-detail.component.html @@ -0,0 +1,54 @@ + + +
+
+ movie cover +
+
+
+ movie poster +
+
+

{{movie.Title}}

+
+
+ + movie poster + {{movie.imdbRating}} + +
+
+ movie poster + {{movie.Runtime}} + +
+
+ Ratings: + + {{rating.Source}} + {{rating.Value}} + +
+
+
+
+ + {{genre}} + +
+
+ +

+ movie poster + {{movie.Plot}} +

+
+ +
+
+

{{actor}}

+ +
+
+
+
\ No newline at end of file diff --git a/src/app/movie-detail/movie-detail.component.scss b/src/app/movie-detail/movie-detail.component.scss new file mode 100644 index 0000000..fb4c0b3 --- /dev/null +++ b/src/app/movie-detail/movie-detail.component.scss @@ -0,0 +1,151 @@ +@import 'variables'; + +.ngmp-movie-details-container{ + width: 100%; +} + +.ngmp-movie-cover{ + position: relative; + max-height: 25em; + overflow: hidden; + + img{ + width: 100%; + } + + &:after{ + content: ''; + position: absolute; + 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+ */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#182b54',GradientType=0 ); /* IE6-9 */ + } +} + +.ngmp-movie-details { + position: relative; + display: flex; + flex-direction: row; + justify-content: flex-start; + padding: 0 2em; + transform: translateY(-4em); +} + +.ngmp-movie-contents { + padding: 0 1em; + color: darken($light, 35); + + h2{ + color: $primary-title; + margin-top: 0; + font-size: 44px; + } + + .ngmp-movie-info { + display: flex; + justify-content: flex-start; + flex-direction: row; + text-transform: capitalize; + margin-top: 25px; + + div { + margin-right: 1em; + } + + strong{ + color: $primary-title; + } + .icon-container{ + background-position: center; + background-size: cover; + border: 1px solid $green; + line-height: 2; + } + .avatar { + flex-shrink: 0; + width: 35px; + height: 35px; + border-radius: 50%; + -o-object-fit: cover; + object-fit: cover; + } + .ngma-actor-details { + display: flex; + flex-direction: column; + flex: 1; + align-items: center; + min-width: 200px; + padding: 5px; + } + } + + .ngmp-movie-rating-container{ + a{ + margin-left: 0.5em; + background-color: $secondary-color; + color: $grey; + padding: 0.4em; + border-radius: 5px; + text-decoration: none; + } + } + + .ngmp-movie-plot { + max-width: 70%; + line-height: 1.8; + } + + .ngmp-plot-img{ + top: 10px; + position: relative; + height: 25px; + width: 25px; + } + + .ngmp-star-img { + top: 5px; + position: relative; + height: 25px; + width: 25px; + } + + .ngmp-duration-img{ + top: 10px; + position: relative; + height: 20px; + } +} + +@media only screen and (max-width : 48em) { + .ngmp-movie-details { + flex-direction: column-reverse; + transform: translateY(0); + padding: 0 0.5em; + + .ngmp-movie-poster{ + padding: 0 1em; + } + .ngmp-movie-info { + flex-direction: column; + + div { + margin-right: 0; + margin-bottom: 1em; + } + } + .ngmp-movie-rating-container { + span{ + display: block; + margin-bottom: 1em; + } + } + .ngmp-movie-plot { + max-width: 100%; + } + } +} diff --git a/src/app/movie-detail/movie-detail.component.spec.ts b/src/app/movie-detail/movie-detail.component.spec.ts new file mode 100644 index 0000000..9f33ab1 --- /dev/null +++ b/src/app/movie-detail/movie-detail.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MovieDetailComponent } from './movie-detail.component'; + +describe('MovieDetailComponent', () => { + let component: MovieDetailComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ MovieDetailComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(MovieDetailComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/movie-detail/movie-detail.component.ts b/src/app/movie-detail/movie-detail.component.ts new file mode 100644 index 0000000..750def6 --- /dev/null +++ b/src/app/movie-detail/movie-detail.component.ts @@ -0,0 +1,42 @@ +import { Component, OnInit } from "@angular/core"; +import { ActivatedRoute } from "@angular/router"; + +import { Movie } from "../movie/models/movie.models"; +import { MovieService } from "../movie/services/movie.services"; +import { FadeIn } from "../shared/animation"; + +@Component({ + selector: "app-movie-detail", + templateUrl: "./movie-detail.component.html", + styleUrls: ["./movie-detail.component.scss"], + animations: [FadeIn], +}) +export class MovieDetailComponent implements OnInit { + public loading: boolean; + public movie: any; + public error: string = ""; + + constructor( + private movieService: MovieService, + private activatedRoute: ActivatedRoute + ) { + this.loading = true; + } + + ngOnInit() { + let movieId = this.activatedRoute.snapshot.params["id"]; + this.getMovieDetails(movieId); + } + + getMovieDetails(id: string) { + console.log(id); + this.movieService.getMovieById(id).subscribe( + (movie) => { + this.movie = movie; + console.log("getMovies", movie); + this.loading = false; + }, + (error) => (this.loading = false) + ); + } +} diff --git a/src/app/movie-detail/movie-detail.module.ts b/src/app/movie-detail/movie-detail.module.ts new file mode 100644 index 0000000..29a70f6 --- /dev/null +++ b/src/app/movie-detail/movie-detail.module.ts @@ -0,0 +1,14 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { MovieDetailRoutingModule } from './movie-detail-routing.module'; + + +@NgModule({ + declarations: [], + imports: [ + CommonModule, + MovieDetailRoutingModule + ] +}) +export class MovieDetailModule { } diff --git a/src/app/movie/movie-routing.module.ts b/src/app/movie/movie-routing.module.ts index 99ec9d7..9e6e86b 100644 --- a/src/app/movie/movie-routing.module.ts +++ b/src/app/movie/movie-routing.module.ts @@ -1,14 +1,16 @@ -import { NgModule } from '@angular/core'; -import { Routes, RouterModule } from '@angular/router'; +import { NgModule } from "@angular/core"; +import { Routes, RouterModule } from "@angular/router"; -import { MovieComponent } from './movie.component'; +import { MovieComponent } from "./movie.component"; +import { MovieDetailComponent } from "../movie-detail/movie-detail.component"; const routes: Routes = [ - { path: 'movies', component: MovieComponent } + { path: "movies", component: MovieComponent }, + { path: "movies/:type/:id", component: MovieDetailComponent }, ]; @NgModule({ imports: [RouterModule.forChild(routes)], - exports: [RouterModule] + exports: [RouterModule], }) -export class MovieRoutingModule { } +export class MovieRoutingModule {} diff --git a/src/app/movie/movie.component.html b/src/app/movie/movie.component.html index dec82d5..9396ae5 100644 --- a/src/app/movie/movie.component.html +++ b/src/app/movie/movie.component.html @@ -1,10 +1,8 @@ - - - + +
- -
+
{{movies.length}} Movies @@ -20,14 +18,23 @@
- + +
- movie poster + movie poster
+ +

{{movie.Title}}

{{movie.Year}}
+ + +
\ No newline at end of file diff --git a/src/app/movie/movie.component.scss b/src/app/movie/movie.component.scss index e57907e..00f9fe0 100644 --- a/src/app/movie/movie.component.scss +++ b/src/app/movie/movie.component.scss @@ -1,19 +1,19 @@ @import 'variables'; -:host{ +:host { display: flex; justify-content: flex-start; flex-direction: column; } -.ngmp-main-container{ +.ngmp-main-container { display: flex; justify-content: flex-start; flex-direction: row; } -.ngmp-movies-container{ +.ngmp-movies-container { display: flex; justify-content: flex-start; flex-direction: column; @@ -27,17 +27,17 @@ flex-direction: row; padding: 1em; - .ngmp-movies-count{ + .ngmp-movies-count { color: $secondary-title; } - .ngmp-movies-sort{ + .ngmp-movies-sort { color: $primary-title; padding-right: 1em; font-size: 0.8em; } - select{ + select { background-color: lighten($primary-color, 15); border: none; color: $primary-title; @@ -48,13 +48,13 @@ } } - hr{ + hr { width: 100%; border-color: $primary-color-light; opacity: 0.6; } - .ngmp-movies-list{ + .ngmp-movies-list { display: flex; justify-content: flex-start; flex-direction: row; @@ -62,49 +62,75 @@ padding: 1em; } - .ngmp-movie{ + .ngmp-movie { margin-bottom: 1.8em; flex-basis: 25%; - a{ + a { color: $primary-title; } - figure{ + + figure { padding: 0; - margin: 0; - 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); + + &:hover { + opacity: 0.7; + + .ngmp-poster { + transform: scale(1.05); + } + } + + 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); } } + + .ngmp-poster { + transition: all 0.2s; + display: block; + } + .ngmp-movie-title, - .ngmp-movie-rate{ + .ngmp-movie-rate { display: block; // margin-top: 0.3em; } - .ngmp-movie-title{ + .ngmp-movie-title { color: $green; - margin: 15px 0 5px; + margin: 15px 0 5px 42px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + width: 300px; } - .ngmp-movie-rate{ + + .ngmp-movie-rate { color: $grey; margin: 0; + margin-left: 42px; + } + + .ngmp-noimageposter { +text-align: center; } } } @media only screen and (max-width : 48em) { - .main-container{ + .main-container { flex-direction: column; - .genres-list{ + .genres-list { width: 100%; height: auto; padding: 0.8em; } - .genre-list-items{ + + .genre-list-items { display: flex; justify-content: flex-start; flex-direction: row; @@ -112,22 +138,36 @@ overflow-y: hidden; margin: 0; - li{ + li { margin-right: 1em; } } - .movies-container{ + .movies-container { width: 100%; - .movie{ - flex-basis: 50%!important; + .movie { + flex-basis: 50% !important; justify-content: space-between; } - figure{ - img{ + + figure { + img { max-width: 8em; } + + &:hover { + opacity: 0.7; + + .ngmp-poster { + transform: scale(1.05); + } + } + } + + .ngmp-poster { + transition: all 0.2s; + display: block; } } } diff --git a/src/app/movie/movie.component.ts b/src/app/movie/movie.component.ts index 6751371..a8aea07 100644 --- a/src/app/movie/movie.component.ts +++ b/src/app/movie/movie.component.ts @@ -1,8 +1,11 @@ import { Component, OnInit } from "@angular/core"; +import { Router, NavigationEnd } from '@angular/router'; import { Movie } from "./models/movie.models"; import { MovieService } from "./services/movie.services"; +import { MOVIE_PROPS } from "../shared/constants"; + @Component({ selector: "app-movie", templateUrl: "./movie.component.html", @@ -11,15 +14,27 @@ import { MovieService } from "./services/movie.services"; export class MovieComponent implements OnInit { public movies: Movie[]; public visibleMovies: Movie[]; + public MOVIE_PROPS = MOVIE_PROPS; + public loading: boolean; + sortBy: any = "id"; public l = console.log; constructor(private movieService: MovieService) { - movieService.getMovies().subscribe((movies) => { - this.movies = movies; - this.l("getMovies", movies); - }); + this.loading = true; + movieService.getMovies().subscribe( + (movies) => { + this.movies = movies; + this.l("getMovies", movies); + this.loading = false; + }, + (error) => (this.loading = false) + ); } ngOnInit(): void {} + + onSearch(movies: Movie[]) { + this.movies = movies; + } } diff --git a/src/app/movie/movie.module.ts b/src/app/movie/movie.module.ts index b5c2c57..5ea7545 100644 --- a/src/app/movie/movie.module.ts +++ b/src/app/movie/movie.module.ts @@ -8,11 +8,19 @@ 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 { MovieDetailComponent } from "../movie-detail/movie-detail.component"; +import { NoDataComponent } from "../no-data/no-data.component"; import { MovieService } from "./services/movie.services"; @NgModule({ - declarations: [MovieComponent, SearchBarComponent, LoaderComponent], + declarations: [ + MovieComponent, + SearchBarComponent, + LoaderComponent, + MovieDetailComponent, + NoDataComponent + ], imports: [CommonModule, MovieRoutingModule, FormsModule, HttpClientModule], providers: [HttpClientModule, MovieService], }) diff --git a/src/app/movie/services/movie.services.ts b/src/app/movie/services/movie.services.ts index 34a2025..95bdc85 100644 --- a/src/app/movie/services/movie.services.ts +++ b/src/app/movie/services/movie.services.ts @@ -22,20 +22,22 @@ export class MovieService { ); } - getMovieById(id: number): Observable { - const url = `${this.moviesEndpoint}/${id}`; - return this.http.get(url).pipe( - tap((_) => console.log(`fetched movie with id=${id}`)), - catchError(this.handleError(`getMovie id=${id}`)) + getMovieByTitle(title: string): Observable { + var url: string = `${this.moviesEndpoint}&s=${title}`; + return this.http.get(url).pipe( + map((res: any) => res.Search), + catchError(this.handleError("getMovieByTitle", [])) + ); + } + + getMovieById(id: string): Observable { + var url: string = `${this.moviesEndpoint}&i=${id}&plot=full`; + return this.http.get(url).pipe( + map((res: any) => res), + catchError(this.handleError("getMovieByTitle", [])) ); } - /** - * Handle Http operation that failed. - * Let the app continue. - * @param operation - name of the operation that failed - * @param result - optional value to return as the observable result - */ private handleError(operation = "operation", result?: T) { return (error: any): Observable => { console.log(`${operation} failed: ${error.message}`); diff --git a/src/app/no-data/no-data-routing.module.ts b/src/app/no-data/no-data-routing.module.ts new file mode 100644 index 0000000..ac7a30c --- /dev/null +++ b/src/app/no-data/no-data-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 NoDataRoutingModule { } diff --git a/src/app/no-data/no-data.component.html b/src/app/no-data/no-data.component.html new file mode 100644 index 0000000..f799b9c --- /dev/null +++ b/src/app/no-data/no-data.component.html @@ -0,0 +1 @@ +
No movies found
diff --git a/src/app/no-data/no-data.component.scss b/src/app/no-data/no-data.component.scss new file mode 100644 index 0000000..0955b35 --- /dev/null +++ b/src/app/no-data/no-data.component.scss @@ -0,0 +1,9 @@ +@import "variables"; +.ngmp-nodata { + color: $grey; + position: absolute; + top: 50%; + left: 50%; + margin-top: -50px; + margin-left: -50px; + } diff --git a/src/app/no-data/no-data.component.spec.ts b/src/app/no-data/no-data.component.spec.ts new file mode 100644 index 0000000..3b03ad6 --- /dev/null +++ b/src/app/no-data/no-data.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { NoDataComponent } from './no-data.component'; + +describe('NoDataComponent', () => { + let component: NoDataComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ NoDataComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(NoDataComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/no-data/no-data.component.ts b/src/app/no-data/no-data.component.ts new file mode 100644 index 0000000..9f70ac2 --- /dev/null +++ b/src/app/no-data/no-data.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-no-data', + templateUrl: './no-data.component.html', + styleUrls: ['./no-data.component.scss'] +}) +export class NoDataComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/no-data/no-data.module.ts b/src/app/no-data/no-data.module.ts new file mode 100644 index 0000000..fc9de6c --- /dev/null +++ b/src/app/no-data/no-data.module.ts @@ -0,0 +1,14 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { NoDataRoutingModule } from './no-data-routing.module'; + + +@NgModule({ + declarations: [], + imports: [ + CommonModule, + NoDataRoutingModule + ] +}) +export class NoDataModule { } diff --git a/src/app/search-bar/search-bar.component.html b/src/app/search-bar/search-bar.component.html index 2330a59..8529afe 100644 --- a/src/app/search-bar/search-bar.component.html +++ b/src/app/search-bar/search-bar.component.html @@ -1,4 +1,5 @@
search icon - +
\ No newline at end of file diff --git a/src/app/search-bar/search-bar.component.scss b/src/app/search-bar/search-bar.component.scss index af0f802..8a771b7 100644 --- a/src/app/search-bar/search-bar.component.scss +++ b/src/app/search-bar/search-bar.component.scss @@ -6,7 +6,7 @@ input { display: block; width: 100%; - background-color: darken($primary-color, 4); + background-color: darken($primary-color, 4) !important; border: 1px solid darken($primary-color, 4); color: $primary-title; padding: 1.5em; @@ -35,8 +35,9 @@ img { position: absolute; - top: calc(50% - 1em); + top: calc(50% - 1.4em); left: 1em; - width: 2em; + width: 4rem; + height: 60px; } } diff --git a/src/app/search-bar/search-bar.component.ts b/src/app/search-bar/search-bar.component.ts index f219834..b971e64 100644 --- a/src/app/search-bar/search-bar.component.ts +++ b/src/app/search-bar/search-bar.component.ts @@ -1,15 +1,24 @@ -import { Component, OnInit } from '@angular/core'; +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', - templateUrl: './search-bar.component.html', - styleUrls: ['./search-bar.component.scss'] + selector: "app-search-bar", + templateUrl: "./search-bar.component.html", + styleUrls: ["./search-bar.component.scss"], }) export class SearchBarComponent implements OnInit { - searchText: any = ''; - constructor() { } + searchText: any = ""; + public movies :any; + @Output() search = new EventEmitter(); + constructor(private movieService: MovieService) {} - ngOnInit(): void { - } + ngOnInit(): void {} + onEnter() { + this.movieService.getMovieByTitle(this.searchText).subscribe((movies) => { + console.log(movies); + this.search.emit(movies); + }); + } } diff --git a/src/app/shared/animation.ts b/src/app/shared/animation.ts new file mode 100644 index 0000000..2937a76 --- /dev/null +++ b/src/app/shared/animation.ts @@ -0,0 +1,22 @@ +import { + trigger, + state, + style, + animate, + transition + } from '@angular/animations'; + + // the fade-in/fade-out animation. + export const FadeIn = trigger('simpleFadeAnimation', [ + // the "in" style determines the "resting" state of the element when it is visible. + state('in', style({opacity: 1})), + // fade in when created. this could also be written as transition('void => *') + transition(':enter', [ + style({opacity: 0}), + animate(600 ) + ]), + // fade out when destroyed. this could also be written as transition('void => *') + transition(':leave', + animate(600, style({opacity: 0}))) + ]); + \ No newline at end of file diff --git a/src/app/shared/constants.ts b/src/app/shared/constants.ts index 8b68a2a..94d2e90 100644 --- a/src/app/shared/constants.ts +++ b/src/app/shared/constants.ts @@ -1,5 +1,8 @@ export class API_CONIG { - public static API_ENDPOINT='http://www.omdbapi.com/'; - public static API_KEY='f79aeba3'; - } - \ No newline at end of file + public static API_ENDPOINT = "http://www.omdbapi.com/"; + public static API_KEY = "f79aeba3"; +} + +export class MOVIE_PROPS { + public static NO_IMG_URL = "N/A"; +} diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts new file mode 100644 index 0000000..5c31258 --- /dev/null +++ b/src/app/shared/shared.module.ts @@ -0,0 +1,21 @@ +import { NgModule } from '@angular/core'; +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: [ + ], + exports: [ + CommonModule, + BrowserAnimationsModule + ], + providers: [ ] +}) +export class SharedModule { } diff --git a/src/assets/icons/avatar.svg b/src/assets/icons/avatar.svg new file mode 100644 index 0000000..f7e7b91 --- /dev/null +++ b/src/assets/icons/avatar.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/duration.svg b/src/assets/icons/duration.svg new file mode 100644 index 0000000..20e2465 --- /dev/null +++ b/src/assets/icons/duration.svg @@ -0,0 +1,5 @@ + \ No newline at end of file diff --git a/src/assets/icons/plot.svg b/src/assets/icons/plot.svg new file mode 100644 index 0000000..e1a58a4 --- /dev/null +++ b/src/assets/icons/plot.svg @@ -0,0 +1 @@ +aaa \ No newline at end of file diff --git a/src/assets/icons/search.svg b/src/assets/icons/search.svg index 7264f1f..a1de81a 100644 --- a/src/assets/icons/search.svg +++ b/src/assets/icons/search.svg @@ -1,39 +1,39 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/icons/star.svg b/src/assets/icons/star.svg new file mode 100644 index 0000000..2c83463 --- /dev/null +++ b/src/assets/icons/star.svg @@ -0,0 +1,7 @@ + + sosmed + + + + \ No newline at end of file diff --git a/src/sass/_variables.scss b/src/sass/_variables.scss index f2099fa..d94a77e 100644 --- a/src/sass/_variables.scss +++ b/src/sass/_variables.scss @@ -1,4 +1,4 @@ -$green: #67e419; +$green: #ED671E; $grey: #f3f3f3; $blue: #25282d; $lightBlue: #00B5E9;