Izmenjen izgled item-predictor i my-predictors, dodata funkcija za brisanje prediktora u predictors.component.ts.

3 files changed, 59 insertions, 41 deletions

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 7ae26fd3..3199dcc8 100644
--- a/frontend/src/app/_elements/item-predictor/item-predictor.component.html
+++ b/frontend/src/app/_elements/item-predictor/item-predictor.component.html
@@ -1,26 +1,35 @@
 <div class="card" style="min-width: 12rem;">
-    <div class="card-header">
-        {{predictor.name}}
+    <div class="card-header d-flex mb-2 justify-content-" style="padding: 0;margin: 0;">
+    
+        <div class=" p-2 float-left "><b   style="color: gray;">Prediktor</b></div> 
+        
     </div>
-    <div class="card-body">
+    <div class="card-body overflow-hidden">
+        <b style="color: gray;">Opis</b><hr  style="width: 20%;">
         <p class="card-text">
-            {{predictor.description}}
+           {{predictor.description}}
         </p>
-        <div class="d-flex flex-column align-items-center">
-            <table class="table table-bordered table-sm">
+        
+        <b style="color: gray;">Ulazne kolone</b>
+        <div style="overflow: scroll; overflow-y: hidden;">
+            
+            <table class="table table-bordered table-md" >
                 <thead>
-                    <th class="text-center" *ngFor="let column of predictor.inputs">{{column}}</th>
+                    <th scope="col" *ngFor="let column of predictor.inputs" >{{column}}</th> 
                 </thead>
             </table>
-            <mat-icon>arrow_downward</mat-icon>
-            <p>
-                {{predictor.output}}
-            </p>
+        </div>
+        <b style="color: gray;">Izlazna kolona: </b><b>{{predictor.output}}</b>
+        <hr>
+        <div>
+            <table>
+                <tr><td><span class="material-icons">calendar_today</span></td><td><span style="color: grey;">   <b> Kreirano</b></span></td><td>{{predictor.dateCreated |date}}</td></tr> 
+            </table> 
         </div>
     </div>
     <div class="card-footer text-center">
-        <button class="btn btn-lg col-4" style="background-color:#003459; color:white;"
+        <button class="btn btn-md col-4" style="background-color:#003459; color:white;"
         (click)="openPredictor();">Iskoristi</button>
-        <!--<a routerLink="/predict" mat-raised-button color="primary">Iskoristi</a>-->
+       
     </div>
 </div>
\ No newline at end of file
diff --git a/frontend/src/app/_pages/my-predictors/my-predictors.component.html b/frontend/src/app/_pages/my-predictors/my-predictors.component.html
index d38f93e4..31fa786c 100644
--- a/frontend/src/app/_pages/my-predictors/my-predictors.component.html
+++ b/frontend/src/app/_pages/my-predictors/my-predictors.component.html
@@ -1,16 +1,23 @@
 <div id="header">
     <h1>Trenirani modeli</h1>
 </div>
-<div id="container" style="background-color:rgba(255, 255, 255, 0.8);">
-<div class="row" *ngFor="let predictor of predictors">
-    <div class="left">
-        <app-item-predictor [predictor]="predictor"></app-item-predictor>
-    </div>
-    <div>
-        <button (click)="delete(predictor)" mat-raised-button color="warn" style="min-width: 15rem;float: right" ><mat-icon>delete</mat-icon></button>
-    </div>
-    
+<div id="wrapper">
+<div id="container" class="container p-5" style="background-color:rgba(255, 255, 255, 0.8); min-height: 100%;">
+    <div class="row mt-3 mb-2 d-flex justify-content-center">
+        
+        <div class="col-sm-6" style="margin-bottom: 10px;">
+        </div>
+        <div class="row">
+            <div class="col-sm-4" style="margin-bottom: 10px;" *ngFor="let predictor of predictors">
+                <app-item-predictor [predictor]="predictor"></app-item-predictor>
+                <div>
+                    <button (click)="deleteThisPredictor(predictor)" mat-raised-button color="warn" style="min-width: 10rem;float: right" ><mat-icon>delete</mat-icon></button>
+                </div>
+            </div>
+        </div>
+</div>
 </div>
-
 </div>
 
+
+
diff --git a/frontend/src/app/_pages/my-predictors/my-predictors.component.ts b/frontend/src/app/_pages/my-predictors/my-predictors.component.ts
index 17c496fd..4dc5300d 100644
--- a/frontend/src/app/_pages/my-predictors/my-predictors.component.ts
+++ b/frontend/src/app/_pages/my-predictors/my-predictors.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import Predictor from 'src/app/_data/Predictor';
 import { PredictorsService } from 'src/app/_services/predictors.service';
-
+import shared from 'src/app/Shared';
 @Component({
   selector: 'app-my-predictors',
   templateUrl: './my-predictors.component.html',
@@ -12,28 +12,30 @@ export class MyPredictorsComponent implements OnInit {
   constructor(private predictorsS : PredictorsService) {
   }
   ngOnInit(): void {
-    this.getAllMyPredictors();
-
+    this.predictorsS.getMyPredictors().subscribe((response) => {
+      this.predictors = response;
+    }, (error) => {
+      if (error.error == "Predictor with...") {
+        shared.openDialog("Greska", "Greska");
+      }
+    });
   }
 
-  delete(predictor: Predictor){
-    if(window.confirm("IZABRANI MODEL ĆE BITI IZBRISAN"))
-      {
-      this.predictorsS.deletePredictor(predictor).subscribe((response) => {
-        this.getAllMyPredictors();
-      }, (error) =>{
-          if (error.error == "Predictor with name = {name} deleted") {
-            alert("Greška pri brisanju modela!");
-          }
-        });
-    }
-    
-    
+  deleteThisPredictor(predictor: Predictor): void{
+    shared.openYesNoDialog('Brisanje prediktora','Da li ste sigurni da želite da obrišete prediktor?',() => {
+    this.predictorsS.deletePredictor(predictor).subscribe((response) => {
+      this.getAllMyPredictors();
+    }, (error) =>{
+        if (error.error == "Predictor with name = {name} deleted") {
+          shared.openDialog("Obaveštenje", "Greška prilikom brisanja prediktora.");
+        }
+      });
+    });
   }
 
   getAllMyPredictors(): void{
-    this.predictorsS.getMyPredictors().subscribe(m => {
-      this.predictors = m;
+    this.predictorsS.getMyPredictors().subscribe(p => {
+      this.predictors = p;
     });
   }