Initial code state created

codecraft-tv · Feb 8, 2017 · f2f5fec · f2f5fec
1 parent 318bfa1
commit f2f5fec
Show file tree

Hide file tree

Showing 14 changed files with 125 additions and 169 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,4 +1,12 @@
 <app-header></app-header>
 <div class="m-t-1">
-  <router-outlet></router-outlet>
+
+  <app-search></app-search>
+  <hr>
+
+  <app-library></app-library>
+  <hr>
+
+  <app-book></app-book>
+  <hr>
 </div>
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
@@ -1,11 +1,5 @@
 import {Routes} from "@angular/router";
-import {SearchComponent} from "./search/search.component";
-import {LibraryComponent} from "./library/library.component";
-import {BookComponent} from "./book/book.component";
 
 export const routes: Routes = [
-  {path: '', redirectTo: 'library', pathMatch: 'full'},
-  {path: 'library', pathMatch: 'full', component: LibraryComponent},
-  {path: 'search', component: SearchComponent},
-  {path: 'book/:bookId', component: BookComponent},
+  //TODO: Define the routes
 ];
diff --git a/src/app/book-list/book-list.component.html b/src/app/book-list/book-list.component.html
@@ -1,30 +1,69 @@
 <div class="row m-3">
-  <div class="col-md-4 col-lg-3 col-sm-1"
-       *ngFor="let book of books">
+
+  <div class="col-md-4 col-lg-3 col-sm-1">
     <div class="panel panel-default">
       <div class="panel-heading">
         <h3 class="panel-title">
-          <a [routerLink]="['/book', book.id]">{{ book.title }}</a>
+          <a>Book Title 1</a>
         </h3>
       </div>
       <div class="panel-body text-center">
-        <h6 class="card-subtitle mb-2 text-muted">{{ book.subTitle }}</h6>
+        <h6 class="card-subtitle mb-2 text-muted">Book Subtitle</h6>
         <div class="card-text">
-          <span *ngFor="let category of book?.categories"
-                class="badge badge-pill badge-default mr-1">
-            {{ category }}
+          <span class="mr-1 badge badge-pill badge-default">
+            Category 1
+          </span>
+          <span class="mr-1 badge badge-pill badge-default">
+            Category 2
+          </span>
+          <span class="mr-1 badge badge-pill badge-default">
+            Category 3
+          </span>
+        </div>
+      </div>
+      <img class="book-thumbnail"
+           src="http://lorempixel.com/g/200/300/"
+           alt="">
+      <div class="panel-footer">
+        <span>
+          by
+          <span>
+            Asim Hussain
+          </span>
+        </span>
+      </div>
+    </div>
+  </div>
+
+  <div class="col-md-4 col-lg-3 col-sm-1">
+    <div class="panel panel-default">
+      <div class="panel-heading">
+        <h3 class="panel-title">
+          <a>Book Title 2</a>
+        </h3>
+      </div>
+      <div class="panel-body text-center">
+        <h6 class="card-subtitle mb-2 text-muted">Book Subtitle</h6>
+        <div class="card-text">
+          <span class="mr-1 badge badge-pill badge-default">
+            Category 1
+          </span>
+          <span class="mr-1 badge badge-pill badge-default">
+            Category 2
+          </span>
+          <span class="mr-1 badge badge-pill badge-default">
+            Category 3
           </span>
         </div>
       </div>
       <img class="book-thumbnail"
-           src="{{book.smallThumbnail}}"
+           src="http://lorempixel.com/g/200/300/"
            alt="">
       <div class="panel-footer">
-        <span *ngIf="book.authors">
+        <span>
           by
-          <span *ngFor="let author of book.authors; let isLast = last;">
-            {{ author }}
-            <span *ngIf="!isLast">,</span>
+          <span>
+            Asim Hussain
           </span>
         </span>
       </div>

diff --git a/src/app/book-list/book-list.component.ts b/src/app/book-list/book-list.component.ts
@@ -1,6 +1,4 @@
 import {Component, OnInit} from "@angular/core";
