diff options
| -rw-r--r-- | frontend/src/app/_elements/datatable/datatable.component.html | 34 | ||||
| -rw-r--r-- | frontend/src/app/_elements/navbar/navbar.component.html | 6 | ||||
| -rw-r--r-- | frontend/src/app/_elements/playlist/playlist.component.css | 10 | ||||
| -rw-r--r-- | frontend/src/app/_elements/playlist/playlist.component.html | 10 | ||||
| -rw-r--r-- | frontend/src/app/_pages/archive/archive.component.html | 42 | ||||
| -rw-r--r-- | frontend/src/app/_pages/archive/archive.component.ts | 12 | ||||
| -rw-r--r-- | frontend/src/app/_pages/home/home.component.html | 57 | ||||
| -rw-r--r-- | frontend/src/app/app.component.ts | 1 | ||||
| -rw-r--r-- | frontend/src/styles/helper.css | 17 | ||||
| -rw-r--r-- | frontend/src/styles/theme.css | 17 |
10 files changed, 112 insertions, 94 deletions
diff --git a/frontend/src/app/_elements/datatable/datatable.component.html b/frontend/src/app/_elements/datatable/datatable.component.html index 8db62aff..fe359db0 100644 --- a/frontend/src/app/_elements/datatable/datatable.component.html +++ b/frontend/src/app/_elements/datatable/datatable.component.html @@ -1,18 +1,16 @@ <div *ngIf="tableData.hasInput"> - <div> - <div *ngIf="!tableData.loaded" backgroundColor="secondary" style="width: 100%; height: 100%;" - class="d-flex justify-content-center align-items-center"> + <div class="text-white"> + <div *ngIf="!tableData.loaded" style="width: 100%; height: 100%;" class="d-flex justify-content-center align-items-center"> <app-loading></app-loading> </div> <div *ngIf="tableData.loaded && tableData.data"> - <div id="info" *ngIf="tableData.data.length > 0 && tableData.data[0].length > 0" - class="d-flex flex-row justify-content-center align-items-center"> + <div id="info" *ngIf="tableData.data.length > 0 && tableData.data[0].length > 0" class="d-flex flex-row justify-content-center align-items-center"> <div class="fs-5 mb-3"> Tabela {{tableData.numCols}}x{{tableData.numRows}} </div> </div> - <div class="table-responsive" style="overflow: auto; border-radius: 5px;"> - <table *ngIf="tableData.data.length > 0 && tableData.hasHeader && tableData.data[0].length > 0" class="table table-bordered table-light"> + <div style="border-radius: 5px; overflow-x: auto; overflow-y: hidden;"> + <table *ngIf="tableData.data.length && tableData.data[0].length > 0" class="table table-responsive table-sm text-offwhite row-height"> <thead> <tr> <th *ngFor="let item of tableData.data[0]; let i = index">{{item}}</th> @@ -22,21 +20,17 @@ <tr *ngFor="let row of tableData.data | slice:1"> <td *ngFor="let col of row">{{col}}</td> </tr> - <tr> - <td colspan="100" class="text-lg-center fs-6">+ {{tableData.numRows - 11}} redova...</td> - </tr> - </tbody> - </table> - <table *ngIf="tableData.data.length > 0 && !tableData.hasHeader && tableData.data[0].length > 0" class="table table-bordered table-light"> - <tbody> - <tr *ngFor="let row of tableData.data"> - <td *ngFor="let col of row">{{col}}</td> - </tr> - <tr> - <td colspan="100" class="text-lg-center fs-6">+ {{tableData.numRows - 10}} redova...</td> - </tr> </tbody> </table> + <tfoot> + <tr> + <td colspan="100" class="fs-6"> + <div class="footer-center"> + <div>+ {{tableData.numRows - 11}} redova...</div> + </div> + </td> + </tr> + </tfoot> </div> </div> </div> diff --git a/frontend/src/app/_elements/navbar/navbar.component.html b/frontend/src/app/_elements/navbar/navbar.component.html index 41105405..5390136d 100644 --- a/frontend/src/app/_elements/navbar/navbar.component.html +++ b/frontend/src/app/_elements/navbar/navbar.component.html @@ -9,9 +9,7 @@ <li><a routerLink="" class="nav-link px-2" [class]="(currentUrl === '') ? 'text-secondary' : 'text-white'">Početna</a></li> <li><a routerLink="experiment" class="nav-link px-2" [class]="(currentUrl === '/experiment') ? 'text-secondary' : 'text-white'">Napravi eksperiment</a> </li> - <li><a routerLink="training" class="nav-link px-2" [class]="(currentUrl === '/training') ? 'text-secondary' : 'text-white'">Treniraj model</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><a routerLink="archive" class="nav-link px-2" [class]="(currentUrl === '/archive') ? 'text-secondary' : 'text-white'">Arhiva</a> </li> </ul> @@ -20,8 +18,6 @@ <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);" data-popper-placement="bottom-end"> - <li><a class="dropdown-item" routerLink="add-model">Nov model...</a></li> - <li><a class="dropdown-item" routerLink="settings">Podešavanja</a></li> <li><a class="dropdown-item" routerLink="profile">Moj profil</a></li> <li> <hr class="dropdown-divider"> diff --git a/frontend/src/app/_elements/playlist/playlist.component.css b/frontend/src/app/_elements/playlist/playlist.component.css index 7ce320d9..83448e51 100644 --- a/frontend/src/app/_elements/playlist/playlist.component.css +++ b/frontend/src/app/_elements/playlist/playlist.component.css @@ -13,7 +13,7 @@ .ns-cards { position: relative; width: 300%; - height: 36rem; + height: 26rem; margin-bottom: 20px; } @@ -28,6 +28,10 @@ cursor: pointer; } +.ns-card:hover { + opacity: 1 !important; +} + input[type=radio] { display: none; } @@ -36,7 +40,7 @@ input[type=radio] { #item-2:checked~.ns-cards #view-item-1, #item-3:checked~.ns-cards #view-item-2 { transform: translatex(-40%) scale(0.8); - opacity: 0.4; + opacity: 0.5; z-index: 0; } @@ -44,7 +48,7 @@ input[type=radio] { #item-2:checked~.ns-cards #view-item-3, #item-3:checked~.ns-cards #view-item-1 { transform: translatex(40%) scale(0.8); - opacity: 0.4; + opacity: 0.5; z-index: 0; } diff --git a/frontend/src/app/_elements/playlist/playlist.component.html b/frontend/src/app/_elements/playlist/playlist.component.html index fdb426ed..97ebe6a5 100644 --- a/frontend/src/app/_elements/playlist/playlist.component.html +++ b/frontend/src/app/_elements/playlist/playlist.component.html @@ -3,17 +3,17 @@ <input type="radio" name="slider" id="item-2" value="1" [(ngModel)]="selectedId"> <input type="radio" name="slider" id="item-3" value="2" [(ngModel)]="selectedId"> <div class="ns-cards"> - <label class="ns-card bg-light overflow-auto" for="item-1" id="view-item-1"> + <label class="ns-card ns-bg-dark-100 overflow-x-auto overflow-y-none" for="item-1" id="view-item-1"> <app-datatable [tableData]="tableDatas[0]"></app-datatable> </label> - <label class="ns-card bg-light overflow-auto" for="item-2" id="view-item-2"> + <label class="ns-card ns-bg-dark-100 overflow-x-auto overflow-y-none" for="item-2" id="view-item-2"> <app-datatable [tableData]="tableDatas[1]"></app-datatable> </label> - <label class="ns-card bg-light overflow-auto" for="item-3" id="view-item-3"> + <label class="ns-card ns-bg-dark-100 overflow-x-auto overflow-y-none" for="item-3" id="view-item-3"> <app-datatable [tableData]="tableDatas[2]"></app-datatable> </label> </div> - <div class="ns-infobox"> - <app-item-dataset [dataset]="datasets[getIndex(selectedId)]"></app-item-dataset> + <div class="ns-infobox text-offwhite"> + <h2>{{datasets[getIndex(selectedId)].name}}</h2> </div> </div>
\ No newline at end of file diff --git a/frontend/src/app/_pages/archive/archive.component.html b/frontend/src/app/_pages/archive/archive.component.html index 44c4d9c2..1d5d144f 100644 --- a/frontend/src/app/_pages/archive/archive.component.html +++ b/frontend/src/app/_pages/archive/archive.component.html @@ -1 +1,41 @@ -<p>archive works!</p> +<div class="d-flex flex-column align-items-center"> + <div *ngIf="publicDatasets.length > 0" class="my-5"> + <app-playlist [datasets]="publicDatasets"></app-playlist> + + <div class="rounded-pill bg-light p-4 m-2 text-center position-relative"> + <a routerLink="browse-datasets" class="stretched-link">Pogledaj sve javne izvore podataka...</a> + </div> + </div> + + <div id="cards" class="row align-items-view align-items-stretch justify-content-center"> + <div class="card shadowed bg-light text-light col-3 m-3" style="width: 18rem;"> + <div class="card-body"> + <mat-icon width="48px" height="48px" style="font-size: 48px; margin-left: 50%; transform: translateX(-100%);">storage</mat-icon> + <h3 class="card-title my-2">Moji izvori podataka</h3> + <p class="card-text"> + <a class="stretched-link" routerLink="my-datasets">Preuredite</a> vaše izvore podataka, ili dodajte novi. + </p> + </div> + </div> + <div class="card shadowed bg-light text-light col-3 m-3" style="width: 18rem;"> + <div class="card-body"> + <mat-icon width="48px" height="48px" style="font-size: 48px; margin-left: 50%; transform: translateX(-100%);">model_training + </mat-icon> + <h3 class="card-title my-2">Moji modeli</h3> + <p class="card-text"> + <a class="stretched-link" routerLink="my-models">Pregledajte</a> vaše modele, menjajte ih, napravite nove modele, ili ih obrišite. + </p> + </div> + </div> + <div class="card shadowed bg-light text-light col-3 m-3" style="width: 18rem;"> + <div class="card-body"> + <mat-icon width="48px" height="48px" style="font-size: 48px; margin-left: 50%; transform: translateX(-100%);">batch_prediction + </mat-icon> + <h3 class="card-title my-2">Rezultati treniranja</h3> + <p class="card-text"> + <a class="stretched-link" routerLink="my-predictors">Pregledajte</a> sve vaše trenirane modele, koristite ih da predvidite vrednosti za red ili skup podataka, ili ih obrišite. + </p> + </div> + </div> + </div> +</div>
\ No newline at end of file diff --git a/frontend/src/app/_pages/archive/archive.component.ts b/frontend/src/app/_pages/archive/archive.component.ts index e3ffd6e2..47f96218 100644 --- a/frontend/src/app/_pages/archive/archive.component.ts +++ b/frontend/src/app/_pages/archive/archive.component.ts @@ -1,4 +1,6 @@ import { Component, OnInit } from '@angular/core'; +import Dataset from 'src/app/_data/Dataset'; +import { DatasetsService } from 'src/app/_services/datasets.service'; @Component({ selector: 'app-archive', @@ -7,9 +9,17 @@ import { Component, OnInit } from '@angular/core'; }) export class ArchiveComponent implements OnInit { - constructor() { } + publicDatasets: Dataset[] = []; + + constructor(private datasetsService: DatasetsService) { } ngOnInit(): void { + this.datasetsService.getPublicDatasets().subscribe((datasets) => { + this.publicDatasets = datasets; + this.publicDatasets.forEach((element, index) => { + this.publicDatasets[index] = (<Dataset>element); + }) + }); } } diff --git a/frontend/src/app/_pages/home/home.component.html b/frontend/src/app/_pages/home/home.component.html index b673d074..f73e7571 100644 --- a/frontend/src/app/_pages/home/home.component.html +++ b/frontend/src/app/_pages/home/home.component.html @@ -3,7 +3,7 @@ <img src="../../../assets/images/logo_igrannonica_temp.png" class="bi me-2" width="256" height="256" role="img"> </div> - <div *ngIf="shared.loggedIn" class="d-flex flex-column align-items-center"> + <div class="d-flex flex-column align-items-center"> <div class="rounded-pill bg-light px-4 m-4 shadow-accent position-relative"> <a routerLink="experiment" class="stretched-link"> @@ -13,62 +13,7 @@ </a> </div> - <div id="cards" class="row align-items-view align-items-stretch justify-content-center"> - <div class="card shadowed bg-light text-light col-3 m-3" style="width: 18rem;"> - <div class="card-body"> - <mat-icon width="48px" height="48px" style="font-size: 48px; margin-left: 50%; transform: translateX(-100%);">storage</mat-icon> - <h3 class="card-title my-2">Moji izvori podataka</h3> - <p class="card-text"> - <a class="stretched-link" routerLink="my-datasets">Preuredite</a> vaše izvore podataka, ili dodajte novi. - </p> - </div> - </div> - <div class="card shadowed bg-light text-light col-3 m-3" style="width: 18rem;"> - <div class="card-body"> - <mat-icon width="48px" height="48px" style="font-size: 48px; margin-left: 50%; transform: translateX(-100%);">model_training - </mat-icon> - <h3 class="card-title my-2">Moji modeli</h3> - <p class="card-text"> - <a class="stretched-link" routerLink="my-models">Pregledajte</a> vaše modele, menjajte ih, napravite nove modele, ili ih obrišite. - </p> - </div> - </div> - <div class="card shadowed bg-light text-light col-3 m-3" style="width: 18rem;"> - <div class="card-body"> - <mat-icon width="48px" height="48px" style="font-size: 48px; margin-left: 50%; transform: translateX(-100%);">batch_prediction - </mat-icon> - <h3 class="card-title my-2">Rezultati treniranja</h3> - <p class="card-text"> - <a class="stretched-link" routerLink="my-predictors">Pregledajte</a> sve vaše trenirane modele, koristite ih da predvidite vrednosti za red ili skup podataka, ili ih obrišite. - </p> - </div> - </div> - </div> - </div> - <div *ngIf="publicDatasets.length > 0" class="my-5"> - <!--<div class="rounded-pill bg-light px-4 m-2 mt-5 text-center"> - <h2 class="my-2">Pogledajte javne izvore podataka!</h2> - </div> - <app-carousel [items]="publicDatasets" [type]="'Dataset'"> - </app-carousel>--> - <app-playlist [datasets]="publicDatasets"></app-playlist> - - <div class="rounded-pill bg-light p-4 m-2 text-center position-relative"> - <a routerLink="browse-datasets" class="stretched-link">Pogledaj sve javne izvore podataka...</a> - </div> </div> - - <!--<div *ngIf="publicPredictors.length > 0"> - <div class="rounded-pill bg-light px-4 m-2 mt-5 text-center"> - <h2 class="my-2">Iskoristite već trenirane modele!</h2> - </div> - <app-carousel [items]="publicPredictors" [type]="'Predictor'"> - </app-carousel> - - <div class="rounded-pill bg-light p-4 m-2 text-center position-relative"> - <a routerLink="browse-predictors" class="stretched-link">Pogledaj sve javne trenirane modele...</a> - </div> - </div>--> </div>
\ No newline at end of file diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts index bd9a3b0d..4a0d85c8 100644 --- a/frontend/src/app/app.component.ts +++ b/frontend/src/app/app.component.ts @@ -6,7 +6,6 @@ import { AuthService } from './_services/auth.service'; import { SignalRService } from './_services/signal-r.service'; import { HttpClient } from '@angular/common/http'; import Shared from './Shared'; -import { CookieService } from 'ngx-cookie-service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', diff --git a/frontend/src/styles/helper.css b/frontend/src/styles/helper.css index bcd02646..58f00c20 100644 --- a/frontend/src/styles/helper.css +++ b/frontend/src/styles/helper.css @@ -24,4 +24,21 @@ margin-top: 50%; margin-left: auto; transform: translateX(-50%); +} + +.footer-center { + position: relative; + height: 1rem; +} + +.footer-center>* { + position: fixed; + bottom: 8%; + left: 50%; + transform: translateX(-50%); +} + +.row-height { + white-space: nowrap; + height: 1rem; }
\ No newline at end of file diff --git a/frontend/src/styles/theme.css b/frontend/src/styles/theme.css index 3ef44e54..820f5a5a 100644 --- a/frontend/src/styles/theme.css +++ b/frontend/src/styles/theme.css @@ -1,7 +1,10 @@ :root { --ns-primary: #00a8e8; --ns-bg: #003459; - --ns-bg-transparent: rgba(0, 152, 189, 0.3) + --ns-bg-light-30: rgba(0, 152, 189, 0.3); + --ns-bg-dark-100: rgba(0, 65, 101, 1.0); + --ns-bg-dark-50: rgba(0, 65, 101, 0.5); + --offwhite: #ebe6e6; } body { @@ -10,9 +13,19 @@ body { } .bg-light { - background-color: var(--ns-bg-transparent) !important; + background-color: var(--ns-bg-light-30) !important; +} + +.ns-bg-dark-50 {} + +.ns-bg-dark-100 { + background-color: var(--ns-bg-dark-100) !important; } a { color: var(--ns-primary) !important; +} + +.text-offwhite { + color: var(--offwhite); }
\ No newline at end of file |