Sredio komponentu za notifikacije, tako da moze da se skroluje ako ima puno notifikacija i da mogu da se obrisu notifikacije. Ako stigne notifikacija treniranja za isti model iz prethodne notifikacije, prethodna se prepisuje.

3 files changed, 33 insertions, 10 deletions

diff --git a/frontend/src/app/_data/Notification.ts b/frontend/src/app/_data/Notification.ts
index c505d399..94a3be1d 100644
--- a/frontend/src/app/_data/Notification.ts
+++ b/frontend/src/app/_data/Notification.ts
@@ -1,5 +1,4 @@
 export default class Notification {
-    _id: string = '';
     constructor(
         public title: string = 'Treniranje u toku...',
         public id: string = '042',
diff --git a/frontend/src/app/_elements/notifications/notifications.component.html b/frontend/src/app/_elements/notifications/notifications.component.html
index ef897cfc..3b2f4eaa 100644
--- a/frontend/src/app/_elements/notifications/notifications.component.html
+++ b/frontend/src/app/_elements/notifications/notifications.component.html
@@ -11,14 +11,18 @@
         </button>
     </h2>
 
-    <div id="collapseNotifs" class="collapse show">
+    <div id="collapseNotifs" class="collapse show overflow-auto" style="max-height: 32rem;">
         <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 *ngIf="notification.hasProgress" 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 class="d-flex flex-row ">
+                <div>
+                    <p>{{notification.title}}</p>
+                    <div *ngIf="notification.hasProgress" class="border-3 border-primary bg-dark m-1" style="height: 5px; margin-top: -10px !important; min-width: 12rem;">
+                        <div class="bg-primary" style="height: 5px;" [style]="'width: '+(notification.progress*100)+'%;'">
+                        </div>
+                    </div>
                 </div>
+                <button type="button" class="btn-close ms-auto align-self-center" aria-label="Close" (click)="removeNotification(notification);"></button>
             </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 e199f70a..9b460240 100644
--- a/frontend/src/app/_elements/notifications/notifications.component.ts
+++ b/frontend/src/app/_elements/notifications/notifications.component.ts
@@ -21,13 +21,33 @@ export class NotificationsComponent implements OnInit {
         this.notifications.push(new Notification(`Obrađen izvor podataka: ${dName}`, dId, 1.0, false));
       });
 
-      this.signalRService.hubConnection.on("NotifyEpoch", (epoch: string, mName: string, mId: string, numEpochs) => {
-        //todo epoch
-        this.notifications.push(new Notification(`Treniranje modela: ${mName}`, mId, 0.5));
+      this.signalRService.hubConnection.on("NotifyEpoch", (mName: string, mId: string, stat: string, totalEpochs: number, currentEpoch: number) => {
+        const existingNotification = this.notifications.find(x => x.id === mId)
+        const progress = ((currentEpoch + 1) / totalEpochs);
+        console.log("Ukupno epoha", totalEpochs, "Trenutna epoha:", currentEpoch);
+        if (!existingNotification)
+          this.notifications.push(new Notification(`Treniranje modela: ${mName}`, mId, progress, true));
+        else {
+          existingNotification.progress = progress;
+        }
+      });
+
+      this.signalRService.hubConnection.on("NotifyModel", (mName: string, mId: string, stat: string, totalEpochs: number, currentEpoch: number) => {
+        const existingNotification = this.notifications.find(x => x.id === mId)
+        const progress = ((currentEpoch + 1) / totalEpochs);
+        if (!existingNotification)
+          this.notifications.push(new Notification(`Treniranje modela: ${mName}`, mId, progress, true));
+        else {
+          existingNotification.progress = progress;
+        }
       });
     } else {
       console.warn("Notifications: No connection!");
     }
   }
 
+  removeNotification(notification: Notification) {
+    this.notifications.splice(this.notifications.indexOf(notification), 1);
+  }
+
 }