Merge branch 'dev' of http://gitlab.pmf.kg.ac.rs/igrannonica/neuronstellar into dev

13 files changed, 345 insertions, 218 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.css b/frontend/src/app/_elements/dataset-load/dataset-load.component.css
index e69de29b..05819702 100644
--- a/frontend/src/app/_elements/dataset-load/dataset-load.component.css
+++ b/frontend/src/app/_elements/dataset-load/dataset-load.component.css
@@ -0,0 +1,6 @@
+#divInputs {
+    margin-left: 20px;
+}
+#divOutputs {
+    margin-left: 20px;
+}
\ No newline at end of file
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 c89add43..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,19 +1,32 @@
 <div>
 
-  <input style="display: inline-block; width:350px;" list=delimiterOptions
+  <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"
     (input)="update()">
-  <datalist id=delimiterOptions>
-    <option *ngFor="let option of delimiterOptions">{{option}}</option>
-  </datalist>
-  &nbsp;&nbsp;&nbsp;&nbsp;
-  <label for="checkboxHeader">Da li .csv ima header?</label> &nbsp;
-  <input (input)="update()" [(ngModel)]="hasHeader" type="checkbox" value="" id="checkboxHeader" checked>
-  <br><br>
+    <datalist id=delimiterOptions>
+      <option *ngFor="let option of delimiterOptions">{{option}}</option>
+    </datalist>  &nbsp;&nbsp;&nbsp;&nbsp;
+ 
+    <label for="type" class="form-check-label">Da li .csv ima header?
+      <input class="mx-3 form-check-input" type="checkbox" (input)="update()" [(ngModel)]="hasHeader" type="checkbox" value="" id="checkboxHeader" checked>
+    </label> &nbsp;&nbsp;&nbsp;&nbsp;
 
-  <input id="fileInput" class="form-control mb-5" type="file" class="upload" (change)="changeListener($event)" accept=".csv">
-
-  <table *ngIf="csvRecords.length > 0 && hasHeader" class="table table-bordered table-light mt-5">
+    <input id="fileInput" class="form-control" type="file" class="upload" (change)="changeListener($event)" accept=".csv">
+  </div>
+  
+  <table *ngIf="csvRecords.length > 0 && hasHeader" class="table table-bordered table-light my-4">
     <thead>
       <tr>
         <th *ngFor="let item of csvRecords[0]; let i = index">{{item}}</th>
@@ -26,7 +39,7 @@
     </tbody>
   </table>
 
-  <table *ngIf="csvRecords.length > 0 && !hasHeader" class="table table-bordered table-light mt-5">
+  <table *ngIf="csvRecords.length > 0 && !hasHeader" class="table table-bordered table-light mt-4">
     <tbody>
       <tr *ngFor="let row of csvRecords | slice:0:10">
         <td *ngFor="let col of row">{{col}}</td>
@@ -39,4 +52,6 @@
     {{rowsNumber}} x {{colsNumber}}
   </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 cde3e8b1..8465c3d6 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 { Component, EventEmitter, Output, ViewChild } from '@angular/core';
 import { NgxCsvParser, NgxCSVParserError } from 'ngx-csv-parser';
+import Dataset from 'src/app/_data/Dataset';
 
 @Component({
   selector: 'app-dataset-load',
@@ -8,6 +9,8 @@ import { NgxCsvParser, NgxCSVParserError } from 'ngx-csv-parser';
 })
 export class DatasetLoadComponent {
 
+  @Output() loaded = new EventEmitter<string>();
+
   delimiter: string = "";
   delimiterOptions: Array<string> = [",", ";", "\t", "razmak", "|"]; //podrazumevano ","
 
@@ -20,7 +23,10 @@ export class DatasetLoadComponent {
   rowsNumber: number = 0;
   colsNumber: number = 0;
 
+  dataset: Dataset;
+
   constructor(private ngxCsvParser: NgxCsvParser) {
+    this.dataset = new Dataset();
   }
 
   @ViewChild('fileImportInput', { static: false }) fileImportInput: any;
@@ -46,9 +52,14 @@ export class DatasetLoadComponent {
         else 
           this.rowsNumber = this.csvRecords.length;
         this.colsNumber = this.csvRecords[0].length;
+
+        this.dataset.header = this.csvRecords[0];
+
+        this.loaded.emit("loaded");
       }
     }, (error: NgxCSVParserError) => {
       console.log('Error', error);
     });
   }
