slasherss/ipwa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Added notification dialog on frontend

Browse Source
This commit is contained in:
Jan Szumotalski
2025-05-31 19:56:31 +02:00
parent 375bb1ceb4
commit efd76e16a1
15 changed files with 191 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/admin-view/admin-comm.service.ts
View File

@@ -185,7 +185,13 @@ export class AdminCommService {
},
outbox: {
getSent: () => {
return this.http.get<any[]>(environment.apiEndpoint+"/admin/notif/outbox", {withCredentials: true})
return this.http.get<{_id: string, sentDate: moment.Moment, title: string}[]>(environment.apiEndpoint+"/admin/notif/outbox", {withCredentials: true})
},
getBody: (id: string) => {
return this.http.get(environment.apiEndpoint+`/admin/notif/outbox/${id}/message`, {withCredentials: true, responseType: "text"})
},
getRcpts: (id: string) => {
return this.http.get<{_id: string, uname: string, room?: string, fname?: string, surname?: string}[]>(environment.apiEndpoint+`/admin/notif/outbox/${id}/rcpts`, {withCredentials: true})
}
}
}

31
src/app/admin-view/notifications/outbox/message/message.component.html Normal file
View File

@@ -0,0 +1,31 @@
<mat-card>
<mat-card-header>
<mat-card-title-group>
<mat-card-title>
{{item.title}}
</mat-card-title>
<mat-card-subtitle>{{item.sentDate.format('[Wysłano] dddd DD MMMM YYYYr. o HH:mm')}}</mat-card-subtitle>
</mat-card-title-group>
</mat-card-header>
<mat-card-content>
<p *ngIf="body">
{{body}}
</p>
<hr>
<ul>
@for (user of rcpts; track $index) {
<li>
<span *ngIf="user.room">{{user.room}}: </span>{{user.fname}} {{user.surname}} <span
style="color: gray">({{user.uname}})</span>
</li>
}
</ul>
</mat-card-content>
<mat-card-footer>
<mat-card-actions>
<button mat-stroked-button (click)="getMessage()" *ngIf="!body">Wczytaj treść</button>
<button mat-stroked-button (click)="getRcpts()" *ngIf="!rcpts">Wczytaj odbiorców</button>
<mat-spinner diameter="32" color="accent" *ngIf="loading"></mat-spinner>
</mat-card-actions>
</mat-card-footer>
</mat-card>

3
src/app/admin-view/notifications/outbox/message/message.component.scss Normal file
View File

@@ -0,0 +1,3 @@
mat-card-title {
font-size: 24pt;
}

23
src/app/admin-view/notifications/outbox/message/message.component.spec.ts Normal file
View File

@@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MessageComponent } from './message.component';
describe('MessageComponent', () => {
let component: MessageComponent;
let fixture: ComponentFixture<MessageComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [MessageComponent]
})
.compileComponents();
fixture = TestBed.createComponent(MessageComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

31
src/app/admin-view/notifications/outbox/message/message.component.ts Normal file
View File

@@ -0,0 +1,31 @@
import { Component, Input } from '@angular/core';
import { AdminCommService } from 'src/app/admin-view/admin-comm.service';
@Component({
selector: 'app-message',
templateUrl: './message.component.html',
styleUrl: './message.component.scss'
})
export class MessageComponent {
@Input() item!: {_id: string, sentDate: moment.Moment, title: string}
body?: string
rcpts?: {_id: string, uname: string, room?: string, fname?: string, surname?: string}[]
loading: boolean = false
constructor (readonly acu: AdminCommService) {}
getMessage() {
this.loading = true
this.acu.notif.outbox.getBody(this.item._id).subscribe(v => {
this.body = v
this.loading = false
})
}
getRcpts() {
this.loading = true
this.acu.notif.outbox.getRcpts(this.item._id).subscribe(v => {
this.rcpts = v
this.loading = false
})
}
}

24
src/app/admin-view/notifications/outbox/outbox.component.html
View File

@@ -1,28 +1,6 @@
<p>Wysłane wiadomości:</p>
<div class="cardContainer">
@for (item of messages; track $index) {
<mat-card>
<mat-card-header>
<mat-card-title-group>
<mat-card-title>
{{item.message.title}}
</mat-card-title>
<mat-card-subtitle>{{item.sentDate.format('[Wysłano] dddd DD MMMM YYYYr. o HH:mm')}}</mat-card-subtitle>
</mat-card-title-group>
</mat-card-header>
<mat-card-content>
<p>
{{item.message.body}}
</p>
<hr>
<ul>
@for (user of item.rcpt; track $index) {
<li>
<span *ngIf="user.room">{{user.room}}: </span>{{user.fname}} {{user.surname}} <span style="color: gray" >({{user.uname}})</span>
</li>
}
</ul>
</mat-card-content>
</mat-card>
<app-message [item]="item"></app-message>
}
</div>

4
src/app/admin-view/notifications/outbox/outbox.component.scss
View File

@@ -3,8 +3,4 @@
flex-wrap: wrap;
gap: 1ch;
margin: 1ch;
}
mat-card-title {
font-size: 24pt;
}

6
src/app/admin-view/notifications/outbox/outbox.component.ts
View File

