BookMonkey 3 Diff

Files changed (9) hide show

tmp/src/app/book-monkey/{iteration-4/custom-validation → iteration-5/directives}/app.module.ts +16 -3
tmp/src/app/book-monkey/{iteration-4/custom-validation → iteration-5/directives}/book-details/book-details.component.html +8 -4
tmp/src/app/book-monkey/{iteration-4/custom-validation → iteration-5/directives}/book-list/book-list.component.html +15 -8
tmp/src/app/book-monkey/{iteration-4/custom-validation → iteration-5/directives}/book-list/book-list.component.ts +3 -2
tmp/src/app/book-monkey/{iteration-4/custom-validation → iteration-5/directives}/book-list-item/book-list-item.component.html +3 -2
tmp/src/app/book-monkey/{iteration-4/custom-validation → iteration-5/directives}/form-messages/form-messages.component.ts +1 -0
tmp/src/app/book-monkey/{iteration-4/custom-validation → iteration-5/directives}/shared/delay.directive.ts +20 -0
tmp/src/app/book-monkey/{iteration-4/custom-validation → iteration-5/directives}/shared/isbn.pipe.ts +12 -0
tmp/src/app/book-monkey/{iteration-4/custom-validation → iteration-5/directives}/shared/zoom.directive.ts +15 -0

tmp/src/app/book-monkey/{iteration-4/custom-validation → iteration-5/directives}/app.module.ts RENAMED

@@ -1,8 +1,10 @@
 import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
 import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { ReactiveFormsModule } from '@angular/forms';
 import { DateValueAccessorModule } from 'angular-date-value-accessor';
 import { AppRoutingModule } from './app-routing.module.one-app';
 import { AppComponent } from './app.component';
@@ -16,6 +18,9 @@
 import { CreateBookComponent } from './create-book/create-book.component';
 import { FormMessagesComponent } from './form-messages/form-messages.component';
 import { EditBookComponent } from './edit-book/edit-book.component';
 @NgModule({
   declarations: [
@@ -29,6 +34,9 @@
     CreateBookComponent,
     FormMessagesComponent,
     EditBookComponent,
   ],
   imports: [
     CommonModule,
@@ -38,8 +46,13 @@
     DateValueAccessorModule
   ],
   providers: [
-    { provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true }
   ],
   bootstrap: [AppComponent]
 })
-export class AppModule { }

 import { CommonModule } from '@angular/common';
+import { NgModule, LOCALE_ID } from '@angular/core';
 import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { ReactiveFormsModule } from '@angular/forms';
 import { DateValueAccessorModule } from 'angular-date-value-accessor';
+import localeDe from '@angular/common/locales/de';
+import { registerLocaleData } from '@angular/common';
 import { AppRoutingModule } from './app-routing.module.one-app';
 import { AppComponent } from './app.component';
 import { CreateBookComponent } from './create-book/create-book.component';
 import { FormMessagesComponent } from './form-messages/form-messages.component';
 import { EditBookComponent } from './edit-book/edit-book.component';
+import { IsbnPipe } from './shared/isbn.pipe';
+import { ZoomDirective } from './shared/zoom.directive';
+import { DelayDirective } from './shared/delay.directive';
 @NgModule({
   declarations: [
     CreateBookComponent,
     FormMessagesComponent,
     EditBookComponent,
+    IsbnPipe,
+    ZoomDirective,
+    DelayDirective
   ],
   imports: [
     CommonModule,
     DateValueAccessorModule
   ],
   providers: [
+    { provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true },
+    { provide: LOCALE_ID, useValue: 'de' }
   ],
   bootstrap: [AppComponent]
 })
+export class AppModule {
+  constructor() {
+    registerLocaleData(localeDe);
+  }
+}

tmp/src/app/book-monkey/{iteration-4/custom-validation → iteration-5/directives}/book-details/book-details.component.html RENAMED

@@ -11,16 +11,20 @@
     </div>
     <div class="four wide column">
       <h4>ISBN</h4>
-      {{ book.isbn }}
     </div>
     <div class="four wide column">
       <h4>Erschienen</h4>
-      {{ book.published }}
     </div>
     <div class="four wide column">
       <h4>Rating</h4>
-      <i class="yellow star icon"
-        *ngFor="let r of getRating(book.rating)"></i>
     </div>
   </div>
   <h4>Beschreibung</h4>

     </div>
     <div class="four wide column">
       <h4>ISBN</h4>
+      {{ book.isbn | isbn }}
     </div>
     <div class="four wide column">
       <h4>Erschienen</h4>
+      {{ book.published | date:'longDate' }}
     </div>
     <div class="four wide column">
       <h4>Rating</h4>
+      <ng-container
+        *ngFor="let r of getRating(book.rating);
+                index as i">
+        <i class="yellow star icon"
+          *bmDelay="500 + i * 200"></i>
+      </ng-container>
     </div>
   </div>
   <h4>Beschreibung</h4>

tmp/src/app/book-monkey/{iteration-4/custom-validation → iteration-5/directives}/book-list/book-list.component.html RENAMED

@@ -1,12 +1,19 @@
 <div class="ui middle aligned selection divided list">
