BookMonkey 4 Diff

Files changed (9) hide show
  1. tmp/src/app/book-monkey/iteration-1/{property-bindings → event-bindings}/app.component.html +8 -1
  2. tmp/src/app/book-monkey/iteration-1/{property-bindings → event-bindings}/app.component.ts +18 -1
  3. tmp/src/app/book-monkey/iteration-1/{property-bindings → event-bindings}/app.module.ts +3 -1
  4. tmp/src/app/book-monkey/iteration-1/{property-bindings → event-bindings}/book-details/book-details.component.html +37 -0
  5. tmp/src/app/book-monkey/iteration-1/{property-bindings → event-bindings}/book-details/book-details.component.ts +25 -0
  6. tmp/src/app/book-monkey/iteration-1/{property-bindings → event-bindings}/book-list/book-list.component.html +2 -1
  7. tmp/src/app/book-monkey/iteration-1/{property-bindings → event-bindings}/book-list/book-list.component.ts +6 -1
  8. tmp/src/app/book-monkey/iteration-1/{property-bindings → event-bindings}/book-list-item/book-list-item.component.html +0 -1
  9. tmp/src/app/book-monkey/iteration-1/{property-bindings → event-bindings}/book-list-item/book-list-item.component.ts +0 -1
tmp/src/app/book-monkey/iteration-1/{property-bindings → event-bindings}/app.component.html RENAMED
@@ -1 +1,8 @@
1
- <bm-book-list></bm-book-list>
   
   
   
   
   
   
   
1
+ <bm-book-list
2
+ *ngIf="viewState === 'list'"
3
+ (showDetailsEvent)="showDetails($event)"></bm-book-list>
4
+  
5
+ <bm-book-details
6
+ *ngIf="viewState === 'details'"
7
+ (showListEvent)="showList()"
8
+ [book]="book"></bm-book-details>
tmp/src/app/book-monkey/iteration-1/{property-bindings → event-bindings}/app.component.ts RENAMED
@@ -1,8 +1,25 @@
1
  import { Component } from '@angular/core';
2
   
   
   
   
   
3
  @Component({
4
  selector: 'bm-root',
5
  templateUrl: './app.component.html',
6
  styleUrls: ['./app.component.css']
7
  })
8
- export class AppComponent { }
   
   
   
   
   
   
   
   
   
   
   
   
   
1
  import { Component } from '@angular/core';
2
   
3
+ import { Book } from './shared/book';
4
+  
5
+ type ViewState = 'list' | 'details';
6
+  
7
  @Component({
8
  selector: 'bm-root',
9
  templateUrl: './app.component.html',
10
  styleUrls: ['./app.component.css']
11
  })
12
+ export class AppComponent {
13
+
14
+ book?: Book;
15
+ viewState: ViewState = 'list';
16
+  
17
+ showList() {
18
+ this.viewState = 'list';
19
+ }
20
+  
21
+ showDetails(book: Book) {
22
+ this.book = book;
23
+ this.viewState = 'details';
24
+ }
25
+ }
tmp/src/app/book-monkey/iteration-1/{property-bindings → event-bindings}/app.module.ts RENAMED
@@ -5,12 +5,14 @@
5
  import { AppComponent } from './app.component';
6
  import { BookListComponent } from './book-list/book-list.component';
7
  import { BookListItemComponent } from './book-list-item/book-list-item.component';
   
8
   
