File
Implements
Metadata
| selector |
app-borrowings |
| styleUrls |
./borrowings.component.scss |
| templateUrl |
./borrowings.component.html |
Methods
|
Async
ngOnInit
|
ngOnInit()
|
|
|
|
|
import { Component, OnInit } from '@angular/core';
import { UserService } from 'src/app/services/user/user.service';
import { Borrowing } from 'src/app/models/Borrowings';
@Component({
selector: 'app-borrowings',
templateUrl: './borrowings.component.html',
styleUrls: ['./borrowings.component.scss']
})
export class BorrowingsComponent implements OnInit {
borrowings: Borrowing[];
overdues: Borrowing[];
constructor(private userService: UserService) {}
async ngOnInit() {
await this.userService.getUserBorrowings();
this.borrowings = this.userService.getAllBorrowings();
this.overdues = this.userService.getOverDues();
}
}
<ion-content>
<div padding>
<div>
Overdues
</div>
<ion-card class="borrowing-card overdue" *ngFor="let borrowing of overdues">
<ion-card-header>
<ion-card-title>{{ borrowing.title }}</ion-card-title>
</ion-card-header>
<ion-card-content>
<div style="display: flex;justify-content: space-between">
<div>
<span>Issue Date : </span>
<span>{{ borrowing.issuedate }}</span>
</div>
<div>
<span>Due Date : </span>
<span>{{ borrowing.date_due }}</span>
</div>
</div>
<div>
<span>Number of days overdue : </span>
<span> 25 </span>
</div>
</ion-card-content>
</ion-card>
</div>
<div padding>
<div>Borrow list</div>
<ion-card class="borrowing-card safe" *ngFor="let borrow of borrowings">
<ion-card-header>
<ion-card-title>{{ borrow.title }}</ion-card-title>
</ion-card-header>
<ion-card-content>
<div style="display: flex;justify-content: space-between">
<div>
<span>Issue Date : </span>
<span>{{ borrow.issuedate }}</span>
</div>
<div>
<span>Due Date : </span>
<span>{{ borrow.date_due }}</span>
</div>
</div>
<div>
<span>Number of days overdue : </span>
<span> 25 </span>
</div>
</ion-card-content>
</ion-card>
</div>
</ion-content>
.borrowing-card {
width: 100%;
// padding: 0;
// margin: 0;
color: white;
}
.overdue {
background: #cb2d3e; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #ef473a, #cb2d3e); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(
to right,
#ef473a,
#cb2d3e
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.safe {
background: #1d976c; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #93f9b9, #1d976c); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(
to left,
#93f9b9,
#1d976c
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.safe::before {
box-shadow: inset 0 0 2000px rgba(255, 255, 255, 0.5);
filter: blur(2px);
}
Legend
Html element with directive