Dodao klasu za notifikacije i dizajn. Dodao spinner u datatable komponentu.

2 files changed, 30 insertions, 5 deletions

diff --git a/frontend/src/app/_elements/notifications/notifications.component.html b/frontend/src/app/_elements/notifications/notifications.component.html
index d1da41b4..0b87e4fc 100644
--- a/frontend/src/app/_elements/notifications/notifications.component.html
+++ b/frontend/src/app/_elements/notifications/notifications.component.html
@@ -1,3 +1,20 @@
-<div *ngIf="notifications" class="position-fixed card card-body bg-dark text-white m-3" style="bottom: 0; right: 0;">
-    <h3>Notifikacije</h3>
-</div>
\ No newline at end of file
+<div *ngIf="notifications" class="position-fixed card card-body p-1 m-3" style="bottom: 0; right: 0; width: 18rem;">
+    <h2 class="m-auto" (click)="closed = !closed;" data-bs-toggle="collapse" href="#collapseNotifs" role="button"
+        aria-expanded="true" aria-controls="collapseNotifs">Notifikacije
+        <button class="border-0 bg-white">
+            <mat-icon class="position-absolute" style="top: 8px; right: 12px;">{{closed ? 'keyboard_arrow_up' :
+                'keyboard_arrow_down'}}</mat-icon>
+        </button>
+    </h2>
+
+    <div id="collapseNotifs" class="collapse show">
+        <div *ngFor="let notification of notifications" class="p-2 m-1 border rounded">
+            <div class="d-flex flex-row">
+                <p>{{notification.title}}</p>
+            </div>
+            <div class="border-3 border-primary bg-dark m-1" style="height: 5px; margin-top: -10px !important;">
+                <div class="bg-primary" style="height: 5px;" [style]="'width: '+(notification.progress*100)+'%;'">
+                </div>
+            </div>
+        </div>
+    </div>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/notifications/notifications.component.ts b/frontend/src/app/_elements/notifications/notifications.component.ts
index 6c1d555b..82613448 100644
--- a/frontend/src/app/_elements/notifications/notifications.component.ts
+++ b/frontend/src/app/_elements/notifications/notifications.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { WebSocketService } from 'src/app/_services/web-socket.service';
+import Notification from 'src/app/_data/Notification';
 
 @Component({
   selector: 'app-notifications',
@@ -8,9 +9,16 @@ import { WebSocketService } from 'src/app/_services/web-socket.service';
 })
 export class NotificationsComponent implements OnInit {
 
-  notifications?: any[];
+  notifications?: Notification[];
+  closed: boolean = false;
 
-  constructor(private wsService: WebSocketService) { }
+  constructor(private wsService: WebSocketService) {
+    this.notifications = [
+      new Notification("Titanik (Preziveli)", "79768456867", 0.2),
+      new Notification("Test Prediktor 1", "56758768678", 0.4),
+      new Notification("Test Prediktor 2", "11344556425", 0.7)
+    ]
+  }
 
   ngOnInit(): void {
     // this.wsService.send('test');