-import {Input} from "@angular/core/src/metadata/directives";
-import {Book} from "../shared/book";
 
 @Component({
   selector: 'app-book-list',
@@ -9,9 +7,6 @@ import {Book} from "../shared/book";
 })
 export class BookListComponent implements OnInit {
 
-  @Input() books: Book[];
-
-
   ngOnInit() {
   }
 

diff --git a/src/app/book/book.component.html b/src/app/book/book.component.html
@@ -1,46 +1,49 @@
 <div class="row m-3">
   <div class="col-md-6 col-md-offset-3">
-    <h2 class="text-center">{{ book?.title }}</h2>
+    <h2 class="text-center">Book Title</h2>
 
-    <h6 class="text-center">{{ book?.subTitle }}</h6>
+    <h6 class="text-center">Book Subtitle</h6>
 
     <div class=" m-3">
       <img class="rounded center-block"
-           src="{{ book?.thumbnail }}">
+           src="http://lorempixel.com/g/200/300/">
     </div>
 
 
     <dl>
       <dt>Description</dt>
-      <dd><p [innerHtml]="book?.description || '--'"></p></dd>
+      <dd>
+        <p [innerHtml]="'Hello this is the book <strong>description</strong> by binding to [innerHtml] we can use HTML tags'"></p>
+      </dd>
 
       <dt>Authors</dt>
-      <dd>{{ book?.authors }}</dd>
+      <dd>Asim Hussain</dd>
 
       <dt>Categories</dt>
       <dd>
-        <span *ngFor="let category of book?.categories"
-              class="mr-1 badge badge-pill badge-default">
-          {{ category }}
+        <span class="mr-1 badge badge-pill badge-default">
+          Category 1
+        </span>
+        <span class="mr-1 badge badge-pill badge-default">
+          Category 2
+        </span>
+        <span class="mr-1 badge badge-pill badge-default">
+          Category 3
         </span>
       </dd>
 
       <dt>Published Date</dt>
-      <dd>{{ book?.publishDate }}</dd>
+      <dd>2017-01-01</dd>
 
       <dt>Publisher</dt>
-      <dd>{{ book?.publisher }}</dd>
+      <dd>Code Craft</dd>
     </dl>
 
     <p>
-      <button *ngIf="!hasBook(book)"
-              (click)="addBook(book)"
-              type="button"
+      <button type="button"
               class="btn btn-primary">Add To Library
       </button>
-      <button *ngIf="hasBook(book)"
-              (click)="removeBook(book)"
-              type="button"
+      <button type="button"
               class="btn btn-default">Remove From Library
       </button>
     </p>

diff --git a/src/app/book/book.component.ts b/src/app/book/book.component.ts
@@ -1,8 +1,5 @@
 import {Component} from "@angular/core";
-import {ActivatedRoute} from "@angular/router";
-import {GoogleBooksService} from "../shared/google-books.service";
 import {Book} from "../shared/book";
-import {LibraryService} from "../shared/library.service";
 
 @Component({
   selector: 'app-book',
@@ -11,46 +8,24 @@ import {LibraryService} from "../shared/library.service";
 })
 export class BookComponent {
 
-  loading: boolean = false;
-  book: any;
 
-  constructor(private route: ActivatedRoute,
-              private googleBooksService: GoogleBooksService,
-              private libraryService: LibraryService) {
-    this.route.params.subscribe(params => {
-      // console.log(params);
-      if (params['bookId']) {
-        this.getBook(params['bookId'])
-      }
-    });
+  constructor() {
   }
 
   getBook(bookId: string) {
-    this.loading = true;
-    this.googleBooksService.retrieveBook(bookId)
-      .do(_ => this.loading = false)
-      .subscribe(book => this.book = book);
+    //TODO
   }
 
   hasBook(book: Book): boolean {
-    if (book) {
-      return this.libraryService.hasBook(book)
-    }
+    //TODO
+    return false;
   }
 
   addBook(book: Book) {
-    if (book) {
-      return this.libraryService.addBook(book)
-    }
+    //TODO
   }
 
   removeBook(book: Book) {
-    if (book) {
-      if (this.libraryService.hasBook(book)) {
-        this.libraryService.removeBook(book)
-      } else {
-        this.libraryService.addBook(book)
-      }
-    }
+    //TODO
   }
 }
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
@@ -1,7 +1,7 @@
 <div class="navbar navbar-default">
   <div class="container">
     <div class="navbar-header">
-      <a href="../"
+      <a href="/"
          class="navbar-brand">BookShelf
       </a>
       <button class="navbar-toggle"
@@ -16,17 +16,11 @@
     <div class="navbar-collapse collapse"
          id="navbar-main">
       <ul class="nav navbar-nav">
-        <li class="nav-item"
-            [routerLinkActive]="['active']">
-          <a class="nav-link"
-             [routerLink]="['search']">Search
-          </a>
+        <li class="nav-item active">
+          <a class="nav-link">Search</a>
         </li>
-        <li class="nav-item"
-            [routerLinkActive]="['active']">
-          <a class="nav-link"
-             [routerLink]="['library']">Library
-          </a>
+        <li class="nav-item">
+          <a class="nav-link">Library</a>
         </li>
       </ul>
     </div>

diff --git a/src/app/library/library.component.html b/src/app/library/library.component.html
@@ -4,5 +4,6 @@ <h4>Library
     </h4>
   </div>
 
-  <app-book-list [books]="libraryService.books"></app-book-list>
+  <!-- TODO: Pass into app-book-list the books from the library service -->
+  <app-book-list></app-book-list>
 </div>
diff --git a/src/app/library/library.component.ts b/src/app/library/library.component.ts
@@ -1,5 +1,4 @@
-import { Component, OnInit } from '@angular/core';
-import {LibraryService} from "../shared/library.service";
+import {Component, OnInit} from "@angular/core";
 
 @Component({
   selector: 'app-library',
@@ -8,7 +7,8 @@ import {LibraryService} from "../shared/library.service";
 })
 export class LibraryComponent implements OnInit {
 
-  constructor(private libraryService: LibraryService) { }
+  constructor() {
+  }
 
   ngOnInit() {
   }

diff --git a/src/app/pager/pager.component.html b/src/app/pager/pager.component.html
@@ -1,14 +1,11 @@
-<nav aria-label="...">
+<nav>
   <ul class="pager">
     <li>
-      <a
-        [class.disabled]="page === 0"
-        (click)="prev()"> &larr; Previous
+      <a> &larr; Previous
       </a>
     </li>
     <li>
-      <a
-        (click)="next()">Next &rarr;
+      <a>Next &rarr;
       </a>
     </li>
   </ul>

diff --git a/src/app/pager/pager.component.ts b/src/app/pager/pager.component.ts
@@ -1,5 +1,4 @@
-import {Component, OnInit, EventEmitter, OnChanges} from '@angular/core';
-import {Input, Output} from "@angular/core/src/metadata/directives";
+import {Component, OnInit} from "@angular/core";
 
 @Component({
   selector: 'app-pager',
@@ -8,40 +7,17 @@ import {Input, Output} from "@angular/core/src/metadata/directives";
 })
 export class PagerComponent implements OnInit {
 
-  @Input() totalPages: number = 0;
-  @Input() page: number = 0;
-  @Output() changePage: EventEmitter<number> = new EventEmitter<number>();
-
   constructor() {
   }
 
   next() {
-    if ((this.page + 1) < this.totalPages) {
-      this.page += 1;
-      this.changePage.emit(this.page);
-    }
+    //TODO
   }
 
   prev() {
-    if (this.page > 0) {
-      this.page -= 1;
-      this.changePage.emit(this.page);
-    }
+    //TODO
   }
 
-  // ngOnChanges() {
-  //   if (this.totalItems > 0 && this.pageSize > 0) {
-  //     this.pages = [];
-  //     let itemsLeft = this.totalItems;
-  //     let p = 0;
-  //     while (itemsLeft > 0) {
-  //       this.pages.push(p);
-  //       p++;
-  //       itemsLeft -= this.pageSize;
-  //     }
-  //   }
-  //   debugger;
-  // }
 
   ngOnInit() {
   }