Skip to content

Commit 5eb4c71

Browse files
author
Ian Redpath
committed
adding comments to movies, more fun styling
1 parent a142838 commit 5eb4c71

File tree

11 files changed

+201
-112
lines changed

11 files changed

+201
-112
lines changed

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,14 @@ <h1>Libraries</h1>
55
<div class="input-group">
66
<input type="text" class="form-control" placeholder="Search by library name, user, or movie" [(ngModel)]="query">
77
<span class="input-group-btn">
8-
<button class="btn btn-default" type="button" (click)="search()">Go!</button>
8+
<button class="btn btn-default glyphicon glyphicon-search search-icon" type="button" (click)="search()" (keyup.enter)="search()"></button>
99
</span>
1010
</div>
1111
</div>
1212
</div>
1313
<div *ngIf="!showSearchResults" class="libraries-no-search">
1414
<h4 class="h4-margins">Highest rated libraries</h4>
15-
<div class="sample-libraries row">
15+
<div class="sample-libraries row results-row">
1616
<span class="no-results" *ngIf="highestRatedLibs.length ===0">No libraries found</span>
1717
<div *ngFor="#library of highestRatedLibs.slice(0, 10)" class="library-movie col-xs-6 col-sm-4 col-md-3 col-lg-2">
1818
<div class="movie-poster-container">
@@ -31,7 +31,7 @@ <h4 class="h4-margins">Highest rated libraries</h4>
3131
</div>
3232
</div>
3333
<h4 class="h4-margins">Libraries with the most movies</h4>
34-
<div class="sample-libraries row">
34+
<div class="sample-libraries row results-row">
3535
<span class="no-results" *ngIf="mostMoviesLibs.length ===0">No libraries found</span>
3636
<div *ngFor="#library of mostMoviesLibs.slice(0, 10)" class="library-movie col-xs-6 col-sm-4 col-md-3 col-lg-2">
3737
<div class="movie-poster-container">
@@ -44,7 +44,7 @@ <h4 class="h4-margins">Libraries with the most movies</h4>
4444
</div>
4545
</div>
4646
<h4 class="h4-margins">Libraries with the most comments</h4>
47-
<div class="sample-libraries row">
47+
<div class="sample-libraries row results-row">
4848
<span class="no-results" *ngIf="mostCommentsLibs.length ===0">No libraries found</span>
4949
<div *ngFor="#library of mostCommentsLibs.slice(0, 10)" class="library-movie col-xs-6 col-sm-4 col-md-3 col-lg-2">
5050
<div class="movie-poster-container">
@@ -58,7 +58,7 @@ <h4 class="h4-margins">Libraries with the most comments</h4>
5858
</div>
5959
</div>
6060
<div class="libraries-search" *ngIf="showSearchResults">
61-
<div class="search-results row">
61+
<div class="search-results row results-row">
6262
<span class="no-results" *ngIf="getShownResults.length ===0">No results found</span>
6363
<div *ngFor="#library of getShownResults()" class="library-movie col-xs-6 col-sm-4 col-md-3 col-lg-2">
6464
<div class="movie-poster-container">

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

