src/app/home/home.page.ts
| selector | app-home |
| styleUrls | ./home.page.scss |
| templateUrl | ./home.page.html |
Properties |
Methods |
|
constructor(fcm: FcmService, swal: SwalService, platform: Platform, userService: UserService)
|
|||||||||||||||
|
Defined in src/app/home/home.page.ts:24
|
|||||||||||||||
|
Parameters :
|
| Async ngOnInit |
ngOnInit()
|
|
Defined in src/app/home/home.page.ts:32
|
|
Returns :
any
|
| borrowings |
Type : Borrowing[]
|
|
Defined in src/app/home/home.page.ts:21
|
| Public fcm |
Type : FcmService
|
|
Defined in src/app/home/home.page.ts:26
|
| noticeMoreDetails |
Default value : () => {...}
|
|
Defined in src/app/home/home.page.ts:42
|
|
View more information related to the information such as published date and due date |
| notices |
Type : Observable<Notice[]>
|
|
Defined in src/app/home/home.page.ts:24
|
| overdues |
Type : Borrowing[]
|
|
Defined in src/app/home/home.page.ts:22
|
| personalInfo |
|
Defined in src/app/home/home.page.ts:23
|
| sliderOptions |
Type : object
|
Default value : {
slidesPerView: this.platform.width() < 990 ? 3 : 6,
centerdSlides: true,
autoplay: { delay: 1500 }
}
|
|
Defined in src/app/home/home.page.ts:16
|
import { Borrowing } from './../models/Borrowings';
import { SwalService } from './../services/swal/swal.service';
import { Component, OnInit } from '@angular/core';
import { FcmService } from '../fcm.service';
import { Platform } from '@ionic/angular';
import { UserService } from '../services/user/user.service';
import { Observable } from 'rxjs';
import { Notice } from '../models/Notice';
@Component({
selector: 'app-home',
templateUrl: './home.page.html',
styleUrls: ['./home.page.scss']
})
export class HomePage implements OnInit {
sliderOptions = {
slidesPerView: this.platform.width() < 990 ? 3 : 6,
centerdSlides: true,
autoplay: { delay: 1500 }
};
borrowings: Borrowing[];
overdues: Borrowing[];
personalInfo;
notices: Observable<Notice[]>;
constructor(
public fcm: FcmService,
private swal: SwalService,
private platform: Platform,
private userService: UserService
) {}
async ngOnInit() {
await this.userService.getUserBorrowings();
this.borrowings = this.userService.getNotOverdues();
this.overdues = this.userService.getOverDues();
this.notices = this.userService.getNotices();
}
/**
* View more information related to the information such as published date and due date
*/
noticeMoreDetails = (notice: Notice) => {
this.swal.displayNotice(notice);
};
}
<app-menu-title title="Home"></app-menu-title>
<ion-content class="ion-padding">
<ion-slides [options]="sliderOptions">
<ion-slide class="slide" *ngFor="let image of [1, 2, 3, 4, 5, 6, 7, 8]">
<img
src="../assets/img/sample-covers/{{ image }}.jpg"
alt="image-{{ image }}"
id="login-image"
/>
</ion-slide>
</ion-slides>
<mat-card id="notice-card">
<mat-card-title>Notices</mat-card-title>
<mat-card-content>
<mat-card class="news" *ngFor="let notice of (notices | async)">
<div style="display: flex;justify-content: space-between;align-items: center">
<span class="notice-title">
{{ notice.message }}
</span>
<ion-button size="small" fill="clear" (click)="noticeMoreDetails(notice)"
>more</ion-button
>
</div>
</mat-card>
</mat-card-content>
</mat-card>
<collapsible-list
title="Borrowed"
titleDescription="Find most recent borrowings"
[borrowings]="borrowings"
type="borrowings"
></collapsible-list>
<collapsible-list
title="Penalties"
type="overdues"
[borrowings]="overdues"
titleDescription="Find most recent penalties"
></collapsible-list>
</ion-content>
./home.page.scss
.news {
border: 1px solid black;
border-left-width: 3px;
border-left-color: #00695c;
border-left-style: solid;
margin-bottom: 5px;
padding: 2px;
}
#notice-card {
margin-top: 10px;
margin-bottom: 10px;
}
.notice-title {
font-size: 0.8rem;
font-weight: bold;
}