File
Implements
Metadata
| selector |
app-book-view |
| styleUrls |
./book-view.component.scss |
| templateUrl |
./book-view.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Constructor
constructor(modalController: ModalController, bookService: BookService)
|
|
|
Parameters :
| Name |
Type |
Optional |
| modalController |
ModalController
|
No
|
| bookService |
BookService
|
No
|
|
|
closeModal
|
Default value : () => {...}
|
|
|
Closing the book view modal
|
|
saveBook
|
Default value : () => {...}
|
|
|
Adding book to the personal book shelf
|
import { Component, OnInit, Input } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { BookService } from 'src/app/services/book/book.service';
import { Book } from 'src/app/models/Book';
@Component({
selector: 'app-book-view',
templateUrl: './book-view.component.html',
styleUrls: ['./book-view.component.scss']
})
export class BookViewComponent implements OnInit {
constructor(private modalController: ModalController, private bookService: BookService) {}
@Input() book: Book;
availability;
ngOnInit() {
this.bookService.checkBookAvailabilityStatus(this.book.biblionumber).then(data => {
console.log('data', data['data']['loanDate']);
this.availability = data['data']['loanDate'];
});
}
/**
* Closing the book view modal
*/
closeModal = () => {
this.modalController.dismiss();
};
/**
* Adding book to the personal book shelf
*/
saveBook = () => {
this.bookService.addBookToShelf(this.book);
};
}
<ion-content>
<ion-card>
<ion-card-header class="book-card">
<img [src]="book.url" alt="libri" class="book-image" />
<div class="book-header">
<div class="book-title">{{ book.title }}</div>
<div class="book-author">{{ book.author }}</div>
</div>
</ion-card-header>
<ion-card-content>
<ion-grid>
<ion-row>
<ion-col sizeXs="12" sizeXl="4"><ion-text class="title">Availability</ion-text></ion-col>
<ion-col sizeXs="12" sizeXl="8">
<div *ngIf="availability !== ''" style="display: flex;align-items: center">
<span class="dot-unavailable"></span>Back by : {{ availability }}
</div>
<div *ngIf="availability === ''">
<span class="dot-available"> </span>
Available
</div>
</ion-col>
</ion-row>
<ion-row>
<ion-col sizeXs="12" sizeXl="4"><ion-text class="title">Description</ion-text></ion-col>
<ion-col sizeXs="12" sizeXl="8">
{{ book.abstract }}
</ion-col>
</ion-row>
<ion-row>
<ion-col sizeXs="12" sizeXl="4">
<ion-text class="title">Copyright date</ion-text>
</ion-col>
<ion-col sizeXs="12" sizeXl="8">
{{ book.copyrightdate }}
</ion-col>
</ion-row>
<ion-row>
<ion-col sizeXs="12" sizeXl="4">
<ion-text class="title">ISBN</ion-text>
</ion-col>
<ion-col sizeXs="12" sizeXl="8">
{{ book.isbn }}
</ion-col>
</ion-row>
</ion-grid>
</ion-card-content>
</ion-card>
</ion-content>
<ion-footer class="button-panel">
<ion-button color="danger" (click)="closeModal()" fill="outline" size="small">
<ion-icon name="close-circle-outline"></ion-icon> close
</ion-button>
<ion-button color="primary" fill="outline" size="small" (click)="saveBook()"
><ion-icon name="bookmark"></ion-icon>Save</ion-button
>
<ion-button color="warning" fill="outline" size="small"
><ion-icon name="basket"></ion-icon>Reserve</ion-button
>
</ion-footer>
ion-card-header {
padding: 0px;
position: relative;
text-align: left;
}
.book-title {
font-size: 2em;
width: 100%;
font-weight: bold;
color: white;
}
.book-author {
font-size: 1em;
width: 100%;
color: #fff;
opacity: 1;
}
.book-image {
width: 50vw;
height: auto;
margin: 0 auto;
}
.book-header {
position: absolute;
bottom: 2%;
opacity: 0.4;
background-color: black;
}
.book-card {
margin: 0 auto;
}
.button-panel {
display: flex;
justify-content: space-evenly;
}
.title {
font-weight: bold;
}
.dot-unavailable {
padding-right: 10px;
height: 25px;
width: 25px;
background-color: red;
border-radius: 50%;
display: inline-block;
}
.dot-available {
padding-right: 10px;
height: 25px;
width: 25px;
background-color: green;
border-radius: 50%;
display: inline-block;
}
Legend
Html element with directive