blob: bba23747b01d4be0aeceebd3f300887f4e0bd8a9 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
<ng-template #tasksTpl>
<!-- Executing -->
<div *ngFor="let executingTask of executingTasks; trackBy:trackByFn">
<div class="card tc_task border-0">
<div class="row no-gutters">
<div class="col-md-2 text-center">
<span [ngClass]="[icons.stack, icons.large2x]"
class="text-info">
<i [ngClass]="[icons.stack2x, icons.circle]"></i>
<i [ngClass]="[icons.stack1x, icons.spinner, icons.spin, icons.inverse]"></i>
</span>
</div>
<div class="col-md-9">
<div class="card-body p-1">
<h6 class="card-title bold">{{ executingTask.description }}</h6>
<div class="mb-1">
<ngb-progressbar type="info"
[value]="executingTask?.progress"
[striped]="true"
[animated]="true"></ngb-progressbar>
</div>
<p class="card-text text-muted">
<small class="date float-left">
{{ executingTask.begin_time | cdDate }}
</small>
<span class="float-right">
{{ executingTask.progress || 0 }} %
</span>
</p>
</div>
</div>
</div>
</div>
<hr>
</div>
</ng-template>
<ng-template #notificationsTpl>
<ng-container *ngIf="notifications.length > 0">
<button type="button"
class="btn btn-light btn-block"
(click)="removeAll(); $event.stopPropagation()">
<i [ngClass]="[icons.trash]"
aria-hidden="true"></i>
<ng-container i18n>Clear notifications</ng-container>
</button>
<hr>
<div *ngFor="let notification of notifications; let i = index"
[ngClass]="notification.borderClass">
<div class="card tc_notification border-0">
<div class="row no-gutters">
<div class="col-md-2 text-center">
<span [ngClass]="[icons.stack, icons.large2x, notification.textClass]">
<i [ngClass]="[icons.circle, icons.stack2x]"></i>
<i [ngClass]="[icons.stack1x, icons.inverse, notification.iconClass]"></i>
</span>
</div>
<div class="col-md-10">
<div class="card-body p-1">
<button class="btn btn-link float-right mt-0 pt-0"
title="Remove notification"
i18n-title
(click)="remove(i); $event.stopPropagation()">
<i [ngClass]="[icons.trash]"></i>
</button>
<h6 class="card-title bold">{{ notification.title }}</h6>
<p class="card-text"
[innerHtml]="notification.message"></p>
<p class="card-text text-muted">
<ng-container *ngIf="notification.duration">
<small>
<ng-container i18n>Duration:</ng-container> {{ notification.duration | duration }}
</small>
<br>
</ng-container>
<small class="date"
[title]="notification.timestamp | cdDate">{{ notification.timestamp | relativeDate }}</small>
<i class="float-right custom-icon"
[ngClass]="[notification.applicationClass]"
[title]="notification.application"></i>
</p>
</div>
</div>
</div>
</div>
<hr>
</div>
</ng-container>
</ng-template>
<ng-template #emptyTpl>
<div *ngIf="notifications.length === 0 && executingTasks.length === 0">
<div class="message text-center"
i18n>There are no notifications.</div>
</div>
</ng-template>
<div class="card"
(clickOutside)="closeSidebar()"
[clickOutsideEnabled]="isSidebarOpened">
<div class="card-header">
<ng-container i18n>Tasks and Notifications</ng-container>
<button class="close float-right"
tabindex="-1"
type="button"
(click)="closeSidebar()">
<span>
<i [ngClass]="icons.close"></i>
</span>
</button>
</div>
<ngx-simplebar [options]="simplebar">
<div class="card-body">
<ng-container *ngTemplateOutlet="tasksTpl"></ng-container>
<ng-container *ngTemplateOutlet="notificationsTpl"></ng-container>
<ng-container *ngTemplateOutlet="emptyTpl"></ng-container>
</div>
</ngx-simplebar>
</div>
|
