Doterao stil za playlist komponentu, i tabelu podataka. Dodao arhivu u navbar i obrisao neke stare rute.

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