Skip to content

Commit dac2e20

Browse files
author
Ian Redpath
committed
homepage
1 parent bb2435b commit dac2e20

File tree

5 files changed

+109
-26
lines changed

5 files changed

+109
-26
lines changed

‎public/project/app.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ import { OmdbService } from './services/omdbService'
1212
import { LibraryService } from './services/libraryService'
1313
import { MovieService } from './services/movieService'
1414
import { UserService } from './services/userService'
15-
import { ResultsService } from './services/resultsService'
1615
import { RatingService } from './services/ratingService'
1716
import { PosterService } from './services/posterService'
1817

@@ -27,5 +26,5 @@ import { PosterService } from './services/posterService'
2726

2827
class App { }
2928

30-
bootstrap(App, [ROUTER_PROVIDERS, OmdbService, LibraryService, MovieService, UserService, ResultsService, RatingService,
29+
bootstrap(App, [ROUTER_PROVIDERS, OmdbService, LibraryService, MovieService, UserService, RatingService,
3130
PosterService, HTTP_PROVIDERS, provide(LocationStrategy, { useClass: HashLocationStrategy })])

‎public/project/components/home/home.ts‎

Lines changed: 49 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,60 @@
11
import { View, Component } from 'angular2/core'
2-
import { UserService } from '../../services/userService'
2+
import { RouterLink } from 'angular2/router'
3+
import { LibraryService } from '../../services/libraryService'
4+
import { MovieService } from '../../services/movieService'
35

46
@Component({
57
selector: "vml-home"
68
})
79
@View({
8-
templateUrl: "/project/components/home/home.view.html"
10+
templateUrl: "/project/components/home/home.view.html",
11+
directives: [RouterLink]
912
})
1013

1114
export class Home {
12-
constructor(public userService: UserService) {
13-
userService.loggedIn()
14-
.subscribe(resp => { resp.json() && resp.json().user && this.userService.setActiveUser(resp.json().user) })
15+
fetchingLibraries: boolean
16+
fetchingMovies: boolean
17+
libraries: Array<any>
18+
movies: Array<any>
19+
20+
constructor(public libraryService: LibraryService, public movieService: MovieService) {
21+
this.fetchingLibraries = true
22+
this.fetchingMovies = true
23+
libraryService.getAll()
24+
.subscribe(resp => {
25+
if (resp.json().libraries) {
26+
this.libraries = resp.json().libraries
27+
} else {
28+
alert('error fetching libraries')
29+
this.libraries = []
30+
}
31+
this.fetchingLibraries = false
32+
movieService.getAll()
33+
.subscribe(resp => {
34+
if (resp.json().movies) {
35+
this.movies = resp.json().movies
36+
} else {
37+
alert('error fetching all movies')
38+
this.movies = []
39+
}
40+
this.fetchingMovies = false
41+
})
42+
})
43+
}
44+
45+
getRandomMovies() {
46+
return _.sampleSize(this.movies, 10)
47+
}
48+
49+
getRandomLibraries() {
50+
return _.sampleSize(this.libraries, 10)
51+
}
52+
53+
getAvgRating(ratings: Array<any>) {
54+
console.log(ratings)
55+
return _.reduce(ratings, (acc, rat) => { return acc + (<any>rat).value }, 0) / Math.max(ratings.length, 1)
56+
//console.log(rat)
57+
//return rat
1558
}
59+
1660
}

‎public/project/components/home/home.view.html‎

Lines changed: 41 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,43 @@
11
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
2-
<h1 class="page-header">Welcome!</h1>
3-
<p>Landing page for the virtual movie library app! </p>
2+
<h1 class="page-header">Welcome!</h1>
3+
<h4 class="h4-margins">Check out some movies!</h4>
4+
<div class="sample-movies row results-row">
5+
<span class="no-results" *ngIf="getRandomMovies().length ===0">No movies found</span>
6+
<div *ngFor="#movie of getRandomMovies()" class="library-movie col-xs-6 col-sm-4 col-md-3 col-lg-2">
7+
<div class="movie-poster-container">
8+
<img src={{movie.image}} class="movie-image"[routerLink]="['/Movie', { movie: movie.imdbId }]">
9+
</div>
10+
<div class="movie-title-year">
11+
<span>{{movie.title}} ({{movie.year}})</span>
12+
<div class="ratings">
13+
<span class="glyphicon {{ getAvgRating(movie.ratings) < 1 ? 'glyphicon-star-empty': 'glyphicon-star' }}"></span>
14+
<span class="glyphicon {{ getAvgRating(movie.ratings) < 2 ? 'glyphicon-star-empty': 'glyphicon-star' }}"></span>
15+
<span class="glyphicon {{ getAvgRating(movie.ratings) < 3 ? 'glyphicon-star-empty': 'glyphicon-star' }}"></span>
16+
<span class="glyphicon {{ getAvgRating(movie.ratings) < 4 ? 'glyphicon-star-empty': 'glyphicon-star' }}"></span>
17+
<span class="glyphicon {{ getAvgRating(movie.ratings) < 5 ? 'glyphicon-star-empty': 'glyphicon-star' }}"></span>
18+
</div>
19+
<span class="more-info">{{ movie.ratings.length }} {{ movie.ratings.length === 1 ? 'rating' : 'ratings' }}</span>
20+
</div>
21+
</div>
22+
</div>
23+
<h4 class="h4-margins">Or maybe some libraries!</h4>
24+
<div class="sample-libraries row results-row">
25+
<span class="no-results" *ngIf="getRandomLibraries().length ===0">No libraries found</span>
26+
<div *ngFor="#library of getRandomLibraries()" class="library-movie col-xs-6 col-sm-4 col-md-3 col-lg-2">
27+
<div class="movie-poster-container">
28+
<img src="./assets/default_library.png" class="movie-image"[routerLink]="['/Library', { library: library._id }]">
29+
</div>
30+
<div class="library-details">
31+
<span>{{library.name}} ({{library.user.username}})</span>
32+
<div class="ratings">
33+
<span class="glyphicon {{ getAvgRating(library.ratings) < 1 ? 'glyphicon-star-empty': 'glyphicon-star' }}"></span>
34+
<span class="glyphicon {{ getAvgRating(library.ratings) < 2 ? 'glyphicon-star-empty': 'glyphicon-star' }}"></span>
35+
<span class="glyphicon {{ getAvgRating(library.ratings) < 3 ? 'glyphicon-star-empty': 'glyphicon-star' }}"></span>
36+
<span class="glyphicon {{ getAvgRating(library.ratings) < 4 ? 'glyphicon-star-empty': 'glyphicon-star' }}"></span>
37+
<span class="glyphicon {{ getAvgRating(library.ratings) < 5 ? 'glyphicon-star-empty': 'glyphicon-star' }}"></span>
38+
</div>
39+
<span class="more-info">{{ library.ratings.length }} {{ library.ratings.length === 1 ? 'rating' : 'ratings' }}</span>
40+
</div>
41+
</div>
42+
</div>
443
</div>

‎public/project/components/libraries/libraries.view.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ <h4 class="h4-margins">Highest rated libraries</h4>
2727
<span class="glyphicon {{ getAvgRating(library.ratings) < 4 ? 'glyphicon-star-empty': 'glyphicon-star' }}"></span>
2828
<span class="glyphicon {{ getAvgRating(library.ratings) < 5 ? 'glyphicon-star-empty': 'glyphicon-star' }}"></span>
2929
</div>
30+
<span class="more-info">{{ library.ratings.length }} {{ library.ratings.length === 1 ? 'rating' : 'ratings' }}</span>
3031
</div>
3132
</div>
3233
</div>

‎public/project/components/movies/movies.view.html‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -14,23 +14,23 @@ <h1>Movies</h1>
1414
<h4 class="h4-margins">Highest rated movies</h4>
1515
<div class="sample-movies row results-row">
1616
<span class="no-results" *ngIf="highestRatedMovies.length ===0">No movies found</span>
17-
<div *ngFor="#movie of highestRatedMovies.slice(0, 10)" class="library-movie col-xs-6 col-sm-4 col-md-3 col-lg-2">
18-
<div class="movie-poster-container">
19-
<img src={{movie.image}} class="movie-image"[routerLink]="['/Movie', { movie: movie.imdbId }]">
20-
</div>
21-
<div class="movie-title-year">
22-
<span>{{movie.title}} ({{movie.year}})</span>
23-
<div class="ratings">
24-
<span class="glyphicon {{ getAvgRating(movie.ratings) < 1 ? 'glyphicon-star-empty': 'glyphicon-star' }}"></span>
25-
<span class="glyphicon {{ getAvgRating(movie.ratings) < 2 ? 'glyphicon-star-empty': 'glyphicon-star' }}"></span>
26-
<span class="glyphicon {{ getAvgRating(movie.ratings) < 3 ? 'glyphicon-star-empty': 'glyphicon-star' }}"></span>
27-
<span class="glyphicon {{ getAvgRating(movie.ratings) < 4 ? 'glyphicon-star-empty': 'glyphicon-star' }}"></span>
28-
<span class="glyphicon {{ getAvgRating(movie.ratings) < 5 ? 'glyphicon-star-empty': 'glyphicon-star' }}"></span>
29-
</div>
30-
<span class="more-info">{{ movie.ratings.length }} {{ movie.ratings.length === 1 ? 'rating' : 'ratings' }}</span>
31-
</div>
32-
</div>
33-
</div>
17+
<div *ngFor="#movie of highestRatedMovies.slice(0, 10)" class="library-movie col-xs-6 col-sm-4 col-md-3 col-lg-2">
18+
<div class="movie-poster-container">
19+
<img src={{movie.image}} class="movie-image"[routerLink]="['/Movie', { movie: movie.imdbId }]">
20+
</div>
21+
<div class="movie-title-year">
22+
<span>{{movie.title}} ({{movie.year}})</span>
23+
<div class="ratings">
24+
<span class="glyphicon {{ getAvgRating(movie.ratings) < 1 ? 'glyphicon-star-empty': 'glyphicon-star' }}"></span>
25+
<span class="glyphicon {{ getAvgRating(movie.ratings) < 2 ? 'glyphicon-star-empty': 'glyphicon-star' }}"></span>
26+
<span class="glyphicon {{ getAvgRating(movie.ratings) < 3 ? 'glyphicon-star-empty': 'glyphicon-star' }}"></span>
27+
<span class="glyphicon {{ getAvgRating(movie.ratings) < 4 ? 'glyphicon-star-empty': 'glyphicon-star' }}"></span>
28+
<span class="glyphicon {{ getAvgRating(movie.ratings) < 5 ? 'glyphicon-star-empty': 'glyphicon-star' }}"></span>
29+
</div>
30+
<span class="more-info">{{ movie.ratings.length }} {{ movie.ratings.length === 1 ? 'rating' : 'ratings' }}</span>
31+
</div>
32+
</div>
33+
</div>
3434
<h4 class="h4-margins">Movies with the most libraries</h4>
3535
<div class="sample-movies row results-row">
3636
<span class="no-results" *ngIf="mostLibsMovies.length ===0">No movies found</span>

0 commit comments

Comments
 (0)