+
 }
diff --git a/frontend/src/app/_modals/login-modal/login-modal.component.ts b/frontend/src/app/_modals/login-modal/login-modal.component.ts
index 87686f10..d17d7017 100644
--- a/frontend/src/app/_modals/login-modal/login-modal.component.ts
+++ b/frontend/src/app/_modals/login-modal/login-modal.component.ts
@@ -25,13 +25,16 @@ export class LoginModalComponent implements OnInit {
   }
 
   doLogin() {
-    this.authService.login(this.username, this.password).subscribe((response) => { //ako nisu ok podaci, ne ide hide nego mora opet da ukucava!!!!podesi
-      console.log(response);
-      this.authService.authenticate(response);
-      (<HTMLSelectElement>document.getElementById('closeButton')).click();
-    }, error => {
-      console.warn(error); //NETACNI PODACI
-    });
+    if (this.username.length > 0 && this.password.length > 0) {
+      this.authService.login(this.username, this.password).subscribe((response) => { //ako nisu ok podaci, ne ide hide nego mora opet da ukucava!!!!podesi
+        console.log(response);
+        this.authService.authenticate(response);
+        (<HTMLSelectElement>document.getElementById('closeButton')).click();
+      }, error => {
+        console.warn(error); //NETACNI PODACI
+      });
+    }
+    
   }
   resetData() {
     this.username = '';
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 e69de29b..5184733d 100644
--- a/frontend/src/app/_pages/add-model/add-model.component.css
+++ b/frontend/src/app/_pages/add-model/add-model.component.css
@@ -0,0 +1,14 @@
+#header {
+    background-color: #003459;
+    padding-top: 25px;
+    padding-bottom: 20px;
+}
+#header h1 {
+    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+    text-align: center;
+    color: white;
+}
+
+#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 08e27dd7..f5270127 100644
--- a/frontend/src/app/_pages/add-model/add-model.component.html
+++ b/frontend/src/app/_pages/add-model/add-model.component.html
@@ -1,190 +1,177 @@
-<div class="container p-3" style="background-color: rgb(249, 251, 253); min-height: 100%;">
-
-    <h2 class="my-4 text-primary"> Nov model: </h2>
-    <div class="form-group row align-items-center">
-        <label for="name" class="col-sm-2 col-form-label col-form-label-lg">Naziv</label>
-        <div class="col-sm-7">
-            <input type="text" class="form-control form-control-lg" name="name" placeholder="Naziv..."
-                [(ngModel)]="newModel.name">
-        </div>
-
-        <div class="col-sm-3">
-            <input type="text" class="form-control-plaintext text-center" id="dateCreated" placeholder="--/--/--"
-                value="{{newModel.dateCreated | date: 'dd/MM/yyyy'}}" readonly>
-        </div>
-    </div>
-
-    <div class="form-group row my-2">
-        <label for="desc" class="col-sm-2 col-form-label">Opis</label>
-        <div class="col-sm-10">
-            <textarea class="form-control" name="desc" rows="3" [(ngModel)]="newModel.description"></textarea>
-        </div>
-    </div>
-
-    <!--<div class="form-group row">
-    <label for="value" class="col-4">Vrednost</label>
-    <div class="input-group">
-        <input type="number" min="0" class="form-control" name="value" placeholder="Vrednost..."
-            [(ngModel)]="newModel.value">
-        <div class="input-group-prepend">
-            <span class="input-group-text">#</span>
-        </div>
-        <input type="number" min="1" class="form-control" name="count" placeholder="Br." [(ngModel)]="newModel.count">
-        <input type="text" class="form-control" name="sum" placeholder="Suma"
-            value="=({{newModel.value * newModel.count}})" readonly>
-        </div>
-    </div>-->
-
-    <div class="my-4">
-        <label for="dataset">Izvor podataka:</label>
-        <app-dataset-load id="dataset"></app-dataset-load>
-    </div>
-
-    <div class="form-group row my-2">
-        <div class="col-sm-2 col-form-label">
-            <label for="type" class="form-check-label">Automatska podela test skupa:
-                <input class="mx-3 form-check-input" type="checkbox" [checked]="newModel.randomTestSet"
-                    (change)="newModel.randomTestSet = !newModel.randomTestSet">
-            </label>
-
-        </div>
-        <div>
-            <mat-slider min="0.1" max="0.9" step="0.1" value="0.2" name="randomTestSetDistribution" thumbLabel
-                class="w-50" [disabled]="!newModel.randomTestSet" [(ngModel)]="newModel.randomTestSetDistribution">
-            </mat-slider>
-        </div>
-    </div>
-
-    <h3> Parametri treniranja </h3>
-
-    <div class="form-group row my-2">
-        <label for="type" class="col-sm-2 col-form-label">Tip mreže: </label>
-        <div class="col-sm-10">
-            <select id=typeOptions class="form-control" name="type" [(ngModel)]="newModel.type">
-                <option *ngFor="let option of Object.keys(ANNType); let optionName of Object.values(ANNType)"
-                    [value]="option">
-                    {{ optionName }}
-                </option>
-            </select>
-        </div>
-    </div>
-
-    <div class="form-group row my-2">
-        <label for="encoding" class="col-sm-2 col-form-label">Enkoding: </label>
-        <div class="col-sm-10">
-            <select id=encodingOptions class="form-control" name="encoding" [(ngModel)]="newModel.encoding">
-                <option *ngFor="let option of Object.keys(Encoding); let optionName of Object.values(Encoding)"
-                    [value]="option">
-                    {{ optionName }}
+<div id="header">
+    <h1>Napravite svoj model veštačke neuronske mreže</h1>
+</div>
+
+<div id="wrapper">
+    
+    <div id="container" class="container p-5" style="background-color: white; min-height: 100%;">
+        
+        <div class="form-group row mb-4 d-flex"> <!--justify-content-center-->
+            <h2 class="col-sm-2" style="color: #00171f"> Nov model: </h2>
+            <div class="col-sm-3">
+                <div class="mb-4">
+                    <label for="name" class="col-form-label">Naziv modela:</label>
+                    <input type="text" class="form-control" name="name" placeholder="Naziv..."
+                        [(ngModel)]="newModel.name">
+                </div>
+                <div class="d-inline-flex align-items-center">
+                    <label for="dateCreated" class="col-form-label">Datum:</label> &nbsp;&nbsp;
+                    <input type="text" class="form-control-plaintext" id="dateCreated" placeholder="--/--/--"
+                        value="{{newModel.dateCreated | date: 'dd/MM/yyyy'}}" readonly>
+                </div>
+            </div>
+            <div class="col-sm-5">
+                <label for="desc" class="col-sm-2 col-form-label">Opis:</label>
+                <div>
+                    <textarea class="form-control" name="desc" rows="3" [(ngModel)]="newModel.description"></textarea>
+                </div>
+            </div>
+        </div>
+    
+        <div class="my-5 justify-content-center">
+            <h2>Izvor podataka:</h2>
+            <app-dataset-load id="dataset" (loaded)="datasetLoaded = true"></app-dataset-load>
+        </div>
+
+        <div *ngIf="datasetLoaded" class="mt-2">
+            <div *ngIf="datasetLoadComponent" 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>
+
+        <div class="row">
+            <div class="col-2 mt-4">
+                <label for="type" class="col-form-label">Tip mreže: </label>
+                <select id=typeOptions class="form-control" name="type" [(ngModel)]="newModel.type">
+                    <option *ngFor="let option of Object.keys(ANNType); let optionName of Object.values(ANNType)"
+                        [value]="option">
+                        {{ optionName }}
+                    </option>
+                </select>
+            </div>
+            <div class="col-1 mt-4">
+                <label for="encoding" class="col-form-label">Enkoding: </label>
+                <select id=encodingOptions class="form-control" name="encoding" [(ngModel)]="newModel.encoding">
+                    <option *ngFor="let option of Object.keys(Encoding); let optionName of Object.values(Encoding)"
+                        [value]="option">
+                        {{ optionName }}
+                    </option>
+                </select>
+            </div>
+            <div class="col-1 mt-4">
+                <label for="optimizer" class="col-form-label">Optimizacija: </label>
+                <select id=optimizerOptions class="form-control" name="optimizer" [(ngModel)]="newModel.optimizer">
+                    <option *ngFor="let option of Object.keys(Optimizer); let optionName of Object.values(Optimizer)"
+                        [value]="option">
+                        {{ optionName }}
+                    </option>
+                </select>
+            </div>
+            <div class="col mt-4"> 
+                <label for="lossFunction" class="col-form-label">Funkcija obrade gubitka: </label>
+                <select id=lossFunctionOptions class="form-control" name="lossFunction" [(ngModel)]="newModel.lossFunction">
+                    <option *ngFor="let option of Object.keys(LossFunction); let optionName of Object.values(LossFunction)"
+                        [value]="option">
+                        {{ optionName }}
+                    </option>
+                </select>
+            </div>
+            <div class="col-2">
+                <label for="inputLayerActivationFunction" class="col-form-label">Funkcija aktivacije<br>ulaznog sloja:</label>
+                <select id=inputLayerActivationFunctionOptions class="form-control" name="inputLayerActivationFunction"
+                    [(ngModel)]="newModel.inputLayerActivationFunction">
+                    <option
+                        *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)"
+                        [value]="option">
+                        {{ optionName }}
+                    </option>
+                </select>
+            </div>
+            <div class="col">
+                <label for="hiddenLayerActivationFunction" class="col-form-label">Funkcija aktivacije<br>skrivenih slojeva:</label>
+                <select id=hiddenLayerActivationFunctionOptions class="form-control" name="hiddenLayerActivationFunction"
+                    [(ngModel)]="newModel.hiddenLayerActivationFunction">
+                    <option
+                        *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)"
+                        [value]="option">
+                        {{ optionName }}
                 </option>
