Dodao logo, promenio vecinu dugmica u mat-button stil.

9 files changed, 116 insertions, 68 deletions

diff --git a/frontend/src/app/_data/Predictor.ts b/frontend/src/app/_data/Predictor.ts
index 77d9498b..05b993f1 100644
--- a/frontend/src/app/_data/Predictor.ts
+++ b/frontend/src/app/_data/Predictor.ts
@@ -1,8 +1,9 @@
-export default class Dataset {
+export default class Predictor {
     constructor(
-        public name: string = 'Novi izvor podataka',
+        public name: string = 'Novi prediktor',
         public description: string = '',
-        public columns: string[] = [],
+        public inputs: string[] = [],
+        public output: string = '',
         public isPublic: boolean = false,
         public accessibleByLink: boolean = false,
         public dateCreated: Date = new Date()
diff --git a/frontend/src/app/_elements/carousel/carousel.component.html b/frontend/src/app/_elements/carousel/carousel.component.html
index ea522626..755899a7 100644
--- a/frontend/src/app/_elements/carousel/carousel.component.html
+++ b/frontend/src/app/_elements/carousel/carousel.component.html
@@ -1,12 +1,14 @@
-<div class="d-flex flex-row">
-    <div class="mx-2" *ngFor="let item of items" [ngSwitch]="item.constructor.name">
-        <ng-template ngSwitchCase="Dataset">
-            <app-item-dataset [dataset]="item">
-            </app-item-dataset>
-        </ng-template>
-        <ng-template ngSwitchCase="Predictor">
-            <app-item-predictor>
-            </app-item-predictor>
-        </ng-template>
+<div class="container">
+    <div class="row d-flex align-items-stretch flex-row mx-5 align-items-stretch">
+        <div class="col my-1" *ngFor=" let item of items" [ngSwitch]="item.constructor.name">
+            <ng-template ngSwitchCase="Dataset">
+                <app-item-dataset [dataset]="item">
+                </app-item-dataset>
+            </ng-template>
+            <ng-template ngSwitchCase="Predictor">
+                <app-item-predictor [predictor]="item">
+                </app-item-predictor>
+            </ng-template>
+        </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/item-dataset/item-dataset.component.html b/frontend/src/app/_elements/item-dataset/item-dataset.component.html
index c1dc2609..cf39a125 100644
--- a/frontend/src/app/_elements/item-dataset/item-dataset.component.html
+++ b/frontend/src/app/_elements/item-dataset/item-dataset.component.html
@@ -1,4 +1,4 @@
-<div class="card" style="width: 18rem;">
+<div class="card" style="min-width: 12rem;">
     <div class="card-header">
         {{dataset.name}}
     </div>
diff --git a/frontend/src/app/_elements/item-predictor/item-predictor.component.html b/frontend/src/app/_elements/item-predictor/item-predictor.component.html
index cbd53fc2..92d747e2 100644
--- a/frontend/src/app/_elements/item-predictor/item-predictor.component.html
+++ b/frontend/src/app/_elements/item-predictor/item-predictor.component.html
@@ -1 +1,24 @@
-<p>item-predictor works!</p>
+<div class="card" style="min-width: 12rem;">
+    <div class="card-header">
+        {{predictor.name}}
+    </div>
+    <div class="card-body">
+        <p class="card-text">
+            {{predictor.description}}
+        </p>
+        <div class="d-flex flex-column align-items-center">
+            <table class="table table-bordered table-sm">
+                <thead>
+                    <th class="text-center" *ngFor="let column of predictor.inputs">{{column}}</th>
+                </thead>
+            </table>
+            <mat-icon>arrow_downward</mat-icon>
+            <p>
+                {{predictor.output}}
+            </p>
+        </div>
+    </div>
+    <div class="card-footer text-center">
+        <a routerLink="predict" mat-raised-button color="primary">Iskoristi</a>
+    </div>
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/item-predictor/item-predictor.component.ts b/frontend/src/app/_elements/item-predictor/item-predictor.component.ts
index fe65ccfd..cc782f45 100644
--- a/frontend/src/app/_elements/item-predictor/item-predictor.component.ts
+++ b/frontend/src/app/_elements/item-predictor/item-predictor.component.ts
@@ -1,4 +1,5 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
+import Predictor from 'src/app/_data/Predictor';
 
 @Component({
   selector: 'app-item-predictor',
@@ -7,6 +8,8 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ItemPredictorComponent implements OnInit {
 
+  @Input() predictor: Predictor = new Predictor();
+
   constructor() { }
 
   ngOnInit(): void {
diff --git a/frontend/src/app/_elements/navbar/navbar.component.html b/frontend/src/app/_elements/navbar/navbar.component.html
index 116694b4..b9c450af 100644
--- a/frontend/src/app/_elements/navbar/navbar.component.html
+++ b/frontend/src/app/_elements/navbar/navbar.component.html
@@ -1,10 +1,8 @@
 <header class="sticky-top p-3 bg-dark text-white">
     <div class="container">
         <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
-            <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
-                <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap">
-                    <use xlink:href="#bootstrap"></use>
-                </svg>
+            <a routerLink="" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
+                <img src="../../../assets/svg/logo_no_text.svg" class="bi me-2" width="64" height="40">
             </a>
 
             <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
@@ -34,11 +32,12 @@
                 </ul>
             </div>
             <div *ngIf="!shared.loggedIn" class="dropdown text-end">
-                <button type="button" class="btn btn-primary mx-2" data-bs-toggle="modal"
+                <button type="button" mat-raised-button color="primary" class="mx-2" data-bs-toggle="modal"
                     data-bs-target="#modalForLogin">
                     Prijavi se
                 </button>
-                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalForRegister">
+                <button type="button" mat-raised-button color="primary" data-bs-toggle="modal"
+                    data-bs-target="#modalForRegister">
                     Registruj se
                 </button>
             </div>
diff --git a/frontend/src/app/_pages/home/home.component.html b/frontend/src/app/_pages/home/home.component.html
index 7731054c..374cb324 100644
--- a/frontend/src/app/_pages/home/home.component.html
+++ b/frontend/src/app/_pages/home/home.component.html
@@ -1,51 +1,53 @@
-<div>
-    <div class="d-flex flex-column align-items-center">
-        <div *ngIf="shared.loggedIn" class="d-flex flex-column align-items-center">
-            <h2 class="my-4">Započnite sa treniranjem!</h2>
-            <div id="cards" class="d-flex flex-row justify-content-center align-items-start">
-                <div class="card shadow" 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 class="d-flex flex-column align-items-center">
+    <img src="../../../assets/svg/logo.svg" class="bi me-2" width="256" height="256" role="img">
+    <div *ngIf="shared.loggedIn" class="d-flex flex-column align-items-center">
+        <h2 class="my-4">Započnite sa treniranjem!</h2>
+        <div id="cards" class="row align-items-center justify-content-center">
+            <div class="card shadow col-3 m-1" 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 class="card mx-3 shadow" 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 shadow col-3 m-1" 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 class="card shadow" 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 class="card shadow col-3 m-1" 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>
-        <h2 class="my-4">Pogledajte javne projekte!</h2>
-        <app-carousel [items]="publicDatasets">
-        </app-carousel>
+
     </div>
+    <h2 class="my-4">Pogledajte javne izvore podataka!</h2>
+    <app-carousel [items]="publicDatasets">
+    </app-carousel>
+    <h2 class="my-4">Iskoristite već trenirane modele!</h2>
+    <app-carousel [items]="publicPredictors">
+    </app-carousel>
 </div>
\ No newline at end of file
diff --git a/frontend/src/app/_pages/home/home.component.ts b/frontend/src/app/_pages/home/home.component.ts
index eb9adf27..7e4471e8 100644
--- a/frontend/src/app/_pages/home/home.component.ts
+++ b/frontend/src/app/_pages/home/home.component.ts
@@ -12,14 +12,30 @@ import shared from 'src/app/Shared';
 export class HomeComponent implements OnInit {
 
   publicDatasets: Dataset[];
+  publicPredictors: Predictor[];
 
   shared = shared;
 
   constructor() {
     this.publicDatasets = [
-      new Dataset('Dataset1', 'Lorem ipsum dolor sir amet', ['kolona1', 'kolona2', 'kolona3']),
+      new Dataset('Titanik', 'Titanik', ['Kolona1', 'Kolona2', 'Ime', 'OsobaJePreživela']),
       new Dataset('Drugi Dataset', 'Lorem ipsum dolor sir amet', ['jabuka', 'kruska', 'jagoda']),
       new Dataset('Dataset III', 'Kratak opis izvora podataka', ['c1', 'c2', 'c3', 'c4', 'c5']),
+      new Dataset('Drugi Dataset', 'Lorem ipsum dolor sir amet', ['jabuka', 'kruska', 'jagoda']),
+      new Dataset('Dataset III', 'Kratak opis izvora podataka', ['c1', 'c2', 'c3', 'c4', 'c5']),
+      new Dataset('Drugi Dataset', 'Lorem ipsum dolor sir amet', ['jabuka', 'kruska', 'jagoda']),
+      new Dataset('Dataset III', 'Kratak opis izvora podataka', ['c1', 'c2', 'c3', 'c4', 'c5']),
+      new Dataset('Dataset III', 'Kratak opis izvora podataka', ['c1', 'c2', 'c3', 'c4', 'c5'])
+    ]
+    this.publicPredictors = [
+      new Predictor('Preživeli', 'Za uneto ime osobe, predvidja da li je ta osoba preživela ili ne.', ['Ime'], 'OsobaJePreživela'),
+      new Predictor('Drugi model', 'Lorem ipsum dolor sir amet', ['kruska'], 'jagoda'),
+      new Predictor('Treći model', 'Kratak opis modela', ['c1', 'c2', 'c3'], 'c5'),
+      new Predictor('Drugi model', 'Lorem ipsum dolor sir amet', ['kruska'], 'jagoda'),
+      new Predictor('Treći model', 'Kratak opis modela', ['c1', 'c2', 'c3'], 'c5'),
+      new Predictor('Drugi model', 'Lorem ipsum dolor sir amet', ['kruska'], 'jagoda'),
+      new Predictor('Treći model', 'Kratak opis modela', ['c1', 'c2', 'c3'], 'c5'),
+      new Predictor('Treći model', 'Kratak opis modela', ['c1', 'c2', 'c3'], 'c5')
     ]
   }
 
diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts
index a42257df..ee43b522 100644
--- a/frontend/src/app/app-routing.module.ts
+++ b/frontend/src/app/app-routing.module.ts
@@ -11,6 +11,7 @@ import { BrowsePredictorsComponent } from './_pages/browse-predictors/browse-pre
 import { BrowseDatasetsComponent } from './_pages/browse-datasets/browse-datasets.component';
 import { SettingsComponent } from './_pages/settings/settings.component';
 import { ProfileComponent } from './_pages/profile/profile.component';
+import { PredictComponent } from './_pages/predict/predict.component';
 
 const routes: Routes = [
   { path: '', component: HomeComponent },
@@ -21,7 +22,8 @@ const routes: Routes = [
   { path: 'settings', component: SettingsComponent, canActivate: [AuthGuardService] },
   { path: 'profile', component: ProfileComponent, canActivate: [AuthGuardService] },
   { path: 'browse-datasets', component: BrowseDatasetsComponent },
-  { path: 'browse-predictors', component: BrowsePredictorsComponent }
+  { path: 'browse-predictors', component: BrowsePredictorsComponent },
+  { path: 'predict', component: PredictComponent }
 ];
 
 @NgModule({