@@ -11,7 +11,11 @@ import * as moment from 'moment';
})
export class OutboxComponent implements OnInit {
messages!: any[]
messages!: {
_id: string;
sentDate: moment.Moment;
title: string;
}[]
constructor (private readonly acs: AdminCommService, private toolbar: ToolbarService, private router: Router, private route: ActivatedRoute ) {
this.toolbar.comp = this

18
src/app/app-view/app-view.component.ts
View File

@@ -6,6 +6,8 @@ import { Link } from '../types/link';
import { LocalStorageService } from '../services/local-storage.service';
import { interval } from 'rxjs';
import { MatSnackBar } from '@angular/material/snack-bar';
import { MatDialog } from '@angular/material/dialog';
import { NotifDialogComponent } from './notif-dialog/notif-dialog.component';
@Component({
selector: 'app-app-view',
@@ -25,7 +27,14 @@ export class AppViewComponent implements OnInit {
});
}
constructor (private ac: AuthClient, readonly swPush: SwPush, private us: UpdatesService, private ls: LocalStorageService, private sb: MatSnackBar) {}
constructor (
private ac: AuthClient,
readonly swPush: SwPush,
private us: UpdatesService,
private ls: LocalStorageService,
private sb: MatSnackBar,
private dialog: MatDialog
) {}
subscribeToNotif() {
if (this.swPush.isEnabled && this.ls.capCheck(4)) {
@@ -45,6 +54,13 @@ export class AppViewComponent implements OnInit {
}
newsCheck() {
if (this.ls.capCheck(4)) {
this.us.getNotifCheck().subscribe((s) => {
s.forEach(v => {
this.dialog.open(NotifDialogComponent, {data: v})
})
})
}
if (this.ls.newsflag) return;
this.us.newsCheck().subscribe((s) => {
if (s.hash != this.ls.newsCheck.hash) {

10
src/app/app-view/notif-dialog/notif-dialog.component.html Normal file
View File

@@ -0,0 +1,10 @@
<h1 mat-dialog-title>{{data.message.title}}</h1>
<mat-dialog-content>
<p>
{{data.message.body}}
</p>
<div>{{data.sentDate.format("[Wysłano] dddd DD MMMM YYYYr. o HH:mm")}}</div>
</mat-dialog-content>
<mat-dialog-actions align="end">
<button mat-raised-button color="primary" (click)="ack()">Odczytano</button>
</mat-dialog-actions>

0
src/app/app-view/notif-dialog/notif-dialog.component.scss Normal file
View File

23
src/app/app-view/notif-dialog/notif-dialog.component.spec.ts Normal file
View File

@@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { NotifDialogComponent } from './notif-dialog.component';
describe('NotifDialogComponent', () => {
let component: NotifDialogComponent;
let fixture: ComponentFixture<NotifDialogComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [NotifDialogComponent]
})
.compileComponents();
fixture = TestBed.createComponent(NotifDialogComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

27
src/app/app-view/notif-dialog/notif-dialog.component.ts Normal file
View File

@@ -0,0 +1,27 @@
import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import * as moment from 'moment';
import { UpdatesService } from 'src/app/services/updates.service';
@Component({
selector: 'app-notif-dialog',
templateUrl: './notif-dialog.component.html',
styleUrl: './notif-dialog.component.scss'
})
export class NotifDialogComponent {
constructor (
@Inject(MAT_DIALOG_DATA) public data: {_id: string, message: {title: string, body: string}, sentDate: moment.Moment},
public dialogRef: MatDialogRef<NotifDialogComponent>,
private uc: UpdatesService
) {
data.sentDate = moment(data.sentDate)
}
ack () {
this.uc.postInfoAck(this.data._id).subscribe((v) => {
this.dialogRef.close()
})
}
}

4
src/app/app.module.ts
View File

@@ -83,6 +83,8 @@ import { ExtraComponent } from './app-view/personal/extra/extra.component';
import { RedirectComponent } from './app-view/personal/extra/redirect/redirect.component';
import { OutboxComponent } from './admin-view/notifications/outbox/outbox.component';
import { ToolbarComponent } from './admin-view/toolbar/toolbar.component';
import { MessageComponent } from './admin-view/notifications/outbox/message/message.component';
import { NotifDialogComponent } from './app-view/notif-dialog/notif-dialog.component';
@NgModule({
declarations: [
@@ -130,6 +132,8 @@ import { ToolbarComponent } from './admin-view/toolbar/toolbar.component';
RedirectComponent,
OutboxComponent,
ToolbarComponent,
MessageComponent,
NotifDialogComponent,
],
imports: [
BrowserModule,

9
src/app/services/updates.service.ts
View File

@@ -7,6 +7,7 @@ import * as moment from 'moment';
import { map } from 'rxjs';
import { UKey } from '../types/key';
import { CleanNote } from '../types/clean-note';
import { Status } from '../types/status';
@Injectable({
providedIn: 'root'
@@ -55,4 +56,12 @@ export class UpdatesService {
getClean(date: moment.Moment) {
return this.http.get<{grade: number, notes: CleanNote[], tips: string}>(environment.apiEndpoint+`/app/clean/${date.toISOString()}`, {withCredentials: true})
}
getNotifCheck() {
return this.http.get<{_id: string, message: {title: string, body: string}, sentDate: moment.Moment}[]>(environment.apiEndpoint+`/app/notif/check`, {withCredentials: true})
}
postInfoAck(id: string) {
return this.http.post<Status>(environment.apiEndpoint+`/app/notif/${id}/ack`, undefined, {withCredentials: true})
}
}