From 9d8640ec5a716c3e7b5bd036739d857250047f0b Mon Sep 17 00:00:00 2001
From: Danijel Andjelkovic <adanijel99@gmail.com>
Date: Tue, 15 Mar 2022 18:50:10 +0100
Subject: Dodao logo, promenio vecinu dugmica u mat-button stil.

---
 .../app/_elements/carousel/carousel.component.html | 22 ++++++++++---------
 .../item-dataset/item-dataset.component.html       |  2 +-
 .../item-predictor/item-predictor.component.html   | 25 +++++++++++++++++++++-
 .../item-predictor/item-predictor.component.ts     |  5 ++++-
 .../src/app/_elements/navbar/navbar.component.html | 11 +++++-----
 5 files changed, 46 insertions(+), 19 deletions(-)

(limited to 'frontend/src/app/_elements')

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>
-- 
cgit v1.2.3