Skip to content

Commit e8a5068

Browse files
sei-tspencersei-tspencer
authored
Cwdoe 239 notifications (#484)
* added notification badge, blink, beep and deletion * added signalR for notification delete
1 parent b3218c7 commit e8a5068

File tree

15 files changed

+443
-931
lines changed

15 files changed

+443
-931
lines changed

‎package-lock.json‎

Lines changed: 9 additions & 731 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,8 @@
1818
"docker:stack:identity": "docker stack deploy -c ./docker/docker-compose.yml -c ./docker/compose/identity.yml identity_stack",
1919
"docker:destroy": "docker stack rm player_stack identity_stack",
2020
"tslint-check": "tslint-config-prettier-check ./tslint.json",
21-
"swagger:gen-win": "docker run --rm -v %CD%:/local openapitools/openapi-generator-cli:v4.3.0 generate -i http://host.docker.internal:4300/swagger/v1/swagger.json?format=openapi -g typescript-angular -o /local/src/app/generated/player-api --additional-properties ngVersion=9.1 --additional-properties useRxJS6=true --additional-properties modelPropertyNaming=original --type-mappings=DateTime=Date --skip-validate-spec"
21+
"swagger:gen": "curl --insecure http://localhost:4300/swagger/v1/swagger.json --output swagger.json && node_modules/@openapitools/openapi-generator-cli/bin/openapi-generator generate -i ./swagger.json -g typescript-angular -o src/app/generated/player-api --additional-properties ngVersion=12.1 --additional-properties useRxJS6=true --additional-properties modelPropertyNaming=original --type-mappings=DateTime=Date --skip-validate-spec",
22+
"swagger:gen-win": "docker run --rm -v %CD%:/local openapitools/openapi-generator-cli:v4.3.0 generate -i http://host.docker.internal:4300/swagger/v1/swagger.json?format=openapi -g typescript-angular -o /local/src/app/generated/player-api --additional-properties ngVersion=12.1 --additional-properties useRxJS6=true --additional-properties modelPropertyNaming=original --type-mappings=DateTime=Date --skip-validate-spec"
2223
},
2324
"scriptComments": {
2425
"docker:stack": "// Runs the entire player stack",
@@ -72,7 +73,7 @@
7273
"@angular/compiler-cli": "^12.1.3",
7374
"@angular/language-service": "^12.2.10",
7475
"@datorama/akita-ngdevtools": "^6.0.1",
75-
"@openapitools/openapi-generator-cli": "^2.4.12",
76+
"@openapitools/openapi-generator-cli": "1.0.18-4.3.1",
7677
"@types/jasmine": "^3.9.1",
7778
"@types/jasminewd2": "^2.0.10",
7879
"@types/node": "^16.4.12",

‎src/app/components/player/notifications/notifications.component.html‎

Lines changed: 63 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -5,125 +5,79 @@
55

66
<mat-expansion-panel
77
class="notifications-container"
8-
(opened)="showSystemNotifications = false"
9-
(closed)="showSystemNotifications = true"
8+
(opened)="notificationPanelToggle('open')"
9+
(closed)="notificationPanelToggle('close')"
1010
>
11-
<mat-expansion-panel-header>
11+
<mat-expansion-panel-header
12+
[ngClass]="notificationDisplayClass()"
13+
>
1214
<mat-panel-title>
13-
<b *ngIf="showSystemNotifications == false || notification == undefined"
14-
>Notifications</b
15+
<span
16+
*ngIf="useBadge"
17+
class="notification-badge"
18+
matBadge="{{ newNotificationCount }}"
19+
matBadgeOverlap="false"
20+
matBadgeColor="warn"
21+
matBadgePosition="before"
22+
matBadgeHidden="{{ newNotificationCount < 1 }}"
23+
matBadgeSize="small"
1524
>
16-
<div *ngIf="showSystemNotifications == true && notification != undefined">
17-
<div id="wrapper">
18-
<div id="title">
19-
<b>Notifications:&nbsp;&nbsp;&nbsp;&nbsp;</b>
20-
</div>
21-
<div
22-
id="time"
23-
title="{{ notification.broadcastTime | date: 'MM/dd/yyyy HH:mm' }}"
24-
style="font-size: 100%"
25-
>
26-
<b>{{ notification.broadcastTime | date: 'HH:mm' }}</b>
27-
</div>
28-
<div id="from" style="font-size: 100%">
29-
{{ notification.fromName }}
30-
</div>
31-
<div id="link">
32-
<a
33-
*ngIf="notification.link"
34-
href="{{ notification.link }}"
35-
target="_blank"
36-
title="Goto: {{ notification.link }}"
37-
>Open</a
38-
>
39-
</div>
40-
<div id="message">
41-
{{ notification.text }}
42-
</div>
43-
</div>
44-
</div>
25+
</span>
26+
<span class="notification-panel-title" >
27+
<b>
28+
Notifications
29+
</b>
30+
</span>
31+
<mat-icon
32+
*ngIf="hasViewAdmin && showSystemNotifications && notificationsHistory.length > 0"
33+
fontIcon="mdi-trash-can"
34+
title="Delete ALL notifications"
35+
(click)="deleteViewNotifications()"
36+
></mat-icon>
4537
</mat-panel-title>
4638
</mat-expansion-panel-header>
47-
<div id="historywrapper">
48-
<div id="navigation">
49-
<div>
50-
<button
51-
*ngIf="showUp"
52-
mat-icon-button
53-
(click)="showNotificationPage(1)"
54-
>
55-
<mat-icon
56-
svgIcon="ic_expand_more_black_24px"
57-
style="transform: rotate(180deg)"
58-
></mat-icon>
59-
</button>
60-
<button
61-
*ngIf="!showUp"
62-
mat-icon-button
63-
style="opacity: 0.3; filter: alpha(opacity=30)"
39+
<mat-list
40+
*ngIf="notificationsHistory != undefined"
41+
>
42+
<mat-list-item
43+
*ngFor="
44+
let notif of notificationsHistory
45+
"
46+
>
47+
<div id="wrapper">
48+
<div
49+
id="time"
50+
title="{{ notif.broadcastTime | date: 'MM/dd/yyyy HH:mm' }}"
6451
>
52+
<b>{{ notif.broadcastTime | date: 'HH:mm' }}</b>
53+
</div>
54+
<div id="from">
55+
{{ notif.fromName }}
56+
</div>
57+
<div id="link">
58+
<a
59+
*ngIf="notif.link"
60+
href="{{ notif.link }}"
61+
target="_blank"
62+
title="Goto: {{ notif.link }}"
63+
>Open</a
64+
>
65+
</div>
66+
<div id="message">
67+
{{ notif.text }}
68+
</div>
69+
<div *ngIf="hasViewAdmin" id="deleteButton">
6570
<mat-icon
66-
svgIcon="ic_expand_more_black_24px"
67-
style="transform: rotate(180deg)"
71+
fontIcon="mdi-trash-can"
72+
title="Delete notification"
73+
(click)="deleteNotification(notif)"
6874
></mat-icon>
69-
</button>
70-
</div>
71-
<div>
72-
<button
73-
*ngIf="showDown"
74-
mat-icon-button
75-
(click)="showNotificationPage(-1)"
76-
>
77-
<mat-icon svgIcon="ic_expand_more_black_24px"></mat-icon>
78-
</button>
79-
<button
80-
*ngIf="!showDown"
81-
mat-icon-button
82-
style="opacity: 0.3; filter: alpha(opacity=30)"
83-
>
84-
<mat-icon svgIcon="ic_expand_more_black_24px"></mat-icon>
85-
</button>
75+
</div>
8676
</div>
87-
</div>
88-
<div id="history">
89-
<mat-list
90-
*ngIf="notificationsHistory != undefined"
91-
style="min-width: 500px; width: 100%"
92-
>
93-
<mat-list-item
94-
*ngFor="
95-
let notif of notificationsHistory | slice: startIndex:endIndex
96-
"
97-
>
98-
<div id="wrapper">
99-
<div
100-
id="time"
101-
title="{{ notif.broadcastTime | date: 'MM/dd/yyyy HH:mm' }}"
102-
>
103-
<b>{{ notif.broadcastTime | date: 'HH:mm' }}</b>
104-
</div>
105-
<div id="from">
106-
{{ notif.fromName }}
107-
</div>
108-
<div id="link">
109-
<a
110-
*ngIf="notif.link"
111-
href="{{ notif.link }}"
112-
target="_blank"
113-
title="Goto: {{ notif.link }}"
114-
>Open</a
115-
>
116-
</div>
117-
<div id="message">
118-
{{ notif.text }}
119-
</div>
120-
</div>
121-
</mat-list-item>
122-
</mat-list>
123-
</div>
124-
</div>
77+
</mat-list-item>
78+
</mat-list>
12579

126-
<div *ngIf="showSendMessage" class="send-message">
80+
<div *ngIf="hasViewAdmin" class="send-message">
12781
<form #notificationForm="ngForm" (ngSubmit)="sendMessage()">
12882
<mat-form-field class="input-message">
12983
<input

‎src/app/components/player/notifications/notifications.component.scss‎

Lines changed: 36 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,24 @@
77
width: 100%;
88
}
99

