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.

---
 frontend/src/app/_data/Notification.ts             |  8 +++
 .../_elements/datatable/datatable.component.html   | 46 ++++++------
 .../app/_elements/datatable/datatable.component.ts |  2 +
 .../app/_elements/loading/loading.component.css    | 81 ++++++++++++++++++++++
 .../app/_elements/loading/loading.component.html   | 11 +++
 .../_elements/loading/loading.component.spec.ts    | 25 +++++++
 .../src/app/_elements/loading/loading.component.ts | 15 ++++
 .../notifications/notifications.component.html     | 23 +++++-
 .../notifications/notifications.component.ts       | 12 +++-
 9 files changed, 198 insertions(+), 25 deletions(-)
 create mode 100644 frontend/src/app/_data/Notification.ts
 create mode 100644 frontend/src/app/_elements/loading/loading.component.css
 create mode 100644 frontend/src/app/_elements/loading/loading.component.html
 create mode 100644 frontend/src/app/_elements/loading/loading.component.spec.ts
 create mode 100644 frontend/src/app/_elements/loading/loading.component.ts

(limited to 'frontend')

diff --git a/frontend/src/app/_data/Notification.ts b/frontend/src/app/_data/Notification.ts
new file mode 100644
index 00000000..181bb332
--- /dev/null
+++ b/frontend/src/app/_data/Notification.ts
@@ -0,0 +1,8 @@
+export default class Notification {
+    _id: string = '';
+    constructor(
+        public title: string = 'Treniranje u toku...',
+        public id: string = '042',
+        public progress: number = 0.5
+    ) { }
+}
\ No newline at end of file
diff --git a/frontend/src/app/_elements/datatable/datatable.component.html b/frontend/src/app/_elements/datatable/datatable.component.html
index bd9e7a13..8fcd44ac 100644
--- a/frontend/src/app/_elements/datatable/datatable.component.html
+++ b/frontend/src/app/_elements/datatable/datatable.component.html
@@ -1,25 +1,31 @@
 <div *ngIf="data">
-    <div class="table-responsive" style="max-height: 50vh; max-width: 100%; overflow: scroll;">
-        <table *ngIf="hasHeader" class="table table-bordered table-light">
-            <thead>
-                <tr>
-                    <th *ngFor="let item of data[0]; let i = index">{{item}}</th>
-                </tr>
-            </thead>
-            <tbody>
-                <tr *ngFor="let row of data | slice:1">
-                    <td *ngFor="let col of row">{{col}}</td>
-                </tr>
-            </tbody>
-        </table>
+    <div class="table-responsive" style="height: 34rem; overflow: auto; border-radius: 5px;" class="mh-5">
+        <div *ngIf="!loaded" style="background-color: #003459; width: 100%; height: 100%;"
+            class="d-flex justify-content-center align-items-center">
+            <app-loading></app-loading>
+        </div>
+        <div *ngIf="loaded">
+            <table *ngIf="hasHeader" class="table table-bordered table-light">
+                <thead>
+                    <tr>
+                        <th *ngFor="let item of data[0]; let i = index">{{item}}</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr *ngFor="let row of data | slice:1">
+                        <td *ngFor="let col of row">{{col}}</td>
+                    </tr>
+                </tbody>
+            </table>
 
-        <table *ngIf="data.length > 0 && !hasHeader" class="table table-bordered table-light">
-            <tbody>
-                <tr *ngFor="let row of data">
-                    <td *ngFor="let col of row">{{col}}</td>
-                </tr>
-            </tbody>
-        </table>
+            <table *ngIf="data.length > 0 && !hasHeader" class="table table-bordered table-light">
+                <tbody>
+                    <tr *ngFor="let row of data">
+                        <td *ngFor="let col of row">{{col}}</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
     </div>
 
     <div id="info">
diff --git a/frontend/src/app/_elements/datatable/datatable.component.ts b/frontend/src/app/_elements/datatable/datatable.component.ts
index d3740d83..3343f6f0 100644
--- a/frontend/src/app/_elements/datatable/datatable.component.ts
+++ b/frontend/src/app/_elements/datatable/datatable.component.ts
@@ -11,6 +11,8 @@ export class DatatableComponent implements OnInit {
 
   @Input() data?: any[] = [];
 
+  loaded = false;
+
   constructor() { }
 
   ngOnInit(): void {
diff --git a/frontend/src/app/_elements/loading/loading.component.css b/frontend/src/app/_elements/loading/loading.component.css
new file mode 100644
index 00000000..f39f60ee
--- /dev/null
+++ b/frontend/src/app/_elements/loading/loading.component.css
@@ -0,0 +1,81 @@
+.lds-grid {
+    display: inline-block;
+    position: relative;
+    width: 80px;
+    height: 80px;
+}
+
+.lds-grid div {
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: #fff;
+    animation: lds-grid 1.2s linear infinite;
+}
+
+.lds-grid div:nth-child(1) {
+    top: 8px;
+    left: 8px;
+    animation-delay: 0s;
+}
+
+.lds-grid div:nth-child(2) {
+    top: 8px;
+    left: 32px;
+    animation-delay: -0.4s;
+}
+
+.lds-grid div:nth-child(3) {
+    top: 8px;
+    left: 56px;
+    animation-delay: -0.8s;
+}
+
+.lds-grid div:nth-child(4) {
+    top: 32px;
+    left: 8px;
+    animation-delay: -0.4s;
+}
+
+.lds-grid div:nth-child(5) {
+    top: 32px;
+    left: 32px;
+    animation-delay: -0.8s;
+}
+
+.lds-grid div:nth-child(6) {
+    top: 32px;
+    left: 56px;
+    animation-delay: -1.2s;
+}
+
+.lds-grid div:nth-child(7) {
+    top: 56px;
+    left: 8px;
+    animation-delay: -0.8s;
+}
+
+.lds-grid div:nth-child(8) {
+    top: 56px;
+    left: 32px;
+    animation-delay: -1.2s;
+}
+
+.lds-grid div:nth-child(9) {
+    top: 56px;
+    left: 56px;
+    animation-delay: -1.6s;
+}
+
+@keyframes lds-grid {
+
+    0%,
+    100% {
+        opacity: 1;
+    }
+
+    50% {
+        opacity: 0.5;
+    }
+}
\ No newline at end of file
diff --git a/frontend/src/app/_elements/loading/loading.component.html b/frontend/src/app/_elements/loading/loading.component.html
new file mode 100644
index 00000000..d2c7b74e
--- /dev/null
+++ b/frontend/src/app/_elements/loading/loading.component.html
@@ -0,0 +1,11 @@
+<div class="lds-grid">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/loading/loading.component.spec.ts b/frontend/src/app/_elements/loading/loading.component.spec.ts
new file mode 100644
index 00000000..7aacfad9
--- /dev/null
+++ b/frontend/src/app/_elements/loading/loading.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoadingComponent } from './loading.component';
+
+describe('LoadingComponent', () => {
+  let component: LoadingComponent;
+  let fixture: ComponentFixture<LoadingComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ LoadingComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoadingComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_elements/loading/loading.component.ts b/frontend/src/app/_elements/loading/loading.component.ts
new file mode 100644
index 00000000..4dff0cdf
--- /dev/null
+++ b/frontend/src/app/_elements/loading/loading.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-loading',
+  templateUrl: './loading.component.html',
+  styleUrls: ['./loading.component.css']
+})
+export class LoadingComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
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');
-- 
cgit v1.2.3