-  <bm-book-list-item class="item"
-    *ngFor="let b of books"
-    [book]="b"
-    [routerLink]="b.isbn"></bm-book-list-item>
-  <div *ngIf="!books" class="ui active dimmer">
-    <div class="ui large text loader">Daten werden geladen...</div>
-  </div>
-  <p *ngIf="books && !books.length">Es wurden noch keine Bücher eingetragen.</p>
 </div>

 <div class="ui middle aligned selection divided list">
+  <ng-container *ngIf="books$ | async as books; else loading">
+    <bm-book-list-item class="item"
+      *ngFor="let b of books"
+      [book]="b"
+      [routerLink]="b.isbn"></bm-book-list-item>
+    <p *ngIf="!books.length">Es wurden noch keine Bücher eingetragen.</p>
+  </ng-container>
+  <ng-template #loading>
+    <div class="ui active dimmer">
+      <div class="ui large text loader">Daten werden geladen...</div>
+    </div>
+  </ng-template>
 </div>

tmp/src/app/book-monkey/{iteration-4/custom-validation → iteration-5/directives}/book-list/book-list.component.ts RENAMED

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
 import { Book } from '../shared/book';
 import { BookStoreService } from '../shared/book-store.service';
@@ -9,11 +10,11 @@
   styleUrls: ['./book-list.component.css']
 })
 export class BookListComponent implements OnInit {
-  books: Book[];
   constructor(private bs: BookStoreService) { }
   ngOnInit() {
-    this.bs.getAll().subscribe(res => this.books = res);
   }
 }

 import { Component, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
 import { Book } from '../shared/book';
 import { BookStoreService } from '../shared/book-store.service';
   styleUrls: ['./book-list.component.css']
 })
 export class BookListComponent implements OnInit {
+  books$: Observable<Book[]>;
   constructor(private bs: BookStoreService) { }
   ngOnInit() {
+    this.books$ = this.bs.getAll();
   }
 }

tmp/src/app/book-monkey/{iteration-4/custom-validation → iteration-5/directives}/book-list-item/book-list-item.component.html RENAMED

@@ -1,6 +1,7 @@
 <img class="ui tiny image"
      *ngIf="book.thumbnails && book.thumbnails[0] && book.thumbnails[0].url"
-     [src]="book.thumbnails[0].url">
 <div class="content">
   <div class="header">{{ book.title }}</div>
   <div *ngIf="book.subtitle" class="description">{{ book.subtitle }}</div>
@@ -9,6 +10,6 @@
       {{ author }}<span *ngIf="!l">, </span>
     </span>
     <br>
-    ISBN {{ book.isbn }}
   </div>
 </div>

 <img class="ui tiny image"
      *ngIf="book.thumbnails && book.thumbnails[0] && book.thumbnails[0].url"
+     [src]="book.thumbnails[0].url"
+     bmZoom>
 <div class="content">
   <div class="header">{{ book.title }}</div>
   <div *ngIf="book.subtitle" class="description">{{ book.subtitle }}</div>
       {{ author }}<span *ngIf="!l">, </span>
     </span>
     <br>
+    ISBN {{ book.isbn | isbn }}
   </div>
 </div>

tmp/src/app/book-monkey/{iteration-4/custom-validation → iteration-5/directives}/form-messages/form-messages.component.ts RENAMED

@@ -11,6 +11,7 @@
   @Input() control: AbstractControl;
   @Input() controlName: string;
   private allMessages = {
     title: {
       required: 'Ein Buchtitel muss angegeben werden.'

   @Input() control: AbstractControl;
   @Input() controlName: string;
+            +
   private allMessages = {
     title: {
       required: 'Ein Buchtitel muss angegeben werden.'

tmp/src/app/book-monkey/{iteration-4/custom-validation → iteration-5/directives}/shared/delay.directive.ts RENAMED

	@@ -0,0 +1,20 @@

+import { Directive, OnInit, Input, TemplateRef, ViewContainerRef } from '@angular/core';
+            +
+@Directive({
+  selector: '[bmDelay]'
+})
+export class DelayDirective implements OnInit {
+  @Input() bmDelay;
+            +
+  constructor(
+    private templateRef: TemplateRef<any>,
+    private viewContainerRef: ViewContainerRef
+  ) { }
+            +
+  ngOnInit() {
+    setTimeout(() => {
+      this.viewContainerRef.createEmbeddedView(this.templateRef);
+    }, this.bmDelay);
+  }
+            +
+}

tmp/src/app/book-monkey/{iteration-4/custom-validation → iteration-5/directives}/shared/isbn.pipe.ts RENAMED

	@@ -0,0 +1,12 @@

+import { Pipe, PipeTransform } from '@angular/core';
+            +
+@Pipe({
+  name: 'isbn'
+})
+export class IsbnPipe implements PipeTransform {
+            +
+  transform(value: string): string {
+    if (!value) { return null; }
+    return `${value.substr(0, 3)}-${value.substr(3)}`;
+  }
+}

tmp/src/app/book-monkey/{iteration-4/custom-validation → iteration-5/directives}/shared/zoom.directive.ts RENAMED

	@@ -0,0 +1,15 @@

+import { Directive, HostBinding, HostListener } from '@angular/core';
+            +
+@Directive({
+  selector: '[bmZoom]'
+})
+export class ZoomDirective {
+  @HostBinding('class.small') isZoomed: boolean;
+            +
+  @HostListener('mouseenter') onMouseEnter() {
+    this.isZoomed = true;
+  }
+  @HostListener('mouseleave') onMouseLeave() {
+    this.isZoomed = false;
+  }
+}