mostly working project prototype stuff

Author: Ian Redpath

gulpfile.ts

@@ -1,6 +1,6 @@
 /// <reference path="./node_modules/gulpclass/index.d.ts" />
 /// <reference path="./typings/main.d.ts" />
-import {Gulpclass, SequenceTask, Task } from "gulpclass/Decorators";
+import { Gulpclass, SequenceTask, Task } from "gulpclass/Decorators";
 
 import * as gulp from 'gulp'
 import * as del from 'del'
@@ -32,6 +32,12 @@ export class Gulpfile {
         return gulp.src('server/models/**/*.json')
             .pipe(gulp.dest('dist/models'))
     }
+
+    @Task("build:projectData")
+    buildProjectData() {
+        return gulp.src('server/project/data/*.json')
+            .pipe(gulp.dest('dist/project/data'))
+    }
     @Task("build:public")
     buildPublic() {
         const tsProject = ts.createProject('public/tsconfig.json')
@@ -49,7 +55,7 @@ export class Gulpfile {
 
     @SequenceTask("build")
     build() {
-        return ["clean", "build:server", "build:data", "build:public"]
+        return ["clean", "build:server", "build:data", "build:projectData", "build:public"]
     }
 
     @SequenceTask("default")

public/project/components/libraries/libraries.ts

@@ -17,8 +17,13 @@ export class Libraries {
 
 	constructor(public libraryService: LibraryService) {
 		this.fetchingLibraries = true
-		this.libraries = libraryService.getAll()
-		this.fetchingLibraries = false
+		libraryService.getAll()
+			.subscribe(resp => {
+				if (resp.json().libraries) {
+					this.libraries = resp.json().libraries
+				}
+				this.fetchingLibraries = false
+			})
 
 	}
 }

public/project/components/libraries/library.ts

@@ -23,12 +23,17 @@ export class Library {
 		public userService: UserService) {
 		this.fetchingLibrary = true
 		const libraryId: number = +params.get('library')
-		this.library = libraryService.get(libraryId)
-		this.fetchingLibrary = false
+		libraryService.get(libraryId)
+			.subscribe(resp => {
+				if (resp.json().library) {
+					this.library = resp.json().library
+				}
+				this.fetchingLibrary = false
+			})
 	}
 
 	hasEditRights() {
-		return this.userService.getActiveUser() && this.library.user.id === this.userService.getActiveUser().id
+		return this.userService.getActiveUser() && this.library.user._id === this.userService.getActiveUser()._id
 	}
 
 	editLibraryName() {
@@ -43,10 +48,23 @@ export class Library {
 
 	saveNewLibraryName() {
 		this.isEditingLibraryName = false
+		this.libraryService.updateLibrary(this.library)
+			.subscribe(resp => {
+				if(resp.json().library) {
+					this.library = resp.json().library
+					this.libraryBackup = resp.json().library
+				}
+			})
 	}
 
 	removeMovie(id: string) {
-		_.remove(this.library.movies, mov => { return mov.imdbId === id })
+		this.libraryService.removeMovie(this.library.id, id)
+			.subscribe(resp => {
+				if (resp.json().library) {
+					this.library = resp.json().library
+				}
+			})
+		//_.remove(this.library.movies, mov => { return mov.imdbId === id })
 	}
 
 }

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

@@ -1,15 +1,15 @@
 <div *ngIf='!fetchingLibrary' class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2">
   <div>
     <div *ngIf="!isEditingLibraryName" class="library-name-container">
-      <h1>{{library.name}}</h1>
-      <span *ngIf="hasEditRights()" class="glyphicon glyphicon-pencil" (click)="editLibraryName()"></span> 
+      <h1 *ngIf="hasEditRights()" (click)="editLibraryName()" class="clickable">{{library.name}}</h1>
+      <h1 *ngIf="!hasEditRights()">{{library.name}}</h1>
     </div>
     <div *ngIf="isEditingLibraryName">
       <input type="text" [(ngModel)]="library.name">
       <span class="glyphicon glyphicon-check" (click)="saveNewLibraryName()"></span>
       <button class="btn btn-default" (click)="cancelEditingLibraryName()">Cancel</button>
     </div>
-    <a [routerLink]='["/User", { user: library.user.id }]'>{{library.user.username}}</a>
+    <a [routerLink]='["/User", { user: library.user._id }]'>{{library.user.username}}</a>
   </div>
   <div class="movie-carousel">
     <div *ngFor="#movie of library.movies" class="library-movie">

public/project/components/movies/movie.ts

@@ -18,35 +18,51 @@ import { UserService } from '../../services/userService'
 
 export class Movie {
 
-	movie:OmdbMovieModel
-	libraries: Array<LibraryModel>
+	movie: any
+	omdbMovie:OmdbMovieModel
 	fetchingMovie:boolean
 	fetchingLibraries: boolean
+	libraryId: string
 
 	constructor(public params:RouteParams, public omdbService:OmdbService,
 		public movieService: MovieService, public libraryService: LibraryService,
 		public userService: UserService) {
 		this.fetchingMovie = true
 		this.fetchingLibraries = true
-		//const id: number = +params.get('movie')
-		//const localMovie: MovieModel = movieService.get(id)
-		const imdbId: string = params.get('movie')//localMovie.imdbId
+		const imdbId: string = params.get('movie')
+		movieService.get(imdbId)
+			.subscribe(
+				resp => { 
+					if (resp.json().movie) {
+						this.movie = resp.json().movie
+					}
+					this.fetchingLibraries = false
+				})
 		omdbService.findMovieById(imdbId)
 			.subscribe(
-				data => this.movie = OmdbMovieModel.newMovie(data.json()),
-				err => { alert(err); this.movie = OmdbMovieModel.emptyMovie() },
+				data => { this.omdbMovie = OmdbMovieModel.newMovie(data.json()) },
+				err => { alert(err); this.omdbMovie = OmdbMovieModel.emptyMovie() },
 				() => { this.fetchingMovie = false}
 			)
-		this.libraries = libraryService.getLibrariesWith(imdbId)
-		this.fetchingLibraries = false
 	}
 	// eventually, this will be part of a new component and logic will be moved out of here
 	addMovie() {
+		if (this.libraryId) {
+			this.movieService.addMovieToLibrary(this.movie, this.libraryId)
+				.subscribe(resp => {
+					if (resp.json().movie) {
+						this.movie = resp.json().movie
+					}
+				})
+		} else {
+			alert("please select a library first")
+		}
+		/*
 		if(this.userService.getActiveUser()) {
 			const movieToAdd: MovieModel = this.movieService.transformFromOmdb(this.movie)
 			this.userService.addMovie(movieToAdd)
 		} else {
 			alert('sign in to add a movie!')
-		}
+		}*/
 	}
 }

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

@@ -1,9 +1,14 @@
 <div *ngIf='!fetchingMovie' class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2">
-  <h1 class="movie-title">{{movie.title}}</h1>
+  <h1 class="movie-title">{{omdbMovie.title}}</h1>
   <div class="col-sm-4 col-md-5">
-    <img *ngIf="movie.image !== 'N/A'" class="movie-image" src="">
-    <div>
-      <button class="btn btn-small" (click)="addMovie()">+</button>
+    <img *ngIf="omdbMovie.image !== 'N/A'" class="movie-image" src="">
+    <div *ngIf="userService.getActiveUser()">
+      <div>
+        <select [(ngModel)]="libraryId">
+          <option *ngFor="#library of userService.getActiveUser().libraries" value={{library.id}}>{{library.name}}</option>
+        </select>
+        <button class="btn btn-small" (click)="addMovie()">+</button>
+      </div>
       <span class="glyphicon glyphicon-star"></span>
       <span class="glyphicon glyphicon-star"></span>
       <span class="glyphicon glyphicon-star"></span>
@@ -15,24 +20,24 @@ <h1 class="movie-title">{{movie.title}}</h1>
     <div class="actors-container">
       <label for="actors">Actors:</label>
       <ul class="actors">
-        <li *ngFor="#actor of movie.actors">{{actor}}</li>
+        <li *ngFor="#actor of omdbMovie.actors">{{actor}}</li>
       </ul>
     </div>
     <div>
       <label for="director">Directed By:</label>
-      <span class="director">{{movie.directors}}</span>
+      <span class="director">{{omdbMovie.directors}}</span>
     </div>
     <div>
       <label for="summary">Plot Summary:</label>
-      <p class="summary">{{movie.plot}}</p>
+      <p class="summary">{{omdbMovie.plot}}</p>
     </div>
     <div>
       <label for="rating">Rated:</label>
-      <span class="rating">{{movie.rating}}</span>
+      <span class="rating">{{omdbMovie.rating}}</span>
     </div>
     <div>
       <label for="released">Released on:</label>
-      <span class="released">{{movie.releaseDate}}</span>
+      <span class="released">{{omdbMovie.releaseDate}}</span>
     </div>
     <div class="ratings-container">
       <label for="ratings">Average Rating:</label>
@@ -42,16 +47,16 @@ <h1 class="movie-title">{{movie.title}}</h1>
         <span class="glyphicon glyphicon-star"></span>
         <span class="glyphicon glyphicon-star"></span>
         <span class="glyphicon glyphicon-star"></span>
-        <span *ngIf="movie.tomatoMeter !== 'N/A'" class="rating-rt">
-          <a href={{movie.tomatoUrl}}>{{movie.tomatoMeter}}% on rotton tomatoes</a>
+        <span *ngIf="omdbMovie.tomatoMeter !== 'N/A'" class="rating-rt">
+          <a href={{omdbMovie.tomatoUrl}}>{{omdbMovie.tomatoMeter}}% on rotton tomatoes</a>
         </span>
       </div>
     </div>
   </div>
   <div class="col-sm-12 col-md-12" *ngIf="!fetchingLibraries">
     <h3>Libraries With This Title</h3>
     <div class="movie-in-libraries">
-      <div *ngFor="#library of libraries" class="movie-in-library">
+      <div *ngFor="#library of movie.libraries" class="movie-in-library">
         <a class="thumbnail" [routerLink]="['/Library', { library: library.id }]">{{library.name}}</a>
       </div>
     </div>

public/project/components/movies/movies.ts

@@ -18,7 +18,14 @@ export class Movies {
 
 	constructor(public movieService: MovieService) {
 		this.fetchingMovies = true
-		this.movies = movieService.getAll()
-		this.fetchingMovies = false
+		this.movieService.getAll()
+			.subscribe(resp => {
+				if (resp.json().movies) {
+					this.movies = resp.json().movies
+				} else {
+					alert('error fetching all movies')
+				}
+				this.fetchingMovies = false
+			})
 	}
 }

public/project/components/users/login.ts

@@ -1,7 +1,6 @@
 import { View, Component, Inject } from 'angular2/core'
 import { Router } from 'angular2/router'
 import { UserService } from '../../services/userService'
-import { UserModel } from '../../models/userModel'
 
 @Component({
 	selector: "vml-login"
@@ -22,15 +21,17 @@ export class Login {
 	}
 
 	login() {
-		this.userService.findUserByCredentials(this.username, this.password, resp => {
-			if (resp) {
-				this.userService.login(resp)
-				this.router.navigate(['/Home', {}])
-			} else {
-				alert('Invalid name/password')
-				this.username = ""
-				this.password = ""
-			}
-		})
+		this.userService.findUserByCredentials(this.username, this.password)
+			.subscribe(
+				resp => {
+					if (resp.json().user) {
+						this.userService.login(resp.json().user)
+						this.router.navigate(['/Home', {}])
+					} else {
+						alert('Invalid name/password')
+						this.username = ""
+						this.password = ""
+					}
+				})
 	}
 }

public/project/components/users/register.ts

@@ -1,7 +1,6 @@
 import { View, Component, Inject } from 'angular2/core'
 import { Router } from 'angular2/router'
 import { UserService } from '../../services/userService'
-import { UserModel } from '../../models/userModel'
 
 @Component({
 	selector: "vml-register"
@@ -13,21 +12,22 @@ import { UserModel } from '../../models/userModel'
 
 export class Register {
 
-	user: UserModel
+	user: any
 
 	constructor(public userService: UserService, public router: Router) {
-		this.user = UserModel.newUser({})
+		this.user = {}
 	}
 
 	register() {
-		this.userService.createUser(this.user, newUser => {
-			if(newUser) {
-				this.userService.login(newUser)
-				this.router.navigate(['/Home', {}])
-			} else {
-				// assume invalid username
-				alert('invalid username')
-			}
-		})
+		this.userService.createUser(this.user)
+			.subscribe(resp => {
+				const response = resp.json()
+				if(response.user) {
+					this.userService.login(response.user)
+					this.router.navigate(['/Home', {}])
+				} else if (response.error) {
+					alert(response.error)
+				}
+			})
 	}
 }