Lines changed: 36 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -5,24 +5,12 @@ <h1 *ngIf="hasEditRights()" (click)="editLibraryName()" class="clickable">{{libr
55
<h1 *ngIf="!hasEditRights()">{{library.name}}</h1>
66
</div>
77
<div *ngIf="isEditingLibraryName">
8-
<input type="text" [(ngModel)]="library.name">
8+
<input type="text" [(ngModel)]="library.name" (keyup.enter)="saveNewLibraryName()">
99
<span class="glyphicon glyphicon-check" (click)="saveNewLibraryName()"></span>
1010
<button class="btn btn-default" (click)="cancelEditingLibraryName()">Cancel</button>
1111
</div>
1212
<a [routerLink]='["/User", { user: library.user._id }]'>{{library.user.username}}</a>
1313
</div>
14-
<div class="library-contents row">
15-
<span class="no-results" *ngIf="library.movies.length ===0">No movies found</span>
16-
<div *ngFor="#movie of library.movies" class="library-movie col-xs-6 col-sm-4 col-md-3 col-lg-2">
17-
<button *ngIf="hasEditRights()" class="btn btn-xs glyphicon glyphicon-remove thumbnail-remove" (click)="removeMovie(movie._id)"></button>
18-
<div class="movie-poster-container-library">
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>
24-
</div>
25-
</div>
2614

2715
<div class="ratings-container">
2816
<label *ngIf="userService.getActiveUser()" for="my-rating">My Rating:</label>
@@ -51,26 +39,42 @@ <h1 *ngIf="!hasEditRights()">{{library.name}}</h1>
5139
<span class="glyphicon {{ avgRating < 5 ? 'glyphicon-star-empty': 'glyphicon-star' }}"></span>
5240
</div>
5341
</div>
54-
55-
<h3>COMMENTS</h3>
56-
<span class="no-results" *ngIf="library.comments.length ===0">No comments found</span>
57-
<table>
58-
<tr *ngFor="#comment of library.comments">
59-
<td><a [routerLink]='["/User", { user: comment.userId }]'>{{comment.username}}</a></td>
60-
<td>
61-
<div *ngIf="isEditingComment(comment._id)">
62-
<input type="text" [(ngModel)]="editCommentText">
63-
<span class="glyphicon glyphicon-check" (click)="saveEditComment()"></span>
64-
<button class="btn btn-default" (click)="cancelEditComment()">Cancel</button>
42+
<div class="library-contents row results-row">
43+
<span class="no-results" *ngIf="library.movies.length ===0">No movies found</span>
44+
<div *ngFor="#movie of library.movies" class="library-movie col-xs-6 col-sm-4 col-md-3 col-lg-2">
45+
<button *ngIf="hasEditRights()" class="btn btn-xs glyphicon glyphicon-remove thumbnail-remove" (click)="removeMovie(movie._id)"></button>
46+
<div class="movie-poster-container-library">
47+
<img src={{movie.image}} class="movie-image"[routerLink]="['/Movie', { movie: movie.imdbId }]">
6548
</div>
66-
<div *ngIf="!isEditingComment(comment._id)" (click)="editComment(comment)">
67-
{{comment.comment}}
49+
<div class="movie-title-year">
50+
<span>{{movie.title}} ({{movie.year}})</span>
6851
</div>
69-
</td>
70-
</tr>
71-
</table>
72-
<div *ngIf="userService.getActiveUser()">
73-
<input type="text" class="comment-input" [(ngModel)]="newComment">
74-
<button class="btn" (click)="addComment()">COMMENT!</button>
52+
</div>
53+
</div>
54+
55+
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 comments">
56+
<h3 class="h4-margins">Comments</h3>
57+
<div class="results-row col-xs-12 col-sm-12 col-md-12 col-lg-12">
58+
<span class="no-results" *ngIf="library.comments.length ===0">No comments</span>
59+
<table>
60+
<tr *ngFor="#comment of library.comments">
61+
<td><a [routerLink]='["/User", { user: comment.userId }]'>{{comment.username}}</a></td>
62+
<td>
63+
<div *ngIf="isEditingComment(comment._id)">
64+
<input type="text" [(ngModel)]="editCommentText">
65+
<span class="glyphicon glyphicon-check" (click)="saveEditComment()"></span>
66+
<button class="btn btn-default" (click)="cancelEditComment()">Cancel</button>
67+
</div>
68+
<div *ngIf="!isEditingComment(comment._id)" (click)="editComment(comment)">
69+
{{comment.comment}}
70+
</div>
71+
</td>
72+
</tr>
73+
</table>
74+
</div>
75+
<div *ngIf="userService.getActiveUser()">
76+
<input type="text" class="comment-input" [(ngModel)]="newComment" (keyup.enter)="addComment()">
77+
<button class="btn" (click)="addComment()">Comment!</button>
78+
</div>
7579
</div>
7680
</div>

‎public/project/components/movies/movie.ts‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,9 @@ export class Movie {
3030
myRating: number
3131
myRatingBackup: number
3232
avgRating: number
33+
newComment: string
34+
editCommentText: string
35+
editCommentId: string
3336

3437
// HOLY CRAP MAKE THIS LOOK LESS AWFUL PLEASE
3538
constructor(public params:RouteParams, public omdbService:OmdbService,
@@ -206,4 +209,50 @@ export class Movie {
206209
}
207210
}
208211
}
212+
213+
addComment() {
214+
const user = this.userService.getActiveUser()
215+
if (this.newComment && user) {
216+
const comment = {
217+
comment: this.newComment,
218+
userId: user._id,
219+
username: user.username,
220+
target: this.movie._id
221+
}
222+
this.libraryService.addCommentToLibrary(this.movie._id, comment)
223+
.subscribe(resp => {
224+
if (resp.json().comment) {
225+
this.movie.comments.push(resp.json().comment)
226+
this.newComment = ""
227+
}
228+
})
229+
}
230+
}
231+
232+
isEditingComment(id: string) {
233+
return id === this.editCommentId
234+
}
235+
236+
editComment(comment: any) {
237+
if (this.userService.getActiveUser() && this.userService.getActiveUser()._id === comment.userId) {
238+
this.editCommentId = comment._id
239+
this.editCommentText = (<any>comment).comment
240+
}
241+
}
242+
243+
saveEditComment() {
244+
this.libraryService.editCommentForLibrary(this.movie._id, this.editCommentId, this.editCommentText)
245+
.subscribe(resp => {
246+
if (resp.json().comment) {
247+
const comm: any = _.find(this.movie.comments, c => { return (<any>c)._id === this.editCommentId })
248+
comm.comment = this.editCommentText
249+
this.cancelEditComment()
250+
}
251+
})
252+
}
253+
254+
cancelEditComment() {
255+
this.editCommentId = null
256+
this.editCommentText = ""
257+
}
209258
}

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

Lines changed: 86 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,97 @@
11
<div *ngIf='!fetchingMovie' class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2">
2-
<h1 class="movie-title">{{omdbMovie.title}}</h1>
3-
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4 xxs">
4-
<img *ngIf="movie.image" class="movie-image" src={{movie.image}}>
5-
<div *ngIf="userService.getActiveUser()">
6-
<div *ngIf="possibleLibs.length > 0">
7-
<select [(ngModel)]="libraryId">
8-
<option *ngFor="#library of possibleLibs" value={{library._id}}>{{library.name}}</option>
9-
</select>
10-
<button class="btn btn-small" (click)="addMovie()">+</button>
11-
</div>
12-
<label for="my-rating">My Rating:</label>
13-
<div class="my-rating" (mouseleave)="clearPreview()" (mouseenter)="storeRating()">
14-
<span class="glyphicon clickable {{ myRating < 1 ? 'glyphicon-star-empty': 'glyphicon-star' }}"
15-
(mouseenter)="ratePreview(1)" (click)="rate(1)"></span>
16-
<span class="glyphicon clickable {{ myRating < 2 ? 'glyphicon-star-empty': 'glyphicon-star' }}"
17-
(mouseenter)="ratePreview(2)" (click)="rate(2)"></span>
18-
<span class="glyphicon clickable {{ myRating < 3 ? 'glyphicon-star-empty': 'glyphicon-star' }}"
19-
(mouseenter)="ratePreview(3)" (click)="rate(3)"></span>
20-
<span class="glyphicon clickable {{ myRating < 4 ? 'glyphicon-star-empty': 'glyphicon-star' }}"
21-
(mouseenter)="ratePreview(4)" (click)="rate(4)"></span>
22-
<span class="glyphicon clickable {{ myRating < 5 ? 'glyphicon-star-empty': 'glyphicon-star' }}"
23-
(mouseenter)="ratePreview(5)" (click)="rate(5)"></span>
24-
<button class="btn btn-default" (click)="unrate()">Clear</button>
2+
<div class="row">
3+
<h1 class="movie-title">{{omdbMovie.title}}</h1>
4+
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4 xxs">
5+
<img *ngIf="movie.image" class="movie-image" src={{movie.image}}>
6+
<div *ngIf="userService.getActiveUser()">
7+
<div *ngIf="possibleLibs.length > 0">
8+
<select [(ngModel)]="libraryId">
9+
<option *ngFor="#library of possibleLibs" value={{library._id}}>{{library.name}}</option>
10+
</select>
11+
<button class="btn btn-small" (click)="addMovie()">+</button>
12+
</div>
13+
<label for="my-rating">My Rating:</label>
14+
<div class="my-rating" (mouseleave)="clearPreview()" (mouseenter)="storeRating()">
15+
<span class="glyphicon clickable {{ myRating < 1 ? 'glyphicon-star-empty': 'glyphicon-star' }}"
16+
(mouseenter)="ratePreview(1)" (click)="rate(1)"></span>
17+
<span class="glyphicon clickable {{ myRating < 2 ? 'glyphicon-star-empty': 'glyphicon-star' }}"
18+
(mouseenter)="ratePreview(2)" (click)="rate(2)"></span>
19+
<span class="glyphicon clickable {{ myRating < 3 ? 'glyphicon-star-empty': 'glyphicon-star' }}"
20+
(mouseenter)="ratePreview(3)" (click)="rate(3)"></span>
21+
<span class="glyphicon clickable {{ myRating < 4 ? 'glyphicon-star-empty': 'glyphicon-star' }}"
22+
(mouseenter)="ratePreview(4)" (click)="rate(4)"></span>
23+
<span class="glyphicon clickable {{ myRating < 5 ? 'glyphicon-star-empty': 'glyphicon-star' }}"
24+
(mouseenter)="ratePreview(5)" (click)="rate(5)"></span>
25+
<button class="btn btn-default" (click)="unrate()">Clear</button>
26+
</div>
2527
</div>
2628
</div>
27-
</div>
28-
<div class="col-xs-6 col-sm-6 col-md-8 col-lg-8 xxs">
29-
<div class="actors-container">
30-
<label for="actors">Actors:</label>
31-
<ul class="actors">
32-
<li *ngFor="#actor of omdbMovie.actors">{{actor}}</li>
33-
</ul>
34-
</div>
35-
<div>
36-
<label for="director">Directed By:</label>
37-
<span class="director">{{omdbMovie.directors}}</span>
38-
</div>
39-
<div>
40-
<label for="summary">Plot Summary:</label>
41-
<p class="summary">{{omdbMovie.plot}}</p>
42-
</div>
43-
<div>
44-
<label for="rating">Rated:</label>
45-
<span class="rating">{{omdbMovie.rating}}</span>
46-
</div>
47-
<div>
48-
<label for="released">Released on:</label>
49-
<span class="released">{{omdbMovie.releaseDate}}</span>
50-
</div>
51-
<div class="ratings-container">
52-
<label for="ratings">Average Rating:</label>
53-
<div class="ratings">
54-
<span class="glyphicon {{ avgRating < 1 ? 'glyphicon-star-empty': 'glyphicon-star' }}"></span>
55-
<span class="glyphicon {{ avgRating < 2 ? 'glyphicon-star-empty': 'glyphicon-star' }}"></span>
56-
<span class="glyphicon {{ avgRating < 3 ? 'glyphicon-star-empty': 'glyphicon-star' }}"></span>
57-
<span class="glyphicon {{ avgRating < 4 ? 'glyphicon-star-empty': 'glyphicon-star' }}"></span>
58-
<span class="glyphicon {{ avgRating < 5 ? 'glyphicon-star-empty': 'glyphicon-star' }}"></span>
59-
<span *ngIf="omdbMovie.tomatoMeter !== 'N/A'" class="rating-rt">
60-
<a href={{omdbMovie.tomatoUrl}}>{{omdbMovie.tomatoMeter}}% on rotton tomatoes</a>
61-
</span>
29+
<div class="col-xs-6 col-sm-6 col-md-8 col-lg-8 xxs">
30+
<div class="actors-container">
31+
<label for="actors">Actors:</label>
32+
<ul class="actors">
33+
<li *ngFor="#actor of omdbMovie.actors">{{actor}}</li>
34+
</ul>
35+
</div>
36+
<div>
37+
<label for="director">Directed By:</label>
38+
<span class="director">{{omdbMovie.directors}}</span>
39+
</div>
40+
<div>
41+
<label for="summary">Plot Summary:</label>
42+
<p class="summary">{{omdbMovie.plot}}</p>
43+
</div>
44+
<div>
45+
<label for="rating">Rated:</label>
46+
<span class="rating">{{omdbMovie.rating}}</span>
47+
</div>
48+
<div>
49+
<label for="released">Released on:</label>
50+
<span class="released">{{omdbMovie.releaseDate}}</span>
51+
</div>
52+
<div class="ratings-container">
53+
<label for="ratings">Average Rating:</label>
54+
<div class="ratings">
55+
<span class="glyphicon {{ avgRating < 1 ? 'glyphicon-star-empty': 'glyphicon-star' }}"></span>
56+
<span class="glyphicon {{ avgRating < 2 ? 'glyphicon-star-empty': 'glyphicon-star' }}"></span>
57+
<span class="glyphicon {{ avgRating < 3 ? 'glyphicon-star-empty': 'glyphicon-star' }}"></span>
58+
<span class="glyphicon {{ avgRating < 4 ? 'glyphicon-star-empty': 'glyphicon-star' }}"></span>
59+
<span class="glyphicon {{ avgRating < 5 ? 'glyphicon-star-empty': 'glyphicon-star' }}"></span>
60+
<span *ngIf="omdbMovie.tomatoMeter !== 'N/A'" class="rating-rt">
61+
<a href={{omdbMovie.tomatoUrl}}>{{omdbMovie.tomatoMeter}}% on rotton tomatoes</a>
62+
</span>
63+
</div>
6264
</div>
6365
</div>
6466
</div>
67+
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 comments">
68+
<h3 class="h4-margins">Comments</h3>
69+
<div class="results-row">
70+
<span class="no-results" *ngIf="movie.comments.length ===0">No comments</span>
71+
<table>
72+
<tr *ngFor="#comment of movie.comments">
73+
<td><a [routerLink]='["/User", { user: comment.userId }]'>{{comment.username}}</a></td>
74+
<td>
75+
<div *ngIf="isEditingComment(comment._id)">
76+
<input type="text" [(ngModel)]="editCommentText">
77+
<span class="glyphicon glyphicon-check" (click)="saveEditComment()"></span>
78+
<button class="btn btn-default" (click)="cancelEditComment()">Cancel</button>
79+
</div>
80+
<div *ngIf="!isEditingComment(comment._id)" (click)="editComment(comment)">
81+
{{comment.comment}}
82+
</div>
83+
</td>
84+
</tr>
85+
</table>
86+
<div *ngIf="userService.getActiveUser()">
87+
<input type="text" class="comment-input" [(ngModel)]="newComment" (keyup.enter)="addComment()">
88+
<button class="btn" (click)="addComment()">Comment!</button>
89+
</div>
90+
</div>
91+
</div>
6592
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" *ngIf="!fetchingLibraries">
6693
<h3 class="h4-margins">Libraries With This Title</h3>
67-
<div class="sample-libraries row">
94+
<div class="sample-libraries row results-row">
6895
<span class="no-results" *ngIf="movie.libraries.length ===0">No libraries with this title</span>
6996
<div *ngFor="#library of movie.libraries" class="library-movie col-xs-6 col-sm-4 col-md-3 col-lg-2">
7097
<div class="movie-poster-container">

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,14 @@ <h1>Movies</h1>
55
<div class="input-group">
66
<input type="text" class="form-control" placeholder="Search by title" [(ngModel)]="query">
77
<span class="input-group-btn">
8-
<button class="btn btn-default" type="button" (click)="search()">Go!</button>
8+
<button class="btn btn-default glyphicon glyphicon-search search-icon" type="button" (click)="search()" (keyup.enter)="search()"></button>
99
</span>
1010
</div>
1111
</div>
1212
</div>
1313
<div *ngIf="!showSearchResults" class="movies-no-search">
1414
<h4 class="h4-margins">Highest rated movies</h4>
15-
<div class="sample-movies row">
15+
<div class="sample-movies row results-row">
1616
<span class="no-results" *ngIf="highestRatedMovies.length ===0">No movies found</span>
1717
<div *ngFor="#movie of highestRatedMovies.slice(0, 10)" class="library-movie col-xs-6 col-sm-4 col-md-3 col-lg-2">
1818
<div class="movie-poster-container">
@@ -32,7 +32,7 @@ <h4 class="h4-margins">Highest rated movies</h4>
3232
</div>
3333
</div>
3434
<h4 class="h4-margins">Movies with the most libraries</h4>
35-
<div class="sample-movies row">
35+
<div class="sample-movies row results-row">
3636
<span class="no-results" *ngIf="mostLibsMovies.length ===0">No movies found</span>
3737
<div *ngFor="#movie of mostLibsMovies.slice(0, 10)" class="library-movie col-xs-6 col-sm-4 col-md-3 col-lg-2">
3838
<div class="movie-poster-container">
@@ -45,7 +45,7 @@ <h4 class="h4-margins">Movies with the most libraries</h4>
4545
</div>
4646
</div>
4747
<h4 class="h4-margins">Movies with the most comments</h4>
48-
<div class="sample-movies row">
48+
<div class="sample-movies row results-row">
4949
<span class="no-results" *ngIf="mostCommentsMovies.length ===0">No movies found</span>
5050
<div *ngFor="#movie of mostCommentsMovies.slice(0, 10)" class="library-movie col-xs-6 col-sm-4 col-md-3 col-lg-2">
5151
<div class="movie-poster-container">
@@ -59,7 +59,7 @@ <h4 class="h4-margins">Movies with the most comments</h4>
5959
</div>
6060
</div>
6161
<div class="movies-search" *ngIf="showSearchResults">
62-
<div class="search-results row">
62+
<div class="search-results row results-row">
6363
<span class="no-results" *ngIf="results.length ===0">No results found</span>
6464
<div *ngFor="#movie of results" class="library-movie col-xs-6 col-sm-4 col-md-3 col-lg-2">
6565
<div class="movie-poster-container">

0 commit comments

Comments
 (0)