Preuredjivanje funkcionalnosti add-model komponente i dataset-load komponente.

3 files changed, 85 insertions, 8 deletions

diff --git a/frontend/src/app/_pages/add-model/add-model.component.css b/frontend/src/app/_pages/add-model/add-model.component.css
index 004b9cac..5184733d 100644
--- a/frontend/src/app/_pages/add-model/add-model.component.css
+++ b/frontend/src/app/_pages/add-model/add-model.component.css
@@ -9,9 +9,6 @@
     color: white;
 }
 
-#wrapper {
-    background-image: url('/assets/images/add_model_background.jpg');
-}
 #container {
     border-radius: 8px;
 }
\ No newline at end of file
diff --git a/frontend/src/app/_pages/add-model/add-model.component.html b/frontend/src/app/_pages/add-model/add-model.component.html
index 19d69148..5c4411b9 100644
--- a/frontend/src/app/_pages/add-model/add-model.component.html
+++ b/frontend/src/app/_pages/add-model/add-model.component.html
@@ -32,6 +32,37 @@
             <h2>Izvor podataka:</h2>
             <app-dataset-load id="dataset"></app-dataset-load>
         </div>
+
+        <div *ngIf="datasetLoadComponent" class="mt-2">
+            <div class="row">
+              <div class="col d-flex justify-content-center">
+                <h3>Izaberite ulazne kolone:</h3> 
+                <div id="divInputs" class="form-check">
+                  <br>
+                  <div *ngFor="let item of datasetLoadComponent.dataset.header; let i = index">  
+                    <input *ngIf="i == 0" class="form-check-input" type="checkbox" value="{{item}}" id="cb_{{item}}" name="cbs" checked>
+                    <input *ngIf="i != 0" class="form-check-input" type="checkbox" value="{{item}}" id="cb_{{item}}" name="cbs">&nbsp;
+                    <label class="form-check-label" for="cb_{{item}}">
+                      {{item}}
+                    </label>
+                  </div>
+                </div>
+              </div>
+              <div class="col d-flex justify-content-left">
+                <h3>Izaberite izlaznu kolonu:</h3>
+                <div id="divOutputs" class="form-check">
+                  <br>
+                  <div *ngFor="let item of datasetLoadComponent.dataset.header; let i = index">
+                    <input *ngIf="i == 0" class="form-check-input" type="radio" value="{{item}}" id="rb_{{item}}" name="rbs" checked>
+                    <input *ngIf="i != 0" class="form-check-input" type="radio" value="{{item}}" id="rb_{{item}}" name="rbs">&nbsp;
+                    <label class="form-check-label" for="rb_{{item}}">
+                      {{item}}
+                    </label>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
         
         <h2>Parametri treniranja:</h2>
 
@@ -109,7 +140,7 @@
 
         <div class="row mt-5">
             <div class="col-2">
-                <label for="inputNeurons" class="col-form-label">Broj ulaznih neurona: </label>
+                <label for="inputNeurons" class="col-form-label">Broj ulaznih neurona: </label> <!--UMESTO OVOGA IDE NASUMICAN REDOSLED? YES/NO-->
                 <input type="number" min="1" class="form-control" name="inputNeurons" [(ngModel)]="newModel.inputNeurons">
             </div>
             <div class="col-2">
diff --git a/frontend/src/app/_pages/add-model/add-model.component.ts b/frontend/src/app/_pages/add-model/add-model.component.ts
index 3cb47d61..3c8c32c6 100644
--- a/frontend/src/app/_pages/add-model/add-model.component.ts
+++ b/frontend/src/app/_pages/add-model/add-model.component.ts
@@ -1,6 +1,9 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import Model from 'src/app/_data/Model';
 import { ANNType, Encoding, ActivationFunction, LossFunction, Optimizer } from 'src/app/_data/Model';
+import { DatasetLoadComponent } from 'src/app/_elements/dataset-load/dataset-load.component';
+import { ModelsService } from 'src/app/_services/models.service';
+
 
 @Component({
   selector: 'app-add-model',
@@ -9,7 +12,9 @@ import { ANNType, Encoding, ActivationFunction, LossFunction, Optimizer } from '
 })
 export class AddModelComponent implements OnInit {
 
-  newModel: Model
+  @ViewChild(DatasetLoadComponent) datasetLoadComponent?: DatasetLoadComponent;
+
+  newModel: Model;
 
   ANNType = ANNType;
   Encoding = Encoding;
@@ -18,7 +23,7 @@ export class AddModelComponent implements OnInit {
   Optimizer = Optimizer;
   Object = Object;
 
-  constructor() {
+  constructor(private models: ModelsService) {
     this.newModel = new Model();
   }
 
@@ -26,7 +31,51 @@ export class AddModelComponent implements OnInit {
   }
 
   addModel() {
-    //TODO
+    this.getCheckedInputCols();
+    this.getCheckedOutputCol();
+    if (this.validationInputsOutput()) 
+      this.models.addModel(this.newModel).subscribe((response) => {
+        console.log(response);
+      });
+  }
+
+  getCheckedInputCols() {
+    this.newModel.inputColumns = [];
+    let checkboxes = document.getElementsByName("cbs");
+
+    for (let i = 0; i < checkboxes.length; i++) {
+      let thatCb = <HTMLInputElement>checkboxes[i];
+      if (thatCb.checked)
+        this.newModel.inputColumns.push(thatCb.value);
+    }
+    //console.log(this.checkedInputCols);
+  }
+  getCheckedOutputCol() {
+    this.newModel.columnToPredict = '';
+    let radiobuttons = document.getElementsByName("rbs");
+
+    for (let i = 0; i < radiobuttons.length; i++) {
+      let thatRb = <HTMLInputElement>radiobuttons[i];
+      if (thatRb.checked) {
+        this.newModel.columnToPredict = thatRb.value;
+        break; 
+      }
+    }
+    //console.log(this.checkedOutputCol);
+  }
+  validationInputsOutput() : boolean {
+    if (this.newModel.inputColumns.length == 0) {
+      alert("Molimo Vas da izaberete ulaznu kolonu/kolone za mrežu.")
+      return false;
+    } 
+    for (let i = 0; i < this.newModel.inputColumns.length; i++) {  
+      if (this.newModel.inputColumns[i] == this.newModel.columnToPredict) {
+        let colName = this.newModel.columnToPredict;
+        alert("Izabrali ste istu kolonu (" + colName + ") kao ulaznu i izlaznu iz mreže. Korigujte izbor.");
+        return false;
+      }
+    }
+    return true;
   }
 
 }