10+
.notification-badge {
11+
margin-left: 20px;
12+
margin-top: 9px;
13+
}
14+
15+
.notification-panel-title {
16+
margin-left: 10px;
17+
margin-right: 30px;
18+
}
19+
20+
.blink {
21+
animation: blinking 3s infinite;
22+
}
23+
24+
@keyframes blinking {
25+
0% { background-color: orangered; }
26+
}
27+
1028
.notificationslist-input {
1129
width: 100%;
1230
}
@@ -20,13 +38,26 @@
2038
.send-message {
2139
display: flex;
2240
flex-direction: column;
23-
margin-left: 80px;
41+
margin-left: 30px;
42+
margin-right: 50px;
2443
}
2544

2645
.input-message {
2746
width: 100%;
2847
}
2948

49+
.mat-list {
50+
margin-left: 30px;
51+
margin-right: 30px;
52+
border: 1px solid;
53+
overflow: auto;
54+
max-height: 250px;
55+
}
56+
57+
.mat-list-item {
58+
height: 30px !important; /* default is 72px */
59+
}
60+
3061
#wrapper {
3162
display: table;
3263
table-layout: relative;
@@ -37,14 +68,15 @@
3768
}
3869
#time {
3970
width: 40px;
40-
font-size: 80%;
71+
font-size: 70%;
4172
padding: 0;
4273
margin: 0;
4374
text-align: left;
4475
}
4576
#from {
4677
width: 100px;
4778
text-align: center;
79+
font-size: 70%;
4880
}
4981
#link {
5082
text-align: center;
@@ -53,25 +85,16 @@
5385
}
5486
#message {
5587
text-align: left;
56-
margin-left: 125px;
5788
font-size: 70%;
5889
min-width: 300px;
5990
padding: 0.5em;
6091
}
61-
62-
#historywrapper {
63-
display: table;
64-
table-layout: relative;
65-
width: 100%;
66-
height: 100%;
67-
}
68-
#historywrapper > div {
69-
display: table-cell;
70-
}
7192
#navigation {
7293
width: 5px;
7394
padding: 0;
7495
}
7596
#history {
97+
width: 100%;
98+
max-height: 200px;
7699
text-align: left;
77100
}

0 commit comments

Comments
 (0)