-
+
+
+
+
+
Book: '{{book.name}}'
+
+
+
+
+
+
+
+ {{book.author}}
+
+
+
+
+
+
+
+
+
+ {{shops.name}} |
+
+
+
+
+
+
+
+
-
-
+
+
+
diff --git a/client/src/app/book-details/book-details.component.ts b/client/src/app/book-details/book-details.component.ts
index 88d61cf..9cf0c13 100644
--- a/client/src/app/book-details/book-details.component.ts
+++ b/client/src/app/book-details/book-details.component.ts
@@ -6,12 +6,11 @@ import { Location } from '@angular/common';
import { Book } from '../book';
import { BookService } from '../book.service';
@Component({
- moduleId: module.id.toString(),
selector: 'book-detail',
templateUrl: 'book-details.component.html',
styleUrls: ['book-details.component.css']
})
-export class BooksDetailComponent implements OnInit {
+export class BooksDetailComponent {
book: Book;
constructor(
diff --git a/client/src/app/book-search/book-search.component.css b/client/src/app/book-search/book-search.component.css
index e69de29..f6b5c59 100644
--- a/client/src/app/book-search/book-search.component.css
+++ b/client/src/app/book-search/book-search.component.css
@@ -0,0 +1,14 @@
+.search-result{
+ border-bottom: 1px solid gray;
+ border-left: 1px solid gray;
+ border-right: 1px solid gray;
+ width:195px;
+ height: 20px;
+ padding: 5px;
+ background-color: white;
+ cursor: pointer;
+}
+#search-box{
+ width: 200px;
+ height: 20px;
+}
diff --git a/client/src/app/book-search/book-search.component.html b/client/src/app/book-search/book-search.component.html
index fbdd464..2140487 100644
--- a/client/src/app/book-search/book-search.component.html
+++ b/client/src/app/book-search/book-search.component.html
@@ -1,7 +1,5 @@
-
Books Search
-
-
+
diff --git a/client/src/app/book-search/book-search.component.ts b/client/src/app/book-search/book-search.component.ts
index 21ac6c3..b10e4aa 100644
--- a/client/src/app/book-search/book-search.component.ts
+++ b/client/src/app/book-search/book-search.component.ts
@@ -1,34 +1,35 @@
-import {Component, OnInit} from '@angular/core';
-import {Router} from '@angular/router';
-import {Observable} from 'rxjs/Observable';
-import {Subject} from 'rxjs/Subject';
-import {BookSearchService} from './book-search.service';
-import {Book} from '../book';
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { Observable } from 'rxjs/Observable';
+import { Subject } from 'rxjs/Subject';
+
+import { BookSearchService } from './book-search.service';
+import { Book } from '../book';
+
@Component({
- moduleId: module.id.toString(),
selector: 'book-search',
templateUrl: 'book-search.component.html',
- styleUrls: ['book-search.component.css'],
+ styleUrls: [ 'book-search.component.css' ],
providers: [BookSearchService]
})
export class BookSearchComponent implements OnInit {
books: Observable
;
- private searchTerms = new Subject();
+ private searchName = new Subject();
- constructor(private bookSearchService: BookSearchService,
- private router: Router) {
- }
+ constructor(
+ private bookSearchService: BookSearchService,
+ private router: Router) {}
search(name: string): void {
- this.searchTerms.next(name);
+ this.searchName.next(name);
}
ngOnInit(): void {
- this.books = this.searchTerms
+ this.books = this.searchName
.debounceTime(300)
.distinctUntilChanged()
- .switchMap(term => term
- ? this.bookSearchService.search(term)
+ .switchMap(name => name
+ ? this.bookSearchService.search(name)
: Observable.of([]))
.catch(error => {
console.log(error);
@@ -36,4 +37,8 @@ export class BookSearchComponent implements OnInit {
});
}
+ gotoDetail(book: Book): void {
+ this.search("");
+ this.router.navigate(['/books/', book.id]);
+ }
}
diff --git a/client/src/app/book-search/book-search.service.ts b/client/src/app/book-search/book-search.service.ts
index 717598a..79f309e 100644
--- a/client/src/app/book-search/book-search.service.ts
+++ b/client/src/app/book-search/book-search.service.ts
@@ -1,15 +1,17 @@
-import {Injectable} from '@angular/core';
-import {Http, Response} from '@angular/http';
-import {Observable} from 'rxjs';
-import {Book} from '../book';
+import { Injectable } from '@angular/core';
+import { Http, Response } from '@angular/http';
+import { Observable } from 'rxjs';
+
+import { Book } from '../book';
+
@Injectable()
export class BookSearchService {
- constructor(private http: Http) {
- }
+
+ constructor(private http: Http) {}
search(name: string): Observable {
return this.http
- .get(`api/books?q=${name}`)
- .map((r: Response) => r.json() as Book[]);
+ .get(`api/books/search/${name}`)
+ .map((book: Response) => book.json() as Book[]);
}
}
diff --git a/client/src/app/book.service.ts b/client/src/app/book.service.ts
index 30931f1..fb6392c 100644
--- a/client/src/app/book.service.ts
+++ b/client/src/app/book.service.ts
@@ -1,9 +1,10 @@
import {Injectable} from '@angular/core';
-import {Headers, Http} from '@angular/http';
+import {Headers, Http, Response} from '@angular/http';
import 'rxjs/add/operator/toPromise';
import {Book} from './book';
+import {Observable} from "rxjs";
@Injectable()
export class BookService {
@@ -13,13 +14,11 @@ export class BookService {
constructor(private http: Http) {
}
-
getBooks(): Promise {
return this.http.get(this.bookUrl)
.toPromise()
.then(response => response.json() as Book[])
.catch(this.handleError);
-
}
getBook(id: number): Promise {
@@ -27,9 +26,9 @@ export class BookService {
.then(books => books.find(book => book.id === id));
}
- create(book: Book): Promise {
+ create(bookName : string, author : string, category: number): Promise {
return this.http
- .post(this.bookUrl, JSON.stringify(book), {headers: this.headers})
+ .post(this.bookUrl, JSON.stringify({name: bookName, author: author, category: category}), {headers: this.headers})
.toPromise()
.then(res => res.json())
.catch(this.handleError);
@@ -43,9 +42,9 @@ export class BookService {
.catch(this.handleError);
}
+
delete(id: number): Promise {
- const url = `${this.bookUrl}/${id}`;
- return this.http.delete(url, {headers: this.headers})
+ return this.http.delete(this.bookUrl+id, {headers: this.headers})
.toPromise()
.then(() => null)
.catch(this.handleError);
diff --git a/client/src/app/book.ts b/client/src/app/book.ts
index a732092..1ca831a 100644
--- a/client/src/app/book.ts
+++ b/client/src/app/book.ts
@@ -1,6 +1,9 @@
+import {Shop} from "./shop";
+
export class Book {
id: number;
name: string;
- author: boolean;
+ author: string;
category: number;
+ shops: Shop[];
}
diff --git a/client/src/app/book/book.component.css b/client/src/app/book/book.component.css
index e69de29..6407117 100644
--- a/client/src/app/book/book.component.css
+++ b/client/src/app/book/book.component.css
@@ -0,0 +1,2 @@
+td > a{text-decoration: none;
+cursor: pointer;}
diff --git a/client/src/app/book/book.component.html b/client/src/app/book/book.component.html
index 0358636..a6430d4 100644
--- a/client/src/app/book/book.component.html
+++ b/client/src/app/book/book.component.html
@@ -1,9 +1,29 @@
-My Books
-
- -
- {{book.author}} |
- {{book.name}}
-
-
-
+
+
+
+
+
+
+ All Books
+
+ Book |
+ Author |
+ |
+
+
+
+
+ {{book.name}} |
+ {{book.author}} |
+
+
+ |
+
+
+
+
+
+
+
diff --git a/client/src/app/book/book.component.ts b/client/src/app/book/book.component.ts
index 277cb25..856d3e4 100644
--- a/client/src/app/book/book.component.ts
+++ b/client/src/app/book/book.component.ts
@@ -5,7 +5,6 @@ import {Book} from '../book';
import {BookService} from '../book.service';
@Component({
- moduleId: module.id.toString(),
selector: 'books',
templateUrl: 'book.component.html',
styleUrls: ['book.component.css']
@@ -13,7 +12,6 @@ import {BookService} from '../book.service';
export class BookComponent implements OnInit {
books: Book[];
book: Book;
- selectedBook: Book;
constructor(private router: Router,
private bookService: BookService) {
@@ -23,22 +21,11 @@ export class BookComponent implements OnInit {
this.bookService.getBooks().then(books => this.books = books);
}
+
ngOnInit(): void {
this.getBooks();
}
- onSelect(book: Book): void {
- this.selectedBook = book;
- }
-
- add(book: Book): void {
- alert(book);
- this.bookService.create(book)
- .then(book => {
- this.books.push(book);
- });
- }
-
delete(book: Book): void {
this.bookService
.delete(book.id)
@@ -48,8 +35,7 @@ export class BookComponent implements OnInit {
}
showBook(book: Book): void {
- this.router.navigate(['/detail', book.id]);
+ this.router.navigate(['/books', book.id]);
}
-
}
diff --git a/client/src/app/books-category/books-category.component.css b/client/src/app/books-category/books-category.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/app/books-category/books-category.component.html b/client/src/app/books-category/books-category.component.html
new file mode 100644
index 0000000..3d4a1b9
--- /dev/null
+++ b/client/src/app/books-category/books-category.component.html
@@ -0,0 +1,11 @@
+
+
Books by {{category.name}}
+
+
+ {{books.author}} |
+ {{books.name}}
+
+
+
diff --git a/client/src/app/books-category/books-category.component.ts b/client/src/app/books-category/books-category.component.ts
new file mode 100644
index 0000000..29fd4da
--- /dev/null
+++ b/client/src/app/books-category/books-category.component.ts
@@ -0,0 +1,32 @@
+import 'rxjs/add/operator/switchMap';
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Params } from '@angular/router';
+import { Location } from '@angular/common';
+
+import {CategoryService} from "../categories/categories.service";
+import {Category} from "../categories";
+
+@Component({
+ selector: 'books-category',
+ templateUrl: 'books-category.component.html',
+ styleUrls: ['books-category.component.css']
+})
+export class BooksCategoryComponent implements OnInit {
+ category: Category;
+
+ constructor(
+ private categoryService: CategoryService,
+ private route: ActivatedRoute,
+ private location: Location
+ ) {}
+
+ ngOnInit(): void {
+ this.route.params
+ .switchMap((params: Params) => this.categoryService.getCategory(+params['id']))
+ .subscribe(categories => this.category = categories);
+ }
+
+ goBack(): void {
+ this.location.back();
+ }
+}
diff --git a/client/src/app/categories.ts b/client/src/app/categories.ts
index 29d79ef..7c77f4e 100644
--- a/client/src/app/categories.ts
+++ b/client/src/app/categories.ts
@@ -1,4 +1,7 @@
+import {Book} from "./book";
+
export class Category{
id: number;
name: string;
+ books: Book[];
}
diff --git a/client/src/app/categories/categories.component.html b/client/src/app/categories/categories.component.html
index 1da8387..348df09 100644
--- a/client/src/app/categories/categories.component.html
+++ b/client/src/app/categories/categories.component.html
@@ -1,5 +1,4 @@
-
-
-
+
+ {{category.name}}
+
+
diff --git a/client/src/app/categories/categories.component.ts b/client/src/app/categories/categories.component.ts
index 2227eff..dcd2269 100644
--- a/client/src/app/categories/categories.component.ts
+++ b/client/src/app/categories/categories.component.ts
@@ -1,21 +1,29 @@
import {Component, OnInit} from '@angular/core';
import {Router} from '@angular/router';
+import { BookService } from '../book.service';
import {CategoryService} from './categories.service';
import {Category} from "../categories";
+import {Book} from "../book";
@Component({
- moduleId: module.id.toString(),
selector: 'categories',
templateUrl: 'categories.component.html',
styleUrls: ['categories.component.css']
})
export class CategoryComponent implements OnInit {
categories: Category[];
+ books: Book[];
category: Category;
constructor(private router: Router,
- private categoryService: CategoryService) {
+ private categoryService: CategoryService,
+ ) {
+ }
+
+ getBooksByCategory(category: Category): void{
+ this.router.navigate(['categories/', category.id]);
+
}
getCategories(): void {
@@ -26,4 +34,9 @@ export class CategoryComponent implements OnInit {
this.getCategories();
}
+ showBooks(category: Category){
+ this.router.navigate(['/', category.id]);
+ }
+
+
}
diff --git a/client/src/app/categories/categories.service.ts b/client/src/app/categories/categories.service.ts
index 73eaf94..1ed7787 100644
--- a/client/src/app/categories/categories.service.ts
+++ b/client/src/app/categories/categories.service.ts
@@ -8,7 +8,6 @@ import {Category} from '../categories';
@Injectable()
export class CategoryService {
private categoryUrl = '/api/categories/';
- private headers = new Headers({'Content-Type': 'application/json'});
constructor(private http: Http) {
}
@@ -21,6 +20,11 @@ export class CategoryService {
}
+ getCategory(id: number): Promise {
+ return this.getCategories()
+ .then(categories => categories.find(category => category.id === id));
+ }
+
private handleError(error: any): Promise {
console.error('An error occurred', error);
return Promise.reject(error.message || error);
diff --git a/client/src/app/shop.service.js b/client/src/app/shop.service.js
new file mode 100644
index 0000000..ea10302
--- /dev/null
+++ b/client/src/app/shop.service.js
@@ -0,0 +1,32 @@
+use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var core_1 = require('@angular/core');
+var http_1 = require('@angular/http');
+require('rxjs/add/operator/toPromise');
+var ShopService = (function () {
+ function ShopService(http) {
+ this.http = http;
+ this.shopUrl = '/api/shops/';
+ this.headers = new http_1.Headers({ 'Content-Type': 'application/json' });
+ }
+ ShopService.prototype.getShops = function () {
+ return this.http.get(this.shopUrl)
+ .toPromise()
+ .then(function (response) { return response.json(); })
+ .catch(this.handleError);
+ };
+ ShopService.prototype.handleError = function (error) {
+ console.error('An error occurred', error);
+ return Promise.reject(error.message || error);
+ };
+ ShopService = __decorate([
+ core_1.Injectable()
+ ], ShopService);
+ return ShopService;
+}());
+exports.ShopService = ShopService;
diff --git a/client/src/app/shop.ts b/client/src/app/shop.ts
index 0895ac9..a4b63a2 100644
--- a/client/src/app/shop.ts
+++ b/client/src/app/shop.ts
@@ -1,4 +1,7 @@
+import {Book} from "./book";
+
export class Shop {
id: number;
name: string;
+ books: Book[];
}
diff --git a/client/src/app/shop/shop.component.html b/client/src/app/shop/shop.component.html
index bb0ebea..8127352 100644
--- a/client/src/app/shop/shop.component.html
+++ b/client/src/app/shop/shop.component.html
@@ -1,5 +1,18 @@
-
+
+
+
+
+
+
+ All Shops
+
+
+
+ {{shop.name}} |
+
+
+
+
+
+
+
diff --git a/client/src/app/shop/shop.component.ts b/client/src/app/shop/shop.component.ts
index 28ad9cc..2fe9f30 100644
--- a/client/src/app/shop/shop.component.ts
+++ b/client/src/app/shop/shop.component.ts
@@ -5,7 +5,6 @@ import {Shop} from '../shop';
import {ShopService} from './shop.service';
@Component({
- moduleId: module.id.toString(),
selector: 'shops',
templateUrl: 'shop.component.html',
styleUrls: ['shop.component.css']
@@ -18,12 +17,12 @@ export class ShopComponent implements OnInit {
private shopService: ShopService) {
}
- getBooks(): void {
+ getShops(): void {
this.shopService.getShops().then(shops => this.shops = shops);
}
ngOnInit(): void {
- this.getBooks();
+ this.getShops();
}
}
diff --git a/client/src/app/shop/shop.service.ts b/client/src/app/shop/shop.service.ts
index 51a1eb9..76b4415 100644
--- a/client/src/app/shop/shop.service.ts
+++ b/client/src/app/shop/shop.service.ts
@@ -8,12 +8,9 @@ import {Shop} from '../shop';
@Injectable()
export class ShopService {
private shopUrl = '/api/shops/';
- private headers = new Headers({'Content-Type': 'application/json'});
-
constructor(private http: Http) {
}
-
getShops(): Promise {
return this.http.get(this.shopUrl)
.toPromise()
diff --git a/client/src/styles.css b/client/src/styles.css
index 90d4ee0..1f7302b 100644
--- a/client/src/styles.css
+++ b/client/src/styles.css
@@ -1 +1,33 @@
-/* You can add global styles to this file, and also import other style files */
+body {
+ font-family: "Sans";
+ font-size: 14px;
+ color: #252526;
+ background-color: #E6E6E6;
+}
+
+select {
+ padding: 3px;
+ margin: 0;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
+ -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
+ -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
+ box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
+ background: #f8f8f8;
+ color: #888;
+ border: none;
+ outline: none;
+ display: inline-block;
+ -moz-appearance: none;
+ appearance: none;
+ cursor: pointer;
+ margin: 10px;
+}
+
+#navbar-toggle-cbox {
+ display:none
+}
+#navbar-toggle-cbox:checked ~ .collapse {
+ display: block;
+}
diff --git a/client/start.sh b/client/start.sh
new file mode 100644
index 0000000..5edcf82
--- /dev/null
+++ b/client/start.sh
@@ -0,0 +1,3 @@
+#!/usr/bin/env bash
+
+npm start
diff --git a/db/Dockerfile b/db/Dockerfile
new file mode 100644
index 0000000..ea8d439
--- /dev/null
+++ b/db/Dockerfile
@@ -0,0 +1,4 @@
+FROM mysql:5.7
+
+ENV MYSQL_ROOT_PASSWORD zabudska1985
+ENV MYSQL_DATABASE Library
\ No newline at end of file
diff --git a/docker-compose.yml b/docker-compose.yml
index 74bf224..68fbd7c 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,14 +1,24 @@
+db:
+ build: ./db
+ ports:
+ - "33060:3306"
+
api:
- build: ./api
+ build: ./API
ports:
- - "8080:8080"
+ - "8080:8080"
+ volumes:
+ - ./API:/api
+ command: /bin/sh /api/start.sh
+ links:
+ - db
+
client:
build: ./client
ports:
- - "80:3000"
- - "3000:3000"
- - "3001:3001"
+ - "44200:4200"
volumes:
- - ./client:/client
+ - ./client:/client
+ command: /bin/sh /client/start.sh
links:
- - api
\ No newline at end of file
+ - api
\ No newline at end of file