9
  @NgModule({
10
  declarations: [
11
  AppComponent,
12
  BookListComponent,
13
- BookListItemComponent
   
14
  ],
15
  imports: [
16
  CommonModule,
5
  import { AppComponent } from './app.component';
6
  import { BookListComponent } from './book-list/book-list.component';
7
  import { BookListItemComponent } from './book-list-item/book-list-item.component';
8
+ import { BookDetailsComponent } from './book-details/book-details.component';
9
   
10
  @NgModule({
11
  declarations: [
12
  AppComponent,
13
  BookListComponent,
14
+ BookListItemComponent,
15
+ BookDetailsComponent
16
  ],
17
  imports: [
18
  CommonModule,
tmp/src/app/book-monkey/iteration-1/{property-bindings → event-bindings}/book-details/book-details.component.html RENAMED
@@ -0,0 +1,37 @@
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
1
+ <div *ngIf="book">
2
+ <h1>{{ book.title }}</h1>
3
+ <h3 *ngIf="book.subtitle">{{ book.subtitle }}</h3>
4
+ <div class="ui divider"></div>
5
+ <div class="ui grid">
6
+ <div class="four wide column">
7
+ <h4>Autoren</h4>
8
+ <ng-container *ngFor="let author of book.authors">
9
+ {{ author }}<br>
10
+ </ng-container>
11
+ </div>
12
+ <div class="four wide column">
13
+ <h4>ISBN</h4>
14
+ {{ book.isbn }}
15
+ </div>
16
+ <div class="four wide column">
17
+ <h4>Erschienen</h4>
18
+ {{ book.published }}
19
+ </div>
20
+
21
+ <div class="four wide column" *ngIf="book.rating">
22
+ <h4>Rating</h4>
23
+ <i class="yellow star icon"
24
+ *ngFor="let r of getRating(book.rating)"></i>
25
+ </div>
26
+ </div>
27
+ <h4>Beschreibung</h4>
28
+ <p>{{ book.description }}</p>
29
+ <div class="ui small images">
30
+ <img *ngFor="let thumbnail of book.thumbnails"
31
+ [src]="thumbnail.url">
32
+ </div>
33
+ <button class="ui red button"
34
+ (click)="showBookList()">
35
+ Zurück zur Buchliste
36
+ </button>
37
+ </div>
tmp/src/app/book-monkey/iteration-1/{property-bindings → event-bindings}/book-details/book-details.component.ts RENAMED
@@ -0,0 +1,25 @@
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
1
+ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
2
+  
3
+ import { Book } from '../shared/book';
4
+  
5
+ @Component({
6
+ selector: 'bm-book-details',
7
+ templateUrl: './book-details.component.html',
8
+ styleUrls: ['./book-details.component.css']
9
+ })
10
+ export class BookDetailsComponent implements OnInit {
11
+
12
+ @Input() book?: Book;
13
+ @Output() showListEvent = new EventEmitter<any>();
14
+  
15
+ ngOnInit(): void {
16
+ }
17
+  
18
+ getRating(num: number) {
19
+ return new Array(num);
20
+ }
21
+  
22
+ showBookList() {
23
+ this.showListEvent.emit();
24
+ }
25
+ }
tmp/src/app/book-monkey/iteration-1/{property-bindings → event-bindings}/book-list/book-list.component.html RENAMED
@@ -1,5 +1,6 @@
1
  <div class="ui middle aligned selection divided list">
2
  <bm-book-list-item class="item"
3
  *ngFor="let b of books"
4
- [book]="b"></bm-book-list-item>
   
5
  </div>
1
  <div class="ui middle aligned selection divided list">
2
  <bm-book-list-item class="item"
3
  *ngFor="let b of books"
4
+ [book]="b"
5
+ (click)="showDetails(b)"></bm-book-list-item>
6
  </div>
tmp/src/app/book-monkey/iteration-1/{property-bindings → event-bindings}/book-list/book-list.component.ts RENAMED
@@ -1,4 +1,4 @@
1
- import { Component, OnInit } from '@angular/core';
2
   
3
  import { Book } from '../shared/book';
4
   
@@ -9,6 +9,7 @@
9
  })
10
  export class BookListComponent implements OnInit {
11
  books: Book[] = [];
   
12
   
13
  ngOnInit(): void {
14
  this.books = [
@@ -40,4 +41,8 @@
40
  }
41
  ];
42
  }
   
   
   
   
43
  }
1
+ import { Component, OnInit, Output, EventEmitter } from '@angular/core';
2
   
3
  import { Book } from '../shared/book';
4
   
9
  })
10
  export class BookListComponent implements OnInit {
11
  books: Book[] = [];
12
+ @Output() showDetailsEvent = new EventEmitter<Book>();
13
   
14
  ngOnInit(): void {
15
  this.books = [
41
  }
42
  ];
43
  }
44
+  
45
+ showDetails(book: Book) {
46
+ this.showDetailsEvent.emit(book);
47
+ }
48
  }
tmp/src/app/book-monkey/iteration-1/{property-bindings → event-bindings}/book-list-item/book-list-item.component.html RENAMED
@@ -1,4 +1,3 @@
1
-  
2
  <ng-container *ngIf="book">
3
  <img class="ui tiny image"
4
  *ngIf="book.thumbnails && book.thumbnails[0] && book.thumbnails[0].url"
   
1
  <ng-container *ngIf="book">
2
  <img class="ui tiny image"
3
  *ngIf="book.thumbnails && book.thumbnails[0] && book.thumbnails[0].url"
tmp/src/app/book-monkey/iteration-1/{property-bindings → event-bindings}/book-list-item/book-list-item.component.ts RENAMED
@@ -8,7 +8,6 @@
8
  styleUrls: ['./book-list-item.component.css']
9
  })
10
  export class BookListItemComponent implements OnInit {
11
-
12
  @Input() book?: Book;
13
   
14
  ngOnInit(): void {
8
  styleUrls: ['./book-list-item.component.css']
9
  })
10
  export class BookListItemComponent implements OnInit {
   
11
  @Input() book?: Book;
12
   
13
  ngOnInit(): void {