Added notifications - (WIP, boilerplate)

src/app/components/notifications/notifications.component.css

@@ -0,0 +1,9 @@
+.notification-divider {
+    margin-bottom: 10px;
+    margin-top: 10px;
+}
+
+.notification-title {
+    margin-bottom: 6px;
+    text-align: center
+}

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

@@ -0,0 +1,32 @@
+<h4 *ngIf="notifications !== null && notifications.length === 0 && read_notifications.length === 0" style="text-align: center; margin: 10px;">No notifications available</h4>
+<div style="margin: 10px;" *ngIf="notifications?.length > 0">
+    <h4 class="notification-title">New notifications</h4>
+    <div *ngFor="let notification of appService.notifications; let i = index;">
+        <mat-divider class="notification-divider"></mat-divider>
+        <div style="display: inline-block;">
+            <button (click)="deleteNotification(notification.id, i, false)" mat-icon-button><mat-icon>close</mat-icon></button>
+        </div>
+        <div style="display: inline-block">
+            {{notification.title}}
+        </div>
+        <div style="margin-left: 10px; float: right;" *ngIf="notification.action">
+            <button (click)="notificationAction(notification)" [color]="notification.action.warn ? 'warn' : 'primary'" mat-raised-button>{{notification.action.title}}</button>
+        </div>
+    </div>
+</div>
+
+<div style="margin: 10px;" *ngIf="read_notifications?.length > 0">
+    <h4 class="notification-title">Old notifications</h4>
+    <div *ngFor="let notification of appService.read_notifications; let i = index">
+        <mat-divider class="notification-divider"></mat-divider>
+        <div style="display: inline-block;">
+            <button (click)="deleteNotification(notification.id, i, true)" mat-icon-button><mat-icon>close</mat-icon></button>
+        </div>
+        <div style="display: inline-block">
+            {{notification.title}}
+        </div>
+        <div style="margin-left: 10px; float: right" *ngIf="notification.action">
+            <button (click)="notificationAction(notification)" [color]="notification.action.warn ? 'warn' : 'primary'" mat-raised-button>{{notification.action.title}}</button>
+        </div>
+    </div>
+</div>

src/app/components/notifications/notifications.component.spec.ts

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

src/app/components/notifications/notifications.component.ts

@@ -0,0 +1,76 @@
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { MatMenu, MatMenuTrigger } from '@angular/material/menu';
+import { Router } from '@angular/router';
+import { PostsService } from 'app/posts.services';
+import { Notification } from 'api-types';
+
+// TODO: fill this out
+const NOTIFICATION_ACTION_TO_STRING = {}
+
+@Component({
+  selector: 'app-notifications',
+  templateUrl: './notifications.component.html',
+  styleUrls: ['./notifications.component.css']
+})
+export class NotificationsComponent implements OnInit {
+
+  notifications = null;
+  read_notifications = null;
+
+  @Input() menu: MatMenuTrigger;
+  @Output() notificationCount = new EventEmitter<number>();
+
+  constructor(public postsService: PostsService, private router: Router, private elRef: ElementRef) { }
+
+  ngOnInit(): void {
+    // wait for init
+    if (this.postsService.initialized) {
+      this.getNotifications();
+    } else {
+      this.postsService.service_initialized.subscribe(init => {
+        if (init) {
+          this.getNotifications();
+        }
+      });
+    }
+  }
+
+  getNotifications(): void {
+    this.postsService.getNotifications().subscribe(res => {
+      this.notifications = res['notifications'].filter(notification => notification.read == false);
+      this.read_notifications = res['notifications'].filter(notification => notification.read == true);
+      this.notificationCount.emit(this.notifications.length);
+    });
+  }
+
+  notificationAction(notification: Notification): void {
+    // TODO: implement
+  }
+  
+  deleteNotification(uid: string, index: number): void {
+    this.postsService.deleteNotification(uid).subscribe(res => {
+      console.log(res);
+      // TODO: remove from array
+      this.notificationCount.emit(this.notifications.length);
+    });
+  }
+
+  deleteAllNotifications(): void {
+    this.postsService.deleteAllNotifications().subscribe(res => {
+      console.log(res);
+      this.notifications = [];
+      this.read_notifications = [];
+      this.getNotifications();
+    });
+    this.notificationCount.emit(0);
+  }
+
+  setNotificationsToRead(): void {
+    const uids = this.notifications.map(notification => notification.uid);
+    this.postsService.setNotificationsToRead(uids).subscribe(res => {
+      console.log(res);
+    });
+    this.notificationCount.emit(0);
+  }
+
+}