mirror of
https://github.com/Start9Labs/start-os.git
synced 2026-03-30 04:01:58 +00:00
136 lines
4.0 KiB
HTML
136 lines
4.0 KiB
HTML
<ion-header>
|
|
<ion-toolbar>
|
|
<ion-buttons slot="start" *ngIf="fromToast">
|
|
<ion-back-button></ion-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>
|
|
<!-- loading -->
|
|
<ion-item-group *ngIf="loading">
|
|
<ion-item-divider>
|
|
<ion-button slot="end" fill="clear">
|
|
<ion-skeleton-text
|
|
style="width: 90px; height: 14px; border-radius: 0"
|
|
animated
|
|
></ion-skeleton-text>
|
|
</ion-button>
|
|
</ion-item-divider>
|
|
<ion-item *ngFor="let entry of ['', '', '', '']">
|
|
<ion-label>
|
|
<ion-skeleton-text
|
|
animated
|
|
style="width: 15%; height: 20px; margin-bottom: 12px"
|
|
></ion-skeleton-text>
|
|
<ion-skeleton-text
|
|
animated
|
|
style="width: 50%; margin-bottom: 18px"
|
|
></ion-skeleton-text>
|
|
<ion-skeleton-text animated style="width: 20%"></ion-skeleton-text>
|
|
</ion-label>
|
|
<ion-button slot="end" fill="clear">
|
|
<ion-skeleton-text
|
|
animated
|
|
style="width: 20px; height: 20px; border-radius: 0"
|
|
></ion-skeleton-text>
|
|
</ion-button>
|
|
</ion-item>
|
|
</ion-item-group>
|
|
|
|
<!-- not loading -->
|
|
<ng-container *ngIf="!loading">
|
|
<!-- no notifications -->
|
|
<ion-item-group *ngIf="!notifications.length">
|
|
<div
|
|
style="
|
|
text-align: center;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
"
|
|
>
|
|
<ion-icon
|
|
style="font-size: 84px; color: #595959"
|
|
name="mail-outline"
|
|
></ion-icon>
|
|
<h4 style="color: #595959; margin-top: 0px">Inbox Empty</h4>
|
|
</div>
|
|
</ion-item-group>
|
|
|
|
<!-- has notifications -->
|
|
<ng-container *ngIf="notifications.length">
|
|
<ion-item-group style="margin-bottom: 16px">
|
|
<ion-item-divider>
|
|
<ion-button slot="end" fill="clear" (click)="presentAlertDeleteAll()">
|
|
Delete All
|
|
</ion-button>
|
|
</ion-item-divider>
|
|
<ion-item *ngFor="let not of notifications; let i = index">
|
|
<ion-label>
|
|
<h2>
|
|
<b>
|
|
<span *ngIf="not['package-id']"
|
|
>{{ not['package-id'] }} -
|
|
</span>
|
|
<ion-text [color]="not | notificationColor"
|
|
>{{ not.title }}</ion-text
|
|
>
|
|
</b>
|
|
</h2>
|
|
<h2 class="notification-message">
|
|
{{ not.message | truncateTail: 240 }}
|
|
</h2>
|
|
<p class="view-message-tag">
|
|
<a
|
|
class="view-message-tag"
|
|
*ngIf="not.message.length > 240"
|
|
color="dark"
|
|
(click)="viewFullMessage(not.title, not.message)"
|
|
>
|
|
View Full Message
|
|
</a>
|
|
</p>
|
|
<p>{{ not['created-at'] | date: 'short' }}</p>
|
|
</ion-label>
|
|
<ion-button
|
|
*ngIf="not.code === 1"
|
|
slot="end"
|
|
fill="clear"
|
|
color="dark"
|
|
(click)="viewBackupReport(not)"
|
|
>
|
|
View Report
|
|
</ion-button>
|
|
<ion-button
|
|
*ngIf="not['package-id']"
|
|
slot="end"
|
|
fill="clear"
|
|
color="dark"
|
|
[routerLink]="['/services', not['package-id']]"
|
|
>
|
|
View Service
|
|
</ion-button>
|
|
<ion-button slot="end" fill="clear" (click)="delete(not.id, i)">
|
|
<ion-icon slot="icon-only" name="close"></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>
|
|
</ng-container>
|
|
</ng-container>
|
|
</ion-content>
|