From 317071919945434f1186ce908f0295ec180c178e Mon Sep 17 00:00:00 2001
From: "DESKTOP-S0O2C44\\ROG" <ivan996sk@gmail.com>
Date: Wed, 30 Mar 2022 23:55:24 +0200
Subject: Odradjena predict stranica i poslati inputi na back (post -
 usePredictor) #53 #66

---
 .../item-predictor/item-predictor.component.ts     |  6 ++-
 .../src/app/_pages/predict/predict.component.html  | 58 +++++++++++++++-------
 .../src/app/_pages/predict/predict.component.ts    | 20 +++++++-
 frontend/src/app/_services/predictors.service.ts   |  6 +++
 frontend/src/app/app-routing.module.ts             |  2 +-
 5 files changed, 69 insertions(+), 23 deletions(-)

(limited to 'frontend/src/app')

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 d864480a..b6b5c9db 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, Input, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
 import Predictor from 'src/app/_data/Predictor';
 
 @Component({
@@ -10,13 +11,14 @@ export class ItemPredictorComponent implements OnInit {
 
   @Input() predictor: Predictor = new Predictor();
 
-  constructor() { }
+  constructor(private router: Router) { }
 
   ngOnInit(): void {
   }
 
   openPredictor() {
-    console.log("iskoristi")
+    this.router.navigate(['predict/'+ '6244958a26cf2385bc29ba2c']);
+    //this.router.navigate(['predict'+this.predictor._id]);
     }
 
 }
diff --git a/frontend/src/app/_pages/predict/predict.component.html b/frontend/src/app/_pages/predict/predict.component.html
index 67d047b7..fe17c96d 100644
--- a/frontend/src/app/_pages/predict/predict.component.html
+++ b/frontend/src/app/_pages/predict/predict.component.html
@@ -9,52 +9,72 @@
         
         <br>
         
-        <div class="form-group row mt-3 mb-2 d-flex justify-content-center">
+        <div class="form-group row mt-3 mb-2 d-flex justify-content-left">
             <!--justify-content-center-->
             <h2> Izabrani prediktor: </h2>
-            <div class="col-3">
-                <label for="name" class="col-form-label">Naziv prediktora:</label>
-                <input type="text" class="form-control" name="name" [(ngModel)]="predictor.name">
+            <div class="col-10">
+                <label for="output" class="col-sm-5 col-form-label">Naziv prediktora: <b>{{predictor.name}}</b></label>
             </div>
-            <div class="col-5">
-                <label for="desc" class="col-sm-2 col-form-label">Opis:</label>
-                <div>
-                    <textarea class="form-control" name="desc" rows="3" [(ngModel)]="predictor.description"></textarea>
-                </div>
+            <div>
+                <label for="output" class="col-sm-5 col-form-label">Opis prediktora: <b>{{predictor.description}}</b></label>
             </div>
         </div>
 
-        
+        <br>
+        <div >
+            <!--input -->
+            <h3>Popunite ulazne kolone:</h3>
+            <div id="divInputs" class="form-check mt-2">
+                <div *ngIf="predictor" class="form-group row mt-3 mb-2 d-flex justify-content-left">
+                    <div *ngFor="let input of predictor.inputs; let i = index">
+                        <label for="{{input}}" class="col-sm-2 col-form-label"><b>{{input}}</b></label>
+                        <input name="{{input}}"  type="text"  [(ngModel)]="inputs[i]" >
+
+                    </div>
+                    
+                </div>
+            </div>
+           
+            
 
-        <div class="col-3 mt-2">
+        </div>
+        <div>
+            <label for="output" class="col-sm-2 col-form-label">Izlaz: <b>{{predictor.output}}</b></label>
+        </div>
+        <br>
+        <br>
+        <br>
+        <br>
+        <br>
+
+        <div class="col-5 mt-2">
             <label for="type" class="form-check-label">Da li je prediktor javan?</label>
             <input class="mx-3 form-check-input" type="checkbox" [(ngModel)]="predictor.isPublic"
                 type="checkbox" value="" >
         </div>
-        <div class="col-3 mt-2">
+        <div class="col-5 mt-2">
             <label for="type" class="form-check-label">Da li je dostupan za deljenje?</label>
             <input class="mx-3 form-check-input" type="checkbox" [(ngModel)]="predictor.accessibleByLink"
                 type="checkbox" value="" >
         </div>
+        <br>
         <div class="col-2">
-            <label for="dateCreated" class="col-form-label">Datum:</label> &nbsp;&nbsp;
+            <label for="dateCreated" class="col-form-label">Datum:</label> 
             <input type="text" class="form-control-plaintext" id="dateCreated" placeholder="--/--/--"
                 value="{{predictor.dateCreated | date: 'dd/MM/yyyy'}}" readonly>
         </div>
 
-        <!--
+        
         <br><br>
         <div class="form-group row mt-5 mb-3">
             <div class="col"></div>
             <button class="btn btn-lg col-4" style="background-color:#003459; color:white;"
-                (click)="addModel();">Sačuvaj model</button>
-            <div class="col"></div>
-            <button class="btn btn-lg col-4" style="background-color:#003459; color:white;"
-                (click)="trainModel();">Treniraj model</button>
+                (click)="usePredictor();">Iskoristi prediktor</button>
             <div class="col"></div>
+            
         </div>
 
-        -->
+        
         
     </div>
 </div>
\ No newline at end of file
diff --git a/frontend/src/app/_pages/predict/predict.component.ts b/frontend/src/app/_pages/predict/predict.component.ts
index d5cb22bd..3f431fff 100644
--- a/frontend/src/app/_pages/predict/predict.component.ts
+++ b/frontend/src/app/_pages/predict/predict.component.ts
@@ -1,5 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
 import Predictor from 'src/app/_data/Predictor';
+import { PredictorsService } from 'src/app/_services/predictors.service';
 
 @Component({
   selector: 'app-predict',
@@ -8,12 +10,28 @@ import Predictor from 'src/app/_data/Predictor';
 })
 export class PredictComponent implements OnInit {
 
+  inputs : String[] = [];
+
   predictor:Predictor;
-  constructor() {
+  constructor(private predictS : PredictorsService, private route: ActivatedRoute) {
     this.predictor = new Predictor();
    }
 
   ngOnInit(): void {
+    this.route.params.subscribe(url => {
+      this.predictS.getPredictor(url["id"]).subscribe(p => {
+      
+        this.predictor = p;
+        console.log(this.predictor);
+      })
+    });
   }
 
+  usePredictor(): void{ 
+    this.predictS.usePredictor(this.predictor, this.inputs).subscribe(p => {
+      
+      alert("Uspesno ste poslali preditor!");
+    })
+    console.log(this.inputs);
+  }
 }
diff --git a/frontend/src/app/_services/predictors.service.ts b/frontend/src/app/_services/predictors.service.ts
index a2dc012f..54ae5694 100644
--- a/frontend/src/app/_services/predictors.service.ts
+++ b/frontend/src/app/_services/predictors.service.ts
@@ -17,5 +17,11 @@ export class PredictorsService {
   getPublicPredictors(): Observable<Predictor[]> {
     return this.http.get<Predictor[]>(`${API_SETTINGS.apiURL}/predictor/publicpredictors`, { headers: this.authService.authHeader() });
   }
+  getPredictor(id : String): Observable<Predictor> {
+    return this.http.get<Predictor>(`${API_SETTINGS.apiURL}/predictor/getpredictor/`+ id, { headers: this.authService.authHeader() });
+  }
 
+  usePredictor(predictor: Predictor, inputs : String[]) {
+    return this.http.post(`${API_SETTINGS.apiURL}/predictor/usepredictor/` + predictor._id, inputs, { headers: this.authService.authHeader() });
+  }
 }
diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts
index 1c368318..fd827ac9 100644
--- a/frontend/src/app/app-routing.module.ts
+++ b/frontend/src/app/app-routing.module.ts
@@ -24,7 +24,7 @@ const routes: Routes = [
   { path: 'profile', component: ProfileComponent, canActivate: [AuthGuardService], data: { title: 'Profil' } },
   { path: 'browse-datasets', component: FilterDatasetsComponent, data: { title: 'Javni izvori podataka' } },
   { path: 'browse-predictors', component: BrowsePredictorsComponent, data: { title: 'Javni trenirani modeli' } },
-  { path: 'predict', component: PredictComponent, data: { title: 'Predvidi vrednosti' } }
+  { path: 'predict/:id', component: PredictComponent, data: { title: 'Predvidi vrednosti' } }
 ];
 
 @NgModule({
-- 
cgit v1.2.3