|
@@ -19,6 +19,8 @@
|
|
| 19 |
import { FormMessagesComponent } from './form-messages/form-messages.component';
|
| 20 |
import { EditBookComponent } from './edit-book/edit-book.component';
|
| 21 |
import { IsbnPipe } from './shared/isbn.pipe';
|
|
|
|
|
|
|
| 22 |
|
| 23 |
@NgModule({
|
| 24 |
declarations: [
|
|
@@ -32,7 +34,9 @@
|
|
| 32 |
CreateBookComponent,
|
| 33 |
FormMessagesComponent,
|
| 34 |
EditBookComponent,
|
| 35 |
-
IsbnPipe
|
|
|
|
|
|
|
| 36 |
],
|
| 37 |
imports: [
|
| 38 |
CommonModule,
|
| 19 |
import { FormMessagesComponent } from './form-messages/form-messages.component';
|
| 20 |
import { EditBookComponent } from './edit-book/edit-book.component';
|
| 21 |
import { IsbnPipe } from './shared/isbn.pipe';
|
| 22 |
+
import { ZoomDirective } from './shared/zoom.directive';
|
| 23 |
+
import { DelayDirective } from './shared/delay.directive';
|
| 24 |
|
| 25 |
@NgModule({
|
| 26 |
declarations: [
|
| 34 |
CreateBookComponent,
|
| 35 |
FormMessagesComponent,
|
| 36 |
EditBookComponent,
|
| 37 |
+
IsbnPipe,
|
| 38 |
+
ZoomDirective,
|
| 39 |
+
DelayDirective
|
| 40 |
],
|
| 41 |
imports: [
|
| 42 |
CommonModule,
|
|
@@ -19,8 +19,12 @@
|
|
| 19 |
</div>
|
| 20 |
<div class="four wide column" *ngIf="book.rating">
|
| 21 |
<h4>Rating</h4>
|
| 22 |
-
<
|
| 23 |
-
*ngFor="let r of getRating(book.rating)
|
|
|
|
|
|
|
|
|
|
|
|
|
| 24 |
</div>
|
| 25 |
</div>
|
| 26 |
<h4>Beschreibung</h4>
|
| 19 |
</div>
|
| 20 |
<div class="four wide column" *ngIf="book.rating">
|
| 21 |
<h4>Rating</h4>
|
| 22 |
+
<ng-container
|
| 23 |
+
*ngFor="let r of getRating(book.rating);
|
| 24 |
+
index as i">
|
| 25 |
+
<i class="yellow star icon"
|
| 26 |
+
*bmDelay="500 + i * 200"></i>
|
| 27 |
+
</ng-container>
|
| 28 |
</div>
|
| 29 |
</div>
|
| 30 |
<h4>Beschreibung</h4>
|
|
@@ -1,18 +1,19 @@
|
|
| 1 |
<div class="ui middle aligned selection divided list">
|
| 2 |
|
| 3 |
-
|
| 4 |
<bm-book-list-item class="item"
|
| 5 |
*ngFor="let b of books"
|
| 6 |
[book]="b"
|
| 7 |
[routerLink]="b.isbn"></bm-book-list-item>
|
| 8 |
|
| 9 |
<p *ngIf="!books.length">Es wurden noch keine Bücher eingetragen.</p>
|
| 10 |
-
|
| 11 |
|
| 12 |
-
|
| 13 |
<div class="ui active dimmer">
|
| 14 |
<div class="ui large text loader">Daten werden geladen...</div>
|
| 15 |
</div>
|
| 16 |
-
|
| 17 |
|
| 18 |
</div>
|
|
|
| 1 |
<div class="ui middle aligned selection divided list">
|
| 2 |
|
| 3 |
+
<ng-container *ngIf="books$ | async as books; else loading">
|
| 4 |
<bm-book-list-item class="item"
|
| 5 |
*ngFor="let b of books"
|
| 6 |
[book]="b"
|
| 7 |
[routerLink]="b.isbn"></bm-book-list-item>
|
| 8 |
|
| 9 |
<p *ngIf="!books.length">Es wurden noch keine Bücher eingetragen.</p>
|
| 10 |
+
</ng-container>
|
| 11 |
|
| 12 |
+
<ng-template #loading>
|
| 13 |
<div class="ui active dimmer">
|
| 14 |
<div class="ui large text loader">Daten werden geladen...</div>
|
| 15 |
</div>
|
| 16 |
+
</ng-template>
|
| 17 |
|
| 18 |
</div>
|
| 19 |
+
|
|
@@ -1,7 +1,8 @@
|
|
| 1 |
<ng-container *ngIf="book">
|
| 2 |
<img class="ui tiny image"
|
| 3 |
*ngIf="book.thumbnails && book.thumbnails[0] && book.thumbnails[0].url"
|
| 4 |
-
[src]="book.thumbnails[0].url"
|
|
|
|
| 5 |
<div class="content">
|
| 6 |
<div class="header">{{ book.title }}</div>
|
| 7 |
<div *ngIf="book.subtitle" class="description">{{ book.subtitle }}</div>
|
| 1 |
<ng-container *ngIf="book">
|
| 2 |
<img class="ui tiny image"
|
| 3 |
*ngIf="book.thumbnails && book.thumbnails[0] && book.thumbnails[0].url"
|
| 4 |
+
[src]="book.thumbnails[0].url"
|
| 5 |
+
bmZoom>
|
| 6 |
<div class="content">
|
| 7 |
<div class="header">{{ book.title }}</div>
|
| 8 |
<div *ngIf="book.subtitle" class="description">{{ book.subtitle }}</div>
|
|
@@ -1,7 +1,7 @@
|
|
| 1 |
import { Injectable } from '@angular/core';
|
| 2 |
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
|
| 3 |
-
import { throwError, Observable
|
| 4 |
-
import { retry, map, catchError
|
| 5 |
|
| 6 |
import { Book } from './book';
|
| 7 |
import { BookRaw } from './book-raw';
|
| 1 |
import { Injectable } from '@angular/core';
|
| 2 |
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
|
| 3 |
+
import { throwError, Observable } from 'rxjs';
|
| 4 |
+
import { retry, map, catchError } from 'rxjs/operators';
|
| 5 |
|
| 6 |
import { Book } from './book';
|
| 7 |
import { BookRaw } from './book-raw';
|
|
@@ -0,0 +1,20 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
import { Directive, OnInit, Input, TemplateRef, ViewContainerRef } from '@angular/core';
|
| 2 |
+
|
| 3 |
+
@Directive({
|
| 4 |
+
selector: '[bmDelay]'
|
| 5 |
+
})
|
| 6 |
+
export class DelayDirective implements OnInit {
|
| 7 |
+
@Input() bmDelay: number = 100;
|
| 8 |
+
|
| 9 |
+
constructor(
|
| 10 |
+
private templateRef: TemplateRef<any>,
|
| 11 |
+
private viewContainerRef: ViewContainerRef
|
| 12 |
+
) { }
|
| 13 |
+
|
| 14 |
+
ngOnInit(): void {
|
| 15 |
+
setTimeout(() => {
|
| 16 |
+
this.viewContainerRef.createEmbeddedView(this.templateRef);
|
| 17 |
+
}, this.bmDelay);
|
| 18 |
+
}
|
| 19 |
+
|
| 20 |
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
import { Directive, HostBinding, HostListener } from '@angular/core';
|
| 2 |
+
|
| 3 |
+
@Directive({
|
| 4 |
+
selector: '[bmZoom]'
|
| 5 |
+
})
|
| 6 |
+
export class ZoomDirective {
|
| 7 |
+
@HostBinding('class.small') isZoomed: boolean = false;
|
| 8 |
+
|
| 9 |
+
@HostListener('mouseenter') onMouseEnter() {
|
| 10 |
+
this.isZoomed = true;
|
| 11 |
+
}
|
| 12 |
+
@HostListener('mouseleave') onMouseLeave() {
|
| 13 |
+
this.isZoomed = false;
|
| 14 |
+
}
|
| 15 |
+
}
|