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

10 files changed, 143 insertions, 85 deletions

diff --git a/frontend/src/app/_data/Model.ts b/frontend/src/app/_data/Model.ts
index 1a120ca7..43342fb0 100644
--- a/frontend/src/app/_data/Model.ts
+++ b/frontend/src/app/_data/Model.ts
@@ -7,8 +7,8 @@ export default class Model {
         public datasetId?: number,
 
         // Test set settings
-        public inputColumns: number[] = [0],
-        public columnToPredict: number = 1,
+        public inputColumns: string[] = [],
+        public columnToPredict: string = '',
         public randomOrder: boolean = true,
         public randomTestSet: boolean = true,
         public randomTestSetDistribution: number = 0.10, //0.1-0.9 (10% - 90%)
diff --git a/frontend/src/app/_elements/dataset-load/dataset-load.component.html b/frontend/src/app/_elements/dataset-load/dataset-load.component.html
index 16830e11..2a611a96 100644
--- a/frontend/src/app/_elements/dataset-load/dataset-load.component.html
+++ b/frontend/src/app/_elements/dataset-load/dataset-load.component.html
@@ -1,5 +1,16 @@
 <div>
 
+  <div class="mb-4">
+    <label for="name" class="col-form-label">Naziv dataseta:</label>
+    <input type="text" class="form-control" name="name" placeholder="Naziv..."
+        [(ngModel)]="dataset.name">
+  </div>
+  <label for="desc" class="col-sm-2 col-form-label">Opis:</label>
+  <div>
+      <textarea class="form-control" name="desc" rows="3" [(ngModel)]="dataset.description"></textarea>
+  </div>
+
+
   <div class="d-flex justify-content-center">
     <input style="display: inline-block; width:350px;" list=delimiterOptions
     placeholder="Izaberite ili ukucajte delimiter za .csv fajl" class="form-control" [(ngModel)]="delimiter"
@@ -41,35 +52,6 @@
     {{rowsNumber}} x {{colsNumber}}
   </div>
 
-  <div *ngIf="csvRecords.length > 0" 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 csvRecords[0]; 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 csvRecords[0]; 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>
+  
 
 </div>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/dataset-load/dataset-load.component.ts b/frontend/src/app/_elements/dataset-load/dataset-load.component.ts
index c772dc35..d9d045ce 100644
--- a/frontend/src/app/_elements/dataset-load/dataset-load.component.ts
+++ b/frontend/src/app/_elements/dataset-load/dataset-load.component.ts
@@ -1,5 +1,6 @@
 import { Component, ViewChild } from '@angular/core';
 import { NgxCsvParser, NgxCSVParserError } from 'ngx-csv-parser';
+import Dataset from 'src/app/_data/Dataset';
 
 @Component({
   selector: 'app-dataset-load',
@@ -23,7 +24,10 @@ export class DatasetLoadComponent {
   checkedInputCols: Array<string> = [];
   checkedOutputCol: string = '';
 
+  dataset: Dataset;
+
   constructor(private ngxCsvParser: NgxCsvParser) {
+    this.dataset = new Dataset();
   }
 
   @ViewChild('fileImportInput', { static: false }) fileImportInput: any;
@@ -49,49 +53,12 @@ export class DatasetLoadComponent {
         else 
           this.rowsNumber = this.csvRecords.length;
         this.colsNumber = this.csvRecords[0].length;
+
+        this.dataset.header = this.csvRecords[0];
       }
     }, (error: NgxCSVParserError) => {
       console.log('Error', error);
     });
   }
 
-  getCheckedInputCols() : Array<string> {
-    this.checkedInputCols = new Array<string>();
-    let checkboxes = document.getElementsByName("cbs");
-
-    for (let i = 0; i < checkboxes.length; i++) {
-      let thatCb = <HTMLInputElement>checkboxes[i];
-      if (thatCb.checked)
-        this.checkedInputCols.push(thatCb.value);
-    }
-    //console.log(this.checkedInputCols);
-    return this.checkedInputCols;
-  }
-  getCheckedOutputCol() : string {
-    this.checkedOutputCol = '';
-    let radiobuttons = document.getElementsByName("rbs");
-
-    for (let i = 0; i < radiobuttons.length; i++) {
-      let thatRb = <HTMLInputElement>radiobuttons[i];
-      if (thatRb.checked) {
-        this.checkedOutputCol = thatRb.value;
-        break; 
-      }
-    }
-    //console.log(this.checkedOutputCol);
-    return this.checkedOutputCol;
-  }
-  validationInputsOutput() {
-    if (this.checkedInputCols.length == 0) {
-      alert("Molimo Vas da izaberete ulaznu kolonu/kolone za mrežu.")
-      return;
-    } 
-    for (let i = 0; i < this.checkedInputCols.length; i++) {  
-      if (this.checkedInputCols[i] == this.checkedOutputCol) {
-        let colName = this.checkedOutputCol;
-        alert("Izabrali ste istu kolonu (" + colName + ") kao ulaznu i izlaznu iz mreže. Korigujte izbor.");
-        return;
-      }
-    }
-  }
 }
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;
   }
 
 }
diff --git a/frontend/src/app/_services/models.service.spec.ts b/frontend/src/app/_services/models.service.spec.ts
new file mode 100644
index 00000000..b5b25752
--- /dev/null
+++ b/frontend/src/app/_services/models.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ModelsService } from './models.service';
+
+describe('ModelsService', () => {
+  let service: ModelsService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ModelsService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_services/models.service.ts b/frontend/src/app/_services/models.service.ts
new file mode 100644
index 00000000..bd91a811
--- /dev/null
+++ b/frontend/src/app/_services/models.service.ts
@@ -0,0 +1,18 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import Model from '../_data/Model';
+import { AuthService } from './auth.service';
+import { API_SETTINGS } from 'src/config';
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ModelsService {
+
+  constructor(private http: HttpClient, private authService: AuthService) { }
+
+  addModel(model: Model) {
+    return this.http.post(`${API_SETTINGS.apiURL}/model/sendModel`, model, { headers: this.authService.authHeader(), responseType: 'text' });
+  }
+}
diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html
index 7f2d4225..35e5adb1 100644
--- a/frontend/src/app/app.component.html
+++ b/frontend/src/app/app.component.html
@@ -1,4 +1,4 @@
 <app-navbar></app-navbar>
-<div class="mat-app-background container h-100">
+<div class="container h-100">
     <router-outlet></router-outlet>
 </div>
\ No newline at end of file
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index b671a2a7..d37ab6f1 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -1,5 +1,3 @@
-/* You can add global styles to this file, and also import other style files 
-
-html, body { height: 100%; }
-body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
-*/
+body {
+    background-image: url('/assets/images/add_model_background.jpg');
+}
\ No newline at end of file