diff options
Diffstat (limited to 'frontend/src/app/_elements')
14 files changed, 237 insertions, 30 deletions
diff --git a/frontend/src/app/_elements/annvisual/annvisual.component.ts b/frontend/src/app/_elements/annvisual/annvisual.component.ts index 53e4e2ca..df0a3898 100644 --- a/frontend/src/app/_elements/annvisual/annvisual.component.ts +++ b/frontend/src/app/_elements/annvisual/annvisual.component.ts @@ -18,7 +18,7 @@ export class AnnvisualComponent implements OnInit { let hiddenlayerstring: string = ''; let digraphstring: string = 'digraph {'; - for (let i = 0; i < this.model.inputColumns.length; i++) { + for (let i = 0; i < /*this.model.inputColumns.length*/ 10; i++) { inputlayerstring = inputlayerstring + 'i' + i + ','; } inputlayerstring = inputlayerstring.slice(0, -1); @@ -35,7 +35,6 @@ export class AnnvisualComponent implements OnInit { } digraphstring = digraphstring + 'o}'; - graphviz('#graph').renderDot(digraphstring); } 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/model-load/model-load.component.css b/frontend/src/app/_elements/model-load/model-load.component.css new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/frontend/src/app/_elements/model-load/model-load.component.css diff --git a/frontend/src/app/_elements/model-load/model-load.component.html b/frontend/src/app/_elements/model-load/model-load.component.html new file mode 100644 index 00000000..ced9b0d6 --- /dev/null +++ b/frontend/src/app/_elements/model-load/model-load.component.html @@ -0,0 +1 @@ +<p>model-load works!</p> diff --git a/frontend/src/app/_elements/model-load/model-load.component.spec.ts b/frontend/src/app/_elements/model-load/model-load.component.spec.ts new file mode 100644 index 00000000..1dafd966 --- /dev/null +++ b/frontend/src/app/_elements/model-load/model-load.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ModelLoadComponent } from './model-load.component'; + +describe('ModelLoadComponent', () => { + let component: ModelLoadComponent; + let fixture: ComponentFixture<ModelLoadComponent>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ModelLoadComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(ModelLoadComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/_elements/model-load/model-load.component.ts b/frontend/src/app/_elements/model-load/model-load.component.ts new file mode 100644 index 00000000..00532bea --- /dev/null +++ b/frontend/src/app/_elements/model-load/model-load.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-model-load', + templateUrl: './model-load.component.html', + styleUrls: ['./model-load.component.css'] +}) +export class ModelLoadComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/frontend/src/app/_elements/navbar/navbar.component.html b/frontend/src/app/_elements/navbar/navbar.component.html index 82a1ea07..dbee4773 100644 --- a/frontend/src/app/_elements/navbar/navbar.component.html +++ b/frontend/src/app/_elements/navbar/navbar.component.html @@ -8,8 +8,9 @@ <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0"> <li><a routerLink="" class="nav-link px-2" [class]="(currentUrl === '') ? 'text-secondary' : 'text-white'">Početna</a></li> - <li><a routerLink="add-model" class="nav-link px-2" - [class]="(currentUrl === '/add-model') ? 'text-secondary' : 'text-white'">Dodaj model</a></li> + <li><a routerLink="experiment" class="nav-link px-2" + [class]="(currentUrl === '/add-model') ? 'text-secondary' : 'text-white'">Eksperimentiši</a> + </li> <li><a routerLink="my-predictors" class="nav-link px-2" [class]="(currentUrl === '/my-predictors') ? 'text-secondary' : 'text-white' + (shared.loggedIn) ? '' : 'disabled'">Predvidi</a> </li> @@ -18,7 +19,8 @@ <div *ngIf="shared.loggedIn" class="dropdown text-end"> <a href="#" class="d-block link-light text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false"> - <img [src]="'/assets/profilePictures/'+ shared.photoId +'.png'" alt="mdo" width="32" height="32" class="rounded-circle"> + <img [src]="'/assets/profilePictures/'+ shared.photoId +'.png'" alt="mdo" width="32" height="32" + class="rounded-circle"> </a> <ul class="dropdown-menu text-small" aria-labelledby="dropdownUser1" style="position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate(0px, 34px);" 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'); |