From 19fd492a03ea48571d6aaab9e75108a82599ef0a Mon Sep 17 00:00:00 2001
From: Danijel Andjelkovic <adanijel99@gmail.com>
Date: Wed, 6 Apr 2022 13:07:23 +0200
Subject: Dodao klasu za notifikacije i dizajn. Dodao spinner u datatable
 komponentu.

---
 .../notifications/notifications.component.html     | 23 +++++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

(limited to 'frontend/src/app/_elements/notifications/notifications.component.html')

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
-- 
cgit v1.2.3