-            </select>
-        </div>
-    </div>
-
-    <div class="form-group row my-2">
-        <label for="optimizer" class="col-sm-2 col-form-label">Optimizacija: </label>
-        <div class="col-sm-10">
-            <select id=optimizerOptions class="form-control" name="optimizer" [(ngModel)]="newModel.optimizer">
-                <option *ngFor="let option of Object.keys(Optimizer); let optionName of Object.values(Optimizer)"
-                    [value]="option">
-                    {{ optionName }}
-                </option>
-            </select>
-        </div>
-    </div>
-
-    <div class="form-group row my-2">
-        <label for="lossFunction" class="col-sm-2 col-form-label">Funkcija obrade gubitka: </label>
-        <div class="col-sm-10">
-            <select id=lossFunctionOptions class="form-control" name="lossFunction" [(ngModel)]="newModel.lossFunction">
-                <option *ngFor="let option of Object.keys(LossFunction); let optionName of Object.values(LossFunction)"
-                    [value]="option">
-                    {{ optionName }}
-                </option>
-            </select>
-        </div>
-    </div>
-
-    <div class="form-group row my-2">
-        <label for="inputNeurons" class="col-sm-2 col-form-label">Broj ulaznih neurona: </label>
-        <div class="col-sm-10">
-            <input type="number" min="1" class="form-control" name="inputNeurons" [(ngModel)]="newModel.inputNeurons">
-        </div>
-    </div>
-
-    <div class="form-group row my-2">
-        <label for="inputLayerActivationFunction" class="col-sm-2 col-form-label">Funkcija aktivacije ulaznog sloja:
-        </label>
-        <div class="col-sm-10">
-            <select id=inputLayerActivationFunctionOptions class="form-control" name="inputLayerActivationFunction"
-                [(ngModel)]="newModel.inputLayerActivationFunction">
-                <option
-                    *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)"
-                    [value]="option">
-                    {{ optionName }}
-                </option>
-            </select>
-        </div>
-    </div>
-
-    <div class="form-group row my-2">
-        <label for="hiddenLayerNeurons" class="col-sm-2 col-form-label">Broj neurona skrivenih slojeva: </label>
-        <div class="col-sm-10">
-            <input type="number" min="1" class="form-control" name="hiddenLayerNeurons"
-                [(ngModel)]="newModel.hiddenLayerNeurons">
-        </div>
-    </div>
-
-    <div class="form-group row my-2">
-        <label for="hiddenLayerActivationFunction" class="col-sm-2 col-form-label">Funkcija aktivacije skrivenih
-            slojeva:
-        </label>
-        <div class="col-sm-10">
-            <select id=hiddenLayerActivationFunctionOptions class="form-control" name="hiddenLayerActivationFunction"
-                [(ngModel)]="newModel.hiddenLayerActivationFunction">
-                <option
-                    *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)"
-                    [value]="option">
-                    {{ optionName }}
-                </option>
-            </select>
-        </div>
-    </div>
-
-    <div class="form-group row my-2">
-        <label for="hiddenLayers" class="col-sm-2 col-form-label">Broj skrivenih slojeva: </label>
-        <div class="col-sm-10">
-            <input type="number" min="1" class="form-control" name="hiddenLayers" [(ngModel)]="newModel.hiddenLayers">
-        </div>
-    </div>
-
-    <div class="form-group row my-2">
-        <label for="outputLayerActivationFunction" class="col-sm-2 col-form-label">Funkcija aktivacije izlaznog
-            sloja:
-        </label>
-        <div class="col-sm-10">
-            <select id=outputLayerActivationFunctionOptions class="form-control" name="outputLayerActivationFunction"
-                [(ngModel)]="newModel.outputLayerActivationFunction">
-                <option
-                    *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)"
-                    [value]="option">
-                    {{ optionName }}
-                </option>
-            </select>
-        </div>
-    </div>
-
-    <div class="form-group row my-2">
-        <label for="batchSize" class="col-sm-2 col-form-label">Broj uzorka po iteraciji: </label>
-        <div class="col-sm-10">
-            <input type="number" min="1" class="form-control" name="batchSize" [(ngModel)]="newModel.batchSize">
-        </div>
-    </div>
-
-    <div class=" form-group row my-4">
-        <div class="col-4"></div>
-        <button class="btn btn-lg btn-primary col-4" (click)="addModel();">Dodaj</button>
-        <div class="col-4"></div>
-    </div>
-
-</div>
\ No newline at end of file
+                </select>
+            </div>
+            <div class="col">
+                <label for="outputLayerActivationFunction" class="col-form-label">Funkcija aktivacije<br>izlaznog sloja:</label>
+                <select id=outputLayerActivationFunctionOptions class="form-control" name="outputLayerActivationFunction"
+                    [(ngModel)]="newModel.outputLayerActivationFunction">
+                    <option
+                        *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)"
+                        [value]="option">
+                        {{ optionName }}
+                    </option>
+                </select>
+            </div>
+        </div>
+
+        <div class="row mt-5">
+            <div class="col-2">
+                <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">
+                <label for="hiddenLayers" class="col-form-label">Broj skrivenih slojeva: </label>
+                <input type="number" min="1" class="form-control" name="hiddenLayers" [(ngModel)]="newModel.hiddenLayers">
+            </div>
+            <div class="col-3 ">
+                <label for="hiddenLayerNeurons" class="col-form-label">Broj neurona skrivenih slojeva: </label>
+                <input type="number" min="1" class="form-control" name="hiddenLayerNeurons" [(ngModel)]="newModel.hiddenLayerNeurons">
+            </div>
+            <div class="col-2">
+                <label for="batchSize" class="col-form-label">Broj uzorka po iteraciji: </label>
+                <input type="number" min="1" class="form-control" name="batchSize" [(ngModel)]="newModel.batchSize">
+            </div>
+            <div class="col-3 mt-1">
+                <label for="type" class="form-check-label mb-3">&nbsp;&nbsp;Podela test skupa:
+                    <input class="mx-3 form-check-input" type="checkbox" [checked]="newModel.randomTestSet"
+                        (change)="newModel.randomTestSet = !newModel.randomTestSet">
+                </label>
+                <mat-slider min="0.1" max="0.9" step="0.1" value="0.2" name="randomTestSetDistribution" thumbLabel
+                     [disabled]="!newModel.randomTestSet" [(ngModel)]="newModel.randomTestSetDistribution">
+                </mat-slider>
+            </div>
+        </div>
+
+        <br><br>
+        <div class="form-group row mt-5">
+            <div class="col-4"></div>
+            <button class="btn btn-lg col-4" style="background-color:#003459; color:white;" (click)="addModel();">Napravi model</button>
+            <div class="col-4"></div>
+        </div>
+
+    </div>
+</div>
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..c18ad324 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,10 @@ import { ANNType, Encoding, ActivationFunction, LossFunction, Optimizer } from '
 })
 export class AddModelComponent implements OnInit {
 
-  newModel: Model
+  @ViewChild(DatasetLoadComponent) datasetLoadComponent?: DatasetLoadComponent;
+  datasetLoaded: boolean = false;
+
+  newModel: Model;
 
   ANNType = ANNType;
   Encoding = Encoding;
@@ -18,7 +24,7 @@ export class AddModelComponent implements OnInit {
   Optimizer = Optimizer;
   Object = Object;
 
-  constructor() {
+  constructor(private models: ModelsService) {
     this.newModel = new Model();
   }
 
@@ -26,7 +32,54 @@ export class AddModelComponent implements OnInit {
   }
 
   addModel() {
-    //TODO
+    if (this.datasetLoadComponent)
+      this.models.addDataset(this.datasetLoadComponent?.dataset);
+
+    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/_pages/home/home.component.html b/frontend/src/app/_pages/home/home.component.html
index b17b9a56..274f0fd8 100644
--- a/frontend/src/app/_pages/home/home.component.html
+++ b/frontend/src/app/_pages/home/home.component.html
@@ -1,4 +1,4 @@
-<div class="d-flex flex-column align-items-center">
+<div class="d-flex flex-column align-items-center bg-light">
     <img src="../../../assets/svg/logo.svg" class="bi me-2" width="256" height="256" role="img">
     <div *ngIf="shared.loggedIn" class="d-flex flex-column align-items-center">
         <h2 class="my-4">Započnite sa treniranjem!</h2>
diff --git a/frontend/src/app/_services/auth-guard.service.ts b/frontend/src/app/_services/auth-guard.service.ts
index b6d3678d..057996e0 100644
--- a/frontend/src/app/_services/auth-guard.service.ts
+++ b/frontend/src/app/_services/auth-guard.service.ts
@@ -15,7 +15,7 @@ export class AuthGuardService implements CanActivate {
     if (this.auth.isAuthenticated()) {
       return true;
     }
-    this.router.navigate(['login']);
+    this.router.navigate(['']);
     return false;
   }
 }
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..f85ca44e
--- /dev/null
+++ b/frontend/src/app/_services/models.service.ts
@@ -0,0 +1,22 @@
+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';
+import Dataset from '../_data/Dataset';
+
+
+@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' });
+  }
+  addDataset(dataset: Dataset) {
+    return this.http.post(`${API_SETTINGS.apiURL}/model/uploadDataset`, dataset, { 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