Files
start-os/ui/src/app/pages/notifications/notifications.page.html
2022-01-21 20:35:52 -07:00

59 lines
2.0 KiB
HTML

<ion-header>
<ion-toolbar>
<ion-buttons slot="start" *ngIf="fromToast">
<pwa-back-button></pwa-back-button>
</ion-buttons>
<ion-title>Notifications</ion-title>
<ion-buttons slot="end">
<badge-menu-button></badge-menu-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
<ion-refresher-content pullingIcon="lines" refreshingSpinner="lines"></ion-refresher-content>
</ion-refresher>
<ion-spinner *ngIf="loading" class="center" name="lines" color="warning"></ion-spinner>
<ion-item-group *ngIf="!notifications.length && !loading">
<ion-item>
<ion-label class="ion-text-wrap">
<h2>
<ion-text color="medium">Notifications about Embassy and services will appear here.</ion-text>
</h2>
</ion-label>
</ion-item>
</ion-item-group>
<ion-item-group style="margin-bottom: 16px;">
<ion-item *ngFor="let not of notifications; let i = index">
<ion-label class="ion-text-wrap">
<h2>
<ion-text [color]="not | notificationColor"><b>{{ not.title }}</b></ion-text>
</h2>
<h2 class="notification-message">
{{ not.message }}
<a *ngIf="not.code === 1" style="text-decoration: none;" (click)="viewBackupReport(not)">
View Report
</a>
</h2>
<p>
{{ not['created-at'] | date: 'short' }}
<a *ngIf="not['package-id'] as pkgId" style="text-decoration: none;" [routerLink]="['/services', not['package-id']]">
- {{ not['package-id'] }}
</a>
</p>
</ion-label>
<ion-button slot="end" fill="clear" (click)="remove(not.id, i)">
<ion-icon slot="icon-only" name="close-outline" color="medium"></ion-icon>
</ion-button>
</ion-item>
</ion-item-group>
<ion-infinite-scroll [disabled]="!needInfinite" (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content loadingSpinner="lines"></ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>